@cl-light-ds/ui 0.1.0 → 0.3.0

package/src/components/select/CHANGELOG.md

@@ -1,39 +1,39 @@
-# Changelog
-
-All notable changes to the `Select` component will be documented in this file.
-
-## Date 14th Sep 2026
-## Figma alignment (node 2329-7946) + props audit
-
-### Fixed
-
-- `SelectTrigger`: vertical padding was `py-2` (8px); Figma specifies `py-1` (4px) on all sizes.
-- `SelectTrigger`: `size="lg"` had no explicit height at all (`h-9`/`h-8` were defined, `h-10` for `lg` was missing) — the Large variant silently fell back to whatever height its padding produced instead of Figma's 40px. Added `data-[size=lg]:h-10`.
-- `SelectTrigger`: focus-visible style used the plain-form-field pattern (`ring-ring/50`, opacity-blended). Figma's focus state is a solid `border-ring` + 2px `chart-1` shadow — the same "interactive control" pattern already used by `Button`, `Card`, and `DropdownMenuItem`. Switched to `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1`.
-- `SelectTrigger`: disabled state relied only on `opacity-50`. Figma shows an explicit muted background/text. Added `disabled:bg-muted disabled:text-muted-foreground`, matching `Input`'s existing disabled convention.
-- `SelectTrigger`: removed a stray `-mr-0.75` negative margin on the chevron icon (not present in Figma) and dropped a few classes that `cn()`/tailwind-merge were already silently overriding (`rounded-md`, `pr-2`, `pl-2.5`).
-- `SelectItem`: `rounded-sm` → `rounded-lg` and `text-xs` → `text-sm`, matching Figma's 8px item radius and 14px item text — `ComboboxItem` already used the correct values, `SelectItem` had drifted from it.
-- `SelectContent`: the viewport had no padding at all unless items were wrapped in a `SelectGroup` (which carries its own `p-1`). A plain, ungrouped item list — the common case — sat flush against the popover's rounded corners. Added `p-1 gap-1` to the viewport so grouped and ungrouped content both get consistent spacing.
-
-### Changed
-
-- **`size` now actually propagates.** `Select`, `SelectTrigger`, and `SelectContent` each declared an independent `size` prop, but nothing ever synced them — `data-size` on the `Select` wrapper was purely decorative (confirmed by tracing `@data-slot/select`'s compiled runtime, which syncs `disabled` and `defaultValue` from the wrapper but never touched `size`). Setting `size="lg"` only on `<Select>` — the one place a consumer would naturally expect to control it — had zero visual effect. `Select`'s mount script now mirrors its `data-size` onto its `SelectTrigger` descendant at runtime, so `size` set on `<Select>` is authoritative; `SelectTrigger`'s own `size` prop is still available for standalone use outside a `Select` wrapper.
-- Removed the unused `size` prop from `SelectContent` — nothing in its class list ever branched on it, and Figma doesn't vary dropdown-item sizing by Select size either. A prop with no effect is worse than no prop for a team that needs to know which controls actually do something.
-
-### Added
-
-- `Select`'s JSDoc now documents every sub-component's props in an `@api` table (mirroring `Field`'s format), and calls out which state is auto-synced from `<Select>` (`disabled`, `defaultValue`, and now `size`) versus what must be set per sub-component.
-- Added a "With Label" example to `Select`'s JSDoc and to its Storybook page. `Select` has no label prop by design — label pairing stays composition-only via `Label`/`FieldLabel`, the same convention `Input` already uses (also already documented as the recommended pairing in `Field`'s own docs).
-
-### Not changed (checked, no gap found)
-
-- `border-input` resolves to the same `zinc-200` as `--border` — already matches Figma.
-- The trigger's Hover state is visually identical to Default in light mode in Figma — matches the component's existing dark-mode-only hover classes.
-- Figma renders item hover text as `accent-foreground`; the code uses `foreground`. Left as-is since `ComboboxItem` makes the same choice — a consistent system-wide simplification, not a `Select`-specific bug.
-- `disabled` on `<Select>` already correctly disables `SelectTrigger` at runtime (unlike `size`) — no fix needed, just now documented explicitly.
-
-## Unreleased
-
-### Fixed
-
-- Restored interactivity: the component's `<script>` was importing its runtime behavior from `@repo/lib/select`, a module that never existed in this repo — it was aliased to a no-op stub so builds wouldn't crash, leaving Select fully static. Fixed the import to point at `@data-slot/select` (the real published package the component's API already matched) and added it as a dependency. Select now opens/closes, supports keyboard navigation, and fires `select:change` / `select:open-change` as designed.
+# Changelog
+
+All notable changes to the `Select` component will be documented in this file.
+
+## Date 14th Sep 2026
+## Figma alignment (node 2329-7946) + props audit
+
+### Fixed
+
+- `SelectTrigger`: vertical padding was `py-2` (8px); Figma specifies `py-1` (4px) on all sizes.
+- `SelectTrigger`: `size="lg"` had no explicit height at all (`h-9`/`h-8` were defined, `h-10` for `lg` was missing) — the Large variant silently fell back to whatever height its padding produced instead of Figma's 40px. Added `data-[size=lg]:h-10`.
+- `SelectTrigger`: focus-visible style used the plain-form-field pattern (`ring-ring/50`, opacity-blended). Figma's focus state is a solid `border-ring` + 2px `chart-1` shadow — the same "interactive control" pattern already used by `Button`, `Card`, and `DropdownMenuItem`. Switched to `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1`.
+- `SelectTrigger`: disabled state relied only on `opacity-50`. Figma shows an explicit muted background/text. Added `disabled:bg-muted disabled:text-muted-foreground`, matching `Input`'s existing disabled convention.
+- `SelectTrigger`: removed a stray `-mr-0.75` negative margin on the chevron icon (not present in Figma) and dropped a few classes that `cn()`/tailwind-merge were already silently overriding (`rounded-md`, `pr-2`, `pl-2.5`).
+- `SelectItem`: `rounded-sm` → `rounded-lg` and `text-xs` → `text-sm`, matching Figma's 8px item radius and 14px item text — `ComboboxItem` already used the correct values, `SelectItem` had drifted from it.
+- `SelectContent`: the viewport had no padding at all unless items were wrapped in a `SelectGroup` (which carries its own `p-1`). A plain, ungrouped item list — the common case — sat flush against the popover's rounded corners. Added `p-1 gap-1` to the viewport so grouped and ungrouped content both get consistent spacing.
+
+### Changed
+
+- **`size` now actually propagates.** `Select`, `SelectTrigger`, and `SelectContent` each declared an independent `size` prop, but nothing ever synced them — `data-size` on the `Select` wrapper was purely decorative (confirmed by tracing `@data-slot/select`'s compiled runtime, which syncs `disabled` and `defaultValue` from the wrapper but never touched `size`). Setting `size="lg"` only on `<Select>` — the one place a consumer would naturally expect to control it — had zero visual effect. `Select`'s mount script now mirrors its `data-size` onto its `SelectTrigger` descendant at runtime, so `size` set on `<Select>` is authoritative; `SelectTrigger`'s own `size` prop is still available for standalone use outside a `Select` wrapper.
+- Removed the unused `size` prop from `SelectContent` — nothing in its class list ever branched on it, and Figma doesn't vary dropdown-item sizing by Select size either. A prop with no effect is worse than no prop for a team that needs to know which controls actually do something.
+
+### Added
+
+- `Select`'s JSDoc now documents every sub-component's props in an `@api` table (mirroring `Field`'s format), and calls out which state is auto-synced from `<Select>` (`disabled`, `defaultValue`, and now `size`) versus what must be set per sub-component.
+- Added a "With Label" example to `Select`'s JSDoc and to its Storybook page. `Select` has no label prop by design — label pairing stays composition-only via `Label`/`FieldLabel`, the same convention `Input` already uses (also already documented as the recommended pairing in `Field`'s own docs).
+
+### Not changed (checked, no gap found)
+
+- `border-input` resolves to the same `zinc-200` as `--border` — already matches Figma.
+- The trigger's Hover state is visually identical to Default in light mode in Figma — matches the component's existing dark-mode-only hover classes.
+- Figma renders item hover text as `accent-foreground`; the code uses `foreground`. Left as-is since `ComboboxItem` makes the same choice — a consistent system-wide simplification, not a `Select`-specific bug.
+- `disabled` on `<Select>` already correctly disables `SelectTrigger` at runtime (unlike `size`) — no fix needed, just now documented explicitly.
+
+## Unreleased
+
+### Fixed
+
+- Restored interactivity: the component's `<script>` was importing its runtime behavior from `@repo/lib/select`, a module that never existed in this repo — it was aliased to a no-op stub so builds wouldn't crash, leaving Select fully static. Fixed the import to point at `@data-slot/select` (the real published package the component's API already matched) and added it as a dependency. Select now opens/closes, supports keyboard navigation, and fires `select:change` / `select:open-change` as designed.

package/src/components/select/index.ts

@@ -1,8 +1,8 @@
-export { default as Select } from "./Select.astro";
-export { default as SelectTrigger } from "./SelectTrigger.astro";
-export { default as SelectValue } from "./SelectValue.astro";
-export { default as SelectContent } from "./SelectContent.astro";
-export { default as SelectItem } from "./SelectItem.astro";
-export { default as SelectGroup } from "./SelectGroup.astro";
-export { default as SelectLabel } from "./SelectLabel.astro";
-export { default as SelectSeparator } from "./SelectSeparator.astro";
+export { default as Select } from "./Select.astro";
+export { default as SelectTrigger } from "./SelectTrigger.astro";
+export { default as SelectValue } from "./SelectValue.astro";
+export { default as SelectContent } from "./SelectContent.astro";
+export { default as SelectItem } from "./SelectItem.astro";
+export { default as SelectGroup } from "./SelectGroup.astro";
+export { default as SelectLabel } from "./SelectLabel.astro";
+export { default as SelectSeparator } from "./SelectSeparator.astro";

package/src/components/separator/CHANGELOG.md

@@ -1,5 +1,5 @@
-# Changelog
-
-All notable changes to the `Separator` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Separator` component will be documented in this file.
+
+## Unreleased

package/src/components/separator/index.ts

@@ -1,2 +1,2 @@
-export { default as Separator } from "./Separator.astro";
-
+export { default as Separator } from "./Separator.astro";
+

package/src/components/skeleton/CHANGELOG.md

@@ -1,5 +1,5 @@
-# Changelog
-
-All notable changes to the `Skeleton` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Skeleton` component will be documented in this file.
+
+## Unreleased

package/src/components/skeleton/index.ts

@@ -1 +1 @@
-export { default as Skeleton } from "./Skeleton.astro";
+export { default as Skeleton } from "./Skeleton.astro";

package/src/components/slider/CHANGELOG.md

@@ -1,5 +1,5 @@
-# Changelog
-
-All notable changes to the `Slider` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Slider` component will be documented in this file.
+
+## Unreleased

package/src/components/slider/index.ts

@@ -1 +1 @@
-export { default as Slider } from "./Slider.astro";
+export { default as Slider } from "./Slider.astro";

package/src/components/spinner/CHANGELOG.md

@@ -1,5 +1,18 @@
-# Changelog
-
-All notable changes to the `Spinner` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Spinner` component will be documented in this file.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5455-18523`)
+
+Figma documents Spinner as four discrete sizes: Extra Small (12px), Small (16px), Medium (24px), Large (32px) — all rendered in a consistent primary-blue color.
+
+### Fixed
+
+- Added the missing `@figmaUrl`.
+- Default color: added `text-primary` so the spinner's `stroke="currentColor"` resolves to primary blue (`#3785e0`, confirmed against Figma) by default, matching every size shown in Figma — previously it had no default color at all and just inherited whatever ambient text color happened to be in scope.
+- Fixed a real regression that default color change caused: the storybook's own "Badge" example nests a bare `<Spinner data-icon />` inside the default (solid primary-blue) `Badge` variant — with the new default, the spinner became invisible (blue icon on blue background). Fixed by explicitly overriding it to `class="text-primary-foreground"` in that one case (both in the storybook page and the identical demo duplicated in `Spinner.astro`'s own JSDoc), matching the badge's own foreground token. All other compositions (outline/secondary badges, disabled buttons — which force `bg-muted` regardless of variant, so never collide with primary blue) were unaffected.
+
+### Notes
+
+- No new `size` prop added — the existing "use a `size-*` utility class" pattern already produces Figma's exact four sizes (`size-3`/`size-4`/`size-6`/`size-8` = 12/16/24/32px), confirmed already documented in the component's own JSDoc and storybook page. Relabeled the storybook "Size" demo with Figma's own names (Extra Small/Small/Medium/Large) for clarity.
+- Stroke width and animation were already correct — no Figma evidence suggested otherwise.

package/src/components/spinner/Spinner.astro

@@ -3,6 +3,7 @@
  * @component Spinner
  * @title Spinner
  * @description A loading indicator component that displays an animated spinning icon.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-18523
  *
  * @preview
  *
@@ -84,7 +85,7 @@
  *
  * <div class="flex items-center gap-4 [--radius:1.2rem]">
  *   <Badge>
- *     <Spinner data-icon />
+ *     <Spinner data-icon class="text-primary-foreground" />
  *     Syncing
  *   </Badge>
  *   <Badge variant="secondary">
@@ -130,5 +131,5 @@ const { class: className = "", ...props } = Astro.props;
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-slot="spinner"
   role="status"
   aria-label="Loading"
-  class={cn("", "size-4 animate-spin", className)}
+  class={cn("text-primary", "size-4 animate-spin", className)}
   {...props}><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

package/src/components/spinner/index.ts

@@ -1 +1 @@
-export { default as Spinner } from "./Spinner.astro";
+export { default as Spinner } from "./Spinner.astro";

package/src/components/sticky-surface/CHANGELOG.md

@@ -1,5 +1,5 @@
-# Changelog
-
-All notable changes to the `StickySurface` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `StickySurface` component will be documented in this file.
+
+## Unreleased

package/src/components/sticky-surface/index.ts

@@ -1,2 +1,2 @@
-export { default as StickySurface } from "./StickySurface.astro";
-
+export { default as StickySurface } from "./StickySurface.astro";
+

package/src/components/switch/CHANGELOG.md

@@ -1,9 +1,29 @@
-# Changelog
-
-All notable changes to the `Switch` component will be documented in this file.
-
-## Unreleased
-
-### Fixed
-
-- Restored interactivity: `@data-slot/switch` (already the correct import in `Switch.astro`) was never added as a dependency and was aliased to a no-op stub so builds wouldn't crash, leaving Switch fully static. Added the real package as a dependency and removed the stub alias.
+# Changelog
+
+All notable changes to the `Switch` component will be documented in this file.
+
+## Unreleased
+
+### Fixed
+
+- Restored interactivity: `@data-slot/switch` (already the correct import in `Switch.astro`) was never added as a dependency and was aliased to a no-op stub so builds wouldn't crash, leaving Switch fully static. Added the real package as a dependency and removed the stub alias.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `50-5797`)
+
+Figma documents Switch across four pages: Contents (Simple, Label, Label and Caption), States (Default, Hover, Focus, Disabled), Sizes (Small 32×20, Large 36×24), and Variants (implicit in the main component: Default/Checked).
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- `default` size track height: `h-[18.4px]` (an odd, clearly unintentional fractional value) → `h-5` (20px), matching Figma's "Small" track exactly. Width (`w-8`/32px) was already correct. Also swapped the now-equivalent `w-[32px]` for the canonical `w-8` utility.
+- Added `size="lg"` (36×24px, matching Figma's "Large") — previously only `sm`/`default` existed, with no tier matching Figma's larger documented size. The new thumb size (18px) and translate distance were derived to preserve the exact same proportions already used by `sm`/`default` (thumb = exactly half the track width in both existing tiers), confirmed against a pixel-level measurement of Figma's own Large checked-state export.
+
+### Added
+
+- A "Label and caption" storybook example (`Field`/`FieldLabel`/`FieldDescription`), matching Figma's third documented content variant — not previously demonstrated.
+
+### Notes
+
+- Track colors (`bg-primary` checked / `bg-muted` unchecked), Focus ring (`border-ring`/`ring-3 ring-ring/50`), and the Disabled treatment (`opacity-50`) all already matched Figma's tokens/visual exactly — confirmed Figma's own Disabled state screenshot shows the same washed-out/low-contrast look an opacity fade produces, unlike Checkbox/Input/RadioGroup where a flat muted-color swap was clearly evident instead.
+- `size="sm"` (24×14px) has no corresponding size in Figma (which only documents Small/Large, mapping to this component's `default`/`lg`) — flagging the naming mismatch per the recurring pattern (Accordion/Checkbox/Input/RadioGroup), not renaming here since `sm` isn't Figma-validated at all and isn't used anywhere outside its own demo.
+- Simple and Label content variants were already fully supported (a bare `Switch`, or paired with a sibling `Label`) — no changes needed.

package/src/components/switch/Switch.astro

@@ -3,7 +3,7 @@
  * @component Switch
  * @title Switch
  * @description A toggle control for switching between checked and unchecked states.
- * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2509-4236&t=YFStJ3V8fXEO8QD8-4
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=50-5797
  *
  * @status stable
  * @since 0.1.0
@@ -36,7 +36,7 @@ import { cn } from "@cl-light-ds/ui/lib/utils";
 interface Props extends HTMLAttributes<"span"> {
   class?: string;
   id?: string;
-  size?: "sm" | "default";
+  size?: "sm" | "default" | "lg";
   checked?: boolean;
   defaultChecked?: boolean;
   name?: string;
@@ -83,7 +83,7 @@ const initialChecked = checked ?? defaultChecked ?? false;
   data-unchecked={initialChecked ? undefined : "true"}
   aria-invalid={ariaInvalid}
   class={cn(
-    "data-checked:bg-primary data-unchecked:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+    "data-checked:bg-primary data-unchecked:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-5 data-[size=default]:w-8 data-[size=sm]:h-[14px] data-[size=sm]:w-6 data-[size=lg]:h-6 data-[size=lg]:w-9 peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
     className,
   )}
 >
@@ -94,7 +94,7 @@ const initialChecked = checked ?? defaultChecked ?? false;
     data-disabled={disabled ? "true" : undefined}
     data-readonly={readOnly ? "true" : undefined}
     data-required={required ? "true" : undefined}
-    class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
+    class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=lg]/switch:size-[18px] group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=lg]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 group-data-[size=lg]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
     aria-hidden="true"
   ></span>
 </span>

package/src/components/switch/index.ts

@@ -1 +1 @@
-export { default as Switch } from "./Switch.astro";
+export { default as Switch } from "./Switch.astro";

package/src/components/table/CHANGELOG.md

@@ -1,5 +1,24 @@
-# Changelog
-
-All notable changes to the `Table` component will be documented in this file.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `Table` component family (`Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`) are documented in this file.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5548-9089`)
+
+Note: Figma's own canvas for this component is named "Table (⚠️)" — the designer's own marker that this page isn't fully finalized. Aligned against what's clearly evidenced (the overall container treatment) and left ambiguous details (see Notes) rather than guess.
+
+### Fixed
+
+- Added the missing `@figmaUrl`.
+- **Removed the outer bordered/rounded card container** (`border border-border bg-background rounded-lg` on `table-container`) — Figma's table has no surrounding box at all: just plain rows with thin dividers sitting directly on the page background, confirmed from the screenshot (no visible outline around the whole table, unlike e.g. `Card`). Kept `relative w-full overflow-x-auto` for horizontal-scroll behavior on narrow screens.
+- Removed two dead, literal duplicate class strings (`Table.astro`'s `"w-full caption-bottom text-sm"` passed twice to the same `cn()` call, and `TableBody.astro`'s `"[&_tr:last-child]:border-0"` likewise) — harmless no-ops, but the same class of cleanup already done repeatedly elsewhere (Dialog/HoverCard/Popover/Item).
+
+### Notes
+
+- Row/header dividers (`border-b`), footer shading (`bg-muted/50` + `border-t`), and caption styling (`text-muted-foreground text-sm`) already matched Figma's screenshot exactly — no changes needed.
+- Figma's per-cell padding looked like it might use a flex-with-gap layout internally (fixed 120px-wide column "chips" with a 10px gap between them) rather than standard table-cell padding, which doesn't map cleanly onto a real `<table>`'s cell model — and given the page is explicitly marked unfinished, left the existing `px-2`/`p-2` cell padding as-is rather than chase a specific number off of a mockup that may not reflect the final intended markup.
+- The "Items" page's three row types (Title/Basic/Footer) are just `TableHeader`/`TableBody`/`TableFooter` row anatomy, already fully supported — no new props or components needed.
+- Row hover highlighting (`hover:bg-muted/50` on `TableRow`) was left as-is — this is a pre-existing, standard table interaction convention, not a "Hover" variant Figma separately documents (which is the category of hover state the project has been skipping elsewhere).
+
+### Fixed (follow-up)
+
+- The "Actions" example's icon-only `DropdownMenuTrigger` (an ellipsis button) was rendering two icons — `DropdownMenuTrigger` defaults `tailIcon` to `true` and auto-appends a `ChevronDown`, meant for text-label triggers, not icon-only ones. Added `tailIcon={false}` to all 5 occurrences (3 in `Table.astro`'s own JSDoc, 2 in the storybook docs page). Confirmed live: exactly one icon (`lucide-ellipsis`) now renders.

package/src/components/table/Table.astro

@@ -2,7 +2,8 @@
 /**
  * @component Table
  * @title Table
- * @description A responsive table component with compound parts for header, body, footer, and caption.
+ * @description A responsive table with compound parts. Set `interactive` to enable sorting, row selection, inline editing, tree rows, keyboard grid navigation, column resize/hide and pinned columns. Data stays server-driven: the table emits `table:*` events and the app re-renders rows.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5548-9089
  *
  * @preview
  *
@@ -185,7 +186,7 @@
  *       <TableCell>$29.99</TableCell>
  *       <TableCell class="text-right">
  *         <DropdownMenu>
- *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8"><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
+ *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8" tailIcon={false}><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
  *           <DropdownMenuContent align="end">
  *             <DropdownMenuItem>Edit</DropdownMenuItem>
  *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
@@ -200,7 +201,7 @@
  *       <TableCell>$129.99</TableCell>
  *       <TableCell class="text-right">
  *         <DropdownMenu>
- *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8"><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
+ *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8" tailIcon={false}><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
  *           <DropdownMenuContent align="end">
  *             <DropdownMenuItem>Edit</DropdownMenuItem>
  *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
@@ -215,7 +216,7 @@
  *       <TableCell>$49.99</TableCell>
  *       <TableCell class="text-right">
  *         <DropdownMenu>
- *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8"><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
+ *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8" tailIcon={false}><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
  *           <DropdownMenuContent align="end">
  *             <DropdownMenuItem>Edit</DropdownMenuItem>
  *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
@@ -227,6 +228,40 @@
  *     </TableRow>
  *   </TableBody>
  * </Table>
+ *
+ * ### Interactive (sorting, selection, inline editing)
+ *
+ * The table never sorts, pages or saves data itself. It emits events on the root and the app responds:
+ *
+ * ```astro nocollapse
+ * <Table interactive stickyHeader pinnedColumns={2} maxHeight="480px" aria-label="Invoices">
+ *   <TableBulkToolbar slot="bulk">
+ *     <Button variant="outline" size="sm">Export .csv</Button>
+ *   </TableBulkToolbar>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableSelectCell header />
+ *       <TableHead column="name" sortable resizable>Name</TableHead>
+ *       <TableHead column="status">Status</TableHead>
+ *       <TableHead column="amount" align="right" sortable>Amount</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow rowId="inv-1">
+ *       <TableSelectCell />
+ *       <TableEditableCell column="name" value="INV-00104" required />
+ *       <TableEditableCell column="status" editor="select" value="paid" options={statusOptions} />
+ *       <TableCell column="amount" align="right" numeric>$0.00</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ *
+ * <script>
+ *   const table = document.querySelector('[data-slot="table-root"]');
+ *   table.addEventListener("table:sort", (e) => refetch({ sort: e.detail }));
+ *   table.addEventListener("table:edit", (e) => e.detail.respond(api.patch(e.detail)));
+ * </script>
+ * ```
  */
 
 import { cn } from "@cl-light-ds/ui/lib/utils";
@@ -234,17 +269,90 @@ import type { HTMLAttributes } from "astro/types";
 
 interface Props extends HTMLAttributes<"table"> {
   class?: string;
+  /** Enables the table controller: sorting, selection, editing, tree rows, keyboard grid, resize/hide. */
+  interactive?: boolean;
+  /** Keeps the header row visible while the table body scrolls. Pair with `maxHeight`. */
+  stickyHeader?: boolean;
+  /** Number of leading columns pinned while scrolling horizontally. */
+  pinnedColumns?: number;
+  /** Max height of the scroll container, e.g. "480px". Needed for a sticky header inside the table. */
+  maxHeight?: string;
+  /** Marks the table busy (aria-busy) and dims the body while the server responds. */
+  loading?: boolean;
+  /** Total result count across all pages, used by the "Select all N results" banner. */
+  totalCount?: number;
+  /** Class for the outer wrapper that holds toolbar, table and pagination. */
+  rootClass?: string;
 }
 
-const { class: className = "", ...rest } = Astro.props as Props;
+const {
+  class: className = "",
+  interactive = false,
+  stickyHeader = false,
+  pinnedColumns = 0,
+  maxHeight,
+  loading = false,
+  totalCount,
+  rootClass = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasToolbar = Astro.slots.has("toolbar");
+const hasBulk = Astro.slots.has("bulk");
+const hasBanner = Astro.slots.has("banner");
+const hasPagination = Astro.slots.has("pagination");
 ---
 
-<div data-slot="table-container" class="border border-border bg-background rounded-lg relative w-full overflow-x-auto">
-  <table
-    data-slot="table"
-    class={cn("w-full caption-bottom text-sm", "w-full caption-bottom text-sm", className)}
-    {...rest}
+<div
+  data-slot="table-root"
+  data-interactive={interactive ? "" : undefined}
+  data-sticky-header={stickyHeader ? "" : undefined}
+  data-pinned-columns={pinnedColumns || undefined}
+  data-loading={loading ? "" : undefined}
+  data-total-count={totalCount}
+  class={cn("group/table relative flex w-full flex-col", rootClass)}
+>
+  {
+    (hasToolbar || hasBulk) && (
+      <div data-slot="table-toolbar-region" class="flex min-h-14 flex-col justify-center">
+        {hasToolbar && (
+          <div data-slot="table-toolbar" class="group-data-[has-selection]/table:hidden">
+            <slot name="toolbar" />
+          </div>
+        )}
+        {hasBulk && (
+          <div data-slot="table-bulk-region" class="hidden group-data-[has-selection]/table:block">
+            <slot name="bulk" />
+          </div>
+        )}
+      </div>
+    )
+  }
+  {hasBanner && <slot name="banner" />}
+  <div
+    data-slot="table-container"
+    class="relative w-full overflow-auto"
+    style={maxHeight ? `max-height: ${maxHeight}` : undefined}
   >
-    <slot />
-  </table>
+    <table
+      data-slot="table"
+      aria-busy={loading ? "true" : undefined}
+      class={cn(
+        "w-full caption-bottom border-separate border-spacing-0 text-sm",
+        "[&_tbody]:transition-opacity group-data-[loading]/table:[&_tbody]:opacity-50",
+        className,
+      )}
+      {...rest}
+    >
+      <slot />
+    </table>
+  </div>
+  {hasPagination && <slot name="pagination" />}
+  {interactive && <div data-slot="table-live" class="sr-only" aria-live="polite" aria-atomic="true" />}
 </div>
+
+<script>
+  import { initTables } from "@cl-light-ds/ui/lib/table-controller";
+
+  initTables();
+</script>

package/src/components/table/TableBody.astro

@@ -12,7 +12,6 @@ const {
 } = Astro.props as Props;
 ---
 
-<tbody data-slot="table-body" class={cn("[&_tr:last-child]:border-0", "[&_tr:last-child]:border-0", className)} {...rest}>
+<tbody data-slot="table-body" class={cn("", className)} {...rest}>
   <slot />
 </tbody>
-

package/src/components/table/TableBulkToolbar.astro

@@ -0,0 +1,37 @@
+---
+import { X } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+import { Badge } from "../badge";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  data-slot="table-bulk-toolbar"
+  role="toolbar"
+  aria-label="Bulk actions"
+  class={cn(
+    "flex min-h-14 items-center justify-between gap-3 rounded-lg border border-primary/15 bg-table-row-selected px-4 py-2",
+    className,
+  )}
+  {...rest}
+>
+  <Badge
+    as="button"
+    type="button"
+    data-table-action="clear-selection"
+    aria-label="Clear selection"
+    class="cursor-pointer"
+  >
+    <span><span data-slot="table-selection-count">0</span> selected</span>
+    <X slot="tail-icon" aria-hidden="true" />
+  </Badge>
+  <div class="flex items-center gap-3">
+    <slot />
+  </div>
+</div>

package/src/components/table/TableCell.astro

@@ -1,20 +1,44 @@
 ---
 import { cn } from "@cl-light-ds/ui/lib/utils";
 import type { HTMLAttributes } from "astro/types";
+import { cellAlign, cellBase, levelIndentStyle, type CellAlign } from "./table-cell-variants";
 
 interface Props extends HTMLAttributes<"td"> {
   class?: string;
+  /** Column key, matched against `TableHead` `column` for hide/pin/resize. */
+  column?: string;
+  align?: CellAlign;
+  /** Number content: right-aligned, semibold, tabular figures. */
+  numeric?: boolean;
+  /** Nesting level (1–3). Indents the cell content 20px per level. */
+  level?: 1 | 2 | 3;
 }
 
 const {
   class: className = "",
+  column,
+  numeric = false,
+  align = numeric ? "right" : "left",
+  level,
+  style,
   ...rest
 } = Astro.props as Props;
+
+const indent = levelIndentStyle(level);
 ---
 
 <td
   data-slot="table-cell"
-  class={cn("p-2 align-middle whitespace-nowrap font-medium [&:has([role=checkbox])]:pr-0", className)}
+  data-column={column}
+  style={indent ? [indent, typeof style === "string" ? style : ""].filter(Boolean).join("; ") : style}
+  class={cn(
+    cellBase,
+    cellAlign({ align }),
+    "h-12 py-2 font-medium",
+    numeric && "font-semibold tabular-nums",
+    "[&:has([type=checkbox])]:w-15 [&:has([type=checkbox])]:text-center",
+    className,
+  )}
   {...rest}
 >
   <slot />

package/src/components/table/TableCellText.astro

@@ -0,0 +1,17 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  /** Secondary line under the label (Figma "2-Line Text"). */
+  subtitle?: string;
+}
+
+const { class: className = "", subtitle, ...rest } = Astro.props as Props;
+---
+
+<div data-slot="table-cell-text" class={cn("flex min-w-0 flex-col gap-0.5", className)} {...rest}>
+  <span class="truncate text-sm leading-5 font-medium text-foreground"><slot /></span>
+  {subtitle && <span class="truncate text-xs leading-4 font-normal text-muted-foreground">{subtitle}</span>}
+</div>