@cl-light-ds/ui 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cl-light-ds/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "ClickLearn Lightning Design System — Astro UI component library.",
   "license": "MIT",
   "type": "module",
@@ -10,7 +10,7 @@
   "exports": {
     "./globals.css": "./src/styles/globals.css",
     "./lib/*": "./src/lib/*.ts",
-    "./components/*": "./src/components/*.ts"
+    "./components/*": "./src/components/*/index.ts"
   },
   "publishConfig": {
     "access": "public"
@@ -34,22 +34,24 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@data-slot/accordion": "^0.2.166",
-    "@data-slot/collapsible": "^0.2.166",
-    "@data-slot/combobox": "^0.2.166",
-    "@data-slot/dialog": "^0.2.166",
-    "@data-slot/dropdown-menu": "^0.2.166",
-    "@data-slot/hover-card": "^0.2.166",
-    "@data-slot/navigation-menu": "^0.2.166",
-    "@data-slot/popover": "^0.2.166",
-    "@data-slot/radio-group": "^0.2.166",
-    "@data-slot/select": "^0.2.166",
-    "@data-slot/slider": "^0.2.166",
-    "@data-slot/switch": "^0.2.166",
-    "@data-slot/tabs": "^0.2.166",
-    "@data-slot/toggle": "^0.2.166",
-    "@data-slot/toggle-group": "^0.2.166",
-    "@data-slot/tooltip": "^0.2.166",
+    "@data-slot/accordion": "^1.1.2",
+    "@data-slot/collapsible": "^1.1.2",
+    "@data-slot/combobox": "^1.1.2",
+    "@data-slot/command": "^1.1.2",
+    "@data-slot/dialog": "^1.1.2",
+    "@data-slot/dropdown-menu": "^1.1.2",
+    "@data-slot/hover-card": "^1.1.2",
+    "@data-slot/navigation-menu": "^1.1.2",
+    "@data-slot/popover": "^1.1.2",
+    "@data-slot/radio-group": "^1.1.2",
+    "@data-slot/select": "^1.1.2",
+    "@data-slot/slider": "^1.1.2",
+    "@data-slot/switch": "^1.1.2",
+    "@data-slot/tabs": "^1.1.2",
+    "@data-slot/toast": "^1.1.2",
+    "@data-slot/toggle": "^1.1.2",
+    "@data-slot/toggle-group": "^1.1.2",
+    "@data-slot/tooltip": "^1.1.2",
     "@lucide/astro": "^1.14.0",
     "bejamas": "^0.4.1",
     "class-variance-authority": "^0.7.1",

package/src/components/alert/Alert.astro

@@ -24,6 +24,10 @@
  *   <Alert variant="success" icon={CircleCheckIcon}>
  *     <AlertTitle>Payment successful.</AlertTitle>
  *   </Alert>
+ *
+ *   <Alert variant="warning" icon={TriangleAlertIcon}>
+ *     <AlertTitle>Linked recordings won't be included.</AlertTitle>
+ *   </Alert>
  * </div>
  *
  * @usage
@@ -45,7 +49,7 @@ import type { AstroComponent } from "@lucide/astro";
 import { cn } from "@cl-light-ds/ui/lib/utils";
 import type { HTMLAttributes } from "astro/types";
 
-type AlertVariant = "default" | "destructive" | "success";
+type AlertVariant = "default" | "destructive" | "success" | "warning";
 type AlertSize = "default" | "large";
 
 interface Props extends HTMLAttributes<"div"> {
@@ -77,6 +81,7 @@ const alertVariants = cva(
         default: "bg-popover",
         destructive: "bg-card",
         success: "bg-card",
+        warning: "bg-callout-warning border-warning/40",
       },
       size: {
         default: "items-center gap-2 p-2",
@@ -98,6 +103,7 @@ const iconVariants = cva(
         default: "bg-muted text-foreground",
         destructive: "bg-destructive text-destructive-foreground",
         success: "bg-success text-success-foreground",
+        warning: "bg-warning text-warning-foreground",
       },
     },
     defaultVariants: {
@@ -157,7 +163,7 @@ const contentVariants = cva("flex flex-1 text-sm", {
       <button
         type="button"
         data-slot="alert-dismiss"
-        class="flex shrink-0 items-center justify-center gap-0.5 rounded-lg bg-background p-2 [&>svg]:size-4"
+        class="flex shrink-0 items-center justify-center gap-0.5 rounded-lg bg-background p-2 group-data-[variant=warning]/alert:bg-transparent [&>svg]:size-4"
       >
         <XIcon />
         <span class="sr-only">Dismiss</span>

package/src/components/alert/CHANGELOG.md

@@ -2,4 +2,13 @@
 
 All notable changes to the `Alert` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (N19, gap G13)
+
+### Variants
+
+- Added a `warning` variant (`variant: "default" | "destructive" | "success" | "warning"`). Background `bg-callout-warning` (`--callout-background-warning`, Figma Yellow/50), border `warning` at 40%, icon in a solid `warning` circle with `warning-foreground`. Replaces the workspace-selection screen's hand-styled `Alert` (`bg-badge-warning/10 border-badge-warning/40`).
+- The dismiss button is transparent on `warning`, so no white square shows on the yellow background.
+
+
 ## Unreleased

package/src/components/button/Button.astro

@@ -95,6 +95,10 @@
  *   <Badge slot="badge" variant="secondary" shape="sharp" size="sm">Value</Badge>
  * </Button>
  *
+ * ### Loading
+ *
+ * <Button variant="destructive" loading loadingText="Deleting…">Delete workspace</Button>
+ *
  * ### Destructive
  *
  * <Button variant="destructive">Click me</Button>
@@ -125,6 +129,7 @@ import type { HTMLAttributes } from "astro/types";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Spinner } from "../spinner";
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:border-transparent disabled:bg-muted disabled:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
@@ -143,6 +148,7 @@ const buttonVariants = cva(
         sm: "h-8 gap-1 px-2 text-xs [&_svg]:size-3.5",
         lg: "h-10 gap-1 px-2.5 text-sm [&_svg]:size-5",
         icon: "size-9 [&_svg]:size-4",
+        "icon-xs": "size-6 [&_svg]:size-3.5",
         "icon-sm": "size-8 [&_svg]:size-3.5",
         "icon-lg": "size-10 [&_svg]:size-5",
       },
@@ -168,6 +174,15 @@ type ButtonOwnProps = ButtonVariantProps & {
   leadIcon?: boolean;
   tailIcon?: boolean;
   badge?: boolean;
+  /**
+   * Busy: disabled, with a spinner and `loadingText` in the label's place. The
+   * label and the loading content share one grid cell, so the width holds.
+   * Passing `loading` (true or false) renders that structure; a script can then
+   * switch it with `data-loading="true"` plus `disabled`.
+   */
+  loading?: boolean;
+  /** Text beside the spinner while loading, e.g. "Deleting…". Spinner only when omitted. */
+  loadingText?: string;
 };
 
 export type Props = (ButtonAsButton | ButtonAsAnchor) & ButtonOwnProps;
@@ -183,9 +198,21 @@ const {
   leadIcon = hasLeadIconSlot,
   tailIcon = hasTailIconSlot,
   badge = hasBadgeSlot,
+  loading,
+  loadingText,
   class: className = "",
   ...rest
 } = Astro.props as Props;
+
+// Loading (N21): only buttons given `loading` or `loadingText` get the stacked label.
+const hasLoading = loading !== undefined || loadingText !== undefined;
+const loadingAttrs = hasLoading
+  ? {
+      "data-loading": loading ? "true" : "false",
+      "aria-busy": loading ? "true" : undefined,
+      ...(loading ? (Tag === "a" ? { "aria-disabled": "true" } : { disabled: true }) : {}),
+    }
+  : {};
 ---
 
 {
@@ -202,32 +229,64 @@ const {
   data-variant={variant}
   data-size={size}
   class={cn(
-    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 in-data-[slot=button-group]:hover:bg-background-hover in-data-[slot=button-group]:hover:border-badge-accent aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding font-semibold aria-invalid:ring-3 ease-out duration-150 active:scale-98",
+    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding font-semibold aria-invalid:ring-3 ease-out duration-150 active:scale-98",
     buttonVariants({ variant, size }),
     className,
   )}
   {...rest}
+  {...loadingAttrs}
 >
   {
-    leadIcon && (
-      <span data-slot="button-lead-icon" class="inline-flex shrink-0 items-center">
-        <slot name="lead-icon" />
-      </span>
-    )
-  }
-  <slot />
-  {
-    badge && (
-      <span data-slot="button-badge" class="inline-flex shrink-0 items-center">
-        <slot name="badge" />
-      </span>
-    )
-  }
-  {
-    tailIcon && (
-      <span data-slot="button-tail-icon" class="inline-flex shrink-0 items-center">
-        <slot name="tail-icon" />
+    hasLoading ? (
+      <span data-slot="button-loading-stack" class="grid">
+        <span
+          data-slot="button-content"
+          class="col-start-1 row-start-1 inline-flex items-center justify-center gap-1 group-data-[loading=true]/button:invisible"
+        >
+          {leadIcon && (
+            <span data-slot="button-lead-icon" class="inline-flex shrink-0 items-center">
+              <slot name="lead-icon" />
+            </span>
+          )}
+          <slot />
+          {badge && (
+            <span data-slot="button-badge" class="inline-flex shrink-0 items-center">
+              <slot name="badge" />
+            </span>
+          )}
+          {tailIcon && (
+            <span data-slot="button-tail-icon" class="inline-flex shrink-0 items-center">
+              <slot name="tail-icon" />
+            </span>
+          )}
+        </span>
+        <span
+          data-slot="button-loading"
+          class="invisible col-start-1 row-start-1 inline-flex items-center justify-center gap-2 group-data-[loading=true]/button:visible"
+        >
+          <Spinner aria-hidden="true" role="presentation" />
+          {loadingText}
+        </span>
       </span>
+    ) : (
+      <>
+        {leadIcon && (
+          <span data-slot="button-lead-icon" class="inline-flex shrink-0 items-center">
+            <slot name="lead-icon" />
+          </span>
+        )}
+        <slot />
+        {badge && (
+          <span data-slot="button-badge" class="inline-flex shrink-0 items-center">
+            <slot name="badge" />
+          </span>
+        )}
+        {tailIcon && (
+          <span data-slot="button-tail-icon" class="inline-flex shrink-0 items-center">
+            <slot name="tail-icon" />
+          </span>
+        )}
+      </>
     )
   }
 </Tag>

package/src/components/button/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to the `Button` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (N21)
+
+### Props
+
+- Added `loading` and `loadingText`. While loading the button is disabled (`aria-disabled` on `as="a"`), `aria-busy="true"` and `data-loading="true"`, and shows a `Spinner` with `loadingText` in place of the label. The label and the loading content are stacked in one grid cell (the label goes `invisible`), so the button keeps its width (D178). Without `loadingText` only the spinner shows.
+- Only buttons given `loading` (true or false) or `loadingText` get the extra markup (`button-loading-stack` > `button-content` + `button-loading`); every other button renders exactly as before. A script can switch a `loading={false}` button with `data-loading="true"` plus `disabled`.
+- Storybook: "Loading" preview, with a scripted example.
+
+## Date 15th Oct 2026
+## Workspace selection handover (C2, C3, C25)
+
+### Sizes
+
+- Added `icon-xs` (24px, 14px icon) for small icon buttons such as a notification's dismiss ✕. Was `icon-sm` resized with `size-6`.
+
+### States: inside a `ButtonGroup` (gap G9)
+
+- **Removed** the group-wide hover override (`in-data-[slot=button-group]:hover:bg-background-hover hover:border-badge-accent`). Every variant now keeps its own hover inside a group: a primary button hovers `primary/80` (it turned grey), an outline button keeps its `border` (it turned light blue, unlike the same button outside a group).
+- **Figma:** this reverses the grouped Hover state from the 8th Sep alignment (`bg-background-hover` + `accent` border, master symbols node `114:11217`). Agreed with the designer (D71, D152); Figma's Button Group states will be updated to match.
+
+
 ## Date 8th Sep 2026
 ## Figma alignment (node 114-6897, prop table 7185-13418) 
 

package/src/components/button-group/ButtonGroup.astro

@@ -102,14 +102,25 @@ const {
 } = Astro.props as Props;
 
 export const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  [
+    "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10",
+    // A primary button beside a separator: a light blue separator, and no transparent end border
+    // (it isn't painted, so the page showed through as a white strip).
+    "[&>[data-slot=button][data-variant=default]+[data-slot=button-group-separator]]:bg-chart-2",
+    // A field joined to a button (search + Search): while the field has focus, one ring goes round
+    // both. The field's own ring is off and the button's border takes the ring colour.
+    "has-[>[data-slot=input-group]_[data-slot=input-group-control]:focus-visible]:rounded-lg has-[>[data-slot=input-group]_[data-slot=input-group-control]:focus-visible]:ring-3 has-[>[data-slot=input-group]_[data-slot=input-group-control]:focus-visible]:ring-ring/50 transition-shadow",
+    "[&>[data-slot=input-group]]:has-[[data-slot=input-group-control]:focus-visible]:ring-0",
+    "has-[>[data-slot=input-group]_[data-slot=input-group-control]:focus-visible]:[&>[data-slot=button]]:border-ring",
+    "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  ],
   {
     variants: {
       orientation: {
         horizontal:
-          "*:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]_[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-s-none",
+          "[&>[data-slot]:has(+[data-slot=button-group-separator])]:border-e-0 *:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]_[data-slot]]:border-s-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-s-none",
         vertical:
-          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]_[data-slot]]:border-t-0",
+          "flex-col [&>[data-slot]:has(+[data-slot=button-group-separator])]:border-b-0 *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]~[data-slot]_[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]_[data-slot]]:border-t-0",
       },
     },
     defaultVariants: {

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

@@ -2,6 +2,23 @@
 
 All notable changes to the `ButtonGroup` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C2, C4)
+
+### Split button (C2)
+
+- A button followed by a `ButtonGroupSeparator` has no end border (no bottom border when vertical). Its transparent border isn't painted (`bg-clip-padding`), so the page showed through as a white strip beside the separator.
+- A separator right after a primary (`variant="default"`) button is `chart-2` (light blue) instead of `input` grey.
+
+### Field joined to a button (C4)
+
+- When a `ButtonGroup` holds an `InputGroup` and its field has keyboard focus, one ring (`ring-3 ring-ring/50`) goes round the whole group: the field's own ring is off and the buttons' border turns `ring`. Tab on to the button and it shows its own ring alone.
+
+### Storybook
+
+- Added "Split button" and "Field joined to a button" previews.
+
+
 ## Date 8th Sep 2026
 ## Figma alignment (node 114-9882)
 

package/src/components/callout/CHANGELOG.md

@@ -0,0 +1,32 @@
+# Changelog
+
+All notable changes to the `Callout` component will be documented in this file.
+
+## 2026-10-06 — Initial implementation (ClickLearn Lightning Design Library, node `7650-5947`)
+
+Figma documents Callout as a single component set (`7656:12714`) with one property, `Type = Default | Info | Warning | Danger`.
+
+### Added
+
+- `Callout`, `CalloutTitle`, `CalloutDescription`.
+- `variant: "default" | "info" | "warning" | "danger"` — maps 1:1 to Figma's `Type` (Figma's "Danger" kept as `danger`, its background token is `callout-background-error`).
+- Default icon per variant, rendered in a 30px bordered white box, matching Figma: `Lightbulb` (foreground), `Info` (primary), `CircleAlert` (warning), `ShieldAlert` (destructive). Override with `icon={…}` or hide with `icon={false}`.
+- `actions` named slot — right-aligned row under the copy. Figma's actions are small buttons, so pass `<Button size="sm">` (use `variant="destructive"` for the Danger primary action, as in Figma).
+- `dismissible` (default `true`, Figma always shows the X). Visual only, same as `Alert`.
+- `role="note"` — callouts are static, in-flow content, unlike `Alert`'s `role="alert"`.
+
+### New tokens (`globals.css`)
+
+| Token | Light | Dark | Figma variable |
+|---|---|---|---|
+| `--warning` / `bg-warning`, `text-warning` | `#eab308` | — | `badge-warning-backgground` |
+| `--warning-foreground` | white | — | — |
+| `--callout-background-info` / `bg-callout-info` | `var(--primary-50)` (`#ebf3fc`) | primary-500 15% on background | `callout-background-info` |
+| `--callout-background-warning` / `bg-callout-warning` | `#fefce8` | `#eab308` 12% on background | `callout-background-warning` |
+| `--callout-background-error` / `bg-callout-error` | `#fef2f2` | red-600 15% on background | `callout-background-error` |
+
+### Notes
+
+- Default variant uses `bg-popover` + `border-border`; tinted variants use a transparent border so all four keep identical dimensions.
+- Radius is `rounded-md` (6px) and padding `p-3` per Figma's `radius/rounded-md` and `padding/p-3`.
+- Dark values are not defined in Figma; they are tinted mixes chosen to keep contrast with `foreground`.

package/src/components/callout/Callout.astro

@@ -0,0 +1,147 @@
+---
+/**
+ * @component Callout
+ * @title Callout
+ * @description An inline, in-flow message that highlights a tip, update, warning or problem, with optional actions.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7650-5947
+ * @status stable
+ * @since 0.4.0
+ *
+ * @preview
+ *
+ * <Callout variant="info" class="max-w-md">
+ *   <CalloutTitle>Bookmark your organisation link</CalloutTitle>
+ *   <CalloutDescription>Save your organisation URL to sign in directly next time.</CalloutDescription>
+ *   <Fragment slot="actions">
+ *     <Button size="sm">View updates</Button>
+ *     <Button size="sm" variant="outline">Not now</Button>
+ *   </Fragment>
+ * </Callout>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Callout, CalloutTitle, CalloutDescription } from '@cl-light-ds/ui/components/callout';
+ * import { Button } from '@cl-light-ds/ui/components/button';
+ * ---
+ * <Callout variant="warning">
+ *   <CalloutTitle>Your session is about to expire</CalloutTitle>
+ *   <CalloutDescription>Save your work or extend the session.</CalloutDescription>
+ *   <Fragment slot="actions">
+ *     <Button size="sm">Extend session</Button>
+ *     <Button size="sm" variant="outline">Save work</Button>
+ *   </Fragment>
+ * </Callout>
+ * ```
+ */
+import { cva } from "class-variance-authority";
+import { CircleAlert, Info, Lightbulb, ShieldAlert, X as XIcon } from "@lucide/astro";
+import type { AstroComponent } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type CalloutVariant = "default" | "info" | "warning" | "danger";
+
+interface Props extends HTMLAttributes<"div"> {
+  variant?: CalloutVariant;
+  /** Icon component; defaults to the variant's icon. Pass `false` to hide it. */
+  icon?: AstroComponent | false;
+  dismissible?: boolean;
+  class?: string;
+}
+
+const defaultIcons: Record<CalloutVariant, AstroComponent> = {
+  default: Lightbulb,
+  info: Info,
+  warning: CircleAlert,
+  danger: ShieldAlert,
+};
+
+const {
+  class: className = "",
+  variant = "default",
+  icon,
+  dismissible = true,
+  ...rest
+} = Astro.props as Props;
+
+const Icon = icon === false ? undefined : (icon ?? defaultIcons[variant]);
+const hasActions = Astro.slots.has("actions");
+
+const calloutVariants = cva(
+  "group/callout relative flex w-full items-start gap-2 rounded-md border p-3",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-popover",
+        info: "border-transparent bg-callout-info",
+        warning: "border-transparent bg-callout-warning",
+        danger: "border-transparent bg-callout-error",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const iconVariants = cva(
+  "flex size-7.5 shrink-0 items-center justify-center rounded-lg border border-border bg-background [&>svg]:size-[15px]",
+  {
+    variants: {
+      variant: {
+        default: "text-foreground",
+        info: "text-primary",
+        warning: "text-warning",
+        danger: "text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+---
+
+<div
+  {...rest}
+  data-slot="callout"
+  data-variant={variant}
+  role="note"
+  class={cn(calloutVariants({ variant }), className)}
+>
+  <div data-slot="callout-message" class="flex min-w-0 flex-1 items-start gap-3">
+    {
+      Icon && (
+        <div data-slot="callout-icon" class={iconVariants({ variant })}>
+          <Icon aria-hidden="true" />
+        </div>
+      )
+    }
+    <div data-slot="callout-content" class="flex min-w-0 flex-1 flex-col gap-3 pt-0.5">
+      <div class="flex flex-col gap-1">
+        <slot />
+      </div>
+      {
+        hasActions && (
+          <div data-slot="callout-actions" class="flex w-full items-center justify-end gap-2">
+            <slot name="actions" />
+          </div>
+        )
+      }
+    </div>
+  </div>
+  {
+    dismissible && (
+      <button
+        type="button"
+        data-slot="callout-dismiss"
+        class="flex shrink-0 items-center justify-center rounded-lg p-2 text-muted-foreground [&>svg]:size-4"
+      >
+        <XIcon aria-hidden="true" />
+        <span class="sr-only">Dismiss</span>
+      </button>
+    )
+  }
+</div>

package/src/components/callout/CalloutDescription.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="callout-description"
+  class={cn("text-sm leading-5 text-muted-foreground", className)}
+>
+  <slot />
+</div>

package/src/components/callout/CalloutTitle.astro

@@ -0,0 +1,16 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="callout-title"
+  class={cn("text-sm leading-5 font-semibold text-foreground", className)}
+>
+  <slot />
+</div>

package/src/components/callout/index.ts

@@ -0,0 +1,3 @@
+export { default as Callout } from "./Callout.astro";
+export { default as CalloutTitle } from "./CalloutTitle.astro";
+export { default as CalloutDescription } from "./CalloutDescription.astro";

package/src/components/card/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to the `Card` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C14)
+
+### Added
+
+- `interactive` prop (default `false`): for cards that open something, the card lifts 4px (`-translate-y-1`) with `shadow-lg` on hover and on keyboard focus, on the card itself (`as="a"`) or inside it (`has-focus-visible`, for a stretched link with other controls beside it). Only keyboard focus lifts it, so a mouse click on a control in the card doesn't leave it raised. No lift with `prefers-reduced-motion` (the shadow still changes). Sets `data-interactive`.
+- Opt-in rather than always on: most cards are static, and lifting them would suggest they can be clicked.
+- Storybook: an "Interactive" preview.
+
 ## Date 9th Sep 2026
 ## Figma alignment (node 54-1310, prop table 7350-1279)
 

package/src/components/card/Card.astro

@@ -102,6 +102,16 @@
  * Pass `as="a"` (with `href`) to render the whole card as a real, natively focusable anchor — this is how to make Figma's Focus state reachable via keyboard, since a plain `<div>` can't receive `:focus-visible`.
  *
  * <Card as="a" href="#">...</Card>
+ *
+ * ### Interactive (hover lift)
+ *
+ * `interactive` is for cards that open something (the whole card is a link,
+ * either `as="a"` or a stretched link inside it): the card lifts 4px with a
+ * larger shadow on hover and while it, or anything in it, has keyboard focus.
+ * No lift with reduced motion (the shadow still changes). Off by default, so
+ * static cards don't suggest they can be clicked.
+ *
+ * <Card as="a" href="/workspace" interactive>...</Card>
  */
 
 import { cva } from "class-variance-authority";
@@ -124,6 +134,8 @@ type CardOwnProps = {
   variant?: CardVariant;
   size?: CardSize;
   orientation?: CardOrientation;
+  /** Lift 4px with a larger shadow on hover and keyboard focus, for cards that open something. */
+  interactive?: boolean;
 };
 
 export type Props = (CardAsDiv | CardAsAnchor) & CardOwnProps;
@@ -134,9 +146,17 @@ const {
   variant = "default",
   size = "default",
   orientation = "vertical",
+  interactive = false,
   ...rest
 } = Astro.props as Props;
 
+/**
+ * C14 — the hover lift. Keyboard focus only (`focus-visible`, on the card or
+ * inside it): a mouse click on a control in the card doesn't keep it lifted.
+ */
+const interactiveClasses =
+  "transition-[translate,box-shadow] duration-200 hover:shadow-lg focus-visible:shadow-lg has-focus-visible:shadow-lg motion-safe:hover:-translate-y-1 motion-safe:focus-visible:-translate-y-1 motion-safe:has-focus-visible:-translate-y-1";
+
 const cardVariants = cva(
   "group/card relative flex overflow-clip rounded-lg text-sm text-card-foreground outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-chart-1",
   {
@@ -185,11 +205,13 @@ const cardVariants = cva(
   data-variant={variant}
   data-size={size}
   data-orientation={orientation}
+  data-interactive={interactive ? "" : undefined}
   class={cn(
     cardVariants({ variant, size, orientation }),
     "*:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
     variant === "overlay" &&
       "[&_[data-slot=card-media]]:absolute [&_[data-slot=card-media]]:inset-0 [&_[data-slot=card-media]]:z-0 [&_[data-slot=card-media]]:rounded-lg [&_[data-slot=card-media]]:p-0 [&_[data-slot=card-media]_img]:rounded-lg",
+    interactive && interactiveClasses,
     className,
   )}
 >