@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/input/CHANGELOG.md

@@ -1,29 +1,29 @@
-# Changelog
-
-All notable changes to the `Input` component will be documented in this file.
-
-## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `145-3`)
-
-Figma documents Input across four pages: Variants (Default, Lead, Tail, Complex, Wide), Sizes (Default 32px, Large 40px), States (Default, Hover, Pressed, Focus, Disabled, Error), and Contents (Default, Lead Icon, Tail Icon, Label, Counter, Helper, Error text, All Details).
-
-### Fixed
-
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-- Background: `bg-transparent dark:bg-input/30` → `bg-card` — Figma's surface token is `card` (`#ffffff`), which genuinely differs from `--background`/transparent in dark mode, same category of fix already made to `DialogContent`/`HoverCardContent`.
-- Disabled: replaced the blanket `disabled:opacity-50` fade with an explicit `disabled:bg-muted disabled:text-muted-foreground`, matching Figma's actual flat muted-gray disabled treatment (same category of fix as Checkbox's disabled state).
-- Large size: `data-[size=lg]:md:text-base` (16px) → `data-[size=lg]:md:text-sm` (14px) — Figma's Large instance binds the identical 14px font token as Default; only padding/height grow, not font size. **Reverted in the follow-up below** — the three sizes read as visually indistinct with matching font sizes, so the user asked to keep them differentiated.
-- Added a Pressed (`:active`) state: `active:border-ring`, matching Figma's Pressed state (same border-color token as Focus, without Focus's outer glow).
-- Removed dead, redundant unconditional legacy classes (`h-9`, `rounded-md`, `px-2.5 py-1`, `text-base`, `md:text-sm`) that were fully superseded by the newer `data-[size=*]:...` gated system already present in the same class string — same class of cleanup already done on Dialog/HoverCard/TooltipContent.
-
-### Notes (not changed)
-
-- Border color (`border-input`), radius (`rounded-lg`), Focus (`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`), and Error/`aria-invalid` styling already matched Figma's tokens exactly — no changes needed.
-- Figma's Hover state isn't implemented, per the standing project direction to skip hover states ("ignore hover states, they are not necessary... I will delete from figma").
-- Figma's two documented sizes — Default (32px) and Large (40px) — correspond exactly to the existing `sm` (`h-8`) and `lg` (`h-10`) tiers. The code's own literal `"default"` tier (`h-9`, 36px) isn't represented in Figma at all — flagging in case you want to rename in Figma, same as was done for Accordion/Checkbox.
-- Lead/Tail/Complex/Wide (icon and toolbar compositions) are already fully covered by the existing `InputGroup` family — no new props added to `Input`. Added storybook examples for all four so they're visibly demonstrated on the Input docs page.
-- Label/Helper/Error-text content variants are already covered by the existing `Field`/`FieldLabel`/`FieldDescription`/`FieldError` primitives (shared across the whole design system, not Input-specific) — no new props added. Added a storybook example combining `Field` + `Input` to demonstrate Helper text, a character counter, and an Error state, since none of these Figma-documented compositions had a visible Input demo before. The small icon Figma shows before Helper/Error text is left as consumer-supplied slot content rather than hardcoded, since `Field` is used well beyond Input.
-- Counter (e.g. "10/100") has no dedicated primitive — it's a plain flex row + a counter `<span>` next to `FieldLabel`, demonstrated in the new storybook example above.
-
-### Fixed (follow-up)
-
-- User correction: the three sizes weren't visually distinct enough with matching font sizes (per Figma's literal token match above). Restored a differentiated type scale across the existing Tailwind tokens: `sm` → `text-xs` (12px, unchanged), `default` → `text-sm` (14px, unchanged), `lg` → `text-base` (16px, reverted from the Figma-matched 14px).
+# Changelog
+
+All notable changes to the `Input` component will be documented in this file.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `145-3`)
+
+Figma documents Input across four pages: Variants (Default, Lead, Tail, Complex, Wide), Sizes (Default 32px, Large 40px), States (Default, Hover, Pressed, Focus, Disabled, Error), and Contents (Default, Lead Icon, Tail Icon, Label, Counter, Helper, Error text, All Details).
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- Background: `bg-transparent dark:bg-input/30` → `bg-card` — Figma's surface token is `card` (`#ffffff`), which genuinely differs from `--background`/transparent in dark mode, same category of fix already made to `DialogContent`/`HoverCardContent`.
+- Disabled: replaced the blanket `disabled:opacity-50` fade with an explicit `disabled:bg-muted disabled:text-muted-foreground`, matching Figma's actual flat muted-gray disabled treatment (same category of fix as Checkbox's disabled state).
+- Large size: `data-[size=lg]:md:text-base` (16px) → `data-[size=lg]:md:text-sm` (14px) — Figma's Large instance binds the identical 14px font token as Default; only padding/height grow, not font size. **Reverted in the follow-up below** — the three sizes read as visually indistinct with matching font sizes, so the user asked to keep them differentiated.
+- Added a Pressed (`:active`) state: `active:border-ring`, matching Figma's Pressed state (same border-color token as Focus, without Focus's outer glow).
+- Removed dead, redundant unconditional legacy classes (`h-9`, `rounded-md`, `px-2.5 py-1`, `text-base`, `md:text-sm`) that were fully superseded by the newer `data-[size=*]:...` gated system already present in the same class string — same class of cleanup already done on Dialog/HoverCard/TooltipContent.
+
+### Notes (not changed)
+
+- Border color (`border-input`), radius (`rounded-lg`), Focus (`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`), and Error/`aria-invalid` styling already matched Figma's tokens exactly — no changes needed.
+- Figma's Hover state isn't implemented, per the standing project direction to skip hover states ("ignore hover states, they are not necessary... I will delete from figma").
+- Figma's two documented sizes — Default (32px) and Large (40px) — correspond exactly to the existing `sm` (`h-8`) and `lg` (`h-10`) tiers. The code's own literal `"default"` tier (`h-9`, 36px) isn't represented in Figma at all — flagging in case you want to rename in Figma, same as was done for Accordion/Checkbox.
+- Lead/Tail/Complex/Wide (icon and toolbar compositions) are already fully covered by the existing `InputGroup` family — no new props added to `Input`. Added storybook examples for all four so they're visibly demonstrated on the Input docs page.
+- Label/Helper/Error-text content variants are already covered by the existing `Field`/`FieldLabel`/`FieldDescription`/`FieldError` primitives (shared across the whole design system, not Input-specific) — no new props added. Added a storybook example combining `Field` + `Input` to demonstrate Helper text, a character counter, and an Error state, since none of these Figma-documented compositions had a visible Input demo before. The small icon Figma shows before Helper/Error text is left as consumer-supplied slot content rather than hardcoded, since `Field` is used well beyond Input.
+- Counter (e.g. "10/100") has no dedicated primitive — it's a plain flex row + a counter `<span>` next to `FieldLabel`, demonstrated in the new storybook example above.
+
+### Fixed (follow-up)
+
+- User correction: the three sizes weren't visually distinct enough with matching font sizes (per Figma's literal token match above). Restored a differentiated type scale across the existing Tailwind tokens: `sm` → `text-xs` (12px, unchanged), `default` → `text-sm` (14px, unchanged), `lg` → `text-base` (16px, reverted from the Figma-matched 14px).

