@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/toggle/Toggle.astro

@@ -1,138 +1,150 @@
----
-/**
- * @component Toggle
- * @title Toggle
- * @description A two-state button that can be either on or off.
- *
- * @preview
- *
- * <Toggle aria-label="Toggle bookmark" variant="outline">
- *   <BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
- *   Bookmark
- * </Toggle>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Toggle } from '@bejamas/ui/components/toggle';
- * import { BoldIcon } from '@lucide/astro';
- * ---
- *
- * <Toggle aria-label="Toggle bold">
- *   <BoldIcon />
- * </Toggle>
- * ```
- *
- * @api
- *
- * ### Events
- *
- * | Event | Detail | Description |
- * |-------|--------|-------------|
- * | `toggle:change` | `{ pressed: boolean }` | Fired when the toggle state changes |
- *
- * ### Programmatic Control
- *
- * ```js nocollapse
- * // Set toggle state programmatically
- * element.dispatchEvent(new CustomEvent('toggle:set', { detail: { value: true } }));
- * ```
- *
- * ### Data Attributes
- *
- * | Attribute | Element | Description |
- * |-----------|---------|-------------|
- * | `data-state` | toggle | Current state: `on` or `off` |
- * | `data-disabled` | toggle | Present when toggle is disabled |
- *
- * @examples
- *
- * ### Outline
- *
- * <div class="flex items-center gap-2">
- *   <Toggle variant="outline" aria-label="Toggle bold">
- *     <BoldIcon />
- *     Bold
- *   </Toggle>
- *   <Toggle variant="outline" aria-label="Toggle italic">
- *     <ItalicIcon />
- *     Italic
- *   </Toggle>
- * </div>
- *
- * ### With Text
- *
- * <Toggle variant="outline" aria-label="Toggle italic">
- *   <ItalicIcon />
- *   Italic
- * </Toggle>
- *
- * ### Sizes
- *
- * <div class="flex items-center gap-2">
- *   <Toggle size="sm" variant="outline" aria-label="Toggle small">
- *     Small
- *   </Toggle>
- *   <Toggle size="default" variant="outline" aria-label="Toggle default">
- *     Default
- *   </Toggle>
- *   <Toggle size="lg" variant="outline" aria-label="Toggle large">
- *     Large
- *   </Toggle>
- * </div>
- *
- * ### Disabled
- *
- * <div class="flex items-center gap-2">
- *   <Toggle disabled aria-label="Toggle bold">
- *     Disabled
- *   </Toggle>
- *   <Toggle disabled variant="outline" aria-label="Toggle italic">
- *     Disabled
- *   </Toggle>
- * </div>
- *
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import {
-  toggleVariants,
-  type ToggleVariantProps,
-} from "@cl-light-ds/ui/lib/toggle-shared";
-
-interface Props extends ToggleVariantProps, Omit<HTMLAttributes<"button">, "class"> {
-  defaultPressed?: boolean;
-  disabled?: boolean;
-  class?: string;
-}
-
-const {
-  variant = "default",
-  size = "default",
-  defaultPressed,
-  disabled,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<button
-  type="button"
-  data-slot="toggle"
-  data-default-pressed={defaultPressed ? "" : undefined}
-  data-disabled={disabled ? "true" : undefined}
-  disabled={disabled}
-  class={cn(toggleVariants({ variant, size }), className)}
-  {...rest}
->
-  <slot />
-</button>
-
-<script>
-  import { createToggle } from "@data-slot/toggle";
-  document
-    .querySelectorAll<HTMLElement>('[data-slot="toggle"]')
-    .forEach((el) => createToggle(el));
-</script>
+---
+/**
+ * @component Toggle
+ * @title Toggle
+ * @description A two-state button that can be either on or off.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-19034
+ *
+ * @preview
+ *
+ * <Toggle aria-label="Toggle bookmark" variant="outline">
+ *   <BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
+ *   Bookmark
+ * </Toggle>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Toggle } from '@bejamas/ui/components/toggle';
+ * import { BoldIcon } from '@lucide/astro';
+ * ---
+ *
+ * <Toggle aria-label="Toggle bold">
+ *   <BoldIcon />
+ * </Toggle>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `toggle:change` | `{ pressed: boolean }` | Fired when the toggle state changes |
+ *
+ * ### Programmatic Control
+ *
+ * ```js nocollapse
+ * // Set toggle state programmatically
+ * element.dispatchEvent(new CustomEvent('toggle:set', { detail: { value: true } }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | toggle | Current state: `on` or `off` |
+ * | `data-disabled` | toggle | Present when toggle is disabled |
+ *
+ * @examples
+ *
+ * ### Outline
+ *
+ * <div class="flex items-center gap-2">
+ *   <Toggle variant="outline" aria-label="Toggle bold">
+ *     <BoldIcon />
+ *     Bold
+ *   </Toggle>
+ *   <Toggle variant="outline" aria-label="Toggle italic">
+ *     <ItalicIcon />
+ *     Italic
+ *   </Toggle>
+ * </div>
+ *
+ * ### With Text
+ *
+ * <Toggle variant="outline" aria-label="Toggle italic">
+ *   <ItalicIcon />
+ *   Italic
+ * </Toggle>
+ *
+ * ### Sizes
+ *
+ * <div class="flex items-center gap-2">
+ *   <Toggle size="xs" variant="outline" aria-label="Toggle extra small">
+ *     XS
+ *   </Toggle>
+ *   <Toggle size="sm" variant="outline" aria-label="Toggle small">
+ *     Small
+ *   </Toggle>
+ *   <Toggle size="default" variant="outline" aria-label="Toggle default">
+ *     Default
+ *   </Toggle>
+ *   <Toggle size="lg" variant="outline" aria-label="Toggle large">
+ *     Large
+ *   </Toggle>
+ * </div>
+ *
+ * ### Tail icon
+ *
+ * <Toggle variant="outline" aria-label="Toggle bookmark">
+ *   <BookmarkIcon class="group-aria-pressed/toggle:fill-foreground" />
+ *   Bookmark
+ *   <XIcon class="size-3.5" />
+ * </Toggle>
+ *
+ * ### Disabled
+ *
+ * <div class="flex items-center gap-2">
+ *   <Toggle disabled aria-label="Toggle bold">
+ *     Disabled
+ *   </Toggle>
+ *   <Toggle disabled variant="outline" aria-label="Toggle italic">
+ *     Disabled
+ *   </Toggle>
+ * </div>
+ *
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import {
+  toggleVariants,
+  type ToggleVariantProps,
+} from "@cl-light-ds/ui/lib/toggle-shared";
+
+interface Props extends ToggleVariantProps, Omit<HTMLAttributes<"button">, "class"> {
+  defaultPressed?: boolean;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  variant = "outline",
+  size = "default",
+  defaultPressed,
+  disabled,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  type="button"
+  data-slot="toggle"
+  data-default-pressed={defaultPressed ? "" : undefined}
+  data-disabled={disabled ? "true" : undefined}
+  disabled={disabled}
+  class={cn(toggleVariants({ variant, size }), className)}
+  {...rest}
+>
+  <slot />
+</button>
+
+<script>
+  import { createToggle } from "@data-slot/toggle";
+  document
+    .querySelectorAll<HTMLElement>('[data-slot="toggle"]')
+    .forEach((el) => createToggle(el));
+</script>

package/src/components/toggle-group/CHANGELOG.md

@@ -2,4 +2,17 @@
 
 All notable changes to the `ToggleGroup` component will be documented in this file.
 
-## Unreleased
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5455-20808`)
+
+Figma documents ToggleGroup across four pages: States (Default, Hover, Pressed, Focus Default, Focus Pressed, Disabled), Sizes (Small 28px, Medium 32px, Large 36px — matching `Toggle`'s own scale), Items (Lead/Middle/Tail item positions × sizes × states), and the top-level Variants page (Small/Medium/Large).
+
+### Fixed
+
+- Added the missing `@figmaUrl`.
+- **Default variant**: changed the component's own default from `"default"` to `"outline"`, matching Figma's bordered default look — same fix and same reasoning as `Toggle` (every existing usage example already passed `variant="outline"` explicitly, so this is a no-op for current demos).
+- **Sizes**: added `size="xs"` (28px) to the shared `toggleVariants` (see `Toggle`'s changelog for the full sizing analysis — `ToggleGroup` uses the identical scale). `ToggleGroupItem`'s own `size` override picks this up automatically since it shares the same `ToggleVariantProps` type.
+
+### Notes
+
+- Segmented "connected" styling (`spacing=0` → shared borders, first/last rounding) and the vertical-orientation border swap weren't shown differently in Figma's reference (which only documents individual items, not the connected-segment composition) — left unchanged since there's no contradicting evidence.
+- Disabled/Focus/Pressed treatments are inherited from the same shared `toggleVariants` fixed in `Toggle` — no separate `ToggleGroup`-specific styling needed.