@cl-light-ds/ui 0.5.0 → 0.6.1

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/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).

package/src/components/toggle-group/ToggleGroup.astro

@@ -98,6 +98,22 @@
  *   </ToggleGroupItem>
  * </ToggleGroup>
  *
+ * ### Segmented Variant
+ *
+ * `variant="segmented"` is the outline look with the pressed item filled
+ * `muted` in `foreground` text, also on hover: a view switcher, where one item
+ * is always the current view. The fill follows the group's own pressed state
+ * (`aria-pressed`), so drive it with `defaultValue` or `toggle-group:set`.
+ *
+ * <ToggleGroup variant="segmented" defaultValue="card" aria-label="Collection view">
+ *   <ToggleGroupItem value="card" aria-label="Card view">
+ *     <LayoutGridIcon />
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="list" aria-label="List view">
+ *     <ListIcon />
+ *   </ToggleGroupItem>
+ * </ToggleGroup>
+ *
  * ### Sizes
  *
  * <div class="flex flex-col gap-4">
@@ -181,7 +197,8 @@ import type { HTMLAttributes } from "astro/types";
 import { cn } from "@cl-light-ds/ui/lib/utils";
 
 interface Props extends Omit<HTMLAttributes<"div">, "class"> {
-  variant?: "default" | "outline";
+  /** `"segmented"`: outline, with the pressed item `muted` in `foreground` text (C26). */
+  variant?: "default" | "outline" | "segmented";
   size?: "xs" | "default" | "sm" | "lg";
   spacing?: number;
   defaultValue?: string | string[];
@@ -218,7 +235,7 @@ const {
   data-default-value={Array.isArray(defaultValue) ? defaultValue.join(",") : defaultValue}
   data-multiple={multiple ? "true" : undefined}
   class={cn(
-    "rounded-lg data-[spacing=0]:data-[variant=outline]:shadow-xs",
+    "rounded-lg data-[spacing=0]:data-[variant=outline]:shadow-xs data-[spacing=0]:data-[variant=segmented]:shadow-xs",
     "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
     className
   )}

package/src/components/toggle-group/ToggleGroupItem.astro

@@ -40,6 +40,16 @@ const {
     "group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:border-t-0",
     "group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:first:border-s",
     "group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=outline]/toggle-group:first:border-t",
+    // C26 — segmented: the outline's shared borders, and the pressed item
+    // `muted` in `foreground` text, also on hover. The pressed colours use a
+    // plain ancestor selector (Tailwind's group-data-* wraps the group in
+    // :where(), adding no weight) so they outrank the shared pressed and hover
+    // backgrounds.
+    "group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=segmented]/toggle-group:border-s-0",
+    "group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=segmented]/toggle-group:border-t-0",
+    "group-data-horizontal/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=segmented]/toggle-group:first:border-s",
+    "group-data-vertical/toggle-group:group-data-[spacing=0]/toggle-group:group-data-[variant=segmented]/toggle-group:first:border-t",
+    "[[data-slot=toggle-group][data-variant=segmented]_&]:aria-pressed:bg-muted [[data-slot=toggle-group][data-variant=segmented]_&]:aria-pressed:text-foreground",
     className
   )}
   {...rest}

package/src/components/tooltip/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to the `Tooltip` component family (`Tooltip`, `TooltipTrigger`, `TooltipContent`) are documented in this file.
 
+## Date 15th Oct 2026
+## Handover gaps: Tooltip on these pages (C22, gap G2)
+
+### Fixed
+
+- **`TooltipTrigger asChild` binds your control, not the wrapper.** The handover recorded Tooltip as "doesn't work on these pages" (G2, workspace G10). That note dates from when the screens were static (no JavaScript), so no tooltip could work. Retested with 1.1.2 in the storybook and in a test page shaped like the screen (sticky top bar, `WorkspaceCard` with its stretched link, `ToggleGroup` view switcher, `FavoriteToggle`, a `Dialog`): hover shows the tooltip everywhere, on top of everything (portal, `z-50`), including in a dialog and over a sticky bar. What really failed, for every `asChild` trigger (the usual way to put a tooltip on a DS `Button`):
+  - **Keyboard:** the runtime listens for `focus` on whatever carries `data-slot="tooltip-trigger"`. With `asChild` that was the wrapper `<div>`, and `focus` doesn't bubble, so tabbing to the button never opened the tooltip.
+  - **Screen readers:** `aria-describedby` went on the wrapper `<div>`, not on the focused control.
+  - **Position:** the tooltip centred on the wrapper. In a grid cell, a flex column or a dialog body the wrapper stretches to the full width, so the tooltip sat off to one side (163px off in a 448px dialog).
+- `Tooltip`'s script now hands the slot to the wrapper's first child while binding, then gives the child its own `data-slot` back (the runtime keeps the element). Keyboard focus opens the tooltip, `aria-describedby` is on the control, and the tooltip centres on it. Markup and props are unchanged.
+- A **disabled** child (`:disabled` when the page loads) keeps the wrapper as trigger, as before: a disabled button fires no pointer events, so this keeps hovering it showing the tooltip.
+
+### Notes
+
+- Like the other overlays, tooltips bind once, when the page loads. A tooltip added to the page later needs `create()` from `@data-slot/tooltip`, and is bound to its wrapper.
+- The screens can now use `Tooltip` on icon-only controls, keeping their `aria-label`s.
+
+
+## Handover gaps: triggers don't submit forms (C29, gap G18)
+
+### Docs
+
+- `TooltipTrigger` 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-18 — Figma alignment (ClickLearn Lightning Design Library, node `5275-137`)
 
 Figma documents Tooltip across four pages: Contents (6 side/align positions — already fully covered by the existing `side`/`align` props), Variants (Default, Outline), Sizes (Small, Large), and the top-level Component page.

package/src/components/tooltip/Tooltip.astro

@@ -351,7 +351,35 @@ const {
 <script>
   import { createTooltip } from "@data-slot/tooltip";
 
-  document
-    .querySelectorAll('[data-slot="tooltip"]')
-    .forEach((el) => createTooltip(el));
+  /*
+   * `TooltipTrigger asChild` renders a wrapper <div data-slot="tooltip-trigger">
+   * around your control, and @data-slot/tooltip binds to whatever carries that
+   * slot. Bound to the wrapper, the tooltip never opened on keyboard focus
+   * (focus doesn't bubble to the div), put aria-describedby on the div instead
+   * of the control, and centred on the div, which stretches in grid/flex
+   * columns (C22). So bind the child: give it the slot while binding, then give
+   * its own data-slot back (the runtime keeps the element, not the selector).
+   * A disabled child fires no pointer events, so it keeps the wrapper as its
+   * trigger, as before: hovering a disabled control still shows its tooltip.
+   */
+  const bind = (root: Element) => {
+    const wrapper = root.querySelector<HTMLElement>('[data-slot="tooltip-trigger"][data-as-child]');
+    const child = wrapper?.firstElementChild as HTMLElement | null | undefined;
+    if (!wrapper || !child || wrapper.closest('[data-slot="tooltip"]') !== root || child.matches(":disabled")) {
+      createTooltip(root);
+      return;
+    }
+    const childSlot = child.getAttribute("data-slot");
+    wrapper.setAttribute("data-slot", "tooltip-trigger-wrapper");
+    child.setAttribute("data-slot", "tooltip-trigger");
+    try {
+      createTooltip(root);
+    } finally {
+      if (childSlot === null) child.removeAttribute("data-slot");
+      else child.setAttribute("data-slot", childSlot);
+      wrapper.setAttribute("data-slot", "tooltip-trigger");
+    }
+  };
+
+  document.querySelectorAll('[data-slot="tooltip"]').forEach(bind);
 </script>

package/src/components/tooltip/TooltipTrigger.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/lib/command-search.ts

@@ -30,6 +30,11 @@ export interface CommandSearchResultGroup {
   items: CommandSearchResultItem[];
   /** Total matches, when more exist than `items` holds. Defaults to `items.length`. */
   count?: number;
+  /**
+   * Show at most this many of `items`; the count stays `count ?? items.length`.
+   * Defaults to `CommandSearch`'s `limit`; 0 for no limit.
+   */
+  limit?: number;
 }
 
 type Target = string | HTMLElement | undefined;

package/src/lib/dialog-focus.ts

@@ -0,0 +1,73 @@
+/**
+ * Focus inside popovers that open in a dialog.
+ *
+ * The popover runtime moves an open popover's content to <body> (a positioner),
+ * so it is outside the dialog: the dialog's focus trap sees focus there as
+ * "escaped" and pulls it back, and Tab from the popover's trigger skips the
+ * popover. A popover opened from a dialog acts as a nested modal instead:
+ *
+ * - Tab from its trigger goes into the popover (Shift+Tab to its last control);
+ * - Tab and Shift+Tab go round the popover's own controls;
+ * - Escape (the popover's own) closes it and returns to the trigger.
+ *
+ * The popover is tied to its dialog through its trigger (`aria-controls`).
+ * Installed once by Dialog; runs before the dialog's trap (window, capture).
+ */
+
+const TABBABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+let installed = false;
+
+/** The open popover whose trigger is in an open dialog and which holds or triggers `el`. */
+function popoverFor(el: Element): { content: HTMLElement; fromTrigger: boolean } | null {
+  const content = el.closest<HTMLElement>('[data-slot="popover-content"]');
+  if (content) return !content.hidden && inOpenDialog(triggerOf(content)) ? { content, fromTrigger: false } : null;
+
+  const trigger = el.closest<HTMLElement>('[aria-controls][aria-expanded="true"]');
+  const target = trigger && document.getElementById(trigger.getAttribute("aria-controls")!);
+  if (target?.dataset.slot === "popover-content" && !target.hidden && inOpenDialog(trigger)) {
+    return { content: target, fromTrigger: true };
+  }
+  return null;
+}
+
+function triggerOf(content: HTMLElement) {
+  return content.id ? document.querySelector(`[aria-controls="${CSS.escape(content.id)}"]`) : null;
+}
+
+function inOpenDialog(el: Element | null) {
+  return !!el?.closest('[data-slot="dialog-content"][data-open]');
+}
+
+export function trapTabInPopoversInDialogs() {
+  if (installed) return;
+  installed = true;
+
+  window.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key !== "Tab" || event.defaultPrevented) return;
+      const active = document.activeElement;
+      const found = active && popoverFor(active);
+      if (!found) return;
+
+      const tabbables = Array.from(found.content.querySelectorAll<HTMLElement>(TABBABLE)).filter(
+        (el) => !el.closest("[hidden]") && el.getClientRects().length > 0,
+      );
+      if (tabbables.length === 0) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      const at = found.fromTrigger ? -1 : tabbables.indexOf(active as HTMLElement);
+      const next =
+        at === -1
+          ? event.shiftKey
+            ? tabbables.length - 1
+            : 0
+          : (at + (event.shiftKey ? -1 : 1) + tabbables.length) % tabbables.length;
+      tabbables[next].focus();
+    },
+    true,
+  );
+}

