@cl-light-ds/ui 0.4.0 → 0.6.0

package/src/components/tabs/Tabs.astro

@@ -101,6 +101,18 @@
  *   <TabsContent value="reports">Reports content.</TabsContent>
  * </Tabs>
  *
+ * ### Bordered
+ *
+ * `bordered` on `TabsList` adds a 1px `border`-token outline round the list,
+ * for a list on a light grey page beside bordered controls. Off by default.
+ *
+ * <Tabs defaultValue="all">
+ *   <TabsList bordered>
+ *     <TabsTrigger value="all">All</TabsTrigger>
+ *     <TabsTrigger value="favourites">Favourites</TabsTrigger>
+ *   </TabsList>
+ * </Tabs>
+ *
  * ### Vertical
  *
  * <Tabs defaultValue="profile" orientation="vertical" class="w-full max-w-xl">
@@ -303,4 +315,18 @@ const {
   document
     .querySelectorAll('[data-slot="tabs"]')
     .forEach((el) => createTabs(el));
+
+  // Along the list (left when horizontal, top when vertical) the runtime measures
+  // the active tab from inside the list's border, then subtracts the border width
+  // again, so on a list with a real border the indicator sits off by that width.
+  // Record the border widths; the indicator adds them back on that axis.
+  const syncBorders = (list: HTMLElement) => {
+    list.style.setProperty("--tabs-list-border-l", `${list.clientLeft}px`);
+    list.style.setProperty("--tabs-list-border-t", `${list.clientTop}px`);
+  };
+  const borders = new ResizeObserver((entries) => entries.forEach((e) => syncBorders(e.target as HTMLElement)));
+  document.querySelectorAll<HTMLElement>('[data-slot="tabs-list"]').forEach((list) => {
+    syncBorders(list);
+    borders.observe(list);
+  });
 </script>

package/src/components/tabs/TabsList.astro

@@ -1,4 +1,17 @@
 ---
+/**
+ * TabsList — the row (or column) of tab triggers.
+ *
+ * `bordered` (default `false`) adds a 1px `border`-token outline round the
+ * list, for a list sitting on a light grey page beside bordered controls
+ * (search field, buttons), where the muted fill alone blends in (C11, D104).
+ * The list keeps its height: the border sits inside it.
+ *
+ * Drawn as an inset ring with 1px more padding, not a CSS border: the
+ * runtime positions the indicator from `offsetLeft` and then subtracts the
+ * list's `clientLeft` (its border width) again, so a real border shifts the
+ * indicator 1px off its tab. Same geometry as `border` + the usual padding.
+ */
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@cl-light-ds/ui/lib/utils";
 import type { HTMLAttributes } from "astro/types";
@@ -14,27 +27,40 @@ export const tabsListVariants = cva(
         "line-animated":
           "rounded-none gap-1 bg-transparent p-0",
       },
+      bordered: {
+        true: "ring-1 ring-inset ring-border",
+        false: "",
+      },
       size: {
         default: "group-data-horizontal/tabs:h-9",
         sm: "group-data-horizontal/tabs:h-8",
         lg: "group-data-horizontal/tabs:h-10",
       },
     },
+    compoundVariants: [
+      // 1px more padding where the border would be (C11).
+      { bordered: true, variant: "indicator", class: "p-[3px]" },
+      { bordered: true, variant: "default", class: "p-[4px]" },
+    ],
     defaultVariants: {
       variant: "indicator",
       size: "default",
+      bordered: false,
     },
   },
 );
 
 interface Props
   extends VariantProps<typeof tabsListVariants>, HTMLAttributes<"div"> {
+  /** A 1px `border`-token outline round the list (C11). Off by default. */
+  bordered?: boolean;
   class?: string;
 }
 
 const {
   variant = "indicator",
   size = "default",
+  bordered = false,
   class: className = "",
   ...rest
 } = Astro.props as Props;