package/src/components/input/Input.astro

@@ -1,130 +1,130 @@
----
-/**
- * @component Input
- * @title Input
- * @description Base input field used in forms.
- * @description A field for collecting user input.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=145-3
- * @status stable
- * @since 0.1.0
- *
- * @preview
- *
- * <Input type="text" placeholder="Enter your name" />
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Input } from '@bejamas/ui/components/input';
- * ---
- * <Input type="email" placeholder="Enter your email" />
- * ```
- *
- * @examples
- *
- * ### Default
- *
- * <Input type="email" placeholder="Enter your email" />
- *
- * ### Disabled
- *
- * <Input type="email" placeholder="Enter your email" disabled />
- *
- * ### Sizes
- *
- * <div class="grid w-full max-w-sm gap-3">
- *   <div class="flex items-center gap-2">
- *     <Input size="sm" placeholder="Small input (h-8)" />
- *     <Button size="sm" variant="outline">
- *       Small
- *     </Button>
- *   </div>
- *   <div class="flex items-center gap-2">
- *     <Input placeholder="Default input (h-9)" />
- *     <Button variant="outline">Default</Button>
- *   </div>
- *   <div class="flex items-center gap-2">
- *     <Input size="lg" placeholder="Large input (h-10)" />
- *     <Button size="lg" variant="outline">
- *       Large
- *     </Button>
- *   </div>
- * </div>
- *
- * ### File
- *
- * <div class="grid w-full max-w-sm items-center gap-3">
- *   <Label htmlFor="picture">Picture</Label>
- *   <Input id="picture" type="file" />
- * </div>
- *
- * ### With Label
- *
- * <div class="grid w-full max-w-sm items-center gap-3">
- *   <Label htmlFor="email">Email</Label>
- *   <Input id="email" type="email" placeholder="Enter your email" />
- * </div>
- *
- * ### With Button
- *
- *  <div class="flex w-full max-w-sm items-center gap-2">
- *    <Input type="email" placeholder="Email" />
- *    <Button type="submit" variant="outline">
- *      Subscribe
- *    </Button>
- *  </div>
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { cva, type VariantProps } from "class-variance-authority";
-import type { HTMLAttributes } from "astro/types";
-
-const inputVariants = cva(
-  "w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed",
-  {
-    variants: {
-      size: {
-        sm: "data-[size=sm]",
-        default: "data-[size=default]",
-        lg: "data-[size=lg]",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  },
-);
-
-type InputUiSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
-type NativeInputSize = HTMLAttributes<"input">["size"];
-
-interface Props extends Omit<HTMLAttributes<"input">, "size"> {
-  size?: InputUiSize | NativeInputSize;
-  nativeSize?: NativeInputSize;
-}
-
-const {
-  class: className = "",
-  type = "text",
-  size: sizeProp,
-  nativeSize,
-  ...props
-} = Astro.props as Props;
-
-const isUiSize = (value: unknown): value is InputUiSize =>
-  value === "sm" || value === "default" || value === "lg";
-
-const resolvedUiSize = isUiSize(sizeProp) ? sizeProp : "default";
-const resolvedNativeSize =
-  nativeSize ?? (!isUiSize(sizeProp) ? sizeProp : undefined);
----
-
-<input
-  type={type}
-  size={resolvedNativeSize}
-  data-slot={props["data-slot"] ?? "input"}
-  data-size={resolvedUiSize}
-  class={cn("border-input 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 active:border-ring rounded-lg border bg-card shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 disabled:bg-muted disabled:text-muted-foreground data-[size=sm]:h-8 data-[size=sm]:px-2.5 data-[size=sm]:py-1 data-[size=sm]:md:text-xs data-[size=default]:h-9 data-[size=default]:px-2.5 data-[size=default]:py-1 data-[size=default]:md:text-sm data-[size=lg]:h-10 data-[size=lg]:px-3.5 data-[size=lg]:py-1.5 data-[size=lg]:md:text-base", inputVariants({ size: resolvedUiSize }), className)}
-  {...props}
-/>
+---
+/**
+ * @component Input
+ * @title Input
+ * @description Base input field used in forms.
+ * @description A field for collecting user input.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=145-3
+ * @status stable
+ * @since 0.1.0
+ *
+ * @preview
+ *
+ * <Input type="text" placeholder="Enter your name" />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Input } from '@bejamas/ui/components/input';
+ * ---
+ * <Input type="email" placeholder="Enter your email" />
+ * ```
+ *
+ * @examples
+ *
+ * ### Default
+ *
+ * <Input type="email" placeholder="Enter your email" />
+ *
+ * ### Disabled
+ *
+ * <Input type="email" placeholder="Enter your email" disabled />
+ *
+ * ### Sizes
+ *
+ * <div class="grid w-full max-w-sm gap-3">
+ *   <div class="flex items-center gap-2">
+ *     <Input size="sm" placeholder="Small input (h-8)" />
+ *     <Button size="sm" variant="outline">
+ *       Small
+ *     </Button>
+ *   </div>
+ *   <div class="flex items-center gap-2">
+ *     <Input placeholder="Default input (h-9)" />
+ *     <Button variant="outline">Default</Button>
+ *   </div>
+ *   <div class="flex items-center gap-2">
+ *     <Input size="lg" placeholder="Large input (h-10)" />
+ *     <Button size="lg" variant="outline">
+ *       Large
+ *     </Button>
+ *   </div>
+ * </div>
+ *
+ * ### File
+ *
+ * <div class="grid w-full max-w-sm items-center gap-3">
+ *   <Label htmlFor="picture">Picture</Label>
+ *   <Input id="picture" type="file" />
+ * </div>
+ *
+ * ### With Label
+ *
+ * <div class="grid w-full max-w-sm items-center gap-3">
+ *   <Label htmlFor="email">Email</Label>
+ *   <Input id="email" type="email" placeholder="Enter your email" />
+ * </div>
+ *
+ * ### With Button
+ *
+ *  <div class="flex w-full max-w-sm items-center gap-2">
+ *    <Input type="email" placeholder="Email" />
+ *    <Button type="submit" variant="outline">
+ *      Subscribe
+ *    </Button>
+ *  </div>
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "astro/types";
+
+const inputVariants = cva(
+  "w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        sm: "data-[size=sm]",
+        default: "data-[size=default]",
+        lg: "data-[size=lg]",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+type InputUiSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
+type NativeInputSize = HTMLAttributes<"input">["size"];
+
+interface Props extends Omit<HTMLAttributes<"input">, "size"> {
+  size?: InputUiSize | NativeInputSize;
+  nativeSize?: NativeInputSize;
+}
+
+const {
+  class: className = "",
+  type = "text",
+  size: sizeProp,
+  nativeSize,
+  ...props
+} = Astro.props as Props;
+
+const isUiSize = (value: unknown): value is InputUiSize =>
+  value === "sm" || value === "default" || value === "lg";
+
+const resolvedUiSize = isUiSize(sizeProp) ? sizeProp : "default";
+const resolvedNativeSize =
+  nativeSize ?? (!isUiSize(sizeProp) ? sizeProp : undefined);
+---
+
+<input
+  type={type}
+  size={resolvedNativeSize}
+  data-slot={props["data-slot"] ?? "input"}
+  data-size={resolvedUiSize}
+  class={cn("border-input 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 active:border-ring rounded-lg border bg-card shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 disabled:bg-muted disabled:text-muted-foreground data-[size=sm]:h-8 data-[size=sm]:px-2.5 data-[size=sm]:py-1 data-[size=sm]:md:text-xs data-[size=default]:h-9 data-[size=default]:px-2.5 data-[size=default]:py-1 data-[size=default]:md:text-sm data-[size=lg]:h-10 data-[size=lg]:px-3.5 data-[size=lg]:py-1.5 data-[size=lg]:md:text-base", inputVariants({ size: resolvedUiSize }), className)}
+  {...props}
+/>

package/src/components/input/index.ts

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

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

@@ -1,49 +1,49 @@
-# Changelog
-
-All notable changes to the `InputGroup` component family (`InputGroup`, `InputGroupAddon`, `InputGroupButton`, `InputGroupInput`, `InputGroupText`, `InputGroupTextarea`) are documented in this file.
-
-## 2026-09-10 — Figma alignment (ClickLearn Lightning Design Library, node `2282-6923`)
-
-Figma documents a single "Default" composition with three example rows: a lead-icon search input with trailing supportive text, a plain input with a trailing icon, and a multi-line textarea with a toolbar (icon button + ghost text button + supportive text + separator + circular primary send button). No Sizes/States/Variants pages exist for this component in Figma (unlike `Input`) — scope is narrower accordingly.
-
-### Fixed
-
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-- Background: the root `InputGroup` container had no light-mode background at all (`dark:bg-input/30` with nothing for light mode, fully transparent) — Figma's surface token is `card` (`#ffffff`). Fixed to `bg-card`, same category of fix already made to `Input`/`DialogContent`/`HoverCardContent`.
-- Toolbar icon buttons (the leading `+` and the trailing send button in the textarea/toolbar composition): Figma's instances measure exactly 32×32px, which is the existing `icon-sm` size tier, not the `icon-xs` (24px) tier the demos were using. Fixed in `InputGroup.astro`'s own JSDoc preview, `InputGroupStory.astro`, and the storybook docs page (`_sections/input-group.astro`), plus the equivalent "Wide" example added to `Input`'s own storybook page.
-
-### Added
-
-- A "Tail icon" storybook example (plain input + trailing icon, no button) matching Figma's second documented row exactly — this composition wasn't previously demonstrated (the existing "https://" + "Check"-button example is a different, still-valid pattern, kept alongside).
-
-### Notes
-
-- `primary`/`primary-foreground` (send button), `foreground`/`background` (plain icon button), `muted-foreground` (addon text), and `radius-lg` all already matched Figma's tokens exactly — no changes needed.
-- No new props added — `InputGroup`'s existing `InputGroupAddon`/`InputGroupButton`/`InputGroupText`/`InputGroupTextarea` primitives already cover every composition Figma documents.
-
-## 2026-09-10 — Fixed `InputGroupButton` `size="sm"` no-op bug
-
-Surfaced by the new side-by-side sizes comparison above: `size="sm"` mapped to an empty string in `inputGroupButtonVariants`, so it added no override classes at all. Since `InputGroupButton` never forwards its own `size` prop to the underlying `Button` (only a `data-size` attribute), this meant `sm` silently fell through to `Button`'s own unscaled default size (`h-9`, 36px) — rendering *larger* than `xs` (24px), the opposite of what its name implies.
-
-### Fixed
-
-- `sm` → `"h-8 gap-1 px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5"`, matching `Button`'s own existing `sm` tier (`h-8`, 32px) and lining up with `icon-sm`'s 32px — giving a clean two-tier scale (24px compact / 32px comfortable) across both text and icon-only buttons.
-
-## 2026-09-10 — Fixed `InputGroup`'s `size` prop doing nothing
-
-The user asked what the `size` prop actually controls — turned out to be nothing. Two separate, compounding bugs:
-
-1. `InputGroup.astro`'s root had a hard-coded, unconditional `h-9` — never actually responsive to its own `data-size` attribute, so the group container's own height never changed for `sm`/`lg`.
-2. The intended mechanism for resizing the *inner* `InputGroupInput` control (`group-data-[size=sm]/input-group:h-8`, etc.) existed only in `controlClasses.ts`'s `inputGroupControlClasses` export — but nothing in the codebase imported it. `InputGroupInput.astro` had its own separate, non-responsive hard-coded class list instead. Confirmed live: `sm`/`default`/`lg` all rendered at an identical 36px / 14px font.
-
-### Fixed
-
-- `InputGroup.astro`: replaced the unconditional `h-9` with `data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10` on the root.
-- `InputGroupInput.astro`: now imports and applies `inputGroupControlClasses` from `controlClasses.ts` instead of its own disconnected duplicate class list.
-- `controlClasses.ts`: even after reconnecting it, `sm`/`lg` still had no effect — inspected the actual matched CSS rules via Chrome DevTools Protocol and found a genuine specificity conflict: Tailwind compiles the `group-data-[size=sm]/input-group:h-8` ancestor selector wrapped in `:where(...)` (zero specificity), so the whole rule resolves to a single-class specificity — lower than `Input`'s own self-referential `data-[size=default]:h-9` (class + attribute selector), which is *always* active since `Input` always sets its own `data-size="default"` unless given an explicit `size` prop. Added `!` (Tailwind v4 important-marker) to every `group-data-[size=*]/input-group:` class in `inputGroupControlClasses` to force it to win regardless — same convention already used elsewhere in this codebase for equivalent specificity fights (e.g. `HoverCardContent`'s `data-[instant]:...!` classes).
-- Verified live: `sm`/`default`/`lg` now correctly render the group container **and** the inner input at 32/36/40px with 12/14/16px font, matching the demo labels for the first time.
-
-### Fixed (regression from the above)
-
-- Making the root's height conditional (`data-[size=default]:h-9`, one class + one attribute selector) accidentally gave it the *same* specificity as the existing `has-[>textarea]:h-auto` / `has-[>[data-align=block-*]]:h-auto` overrides (also one class + one pseudo-class) that make the "Wide" toolbar/textarea composition grow to fit its content instead of clipping to a fixed height. Previously the plain unconditional `h-9` (lower specificity, one class only) always lost to those `has-[]:` overrides safely — the new conditional version could win the specificity tie instead, depending on Tailwind's internal rule-emission order. Confirmed live: the "Wide" example's container had collapsed to a fixed 36px, clipping the toolbar row outside its border.
-- Fixed by adding `!` to `has-[>textarea]:h-auto`, `has-[>[data-align=block-end]]:h-auto`, and `has-[>[data-align=block-start]]:h-auto` on `InputGroup.astro`'s root, so they unconditionally win over the sizing classes whenever a textarea or block-aligned addon is present. Verified live: the "Wide" example is back to its correct auto-height (112px), and `sm`/`default`/`lg` sizing is unaffected (still 32/36/40px).
+# Changelog
+
+All notable changes to the `InputGroup` component family (`InputGroup`, `InputGroupAddon`, `InputGroupButton`, `InputGroupInput`, `InputGroupText`, `InputGroupTextarea`) are documented in this file.
+
+## 2026-09-10 — Figma alignment (ClickLearn Lightning Design Library, node `2282-6923`)
+
+Figma documents a single "Default" composition with three example rows: a lead-icon search input with trailing supportive text, a plain input with a trailing icon, and a multi-line textarea with a toolbar (icon button + ghost text button + supportive text + separator + circular primary send button). No Sizes/States/Variants pages exist for this component in Figma (unlike `Input`) — scope is narrower accordingly.
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- Background: the root `InputGroup` container had no light-mode background at all (`dark:bg-input/30` with nothing for light mode, fully transparent) — Figma's surface token is `card` (`#ffffff`). Fixed to `bg-card`, same category of fix already made to `Input`/`DialogContent`/`HoverCardContent`.
+- Toolbar icon buttons (the leading `+` and the trailing send button in the textarea/toolbar composition): Figma's instances measure exactly 32×32px, which is the existing `icon-sm` size tier, not the `icon-xs` (24px) tier the demos were using. Fixed in `InputGroup.astro`'s own JSDoc preview, `InputGroupStory.astro`, and the storybook docs page (`_sections/input-group.astro`), plus the equivalent "Wide" example added to `Input`'s own storybook page.
+
+### Added
+
+- A "Tail icon" storybook example (plain input + trailing icon, no button) matching Figma's second documented row exactly — this composition wasn't previously demonstrated (the existing "https://" + "Check"-button example is a different, still-valid pattern, kept alongside).
+
+### Notes
+
+- `primary`/`primary-foreground` (send button), `foreground`/`background` (plain icon button), `muted-foreground` (addon text), and `radius-lg` all already matched Figma's tokens exactly — no changes needed.
+- No new props added — `InputGroup`'s existing `InputGroupAddon`/`InputGroupButton`/`InputGroupText`/`InputGroupTextarea` primitives already cover every composition Figma documents.
+
+## 2026-09-10 — Fixed `InputGroupButton` `size="sm"` no-op bug
+
+Surfaced by the new side-by-side sizes comparison above: `size="sm"` mapped to an empty string in `inputGroupButtonVariants`, so it added no override classes at all. Since `InputGroupButton` never forwards its own `size` prop to the underlying `Button` (only a `data-size` attribute), this meant `sm` silently fell through to `Button`'s own unscaled default size (`h-9`, 36px) — rendering *larger* than `xs` (24px), the opposite of what its name implies.
+
+### Fixed
+
+- `sm` → `"h-8 gap-1 px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5"`, matching `Button`'s own existing `sm` tier (`h-8`, 32px) and lining up with `icon-sm`'s 32px — giving a clean two-tier scale (24px compact / 32px comfortable) across both text and icon-only buttons.
+
+## 2026-09-10 — Fixed `InputGroup`'s `size` prop doing nothing
+
+The user asked what the `size` prop actually controls — turned out to be nothing. Two separate, compounding bugs:
+
+1. `InputGroup.astro`'s root had a hard-coded, unconditional `h-9` — never actually responsive to its own `data-size` attribute, so the group container's own height never changed for `sm`/`lg`.
+2. The intended mechanism for resizing the *inner* `InputGroupInput` control (`group-data-[size=sm]/input-group:h-8`, etc.) existed only in `controlClasses.ts`'s `inputGroupControlClasses` export — but nothing in the codebase imported it. `InputGroupInput.astro` had its own separate, non-responsive hard-coded class list instead. Confirmed live: `sm`/`default`/`lg` all rendered at an identical 36px / 14px font.
+
+### Fixed
+
+- `InputGroup.astro`: replaced the unconditional `h-9` with `data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10` on the root.
+- `InputGroupInput.astro`: now imports and applies `inputGroupControlClasses` from `controlClasses.ts` instead of its own disconnected duplicate class list.
+- `controlClasses.ts`: even after reconnecting it, `sm`/`lg` still had no effect — inspected the actual matched CSS rules via Chrome DevTools Protocol and found a genuine specificity conflict: Tailwind compiles the `group-data-[size=sm]/input-group:h-8` ancestor selector wrapped in `:where(...)` (zero specificity), so the whole rule resolves to a single-class specificity — lower than `Input`'s own self-referential `data-[size=default]:h-9` (class + attribute selector), which is *always* active since `Input` always sets its own `data-size="default"` unless given an explicit `size` prop. Added `!` (Tailwind v4 important-marker) to every `group-data-[size=*]/input-group:` class in `inputGroupControlClasses` to force it to win regardless — same convention already used elsewhere in this codebase for equivalent specificity fights (e.g. `HoverCardContent`'s `data-[instant]:...!` classes).
+- Verified live: `sm`/`default`/`lg` now correctly render the group container **and** the inner input at 32/36/40px with 12/14/16px font, matching the demo labels for the first time.
+
+### Fixed (regression from the above)
+
+- Making the root's height conditional (`data-[size=default]:h-9`, one class + one attribute selector) accidentally gave it the *same* specificity as the existing `has-[>textarea]:h-auto` / `has-[>[data-align=block-*]]:h-auto` overrides (also one class + one pseudo-class) that make the "Wide" toolbar/textarea composition grow to fit its content instead of clipping to a fixed height. Previously the plain unconditional `h-9` (lower specificity, one class only) always lost to those `has-[]:` overrides safely — the new conditional version could win the specificity tie instead, depending on Tailwind's internal rule-emission order. Confirmed live: the "Wide" example's container had collapsed to a fixed 36px, clipping the toolbar row outside its border.
+- Fixed by adding `!` to `has-[>textarea]:h-auto`, `has-[>[data-align=block-end]]:h-auto`, and `has-[>[data-align=block-start]]:h-auto` on `InputGroup.astro`'s root, so they unconditionally win over the sizing classes whenever a textarea or block-aligned addon is present. Verified live: the "Wide" example is back to its correct auto-height (112px), and `sm`/`default`/`lg` sizing is unaffected (still 32/36/40px).