@cl-light-ds/ui 0.4.0 → 0.6.0

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

@@ -0,0 +1,52 @@
+---
+/**
+ * Illustration "all-caught-up" (144×104, 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-all-caught-up-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="144"
+  height="104"
+  viewBox="-12 -12 144 104"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+  {...props}
+>
+  <defs>
+    <filter id={`${uid}-sBack`} x="-30%" y="-40%" width="160%" height="190%" 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="-40%" width="180%" height="190%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#051729" flood-opacity="0.10"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sCheck`} x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-opacity="0.32" style="flood-color:var(--primary)"></feDropShadow>
+    </filter>
+  </defs>
+  <circle cx="60" cy="40" r="35" stroke-width="10" style="stroke:color-mix(in oklab, var(--primary-50) 50%, var(--background))"></circle>
+  <circle cx="60" cy="40" r="19" stroke-width="8" style="stroke:var(--primary-50)"></circle>
+  <g filter={`url(#${uid}-sBack)`}><rect x="22" y="12" width="76" height="18" rx="6" style="fill:var(--background)"></rect></g>
+  <rect x="22.5" y="12.5" width="75" height="17" rx="5.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  <circle cx="31" cy="21" r="4" style="fill:var(--muted)"></circle>
+  <rect x="39" y="19" width="30" height="4" rx="2" style="fill:var(--muted)"></rect>
+  <g filter={`url(#${uid}-sFront)`}><rect x="16" y="34" width="88" height="24" rx="7" style="fill:var(--background)"></rect></g>
+  <rect x="16.5" y="34.5" width="87" height="23" rx="6.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  <circle cx="28" cy="46" r="6" style="fill:var(--primary-50)"></circle>
+  <path d="M25.5 45.5 a2.5 2.5 0 0 1 5 0 c0 2.2 1 3 1 3 h-7 s1 -0.8 1 -3 Z M27.2 50.2 a1 1 0 0 0 1.6 0" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" style="stroke:var(--primary)"></path>
+  <rect x="39" y="41" width="40" height="4" rx="2" style="fill:var(--border)"></rect>
+  <rect x="39" y="48.5" width="26" height="3.5" rx="1.75" style="fill:var(--muted)"></rect>
+  <g filter={`url(#${uid}-sCheck)`}><circle cx="100" cy="58" r="11" style="fill:var(--primary)"></circle></g>
+  <circle cx="100" cy="58" r="11" stroke-width="2.5" style="stroke:var(--background)"></circle>
+  <path d="M95.5 58.2 l3 3 l6 -6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="stroke:var(--background)"></path>
+</svg>

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

@@ -0,0 +1,56 @@
+---
+/**
+ * Illustration "empty-workspaces" (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-empty-workspaces-${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}-sBlue`} x="-60%" y="-60%" width="220%" height="240%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="4" stdDeviation="5" flood-opacity="0.35" 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" y="66" width="28" height="28" rx="8" filter={`url(#${uid}-sBlue)`} style="fill:var(--primary)"></rect>
+  <rect x="77" y="74" width="2" height="12" rx="1" style="fill:var(--background)"></rect>
+  <rect x="72" y="79" width="12" height="2" rx="1" style="fill:var(--background)"></rect>
+  <rect x="64" y="106" width="76" height="7" rx="3.5" style="fill:var(--primary-100)"></rect>
+  <rect x="64" y="119" width="48" height="7" rx="3.5" style="fill:var(--muted)"></rect>
+</svg>

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

@@ -0,0 +1,61 @@
+---
+/**
+ * Illustration "load-error" (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-load-error-${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}-sBadge`} x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="4" stdDeviation="5" flood-opacity="0.28" style="flood-color:var(--destructive)"></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" y="66" width="28" height="28" rx="8" style="fill:var(--muted)"></rect>
+  <path d="M71 80 h3 l2.5 -5 l4 10 l2.5 -5 h3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke:var(--color-zinc-400, #a1a1aa)"></path>
+  <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}-sBadge)`}>
+    <circle cx="180" cy="62" r="20" style="fill:var(--destructive)"></circle>
+  </g>
+  <circle cx="180" cy="62" r="20" stroke-width="4" style="stroke:var(--background)"></circle>
+  <rect x="178" y="51" width="4" height="14" rx="2" style="fill:var(--background)"></rect>
+  <circle cx="180" cy="71.5" r="2.4" style="fill:var(--background)"></circle>
+</svg>

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/field/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to the `Field` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C21)
+
+### Added
+
+- `leading` prop on `FieldError` (`"default" | "compact"`, default `"default"`), sets `data-leading`. `"compact"` sets a 16px line height (`leading-4`) instead of `text-sm`'s 20px, so a one-line message under a control leaves as much space below it as the gap between fields (D147: 26px against 27px, instead of 28px against 25px). Replaces the workspace-selection screen's `class="leading-4"`.
+- Opt-in, not a default fix: the 20px line is `text-sm`'s own and matches Figma's `text/md` style (14/20) used across the form text, so it isn't a bug; the tighter line is for evening out the space in a compact form.
+- Storybook: a "Compact error line height" preview.
+
+## Date 15th Oct 2026
+## Workspace selection handover (C20)
+
+### Added
+
+- `spacing` prop on `FieldGroup` (`"default" | "compact"`, default `"default"`), sets `data-spacing`. `"compact"` puts 20px between the fields (`gap-5`) instead of 28px (`gap-7`), for a form that sits tighter, e.g. the New workspace dialog (D140). Nested field groups (`gap-4`) and checkbox groups (`gap-3`) keep their own gaps. Replaces the workspace-selection screen's `class="gap-5"`.
+- Opt-in: field groups without `spacing` keep 28px.
+- Storybook: a "Compact field group" preview.
+
 ## 2026-09-09 — Fixed control-to-label vertical alignment for native checkbox/radio
 
 ### Fixed

package/src/components/field/Field.astro

@@ -185,13 +185,22 @@
  *
  * | Prop | Type | Default |
  * |------|------|---------|
+ * | `spacing` | `"default" \| "compact"` | `"default"` |
  * | `class` | `string` | - |
  *
+ * `spacing="compact"` puts 20px between the fields instead of 28px, for a
+ * form that sits tighter (e.g. in a dialog).
+ *
  * ```astro nocollapse
  * <FieldGroup class="@container/field-group flex flex-col gap-6">
  *   <Field>...</Field>
  *   <Field>...</Field>
  * </FieldGroup>
+ *
+ * <FieldGroup spacing="compact">
+ *   <Field>...</Field>
+ *   <Field>...</Field>
+ * </FieldGroup>
  * ```
  *
  * ### Field
@@ -292,12 +301,21 @@
  * |------|------|---------|
  * | `errors` | `Array<{ message?: string } \| undefined>` | `[]` |
  * | `forceMount` | `boolean` | `false` |
+ * | `leading` | `"default" \| "compact"` | `"default"` |
  * | `class` | `string` | - |
  *
  * ```astro nocollapse
  * <FieldError errors={[{ message: "Username is required" }]} />
  * ```
  *
+ * `leading="compact"` sets a 16px line height (20px by default), so a one-line
+ * message under a control leaves as much space below it as the gap between
+ * fields:
+ *
+ * ```astro nocollapse
+ * <FieldError leading="compact">That address is taken.</FieldError>
+ * ```
+ *
  * When `errors` contains multiple unique messages, the component renders a list
  * automatically.
  *

package/src/components/field/FieldError.astro

@@ -7,12 +7,19 @@ type ErrorItem = { message?: string } | undefined;
 interface Props extends HTMLAttributes<"div"> {
   errors?: ErrorItem[];
   forceMount?: boolean;
+  /**
+   * Line height: `"default"` 20px (text-sm's own), `"compact"` 16px
+   * (`leading-4`), so a one-line message under a control leaves as much space
+   * below it as the gap between fields (C21, D147).
+   */
+  leading?: "default" | "compact";
 }
 
 const {
   class: className = "",
   errors = [],
   forceMount = false,
+  leading = "default",
   ...rest
 } = Astro.props as Props;
 