package/src/lib/dropdown-menu-radio-groups.ts

@@ -0,0 +1,79 @@
+/**
+ * Several radio groups in one DropdownMenu.
+ *
+ * The @data-slot/dropdown-menu runtime holds a single radio value per menu, so a
+ * second group (Sort by + Order) would untick the first. A *named*
+ * DropdownMenuRadioGroup is run on the runtime's checkbox values instead: its
+ * items are registered as checkbox items, exactly one is kept checked, and they
+ * are still announced as radios (`menuitemradio`).
+ *
+ * The group's value is mirrored on the group (`data-value`) and announced with
+ * `dropdown-menu:group-value-change` ({ name, value, previousValue }) on the root.
+ */
+
+type Menu = { values: string[]; set(detail: { values?: string[] }): void };
+
+const GROUP = '[data-slot="dropdown-menu-radio-group"][data-name]';
+const ITEM = '[data-slot="dropdown-menu-radio-item"]';
+const GROUPED_ITEM = "[data-radio-group-item]";
+
+/** Before the runtime starts: turn named groups' items into checkbox items. */
+export function prepareRadioGroups(root: HTMLElement) {
+  const defaults: string[] = [];
+  for (const group of root.querySelectorAll<HTMLElement>(GROUP)) {
+    const items = Array.from(group.querySelectorAll<HTMLElement>(ITEM));
+    const initial =
+      group.dataset.defaultValue ?? items.find((item) => item.hasAttribute("data-default-checked"))?.dataset.value;
+    for (const item of items) {
+      item.dataset.slot = "dropdown-menu-checkbox-item";
+      item.setAttribute("data-radio-group-item", group.dataset.name!);
+      item.toggleAttribute("data-default-checked", item.dataset.value === initial);
+    }
+    if (initial) {
+      defaults.push(initial);
+      group.dataset.value = initial;
+    }
+  }
+  // Root defaults win over item defaults in the runtime, so merge ours in.
+  if (defaults.length && root.dataset.defaultValues) {
+    const values = JSON.parse(root.dataset.defaultValues) as string[];
+    root.dataset.defaultValues = JSON.stringify([...values, ...defaults.filter((v) => !values.includes(v))]);
+  }
+}
+
+/** After the runtime starts: keep one item per group checked. */
+export function bindRadioGroups(root: HTMLElement, menu: Menu) {
+  const items = Array.from(root.querySelectorAll<HTMLElement>(GROUPED_ITEM));
+  if (items.length === 0) return;
+  // The runtime re-sets checkbox items' role when the menu opens; keep them radios.
+  const asRadio = () => {
+    for (const item of items) if (item.getAttribute("role") !== "menuitemradio") item.setAttribute("role", "menuitemradio");
+  };
+  asRadio();
+  const roles = new MutationObserver(asRadio);
+  for (const item of items) roles.observe(item, { attributeFilter: ["role"] });
+
+  // Picking the checked item again would untick it: a radio can't be unset.
+  root.addEventListener("dropdown-menu:select", (event) => {
+    const item = (event as CustomEvent<{ item: HTMLElement | null }>).detail.item;
+    if (item?.hasAttribute("data-radio-group-item") && item.hasAttribute("data-checked")) event.preventDefault();
+  });
+
+  root.addEventListener("dropdown-menu:values-change", (event) => {
+    const { item, checked } = (event as CustomEvent<{ item: HTMLElement | null; checked: boolean }>).detail;
+    const name = item?.getAttribute("data-radio-group-item");
+    if (!item || !name || !checked) return;
+    const siblings = items.filter((other) => other !== item && other.getAttribute("data-radio-group-item") === name);
+    const drop = new Set(siblings.map((other) => other.dataset.value));
+    menu.set({ values: menu.values.filter((value) => !drop.has(value)) });
+
+    const group = item.closest<HTMLElement>(GROUP);
+    const previousValue = group?.dataset.value ?? null;
+    if (group) group.dataset.value = item.dataset.value;
+    root.dispatchEvent(
+      new CustomEvent("dropdown-menu:group-value-change", {
+        detail: { name, value: item.dataset.value, previousValue },
+      }),
+    );
+  });
+}

