Line Clamp

Level: molecule.

Purpose and use

component.line-clamp-popup is the local Table-style informational surface for showing the complete text of a clipped table-cell value. It wraps projected cell content and opens only for the marked element whose rendered box is actually clipped.

Use it for a table title, numeric value, native link label, or description that must stay compact until a pointer reveals its complete text. Do not use it as a generic Popup, Tooltip, modal, rich-content overlay, or an implementation of the unimplemented Figma Dropdown variants.

Anatomy and behavior

• wbl-line-clamp-popup supplies the overlay origin around projected cell content. [wblLineClampContent] marks the exact descendant whose dimensions are measured and whose trimmed textContent is mirrored in the popup.
• Pointer hover opens the Table surface only when the marked element is clipped horizontally (scrollWidth > clientWidth) or vertically (scrollHeight > clientHeight). Empty text does not open a popup.
• The CDK overlay's primary position is the origin cell's top-left corner. It may be pushed by CDK to remain in the viewport.
• Leaving the cell schedules closing. Entering the popup cancels that close, so it stays visible while the pointer is over either the cell or popup; leaving the popup closes it. A ResizeObserver closes an already open popup if its active source ceases to be clipped.
• The current Table Cell integration marks its ordinary title (including text, number, and link values) and optional description individually. The popup shows the complete value of whichever marked item is clipped, not the whole cell or an unrelated slot.

Variants and token usage

The local implementation exposes the Figma Table treatment only. It has no public type, size, caption, or description property: those names remain Figma-specific and are not an Angular API.

• geometry: 320px preferred inline width and 120px minimum width;
• surface, border, elevation, and radius: --color-background-dropdown, --color-stroke-secondary, --shadow-dropdown, and --radius-s;
• padding: --space-300 inline and --space-400 block;
• copy: --typography-description-puma and --color-text-icon-primary.

The verified Figma source also has Dropdown sizes L, M, and S, plus optional caption and description. They have no local runtime implementation or API; retain that evidence in the Figma sidecar rather than approximating it in this component.

Accessibility

Line Clamp is pointer-only: it adds no focus target, keyboard trigger, focus movement, or role. Its transient overlay is aria-hidden="true"; it is not an accessible Tooltip or a second reading path for assistive technology. A marked native link retains its own link semantics in the Table Cell.

Figma source

• Published 🟢 🚛 LineClampPopup component set in WB Logistics UI-kit: node 8658:18584, component key 72363209535de503d18e8c769a9c9f8301184c89.

The separate Figma assembly sidecar preserves the published Figma variants and visual evidence; it is not the local Angular API.

Local component contract

This is the active owned contract for component.line-clamp-popup. The API below is verified against the current local implementation, focused test, and Storybook story.

Classes and selectors

• WblLineClampPopupComponent — wbl-line-clamp-popup (src/app/design-system/patterns/line-clamp-popup/line-clamp-popup.component.ts).
• WblLineClampContentDirective — [wblLineClampContent] (src/app/design-system/patterns/line-clamp-popup/line-clamp-popup.component.ts).

Inputs, models, and outputs

• Inputs: none.
• Models: none.
• Outputs: none.

Slots and projection markers

• WblLineClampPopupComponent: <ng-content /> projects the cell content.
• Apply WblLineClampContentDirective to each descendant whose own clipping and full text should control the popup. It is an internal integration marker, not a consumer-configurable Table Cell input or output.

Local evidence

• Code: src/app/design-system/patterns/line-clamp-popup/line-clamp-popup.component.ts.
• Focused test: src/app/design-system/patterns/line-clamp-popup/line-clamp-popup.component.spec.ts.
• Public export: export * from './patterns/line-clamp-popup/line-clamp-popup.component'; in src/app/design-system/index.ts.
• Storybook: storybook/stories/line-clamp-popup.stories.ts (Design System/Patterns/wbl-line-clamp-popup).

Open questions

• Whether an accessible non-pointer disclosure path is needed in a future product scenario. The current requested behavior deliberately has none.
• Whether the Figma Dropdown variants need a separate local API and interaction contract; they are not covered by the current Table implementation.

M-002 cell alignment and motion

The Table treatment offsets its overlay by -1px on inline-start and block-start, sizes it to the measured originating Table Cell width, and aligns its border with the cell's top edge. Enter and leave use opacity plus translateY(var(--space-50)) over 140ms with --ease-standard; the existing pointer transfer between origin and popup continues to prevent premature close.

The implementation preserves clipping checks, ResizeObserver close, aria-hidden and the current pointer-only accessibility boundary. With prefers-reduced-motion: reduce, the transition is disabled. Geometry and motion are internal and add no public input or output.