@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/tabs/TabsContent.astro

@@ -1,47 +1,47 @@
----
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-export const tabsContentVariants = cva(
-  "flex-1 outline-none hidden data-[state=active]:block",
-  {
-    variants: {
-      animation: {
-        none: "",
-        fade: "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:duration-200",
-        slide:
-          "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-2 data-[state=active]:duration-200",
-        direction:
-          "data-[state=active]:animate-in data-[state=active]:duration-200 data-[activation-direction=left]:slide-in-from-left-2 data-[activation-direction=right]:slide-in-from-right-2 data-[activation-direction=up]:slide-in-from-top-2 data-[activation-direction=down]:slide-in-from-bottom-2 data-[activation-direction=left]:fade-in-0 data-[activation-direction=right]:fade-in-0 data-[activation-direction=up]:fade-in-0 data-[activation-direction=down]:fade-in-0",
-      },
-    },
-    defaultVariants: {
-      animation: "none",
-    },
-  },
-);
-
-interface Props extends VariantProps<typeof tabsContentVariants>, HTMLAttributes<"div"> {
-  value: string;
-  class?: string;
-}
-
-const {
-  value,
-  animation = "none",
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  role="tabpanel"
-  data-slot="tabs-content"
-  data-value={value}
-  tabindex="0"
-  class={cn("text-sm", tabsContentVariants({ 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";
+
+export const tabsContentVariants = cva(
+  "flex-1 outline-none hidden data-[state=active]:block",
+  {
+    variants: {
+      animation: {
+        none: "",
+        fade: "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:duration-200",
+        slide:
+          "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-2 data-[state=active]:duration-200",
+        direction:
+          "data-[state=active]:animate-in data-[state=active]:duration-200 data-[activation-direction=left]:slide-in-from-left-2 data-[activation-direction=right]:slide-in-from-right-2 data-[activation-direction=up]:slide-in-from-top-2 data-[activation-direction=down]:slide-in-from-bottom-2 data-[activation-direction=left]:fade-in-0 data-[activation-direction=right]:fade-in-0 data-[activation-direction=up]:fade-in-0 data-[activation-direction=down]:fade-in-0",
+      },
+    },
+    defaultVariants: {
+      animation: "none",
+    },
+  },
+);
+
+interface Props extends VariantProps<typeof tabsContentVariants>, HTMLAttributes<"div"> {
+  value: string;
+  class?: string;
+}
+
+const {
+  value,
+  animation = "none",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="tabpanel"
+  data-slot="tabs-content"
+  data-value={value}
+  tabindex="0"
+  class={cn("text-sm", tabsContentVariants({ animation }), className)}
+>
+  <slot />
+</div>

package/src/components/tabs/TabsList.astro

@@ -1,69 +1,69 @@
----
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-export const tabsListVariants = cva(
-  "group/tabs-list text-muted-foreground relative inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
-  {
-    variants: {
-      variant: {
-        indicator: "rounded-lg bg-muted p-[2px] [--tabs-indicator-radius:calc(var(--radius)_-_2px)]",
-        default: "rounded-lg bg-muted p-[3px]",
-        line: "rounded-none gap-1 bg-transparent p-0",
-        "line-animated":
-          "rounded-none gap-1 bg-transparent p-0",
-      },
-      size: {
-        default: "group-data-horizontal/tabs:h-9",
-        sm: "group-data-horizontal/tabs:h-8",
-        lg: "group-data-horizontal/tabs:h-10",
-      },
-    },
-    defaultVariants: {
-      variant: "indicator",
-      size: "default",
-    },
-  },
-);
-
-interface Props
-  extends VariantProps<typeof tabsListVariants>, HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const {
-  variant = "indicator",
-  size = "default",
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  role="tablist"
-  data-slot="tabs-list"
-  data-variant={variant}
-  class={cn("", tabsListVariants({ variant, size }), className)}
->
-  {
-    variant === "indicator" && (
-      <div
-        aria-hidden="true"
-        data-slot="tabs-indicator"
-        class="gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width) bg-background shadow-sm transition-all duration-150 ease dark:border-input dark:bg-input/30"
-      />
-    )
-  }
-  {
-    variant === "line-animated" && (
-      <div
-        aria-hidden="true"
-        data-slot="tabs-indicator"
-        class="pointer-events-none absolute z-0 rounded-full bg-foreground transition-all duration-150 ease group-data-[orientation=horizontal]/tabs:left-[var(--active-tab-left)] group-data-[orientation=horizontal]/tabs:top-[calc(var(--active-tab-top)+var(--active-tab-height)-2px)] group-data-[orientation=horizontal]/tabs:h-0.5 group-data-[orientation=horizontal]/tabs:w-[var(--active-tab-width)] group-data-[orientation=vertical]/tabs:top-[var(--active-tab-top)] group-data-[orientation=vertical]/tabs:left-[calc(var(--active-tab-left)+var(--active-tab-width)-2px)] group-data-[orientation=vertical]/tabs:h-[var(--active-tab-height)] group-data-[orientation=vertical]/tabs:w-0.5"
-      />
-    )
-  }
-  <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";
+
+export const tabsListVariants = cva(
+  "group/tabs-list text-muted-foreground relative inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        indicator: "rounded-lg bg-muted p-[2px] [--tabs-indicator-radius:calc(var(--radius)_-_2px)]",
+        default: "rounded-lg bg-muted p-[3px]",
+        line: "rounded-none gap-1 bg-transparent p-0",
+        "line-animated":
+          "rounded-none gap-1 bg-transparent p-0",
+      },
+      size: {
+        default: "group-data-horizontal/tabs:h-9",
+        sm: "group-data-horizontal/tabs:h-8",
+        lg: "group-data-horizontal/tabs:h-10",
+      },
+    },
+    defaultVariants: {
+      variant: "indicator",
+      size: "default",
+    },
+  },
+);
+
+interface Props
+  extends VariantProps<typeof tabsListVariants>, HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  variant = "indicator",
+  size = "default",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="tablist"
+  data-slot="tabs-list"
+  data-variant={variant}
+  class={cn("", tabsListVariants({ variant, size }), className)}
+>
+  {
+    variant === "indicator" && (
+      <div
+        aria-hidden="true"
+        data-slot="tabs-indicator"
+        class="gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width) bg-background shadow-sm transition-all duration-150 ease dark:border-input dark:bg-input/30"
+      />
+    )
+  }
+  {
+    variant === "line-animated" && (
+      <div
+        aria-hidden="true"
+        data-slot="tabs-indicator"
+        class="pointer-events-none absolute z-0 rounded-full bg-foreground transition-all duration-150 ease group-data-[orientation=horizontal]/tabs:left-[var(--active-tab-left)] group-data-[orientation=horizontal]/tabs:top-[calc(var(--active-tab-top)+var(--active-tab-height)-2px)] group-data-[orientation=horizontal]/tabs:h-0.5 group-data-[orientation=horizontal]/tabs:w-[var(--active-tab-width)] group-data-[orientation=vertical]/tabs:top-[var(--active-tab-top)] group-data-[orientation=vertical]/tabs:left-[calc(var(--active-tab-left)+var(--active-tab-width)-2px)] group-data-[orientation=vertical]/tabs:h-[var(--active-tab-height)] group-data-[orientation=vertical]/tabs:w-0.5"
+      />
+    )
+  }
+  <slot />
+</div>

package/src/components/tabs/TabsTrigger.astro

@@ -1,40 +1,40 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"button"> {
-  value: string;
-  disabled?: boolean;
-  class?: string;
-}
-
-const {
-  value,
-  disabled = false,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<button
-  {...rest}
-  type="button"
-  disabled={disabled}
-  role="tab"
-  data-slot="tabs-trigger"
-  data-value={value}
-  class={cn(
-    "gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4",
-    "relative z-10 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap outline-none transition-all disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
-    "focus-visible:border-ring focus-visible:ring-ring/50 text-foreground/60 hover:text-foreground data-[state=active]:text-foreground focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground",
-    "group-data-[variant=default]/tabs-list:data-[state=active]:bg-background dark:group-data-[variant=default]/tabs-list:data-[state=active]:border-input dark:group-data-[variant=default]/tabs-list:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
-    "group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm",
-    "group-data-[variant=indicator]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=indicator]/tabs-list:data-[state=active]:shadow-none",
-    "group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
-    "group-data-[variant=line-animated]/tabs-list:rounded-none group-data-[variant=line-animated]/tabs-list:bg-transparent group-data-[variant=line-animated]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line-animated]/tabs-list:data-[state=active]:shadow-none",
-    "after:pointer-events-none after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=default]/tabs-list:after:hidden group-data-[variant=indicator]/tabs-list:after:hidden group-data-[variant=line-animated]/tabs-list:after:hidden group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
-    className,
-  )}
->
-  <slot />
-</button>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  value: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  value,
+  disabled = false,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<button
+  {...rest}
+  type="button"
+  disabled={disabled}
+  role="tab"
+  data-slot="tabs-trigger"
+  data-value={value}
+  class={cn(
+    "gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4",
+    "relative z-10 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap outline-none transition-all disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
+    "focus-visible:border-ring focus-visible:ring-ring/50 text-foreground/60 hover:text-foreground data-[state=active]:text-foreground focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground",
+    "group-data-[variant=default]/tabs-list:data-[state=active]:bg-background dark:group-data-[variant=default]/tabs-list:data-[state=active]:border-input dark:group-data-[variant=default]/tabs-list:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+    "group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm",
+    "group-data-[variant=indicator]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=indicator]/tabs-list:data-[state=active]:shadow-none",
+    "group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+    "group-data-[variant=line-animated]/tabs-list:rounded-none group-data-[variant=line-animated]/tabs-list:bg-transparent group-data-[variant=line-animated]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line-animated]/tabs-list:data-[state=active]:shadow-none",
+    "after:pointer-events-none after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=default]/tabs-list:after:hidden group-data-[variant=indicator]/tabs-list:after:hidden group-data-[variant=line-animated]/tabs-list:after:hidden group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+    className,
+  )}
+>
+  <slot />
+</button>

package/src/components/tabs/index.ts

@@ -1,6 +1,6 @@
-export { default as Tabs } from "./Tabs.astro";
-export { default as TabsList } from "./TabsList.astro";
-export { default as TabsTrigger } from "./TabsTrigger.astro";
-export { default as TabsContent } from "./TabsContent.astro";
-export { tabsListVariants } from "./TabsList.astro";
-export { tabsContentVariants } from "./TabsContent.astro";
+export { default as Tabs } from "./Tabs.astro";
+export { default as TabsList } from "./TabsList.astro";
+export { default as TabsTrigger } from "./TabsTrigger.astro";
+export { default as TabsContent } from "./TabsContent.astro";
+export { tabsListVariants } from "./TabsList.astro";
+export { tabsContentVariants } from "./TabsContent.astro";

package/src/components/textarea/CHANGELOG.md

@@ -1,22 +1,22 @@
-# Changelog
-
-All notable changes to the `Textarea` component will be documented in this file.
-
-## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `144-2`)
-
-Figma documents Textarea across four pages: Contents (Clean, Label, "Actionable with resize mode", All details), States (Default, Hover, Pressed/Focus, Disabled), and Sizes (Simple, Actionable).
-
-### Fixed
-
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-- Background: `bg-transparent dark:bg-input/30` → `bg-card` — same recurring fix as `Input`/`InputGroup`/`DialogContent` (no light-mode background was set at all).
-- Font weight: removed `font-semibold` — Figma specifies Regular (400), not Semi Bold; there was no reason for a plain textarea's typed text to be bold.
-- Removed a dead duplicate `px-2.5` (a later `px-3` in the same class string always won anyway).
-- `py-2` (8px) → `py-2.5` (10px), matching Figma's `padding/p-2.5` token (consistent across every Textarea instance checked).
-- Disabled: `disabled:opacity-50` → `disabled:bg-muted disabled:text-muted-foreground` (kept `disabled:cursor-not-allowed`) — a real flat-color swap, matching Figma's Disabled screenshot and the same category of fix already made to `Checkbox`/`Input`.
-
-### Notes (answering the "toolbar prop" question)
-
-- Checked bejamas' own upstream `Textarea.astro` (via `gh api`) — it's a bare `<textarea>` with no toolbar concept whatsoever, so this isn't something to port from there.
-- Figma's "Actionable" size is a **composition**, not a `Textarea`-level concern: it's the exact same `InputGroup` + `InputGroupTextarea` + `InputGroupAddon(align="block-start")` pattern already built and verified for `InputGroup`'s own toolbar example (same shared border, block-start divider). No `toolbar` prop was added to `Textarea` — added a storybook example demonstrating the composition instead, plus a note pointing at `InputGroup` for the full API.
-- Focus ring (`border-ring`/`ring-3 ring-ring/50`), border color (`border-input`), and radius (`rounded-lg`) already matched Figma's tokens exactly — no changes needed.
+# Changelog
+
+All notable changes to the `Textarea` component will be documented in this file.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `144-2`)
+
+Figma documents Textarea across four pages: Contents (Clean, Label, "Actionable with resize mode", All details), States (Default, Hover, Pressed/Focus, Disabled), and Sizes (Simple, Actionable).
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- Background: `bg-transparent dark:bg-input/30` → `bg-card` — same recurring fix as `Input`/`InputGroup`/`DialogContent` (no light-mode background was set at all).
+- Font weight: removed `font-semibold` — Figma specifies Regular (400), not Semi Bold; there was no reason for a plain textarea's typed text to be bold.
+- Removed a dead duplicate `px-2.5` (a later `px-3` in the same class string always won anyway).
+- `py-2` (8px) → `py-2.5` (10px), matching Figma's `padding/p-2.5` token (consistent across every Textarea instance checked).
+- Disabled: `disabled:opacity-50` → `disabled:bg-muted disabled:text-muted-foreground` (kept `disabled:cursor-not-allowed`) — a real flat-color swap, matching Figma's Disabled screenshot and the same category of fix already made to `Checkbox`/`Input`.
+
+### Notes (answering the "toolbar prop" question)
+
+- Checked bejamas' own upstream `Textarea.astro` (via `gh api`) — it's a bare `<textarea>` with no toolbar concept whatsoever, so this isn't something to port from there.
+- Figma's "Actionable" size is a **composition**, not a `Textarea`-level concern: it's the exact same `InputGroup` + `InputGroupTextarea` + `InputGroupAddon(align="block-start")` pattern already built and verified for `InputGroup`'s own toolbar example (same shared border, block-start divider). No `toolbar` prop was added to `Textarea` — added a storybook example demonstrating the composition instead, plus a note pointing at `InputGroup` for the full API.
+- Focus ring (`border-ring`/`ring-3 ring-ring/50`), border color (`border-input`), and radius (`rounded-lg`) already matched Figma's tokens exactly — no changes needed.

package/src/components/textarea/Textarea.astro

@@ -1,58 +1,58 @@
----
-/**
- * @component Textarea
- * @title Textarea
- * @description A multi-line input field for longer user content.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=144-2
- * @status stable
- * @since 0.1.0
- *
- * @preview
- *
- * <Textarea placeholder="Type your message here..." />
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Textarea } from '@bejamas/ui/components/textarea';
- * ---
- *
- * <Textarea placeholder="Type your message here..." />
- * ```
- *
- * @examples
- *
- * ### Actionable (with toolbar)
- *
- * Figma's "Actionable" size is a composition, not a `Textarea` prop — build it with
- * `InputGroup` + `InputGroupTextarea` + a `block-start` `InputGroupAddon`, the same
- * pattern already used for InputGroup's own toolbar example.
- *
- * <InputGroup>
- *   <InputGroupTextarea placeholder="Type your message here..." />
- *   <InputGroupAddon align="block-start">
- *     <InputGroupButton size="icon-xs"><BoldIcon /></InputGroupButton>
- *     <InputGroupButton size="icon-xs"><ItalicIcon /></InputGroupButton>
- *     <InputGroupButton size="icon-xs"><UnderlineIcon /></InputGroupButton>
- *     <Separator orientation="vertical" class="!h-4" />
- *     <InputGroupButton size="icon-xs"><ListIcon /></InputGroupButton>
- *     <InputGroupButton size="icon-xs"><ImageIcon /></InputGroupButton>
- *     <Separator orientation="vertical" class="!h-4" />
- *     <InputGroupButton size="icon-xs"><EllipsisIcon /></InputGroupButton>
- *   </InputGroupAddon>
- * </InputGroup>
- */
-
-const { class: className = "", ...props } = Astro.props;
-
-const baseClass =
-  "flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed";
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
----
-
-<textarea
-  data-slot={props["data-slot"] ?? "textarea"}
-  class={cn("border-input bg-card focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-muted disabled:text-muted-foreground rounded-lg border px-3 py-2.5 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm", baseClass, className)}
-  {...props}></textarea>
+---
+/**
+ * @component Textarea
+ * @title Textarea
+ * @description A multi-line input field for longer user content.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=144-2
+ * @status stable
+ * @since 0.1.0
+ *
+ * @preview
+ *
+ * <Textarea placeholder="Type your message here..." />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Textarea } from '@bejamas/ui/components/textarea';
+ * ---
+ *
+ * <Textarea placeholder="Type your message here..." />
+ * ```
+ *
+ * @examples
+ *
+ * ### Actionable (with toolbar)
+ *
+ * Figma's "Actionable" size is a composition, not a `Textarea` prop — build it with
+ * `InputGroup` + `InputGroupTextarea` + a `block-start` `InputGroupAddon`, the same
+ * pattern already used for InputGroup's own toolbar example.
+ *
+ * <InputGroup>
+ *   <InputGroupTextarea placeholder="Type your message here..." />
+ *   <InputGroupAddon align="block-start">
+ *     <InputGroupButton size="icon-xs"><BoldIcon /></InputGroupButton>
+ *     <InputGroupButton size="icon-xs"><ItalicIcon /></InputGroupButton>
+ *     <InputGroupButton size="icon-xs"><UnderlineIcon /></InputGroupButton>
+ *     <Separator orientation="vertical" class="!h-4" />
+ *     <InputGroupButton size="icon-xs"><ListIcon /></InputGroupButton>
+ *     <InputGroupButton size="icon-xs"><ImageIcon /></InputGroupButton>
+ *     <Separator orientation="vertical" class="!h-4" />
+ *     <InputGroupButton size="icon-xs"><EllipsisIcon /></InputGroupButton>
+ *   </InputGroupAddon>
+ * </InputGroup>
+ */
+
+const { class: className = "", ...props } = Astro.props;
+
+const baseClass =
+  "flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed";
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+---
+
+<textarea
+  data-slot={props["data-slot"] ?? "textarea"}
+  class={cn("border-input bg-card focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-muted disabled:text-muted-foreground rounded-lg border px-3 py-2.5 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm", baseClass, className)}
+  {...props}></textarea>

package/src/components/textarea/index.ts

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

package/src/components/toggle/CHANGELOG.md

@@ -1,23 +1,23 @@
-# Changelog
-
-All notable changes to the `Toggle` component will be documented in this file.
-
-## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5455-19034`)
-
-Figma documents Toggle across four pages: Contents (Default, Clean, Tail Icon, Complex), States (Default, Hover, Pressed, Focus Default, Focus Pressed, Disabled), and Sizes (Small 28px, Medium 32px, Large 36px). Sizing/variant fixes live in the shared `toggleVariants` (`packages/ui/src/lib/toggle-shared.ts`), used by both `Toggle` and `ToggleGroup`.
-
-### Fixed
-
-- Added the missing `@figmaUrl`.
-- **Default variant**: Figma's "Default" (unpressed) state renders as a bordered button — matching what the code calls `outline`, not the code's own bare/borderless `default` variant. Every existing usage example already passed `variant="outline"` explicitly, so changed the component's own default to `"outline"` — visually a no-op for existing usages, just removes the need to repeat the prop.
-- **Sizes**: Figma's three sizes (28/32/36px) turned out to be the existing `sm`(32px, was mislabeled relative to Figma's "Medium")/`default`(36px, Figma's "Large") tiers shifted down one notch, with Figma's smallest size (28px) missing entirely. Added a new `size="xs"` (28px, `h-7`) to `toggle-shared.ts`. The code's own `lg` (40px) has no Figma equivalent — flagging per the recurring size-naming pattern (Accordion/Checkbox/Input/RadioGroup/Switch), not renaming.
-- Disabled: `disabled:opacity-50` → `disabled:bg-muted disabled:text-muted-foreground` (kept `disabled:pointer-events-none`) — a real flat-color swap, matching Figma's Disabled screenshot and the same category of fix already made repeatedly (Checkbox/Input/Textarea).
-
-### Added
-
-- A "Tail icon" storybook/JSDoc example, matching Figma's "Tail Icon"/"Complex" content variants — already achievable today via the existing slot (just place a trailing icon after the text), no new prop needed.
-
-### Notes
-
-- Pressed (`aria-pressed:bg-background-hover`) and Focus (`border-ring`/`ring-[3px]`) treatments already matched Figma's tokens exactly — no changes needed.
-- Hover isn't implemented, per the standing project direction to skip hover states.
+# Changelog
+
+All notable changes to the `Toggle` component will be documented in this file.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5455-19034`)
+
+Figma documents Toggle across four pages: Contents (Default, Clean, Tail Icon, Complex), States (Default, Hover, Pressed, Focus Default, Focus Pressed, Disabled), and Sizes (Small 28px, Medium 32px, Large 36px). Sizing/variant fixes live in the shared `toggleVariants` (`packages/ui/src/lib/toggle-shared.ts`), used by both `Toggle` and `ToggleGroup`.
+
+### Fixed
+
+- Added the missing `@figmaUrl`.
+- **Default variant**: Figma's "Default" (unpressed) state renders as a bordered button — matching what the code calls `outline`, not the code's own bare/borderless `default` variant. Every existing usage example already passed `variant="outline"` explicitly, so changed the component's own default to `"outline"` — visually a no-op for existing usages, just removes the need to repeat the prop.
+- **Sizes**: Figma's three sizes (28/32/36px) turned out to be the existing `sm`(32px, was mislabeled relative to Figma's "Medium")/`default`(36px, Figma's "Large") tiers shifted down one notch, with Figma's smallest size (28px) missing entirely. Added a new `size="xs"` (28px, `h-7`) to `toggle-shared.ts`. The code's own `lg` (40px) has no Figma equivalent — flagging per the recurring size-naming pattern (Accordion/Checkbox/Input/RadioGroup/Switch), not renaming.
+- Disabled: `disabled:opacity-50` → `disabled:bg-muted disabled:text-muted-foreground` (kept `disabled:pointer-events-none`) — a real flat-color swap, matching Figma's Disabled screenshot and the same category of fix already made repeatedly (Checkbox/Input/Textarea).
+
+### Added
+
+- A "Tail icon" storybook/JSDoc example, matching Figma's "Tail Icon"/"Complex" content variants — already achievable today via the existing slot (just place a trailing icon after the text), no new prop needed.
+
+### Notes
+
+- Pressed (`aria-pressed:bg-background-hover`) and Focus (`border-ring`/`ring-[3px]`) treatments already matched Figma's tokens exactly — no changes needed.
+- Hover isn't implemented, per the standing project direction to skip hover states.