@cl-light-ds/ui 0.3.0 → 0.5.0

package/src/components/empty-state/illustrations/NoResults.astro

@@ -0,0 +1,60 @@
+---
+/**
+ * Illustration "no-results" (280×200, with its own padding inside the viewBox).
+ * The designer's artwork; colours mapped to design tokens so it follows the theme.
+ * Decorative. Generated from the workspace selection handover assets (N15).
+ */
+import type { HTMLAttributes } from "astro/types";
+
+type Props = Omit<HTMLAttributes<"svg">, "width" | "height">;
+
+const props = Astro.props as Props;
+// Unique ids per instance, so several illustrations on one page don't share filters.
+const uid = `es-no-results-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="280"
+  height="200"
+  viewBox="-20 -20 280 200"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+  {...props}
+>
+  <defs>
+    <filter id={`${uid}-sBack`} x="-20%" y="-30%" width="140%" height="160%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#051729" flood-opacity="0.05"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sFront`} x="-30%" y="-40%" width="160%" height="190%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="8" stdDeviation="10" flood-color="#051729" flood-opacity="0.10"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sLens`} x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="6" stdDeviation="6" flood-opacity="0.28" style="flood-color:var(--primary)"></feDropShadow>
+    </filter>
+  </defs>
+  <circle cx="120" cy="80" r="69" stroke-width="20" style="stroke:color-mix(in oklab, var(--primary-50) 50%, var(--background))"></circle>
+  <circle cx="120" cy="80" r="40" stroke-width="16" style="stroke:var(--primary-50)"></circle>
+  <g transform="rotate(-9 94 70)" filter={`url(#${uid}-sBack)`}>
+    <rect x="34" y="34" width="120" height="72" rx="10" style="fill:var(--background)"></rect>
+    <rect x="34.5" y="34.5" width="119" height="71" rx="9.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  </g>
+  <g transform="rotate(8 152 66)" filter={`url(#${uid}-sBack)`}>
+    <rect x="92" y="30" width="120" height="72" rx="10" style="fill:var(--background)"></rect>
+    <rect x="92.5" y="30.5" width="119" height="71" rx="9.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  </g>
+  <g filter={`url(#${uid}-sFront)`}>
+    <rect x="50" y="52" width="140" height="84" rx="12" style="fill:var(--background)"></rect>
+  </g>
+  <rect x="50.5" y="52.5" width="139" height="83" rx="11.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  <rect x="64.75" y="66.75" width="26.5" height="26.5" rx="7.25" stroke-width="1.5" stroke-dasharray="4 3" style="stroke:var(--color-zinc-300, #d4d4d8)"></rect>
+  <rect x="64" y="106" width="76" height="7" rx="3.5" style="fill:var(--border)"></rect>
+  <rect x="64" y="119" width="48" height="7" rx="3.5" style="fill:var(--muted)"></rect>
+  <g filter={`url(#${uid}-sLens)`}>
+    <line x1="183" y1="127" x2="197" y2="141" stroke-width="9" stroke-linecap="round" style="stroke:var(--primary-700)"></line>
+    <circle cx="168" cy="112" r="20" stroke-width="6" style="fill:var(--background);stroke:var(--primary)"></circle>
+  </g>
+  <line x1="162" y1="106" x2="174" y2="118" stroke-width="3" stroke-linecap="round" style="stroke:var(--primary-300)"></line>
+  <line x1="174" y1="106" x2="162" y2="118" stroke-width="3" stroke-linecap="round" style="stroke:var(--primary-300)"></line>
+</svg>

package/src/components/empty-state/illustrations/NothingMatches.astro

@@ -0,0 +1,66 @@
+---
+/**
+ * Illustration "nothing-matches" (184×124, with its own padding inside the viewBox).
+ * The designer's artwork; colours mapped to design tokens so it follows the theme.
+ * Decorative. Generated from the workspace selection handover assets (N15).
+ */
+import type { HTMLAttributes } from "astro/types";
+
+type Props = Omit<HTMLAttributes<"svg">, "width" | "height">;
+
+const props = Astro.props as Props;
+// Unique ids per instance, so several illustrations on one page don't share filters.
+const uid = `es-nothing-matches-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="184"
+  height="124"
+  viewBox="-12 -12 184 124"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+  {...props}
+>
+  <defs>
+    <filter id={`${uid}-sBack`} x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="1.5" stdDeviation="2" flood-color="#051729" flood-opacity="0.05"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sFront`} x="-40%" y="-30%" width="180%" height="170%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#051729" flood-opacity="0.10"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sLens`} x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-opacity="0.28" style="flood-color:var(--primary)"></feDropShadow>
+    </filter>
+  </defs>
+  <circle cx="80" cy="50" r="44" stroke-width="12" style="stroke:color-mix(in oklab, var(--primary-50) 50%, var(--background))"></circle>
+  <circle cx="80" cy="50" r="24" stroke-width="10" style="stroke:var(--primary-50)"></circle>
+  <g transform="rotate(-12 44 52)">
+    <g filter={`url(#${uid}-sBack)`}><rect x="22" y="26" width="44" height="52" rx="8" style="fill:var(--background)"></rect></g>
+    <rect x="22.5" y="26.5" width="43" height="51" rx="7.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+    <rect x="28" y="32" width="14" height="14" rx="4" style="fill:var(--primary-100)"></rect>
+    <rect x="28" y="54" width="24" height="4" rx="2" style="fill:var(--border)"></rect>
+    <rect x="28" y="62" width="16" height="4" rx="2" style="fill:var(--muted)"></rect>
+  </g>
+  <g transform="rotate(12 116 52)">
+    <g filter={`url(#${uid}-sBack)`}><rect x="94" y="26" width="44" height="52" rx="8" style="fill:var(--background)"></rect></g>
+    <rect x="94.5" y="26.5" width="43" height="51" rx="7.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+    <rect x="100" y="34" width="28" height="4" rx="2" style="fill:var(--border)"></rect>
+    <rect x="100" y="42" width="32" height="4" rx="2" style="fill:var(--muted)"></rect>
+    <rect x="100" y="50" width="22" height="4" rx="2" style="fill:var(--muted)"></rect>
+    <rect x="100" y="58" width="28" height="4" rx="2" style="fill:var(--muted)"></rect>
+  </g>
+  <g filter={`url(#${uid}-sFront)`}><rect x="56" y="18" width="48" height="58" rx="9" style="fill:var(--background)"></rect></g>
+  <rect x="56.5" y="18.5" width="47" height="57" rx="8.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  <rect x="62" y="24" width="36" height="22" rx="5" style="fill:var(--primary-50)"></rect>
+  <path d="M77 30.5 L84.5 35 L77 39.5 Z" stroke-width="1.5" stroke-linejoin="round" style="fill:var(--primary-300);stroke:var(--primary-300)"></path>
+  <rect x="62" y="53" width="28" height="4" rx="2" style="fill:var(--border)"></rect>
+  <rect x="62" y="61" width="18" height="4" rx="2" style="fill:var(--muted)"></rect>
+  <g filter={`url(#${uid}-sLens)`}>
+    <line x1="113.5" y1="79.5" x2="122" y2="88" stroke-width="6" stroke-linecap="round" style="stroke:var(--primary-700)"></line>
+    <circle cx="104" cy="70" r="13" stroke-width="4" style="fill:var(--background);stroke:var(--primary)"></circle>
+  </g>
+  <line x1="100" y1="66" x2="108" y2="74" stroke-width="2.2" stroke-linecap="round" style="stroke:var(--primary-300)"></line>
+  <line x1="108" y1="66" x2="100" y2="74" stroke-width="2.2" stroke-linecap="round" style="stroke:var(--primary-300)"></line>
+</svg>

package/src/components/empty-state/illustrations/index.ts

@@ -0,0 +1,27 @@
+import AllCaughtUp from "./AllCaughtUp.astro";
+import EmptyWorkspaces from "./EmptyWorkspaces.astro";
+import LoadError from "./LoadError.astro";
+import NoResults from "./NoResults.astro";
+import NothingMatches from "./NothingMatches.astro";
+
+/**
+ * Built-in empty state illustrations. Each has its own padding inside the
+ * viewBox; `pull` is the negative vertical margin that takes it back out, so
+ * the drawing sits at the message's normal spacing.
+ */
+export const emptyStateIllustrations = {
+  /** Nothing created yet (280×200, page). */
+  empty: { component: EmptyWorkspaces, width: 280, height: 200, pull: "-my-6" },
+  /** A search found nothing (280×200, page). */
+  "no-results": { component: NoResults, width: 280, height: 200, pull: "-my-6" },
+  /** Something failed to load (280×200, page). */
+  error: { component: LoadError, width: 280, height: 200, pull: "-my-6" },
+  /** Nothing new, e.g. notifications (144×104, menu). */
+  "all-caught-up": { component: AllCaughtUp, width: 144, height: 104, pull: "-my-2" },
+  /** A search in a menu or command palette found nothing (184×124, menu). */
+  "nothing-matches": { component: NothingMatches, width: 184, height: 124, pull: "-my-3" },
+} as const;
+
+export type EmptyStateIllustrationName = keyof typeof emptyStateIllustrations;
+
+export const EMPTY_STATE_ILLUSTRATIONS = Object.keys(emptyStateIllustrations) as EmptyStateIllustrationName[];

package/src/components/empty-state/index.ts

@@ -0,0 +1,7 @@
+export { default as EmptyState } from "./EmptyState.astro";
+export { emptyStateVariants } from "./EmptyState.astro";
+export {
+  EMPTY_STATE_ILLUSTRATIONS,
+  emptyStateIllustrations,
+  type EmptyStateIllustrationName,
+} from "./illustrations";

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

@@ -0,0 +1,13 @@
+# Changelog
+
+All notable changes to the `FavoriteToggle` component will be documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N8)
+
+### Added
+
+- `FavoriteToggle`: a `Toggle` with `variant="ghost"` and a Lucide `Star`. Pressed fills the star with the `favorite` token (was `badge-warning` in the screen, gap G3); no pressed background, the normal hover background on hover (C12).
+- Props: `label` (the accessible name, required), `defaultPressed`, `disabled`, `size` (Toggle sizes, default `sm`, 32px), `class`, and any button attribute. State is `aria-pressed`; changes fire the Toggle runtime's `toggle:change`. `data-favorite-toggle` marks it for scripts.
+- "Only on a favourite, or on hover or focus" is left to the consumer: documented as a `group/*` + `opacity-0 group-hover/*:opacity-100 group-focus-within/*:opacity-100 aria-pressed:opacity-100` recipe, so the star stays in the Tab order.
+- Storybook: "Favorite Toggle" under Actions.

