@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/spinner/Spinner.astro

@@ -1,134 +1,135 @@
----
-/**
- * @component Spinner
- * @title Spinner
- * @description A loading indicator component that displays an animated spinning icon.
- *
- * @preview
- *
- * <Item variant="muted" class="w-full max-w-xs">
- *   <ItemMedia>
- *     <Spinner />
- *   </ItemMedia>
- *   <ItemContent>
- *     <ItemTitle class="line-clamp-1">Submitting Contact Form...</ItemTitle>
- *   </ItemContent>
- * </Item>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Spinner } from '@bejamas/ui/components/spinner';
- * ---
- *
- * <Spinner />
- * ```
- *
- * ## Customization
- *
- * You can replace the default spinner icon with any other icon by editing the `Spinner` component.
- *
- * ```astro showLineNumbers title="components/ui/spinner/Spinner.astro" nocollapse nopreview
- * ---
- * import { cn } from "@cl-light-ds/ui/lib/utils";
- * import { Loader as LoaderIcon } from "@lucide/astro";
- *
- * const { class: className = "", ...props } = Astro.props;
- * ---
- *
- * <LoaderIcon
- *   data-slot="spinner"
- *   role="status"
- *   aria-label="Loading"
- *   class={cn("cn-spinner", "size-4 animate-spin", className)}
- *   {...props}
- * />
- * ```
- *
- * @examples
- *
- * ### Size
- *
- * Use the `size-*` utility class to change the size of the spinner.
- *
- * <div class="flex items-center gap-6">
- *   <Spinner class="size-3" />
- *   <Spinner class="size-4" />
- *   <Spinner class="size-6" />
- *   <Spinner class="size-8" />
- * </div>
- *
- * ### Button
- *
- * Add a spinner to a button to indicate a loading state. Remember to use the `data-icon` attribute for proper spacing.
- *
- * <div class="flex flex-col items-center gap-4">
- *   <Button disabled size="sm">
- *     <Spinner data-icon />
- *     Loading...
- *   </Button>
- *   <Button variant="outline" disabled size="sm">
- *     <Spinner data-icon />
- *     Please wait
- *   </Button>
- *   <Button variant="secondary" disabled size="sm">
- *     <Spinner data-icon />
- *     Processing
- *   </Button>
- * </div>
- *
- * ### Badge
- *
- * Add a spinner to a badge to indicate a loading state.
- *
- * <div class="flex items-center gap-4 [--radius:1.2rem]">
- *   <Badge>
- *     <Spinner data-icon />
- *     Syncing
- *   </Badge>
- *   <Badge variant="secondary">
- *     <Spinner data-icon />
- *     Updating
- *   </Badge>
- *   <Badge variant="outline">
- *     <Spinner data-icon />
- *     Processing
- *   </Badge>
- * </div>
- *
- * ### Input Group
- *
- * <div class="flex w-full max-w-md flex-col gap-4">
- *   <InputGroup>
- *     <InputGroupInput placeholder="Send a message..." disabled />
- *     <InputGroupAddon align="inline-end">
- *       <Spinner />
- *     </InputGroupAddon>
- *   </InputGroup>
- *   <InputGroup>
- *     <InputGroupTextarea placeholder="Send a message..." disabled />
- *     <InputGroupAddon align="block-end">
- *       <Spinner /> Validating...
- *       <InputGroupButton class="ml-auto" variant="default">
- *         <ArrowUpIcon />
- *         <span class="sr-only">Send</span>
- *       </InputGroupButton>
- *     </InputGroupAddon>
- *   </InputGroup>
- * </div>
- *
- * @props
- * - class?: string — Additional classes for styling (e.g., size-3, size-6).
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-const { class: className = "", ...props } = Astro.props;
----
-
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-slot="spinner"
-  role="status"
-  aria-label="Loading"
-  class={cn("", "size-4 animate-spin", className)}
-  {...props}><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+---
+/**
+ * @component Spinner
+ * @title Spinner
+ * @description A loading indicator component that displays an animated spinning icon.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-18523
+ *
+ * @preview
+ *
+ * <Item variant="muted" class="w-full max-w-xs">
+ *   <ItemMedia>
+ *     <Spinner />
+ *   </ItemMedia>
+ *   <ItemContent>
+ *     <ItemTitle class="line-clamp-1">Submitting Contact Form...</ItemTitle>
+ *   </ItemContent>
+ * </Item>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Spinner } from '@bejamas/ui/components/spinner';
+ * ---
+ *
+ * <Spinner />
+ * ```
+ *
+ * ## Customization
+ *
+ * You can replace the default spinner icon with any other icon by editing the `Spinner` component.
+ *
+ * ```astro showLineNumbers title="components/ui/spinner/Spinner.astro" nocollapse nopreview
+ * ---
+ * import { cn } from "@cl-light-ds/ui/lib/utils";
+ * import { Loader as LoaderIcon } from "@lucide/astro";
+ *
+ * const { class: className = "", ...props } = Astro.props;
+ * ---
+ *
+ * <LoaderIcon
+ *   data-slot="spinner"
+ *   role="status"
+ *   aria-label="Loading"
+ *   class={cn("cn-spinner", "size-4 animate-spin", className)}
+ *   {...props}
+ * />
+ * ```
+ *
+ * @examples
+ *
+ * ### Size
+ *
+ * Use the `size-*` utility class to change the size of the spinner.
+ *
+ * <div class="flex items-center gap-6">
+ *   <Spinner class="size-3" />
+ *   <Spinner class="size-4" />
+ *   <Spinner class="size-6" />
+ *   <Spinner class="size-8" />
+ * </div>
+ *
+ * ### Button
+ *
+ * Add a spinner to a button to indicate a loading state. Remember to use the `data-icon` attribute for proper spacing.
+ *
+ * <div class="flex flex-col items-center gap-4">
+ *   <Button disabled size="sm">
+ *     <Spinner data-icon />
+ *     Loading...
+ *   </Button>
+ *   <Button variant="outline" disabled size="sm">
+ *     <Spinner data-icon />
+ *     Please wait
+ *   </Button>
+ *   <Button variant="secondary" disabled size="sm">
+ *     <Spinner data-icon />
+ *     Processing
+ *   </Button>
+ * </div>
+ *
+ * ### Badge
+ *
+ * Add a spinner to a badge to indicate a loading state.
+ *
+ * <div class="flex items-center gap-4 [--radius:1.2rem]">
+ *   <Badge>
+ *     <Spinner data-icon class="text-primary-foreground" />
+ *     Syncing
+ *   </Badge>
+ *   <Badge variant="secondary">
+ *     <Spinner data-icon />
+ *     Updating
+ *   </Badge>
+ *   <Badge variant="outline">
+ *     <Spinner data-icon />
+ *     Processing
+ *   </Badge>
+ * </div>
+ *
+ * ### Input Group
+ *
+ * <div class="flex w-full max-w-md flex-col gap-4">
+ *   <InputGroup>
+ *     <InputGroupInput placeholder="Send a message..." disabled />
+ *     <InputGroupAddon align="inline-end">
+ *       <Spinner />
+ *     </InputGroupAddon>
+ *   </InputGroup>
+ *   <InputGroup>
+ *     <InputGroupTextarea placeholder="Send a message..." disabled />
+ *     <InputGroupAddon align="block-end">
+ *       <Spinner /> Validating...
+ *       <InputGroupButton class="ml-auto" variant="default">
+ *         <ArrowUpIcon />
+ *         <span class="sr-only">Send</span>
+ *       </InputGroupButton>
+ *     </InputGroupAddon>
+ *   </InputGroup>
+ * </div>
+ *
+ * @props
+ * - class?: string — Additional classes for styling (e.g., size-3, size-6).
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+const { class: className = "", ...props } = Astro.props;
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-slot="spinner"
+  role="status"
+  aria-label="Loading"
+  class={cn("text-primary", "size-4 animate-spin", className)}
+  {...props}><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>

package/src/components/sticky-surface/StickySurface.astro

@@ -1,152 +1,152 @@
----
-/**
- * @component StickySurface
- * @title Sticky Surface
- * @description A sticky surface component with scroll-based effects (border, shadow, surface swap, shrink, glass).
- * @figmaUrl 
- * 
- * @preview
- * 
- * <div class="overflow-y-auto max-h-[320px] w-full bg-border px-8 border-border">
- *   <div class="h-[1000px] bg-muted">
- *     <StickySurface effects={["line", "elevate"]} threshold="1rem" observeStuck class="bg-background p-4 flex justify-between items-center">
- *       <p>Scroll inside!</p>
- *       <div class="flex items-center gap-2">
- *         <Button size="sm" variant="outline" class="group-[.is-stuck]/surface:opacity-0 will-change-transform group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out">Log in</Button>
- *         <Button size="sm" class="w-24 group-[.is-stuck]/surface:w-28 duration-500 ease-out">
- *           <span class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out">Contact</span>
- *           <span class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 opacity-0 transition-all blur-sm duration-500 ease-out">Get a demo</span>
- *         </Button>
- *       </div>
- *     </StickySurface>
- *   </div>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { StickySurface } from '@bejamas/ui/components/sticky-surface';
- * ---
- *
- * <StickySurface effects={["line", "elevate"]} threshold="1rem">
- *   <!-- Your content here -->
- * </StickySurface>
- * ```
- */
-
-import type { HTMLTag } from "astro/types";
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props {
-  as?: HTMLTag;
-  threshold?: string | number;
-  effects?: Array<"line" | "elevate" | "backdrop">;
-  class?: string;
-  style?: string;
-  observeStuck?: boolean;
-}
-
-const {
-  as = "div",
-  threshold = "16px",
-  effects = [],
-  class: className = "",
-  style = "",
-  ...props
-} = Astro.props as Props;
-
-// Compose effect booleans for easier use
-const hasLine = effects.includes("line");
-const hasElevate = effects.includes("elevate");
-const hasBackdrop = effects.includes("backdrop");
-
-// CSS variable tokens (can be overridden via Tailwind arbitrary props)
-const defaultVars = {
-  '--stuck-shadow': '0 2px 8px 0 rgb(0 0 0 / 0.06)',
-  '--stuck-threshold': typeof threshold === "number" ? `${threshold}px` : threshold,
-};
-
-
-const Tag = as;
-
-// cva for sticky surface effects
-const stickySurfaceVariants = cva(
-  [
-    "group/surface", "sticky", "top-0", "z-50", "w-full", "transition-all", "duration-300", "will-change-transform"
-  ],
-  {
-    variants: {
-      line: {
-        true: "after:content-[''] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-black/15 after:opacity-0 supports-[animation-timeline:scroll()]:after:[animation:show-line_linear_both] supports-[animation-timeline:scroll()]:after:[animation-timeline:scroll(nearest_block)] supports-[animation-timeline:scroll()]:after:[animation-range:0_var(--stuck-threshold)]"
-      },
-      elevate: {
-        true: "shadow-none supports-[animation-timeline:scroll()]:[animation:stuck-shadow_linear_both] supports-[animation-timeline:scroll()]:[animation-timeline:scroll(nearest_block)] supports-[animation-timeline:scroll()]:[animation-range:0_var(--stuck-threshold)]"
-      },
-      backdrop: {
-        true: "backdrop-blur supports-[animation-timeline:scroll()]:[animation:stuck-backdrop_linear_both] supports-[animation-timeline:scroll()]:[animation-timeline:scroll(nearest_block)] supports-[animation-timeline:scroll()]:[animation-range:0_var(--stuck-threshold)]"
-      }
-    }
-  }
-);
-
-const effectClasses = cn(
-  "",
-  stickySurfaceVariants({
-    line: hasLine,
-    elevate: hasElevate,
-    backdrop: hasBackdrop
-  }),
-  className
-);
-
-const styleVars = Object.entries(defaultVars)
-  ?.map(([k, v]) => `${k}:${v}`)
-  ?.join(";");
----
-
-<Tag
-  class={effectClasses}
-  style={`${styleVars};${style}`}
-  data-sticky-surface
-  {...props}
->
-  <slot />
-</Tag>
-
-<style>
-@supports (animation-timeline: scroll()) {
-  /* Line fade-in */
-  @keyframes show-line {
-    from { opacity: 0 }
-    to { opacity: 1 }
-  }
-  /* Shadow fade-in */
-  @keyframes stuck-shadow {
-    from { box-shadow: none }
-    to { box-shadow: var(--stuck-shadow) }
-  }
-}
-</style>
-
-
-{Astro.props.observeStuck && (
-  <script is:inline>
-    (() => {
-      const surfaces = document.querySelectorAll('[data-sticky-surface]');
-      surfaces.forEach(surface => {
-        // Insert a 1px sentinel right before the sticky element
-        const sentinel = document.createElement('div');
-        sentinel.style.cssText = 'position:relative;height:0;opacity:0;visibility:hidden;';
-        surface.parentNode?.insertBefore(sentinel, surface);
-    
-        const io = new IntersectionObserver(([e]) => {
-          surface.classList.toggle('is-stuck', !e.isIntersecting);
-        }, { threshold: [0, 1] });
-    
-        io.observe(sentinel);
-      });
-    })();
-  </script>
-)}
+---
+/**
+ * @component StickySurface
+ * @title Sticky Surface
+ * @description A sticky surface component with scroll-based effects (border, shadow, surface swap, shrink, glass).
+ * @figmaUrl 
+ * 
+ * @preview
+ * 
+ * <div class="overflow-y-auto max-h-[320px] w-full bg-border px-8 border-border">
+ *   <div class="h-[1000px] bg-muted">
+ *     <StickySurface effects={["line", "elevate"]} threshold="1rem" observeStuck class="bg-background p-4 flex justify-between items-center">
+ *       <p>Scroll inside!</p>
+ *       <div class="flex items-center gap-2">
+ *         <Button size="sm" variant="outline" class="group-[.is-stuck]/surface:opacity-0 will-change-transform group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out">Log in</Button>
+ *         <Button size="sm" class="w-24 group-[.is-stuck]/surface:w-28 duration-500 ease-out">
+ *           <span class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out">Contact</span>
+ *           <span class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 opacity-0 transition-all blur-sm duration-500 ease-out">Get a demo</span>
+ *         </Button>
+ *       </div>
+ *     </StickySurface>
+ *   </div>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { StickySurface } from '@bejamas/ui/components/sticky-surface';
+ * ---
+ *
+ * <StickySurface effects={["line", "elevate"]} threshold="1rem">
+ *   <!-- Your content here -->
+ * </StickySurface>
+ * ```
+ */
+
+import type { HTMLTag } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props {
+  as?: HTMLTag;
+  threshold?: string | number;
+  effects?: Array<"line" | "elevate" | "backdrop">;
+  class?: string;
+  style?: string;
+  observeStuck?: boolean;
+}
+
+const {
+  as = "div",
+  threshold = "16px",
+  effects = [],
+  class: className = "",
+  style = "",
+  ...props
+} = Astro.props as Props;
+
+// Compose effect booleans for easier use
+const hasLine = effects.includes("line");
+const hasElevate = effects.includes("elevate");
+const hasBackdrop = effects.includes("backdrop");
+
+// CSS variable tokens (can be overridden via Tailwind arbitrary props)
+const defaultVars = {
+  '--stuck-shadow': '0 2px 8px 0 rgb(0 0 0 / 0.06)',
+  '--stuck-threshold': typeof threshold === "number" ? `${threshold}px` : threshold,
+};
+
+
+const Tag = as;
+
+// cva for sticky surface effects
+const stickySurfaceVariants = cva(
+  [
+    "group/surface", "sticky", "top-0", "z-50", "w-full", "transition-all", "duration-300", "will-change-transform"
+  ],
+  {
+    variants: {
+      line: {
+        true: "after:content-[''] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-black/15 after:opacity-0 supports-[animation-timeline:scroll()]:after:[animation:show-line_linear_both] supports-[animation-timeline:scroll()]:after:[animation-timeline:scroll(nearest_block)] supports-[animation-timeline:scroll()]:after:[animation-range:0_var(--stuck-threshold)]"
+      },
+      elevate: {
+        true: "shadow-none supports-[animation-timeline:scroll()]:[animation:stuck-shadow_linear_both] supports-[animation-timeline:scroll()]:[animation-timeline:scroll(nearest_block)] supports-[animation-timeline:scroll()]:[animation-range:0_var(--stuck-threshold)]"
+      },
+      backdrop: {
+        true: "backdrop-blur supports-[animation-timeline:scroll()]:[animation:stuck-backdrop_linear_both] supports-[animation-timeline:scroll()]:[animation-timeline:scroll(nearest_block)] supports-[animation-timeline:scroll()]:[animation-range:0_var(--stuck-threshold)]"
+      }
+    }
+  }
+);
+
+const effectClasses = cn(
+  "",
+  stickySurfaceVariants({
+    line: hasLine,
+    elevate: hasElevate,
+    backdrop: hasBackdrop
+  }),
+  className
+);
+
+const styleVars = Object.entries(defaultVars)
+  ?.map(([k, v]) => `${k}:${v}`)
+  ?.join(";");
+---
+
+<Tag
+  class={effectClasses}
+  style={`${styleVars};${style}`}
+  data-sticky-surface
+  {...props}
+>
+  <slot />
+</Tag>
+
+<style>
+@supports (animation-timeline: scroll()) {
+  /* Line fade-in */
+  @keyframes show-line {
+    from { opacity: 0 }
+    to { opacity: 1 }
+  }
+  /* Shadow fade-in */
+  @keyframes stuck-shadow {
+    from { box-shadow: none }
+    to { box-shadow: var(--stuck-shadow) }
+  }
+}
+</style>
+
+
+{Astro.props.observeStuck && (
+  <script is:inline>
+    (() => {
+      const surfaces = document.querySelectorAll('[data-sticky-surface]');
+      surfaces.forEach(surface => {
+        // Insert a 1px sentinel right before the sticky element
+        const sentinel = document.createElement('div');
+        sentinel.style.cssText = 'position:relative;height:0;opacity:0;visibility:hidden;';
+        surface.parentNode?.insertBefore(sentinel, surface);
+    
+        const io = new IntersectionObserver(([e]) => {
+          surface.classList.toggle('is-stuck', !e.isIntersecting);
+        }, { threshold: [0, 1] });
+    
+        io.observe(sentinel);
+      });
+    })();
+  </script>
+)}

