@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/switch/CHANGELOG.md

@@ -1,29 +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.
-
-## 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.
+# 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

@@ -1,106 +1,106 @@
----
-/**
- * @component Switch
- * @title Switch
- * @description A toggle control for switching between checked and unchecked states.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=50-5797
- *
- * @status stable
- * @since 0.1.0
- *
- * @preview
- *
- * <div class="flex items-center gap-3">
- *   <Switch id="notifications" />
- *   <Label for="notifications">Enable notifications</Label>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Switch } from '@bejamas/ui/components/switch';
- * import { Label } from '@bejamas/ui/components/label';
- * ---
- *
- * <div class="flex items-center gap-3">
- *   <Switch id="notifications" />
- *   <Label for="notifications">Enable notifications</Label>
- * </div>
- * ```
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"span"> {
-  class?: string;
-  id?: string;
-  size?: "sm" | "default" | "lg";
-  checked?: boolean;
-  defaultChecked?: boolean;
-  name?: string;
-  value?: string;
-  uncheckedValue?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  "aria-invalid"?: boolean | "true" | "false";
-}
-
-const {
-  class: className = "",
-  id = "",
-  size = "default",
-  checked,
-  defaultChecked,
-  name,
-  value,
-  uncheckedValue,
-  disabled = false,
-  readOnly = false,
-  required = false,
-  "aria-invalid": ariaInvalid,
-  ...rest
-} = Astro.props as Props;
-
-const initialChecked = checked ?? defaultChecked ?? false;
----
-
-<span
-  {...rest}
-  id={id}
-  data-slot="switch"
-  data-size={size}
-  data-default-checked={initialChecked ? "true" : undefined}
-  data-name={name}
-  data-value={value}
-  data-unchecked-value={uncheckedValue}
-  data-disabled={disabled ? "true" : undefined}
-  data-read-only={readOnly ? "true" : undefined}
-  data-required={required ? "true" : undefined}
-  data-checked={initialChecked ? "true" : undefined}
-  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-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,
-  )}
->
-  <span
-    data-slot="switch-thumb"
-    data-checked={initialChecked ? "true" : undefined}
-    data-unchecked={initialChecked ? undefined : "true"}
-    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=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>
-
-<script>
-  import { create } from "@data-slot/switch";
-
-  create();
-</script>
+---
+/**
+ * @component Switch
+ * @title Switch
+ * @description A toggle control for switching between checked and unchecked states.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=50-5797
+ *
+ * @status stable
+ * @since 0.1.0
+ *
+ * @preview
+ *
+ * <div class="flex items-center gap-3">
+ *   <Switch id="notifications" />
+ *   <Label for="notifications">Enable notifications</Label>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Switch } from '@bejamas/ui/components/switch';
+ * import { Label } from '@bejamas/ui/components/label';
+ * ---
+ *
+ * <div class="flex items-center gap-3">
+ *   <Switch id="notifications" />
+ *   <Label for="notifications">Enable notifications</Label>
+ * </div>
+ * ```
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"span"> {
+  class?: string;
+  id?: string;
+  size?: "sm" | "default" | "lg";
+  checked?: boolean;
+  defaultChecked?: boolean;
+  name?: string;
+  value?: string;
+  uncheckedValue?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  "aria-invalid"?: boolean | "true" | "false";
+}
+
+const {
+  class: className = "",
+  id = "",
+  size = "default",
+  checked,
+  defaultChecked,
+  name,
+  value,
+  uncheckedValue,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  "aria-invalid": ariaInvalid,
+  ...rest
+} = Astro.props as Props;
+
+const initialChecked = checked ?? defaultChecked ?? false;
+---
+
+<span
+  {...rest}
+  id={id}
+  data-slot="switch"
+  data-size={size}
+  data-default-checked={initialChecked ? "true" : undefined}
+  data-name={name}
+  data-value={value}
+  data-unchecked-value={uncheckedValue}
+  data-disabled={disabled ? "true" : undefined}
+  data-read-only={readOnly ? "true" : undefined}
+  data-required={required ? "true" : undefined}
+  data-checked={initialChecked ? "true" : undefined}
+  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-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,
+  )}
+>
+  <span
+    data-slot="switch-thumb"
+    data-checked={initialChecked ? "true" : undefined}
+    data-unchecked={initialChecked ? undefined : "true"}
+    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=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>
+
+<script>
+  import { create } from "@data-slot/switch";
+
+  create();
+</script>

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,24 +1,24 @@
-# 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.
+# 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.