@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/breadcrumb/Breadcrumb.astro

@@ -1,76 +1,76 @@
----
-/**
- * @component Breadcrumb
- * @title Breadcrumb
- * @description A navigation path showing the user's location in the site hierarchy with links to parent pages.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2166-5409
- *
- * @preview
- *
- * <Breadcrumb>
- *   <BreadcrumbList>
- *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
- *     <BreadcrumbSeparator />
- *     <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
- *     <BreadcrumbSeparator />
- *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
- *   </BreadcrumbList>
- * </Breadcrumb>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator } from '@bejamas/ui/components/breadcrumb';
- * ---
- *
- * <Breadcrumb>
- *   <BreadcrumbList>
- *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
- *     <BreadcrumbSeparator />
- *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
- *   </BreadcrumbList>
- * </Breadcrumb>
- * ```
- *
- * @examples
- *
- * ### Custom separator
- *
- *  <Breadcrumb>
- *    <BreadcrumbList>
- *       <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
- *       <BreadcrumbSeparator>
- *         <SlashIcon />
- *       </BreadcrumbSeparator>
- *       <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
- *       <BreadcrumbSeparator>
- *         <SlashIcon />
- *       </BreadcrumbSeparator>
- *       <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
- *   </BreadcrumbList>
- * </Breadcrumb>
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"nav"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<nav
-  {...rest}
-  aria-label="breadcrumb"
-  data-slot="breadcrumb"
-  class={cn("", className)}
->
-  <slot />
-</nav>
-
+---
+/**
+ * @component Breadcrumb
+ * @title Breadcrumb
+ * @description A navigation path showing the user's location in the site hierarchy with links to parent pages.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2166-5409
+ *
+ * @preview
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator } from '@bejamas/ui/components/breadcrumb';
+ * ---
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * @examples
+ *
+ * ### Custom separator
+ *
+ *  <Breadcrumb>
+ *    <BreadcrumbList>
+ *       <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
+ *       <BreadcrumbSeparator>
+ *         <SlashIcon />
+ *       </BreadcrumbSeparator>
+ *       <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
+ *       <BreadcrumbSeparator>
+ *         <SlashIcon />
+ *       </BreadcrumbSeparator>
+ *       <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"nav"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<nav
+  {...rest}
+  aria-label="breadcrumb"
+  data-slot="breadcrumb"
+  class={cn("", className)}
+>
+  <slot />
+</nav>
+

package/src/components/breadcrumb/BreadcrumbItem.astro

@@ -1,32 +1,32 @@
----
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"li"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const itemVariants = cva("inline-flex items-center");
----
-
-<li
-  {...rest}
-  data-slot="breadcrumb-item"
-  class={cn(
-    "gap-1.5",
-    "[&_a]:inline-flex [&_a]:items-center [&_a]:gap-1 [&_a]:rounded-lg [&_a]:px-3 [&_a]:py-2 [&_a]:font-medium [&_a]:outline-none [&_a]:transition-colors [&_a]:focus-visible:ring-3 [&_a]:focus-visible:ring-ring/50",
-    "[&_a]:text-muted-foreground [&_a:hover]:text-foreground",
-    "[&_[aria-current=page]]:inline-flex [&_[aria-current=page]]:items-center [&_[aria-current=page]]:gap-1 [&_[aria-current=page]]:rounded-lg [&_[aria-current=page]]:px-3 [&_[aria-current=page]]:py-2 [&_[aria-current=page]]:font-medium",
-    "[&_[aria-current=page]]:text-foreground",
-    itemVariants(),
-    className,
-  )}
->
-  <slot />
-</li>
+---
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const itemVariants = cva("inline-flex items-center");
+---
+
+<li
+  {...rest}
+  data-slot="breadcrumb-item"
+  class={cn(
+    "gap-1.5",
+    "[&_a]:inline-flex [&_a]:items-center [&_a]:gap-1 [&_a]:rounded-lg [&_a]:px-3 [&_a]:py-2 [&_a]:font-medium [&_a]:outline-none [&_a]:transition-colors [&_a]:focus-visible:ring-3 [&_a]:focus-visible:ring-ring/50",
+    "[&_a]:text-muted-foreground [&_a:hover]:text-foreground",
+    "[&_[aria-current=page]]:inline-flex [&_[aria-current=page]]:items-center [&_[aria-current=page]]:gap-1 [&_[aria-current=page]]:rounded-lg [&_[aria-current=page]]:px-3 [&_[aria-current=page]]:py-2 [&_[aria-current=page]]:font-medium",
+    "[&_[aria-current=page]]:text-foreground",
+    itemVariants(),
+    className,
+  )}
+>
+  <slot />
+</li>

package/src/components/breadcrumb/BreadcrumbList.astro

@@ -1,26 +1,26 @@
----
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"ol"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const listVariants = cva(
-  "flex flex-wrap items-center wrap-break-word",
-);
----
-
-<ol
-  {...rest}
-  data-slot="breadcrumb-list"
-  class={cn("text-muted-foreground gap-0 text-sm", listVariants(), className)}
->
-  <slot />
-</ol>
+---
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"ol"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const listVariants = cva(
+  "flex flex-wrap items-center wrap-break-word",
+);
+---
+
+<ol
+  {...rest}
+  data-slot="breadcrumb-list"
+  class={cn("text-muted-foreground gap-0 text-sm", listVariants(), className)}
+>
+  <slot />
+</ol>

package/src/components/breadcrumb/BreadcrumbSeparator.astro

@@ -1,26 +1,26 @@
----
-import { ChevronRight } from "@lucide/astro";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"li"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<li
-  {...rest}
-  role="presentation"
-  aria-hidden="true"
-  data-slot="breadcrumb-separator"
-  class={cn("[&>svg]:size-4", className)}
->
-  <slot>
-    <ChevronRight />
-  </slot>
-</li>
+---
+import { ChevronRight } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<li
+  {...rest}
+  role="presentation"
+  aria-hidden="true"
+  data-slot="breadcrumb-separator"
+  class={cn("[&>svg]:size-4", className)}
+>
+  <slot>
+    <ChevronRight />
+  </slot>
+</li>

package/src/components/breadcrumb/CHANGELOG.md

@@ -1,24 +1,24 @@
-# Changelog
-
-All notable changes to the `Breadcrumb` component family (`Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbSeparator`) are documented in this file.
-
-## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `2166-5409`)
-
-Aligned the component visually with Figma's `breadcrumb.link` component, entirely within the existing four-part structure — no new components were introduced, and `BreadcrumbItem` still accepts any raw child content unchanged.
-
-### Changed
-
-- `BreadcrumbItem`: styling for Figma's Default/Hover/Active `breadcrumb.link` states is now baked directly into the item via descendant selectors, targeting whatever `<a>` / `<span aria-current="page">` the consumer slots in:
-  - Color: `[&_a]:text-muted-foreground`, `[&_a:hover]:text-foreground`, `[&_[aria-current=page]]:text-foreground`.
-  - Click-target sizing: `inline-flex items-center gap-1 rounded-lg px-3 py-2 font-medium` on both the link and the current-page span, matching Figma's padded/rounded treatment.
-  - Focus: `outline-none focus-visible:ring-3 focus-visible:ring-ring/50` on the link (Figma doesn't demo a focus state, but keyboard-focus visibility is a baseline requirement, reusing the idiom established on `AccordionTrigger`).
-  - This is a universal, non-opt-in fix — existing raw `<a>`/`<span>` usage now gets the correct look automatically instead of requiring `class="hover:text-foreground transition-colors"` inlined at every call site (following the same convention already used by the sibling `LinkGroupItem`).
-- `BreadcrumbList`: `gap-1.5 sm:gap-2.5` (6px/10px responsive) → `gap-0`. Figma itself specifies a flat `gap-2` (8px), but the row read as too spacious once `BreadcrumbItem`'s own `px-3 py-2` link padding was added (that padding already provides breathing room around each label/separator), so the list-level gap was dropped to `gap-0` as a deliberate visual call on top of the Figma spec.
-- `BreadcrumbSeparator`: icon size `size-3.5` (14px) → `size-4` (16px), matching Figma. Swapped the raw inline `<svg>` chevron-right path for `ChevronRight` from `@lucide/astro` (same glyph, matches the icon-library convention already established elsewhere in this design system).
-- Fixed the `@figmaUrl` JSDoc (was the old Bejamas file) to the ClickLearn Lightning Design Library link.
-
-### Notes
-
-- Figma's `breadcrumb.link` also exposes an optional leading icon and a trailing dropdown chevron. These were **not** added as props — `BreadcrumbItem` wraps opaque slotted content, so it can't inject markup inside a consumer's `<a>`; a consumer who wants an icon can already include it directly in their own link markup (e.g. `<BreadcrumbItem><a href="/"><HouseIcon class="size-4" /> Home</a></BreadcrumbItem>`), and it will inherit the correct sizing/spacing from the `[&_a]` treatment above.
-- Figma's collapsed-trail "..." is modeled as plain text inside a normal link-styled slot, not a distinct component — no `BreadcrumbEllipsis` was added; `<BreadcrumbItem><span>...</span></BreadcrumbItem>` already covers it.
-- All spacing/color values are token-based (Tailwind's `--spacing` scale, `--muted-foreground`/`--foreground`/`--radius-lg` from `globals.css`) — no hardcoded arbitrary values.
+# Changelog
+
+All notable changes to the `Breadcrumb` component family (`Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbSeparator`) are documented in this file.
+
+## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `2166-5409`)
+
+Aligned the component visually with Figma's `breadcrumb.link` component, entirely within the existing four-part structure — no new components were introduced, and `BreadcrumbItem` still accepts any raw child content unchanged.
+
+### Changed
+
+- `BreadcrumbItem`: styling for Figma's Default/Hover/Active `breadcrumb.link` states is now baked directly into the item via descendant selectors, targeting whatever `<a>` / `<span aria-current="page">` the consumer slots in:
+  - Color: `[&_a]:text-muted-foreground`, `[&_a:hover]:text-foreground`, `[&_[aria-current=page]]:text-foreground`.
+  - Click-target sizing: `inline-flex items-center gap-1 rounded-lg px-3 py-2 font-medium` on both the link and the current-page span, matching Figma's padded/rounded treatment.
+  - Focus: `outline-none focus-visible:ring-3 focus-visible:ring-ring/50` on the link (Figma doesn't demo a focus state, but keyboard-focus visibility is a baseline requirement, reusing the idiom established on `AccordionTrigger`).
+  - This is a universal, non-opt-in fix — existing raw `<a>`/`<span>` usage now gets the correct look automatically instead of requiring `class="hover:text-foreground transition-colors"` inlined at every call site (following the same convention already used by the sibling `LinkGroupItem`).
+- `BreadcrumbList`: `gap-1.5 sm:gap-2.5` (6px/10px responsive) → `gap-0`. Figma itself specifies a flat `gap-2` (8px), but the row read as too spacious once `BreadcrumbItem`'s own `px-3 py-2` link padding was added (that padding already provides breathing room around each label/separator), so the list-level gap was dropped to `gap-0` as a deliberate visual call on top of the Figma spec.
+- `BreadcrumbSeparator`: icon size `size-3.5` (14px) → `size-4` (16px), matching Figma. Swapped the raw inline `<svg>` chevron-right path for `ChevronRight` from `@lucide/astro` (same glyph, matches the icon-library convention already established elsewhere in this design system).
+- Fixed the `@figmaUrl` JSDoc (was the old Bejamas file) to the ClickLearn Lightning Design Library link.
+
+### Notes
+
+- Figma's `breadcrumb.link` also exposes an optional leading icon and a trailing dropdown chevron. These were **not** added as props — `BreadcrumbItem` wraps opaque slotted content, so it can't inject markup inside a consumer's `<a>`; a consumer who wants an icon can already include it directly in their own link markup (e.g. `<BreadcrumbItem><a href="/"><HouseIcon class="size-4" /> Home</a></BreadcrumbItem>`), and it will inherit the correct sizing/spacing from the `[&_a]` treatment above.
+- Figma's collapsed-trail "..." is modeled as plain text inside a normal link-styled slot, not a distinct component — no `BreadcrumbEllipsis` was added; `<BreadcrumbItem><span>...</span></BreadcrumbItem>` already covers it.
+- All spacing/color values are token-based (Tailwind's `--spacing` scale, `--muted-foreground`/`--foreground`/`--radius-lg` from `globals.css`) — no hardcoded arbitrary values.

package/src/components/breadcrumb/index.ts

@@ -1,5 +1,5 @@
-export { default as Breadcrumb } from "./Breadcrumb.astro";
-export { default as BreadcrumbList } from "./BreadcrumbList.astro";
-export { default as BreadcrumbItem } from "./BreadcrumbItem.astro";
-export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.astro";
-
+export { default as Breadcrumb } from "./Breadcrumb.astro";
+export { default as BreadcrumbList } from "./BreadcrumbList.astro";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.astro";
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.astro";
+