package/src/lib/scroll-lock.ts

@@ -0,0 +1,97 @@
+/**
+ * Page scroll lock for dialogs and menus that leaves the scrollbar where it is.
+ *
+ * The @data-slot runtimes lock scroll by setting `overflow: hidden` and
+ * `scrollbar-gutter: stable` on <html>. The reserved gutter isn't covered by a
+ * dialog's overlay (a white band down the right edge), and on a page with no
+ * scrollbar the gutter appears from nowhere and the page jumps sideways. So the
+ * components pass `lockScroll: false` to the runtime and lock here instead:
+ * nothing about the layout changes; the wheel, touch and the page-scrolling keys
+ * just don't scroll the page while a lock is held. Anything under the pointer
+ * that can scroll by itself (a long list in the dialog) still does, and a
+ * dragged scrollbar is put back.
+ */
+
+let holds = 0;
+let savedY = 0;
+let installed = false;
+
+/** Whether something between `target` and the page can scroll by `dy` itself. */
+function scrollsItself(target: EventTarget | null, dy: number) {
+  for (
+    let el = target instanceof Element ? target : null;
+    el && el !== document.body && el !== document.documentElement;
+    el = el.parentElement
+  ) {
+    const { overflowY } = getComputedStyle(el);
+    if (!/(auto|scroll)/.test(overflowY)) continue;
+    if (el.scrollHeight <= el.clientHeight) continue;
+    if (dy < 0 ? el.scrollTop > 0 : el.scrollTop + el.clientHeight < el.scrollHeight) return true;
+  }
+  return false;
+}
+
+function install() {
+  if (installed) return;
+  installed = true;
+
+  window.addEventListener(
+    "wheel",
+    (event) => {
+      if (holds > 0 && !scrollsItself(event.target, event.deltaY)) event.preventDefault();
+    },
+    { passive: false },
+  );
+
+  let touchY = 0;
+  window.addEventListener("touchstart", (event) => (touchY = event.touches[0]?.clientY ?? 0), {
+    passive: true,
+  });
+  window.addEventListener(
+    "touchmove",
+    (event) => {
+      const dy = touchY - (event.touches[0]?.clientY ?? touchY);
+      if (holds > 0 && !scrollsItself(event.target, dy)) event.preventDefault();
+    },
+    { passive: false },
+  );
+
+  window.addEventListener("keydown", (event) => {
+    if (holds === 0 || !["PageUp", "PageDown", "Home", "End", " "].includes(event.key)) return;
+    const target = event.target as HTMLElement;
+    if (target.closest("input, textarea, select, button, [contenteditable]")) return;
+    const dy = event.key === "PageUp" || event.key === "Home" ? -1 : 1;
+    if (!scrollsItself(target, dy)) event.preventDefault();
+  });
+
+  window.addEventListener("scroll", () => {
+    if (holds > 0 && window.scrollY !== savedY) window.scrollTo(window.scrollX, savedY);
+  });
+}
+
+/** Take a lock. Locks nest: the page scrolls again once every lock is released. */
+export function holdScrollLock() {
+  install();
+  if (holds === 0) savedY = window.scrollY;
+  holds += 1;
+}
+
+export function releaseScrollLock() {
+  holds = Math.max(0, holds - 1);
+}
+
+/**
+ * Hold the lock while `root` is open. `event` is the runtime's open-change event
+ * (its detail has `open`); `isOpen` reads the state for roots that start open.
+ */
+export function lockScrollWhileOpen(root: HTMLElement, event: string, isOpen: () => boolean) {
+  let open = false;
+  const set = (next: boolean) => {
+    if (next === open) return;
+    open = next;
+    if (next) holdScrollLock();
+    else releaseScrollLock();
+  };
+  root.addEventListener(event, (e) => set(Boolean((e as CustomEvent<{ open?: boolean }>).detail?.open)));
+  set(isOpen());
+}

