@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/toggle-group/ToggleGroup.astro

@@ -1,236 +1,236 @@
----
-/**
- * @component ToggleGroup
- * @title Toggle Group
- * @description A set of two-state buttons that can be toggled on or off. Supports single or multiple selection.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-20808
- *
- * @preview
- *
- * <ToggleGroup defaultValue="center" variant="outline">
- *   <ToggleGroupItem value="left" aria-label="Align left">
- *     <AlignLeftIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="center" aria-label="Align center">
- *     <AlignCenterIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="right" aria-label="Align right">
- *     <AlignRightIcon />
- *   </ToggleGroupItem>
- * </ToggleGroup>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
- * import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/astro';
- * ---
- *
- * <ToggleGroup defaultValue="bold" variant="outline">
- *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
- *     <BoldIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="italic" aria-label="Toggle italic">
- *     <ItalicIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="underline" aria-label="Toggle underline">
- *     <UnderlineIcon />
- *   </ToggleGroupItem>
- * </ToggleGroup>
- * ```
- *
- * @api
- *
- * ### Events
- *
- * | Event | Detail | Description |
- * |-------|--------|-------------|
- * | `toggle-group:change` | `{ value: string[] }` | Fired when the selection changes |
- *
- * ### Programmatic Control
- *
- * ```js nocollapse
- * // Set selected values programmatically
- * element.dispatchEvent(new CustomEvent('toggle-group:set', {
- *   detail: { value: ['bold', 'italic'] }
- * }));
- * ```
- *
- * ### Data Attributes
- *
- * | Attribute | Element | Description |
- * |-----------|---------|-------------|
- * | `data-state` | toggle-group-item | Current state: `on` or `off` |
- * | `data-disabled` | toggle-group | Present when group is disabled |
- * | `data-orientation` | toggle-group | Orientation: `horizontal` or `vertical` |
- * | `data-spacing` | toggle-group | Gap value used by style packs |
- * | `data-variant` | toggle-group | Visual variant: `default` or `outline` |
- * | `data-size` | toggle-group | Size: `sm`, `default`, or `lg` |
- *
- * @examples
- *
- * ### Multiple Selection
- *
- * <ToggleGroup multiple defaultValue={["bold", "italic"]} variant="outline">
- *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
- *     <BoldIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="italic" aria-label="Toggle italic">
- *     <ItalicIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="underline" aria-label="Toggle underline">
- *     <UnderlineIcon />
- *   </ToggleGroupItem>
- * </ToggleGroup>
- *
- * ### Outline Variant
- *
- * <ToggleGroup variant="outline" defaultValue="center">
- *   <ToggleGroupItem value="left" aria-label="Align left">
- *     <AlignLeftIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="center" aria-label="Align center">
- *     <AlignCenterIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="right" aria-label="Align right">
- *     <AlignRightIcon />
- *   </ToggleGroupItem>
- * </ToggleGroup>
- *
- * ### Sizes
- *
- * <div class="flex flex-col gap-4">
- *   <ToggleGroup size="xs" variant="outline" defaultValue="center">
- *     <ToggleGroupItem value="left" aria-label="Align left">
- *       <AlignLeftIcon />
- *     </ToggleGroupItem>
- *     <ToggleGroupItem value="center" aria-label="Align center">
- *       <AlignCenterIcon />
- *     </ToggleGroupItem>
- *     <ToggleGroupItem value="right" aria-label="Align right">
- *       <AlignRightIcon />
- *     </ToggleGroupItem>
- *   </ToggleGroup>
- *   <ToggleGroup size="sm" variant="outline" defaultValue="center">
- *     <ToggleGroupItem value="left" aria-label="Align left">
- *       <AlignLeftIcon />
- *     </ToggleGroupItem>
- *     <ToggleGroupItem value="center" aria-label="Align center">
- *       <AlignCenterIcon />
- *     </ToggleGroupItem>
- *     <ToggleGroupItem value="right" aria-label="Align right">
- *       <AlignRightIcon />
- *     </ToggleGroupItem>
- *   </ToggleGroup>
- *   <ToggleGroup size="default" variant="outline" defaultValue="center">
- *     <ToggleGroupItem value="left" aria-label="Align left">
- *       <AlignLeftIcon />
- *     </ToggleGroupItem>
- *     <ToggleGroupItem value="center" aria-label="Align center">
- *       <AlignCenterIcon />
- *     </ToggleGroupItem>
- *     <ToggleGroupItem value="right" aria-label="Align right">
- *       <AlignRightIcon />
- *     </ToggleGroupItem>
- *   </ToggleGroup>
- *   <ToggleGroup size="lg" variant="outline" defaultValue="center">
- *     <ToggleGroupItem value="left" aria-label="Align left">
- *       <AlignLeftIcon />
- *     </ToggleGroupItem>
- *     <ToggleGroupItem value="center" aria-label="Align center">
- *       <AlignCenterIcon />
- *     </ToggleGroupItem>
- *     <ToggleGroupItem value="right" aria-label="Align right">
- *       <AlignRightIcon />
- *     </ToggleGroupItem>
- *   </ToggleGroup>
- * </div>
- *
- * ### Vertical Orientation
- *
- * <ToggleGroup orientation="vertical" variant="outline" defaultValue="middle">
- *   <ToggleGroupItem value="top" aria-label="Align top">
- *     <AlignVerticalJustifyStartIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="middle" aria-label="Align middle">
- *     <AlignVerticalJustifyCenterIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="bottom" aria-label="Align bottom">
- *     <AlignVerticalJustifyEndIcon />
- *   </ToggleGroupItem>
- * </ToggleGroup>
- *
- * ### Disabled
- *
- * <ToggleGroup disabled variant="outline" defaultValue="center">
- *   <ToggleGroupItem value="left" aria-label="Align left">
- *     <AlignLeftIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="center" aria-label="Align center">
- *     <AlignCenterIcon />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="right" aria-label="Align right">
- *     <AlignRightIcon />
- *   </ToggleGroupItem>
- * </ToggleGroup>
- *
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends Omit<HTMLAttributes<"div">, "class"> {
-  variant?: "default" | "outline";
-  size?: "xs" | "default" | "sm" | "lg";
-  spacing?: number;
-  defaultValue?: string | string[];
-  multiple?: boolean;
-  orientation?: "horizontal" | "vertical";
-  disabled?: boolean;
-  class?: string;
-  style?: string;
-}
-
-const {
-  variant = "outline",
-  size = "default",
-  spacing = 0,
-  defaultValue,
-  multiple = false,
-  orientation = "horizontal",
-  disabled = false,
-  class: className = "",
-  style = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  data-slot="toggle-group"
-  data-horizontal={orientation === "horizontal" ? "" : undefined}
-  data-variant={variant}
-  data-spacing={String(spacing)}
-  data-size={size}
-  data-orientation={orientation}
-  data-vertical={orientation === "vertical" ? "" : undefined}
-  data-disabled={disabled ? "true" : undefined}
-  data-default-value={Array.isArray(defaultValue) ? defaultValue.join(",") : defaultValue}
-  data-multiple={multiple ? "true" : undefined}
-  class={cn(
-    "rounded-lg data-[spacing=0]:data-[variant=outline]:shadow-xs",
-    "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
-    className
-  )}
-  style={`--gap:${spacing};${style}`}
-  {...rest}
->
-  <slot />
-</div>
-
-<script>
-  import { createToggleGroup } from "@cl-light-ds/ui/lib/toggle-group-controller";
-  document.querySelectorAll<HTMLElement>('[data-slot="toggle-group"]').forEach((el) => {
-    createToggleGroup(el);
-  });
-</script>
+---
+/**
+ * @component ToggleGroup
+ * @title Toggle Group
+ * @description A set of two-state buttons that can be toggled on or off. Supports single or multiple selection.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-20808
+ *
+ * @preview
+ *
+ * <ToggleGroup defaultValue="center" variant="outline">
+ *   <ToggleGroupItem value="left" aria-label="Align left">
+ *     <AlignLeftIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center">
+ *     <AlignCenterIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right">
+ *     <AlignRightIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { ToggleGroup, ToggleGroupItem } from '@bejamas/ui/components/toggle-group';
+ * import { BoldIcon, ItalicIcon, UnderlineIcon } from '@lucide/astro';
+ * ---
+ *
+ * <ToggleGroup defaultValue="bold" variant="outline">
+ *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
+ *     <BoldIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="italic" aria-label="Toggle italic">
+ *     <ItalicIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="underline" aria-label="Toggle underline">
+ *     <UnderlineIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `toggle-group:change` | `{ value: string[] }` | Fired when the selection changes |
+ *
+ * ### Programmatic Control
+ *
+ * ```js nocollapse
+ * // Set selected values programmatically
+ * element.dispatchEvent(new CustomEvent('toggle-group:set', {
+ *   detail: { value: ['bold', 'italic'] }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | toggle-group-item | Current state: `on` or `off` |
+ * | `data-disabled` | toggle-group | Present when group is disabled |
+ * | `data-orientation` | toggle-group | Orientation: `horizontal` or `vertical` |
+ * | `data-spacing` | toggle-group | Gap value used by style packs |
+ * | `data-variant` | toggle-group | Visual variant: `default` or `outline` |
+ * | `data-size` | toggle-group | Size: `sm`, `default`, or `lg` |
+ *
+ * @examples
+ *
+ * ### Multiple Selection
+ *
+ * <ToggleGroup multiple defaultValue={["bold", "italic"]} variant="outline">
+ *   <ToggleGroupItem value="bold" aria-label="Toggle bold">
+ *     <BoldIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="italic" aria-label="Toggle italic">
+ *     <ItalicIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="underline" aria-label="Toggle underline">
+ *     <UnderlineIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * ### Outline Variant
+ *
+ * <ToggleGroup variant="outline" defaultValue="center">
+ *   <ToggleGroupItem value="left" aria-label="Align left">
+ *     <AlignLeftIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center">
+ *     <AlignCenterIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right">
+ *     <AlignRightIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * ### Sizes
+ *
+ * <div class="flex flex-col gap-4">
+ *   <ToggleGroup size="xs" variant="outline" defaultValue="center">
+ *     <ToggleGroupItem value="left" aria-label="Align left">
+ *       <AlignLeftIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="center" aria-label="Align center">
+ *       <AlignCenterIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="right" aria-label="Align right">
+ *       <AlignRightIcon />
+ *     </ToggleGroupItem>
+ *   </ToggleGroup>
+ *   <ToggleGroup size="sm" variant="outline" defaultValue="center">
+ *     <ToggleGroupItem value="left" aria-label="Align left">
+ *       <AlignLeftIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="center" aria-label="Align center">
+ *       <AlignCenterIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="right" aria-label="Align right">
+ *       <AlignRightIcon />
+ *     </ToggleGroupItem>
+ *   </ToggleGroup>
+ *   <ToggleGroup size="default" variant="outline" defaultValue="center">
+ *     <ToggleGroupItem value="left" aria-label="Align left">
+ *       <AlignLeftIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="center" aria-label="Align center">
+ *       <AlignCenterIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="right" aria-label="Align right">
+ *       <AlignRightIcon />
+ *     </ToggleGroupItem>
+ *   </ToggleGroup>
+ *   <ToggleGroup size="lg" variant="outline" defaultValue="center">
+ *     <ToggleGroupItem value="left" aria-label="Align left">
+ *       <AlignLeftIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="center" aria-label="Align center">
+ *       <AlignCenterIcon />
+ *     </ToggleGroupItem>
+ *     <ToggleGroupItem value="right" aria-label="Align right">
+ *       <AlignRightIcon />
+ *     </ToggleGroupItem>
+ *   </ToggleGroup>
+ * </div>
+ *
+ * ### Vertical Orientation
+ *
+ * <ToggleGroup orientation="vertical" variant="outline" defaultValue="middle">
+ *   <ToggleGroupItem value="top" aria-label="Align top">
+ *     <AlignVerticalJustifyStartIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="middle" aria-label="Align middle">
+ *     <AlignVerticalJustifyCenterIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="bottom" aria-label="Align bottom">
+ *     <AlignVerticalJustifyEndIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ * ### Disabled
+ *
+ * <ToggleGroup disabled variant="outline" defaultValue="center">
+ *   <ToggleGroupItem value="left" aria-label="Align left">
+ *     <AlignLeftIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center" aria-label="Align center">
+ *     <AlignCenterIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="right" aria-label="Align right">
+ *     <AlignRightIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends Omit<HTMLAttributes<"div">, "class"> {
+  variant?: "default" | "outline";
+  size?: "xs" | "default" | "sm" | "lg";
+  spacing?: number;
+  defaultValue?: string | string[];
+  multiple?: boolean;
+  orientation?: "horizontal" | "vertical";
+  disabled?: boolean;
+  class?: string;
+  style?: string;
+}
+
+const {
+  variant = "outline",
+  size = "default",
+  spacing = 0,
+  defaultValue,
+  multiple = false,
+  orientation = "horizontal",
+  disabled = false,
+  class: className = "",
+  style = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  data-slot="toggle-group"
+  data-horizontal={orientation === "horizontal" ? "" : undefined}
+  data-variant={variant}
+  data-spacing={String(spacing)}
+  data-size={size}
+  data-orientation={orientation}
+  data-vertical={orientation === "vertical" ? "" : undefined}
+  data-disabled={disabled ? "true" : undefined}
+  data-default-value={Array.isArray(defaultValue) ? defaultValue.join(",") : defaultValue}
+  data-multiple={multiple ? "true" : undefined}
+  class={cn(
+    "rounded-lg data-[spacing=0]:data-[variant=outline]:shadow-xs",
+    "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
+    className
+  )}
+  style={`--gap:${spacing};${style}`}
+  {...rest}
+>
+  <slot />
+</div>
+
+<script>
+  import { createToggleGroup } from "@cl-light-ds/ui/lib/toggle-group-controller";
+  document.querySelectorAll<HTMLElement>('[data-slot="toggle-group"]').forEach((el) => {
+    createToggleGroup(el);
+  });
+</script>

package/src/components/toggle-group/ToggleGroupItem.astro

@@ -1,48 +1,48 @@
----
-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"> {
-  value: string;
-  disabled?: boolean;
-  class?: string;
-}
-
-const {
-  value,
-  variant,
-  size,
-  disabled,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<button
-  type="button"
-  data-slot="toggle-group-item"
-  data-size={size ?? undefined}
-  data-value={value}
-  data-variant={variant ?? undefined}
-  disabled={disabled}
-  class={cn(
-    "data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md rounded-none group-data-[orientation=horizontal]/toggle-group:first:rounded-s-md group-data-[orientation=horizontal]/toggle-group:last:rounded-e-md group-data-[orientation=vertical]/toggle-group:first:rounded-t-md group-data-[orientation=vertical]/toggle-group:last:rounded-b-md",
-    toggleVariants({
-      variant: variant ?? "default",
-      size: size ?? "default",
-    }),
-    "shrink-0 focus:z-10 focus-visible:z-10",
-    "group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:border-s-0",
-    "group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:border-t-0",
-    "group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:first:border-s",
-    "group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:first:border-t",
-    className
-  )}
-  {...rest}
->
-  <slot />
-</button>
+---
+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"> {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  value,
+  variant,
+  size,
+  disabled,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  type="button"
+  data-slot="toggle-group-item"
+  data-size={size ?? undefined}
+  data-value={value}
+  data-variant={variant ?? undefined}
+  disabled={disabled}
+  class={cn(
+    "data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md rounded-none group-data-[orientation=horizontal]/toggle-group:first:rounded-s-md group-data-[orientation=horizontal]/toggle-group:last:rounded-e-md group-data-[orientation=vertical]/toggle-group:first:rounded-t-md group-data-[orientation=vertical]/toggle-group:last:rounded-b-md",
+    toggleVariants({
+      variant: variant ?? "default",
+      size: size ?? "default",
+    }),
+    "shrink-0 focus:z-10 focus-visible:z-10",
+    "group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:border-s-0",
+    "group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:border-t-0",
+    "group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:first:border-s",
+    "group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:first:border-t",
+    className
+  )}
+  {...rest}
+>
+  <slot />
+</button>

package/src/components/toggle-group/index.ts

@@ -1,2 +1,2 @@
-export { default as ToggleGroup } from "./ToggleGroup.astro";
-export { default as ToggleGroupItem } from "./ToggleGroupItem.astro";
+export { default as ToggleGroup } from "./ToggleGroup.astro";
+export { default as ToggleGroupItem } from "./ToggleGroupItem.astro";

package/src/components/tooltip/CHANGELOG.md

@@ -1,22 +1,22 @@
-# Changelog
-
-All notable changes to the `Tooltip` component family (`Tooltip`, `TooltipTrigger`, `TooltipContent`) are documented in this file.
-
-## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5275-137`)
-
-Figma documents Tooltip across four pages: Contents (6 side/align positions — already fully covered by the existing `side`/`align` props), Variants (Default, Outline), Sizes (Small, Large), and the top-level Component page.
-
-### Added
-
-- **`variant` prop on `TooltipContent`** (`"default" | "outline"`, default `"default"`): Figma documents a second, previously entirely unimplemented "Outline" variant — a light `bg-card` tooltip with a `border-border` border and dark text, versus the existing inverted-dark style. Colors confirmed via Figma tokens (`card` = `#ffffff`, `border` = `#e4e4e7`, text = `foreground`). The arrow now matches whichever variant is active.
-- **`size` prop on `TooltipContent`** (`"default" | "lg"`, default `"default"`): Figma's "Large" size uses more generous padding (`px-3 py-2` vs. the existing `px-2 py-1`) to comfortably fit a two-line title + supportive-text composition. The two-line content itself is left to the consumer to compose (a `flex flex-col` wrapper with a bold title and a muted caption) rather than hardcoded into `TooltipContent`, consistent with how other compound content (e.g. Popover's header) is handled.
-- Storybook/JSDoc examples for both the Outline variant and the Large size.
-
-### Fixed
-
-- Removed a dead, redundant duplicate of the arrow's `data-[side=*]` position classes (repeated verbatim right after the main class string) — same class of cleanup already done on Dialog/HoverCard/Popover.
-
-### Notes
-
-- The existing 6 content positions (None/Left/Right/Bottom Left/Bottom Middle/Bottom Right) all map directly onto the already-supported `side`/`align` props — no changes needed there.
-- The default (dark, inverted) variant's colors already matched Figma exactly (`bg-foreground`/`text-background`) — no change needed.
+# Changelog
+
+All notable changes to the `Tooltip` component family (`Tooltip`, `TooltipTrigger`, `TooltipContent`) are documented in this file.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5275-137`)
+
+Figma documents Tooltip across four pages: Contents (6 side/align positions — already fully covered by the existing `side`/`align` props), Variants (Default, Outline), Sizes (Small, Large), and the top-level Component page.
+
+### Added
+
+- **`variant` prop on `TooltipContent`** (`"default" | "outline"`, default `"default"`): Figma documents a second, previously entirely unimplemented "Outline" variant — a light `bg-card` tooltip with a `border-border` border and dark text, versus the existing inverted-dark style. Colors confirmed via Figma tokens (`card` = `#ffffff`, `border` = `#e4e4e7`, text = `foreground`). The arrow now matches whichever variant is active.
+- **`size` prop on `TooltipContent`** (`"default" | "lg"`, default `"default"`): Figma's "Large" size uses more generous padding (`px-3 py-2` vs. the existing `px-2 py-1`) to comfortably fit a two-line title + supportive-text composition. The two-line content itself is left to the consumer to compose (a `flex flex-col` wrapper with a bold title and a muted caption) rather than hardcoded into `TooltipContent`, consistent with how other compound content (e.g. Popover's header) is handled.
+- Storybook/JSDoc examples for both the Outline variant and the Large size.
+
+### Fixed
+
+- Removed a dead, redundant duplicate of the arrow's `data-[side=*]` position classes (repeated verbatim right after the main class string) — same class of cleanup already done on Dialog/HoverCard/Popover.
+
+### Notes
+
+- The existing 6 content positions (None/Left/Right/Bottom Left/Bottom Middle/Bottom Right) all map directly onto the already-supported `side`/`align` props — no changes needed there.
+- The default (dark, inverted) variant's colors already matched Figma exactly (`bg-foreground`/`text-background`) — no change needed.