package/src/components/favorite-toggle/FavoriteToggle.astro

@@ -0,0 +1,94 @@
+---
+/**
+ * @component FavoriteToggle
+ * @title Favorite Toggle
+ * @description A star that adds something to favourites or takes it out. A ghost `Toggle`: pressed shows as a star filled with the `favorite` colour, with no pressed background.
+ *
+ * @preview
+ *
+ * <div class="flex items-center gap-2">
+ *   <FavoriteToggle label="Favourite Acme Logistics" />
+ *   <FavoriteToggle label="Favourite Northwind" defaultPressed />
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { FavoriteToggle } from '@cl-light-ds/ui/components/favorite-toggle';
+ * ---
+ *
+ * <FavoriteToggle label="Favourite Acme Logistics" defaultPressed={item.starred} />
+ * ```
+ *
+ * `label` names what is favourited ("Favourite Acme Logistics"); the state is
+ * announced through `aria-pressed`, so the label stays the same either way.
+ *
+ * ## Only when favourited, or on hover / focus
+ *
+ * Not built in. Put a `group/<name>` on the container and reveal the star with
+ * classes, so it is always there for keyboard and screen reader users:
+ *
+ * ```astro nocollapse
+ * <div class="group/card relative ...">
+ *   <FavoriteToggle
+ *     label="Favourite Acme Logistics"
+ *     class="opacity-0 group-hover/card:opacity-100 group-focus-within/card:opacity-100 aria-pressed:opacity-100"
+ *   />
+ * </div>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `toggle:change` | `{ pressed: boolean }` | Fired by the Toggle runtime when the state changes |
+ *
+ * Set it from outside with `toggle:set` (`{ detail: { value: true } }`), as for `Toggle`.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { Star } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { ToggleSize } from "@cl-light-ds/ui/lib/toggle-shared";
+import { Toggle } from "../toggle";
+
+interface Props extends Omit<HTMLAttributes<"button">, "class"> {
+  /** Accessible name, e.g. "Favourite Acme Logistics". */
+  label: string;
+  /** Initially a favourite. */
+  defaultPressed?: boolean;
+  disabled?: boolean;
+  /** Toggle size; the star is 16px at every size. */
+  size?: ToggleSize;
+  class?: string;
+}
+
+const {
+  label,
+  defaultPressed = false,
+  disabled = false,
+  size = "sm",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<Toggle
+  {...rest}
+  variant="ghost"
+  size={size}
+  defaultPressed={defaultPressed}
+  disabled={disabled}
+  aria-label={label}
+  data-favorite-toggle
+  class={cn("transition-[color,box-shadow,opacity]", className)}
+>
+  <Star
+    data-slot="favorite-toggle-icon"
+    class="size-4 group-aria-pressed/toggle:fill-favorite group-aria-pressed/toggle:text-favorite"
+    aria-hidden="true"
+  />
+</Toggle>

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

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

package/src/components/input/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to the `Input` component will be documented in this file.
 
+## 2026-10-06 — OTP Input (ClickLearn Lightning Design Library, node `7650-4177`)
+
+Figma adds an "OTP Input" component set to the Input page with states Default, Focused, Filled, Disabled and Error: six joined 56×40 slots (outer corners `rounded-lg`, shared inner borders, 14px medium centered text), a label above and hint text below.
+
+### Added
+
+- `InputOTP` (exported from `components/input`). Props: `length` (default 6), `name`, `value`, `size` (`sm` | `default` | `lg`; `default` is Figma's 56×40), `mode` (`numeric` | `alphanumeric`), `id` (applied to the first slot so `FieldLabel for` works), `disabled`, `required`, `autofocus`, `aria-invalid`.
+- Joined value is submitted through a hidden input named by `name`.
+- Inline script: auto-advance on type, Backspace to previous slot, arrow-key navigation, paste/OS autofill distributes characters across slots. Emits `input-otp:change` and `input-otp:complete` (`detail.value`).
+
+### Notes
+
+- States reuse Input's tokens exactly: `border-input`, `bg-card`, `shadow-xs`; Focus `border-ring ring-3 ring-ring/50`; Error `aria-invalid:border-destructive` (no outer ring, matching Figma); Disabled `bg-muted text-muted-foreground`. Hover not implemented (standing direction).
+- Label and hint are composed with `Field` / `FieldLabel` / `FieldDescription` / `FieldError`, same as Input, rather than new props.
+
 ## 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).

package/src/components/input/InputOTP.astro

@@ -0,0 +1,211 @@
+---
+/**
+ * @component InputOTP
+ * @title OTP Input
+ * @description A row of single-character slots for entering one-time codes, with auto-advance, backspace and paste support.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7650-4177
+ * @status stable
+ * @since 0.4.0
+ *
+ * @preview
+ *
+ * <Field class="w-fit">
+ *   <FieldLabel for="otp">Verification code</FieldLabel>
+ *   <InputOTP id="otp" name="code" />
+ *   <FieldDescription>Enter the 6-digit code we sent to your email.</FieldDescription>
+ * </Field>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { InputOTP } from '@cl-light-ds/ui/components/input';
+ * ---
+ * <InputOTP id="otp" name="code" length={6} />
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `input-otp:change` | `{ value: string }` | Fired whenever the code changes |
+ * | `input-otp:complete` | `{ value: string }` | Fired when every slot is filled |
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type InputOTPSize = "sm" | "default" | "lg";
+type InputOTPMode = "numeric" | "alphanumeric";
+
+interface Props extends Omit<HTMLAttributes<"div">, "id"> {
+  /** Number of slots. */
+  length?: number;
+  /** Name of the hidden input that carries the joined code on form submit. */
+  name?: string;
+  /** Initial value; characters fill slots from the left. */
+  value?: string;
+  size?: InputOTPSize;
+  /** `numeric` accepts digits only; `alphanumeric` accepts letters and digits. */
+  mode?: InputOTPMode;
+  /** Applied to the first slot so a `<label for>` / `FieldLabel` focuses it. */
+  id?: string;
+  disabled?: boolean;
+  required?: boolean;
+  autofocus?: boolean;
+  "aria-invalid"?: boolean | "true" | "false";
+  class?: string;
+}
+
+const {
+  class: className = "",
+  length = 6,
+  name,
+  value = "",
+  size = "default",
+  mode = "numeric",
+  id,
+  disabled = false,
+  required = false,
+  autofocus = false,
+  "aria-invalid": ariaInvalid,
+  ...rest
+} = Astro.props as Props;
+
+const allowed = mode === "alphanumeric" ? /[a-z0-9]/i : /\d/;
+const chars = [...value].filter((char) => allowed.test(char)).slice(0, length);
+const slots = Array.from({ length }, (_, index) => chars[index] ?? "");
+const invalid = ariaInvalid === true || ariaInvalid === "true";
+---
+
+<div
+  {...rest}
+  role="group"
+  data-slot="input-otp"
+  data-size={size}
+  data-mode={mode}
+  data-length={length}
+  data-disabled={disabled ? "" : undefined}
+  data-invalid={invalid ? "" : undefined}
+  class={cn("flex w-fit items-center", className)}
+>
+  {
+    slots.map((char, index) => (
+      <input
+        type="text"
+        id={index === 0 ? id : undefined}
+        data-slot="input-otp-slot"
+        data-size={size}
+        value={char}
+        inputmode={mode === "numeric" ? "numeric" : "text"}
+        autocomplete={index === 0 ? "one-time-code" : "off"}
+        autocapitalize="off"
+        spellcheck="false"
+        aria-label={`Character ${index + 1} of ${length}`}
+        aria-invalid={invalid ? "true" : undefined}
+        disabled={disabled}
+        autofocus={index === 0 && autofocus}
+        class={cn(
+          "relative -ml-px min-w-0 border border-input bg-card text-center font-medium text-foreground shadow-xs outline-none transition-[color,box-shadow] first:ml-0 first:rounded-l-lg last:rounded-r-lg",
+          "focus-visible:z-10 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:border-ring",
+          "aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:focus-visible:ring-destructive/20",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
+          "data-[size=sm]:h-8 data-[size=sm]:w-10 data-[size=sm]:text-xs",
+          "data-[size=default]:h-10 data-[size=default]:w-14 data-[size=default]:text-sm",
+          "data-[size=lg]:h-12 data-[size=lg]:w-16 data-[size=lg]:text-base",
+        )}
+      />
+    ))
+  }
+  <input
+    type="hidden"
+    data-slot="input-otp-value"
+    name={name}
+    value={chars.join("")}
+    required={required}
+    disabled={disabled}
+  />
+</div>
+
+<script>
+  function initInputOTP(root: HTMLElement) {
+    if (root.dataset.initialized !== undefined) return;
+    root.dataset.initialized = "";
+
+    const slots = Array.from(root.querySelectorAll<HTMLInputElement>('[data-slot="input-otp-slot"]'));
+    const hidden = root.querySelector<HTMLInputElement>('[data-slot="input-otp-value"]');
+    const allowed = root.dataset.mode === "alphanumeric" ? /[a-z0-9]/i : /\d/;
+    const accept = (text: string) => [...text].filter((char) => allowed.test(char));
+
+    function sync() {
+      const value = slots.map((slot) => slot.value).join("");
+      if (hidden) hidden.value = value;
+      root.dispatchEvent(new CustomEvent("input-otp:change", { bubbles: true, detail: { value } }));
+      if (slots.every((slot) => slot.value)) {
+        root.dispatchEvent(new CustomEvent("input-otp:complete", { bubbles: true, detail: { value } }));
+      }
+    }
+
+    // Writes characters into consecutive slots starting at `start`, then focuses the next empty one.
+    function fill(start: number, chars: string[]) {
+      let index = start;
+      for (const char of chars) {
+        const slot = slots[index];
+        if (!slot) break;
+        slot.value = char;
+        index++;
+      }
+      slots[Math.min(index, slots.length - 1)]?.focus();
+      sync();
+    }
+
+    slots.forEach((slot, index) => {
+      slot.addEventListener("focus", () => slot.select());
+
+      let previousValue = slot.value;
+      slot.addEventListener("beforeinput", () => (previousValue = slot.value));
+
+      slot.addEventListener("input", (event) => {
+        const { data: typed, inputType } = event as InputEvent;
+        // Single keystroke: use only the typed character, so typing into a filled slot replaces it.
+        // Anything else (OS autofill, IME) carries the whole string in the value.
+        const chars = accept(typed && typed.length === 1 ? typed : slot.value);
+        if (chars.length) {
+          slot.value = "";
+          fill(index, chars);
+        } else {
+          // Rejected characters leave the slot as it was; deletions clear it.
+          slot.value = inputType.startsWith("insert") ? previousValue : "";
+          sync();
+        }
+      });
+
+      slot.addEventListener("paste", (event) => {
+        event.preventDefault();
+        const chars = accept(event.clipboardData?.getData("text") ?? "");
+        if (chars.length) fill(index, chars);
+      });
+
+      slot.addEventListener("keydown", (event) => {
+        const previous = slots[index - 1];
+        const next = slots[index + 1];
+        if (event.key === "Backspace" && !slot.value && previous) {
+          event.preventDefault();
+          previous.value = "";
+          previous.focus();
+          sync();
+        } else if (event.key === "ArrowLeft" && previous) {
+          event.preventDefault();
+          previous.focus();
+        } else if (event.key === "ArrowRight" && next) {
+          event.preventDefault();
+          next.focus();
+        }
+      });
+    });
+  }
+
+  document.querySelectorAll<HTMLElement>('[data-slot="input-otp"]').forEach(initInputOTP);
+</script>

package/src/components/input/index.ts

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

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

@@ -2,6 +2,13 @@
 
 All notable changes to the `InputGroup` component family (`InputGroup`, `InputGroupAddon`, `InputGroupButton`, `InputGroupInput`, `InputGroupText`, `InputGroupTextarea`) are documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C5)