@@ -45,14 +71,15 @@ const {
   role="tablist"
   data-slot="tabs-list"
   data-variant={variant}
-  class={cn("", tabsListVariants({ variant, size }), className)}
+  data-bordered={bordered ? "" : undefined}
+  class={cn("", tabsListVariants({ variant, size, bordered }), className)}
 >
   {
     variant === "indicator" && (
       <div
         aria-hidden="true"
         data-slot="tabs-indicator"
-        class="gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) z-0 h-(--active-tab-height) w-(--active-tab-width) bg-background shadow-sm transition-all duration-150 ease dark:border-input dark:bg-input/30"
+        class="gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) group-data-[orientation=horizontal]/tabs:left-[calc(var(--active-tab-left)+var(--tabs-list-border-l,0px))] group-data-[orientation=vertical]/tabs:top-[calc(var(--active-tab-top)+var(--tabs-list-border-t,0px))] z-0 h-(--active-tab-height) w-(--active-tab-width) bg-background shadow-sm transition-all duration-150 ease dark:border-input dark:bg-input/30"
       />
     )
   }
@@ -61,7 +88,7 @@ const {
       <div
         aria-hidden="true"
         data-slot="tabs-indicator"
-        class="pointer-events-none absolute z-0 rounded-full bg-foreground transition-all duration-150 ease group-data-[orientation=horizontal]/tabs:left-[var(--active-tab-left)] group-data-[orientation=horizontal]/tabs:top-[calc(var(--active-tab-top)+var(--active-tab-height)-2px)] group-data-[orientation=horizontal]/tabs:h-0.5 group-data-[orientation=horizontal]/tabs:w-[var(--active-tab-width)] group-data-[orientation=vertical]/tabs:top-[var(--active-tab-top)] group-data-[orientation=vertical]/tabs:left-[calc(var(--active-tab-left)+var(--active-tab-width)-2px)] group-data-[orientation=vertical]/tabs:h-[var(--active-tab-height)] group-data-[orientation=vertical]/tabs:w-0.5"
+        class="pointer-events-none absolute z-0 rounded-full bg-foreground transition-all duration-150 ease group-data-[orientation=horizontal]/tabs:left-[calc(var(--active-tab-left)+var(--tabs-list-border-l,0px))] group-data-[orientation=horizontal]/tabs:top-[calc(var(--active-tab-top)+var(--active-tab-height)-2px)] group-data-[orientation=horizontal]/tabs:h-0.5 group-data-[orientation=horizontal]/tabs:w-[var(--active-tab-width)] group-data-[orientation=vertical]/tabs:top-[calc(var(--active-tab-top)+var(--tabs-list-border-t,0px))] group-data-[orientation=vertical]/tabs:left-[calc(var(--active-tab-left)+var(--active-tab-width)-2px)] group-data-[orientation=vertical]/tabs:h-[var(--active-tab-height)] group-data-[orientation=vertical]/tabs:w-0.5"
       />
     )
   }

package/src/components/toast/CHANGELOG.md

@@ -0,0 +1,32 @@
+# Changelog
+
+All notable changes to the `Toast` component family (`Toaster`, `Toast`, and the `toast()` API in `@cl-light-ds/ui/lib/toast`) are documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N9)
+
+New component, replacing the workspace-selection screen's hand-composed `Toast.astro`, the toast stack in `TopBar.astro` and `restackToasts` (gap G14).
+
+### `Toaster`
+
+- Built on `@data-slot/toast` (`createToast`): the runtime renders toasts from a `<template>`, keeps their order, sets `role`/`aria-live` per kind (error → `alert`, assertive; others → `status`, polite), pauses timers on hover and focus, unfurls on hover or focus within (`data-expanded`), supports swipe to dismiss and measures heights (`--toast-*` tokens).
+- Placement (D160): fixed under the top bar's right end. Props `top` (where the bar ends, default 41px), `offset` (gap, default 0.5rem), `right` (inset, default 1rem, 1.5rem from md). The right edge adds `var(--data-slot-scrollbar-width, 0px)` so the stack stays put while a dialog hides the page scrollbar.
+- Stacking (D161, D164, D167): the newest in front, two more peeking out 10px below, 5% smaller each and blank; a fourth and beyond hidden while stacked. Unfurled: a list 12px apart, each at its own height, with a softer shadow (`shadow-xs`). All moves take 300ms.
+- Clear all (D170–D172, C23): with two or more toasts, unfurling shows a link button above the list, flush under the bar (the gap closes), no hover background, underline only. Label via `clearAllLabel`.
+- Toasts stay until closed by default (`duration={0}`, D166); `limit` (default 5) caps how many are kept visible.
+- Entrance (D160): slides in 2rem from the right and fades; slides back out on close.
+- Attention (D164, D175): once in (300ms), a ring ripples out three times (info blue, success green) or the card shakes 12px, seven swings (error). Only the newest toast. Skipped with `prefers-reduced-motion`, which also drops the slide (fade only).
+
+### `Toast`
+
+- Kinds `info` (blue `Info` icon), `success` (green `CircleCheck`), `error` (`callout-background-error` tint, `destructive/40` border, red `CircleX` icon and title, foreground text). Icon and ✕ at the top, outline action button centred on the right (D168, D169).
+- Usable on its own as a static toast (docs, previews).
+
+### `toast()` (`@cl-light-ds/ui/lib/toast`)
+
+- `toast({ kind, title, description, action: { label, onClick, href, download }, duration, id })` returns the id; `toast.update`, `toast.dismiss`, `toast.clear`. Wraps the runtime's inbound `toast:*` events; calls made before the Toaster is bound are queued.
+- `action.href` (+ `download`) opens or downloads a file: added on top of the runtime, whose action is a plain button.
+
+### Storybook
+
+- "Toast" section: static kinds, live buttons per kind, a stack of three, and Clear all.