@@ -34,7 +41,12 @@ const shouldRender = forceMount || hasContent || uniqueMessages.length > 0;
     <div
       role="alert"
       data-slot="field-error"
-      class={cn("text-destructive text-sm font-normal", className)}
+      data-leading={leading}
+      class={cn(
+        "text-destructive text-sm font-normal",
+        leading === "compact" && "leading-4",
+        className,
+      )}
       {...rest}
     >
       {hasContent && <slot />}

package/src/components/field/FieldGroup.astro

@@ -2,15 +2,24 @@
 import type { HTMLAttributes } from "astro/types";
 import { cn } from "@cl-light-ds/ui/lib/utils";
 
-interface Props extends HTMLAttributes<"div"> {}
+interface Props extends HTMLAttributes<"div"> {
+  /**
+   * Space between the fields: `"default"` 28px (`gap-7`), `"compact"` 20px
+   * (`gap-5`), for a form that sits tighter, e.g. in a dialog (C20, D140).
+   * Nested field groups and checkbox groups keep their own gaps.
+   */
+  spacing?: "default" | "compact";
+}
 
-const { class: className = "", ...rest } = Astro.props as Props;
+const { spacing = "default", class: className = "", ...rest } = Astro.props as Props;
 ---
 
 <div
   data-slot="field-group"
+  data-spacing={spacing}
   class={cn(
-    "gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+    spacing === "compact" ? "gap-5" : "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,
   )}

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

@@ -2,6 +2,15 @@
 
 All notable changes to the `HoverCard` component family (`HoverCard`, `HoverCardTrigger`, `HoverCardContent`) are documented in this file.
 
+## Date 15th Oct 2026
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Docs
+
+- `HoverCardTrigger` already renders `type="button"` unless you pass a `type`; no change.
+- **`asChild`:** the wrapper is a `<div>`, not a button, so it can't set a type. Inside a `<form>`, give your child `type="button"` (now in the prop's JSDoc).
+
+
 ## 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.

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

@@ -4,7 +4,11 @@ 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 */
+  /**
+   * Radix-like: render wrapper so the child can be the interactive element.
+   * The wrapper is not a button, so the child sets its own type: give a
+   * `<button>`/`<Button>` child `type="button"` inside a `<form>` or it submits it.
+   */
   asChild?: boolean;
 }
 

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.