@cl-light-ds/ui 0.1.0 → 0.2.0

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/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2509-4236&t=YFStJ3V8fXEO8QD8-4
- *
- * @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";
-  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-[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",
-    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=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"
-    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/table/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
-All notable changes to the `Table` component will be documented in this file.
+All notable changes to the `Table` component family (`Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`) are documented in this file.
 
-## Unreleased
+## 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.