package/src/components/toast/Toast.astro

@@ -0,0 +1,145 @@
+---
+/**
+ * @component Toast
+ * @title Toast
+ * @description One toast: an icon, a title and a line of text, an optional action and a ✕. `Toaster` uses it as the template for every toast it shows; on its own it renders a static toast (docs, screenshots).
+ *
+ * @preview
+ *
+ * <ol class="flex w-96 max-w-full list-none flex-col gap-3 p-0">
+ *   <Toast kind="info" title="Export started" description="We'll let you know when Acme Finance is ready." />
+ *   <Toast kind="success" title="Export ready" description="Acme Finance export.zip" action="Download" />
+ *   <Toast kind="error" title="Couldn't open workspace" description="Something went wrong opening Acme Finance." />
+ * </ol>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Toast } from '@cl-light-ds/ui/components/toast';
+ * ---
+ *
+ * <ol class="list-none p-0">
+ *   <Toast kind="success" title="Export ready" description="Acme.zip" action="Download" />
+ * </ol>
+ * ```
+ *
+ * Kinds: `info` (blue icon), `success` (green icon), `error` (light red tint,
+ * red border, red icon and title). The icon and the ✕ sit at the top; the
+ * action (an outline button) is centred on the right (D168, D169).
+ *
+ * Inside a `Toaster`, `@data-slot/toast` fills `toast-title`,
+ * `toast-description` and `toast-action`, and sets `data-type` (the kind),
+ * `data-front`, `data-expanded` and `data-state` on the item. Once a toast is
+ * in, the Toaster sets `data-attention="on"` for 2.4s: a ring ripples out
+ * three times (info, success) or the card shakes (error) (D164, D175).
+ */
+import { CircleCheck, CircleX, Info, X } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+import Button from "../button/Button.astro";
+
+interface Props extends HTMLAttributes<"li"> {
+  kind?: "info" | "success" | "error";
+  title?: string;
+  description?: string;
+  /** The action button's label; no action when left out. */
+  action?: string;
+  /** Accessible name of the ✕. */
+  closeLabel?: string;
+  class?: string;
+}
+
+const {
+  kind = "info",
+  title = "",
+  description = "",
+  action = "",
+  closeLabel = "Close",
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const error = kind === "error";
+---
+
+<li
+  data-slot="toast-item"
+  data-type={kind}
+  role={error ? "alert" : "status"}
+  aria-live={error ? "assertive" : "polite"}
+  aria-atomic="true"
+  class={cn("group/toast list-none", className)}
+  {...rest}
+>
+  {/* D164, D175 — the ripple: three rings in the kind's colour (not on errors). */}
+  <span
+    data-slot="toast-ripple"
+    aria-hidden="true"
+    class="ring-primary group-data-[type=success]/toast:ring-success pointer-events-none absolute inset-0 rounded-lg opacity-0 ring-2 group-data-[type=error]/toast:hidden group-data-[attention=on]/toast:animate-out group-data-[attention=on]/toast:fade-out group-data-[attention=on]/toast:zoom-out-105 group-data-[attention=on]/toast:fill-mode-forwards group-data-[attention=on]/toast:repeat-3 group-data-[attention=on]/toast:animation-duration-700 group-data-[attention=on]/toast:opacity-100 motion-reduce:hidden"
+  ></span>
+  <div
+    data-slot="toast-card"
+    class="bg-popover text-popover-foreground group-data-[type=error]/toast:bg-callout-error group-data-[type=error]/toast:border-destructive/40 relative h-full overflow-hidden rounded-lg border p-4 pe-10 shadow-md transition-shadow group-data-[expanded=true]/toast:shadow-xs group-data-[attention=on]/toast:group-data-[type=error]/toast:animate-in group-data-[attention=on]/toast:group-data-[type=error]/toast:slide-in-from-left-3 group-data-[attention=on]/toast:group-data-[type=error]/toast:direction-alternate group-data-[attention=on]/toast:group-data-[type=error]/toast:repeat-7 group-data-[attention=on]/toast:group-data-[type=error]/toast:animation-duration-75 motion-reduce:animate-none!"
+  >
+    <div data-slot="toast-body" class="flex items-start gap-3">
+      <Info
+        aria-hidden="true"
+        class="text-primary mt-0.5 size-5 shrink-0 group-data-[type=error]/toast:hidden group-data-[type=success]/toast:hidden"
+      />
+      <CircleCheck
+        aria-hidden="true"
+        class="text-success mt-0.5 hidden size-5 shrink-0 group-data-[type=success]/toast:block"
+      />
+      <CircleX
+        aria-hidden="true"
+        class="text-destructive mt-0.5 hidden size-5 shrink-0 group-data-[type=error]/toast:block"
+      />
+      <div class="flex min-w-0 flex-1 flex-col gap-1">
+        <p
+          data-slot="toast-title"
+          class="text-sm font-semibold group-data-[type=error]/toast:text-destructive"
+        >
+          {title}
+        </p>
+        <p
+          data-slot="toast-description"
+          class="text-muted-foreground text-sm group-data-[type=error]/toast:text-foreground"
+          hidden={!description}
+        >
+          {description}
+        </p>
+      </div>
+      <Button
+        data-slot="toast-action"
+        type="button"
+        size="sm"
+        variant="outline"
+        class="shrink-0 self-center"
+        hidden={!action}
+      >
+        {action}
+      </Button>
+    </div>
+    <Button
+      data-slot="toast-close"
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      aria-label={closeLabel}
+      class="group-data-[type=error]/toast:hover:bg-destructive/10 absolute top-2 right-2"
+    >
+      <X />
+    </Button>
+  </div>
+</li>
+
+<style is:global>
+  /* In a layer, so the Toaster's stack rules (more specific) take over inside it. */
+  @layer components {
+    [data-slot="toast-item"] {
+      position: relative;
+    }
+  }
+</style>

package/src/components/toast/Toaster.astro

@@ -0,0 +1,322 @@
+---
+/**
+ * @component Toaster
+ * @title Toaster
+ * @description The toast stack: a live region under the top bar's right end where toasts slide in from the right, stack (the newest in front, two peeking out below) and unfurl into a list with Clear all on hover or keyboard focus.
+ *
+ * @preview
+ *
+ * <Toaster />
+ * <Button variant="outline" data-demo-toast="success">Show a toast</Button>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Toaster } from '@cl-light-ds/ui/components/toast';
+ * ---
+ *
+ * <!-- once per page, e.g. in the layout -->
+ * <Toaster top="41px" />
+ *
+ * <script>
+ *   import { toast } from '@cl-light-ds/ui/lib/toast';
+ *
+ *   toast({ kind: 'success', title: 'Export ready', description: 'Acme Finance export.zip',
+ *           action: { label: 'Download', href: '/exports/acme.zip', download: true } });
+ * </script>
+ * ```
+ *
+ * @api
+ *
+ * ### JS (`@cl-light-ds/ui/lib/toast`)
+ *
+ * | Function | Description |
+ * |----------|-------------|
+ * | `toast({ kind, title, description, action, duration, id, closeLabel, toaster })` | Show a toast, returns its id |
+ * | `toast.update(id, patch)` | Change a showing toast |
+ * | `toast.dismiss(id)` | Close one |
+ * | `toast.clear()` | Close all |
+ *
+ * ### Events (on the `[data-slot="toast"]` root, from `@data-slot/toast`)
+ *
+ * Inbound: `toast:show` (`{ title, description, type, action, duration, id }`), `toast:update`, `toast:dismiss`, `toast:clear`.
+ * Outbound: `toast:change` (`{ id, action: "show" | "dismiss" }`), `toast:action` (`{ id, value }`), and `toaster:ready` once bound.
+ *
+ * ### Placement
+ *
+ * Fixed; `top` is where the top bar ends (default 41px, the top bar's height), `offset` the gap under it, `right` the inset from the
+ * window's right edge (plus `--data-slot-scrollbar-width` while a dialog hides the scrollbar). Unfurled with two or more toasts the
+ * gap closes so Clear all sits flush under the bar (D172).
+ */
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+import Button from "../button/Button.astro";
+import Toast from "./Toast.astro";
+
+interface Props extends HTMLAttributes<"ol"> {
+  /** Where the bar above ends (CSS length). Default 41px. */
+  top?: string;
+  /** Gap between the bar and the stack (CSS length). Default 0.5rem. */
+  offset?: string;
+  /** Inset from the window's right edge (CSS length). Default 1rem, 1.5rem from md. */
+  right?: string;
+  /** ms before a toast closes by itself; 0 = stays until closed (D166). */
+  duration?: number;
+  /** Toasts kept visible at once; older ones wait, hidden, until others close. */
+  limit?: number;
+  /** Accessible name of the region. */
+  label?: string;
+  clearAllLabel?: string;
+  closeLabel?: string;
+  /** Root id, to target this Toaster from `toast({ toaster })`. */
+  id?: string;
+  class?: string;
+}
+
+const {
+  top,
+  offset,
+  right,
+  duration = 0,
+  limit = 5,
+  label = "Notifications",
+  clearAllLabel = "Clear all",
+  closeLabel = "Close",
+  id,
+  class: className = "",
+  style,
+  ...rest
+} = Astro.props as Props;
+
+const vars = [
+  top && `--toaster-top: ${top}`,
+  offset && `--toaster-offset: ${offset}`,
+  right && `--toaster-right: ${right}`,
+]
+  .filter(Boolean)
+  .join("; ");
+---
+
+<div
+  data-slot="toast"
+  data-position="top-right"
+  data-duration={duration}
+  data-limit={limit}
+  id={id}
+  class="contents"
+>
+  <template data-slot="toast-template">
+    <Toast closeLabel={closeLabel} />
+  </template>
+  <ol
+    data-slot="toast-viewport"
+    role="region"
+    aria-label={label}
+    class={cn("group/toaster", className)}
+    style={[vars, style].filter(Boolean).join("; ") || undefined}
+    {...rest}
+  >
+    {/* D171, D172, C23 — above the unfurled list: a link button, no hover background, only the underline. */}
+    <li data-slot="toaster-clear-all">
+      <Button
+        type="button"
+        variant="link"
+        size="sm"
+        class="bg-background hover:bg-background rounded-none px-2"
+        data-toaster-clear
+      >
+        {clearAllLabel}
+      </Button>
+    </li>
+  </ol>
+</div>
+
+<style is:global>
+  /*
+   * Stack geometry on top of @data-slot/toast's tokens (--toast-index,
+   * --toast-offset, --toast-initial-height, --toast-front-height,
+   * --toast-count, --toast-expanded-stack-size). D161, D164, D167: the newest
+   * in front, two more peeking out 10px below it, 5% smaller each and blank;
+   * unfurled, one under the other 12px apart at their own heights; 300ms.
+   */
+  @layer components {
+    [data-slot="toast-viewport"] {
+      --toast-gap: 12px;
+      --toast-collapsed-peek: 10px;
+      --toaster-slide: 2rem;
+      --toaster-band: 0px;
+      --toaster-lift: 0px;
+      position: fixed;
+      z-index: 50;
+      top: calc(
+        var(--toaster-top, 41px) + var(--toaster-offset, 0.5rem) -
+          var(--toaster-lift)
+      );
+      right: calc(
+        var(--toaster-right, 1rem) + var(--data-slot-scrollbar-width, 0px)
+      );
+      width: min(24rem, calc(100vw - 2 * var(--toaster-right, 1rem)));
+      height: calc(
+        var(--toast-front-height, 0px) +
+          min(var(--toast-count, 0) - 1, 2) * var(--toast-collapsed-peek)
+      );
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      transition:
+        top 300ms ease-out,
+        height 300ms ease-out;
+    }
+    @media (min-width: 48rem) {
+      [data-slot="toast-viewport"] {
+        --toaster-right: 1.5rem;
+      }
+    }
+    [data-slot="toast-viewport"][data-expanded] {
+      height: calc(
+        var(--toast-expanded-stack-size, 0px) + var(--toaster-band)
+      );
+    }
+    /* D170–D172 — two or more, unfurled: room for Clear all, flush under the bar. */
+    [data-slot="toast-viewport"][data-expanded]:has(
+        > [data-slot="toast-item"][data-front="false"][data-removed="false"]
+      ) {
+      --toaster-band: 2rem;
+      --toaster-lift: var(--toaster-offset, 0.5rem);
+    }
+    [data-slot="toaster-clear-all"] {
+      display: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1000;
+    }
+    [data-slot="toast-viewport"][data-expanded]:has(
+        > [data-slot="toast-item"][data-front="false"][data-removed="false"]
+      )
+      > [data-slot="toaster-clear-all"] {
+      display: block;
+    }
+
+    [data-slot="toast-viewport"] > [data-slot="toast-item"] {
+      --toast-y: min(
+        calc(var(--toast-index, 0) * var(--toast-collapsed-peek)),
+        calc(2 * var(--toast-collapsed-peek))
+      );
+      --toast-s: calc(1 - min(var(--toast-index, 0), 3) * 0.05);
+      position: absolute;
+      inset-inline: 0;
+      top: 0;
+      height: var(--toast-initial-height, auto);
+      transform-origin: bottom;
+      translate: var(--toaster-slide) var(--toast-y);
+      scale: var(--toast-s);
+      opacity: 0;
+      transition:
+        translate 300ms ease-out,
+        scale 300ms ease-out,
+        opacity 300ms ease-out,
+        height 300ms ease-out;
+    }
+    [data-slot="toast-viewport"] > [data-slot="toast-item"][data-expanded="true"] {
+      --toast-y: calc(var(--toast-offset, 0px) + var(--toaster-band));
+      --toast-s: 1;
+    }
+    [data-slot="toast-viewport"]
+      > [data-slot="toast-item"][data-expanded="false"][data-front="false"] {
+      height: var(--toast-front-height);
+    }
+    /* In: slid home; a fourth one and beyond stay out of sight while stacked. */
+    [data-slot="toast-viewport"] > [data-slot="toast-item"][data-mounted="true"] {
+      translate: 0 var(--toast-y);
+      opacity: clamp(0, 3 - var(--toast-index, 0), 1);
+    }
+    [data-slot="toast-viewport"]
+      > [data-slot="toast-item"][data-mounted="true"][data-expanded="true"] {
+      opacity: 1;
+    }
+    [data-slot="toast-viewport"] > [data-slot="toast-item"][data-swiping="true"] {
+      translate: var(--toast-swipe-amount-x, 0px) var(--toast-y);
+      transition: none;
+    }
+    /* Out: back to the right, fading (or off where it was swiped). */
+    [data-slot="toast-viewport"]
+      > [data-slot="toast-item"][data-mounted][data-removed="true"],
+    [data-slot="toast-viewport"]
+      > [data-slot="toast-item"][data-mounted][data-visible="false"] {
+      translate: var(--toaster-slide) var(--toast-y);
+      opacity: 0;
+    }
+    [data-slot="toast-viewport"]
+      > [data-slot="toast-item"][data-mounted][data-swipe-out="true"] {
+      translate: var(--toast-swipe-end-x, 0px) var(--toast-y);
+    }
+    /* Stacked: the ones behind are blank. */
+    [data-slot="toast-viewport"]
+      > [data-slot="toast-item"]
+      :is([data-slot="toast-body"], [data-slot="toast-close"]) {
+      transition: opacity 300ms ease-out;
+    }
+    [data-slot="toast-viewport"]
+      > [data-slot="toast-item"][data-expanded="false"][data-front="false"]
+      :is([data-slot="toast-body"], [data-slot="toast-close"]) {
+      opacity: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      [data-slot="toast-viewport"] {
+        --toaster-slide: 0px;
+        transition: none;
+      }
+      [data-slot="toast-viewport"] > [data-slot="toast-item"] {
+        transition: opacity 150ms linear;
+      }
+    }
+  }
+</style>
+
+<script>
+  import { createToast } from "@data-slot/toast";
+
+  /** D164 — the attention effect starts once the slide in (300ms) is done. */
+  const IN_MS = 300;
+  /** D175 — three 700ms ripples (or seven 75ms swings each way). */
+  const ATTENTION_MS = 2400;
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+
+  document.querySelectorAll<HTMLElement>('[data-slot="toast"]').forEach((root) => {
+    if (root.dataset.toasterReady === "true") return;
+    const viewport = root.querySelector<HTMLElement>('[data-slot="toast-viewport"]');
+    if (!viewport) return;
+
+    const item = (id: string) =>
+      viewport.querySelector<HTMLElement>(
+        `[data-slot="toast-item"][data-id="${CSS.escape(id)}"]`,
+      );
+
+    const controller = createToast(root, {
+      onShow: (id) => {
+        // Only the newest draws the eye.
+        viewport
+          .querySelectorAll<HTMLElement>('[data-slot="toast-item"][data-attention]')
+          .forEach((el) => el.removeAttribute("data-attention"));
+        if (reducedMotion.matches) return;
+        window.setTimeout(() => {
+          const el = item(id);
+          if (!el || el.dataset.state !== "open" || el.dataset.front !== "true") return;
+          el.dataset.attention = "on";
+          window.setTimeout(() => el.removeAttribute("data-attention"), ATTENTION_MS);
+        }, IN_MS);
+      },
+    });
+
+    viewport
+      .querySelector<HTMLElement>("[data-toaster-clear]")
+      ?.addEventListener("click", () => controller.dismissAll());
+
+    root.dataset.toasterReady = "true";
+    root.dispatchEvent(new CustomEvent("toaster:ready"));
+  });
+</script>

package/src/components/toast/index.ts

@@ -0,0 +1,9 @@
+export { default as Toast } from "./Toast.astro";
+export { default as Toaster } from "./Toaster.astro";
+export { toast } from "../../lib/toast";
+export type {
+  ToastKind,
+  ToastShowOptions,
+  ToastUpdateOptions,
+  ToastActionOptions,
+} from "../../lib/toast";

package/src/components/toggle/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to the `Toggle` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C12)
+
+- Added `variant="ghost"`: no pressed background (the content shows the state, e.g. a filled `favorite` star); the normal hover background on hover, pressed or not. `default` and `outline` are unchanged, since `ToggleGroup` shows its selection with the pressed background.
+- Storybook: "Ghost" preview with the favourite star.
+
+
 ## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5455-19034`)
 
 Figma documents Toggle across four pages: Contents (Default, Clean, Tail Icon, Complex), States (Default, Hover, Pressed, Focus Default, Focus Pressed, Disabled), and Sizes (Small 28px, Medium 32px, Large 36px). Sizing/variant fixes live in the shared `toggleVariants` (`packages/ui/src/lib/toggle-shared.ts`), used by both `Toggle` and `ToggleGroup`.

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

