# 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](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=8658-18584):
  node `8658:18584`, component key
  `72363209535de503d18e8c769a9c9f8301184c89`.

The separate [Figma assembly sidecar](line-clamp-popup.figma.md) 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.