@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/collapsible/Collapsible.astro

@@ -1,202 +1,202 @@
----
-/**
- * @component Collapsible
- * @title Collapsible
- * @description An interactive component that expands and collapses content sections.
- *
- * @preview
- *
- * <Collapsible class="w-[350px] flex flex-col gap-2">
- *   <div class="flex items-center justify-between gap-4 px-4">
- *     <span class="text-sm font-semibold">@thomkrupa starred 3 repositories</span>
- *     <CollapsibleTrigger asChild>
- *       <Button variant="ghost" size="icon" class="size-8">
- *         <ChevronsUpDownIcon class="size-4" />
- *         <span class="sr-only">Toggle</span>
- *       </Button>
- *     </CollapsibleTrigger>
- *   </div>
- *   <div class="rounded-md border px-4 py-2 font-mono text-sm">@data-slot/collapsible</div>
- *   <CollapsibleContent animation="slide" class="flex flex-col gap-2">
- *     <div class="rounded-md border px-4 py-2 font-mono text-sm">@bejamas/ui</div>
- *     <div class="rounded-md border px-4 py-2 font-mono text-sm">@astrojs/astro</div>
- *   </CollapsibleContent>
- * </Collapsible>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@bejamas/ui/components/collapsible';
- * import { Button } from '@bejamas/ui/components/button';
- * ---
- *
- * <Collapsible>
- *   <CollapsibleTrigger>
- *     <Button variant="ghost">Toggle</Button>
- *   </CollapsibleTrigger>
- *   <CollapsibleContent animation="slide">
- *     Hidden content here
- *   </CollapsibleContent>
- * </Collapsible>
- * ```
- *
- * @api
- *
- * ### Props
- *
- * | Prop | Element | Values | Default |
- * |------|---------|--------|---------|
- * | `open` | collapsible | `boolean` | `false` |
- * | `hiddenUntilFound` | collapsible | `boolean` | `false` |
- * | `animation` | collapsible-content | `none`, `slide` | `none` |
- *
- * `slide` uses `--collapsible-panel-height` for smooth height transitions.
- *
- * ### Events
- *
- * The collapsible emits custom events that you can listen to:
- *
- * | Event | Detail | Description |
- * |-------|--------|-------------|
- * | `collapsible:change` | `{ open: boolean }` | Fired when the open state changes |
- *
- * ```astro nocollapse
- * <Collapsible id="my-collapsible">
- *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
- *   <CollapsibleContent>Hidden content</CollapsibleContent>
- * </Collapsible>
- * ```
- *
- * ```js nocollapse
- *   const collapsible = document.getElementById('my-collapsible');
- *
- *   collapsible.addEventListener('collapsible:change', (e) => {
- *     console.log('Is open:', e.detail.open);
- *   });
- * ```
- *
- * ### Programmatic Control
- *
- * You can control the collapsible programmatically by dispatching a `collapsible:set` event:
- *
- * ```js nocollapse
- * const collapsible = document.getElementById('my-collapsible');
- *
- * // Open the collapsible
- * collapsible.dispatchEvent(new CustomEvent('collapsible:set', {
- *   detail: { open: true }
- * }));
- *
- * // Close the collapsible
- * collapsible.dispatchEvent(new CustomEvent('collapsible:set', {
- *   detail: { open: false }
- * }));
- * ```
- *
- * ### Data Attributes
- *
- * The collapsible sets these data attributes that you can use for styling or querying state:
- *
- * | Attribute | Element | Description |
- * |-----------|---------|-------------|
- * | `data-state` | collapsible, collapsible-content | Current state (`open` or `closed`) |
- * | `data-hidden-until-found` | collapsible | Enables `hidden="until-found"` when closed |
- * | `data-starting-style` | collapsible-content | Added while enter transition styles are applied |
- * | `data-ending-style` | collapsible-content | Added while exit transition styles are applied |
- *
- * ### CSS Variables
- *
- * The collapsible content exposes size variables for dimension animations:
- *
- * | Variable | Element | Description |
- * |----------|---------|-------------|
- * | `--collapsible-panel-height` | collapsible-content | Measured panel height |
- * | `--collapsible-panel-width` | collapsible-content | Measured panel width |
- *
- * @examples
- *
- * ### Default open
- *
- * <Collapsible open class="w-[350px] flex flex-col gap-2">
- *   <div class="flex items-center justify-between gap-4 px-4">
- *     <span class="text-sm font-semibold">Expanded by default</span>
- *     <CollapsibleTrigger asChild>
- *       <Button variant="ghost" size="icon" class="size-8">
- *         <ChevronsUpDownIcon class="size-4" />
- *         <span class="sr-only">Toggle</span>
- *       </Button>
- *     </CollapsibleTrigger>
- *   </div>
- *   <CollapsibleContent class="flex flex-col gap-2">
- *     <div class="rounded-md border px-4 py-2 font-mono text-sm">This content is visible by default</div>
- *   </CollapsibleContent>
- * </Collapsible>
- *
- * ### Animated content
- *
- * <Collapsible class="w-[350px] flex flex-col gap-2">
- *   <CollapsibleTrigger asChild>
- *     <Button variant="outline">Toggle with slide</Button>
- *   </CollapsibleTrigger>
- *   <CollapsibleContent animation="slide" class="pt-2">
- *     <div class="rounded-md border px-4 py-2 text-sm">
- *       This content animates panel height using CSS variables.
- *     </div>
- *   </CollapsibleContent>
- * </Collapsible>
- *
- * ### Find-in-page support
- *
- * <Collapsible hiddenUntilFound class="w-[350px] flex flex-col gap-2">
- *   <CollapsibleTrigger asChild>
- *     <Button variant="outline">Toggle hidden-until-found content</Button>
- *   </CollapsibleTrigger>
- *   <CollapsibleContent class="pt-2">
- *     <div class="rounded-md border px-4 py-2 text-sm">
- *       Search this sentence with browser find to auto-expand.
- *     </div>
- *   </CollapsibleContent>
- * </Collapsible>
- *
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  open?: boolean;
-  hiddenUntilFound?: boolean;
-}
-
-const {
-  class: className = "",
-  open = false,
-  hiddenUntilFound = false,
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="collapsible"
-  data-state={open ? "open" : "closed"}
-  data-default-open={open ? true : undefined}
-  data-hidden-until-found={hiddenUntilFound ? "" : undefined}
-  class={cn(
-    "",
-    "group/collapsible data-[state=closed]:[&_[data-slot=collapsible-content]]:hidden",
-    className,
-  )}
->
-  <slot />
-</div>
-
-<script>
-  import { createCollapsible } from "@data-slot/collapsible";
-
-  document.querySelectorAll<HTMLElement>('[data-slot="collapsible"]').forEach((el) => {
-    createCollapsible(el);
-  });
-</script>
+---
+/**
+ * @component Collapsible
+ * @title Collapsible
+ * @description An interactive component that expands and collapses content sections.
+ *
+ * @preview
+ *
+ * <Collapsible class="w-[350px] flex flex-col gap-2">
+ *   <div class="flex items-center justify-between gap-4 px-4">
+ *     <span class="text-sm font-semibold">@thomkrupa starred 3 repositories</span>
+ *     <CollapsibleTrigger asChild>
+ *       <Button variant="ghost" size="icon" class="size-8">
+ *         <ChevronsUpDownIcon class="size-4" />
+ *         <span class="sr-only">Toggle</span>
+ *       </Button>
+ *     </CollapsibleTrigger>
+ *   </div>
+ *   <div class="rounded-md border px-4 py-2 font-mono text-sm">@data-slot/collapsible</div>
+ *   <CollapsibleContent animation="slide" class="flex flex-col gap-2">
+ *     <div class="rounded-md border px-4 py-2 font-mono text-sm">@bejamas/ui</div>
+ *     <div class="rounded-md border px-4 py-2 font-mono text-sm">@astrojs/astro</div>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@bejamas/ui/components/collapsible';
+ * import { Button } from '@bejamas/ui/components/button';
+ * ---
+ *
+ * <Collapsible>
+ *   <CollapsibleTrigger>
+ *     <Button variant="ghost">Toggle</Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent animation="slide">
+ *     Hidden content here
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ *
+ * @api
+ *
+ * ### Props
+ *
+ * | Prop | Element | Values | Default |
+ * |------|---------|--------|---------|
+ * | `open` | collapsible | `boolean` | `false` |
+ * | `hiddenUntilFound` | collapsible | `boolean` | `false` |
+ * | `animation` | collapsible-content | `none`, `slide` | `none` |
+ *
+ * `slide` uses `--collapsible-panel-height` for smooth height transitions.
+ *
+ * ### Events
+ *
+ * The collapsible emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `collapsible:change` | `{ open: boolean }` | Fired when the open state changes |
+ *
+ * ```astro nocollapse
+ * <Collapsible id="my-collapsible">
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Hidden content</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ *
+ * ```js nocollapse
+ *   const collapsible = document.getElementById('my-collapsible');
+ *
+ *   collapsible.addEventListener('collapsible:change', (e) => {
+ *     console.log('Is open:', e.detail.open);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the collapsible programmatically by dispatching a `collapsible:set` event:
+ *
+ * ```js nocollapse
+ * const collapsible = document.getElementById('my-collapsible');
+ *
+ * // Open the collapsible
+ * collapsible.dispatchEvent(new CustomEvent('collapsible:set', {
+ *   detail: { open: true }
+ * }));
+ *
+ * // Close the collapsible
+ * collapsible.dispatchEvent(new CustomEvent('collapsible:set', {
+ *   detail: { open: false }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The collapsible sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | collapsible, collapsible-content | Current state (`open` or `closed`) |
+ * | `data-hidden-until-found` | collapsible | Enables `hidden="until-found"` when closed |
+ * | `data-starting-style` | collapsible-content | Added while enter transition styles are applied |
+ * | `data-ending-style` | collapsible-content | Added while exit transition styles are applied |
+ *
+ * ### CSS Variables
+ *
+ * The collapsible content exposes size variables for dimension animations:
+ *
+ * | Variable | Element | Description |
+ * |----------|---------|-------------|
+ * | `--collapsible-panel-height` | collapsible-content | Measured panel height |
+ * | `--collapsible-panel-width` | collapsible-content | Measured panel width |
+ *
+ * @examples
+ *
+ * ### Default open
+ *
+ * <Collapsible open class="w-[350px] flex flex-col gap-2">
+ *   <div class="flex items-center justify-between gap-4 px-4">
+ *     <span class="text-sm font-semibold">Expanded by default</span>
+ *     <CollapsibleTrigger asChild>
+ *       <Button variant="ghost" size="icon" class="size-8">
+ *         <ChevronsUpDownIcon class="size-4" />
+ *         <span class="sr-only">Toggle</span>
+ *       </Button>
+ *     </CollapsibleTrigger>
+ *   </div>
+ *   <CollapsibleContent class="flex flex-col gap-2">
+ *     <div class="rounded-md border px-4 py-2 font-mono text-sm">This content is visible by default</div>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * ### Animated content
+ *
+ * <Collapsible class="w-[350px] flex flex-col gap-2">
+ *   <CollapsibleTrigger asChild>
+ *     <Button variant="outline">Toggle with slide</Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent animation="slide" class="pt-2">
+ *     <div class="rounded-md border px-4 py-2 text-sm">
+ *       This content animates panel height using CSS variables.
+ *     </div>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * ### Find-in-page support
+ *
+ * <Collapsible hiddenUntilFound class="w-[350px] flex flex-col gap-2">
+ *   <CollapsibleTrigger asChild>
+ *     <Button variant="outline">Toggle hidden-until-found content</Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent class="pt-2">
+ *     <div class="rounded-md border px-4 py-2 text-sm">
+ *       Search this sentence with browser find to auto-expand.
+ *     </div>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  open?: boolean;
+  hiddenUntilFound?: boolean;
+}
+
+const {
+  class: className = "",
+  open = false,
+  hiddenUntilFound = false,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="collapsible"
+  data-state={open ? "open" : "closed"}
+  data-default-open={open ? true : undefined}
+  data-hidden-until-found={hiddenUntilFound ? "" : undefined}
+  class={cn(
+    "",
+    "group/collapsible data-[state=closed]:[&_[data-slot=collapsible-content]]:hidden",
+    className,
+  )}
+>
+  <slot />
+</div>
+
+<script>
+  import { createCollapsible } from "@data-slot/collapsible";
+
+  document.querySelectorAll<HTMLElement>('[data-slot="collapsible"]').forEach((el) => {
+    createCollapsible(el);
+  });
+</script>

package/src/components/collapsible/CollapsibleContent.astro

@@ -1,36 +1,36 @@
----
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends VariantProps<typeof collapsibleContentVariants>, HTMLAttributes<"div"> {
-  class?: string;
-}
-
-export const collapsibleContentVariants = cva("overflow-hidden", {
-  variants: {
-    animation: {
-      none: "",
-      slide:
-        "h-(--collapsible-panel-height) transition-[height] duration-200 ease-out motion-reduce:transition-none",
-    },
-  },
-  defaultVariants: {
-    animation: "none",
-  },
-});
-
-const {
-  class: className = "",
-  animation = "none",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="collapsible-content"
-  class={cn("", collapsibleContentVariants({ animation }), className)}
->
-  <slot />
-</div>
+---
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends VariantProps<typeof collapsibleContentVariants>, HTMLAttributes<"div"> {
+  class?: string;
+}
+
+export const collapsibleContentVariants = cva("overflow-hidden", {
+  variants: {
+    animation: {
+      none: "",
+      slide:
+        "h-(--collapsible-panel-height) transition-[height] duration-200 ease-out motion-reduce:transition-none",
+    },
+  },
+  defaultVariants: {
+    animation: "none",
+  },
+});
+
+const {
+  class: className = "",
+  animation = "none",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="collapsible-content"
+  class={cn("", collapsibleContentVariants({ animation }), className)}
+>
+  <slot />
+</div>

package/src/components/collapsible/CollapsibleTrigger.astro

@@ -1,34 +1,34 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-  /** Radix-like: render wrapper so the child can be the interactive element */
-  asChild?: boolean;
-}
-
-const {
-  class: className = "",
-  asChild = false,
-  type = "button",
-  ...rest
-} = Astro.props as Props;
----
-
-{
-  asChild ? (
-    <div data-slot="collapsible-trigger" data-as-child class={cn("font-semibold", className)}>
-      <slot />
-    </div>
-  ) : (
-    <button
-      {...rest}
-      type={type}
-      data-slot="collapsible-trigger"
-      class={cn("font-semibold", className)}
-    >
-      <slot />
-    </button>
-  )
-}
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+  /** Radix-like: render wrapper so the child can be the interactive element */
+  asChild?: boolean;
+}
+
+const {
+  class: className = "",
+  asChild = false,
+  type = "button",
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  asChild ? (
+    <div data-slot="collapsible-trigger" data-as-child class={cn("font-semibold", className)}>
+      <slot />
+    </div>
+  ) : (
+    <button
+      {...rest}
+      type={type}
+      data-slot="collapsible-trigger"
+      class={cn("font-semibold", className)}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/components/collapsible/index.ts

@@ -1,4 +1,4 @@
-export { default as Collapsible } from "./Collapsible.astro";
-export { default as CollapsibleTrigger } from "./CollapsibleTrigger.astro";
-export { default as CollapsibleContent } from "./CollapsibleContent.astro";
-export { collapsibleContentVariants } from "./CollapsibleContent.astro";
+export { default as Collapsible } from "./Collapsible.astro";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.astro";
+export { default as CollapsibleContent } from "./CollapsibleContent.astro";
+export { collapsibleContentVariants } from "./CollapsibleContent.astro";

package/src/components/combobox/CHANGELOG.md

@@ -1,27 +1,27 @@
-# Changelog
-
-All notable changes to the `Combobox` component family (`Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxSeparator`, `ComboboxEmpty`, `ComboboxTrigger`, `ComboboxValue`) are documented in this file.
-
-## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `5455-12863`)
-
-Styling-only pass — no props, components, or behavior were added or removed. The implementation (including the shared `InputGroup`/`InputGroupInput` it delegates trigger styling to) was already close to Figma; this fixed the remaining concrete mismatches found by comparing computed styles against the Figma spec.
-
-### Fixed
-
-- `ComboboxContent` (popover): computed border-radius was rendering at 8px instead of Figma's 6px, because the class string set both `rounded-md` and a later, conflicting `rounded-lg` — removed the erroneous `rounded-lg`.
-- `ComboboxItem`: radius was `rounded-sm` (4px); Figma specifies `rounded-lg` (8px) for items.
-- `ComboboxLabel` (group label, e.g. "Frontend"/"Backend"): was missing `font-medium` — Figma's group label is medium (500) weight, not the browser default.
-- `ComboboxList`: removed a duplicate, malformed `max-h-[...]` utility (`calc(--spacing(72)---spacing(9))` — invalid calc syntax) that was redundant with the correct `max-h-[min(18rem,calc(var(--available-height)-var(--anchor-height)))]` already present later in the same class string.
-
-### Added
-
-- `@figmaUrl` JSDoc tag on `Combobox.astro` (previously had none).
-
-### Changed (docs only)
-
-- Removed the "Sizes" preview section from the storybook page (`apps/web/.../_sections/combobox.astro`), since Figma has no distinct size variants for this component and showcasing one there implied it was a designed feature. The underlying `size` prop on `ComboboxInput` itself (`"sm" | "default" | "lg"`, delegated to `InputGroup`) was **not** removed — it's real, pre-existing functionality shared with other inputs, just no longer given its own demo/prop-table framing as a Figma-specified variant.
-
-### Notes
-
-- Figma's trigger box (border, radius, shadow, Default/Hover/Focus/Invalid/Disabled states), item hover highlight (`bg-background-hover`), and the selected-item checkmark visibility already matched exactly — verified via computed styles in the browser, not just source reading.
-- No new props/components were introduced, per explicit instruction — this was a pure token/styling correction pass.
+# Changelog
+
+All notable changes to the `Combobox` component family (`Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxSeparator`, `ComboboxEmpty`, `ComboboxTrigger`, `ComboboxValue`) are documented in this file.
+
+## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `5455-12863`)
+
+Styling-only pass — no props, components, or behavior were added or removed. The implementation (including the shared `InputGroup`/`InputGroupInput` it delegates trigger styling to) was already close to Figma; this fixed the remaining concrete mismatches found by comparing computed styles against the Figma spec.
+
+### Fixed
+
+- `ComboboxContent` (popover): computed border-radius was rendering at 8px instead of Figma's 6px, because the class string set both `rounded-md` and a later, conflicting `rounded-lg` — removed the erroneous `rounded-lg`.
+- `ComboboxItem`: radius was `rounded-sm` (4px); Figma specifies `rounded-lg` (8px) for items.
+- `ComboboxLabel` (group label, e.g. "Frontend"/"Backend"): was missing `font-medium` — Figma's group label is medium (500) weight, not the browser default.
+- `ComboboxList`: removed a duplicate, malformed `max-h-[...]` utility (`calc(--spacing(72)---spacing(9))` — invalid calc syntax) that was redundant with the correct `max-h-[min(18rem,calc(var(--available-height)-var(--anchor-height)))]` already present later in the same class string.
+
+### Added
+
+- `@figmaUrl` JSDoc tag on `Combobox.astro` (previously had none).
+
+### Changed (docs only)
+
+- Removed the "Sizes" preview section from the storybook page (`apps/web/.../_sections/combobox.astro`), since Figma has no distinct size variants for this component and showcasing one there implied it was a designed feature. The underlying `size` prop on `ComboboxInput` itself (`"sm" | "default" | "lg"`, delegated to `InputGroup`) was **not** removed — it's real, pre-existing functionality shared with other inputs, just no longer given its own demo/prop-table framing as a Figma-specified variant.
+
+### Notes
+
+- Figma's trigger box (border, radius, shadow, Default/Hover/Focus/Invalid/Disabled states), item hover highlight (`bg-background-hover`), and the selected-item checkmark visibility already matched exactly — verified via computed styles in the browser, not just source reading.
+- No new props/components were introduced, per explicit instruction — this was a pure token/styling correction pass.