package/src/lib/toggle-shared.ts

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
-export const TOGGLE_VARIANTS = ["default", "outline", "ghost"] as const;
+export const TOGGLE_VARIANTS = ["default", "outline", "ghost", "segmented"] as const;
 export const TOGGLE_SIZES = ["xs", "default", "sm", "lg"] as const;
 
 export type ToggleVariant = (typeof TOGGLE_VARIANTS)[number];
@@ -16,6 +16,11 @@ export const toggleVariants = cva(
         // Pressed shows in the content only (e.g. a filled star): no pressed
         // background, the normal hover background on hover.
         ghost: "bg-transparent aria-pressed:bg-transparent aria-pressed:hover:bg-background-hover",
+        // C26 — outline, with the pressed item `muted` and in `foreground` text
+        // (a view switcher). Made for ToggleGroup, which also keeps it `muted`
+        // on hover; follows the runtime's `aria-pressed`.
+        segmented:
+          "border-input hover:bg-background-hover border bg-transparent shadow-xs aria-pressed:bg-muted aria-pressed:text-foreground",
       },
       size: {
         xs: "h-7 min-w-7 px-1",

package/src/styles/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to the design tokens in `globals.css` will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C27)
+
+### Type styles
+
+- Three utilities (`@utility`) for page and section headings (D98–D101), so screens don't repeat the size, weight and colour:
+  - `type-page-greeting`: the page title as a greeting ("Good morning, …"), `font-heading` 24/32 (`text-2xl`), semibold, `tracking-tight`, `foreground`.
+  - `type-section-title`: a section heading ("Recents", "All workspaces"), 16/24 (`text-base`) semibold, `foreground`.
+  - `type-section-meta`: the small muted text beside a section heading (a subtext, a count), 14/20 (`text-sm`) regular, `muted-foreground`; resets weight and tracking, so it can sit inside the heading (on its baseline: `flex items-baseline gap-2` on the heading).
+- Named `type-*` rather than `text-*`, so tailwind-merge (`cn()`) doesn't read them as a text colour or size and drop them next to one. Layout (baseline row, gaps) stays with the screen.
+- Replaces the workspace-selection screen's `sectionHeading` / `besideHeading` class strings and the greeting's classes. **Not in Figma yet.**
+- Storybook: a "Type styles" section on Foundations › Fonts.
+
 ## Date 15th Oct 2026
 ## Workspace selection handover (N1, N8, N19, C17)
 

package/src/styles/globals.css

@@ -280,6 +280,28 @@
   --table-row-selected: color-mix(in oklab, var(--primary-500) 20%, var(--background));
 }
 
+/*
+ * Type styles (C27, D98–D101): page and section headings in one class each,
+ * so screens don't repeat the size, weight and colour.
+ * - type-page-greeting: the page title as a greeting, 24/32 heading font, semibold.
+ * - type-section-title: a section heading ("Recents", "All workspaces"), 16/24 semibold.
+ * - type-section-meta: the small muted text beside a section heading (a subtext,
+ *   a count), 14/20 regular; resets weight and tracking when nested in the title.
+ * Named type-* rather than text-*, so tailwind-merge doesn't read them as a
+ * text colour or size and drop them next to one in cn().
+ */
+@utility type-page-greeting {
+  @apply font-heading text-2xl font-semibold tracking-tight text-foreground;
+}
+
+@utility type-section-title {
+  @apply text-base font-semibold text-foreground;
+}
+
+@utility type-section-meta {
+  @apply text-sm font-normal tracking-normal text-muted-foreground;
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;