+
+- An input directly after an `InputGroupAddon align="inline-start"` holding `InputGroupText` has no left padding, so a prefix such as `lightning.com/` runs straight into what's typed. Icon prefixes are unchanged. Needs the addon before the input in the markup.
+- Storybook: "Text prefix" preview.
+
+
 ## 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.

package/src/components/input-group/InputGroup.astro

@@ -99,6 +99,8 @@ const {
   data-slot="input-group"
   data-size={size}
   class={cn(
+    // A text prefix ("…lightning.com/"): the input starts right after it, with no left padding.
+    "[&>[data-align=inline-start]:has(>[data-slot=input-group-text])+[data-slot=input-group-control]]:pl-0!",
     "group/input-group border-input bg-card has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10 rounded-lg border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto! has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto! has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto!",
     className,
   )}

package/src/components/loading-overlay/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+All notable changes to the `LoadingOverlay` component (and its controller in `@cl-light-ds/ui/lib/loading-overlay`) are documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N14)
+
+New component, replacing the workspace-selection screen's hand-composed `OpeningOverlay.astro` and its `runOverlay` / `revealWorkspace` / `hideOverlay` code.
+
+### `LoadingOverlay`
+
+- The whole screen dimmed and blurred (`bg-foreground/60`, `backdrop-blur-sm`), a 48px `Spinner`, a 30px title (`font-heading text-3xl font-semibold`) and a status line (`text-base`, `background/80`) (D117, D120).
+- Props: `title`, `lines` (status lines), `interval` (ms between lines, default 900, D135), `loop` (cycle instead of stopping on the last line), `open` (render shown).
+- `behind` slot: content shown under the dimming, faded in with `setLoadingOverlayBehind(true)` or `showLoadingOverlay({ behind: true | ms })` (D135, D191). Generalises the screen's workspace iframe.
+- Reveal (D143): `revealLoadingOverlay()` fades the dimming (700ms) and the spinner and text (500ms) away, then hides; returns a Promise.
+- A11y: `aria-busy="true"` while running; the title and status line are a polite live region (`role="status"`); the spinner is hidden from assistive tech (the text says it). On show, focus moves to the overlay (off whatever it covers) and returns on hide.
+- `prefers-reduced-motion`: no fades on reveal or behind.
+
+### Controller (`@cl-light-ds/ui/lib/loading-overlay`)
+
+- `showLoadingOverlay`, `setLoadingOverlayBehind`, `revealLoadingOverlay`, `hideLoadingOverlay`, and the matching `loading-overlay:*` events on the element; fires `loading-overlay:change` (`{ open }`).
+
+### Storybook
+
+- "Loading Overlay" section: run it with changing lines and a reveal, with content behind, and pinned open in a frame.