@cl-light-ds/ui 0.1.0

package/src/components/field/FieldDescription.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"p"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<p
+  data-slot="field-description"
+  class={cn(
+    "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5",
+    "leading-normal font-normal group-has-data-horizontal/field:text-balance",
+    "last:mt-0 nth-last-2:-mt-1",
+    "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</p>

package/src/components/field/FieldError.astro

@@ -0,0 +1,51 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+type ErrorItem = { message?: string } | undefined;
+
+interface Props extends HTMLAttributes<"div"> {
+  errors?: ErrorItem[];
+  forceMount?: boolean;
+}
+
+const {
+  class: className = "",
+  errors = [],
+  forceMount = false,
+  ...rest
+} = Astro.props as Props;
+
+const hasContent = Astro.slots.has("default");
+
+const uniqueMessages = Array.from(
+  new Set(
+    errors
+      .map((error) => error?.message)
+      .filter((message): message is string => Boolean(message)),
+  ),
+);
+
+const shouldRender = forceMount || hasContent || uniqueMessages.length > 0;
+---
+
+{
+  shouldRender && (
+    <div
+      role="alert"
+      data-slot="field-error"
+      class={cn("text-destructive text-sm font-normal", className)}
+      {...rest}
+    >
+      {hasContent && <slot />}
+      {!hasContent && uniqueMessages.length === 1 && uniqueMessages[0]}
+      {!hasContent && uniqueMessages.length > 1 && (
+        <ul class="ml-4 flex list-disc flex-col gap-1">
+          {uniqueMessages.map((message) => (
+            <li>{message}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/field/FieldGroup.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  data-slot="field-group"
+  class={cn(
+    "gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+    "group/field-group @container/field-group flex w-full flex-col",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/field/FieldLabel.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Label } from "../label";
+
+interface Props extends HTMLAttributes<"label"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<Label
+  data-slot="field-label"
+  class={cn(
+    "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3",
+    "group/field-label peer/field-label flex w-fit leading-snug",
+    "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</Label>

package/src/components/field/FieldLegend.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"legend"> {
+  variant?: "legend" | "label";
+}
+
+const {
+  class: className = "",
+  variant = "legend",
+  ...rest
+} = Astro.props as Props;
+---
+
+<legend
+  data-slot="field-legend"
+  data-variant={variant}
+  class={cn("mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className)}
+  {...rest}
+>
+  <slot />
+</legend>

package/src/components/field/FieldSeparator.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Separator } from "../separator";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+
+const hasContent = Astro.slots.has("default");
+---
+
+<div
+  data-slot="field-separator"
+  data-content={hasContent ? "true" : undefined}
+  class={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
+  {...rest}
+>
+  <Separator class="absolute inset-0 top-1/2" />
+  {
+    hasContent && (
+      <span
+        class="text-muted-foreground px-2 relative mx-auto block w-fit bg-background"
+        data-slot="field-separator-content"
+      >
+        <slot />
+      </span>
+    )
+  }
+</div>

package/src/components/field/FieldSet.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"fieldset"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<fieldset
+  data-slot="field-set"
+  class={cn(
+    "gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+    "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</fieldset>

package/src/components/field/FieldTitle.astro

@@ -0,0 +1,20 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  data-slot="field-title"
+  class={cn(
+    "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+    "flex w-fit items-center leading-snug",
+    className,
+  )}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/field/index.ts

@@ -0,0 +1,10 @@
+export { default as Field } from "./Field.astro";
+export { default as FieldContent } from "./FieldContent.astro";
+export { default as FieldDescription } from "./FieldDescription.astro";
+export { default as FieldError } from "./FieldError.astro";
+export { default as FieldGroup } from "./FieldGroup.astro";
+export { default as FieldLabel } from "./FieldLabel.astro";
+export { default as FieldLegend } from "./FieldLegend.astro";
+export { default as FieldSeparator } from "./FieldSeparator.astro";
+export { default as FieldSet } from "./FieldSet.astro";
+export { default as FieldTitle } from "./FieldTitle.astro";

package/src/components/hover-card/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+All notable changes to the `HoverCard` component family (`HoverCard`, `HoverCardTrigger`, `HoverCardContent`) are documented in this file.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `5455-14770`)
+
+Figma shows three content **Variants** (Default, Simple, Avatar) and two **States** (Default, Focus) for the card surface.
+
+### Fixed
+
+- `HoverCardContent`: added the missing `@figmaUrl` to `HoverCard.astro`'s JSDoc (this component had never had one).
+- `HoverCardContent`: replaced the `ring-1 ring-foreground/10` border approximation with a real `border border-border`, and `shadow-md` → `shadow-lg` — matching Figma's spec'd tokens (`--border` = `#e4e4e7`, and a named `shadow-lg` multi-layer drop shadow), the same category of fix already made to `DialogContent` in the previous pass.
+- `HoverCardContent`: added a focus-visible ring (`has-[:focus-visible]:border-ring has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50`) to match Figma's "Focus" state (`--ring` = `#5f9de6`), using the same `border-ring` + `ring-3 ring-ring/50` idiom already established for Accordion/Checkbox/Dialog. This activates whenever a keyboard-focusable element inside custom `HoverCardContent` children receives focus — none of the current demos happen to place one, so it isn't visually exercised yet, but the capability is now available.
+- `HoverCardContent`: removed a dead, redundant raw class string that duplicated almost the entire `contentVariants()` class list directly on the rendered div — the same class of bug already fixed in `DialogFooter`/`TooltipContent`. It also silently conflicted on `duration-100` vs. `contentVariants()`'s `duration-150`; since `contentVariants()` came later in the `cn()` call, `150ms` was already winning and `100ms` was fully dead code.
+
+### Notes
+
+- Figma's three content variants (Default/Simple/Avatar) are pure content compositions, not distinct props — the existing headless `HoverCardContent` already supports all three via whatever children are passed in (Preview ≈ Default, "With avatar" ≈ Avatar, "Positioning options"/"Custom timing" ≈ Simple). No new props or sub-components added, matching the same call made for Combobox.
+- Typography (bold title, `text-muted-foreground text-xs` meta line) and sizing (`w-64`, `rounded-lg`, `p-3`, avatar `size-10`) already matched Figma's tokens exactly — no changes needed there.
+- No changes to `HoverCardTrigger` — Figma's Focus frame shows only the card, not trigger-specific styling.

package/src/components/hover-card/HoverCard.astro

@@ -0,0 +1,235 @@
+---
+/**
+ * @component HoverCard
+ * @title Hover Card
+ * @description For sighted users to preview content available behind a link.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-14770
+ *
+ * @preview
+ *
+ * <HoverCard delay={10} closeDelay={100}>
+ *   <HoverCardTrigger asChild>
+ *     <Button variant="link">@data-slot</Button>
+ *   </HoverCardTrigger>
+ *   <HoverCardContent class="flex w-64 flex-col gap-0.5">
+ *     <div class="font-semibold">@data-slot</div>
+ *     <div>Headless UI components for vanilla JavaScript.</div>
+ *     <div class="text-muted-foreground mt-1 text-xs">
+ *       Created by Bejamas in 2026
+ *     </div>
+ *   </HoverCardContent>
+ * </HoverCard>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   HoverCard,
+ *   HoverCardContent,
+ *   HoverCardTrigger,
+ * } from '@bejamas/ui/components/hover-card';
+ * import { Button } from '@bejamas/ui/components/button';
+ * ---
+ *
+ * <HoverCard>
+ *   <HoverCardTrigger asChild>
+ *     <Button variant="link">Hover Here</Button>
+ *   </HoverCardTrigger>
+ *   <HoverCardContent>
+ *     <div class="font-semibold">@nextjs</div>
+ *     <div>The React Framework - created and maintained by @vercel.</div>
+ *   </HoverCardContent>
+ * </HoverCard>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The hover card emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `hover-card:change` | `{ open: boolean, reason: string, trigger: HTMLElement, content: HTMLElement }` | Fired when visibility changes |
+ *
+ * ```astro nocollapse console
+ * <HoverCard id="my-hover-card">
+ *   <HoverCardTrigger asChild>
+ *     <Button variant="outline">Hover me</Button>
+ *   </HoverCardTrigger>
+ *   <HoverCardContent>
+ *     Hover card content
+ *   </HoverCardContent>
+ * </HoverCard>
+ * ```
+ *
+ * ```js nocollapse
+ *   const hoverCard = document.getElementById('my-hover-card');
+ *
+ *   hoverCard.addEventListener('hover-card:change', (e) => {
+ *     console.log('Is open:', e.detail.open);
+ *     console.log('Reason:', e.detail.reason);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the hover card programmatically by dispatching a `hover-card:set` event:
+ *
+ * ```js nocollapse
+ * const hoverCard = document.getElementById('my-hover-card');
+ *
+ * // Open the hover card
+ * hoverCard.dispatchEvent(new CustomEvent('hover-card:set', {
+ *   detail: { open: true }
+ * }));
+ *
+ * // Close the hover card
+ * hoverCard.dispatchEvent(new CustomEvent('hover-card:set', {
+ *   detail: { open: false }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The hover card sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | hover-card, hover-card-content | Current state (`open` or `closed`) |
+ * | `data-open` | hover-card, hover-card-content | Present while open |
+ * | `data-closed` | hover-card, hover-card-content | Present while closed |
+ * | `data-side` | hover-card-content | Position relative to trigger (`top`, `right`, `bottom`, or `left`) |
+ * | `data-align` | hover-card-content | Alignment (`start`, `center`, or `end`) |
+ * | `data-side-offset` | hover-card-content | Distance from trigger in pixels (default `4`) |
+ * | `data-align-offset` | hover-card-content | Alignment-axis offset in pixels (default `0`) |
+ *
+ * @examples
+ *
+ * ### With Avatar
+ *
+ * <HoverCard>
+ *   <HoverCardTrigger asChild>
+ *     <Button variant="link">@thom</Button>
+ *   </HoverCardTrigger>
+ *   <HoverCardContent class="flex w-72 gap-3 p-3">
+ *     <Avatar class="size-10 rounded-full">
+ *       <AvatarImage>
+ *         <img src="https://github.com/thomkrupa.png" alt="@thom" />
+ *       </AvatarImage>
+ *       <AvatarFallback>TK</AvatarFallback>
+ *     </Avatar>
+ *     <div class="space-y-1">
+ *       <div class="text-sm font-semibold leading-none">@thom</div>
+ *       <p class="text-muted-foreground text-sm">
+ *         Building design systems and UI tooling.
+ *       </p>
+ *     </div>
+ *   </HoverCardContent>
+ * </HoverCard>
+ *
+ * ### Different sides
+ *
+ * <div class="flex flex-wrap items-center gap-3 py-8">
+ *   <HoverCard delay={10} closeDelay={80} skipDelayDuration={0}>
+ *     <HoverCardTrigger asChild>
+ *       <Button variant="outline">Left</Button>
+ *     </HoverCardTrigger>
+ *     <HoverCardContent side="left">Appears on left.</HoverCardContent>
+ *   </HoverCard>
+ *   <HoverCard delay={10} closeDelay={80} skipDelayDuration={0}>
+ *     <HoverCardTrigger asChild>
+ *       <Button variant="outline">Top</Button>
+ *     </HoverCardTrigger>
+ *     <HoverCardContent side="top">Appears on top.</HoverCardContent>
+ *   </HoverCard>
+ *   <HoverCard delay={10} closeDelay={80} skipDelayDuration={0}>
+ *     <HoverCardTrigger asChild>
+ *       <Button variant="outline">Bottom</Button>
+ *     </HoverCardTrigger>
+ *     <HoverCardContent side="bottom">Appears on bottom.</HoverCardContent>
+ *   </HoverCard>
+ *   <HoverCard delay={10} closeDelay={80} skipDelayDuration={0}>
+ *     <HoverCardTrigger asChild>
+ *       <Button variant="outline">Right</Button>
+ *     </HoverCardTrigger>
+ *     <HoverCardContent side="right">Appears on right.</HoverCardContent>
+ *   </HoverCard>
+ * </div>
+ *
+ * ### Positioning options
+ *
+ * Configure placement options on `HoverCardContent`:
+ *
+ * <HoverCard>
+ *   <HoverCardTrigger asChild>
+ *     <Button variant="outline">Custom positioning</Button>
+ *   </HoverCardTrigger>
+ *   <HoverCardContent
+ *     side="top"
+ *     sideOffset={8}
+ *     align="start"
+ *   >
+ *     Uses content-level positioning options.
+ *   </HoverCardContent>
+ * </HoverCard>
+ *
+ * ### Custom timing
+ *
+ * <HoverCard delay={600} closeDelay={200} skipDelayDuration={300}>
+ *   <HoverCardTrigger asChild>
+ *     <Button variant="outline">Hover with delay</Button>
+ *   </HoverCardTrigger>
+ *   <HoverCardContent>
+ *     Opens after 600ms, closes after 200ms.
+ *   </HoverCardContent>
+ * </HoverCard>
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  defaultOpen?: boolean;
+  delay?: number;
+  skipDelayDuration?: number;
+  closeDelay?: number;
+  closeOnClickOutside?: boolean;
+  closeOnEscape?: boolean;
+}
+
+const {
+  class: className = "",
+  defaultOpen = false,
+  delay = 700,
+  skipDelayDuration = 300,
+  closeDelay = 300,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="hover-card"
+  data-default-open={String(defaultOpen)}
+  data-delay={delay}
+  data-skip-delay-duration={skipDelayDuration}
+  data-close-delay={closeDelay}
+  data-close-on-click-outside={String(closeOnClickOutside)}
+  data-close-on-escape={String(closeOnEscape)}
+  class={cn("", "inline-block", className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { createHoverCard } from "@data-slot/hover-card";
+
+  document.querySelectorAll('[data-slot="hover-card"]').forEach((el) => {
+    createHoverCard(el);
+  });
+</script>

package/src/components/hover-card/HoverCardContent.astro

@@ -0,0 +1,54 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { cva } from "class-variance-authority";
+
+interface Props extends HTMLAttributes<"div"> {
+  side?: "top" | "bottom" | "left" | "right";
+  sideOffset?: number;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  class?: string;
+}
+
+const {
+  class: className = "",
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  ...rest
+} = Astro.props as Props;
+
+const contentVariants = cva([
+  // visibility
+  "duration-150 ease data-instant:duration-0 transition-discrete outline-hidden",
+  // animations
+  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+  "data-[instant]:transition-none! data-[instant]:animate-none!",
+  "data-instant:data-[state=closed]:animate-none! data-instant:data-[state=closed]:fade-out-0! data-instant:data-[state=closed]:opacity-100! data-instant:data-[state=closed]:scale-100! data-instant:data-[state=closed]:translate-x-0! data-instant:data-[state=closed]:translate-y-0!",
+  // styles
+  "bg-popover text-popover-foreground w-64 rounded-lg border border-border p-3 text-sm shadow-lg has-[:focus-visible]:border-ring has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50",
+  // origin from positioner
+  "origin-(--transform-origin)",
+]);
+---
+
+<div data-slot="hover-card-portal" class="">
+  <div data-slot="hover-card-positioner" class="isolate z-50">
+    <div
+      {...rest}
+      hidden
+      data-slot="hover-card-content"
+      data-side={side}
+      data-side-offset={sideOffset}
+      data-align={align}
+      data-align-offset={alignOffset}
+      class={cn(contentVariants(), className)}
+    >
+      <slot />
+    </div>
+  </div>
+</div>

package/src/components/hover-card/HoverCardTrigger.astro

@@ -0,0 +1,38 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+  /** Radix-like: render wrapper so the child can be the interactive element */
+  asChild?: boolean;
+}
+
+const {
+  class: className = "",
+  asChild = false,
+  type = "button",
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  asChild ? (
+    <div
+      data-slot="hover-card-trigger"
+      data-as-child
+      class={cn("", "inline-flex items-center", className)}
+    >
+      <slot />
+    </div>
+  ) : (
+    <button
+      {...rest}
+      type={type}
+      data-slot="hover-card-trigger"
+      class={cn("", "inline-flex items-center", className)}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/components/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from "./HoverCard.astro";
+export { default as HoverCardTrigger } from "./HoverCardTrigger.astro";
+export { default as HoverCardContent } from "./HoverCardContent.astro";

package/src/components/input/CHANGELOG.md

@@ -0,0 +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).