@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/accordion/AccordionItem.astro

@@ -1,36 +1,36 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  value: string;
-  class?: string;
-  disabled?: boolean;
-}
-
-const {
-  value,
-  class: className = "",
-  disabled = false,
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-value={value}
-  data-slot="accordion-item"
-  data-disabled={disabled ? "" : undefined}
-  aria-disabled={disabled ? "true" : undefined}
-  class={cn(
-    "group/accordion-item",
-    "[--accordion-indent:--spacing(3)] has-data-[slot=accordion-trigger-lead-icon]:[--accordion-indent:--spacing(9)]",
-    "group-data-[shape=default]/accordion:not-last:border-b group-data-[shape=default]/accordion:border-border",
-    "group-data-[shape=rounded]/accordion:rounded-lg group-data-[shape=rounded]/accordion:border group-data-[shape=rounded]/accordion:border-border group-data-[shape=rounded]/accordion:bg-card",
-    "has-[[data-slot=accordion-trigger]:focus-visible]:relative has-[[data-slot=accordion-trigger]:focus-visible]:z-10 has-[[data-slot=accordion-trigger]:focus-visible]:border has-[[data-slot=accordion-trigger]:focus-visible]:border-ring has-[[data-slot=accordion-trigger]:focus-visible]:ring-3 has-[[data-slot=accordion-trigger]:focus-visible]:ring-ring/50 has-[[data-slot=accordion-trigger]:focus-visible]:bg-card",
-    "data-disabled:opacity-50",
-    className,
-  )}
->
-  <slot />
-</div>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  value: string;
+  class?: string;
+  disabled?: boolean;
+}
+
+const {
+  value,
+  class: className = "",
+  disabled = false,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-value={value}
+  data-slot="accordion-item"
+  data-disabled={disabled ? "" : undefined}
+  aria-disabled={disabled ? "true" : undefined}
+  class={cn(
+    "group/accordion-item",
+    "[--accordion-indent:--spacing(3)] has-data-[slot=accordion-trigger-lead-icon]:[--accordion-indent:--spacing(9)]",
+    "group-data-[shape=default]/accordion:not-last:border-b group-data-[shape=default]/accordion:border-border",
+    "group-data-[shape=rounded]/accordion:rounded-lg group-data-[shape=rounded]/accordion:border group-data-[shape=rounded]/accordion:border-border group-data-[shape=rounded]/accordion:bg-card",
+    "has-[[data-slot=accordion-trigger]:focus-visible]:relative has-[[data-slot=accordion-trigger]:focus-visible]:z-10 has-[[data-slot=accordion-trigger]:focus-visible]:border has-[[data-slot=accordion-trigger]:focus-visible]:border-ring has-[[data-slot=accordion-trigger]:focus-visible]:ring-3 has-[[data-slot=accordion-trigger]:focus-visible]:ring-ring/50 has-[[data-slot=accordion-trigger]:focus-visible]:bg-card",
+    "data-disabled:opacity-50",
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/accordion/AccordionTrigger.astro

@@ -1,118 +1,118 @@
----
-import { cva } from "class-variance-authority";
-import { Plus, Minus, ChevronDown, ChevronUp } from "@lucide/astro";
-import type { AstroComponent } from "@lucide/astro";
-import Badge from "../badge/Badge.astro";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-type IndicatorIcon = "plus-minus" | "chevron";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-  /** Radix-like: render wrapper so the child can be the interactive element */
-  asChild?: boolean;
-  /** Leading icon rendered before the label (e.g. a lucide-astro icon). */
-  icon?: AstroComponent;
-  /** Optional badge/pill rendered next to the label. */
-  badge?: string | number;
-  disabled?: boolean;
-  /** Style of the built-in expand/collapse indicator. Ignored when a custom `icon` slot is provided. */
-  indicatorIcon?: IndicatorIcon;
-}
-
-const {
-  class: className = "",
-  asChild = false,
-  type = "button",
-  icon,
-  badge,
-  disabled = false,
-  indicatorIcon = "plus-minus",
-  ...rest
-} = Astro.props as Props;
-
-const Icon = icon;
-const hasBadge = badge !== undefined && badge !== null;
-const [CollapsedIndicator, ExpandedIndicator] =
-  indicatorIcon === "chevron" ? [ChevronDown, ChevronUp] : [Plus, Minus];
-
-const triggerVariants = cva(
-  "**:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md p-3 aria-expanded:pb-1 text-left text-xs font-semibold hover:underline **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between gap-2 transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-disabled/accordion-item:pointer-events-none group-data-disabled/accordion-item:opacity-50",
-);
----
-
-{
-  asChild ? (
-    <div class="flex">
-      <div
-        data-slot="accordion-trigger"
-        data-as-child
-        class={cn(triggerVariants(), className)}
-      >
-        <slot />
-      </div>
-    </div>
-  ) : (
-    <div class="flex">
-      <button
-        {...rest}
-        type={type}
-        aria-disabled={disabled ? "true" : undefined}
-        data-slot="accordion-trigger"
-        class={cn(triggerVariants(), className)}
-      >
-        <span class="flex flex-1 items-center gap-2">
-          {
-            Icon && (
-              <span
-                data-slot="accordion-trigger-lead-icon"
-                class="text-foreground pointer-events-none size-4 shrink-0"
-              >
-                <Icon class="size-4" />
-              </span>
-            )
-          }
-          <span class="flex items-center gap-1.5">
-            <slot />
-            {
-              hasBadge && (
-                <Badge
-                  data-slot="accordion-trigger-badge"
-                  variant="outline"
-                  shape="pill"
-                  size="sm"
-                >
-                  {badge}
-                </Badge>
-              )
-            }
-          </span>
-        </span>
-        {
-          Astro.slots.has("icon") ? (
-            <span
-              data-slot="accordion-trigger-icon"
-              class="pointer-events-none shrink-0"
-            >
-              <slot name="icon" />
-            </span>
-          ) : (
-            <>
-              <CollapsedIndicator
-                data-slot="accordion-trigger-icon"
-                class="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
-                aria-hidden="true"
-              />
-              <ExpandedIndicator
-                data-slot="accordion-trigger-icon"
-                class="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
-                aria-hidden="true"
-              />
-            </>
-          )
-        }
-      </button>
-    </div>
-  )
-}
+---
+import { cva } from "class-variance-authority";
+import { Plus, Minus, ChevronDown, ChevronUp } from "@lucide/astro";
+import type { AstroComponent } from "@lucide/astro";
+import Badge from "../badge/Badge.astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type IndicatorIcon = "plus-minus" | "chevron";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+  /** Radix-like: render wrapper so the child can be the interactive element */
+  asChild?: boolean;
+  /** Leading icon rendered before the label (e.g. a lucide-astro icon). */
+  icon?: AstroComponent;
+  /** Optional badge/pill rendered next to the label. */
+  badge?: string | number;
+  disabled?: boolean;
+  /** Style of the built-in expand/collapse indicator. Ignored when a custom `icon` slot is provided. */
+  indicatorIcon?: IndicatorIcon;
+}
+
+const {
+  class: className = "",
+  asChild = false,
+  type = "button",
+  icon,
+  badge,
+  disabled = false,
+  indicatorIcon = "plus-minus",
+  ...rest
+} = Astro.props as Props;
+
+const Icon = icon;
+const hasBadge = badge !== undefined && badge !== null;
+const [CollapsedIndicator, ExpandedIndicator] =
+  indicatorIcon === "chevron" ? [ChevronDown, ChevronUp] : [Plus, Minus];
+
+const triggerVariants = cva(
+  "**:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md p-3 aria-expanded:pb-1 text-left text-xs font-semibold hover:underline **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between gap-2 transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-disabled/accordion-item:pointer-events-none group-data-disabled/accordion-item:opacity-50",
+);
+---
+
+{
+  asChild ? (
+    <div class="flex">
+      <div
+        data-slot="accordion-trigger"
+        data-as-child
+        class={cn(triggerVariants(), className)}
+      >
+        <slot />
+      </div>
+    </div>
+  ) : (
+    <div class="flex">
+      <button
+        {...rest}
+        type={type}
+        aria-disabled={disabled ? "true" : undefined}
+        data-slot="accordion-trigger"
+        class={cn(triggerVariants(), className)}
+      >
+        <span class="flex flex-1 items-center gap-2">
+          {
+            Icon && (
+              <span
+                data-slot="accordion-trigger-lead-icon"
+                class="text-foreground pointer-events-none size-4 shrink-0"
+              >
+                <Icon class="size-4" />
+              </span>
+            )
+          }
+          <span class="flex items-center gap-1.5">
+            <slot />
+            {
+              hasBadge && (
+                <Badge
+                  data-slot="accordion-trigger-badge"
+                  variant="outline"
+                  shape="pill"
+                  size="sm"
+                >
+                  {badge}
+                </Badge>
+              )
+            }
+          </span>
+        </span>
+        {
+          Astro.slots.has("icon") ? (
+            <span
+              data-slot="accordion-trigger-icon"
+              class="pointer-events-none shrink-0"
+            >
+              <slot name="icon" />
+            </span>
+          ) : (
+            <>
+              <CollapsedIndicator
+                data-slot="accordion-trigger-icon"
+                class="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+                aria-hidden="true"
+              />
+              <ExpandedIndicator
+                data-slot="accordion-trigger-icon"
+                class="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+                aria-hidden="true"
+              />
+            </>
+          )
+        }
+      </button>
+    </div>
+  )
+}

package/src/components/accordion/CHANGELOG.md

@@ -1,41 +1,41 @@
-# Changelog
-
-All notable changes to the `Accordion` component family (`Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`) are documented in this file.
-
-## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `133-7547`)
-
-Aligned the component visually and functionally with Figma, while preserving the existing 4-part structure and all pre-existing props.
-
-### Added
-
-- `Accordion`: `shape` prop (`"default" | "flush" | "rounded"`) — `default` keeps the bottom-border divider list, `flush` removes dividers entirely, `rounded` renders each item as its own bordered, rounded card with an 8px gap between items.
-- `AccordionItem`: `disabled` prop.
-- `AccordionTrigger`:
-  - `icon` — leading icon rendered before the label (e.g. a lucide-astro icon component).
-  - `badge` — optional pill (now backed by the shared `Badge` component: `variant="outline" shape="pill" size="sm"`) rendered next to the label.
-  - `disabled` prop.
-  - `indicatorIcon` (`"plus-minus" | "chevron"`, default `"plus-minus"`) — style of the built-in expand/collapse indicator.
-
-### Changed
-
-- `AccordionTrigger`: replaced the hardcoded chevron up/down indicator with a Plus/Minus swap by default (matches Figma; chevron still available via `indicatorIcon="chevron"`).
-- `AccordionTrigger`: padding `py-4` → `p-3`; bottom padding reduces to `pb-1` when expanded, tightening the header-to-body gap.
-- `AccordionTrigger` / `AccordionContent`: label and caption text size `text-sm` → `text-xs` (12px), matching Figma's actual type token (this design system's `text-sm` utility is 14px).
-- `AccordionContent`: caption color now explicit `text-muted-foreground` (previously inherited the default dark foreground color).
-- `AccordionContent`: horizontal padding now `pr-3 pl-(--accordion-indent, --spacing(3))` — a shared `--accordion-indent` CSS variable (set on `AccordionItem`, `--spacing(3)` by default, `--spacing(9)` when the trigger has a lead icon) so the body text aligns under the label, not under the lead icon.
-- `AccordionContent`: `pb-4` → `pb-3` (12px); `pt-0` → `pt-1` (4px) — combined with the trigger's `aria-expanded:pb-1`, the header-to-body gap is 8px total.
-- `AccordionItem`: shape-driven classes for border/radius/background (`default` → `border-b`, `rounded` → `border` + `rounded-lg` + `bg-card`, `flush` → none).
-- Focus ring moved from the trigger button to `AccordionItem` (via `has-[[data-slot=accordion-trigger]:focus-visible]:*`), so a focused item's ring wraps the whole box — including the expanded caption — not just the header row. Reverted an interim change that used `focus:` (any pointer/click focus); it is `focus-visible:` only, so a mouse click does not show the ring.
-- Fixed the malformed `@figmaUrl` JSDoc (previously two concatenated URLs) to the correct single ClickLearn Lightning Design Library link.
-
-### Fixed
-
-- Lead icon color: was `text-muted-foreground` (gray); Figma's actual asset is `text-foreground` (dark, matching the label).
-- Lead icon size: the `<svg>` was rendering at its native 24px inside a 20px (later 16px) wrapper span, because the size class was only applied to the wrapper, not the icon itself — silently eating into the icon-to-label gap. Fixed by passing the size class directly to the icon component.
-- Badge text picked up the trigger's `hover:underline` (text-decoration propagates to inline descendants). Added `no-underline` — currently not present after switching the badge to the shared `Badge` component with no `class` override, so this regressed; needs revisiting if the badge should stay non-underlined on hover.
-
-### Notes
-
-- `shape` lives only on the `Accordion` root (cascades to all items uniformly) — Figma's "Nested" demo renders identically to "Rounded", so it isn't a distinct shape value.
-- `disabled`, `badge`, and the `flush` shape value have no dedicated demo frame in the Figma file; they were implemented using the design system's existing muted/border tokens rather than a pixel-exact spec.
-- All spacing values are token-based (Tailwind's `--spacing` scale) or reference `globals.css` color tokens — no hardcoded arbitrary pixel/rem/hex values remain in the four component files.
+# Changelog
+
+All notable changes to the `Accordion` component family (`Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`) are documented in this file.
+
+## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `133-7547`)
+
+Aligned the component visually and functionally with Figma, while preserving the existing 4-part structure and all pre-existing props.
+
+### Added
+
+- `Accordion`: `shape` prop (`"default" | "flush" | "rounded"`) — `default` keeps the bottom-border divider list, `flush` removes dividers entirely, `rounded` renders each item as its own bordered, rounded card with an 8px gap between items.
+- `AccordionItem`: `disabled` prop.
+- `AccordionTrigger`:
+  - `icon` — leading icon rendered before the label (e.g. a lucide-astro icon component).
+  - `badge` — optional pill (now backed by the shared `Badge` component: `variant="outline" shape="pill" size="sm"`) rendered next to the label.
+  - `disabled` prop.
+  - `indicatorIcon` (`"plus-minus" | "chevron"`, default `"plus-minus"`) — style of the built-in expand/collapse indicator.
+
+### Changed
+
+- `AccordionTrigger`: replaced the hardcoded chevron up/down indicator with a Plus/Minus swap by default (matches Figma; chevron still available via `indicatorIcon="chevron"`).
+- `AccordionTrigger`: padding `py-4` → `p-3`; bottom padding reduces to `pb-1` when expanded, tightening the header-to-body gap.
+- `AccordionTrigger` / `AccordionContent`: label and caption text size `text-sm` → `text-xs` (12px), matching Figma's actual type token (this design system's `text-sm` utility is 14px).
+- `AccordionContent`: caption color now explicit `text-muted-foreground` (previously inherited the default dark foreground color).
+- `AccordionContent`: horizontal padding now `pr-3 pl-(--accordion-indent, --spacing(3))` — a shared `--accordion-indent` CSS variable (set on `AccordionItem`, `--spacing(3)` by default, `--spacing(9)` when the trigger has a lead icon) so the body text aligns under the label, not under the lead icon.
+- `AccordionContent`: `pb-4` → `pb-3` (12px); `pt-0` → `pt-1` (4px) — combined with the trigger's `aria-expanded:pb-1`, the header-to-body gap is 8px total.
+- `AccordionItem`: shape-driven classes for border/radius/background (`default` → `border-b`, `rounded` → `border` + `rounded-lg` + `bg-card`, `flush` → none).
+- Focus ring moved from the trigger button to `AccordionItem` (via `has-[[data-slot=accordion-trigger]:focus-visible]:*`), so a focused item's ring wraps the whole box — including the expanded caption — not just the header row. Reverted an interim change that used `focus:` (any pointer/click focus); it is `focus-visible:` only, so a mouse click does not show the ring.
+- Fixed the malformed `@figmaUrl` JSDoc (previously two concatenated URLs) to the correct single ClickLearn Lightning Design Library link.
+
+### Fixed
+
+- Lead icon color: was `text-muted-foreground` (gray); Figma's actual asset is `text-foreground` (dark, matching the label).
+- Lead icon size: the `<svg>` was rendering at its native 24px inside a 20px (later 16px) wrapper span, because the size class was only applied to the wrapper, not the icon itself — silently eating into the icon-to-label gap. Fixed by passing the size class directly to the icon component.
+- Badge text picked up the trigger's `hover:underline` (text-decoration propagates to inline descendants). Added `no-underline` — currently not present after switching the badge to the shared `Badge` component with no `class` override, so this regressed; needs revisiting if the badge should stay non-underlined on hover.
+
+### Notes
+
+- `shape` lives only on the `Accordion` root (cascades to all items uniformly) — Figma's "Nested" demo renders identically to "Rounded", so it isn't a distinct shape value.
+- `disabled`, `badge`, and the `flush` shape value have no dedicated demo frame in the Figma file; they were implemented using the design system's existing muted/border tokens rather than a pixel-exact spec.
+- All spacing values are token-based (Tailwind's `--spacing` scale) or reference `globals.css` color tokens — no hardcoded arbitrary pixel/rem/hex values remain in the four component files.

package/src/components/accordion/index.ts

@@ -1,4 +1,4 @@
-export { default as Accordion } from "./Accordion.astro";
-export { default as AccordionItem } from "./AccordionItem.astro";
-export { default as AccordionTrigger } from "./AccordionTrigger.astro";
-export { default as AccordionContent } from "./AccordionContent.astro";
+export { default as Accordion } from "./Accordion.astro";
+export { default as AccordionItem } from "./AccordionItem.astro";
+export { default as AccordionTrigger } from "./AccordionTrigger.astro";
+export { default as AccordionContent } from "./AccordionContent.astro";