package/src/components/switch/CHANGELOG.md

@@ -7,3 +7,23 @@ All notable changes to the `Switch` component will be documented in this file.
 ### Fixed
 
 - Restored interactivity: `@data-slot/switch` (already the correct import in `Switch.astro`) was never added as a dependency and was aliased to a no-op stub so builds wouldn't crash, leaving Switch fully static. Added the real package as a dependency and removed the stub alias.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `50-5797`)
+
+Figma documents Switch across four pages: Contents (Simple, Label, Label and Caption), States (Default, Hover, Focus, Disabled), Sizes (Small 32×20, Large 36×24), and Variants (implicit in the main component: Default/Checked).
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- `default` size track height: `h-[18.4px]` (an odd, clearly unintentional fractional value) → `h-5` (20px), matching Figma's "Small" track exactly. Width (`w-8`/32px) was already correct. Also swapped the now-equivalent `w-[32px]` for the canonical `w-8` utility.
+- Added `size="lg"` (36×24px, matching Figma's "Large") — previously only `sm`/`default` existed, with no tier matching Figma's larger documented size. The new thumb size (18px) and translate distance were derived to preserve the exact same proportions already used by `sm`/`default` (thumb = exactly half the track width in both existing tiers), confirmed against a pixel-level measurement of Figma's own Large checked-state export.
+
+### Added
+
+- A "Label and caption" storybook example (`Field`/`FieldLabel`/`FieldDescription`), matching Figma's third documented content variant — not previously demonstrated.
+
+### Notes
+
+- Track colors (`bg-primary` checked / `bg-muted` unchecked), Focus ring (`border-ring`/`ring-3 ring-ring/50`), and the Disabled treatment (`opacity-50`) all already matched Figma's tokens/visual exactly — confirmed Figma's own Disabled state screenshot shows the same washed-out/low-contrast look an opacity fade produces, unlike Checkbox/Input/RadioGroup where a flat muted-color swap was clearly evident instead.
+- `size="sm"` (24×14px) has no corresponding size in Figma (which only documents Small/Large, mapping to this component's `default`/`lg`) — flagging the naming mismatch per the recurring pattern (Accordion/Checkbox/Input/RadioGroup), not renaming here since `sm` isn't Figma-validated at all and isn't used anywhere outside its own demo.
+- Simple and Label content variants were already fully supported (a bare `Switch`, or paired with a sibling `Label`) — no changes needed.