@@ -2,6 +2,17 @@
 
 All notable changes to the `ToggleGroup` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C26)
+
+### Added
+
+- `variant="segmented"` (`variant: "default" | "outline" | "segmented"`): the outline look (shared borders, shadow) with the pressed item filled `muted` in `foreground` text, and kept `muted` on hover. For a view switcher (card/list), where one item is always the current view. Replaces the workspace-selection screen's `group-data-[view=…]` classes on each item.
+- The fill follows the runtime's own pressed state (`aria-pressed`, set by `@data-slot/toggle-group`), not app classes: set it with `defaultValue` or the `toggle-group:set` event. The pressed colours use a plain ancestor selector (`[data-slot=toggle-group][data-variant=segmented] …[aria-pressed=true]`), which outranks the shared pressed and hover backgrounds; Tailwind's `group-data-*` wraps the group in `:where()` and would only tie with them.
+- Added to the shared `TOGGLE_VARIANTS` / `toggleVariants` (`lib/toggle-shared.ts`) so the controller gives items the outline borders; a standalone `Toggle` accepts it too (outline with a `muted` pressed state), though it's made for groups.
+- Opt-in: `default` and `outline` groups are unchanged.
+- Storybook: a "Segmented" preview beside the outline one.
+
 ## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `5455-20808`)
 
 Figma documents ToggleGroup across four pages: States (Default, Hover, Pressed, Focus Default, Focus Pressed, Disabled), Sizes (Small 28px, Medium 32px, Large 36px — matching `Toggle`'s own scale), Items (Lead/Middle/Tail item positions × sizes × states), and the top-level Variants page (Small/Medium/Large).