@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/skeleton/Skeleton.astro

@@ -1,121 +1,121 @@
----
-/**
- * @component Skeleton
- * @title Skeleton
- * @description A loading placeholder component that displays animated pulse effect, commonly used to indicate content is being loaded.
- * @status stable
- *
- * Works great with Astro Server Islands as a fallback for loading content.
- *
- * @preview
- *
- * <div class="flex items-center gap-4">
- *   <Skeleton class="h-12 w-12 rounded-full" />
- *   <div class="space-y-2">
- *     <Skeleton class="h-4 w-[250px]" />
- *     <Skeleton class="h-4 w-[200px]" />
- *   </div>
- * </div>
- *
- * @usage
- *
- * ```astro
- * ---
- * import { Skeleton } from '@bejamas/ui/components/skeleton';
- * ---
- *
- * <Skeleton class="h-4 w-[250px]" />
- * ```
- *
- * @examples
- *
- * ### Avatar
- *
- * <div class="flex w-fit items-center gap-4">
- *   <Skeleton class="size-10 shrink-0 rounded-full" />
- *   <div class="grid gap-2">
- *     <Skeleton class="h-4 w-[150px]" />
- *     <Skeleton class="h-4 w-[100px]" />
- *   </div>
- * </div>
- *
- * ### Card
- *
- * <Card class="w-full max-w-xs">
- *   <CardHeader>
- *     <Skeleton class="h-4 w-2/3" />
- *     <Skeleton class="h-4 w-1/2" />
- *   </CardHeader>
- *   <CardContent>
- *     <Skeleton class="aspect-video w-full" />
- *   </CardContent>
- * </Card>
- *
- * ### Text
- *
- * <div class="flex w-full max-w-xs flex-col gap-2">
- *   <Skeleton class="h-4 w-full" />
- *   <Skeleton class="h-4 w-full" />
- *   <Skeleton class="h-4 w-3/4" />
- * </div>
- *
- * ### Form
- *
- * <div class="flex w-full max-w-xs flex-col gap-7">
- *   <div class="flex flex-col gap-3">
- *     <Skeleton class="h-4 w-20" />
- *     <Skeleton class="h-8 w-full" />
- *   </div>
- *   <div class="flex flex-col gap-3">
- *     <Skeleton class="h-4 w-24" />
- *     <Skeleton class="h-8 w-full" />
- *   </div>
- *   <Skeleton class="h-8 w-24" />
- * </div>
- *
- * ### Table
- *
- * <div class="flex w-full max-w-sm flex-col gap-2">
- *   <div class="flex gap-4">
- *     <Skeleton class="h-4 flex-1" />
- *     <Skeleton class="h-4 w-24" />
- *     <Skeleton class="h-4 w-20" />
- *   </div>
- *   <div class="flex gap-4">
- *     <Skeleton class="h-4 flex-1" />
- *     <Skeleton class="h-4 w-24" />
- *     <Skeleton class="h-4 w-20" />
- *   </div>
- *   <div class="flex gap-4">
- *     <Skeleton class="h-4 flex-1" />
- *     <Skeleton class="h-4 w-24" />
- *     <Skeleton class="h-4 w-20" />
- *   </div>
- *   <div class="flex gap-4">
- *     <Skeleton class="h-4 flex-1" />
- *     <Skeleton class="h-4 w-24" />
- *     <Skeleton class="h-4 w-20" />
- *   </div>
- *   <div class="flex gap-4">
- *     <Skeleton class="h-4 flex-1" />
- *     <Skeleton class="h-4 w-24" />
- *     <Skeleton class="h-4 w-20" />
- *   </div>
- * </div>
- *
- * @props
- * - class?: string — Additional classes for styling.
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-const { class: className = "", ...props } = Astro.props;
----
-
-<div
-  data-slot="skeleton"
-  class={cn("bg-muted rounded-md animate-pulse", className)}
-  {...props}
->
-  <slot />
-</div>
+---
+/**
+ * @component Skeleton
+ * @title Skeleton
+ * @description A loading placeholder component that displays animated pulse effect, commonly used to indicate content is being loaded.
+ * @status stable
+ *
+ * Works great with Astro Server Islands as a fallback for loading content.
+ *
+ * @preview
+ *
+ * <div class="flex items-center gap-4">
+ *   <Skeleton class="h-12 w-12 rounded-full" />
+ *   <div class="space-y-2">
+ *     <Skeleton class="h-4 w-[250px]" />
+ *     <Skeleton class="h-4 w-[200px]" />
+ *   </div>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro
+ * ---
+ * import { Skeleton } from '@bejamas/ui/components/skeleton';
+ * ---
+ *
+ * <Skeleton class="h-4 w-[250px]" />
+ * ```
+ *
+ * @examples
+ *
+ * ### Avatar
+ *
+ * <div class="flex w-fit items-center gap-4">
+ *   <Skeleton class="size-10 shrink-0 rounded-full" />
+ *   <div class="grid gap-2">
+ *     <Skeleton class="h-4 w-[150px]" />
+ *     <Skeleton class="h-4 w-[100px]" />
+ *   </div>
+ * </div>
+ *
+ * ### Card
+ *
+ * <Card class="w-full max-w-xs">
+ *   <CardHeader>
+ *     <Skeleton class="h-4 w-2/3" />
+ *     <Skeleton class="h-4 w-1/2" />
+ *   </CardHeader>
+ *   <CardContent>
+ *     <Skeleton class="aspect-video w-full" />
+ *   </CardContent>
+ * </Card>
+ *
+ * ### Text
+ *
+ * <div class="flex w-full max-w-xs flex-col gap-2">
+ *   <Skeleton class="h-4 w-full" />
+ *   <Skeleton class="h-4 w-full" />
+ *   <Skeleton class="h-4 w-3/4" />
+ * </div>
+ *
+ * ### Form
+ *
+ * <div class="flex w-full max-w-xs flex-col gap-7">
+ *   <div class="flex flex-col gap-3">
+ *     <Skeleton class="h-4 w-20" />
+ *     <Skeleton class="h-8 w-full" />
+ *   </div>
+ *   <div class="flex flex-col gap-3">
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-8 w-full" />
+ *   </div>
+ *   <Skeleton class="h-8 w-24" />
+ * </div>
+ *
+ * ### Table
+ *
+ * <div class="flex w-full max-w-sm flex-col gap-2">
+ *   <div class="flex gap-4">
+ *     <Skeleton class="h-4 flex-1" />
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-4 w-20" />
+ *   </div>
+ *   <div class="flex gap-4">
+ *     <Skeleton class="h-4 flex-1" />
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-4 w-20" />
+ *   </div>
+ *   <div class="flex gap-4">
+ *     <Skeleton class="h-4 flex-1" />
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-4 w-20" />
+ *   </div>
+ *   <div class="flex gap-4">
+ *     <Skeleton class="h-4 flex-1" />
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-4 w-20" />
+ *   </div>
+ *   <div class="flex gap-4">
+ *     <Skeleton class="h-4 flex-1" />
+ *     <Skeleton class="h-4 w-24" />
+ *     <Skeleton class="h-4 w-20" />
+ *   </div>
+ * </div>
+ *
+ * @props
+ * - class?: string — Additional classes for styling.
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+const { class: className = "", ...props } = Astro.props;
+---
+
+<div
+  data-slot="skeleton"
+  class={cn("bg-muted rounded-md animate-pulse", className)}
+  {...props}
+>
+  <slot />
+</div>

package/src/components/slider/Slider.astro

@@ -1,198 +1,198 @@
----
-/**
- * @component Slider
- * @title Slider
- * @description An input component that allows users to select a value from a range by dragging a thumb along a track.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-17811
- *
- * @preview
- *
- * <Slider class="w-full max-w-sm" defaultValue={50} max={100} />
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Slider } from '@bejamas/ui/components/slider';
- * ---
- *
- * <Slider defaultValue={50} max={100} />
- * ```
- *
- * @examples
- *
- * ### Range
- *
- * Use two thumbs to create a range slider for selecting a min and max value.
- *
- * <Slider class="w-full max-w-sm" defaultValue={[25, 75]} max={100} />
- *
- * ### Vertical
- *
- * Set orientation to vertical for a vertical slider.
- *
- * <div class="h-48">
- *   <Slider class="h-full" orientation="vertical" defaultValue={50} max={100} />
- * </div>
- *
- * ### Disabled
- *
- * Disable the slider to prevent interaction.
- *
- * <Slider class="w-full max-w-sm" defaultValue={50} max={100} disabled />
- *
- * ### Step
- *
- * Set a custom step increment.
- *
- * <Slider class="w-full max-w-sm" defaultValue={50} max={100} step={10} />
- *
- * @api
- *
- * ### Events
- *
- * The slider emits custom events that you can listen to:
- *
- * | Event | Detail | Description |
- * |-------|--------|-------------|
- * | `slider:change` | `{ value: number \| [number, number] }` | Fired on every value change (during drag) |
- * | `slider:commit` | `{ value: number \| [number, number] }` | Fired when value is committed (pointer up or keyboard blur) |
- *
- * ```astro nocollapse
- * <Slider id="my-slider" defaultValue={50} max={100} />
- * ```
- *
- * ```js nocollapse
- *   const slider = document.getElementById('my-slider');
- *
- *   slider.addEventListener('slider:change', (e) => {
- *     console.log('Value changing:', e.detail.value);
- *   });
- *
- *   slider.addEventListener('slider:commit', (e) => {
- *     console.log('Value committed:', e.detail.value);
- *   });
- * ```
- *
- * ### Programmatic Control
- *
- * You can set the slider value programmatically by dispatching a `slider:set` event:
- *
- * ```js nocollapse
- * // Set single value
- * slider.dispatchEvent(new CustomEvent('slider:set', {
- *   detail: { value: 75 }
- * }));
- *
- * // Set range values
- * slider.dispatchEvent(new CustomEvent('slider:set', {
- *   detail: { value: [25, 75] }
- * }));
- * ```
- *
- * ### Data Attributes
- *
- * The slider sets these data attributes that you can use for styling or querying state:
- *
- * | Attribute | Element | Description |
- * |-----------|---------|-------------|
- * | `data-orientation` | slider | Current orientation (`horizontal` or `vertical`) |
- * | `data-disabled` | slider | Present when slider is disabled |
- * | `data-dragging` | slider, thumb | Present during drag interaction |
- * | `data-value` | slider | Current value(s) as string (e.g., `"50"` or `"25,75"`) |
- *
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-type SliderValue = number | [number, number];
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  value?: SliderValue;
-  defaultValue?: SliderValue;
-  min?: number;
-  max?: number;
-  step?: number;
-  orientation?: "horizontal" | "vertical";
-  disabled?: boolean;
-}
-
-const {
-  class: className = "",
-  value,
-  defaultValue,
-  min = 0,
-  max = 100,
-  step = 1,
-  orientation = "horizontal",
-  disabled = false,
-  ...rest
-} = Astro.props as Props;
-
-const resolvedValue = value ?? defaultValue ?? min;
-const defaultValueAttribute = Array.isArray(resolvedValue)
-  ? resolvedValue.join(",")
-  : String(resolvedValue);
-const thumbCount = Array.isArray(resolvedValue) ? 2 : 1;
----
-
-<div
-  {...rest}
-  data-slot="slider"
-  data-default-value={defaultValueAttribute}
-  data-min={min}
-  data-max={max}
-  data-step={step}
-  data-orientation={orientation}
-  data-thumb-alignment="edge"
-  data-disabled={disabled ? "true" : undefined}
-  class={cn("data-horizontal:w-full data-vertical:h-full", className)}
->
-  <div
-    data-disabled={disabled ? "true" : undefined}
-    class="data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:cursor-not-allowed data-vertical:h-full data-vertical:w-auto data-vertical:flex-col"
-  >
-    <div
-      data-slot="slider-track"
-      class="bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow overflow-hidden select-none data-disabled:opacity-40"
-    >
-      <div
-        data-slot="slider-range"
-        class="bg-primary select-none data-horizontal:h-full data-vertical:w-full data-disabled:bg-slider-background-disabled"
-      >
-      </div>
-    </div>
-    {
-      Array.from({ length: thumbCount }, (_, index) => (
-        <div
-          data-slot="slider-thumb"
-          data-index={index}
-          data-disabled={disabled ? "true" : undefined}
-          class="border-primary size-4 rounded-full border-2 bg-background transition-[color,box-shadow] hover:ring-3 hover:ring-ring/50 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-hidden block shrink-0 select-none data-disabled:pointer-events-none data-disabled:bg-[linear-gradient(var(--slider-dot-background-disabled),var(--slider-dot-background-disabled))] data-disabled:border-[var(--primary-50)]"
-        />
-      ))
-    }
-  </div>
-</div>
-
-<script>
-  import { createSlider } from "@data-slot/slider";
-
-  document.querySelectorAll('[data-slot="slider"]').forEach((el) => {
-    const element = el as HTMLElement;
-
-    // Don't pass defaultValue in options - let the library read from
-    // data-default-value directly so single and range sliders stay aligned.
-    createSlider(element, {
-      min: Number(element.dataset.min) || 0,
-      max: Number(element.dataset.max) || 100,
-      step: Number(element.dataset.step) || 1,
-      orientation:
-        (element.dataset.orientation as "horizontal" | "vertical") ||
-        "horizontal",
-      disabled: element.dataset.disabled === "true",
-    });
-  });
-</script>
+---
+/**
+ * @component Slider
+ * @title Slider
+ * @description An input component that allows users to select a value from a range by dragging a thumb along a track.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-17811
+ *
+ * @preview
+ *
+ * <Slider class="w-full max-w-sm" defaultValue={50} max={100} />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Slider } from '@bejamas/ui/components/slider';
+ * ---
+ *
+ * <Slider defaultValue={50} max={100} />
+ * ```
+ *
+ * @examples
+ *
+ * ### Range
+ *
+ * Use two thumbs to create a range slider for selecting a min and max value.
+ *
+ * <Slider class="w-full max-w-sm" defaultValue={[25, 75]} max={100} />
+ *
+ * ### Vertical
+ *
+ * Set orientation to vertical for a vertical slider.
+ *
+ * <div class="h-48">
+ *   <Slider class="h-full" orientation="vertical" defaultValue={50} max={100} />
+ * </div>
+ *
+ * ### Disabled
+ *
+ * Disable the slider to prevent interaction.
+ *
+ * <Slider class="w-full max-w-sm" defaultValue={50} max={100} disabled />
+ *
+ * ### Step
+ *
+ * Set a custom step increment.
+ *
+ * <Slider class="w-full max-w-sm" defaultValue={50} max={100} step={10} />
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The slider emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `slider:change` | `{ value: number \| [number, number] }` | Fired on every value change (during drag) |
+ * | `slider:commit` | `{ value: number \| [number, number] }` | Fired when value is committed (pointer up or keyboard blur) |
+ *
+ * ```astro nocollapse
+ * <Slider id="my-slider" defaultValue={50} max={100} />
+ * ```
+ *
+ * ```js nocollapse
+ *   const slider = document.getElementById('my-slider');
+ *
+ *   slider.addEventListener('slider:change', (e) => {
+ *     console.log('Value changing:', e.detail.value);
+ *   });
+ *
+ *   slider.addEventListener('slider:commit', (e) => {
+ *     console.log('Value committed:', e.detail.value);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can set the slider value programmatically by dispatching a `slider:set` event:
+ *
+ * ```js nocollapse
+ * // Set single value
+ * slider.dispatchEvent(new CustomEvent('slider:set', {
+ *   detail: { value: 75 }
+ * }));
+ *
+ * // Set range values
+ * slider.dispatchEvent(new CustomEvent('slider:set', {
+ *   detail: { value: [25, 75] }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The slider sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-orientation` | slider | Current orientation (`horizontal` or `vertical`) |
+ * | `data-disabled` | slider | Present when slider is disabled |
+ * | `data-dragging` | slider, thumb | Present during drag interaction |
+ * | `data-value` | slider | Current value(s) as string (e.g., `"50"` or `"25,75"`) |
+ *
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+type SliderValue = number | [number, number];
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  value?: SliderValue;
+  defaultValue?: SliderValue;
+  min?: number;
+  max?: number;
+  step?: number;
+  orientation?: "horizontal" | "vertical";
+  disabled?: boolean;
+}
+
+const {
+  class: className = "",
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = "horizontal",
+  disabled = false,
+  ...rest
+} = Astro.props as Props;
+
+const resolvedValue = value ?? defaultValue ?? min;
+const defaultValueAttribute = Array.isArray(resolvedValue)
+  ? resolvedValue.join(",")
+  : String(resolvedValue);
+const thumbCount = Array.isArray(resolvedValue) ? 2 : 1;
+---
+
+<div
+  {...rest}
+  data-slot="slider"
+  data-default-value={defaultValueAttribute}
+  data-min={min}
+  data-max={max}
+  data-step={step}
+  data-orientation={orientation}
+  data-thumb-alignment="edge"
+  data-disabled={disabled ? "true" : undefined}
+  class={cn("data-horizontal:w-full data-vertical:h-full", className)}
+>
+  <div
+    data-disabled={disabled ? "true" : undefined}
+    class="data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:cursor-not-allowed data-vertical:h-full data-vertical:w-auto data-vertical:flex-col"
+  >
+    <div
+      data-slot="slider-track"
+      class="bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow overflow-hidden select-none data-disabled:opacity-40"
+    >
+      <div
+        data-slot="slider-range"
+        class="bg-primary select-none data-horizontal:h-full data-vertical:w-full data-disabled:bg-slider-background-disabled"
+      >
+      </div>
+    </div>
+    {
+      Array.from({ length: thumbCount }, (_, index) => (
+        <div
+          data-slot="slider-thumb"
+          data-index={index}
+          data-disabled={disabled ? "true" : undefined}
+          class="border-primary size-4 rounded-full border-2 bg-background transition-[color,box-shadow] hover:ring-3 hover:ring-ring/50 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-hidden block shrink-0 select-none data-disabled:pointer-events-none data-disabled:bg-[linear-gradient(var(--slider-dot-background-disabled),var(--slider-dot-background-disabled))] data-disabled:border-[var(--primary-50)]"
+        />
+      ))
+    }
+  </div>
+</div>
+
+<script>
+  import { createSlider } from "@data-slot/slider";
+
+  document.querySelectorAll('[data-slot="slider"]').forEach((el) => {
+    const element = el as HTMLElement;
+
+    // Don't pass defaultValue in options - let the library read from
+    // data-default-value directly so single and range sliders stay aligned.
+    createSlider(element, {
+      min: Number(element.dataset.min) || 0,
+      max: Number(element.dataset.max) || 100,
+      step: Number(element.dataset.step) || 1,
+      orientation:
+        (element.dataset.orientation as "horizontal" | "vertical") ||
+        "horizontal",
+      disabled: element.dataset.disabled === "true",
+    });
+  });
+</script>

package/src/components/spinner/CHANGELOG.md

@@ -2,4 +2,17 @@
 
 All notable changes to the `Spinner` component will be documented in this file.
 
-## Unreleased
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5455-18523`)
+
+Figma documents Spinner as four discrete sizes: Extra Small (12px), Small (16px), Medium (24px), Large (32px) — all rendered in a consistent primary-blue color.
+
+### Fixed
+
+- Added the missing `@figmaUrl`.
+- Default color: added `text-primary` so the spinner's `stroke="currentColor"` resolves to primary blue (`#3785e0`, confirmed against Figma) by default, matching every size shown in Figma — previously it had no default color at all and just inherited whatever ambient text color happened to be in scope.
+- Fixed a real regression that default color change caused: the storybook's own "Badge" example nests a bare `<Spinner data-icon />` inside the default (solid primary-blue) `Badge` variant — with the new default, the spinner became invisible (blue icon on blue background). Fixed by explicitly overriding it to `class="text-primary-foreground"` in that one case (both in the storybook page and the identical demo duplicated in `Spinner.astro`'s own JSDoc), matching the badge's own foreground token. All other compositions (outline/secondary badges, disabled buttons — which force `bg-muted` regardless of variant, so never collide with primary blue) were unaffected.
+
+### Notes
+
+- No new `size` prop added — the existing "use a `size-*` utility class" pattern already produces Figma's exact four sizes (`size-3`/`size-4`/`size-6`/`size-8` = 12/16/24/32px), confirmed already documented in the component's own JSDoc and storybook page. Relabeled the storybook "Size" demo with Figma's own names (Extra Small/Small/Medium/Large) for clarity.
+- Stroke width and animation were already correct — no Figma evidence suggested otherwise.