rift-ds 1.18.0 → 1.19.1

package/components/Popover/Popover.js

@@ -14,6 +14,7 @@ const Popover = React.forwardRef(
     size = "default",
     surface = "panel",
     position = "bottom",
+    align = "start",
     trigger = "click",
     open: controlledOpen,
     defaultOpen = false,
@@ -77,7 +78,7 @@ const Popover = React.forwardRef(
       anchorRef: triggerRef,
       panelRef,
       side: position,
-      align: "start",
+      align,
       gapProperty: "--gap-050"
     });
     const baseClass = "ds-popover";

package/components/SegmentedControl/SegmentedControl.css

@@ -247,7 +247,9 @@
    ============================================ */
 
 .ds-segmented-control__label--tip {
-  /* Out of flow at rest; the behaviour makes it fixed once it shows. */
+  /* Out of flow at rest; the behaviour makes it fixed once it shows, and
+     lifts it into the top layer (src/behaviors/useTopLayer), above every
+     z-index on the page. */
   position: absolute;
   z-index: var(--layer-floating);
   padding: var(--padding-150) var(--padding-200);
@@ -270,6 +272,12 @@
     transform var(--motion-duration-fast) var(--motion-ease-standard);
 }
 
+/* The tip sits on the page surface, not the selected segment's fill, so it
+   keeps its own ink when the active-label rules above would recolour it. */
+.ds-segmented-control .ds-segmented-control__segment .ds-segmented-control__label--tip {
+  color: var(--color-text-primary);
+}
+
 /* --motion-duration-slow matches MOTION_HOVER_SHOW_DELAY_MS, the hover-intent
    delay Tooltip uses in JS, so the label does not flash while the pointer
    passes through. Hiding takes no delay, like a tooltip leaving. */

package/components/SegmentedControl/SegmentedControl.js

@@ -6,6 +6,7 @@ import "../../behaviors/visually-hidden.css";
 import "../../fonts/material-symbols.css";
 import { mirrorClass, logicalArrowKey } from "../../behaviors/direction.js";
 import { useAnchoredPosition } from "../../behaviors/useAnchoredPosition.js";
+import { useTopLayer } from "../../behaviors/useTopLayer.js";
 const SegmentedControl = React.forwardRef(
   ({
     segments,
@@ -197,6 +198,7 @@ const SegmentedControl = React.forwardRef(
       tipLabelRef.current = label;
       setTip([...strip.querySelectorAll(`.${baseClass}__segment`)].indexOf(segment));
     };
+    useTopLayer({ open: tip !== null, panelRef: tipLabelRef, target: tip });
     useAnchoredPosition({
       open: tip !== null,
       target: tip,

package/components/SidebarPanel/SidebarPanel.css

@@ -223,11 +223,19 @@
 
 /* On a filled row the pill steps back to the page ground, or it would
    share the row's fill and dissolve into it. */
-.ds-sidebar-panel__row--active .ds-sidebar-panel__badge,
-.ds-sidebar-panel__row:hover .ds-sidebar-panel__badge {
+.ds-sidebar-panel__row--active .ds-sidebar-panel__badge:not(.ds-sidebar-panel__badge--count),
+.ds-sidebar-panel__row:hover .ds-sidebar-panel__badge:not(.ds-sidebar-panel__badge--count) {
   background-color: var(--color-bg-page-primary);
 }
 
+/* A count: a solid pill on the count badge pair, the "how many" mark the
+   rail beside it, BottomNav and TableToolbar share, which reads on any
+   row fill. A word such as "New" keeps the quiet pill above. */
+.ds-sidebar-panel__badge--count {
+  color: var(--color-count-badge-text);
+  background-color: var(--color-count-badge-bg);
+}
+
 .ds-sidebar-panel__chevron {
   --icon-size: var(--icon-size-500);
   flex-shrink: 0;

package/components/SidebarPanel/SidebarPanel.d.ts

@@ -9,7 +9,7 @@ export interface SidebarPanelItem {
     href?: string;
     /** Click handler — also fires on a link item, so a consumer can route client-side */
     onClick?: () => void;
-    /** Trailing count pill, e.g. unread items */
+    /** Trailing pill, e.g. unread items. A count takes the count badge colours; a word stays a quiet pill */
     badge?: string | number;
     /** Group heading this item sits under; consecutive items sharing a group render beneath one heading */
     group?: string;

package/components/SidebarPanel/SidebarPanel.js

@@ -4,6 +4,9 @@ import React, { useId, useState, useCallback } from "react";
 import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import "./SidebarPanel.css";
 import "../../fonts/material-symbols.css";
+function isCount(badge) {
+  return typeof badge === "number" || /^\d+\+?$/.test(badge.trim());
+}
 function groupRuns(items) {
   const runs = [];
   for (const item of items) {
@@ -56,7 +59,7 @@ const SidebarPanel = React.forwardRef(
       ].filter(Boolean).join(" ");
       const content = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: item.label }),
-        item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__badge`, children: item.badge })
+        item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__badge${isCount(item.badge) ? ` ${baseClass}__badge--count` : ""}`, children: item.badge })
       ] });
       return item.href ? /* @__PURE__ */ jsx(
         Link,
@@ -104,7 +107,7 @@ const SidebarPanel = React.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: item.label }),
-              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__badge`, children: item.badge }),
+              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__badge${isCount(item.badge) ? ` ${baseClass}__badge--count` : ""}`, children: item.badge }),
               /* @__PURE__ */ jsx(
                 "span",
                 {

package/components/SiteHeader/SiteHeader.css

@@ -159,11 +159,31 @@
   rotate: 180deg;
 }
 
-/* The menu button only exists once the bar folds. */
+/* The menu button only exists once the bar folds. It wears the track
+   recipe the CommandPaletteTrigger, the ThemePicker's trigger and the
+   ThemeToggle's cycle circle wear (container fill, hairline border, the
+   track's curve), so the circles at the bar's end read as one set, and it
+   hovers as they do: the fill steps up, the glyph holds its colour. */
 .ds-site-header__menu-button {
   display: none;
 }
 
+.ds-site-header .ds-site-header__menu-button {
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: calc(var(--radius-pill) + var(--padding-100));
+}
+
+.ds-site-header .ds-site-header__menu-button:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+.ds-site-header .ds-site-header__menu-button .ds-circular-button__icon,
+.ds-site-header .ds-site-header__menu-button:not(.ds-circular-button--disabled):hover .ds-circular-button__icon,
+.ds-site-header .ds-site-header__menu-button:not(.ds-circular-button--disabled):active .ds-circular-button__icon {
+  color: var(--color-action-icon-default);
+}
+
 /* While the drawer is open its close button stands in this exact spot, on
    the top layer; the button underneath would only show through the scrim. */
 .ds-site-header__menu-button--hidden {
@@ -188,6 +208,16 @@
   pointer-events: auto;
 }
 
+/* Condensed: `condensedActions` take the place of `actions`. Whichever set
+   is not showing leaves the row but stays measurable (hidden, out of flow,
+   inert), as the folded pills do. */
+.ds-site-header--condensed .ds-site-header__actions:not(.ds-site-header__actions--condensed),
+.ds-site-header:not(.ds-site-header--condensed) .ds-site-header__actions--condensed {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 /* Folded: the pills and the wide actions leave the row but stay measurable
    (hidden, out of flow, inert), and the menu button takes their place. */
 .ds-site-header--folded .ds-site-header__nav,
@@ -207,8 +237,8 @@
 
 /* Before the bar has measured itself (the first frame, which a
    server-rendered page shows before its script runs), it folds by CSS below
-   the `initialFold` step, so a phone never sees the pills spill past the
-   actions. The first measurement replaces this in the same commit as
+   the `initialFold` step, with `condensedActions` in place of `actions`, so
+   a phone never sees the pills spill past the actions. The first measurement replaces this in the same commit as
    hydration. */
 @media (max-width: 959px) {
   .ds-site-header--prefold-tablet .ds-site-header__nav,
@@ -221,6 +251,18 @@
   .ds-site-header--prefold-tablet .ds-site-header__menu-button {
     display: inline-flex;
   }
+
+  .ds-site-header--prefold-tablet .ds-site-header__actions:not(.ds-site-header__actions--condensed) {
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .ds-site-header.ds-site-header--prefold-tablet .ds-site-header__actions--condensed {
+    position: static;
+    visibility: visible;
+    pointer-events: auto;
+  }
 }
 
 @media (max-width: 1279px) {
@@ -234,6 +276,18 @@
   .ds-site-header--prefold-mid .ds-site-header__menu-button {
     display: inline-flex;
   }
+
+  .ds-site-header--prefold-mid .ds-site-header__actions:not(.ds-site-header__actions--condensed) {
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .ds-site-header.ds-site-header--prefold-mid .ds-site-header__actions--condensed {
+    position: static;
+    visibility: visible;
+    pointer-events: auto;
+  }
 }
 
 /* The drawer: its brand row lands on the bar's own brand. SiteHeader
@@ -261,8 +315,9 @@
   position: absolute;
   inset-block-start: var(--ds-site-header-close-top, var(--padding-500));
   inset-inline-start: var(--ds-site-header-close-start, auto);
-  width: var(--control-height-default);
-  height: var(--control-height-default);
+  /* The menu button's compact box, so the close lands exactly on it. */
+  width: var(--control-height-compact);
+  height: var(--control-height-compact);
   /* ds-allow(color): on-scrim furniture, as Lightbox's: the scrim is dark in both themes, so the glyph is white in both. */
   color: #ffffff;
   opacity: 0;
@@ -273,6 +328,9 @@
    turning into another. */
 .ds-site-header__drawer .ds-drawer__close .material-symbols-rounded {
   --icon-size: var(--icon-size-600);
+  /* The glyph takes the close's on-scrim white, not CircularButton's
+     icon colour, which is dark in light mode and vanished on the scrim. */
+  color: inherit;
 }
 
 .ds-site-header__drawer .ds-drawer__panel[data-state="open"] .ds-drawer__close {

package/components/SiteHeader/SiteHeader.d.ts

@@ -46,11 +46,19 @@ type SiteHeaderOwnProps = {
     sections: SiteHeaderSection[];
     /** The path of the page being viewed, used to mark the current section, row and drawer item. */
     currentHref?: string;
-    /** Controls at the bar's end that stay at every width, such as a search button. */
+    /** Controls at the bar's end that stay at every width, such as a search button; `condensedActions`, when given, stand in for them on the condensed step. */
     actions?: React.ReactNode;
+    /**
+     * The same controls drawn narrower, such as an icon-only CommandPaletteTrigger and a
+     * `cycle` ThemeToggle. When the full row stops fitting, these take the place of
+     * `actions` (the header adds `ds-site-header--condensed`), and the pills fold to the
+     * menu button only when the condensed row does not fit either. Without it the
+     * header folds as soon as the full row stops fitting.
+     */
+    condensedActions?: React.ReactNode;
     /**
      * Controls at the bar's end that show only while the pills fit, such as a
-     * theme toggle. Once the bar folds to its menu button they leave it; put
+     * Get started button. Once the bar folds to its menu button they leave it; put
      * their drawer twin in `drawerFooter`.
      */
     wideActions?: React.ReactNode;
@@ -113,5 +121,5 @@ export interface SiteHeaderProps extends SiteHeaderOwnProps, Omit<React.Componen
  * same sections. The forwarded ref and any unrecognised props target the
  * `<header>`.
  */
-export declare function SiteHeader({ brand, sections, currentHref, actions, wideActions, drawerFooter, drawerOpen: drawerOpenProp, defaultDrawerOpen, onDrawerOpenChange, initialFold, sticky, tintAfter, linkComponent, navLabel, drawerOpenLabel, drawerTitle, drawerCloseLabel, className, ref, ...rest }: SiteHeaderProps): React.JSX.Element;
+export declare function SiteHeader({ brand, sections, currentHref, actions, condensedActions, wideActions, drawerFooter, drawerOpen: drawerOpenProp, defaultDrawerOpen, onDrawerOpenChange, initialFold, sticky, tintAfter, linkComponent, navLabel, drawerOpenLabel, drawerTitle, drawerCloseLabel, className, ref, ...rest }: SiteHeaderProps): React.JSX.Element;
 export {};

package/components/SiteHeader/SiteHeader.js

@@ -19,6 +19,7 @@ function SiteHeader({
   sections,
   currentHref,
   actions,
+  condensedActions,
   wideActions,
   drawerFooter,
   drawerOpen: drawerOpenProp,
@@ -45,12 +46,15 @@ function SiteHeader({
   const navRef = useRef(null);
   const wideRef = useRef(null);
   const actionsRef = useRef(null);
+  const condensedActionsRef = useRef(null);
   const panelRef = useRef(null);
   const menuButtonRef = useRef(null);
   const closeTimer = useRef(void 0);
   const returningFocus = useRef(false);
+  const lockedGutter = useRef(0);
   const [openId, setOpenId] = useState(null);
   const [shownId, setShownId] = useState(null);
+  const [condensed, setCondensed] = useState(false);
   const [folded, setFolded] = useState(false);
   const [measured, setMeasured] = useState(false);
   const [drawerOffset, setDrawerOffset] = useState({});
@@ -59,6 +63,7 @@ function SiteHeader({
   const drawerOpen = drawerOpenProp ?? drawerOpenState;
   const setDrawerOpen = useCallback(
     (next) => {
+      lockedGutter.current = next ? window.innerWidth - document.documentElement.clientWidth : 0;
       if (drawerOpenProp === void 0) setDrawerOpenState(next);
       onDrawerOpenChange?.(next);
     },
@@ -73,23 +78,33 @@ function SiteHeader({
     const bar = barRef.current;
     if (!bar) return;
     const measure = () => {
-      const style = getComputedStyle(bar);
-      const gap = parseFloat(style.columnGap) || 0;
+      const gap = parseFloat(getComputedStyle(bar).columnGap) || 0;
       const navStart = navRef.current ? parseFloat(getComputedStyle(navRef.current).marginInlineStart) || 0 : 0;
-      const parts = [brandRef.current, navRef.current, wideRef.current, actionsRef.current];
-      const widths = parts.map((el) => el ? el.scrollWidth : 0);
-      const present = widths.filter((w) => w > 0).length;
-      const needed = widths.reduce((sum, w) => sum + w, 0) + navStart + gap * Math.max(present - 1, 0);
-      setFolded(needed > bar.clientWidth);
+      const rowWidth = (actionsEl) => {
+        const parts = [brandRef.current, navRef.current, wideRef.current, actionsEl];
+        const widths = parts.map((el) => el ? el.scrollWidth : 0);
+        const present = widths.filter((w) => w > 0).length;
+        return widths.reduce((sum, w) => sum + w, 0) + navStart + gap * Math.max(present - 1, 0);
+      };
+      const room = bar.clientWidth - lockedGutter.current;
+      const full = rowWidth(actionsRef.current);
+      const tight = condensedActionsRef.current ? rowWidth(condensedActionsRef.current) : full;
+      setCondensed(condensedActionsRef.current != null && full > room);
+      setFolded(tight > room);
       setMeasured(true);
     };
     measure();
     const observer = new ResizeObserver(measure);
-    [bar, brandRef.current, navRef.current, wideRef.current, actionsRef.current].forEach(
-      (el) => el && observer.observe(el)
-    );
+    [
+      bar,
+      brandRef.current,
+      navRef.current,
+      wideRef.current,
+      actionsRef.current,
+      condensedActionsRef.current
+    ].forEach((el) => el && observer.observe(el));
     return () => observer.disconnect();
-  }, [sections, actions, wideActions, brand]);
+  }, [sections, actions, condensedActions, wideActions, brand]);
   useEffect(() => {
     if (!sticky) return;
     let frame = 0;
@@ -108,12 +123,11 @@ function SiteHeader({
     };
   }, [sticky, tintAfter]);
   useEffect(() => () => clearTimeout(closeTimer.current), []);
-  useLayoutEffect(() => {
-    if (!drawerOpen) return;
+  const placeDrawer = useCallback(() => {
     const bar = barRef.current;
     if (!bar) return;
     const rtl = isRtl(bar);
-    const start = (rect) => rtl ? window.innerWidth - rect.right : rect.left;
+    const start = (rect) => rtl ? document.documentElement.clientWidth - rect.right : rect.left;
     const barRect = bar.getBoundingClientRect();
     const offsets = {
       "--ds-site-header-height": `${bar.offsetHeight}px`,
@@ -126,7 +140,17 @@ function SiteHeader({
       offsets["--ds-site-header-close-start"] = `${start(button)}px`;
     }
     setDrawerOffset(offsets);
-  }, [drawerOpen]);
+  }, []);
+  useLayoutEffect(() => {
+    if (!drawerOpen) {
+      lockedGutter.current = 0;
+      return;
+    }
+    placeDrawer();
+  }, [drawerOpen, placeDrawer]);
+  useEffect(() => {
+    if (drawerOpen) placeDrawer();
+  }, [drawerOpen, placeDrawer]);
   const openSection = useCallback((id) => {
     clearTimeout(closeTimer.current);
     setOpenId(id);
@@ -173,6 +197,7 @@ function SiteHeader({
   const classes = [
     baseClass,
     sticky && `${baseClass}--sticky`,
+    condensed && `${baseClass}--condensed`,
     folded && `${baseClass}--folded`,
     !measured && initialFold !== "never" && `${baseClass}--prefold-${initialFold}`,
     className
@@ -247,7 +272,16 @@ function SiteHeader({
         );
       }) }),
       /* @__PURE__ */ jsxs("div", { className: `${baseClass}__end`, children: [
-        actions && /* @__PURE__ */ jsx("div", { ref: actionsRef, className: `${baseClass}__actions`, children: actions }),
+        actions && /* @__PURE__ */ jsx("div", { ref: actionsRef, className: `${baseClass}__actions`, inert: condensed, children: actions }),
+        condensedActions && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: condensedActionsRef,
+            className: `${baseClass}__actions ${baseClass}__actions--condensed`,
+            inert: !condensed,
+            children: condensedActions
+          }
+        ),
         wideActions && /* @__PURE__ */ jsx("div", { ref: wideRef, className: `${baseClass}__wide-actions`, inert: folded, children: wideActions }),
         /* @__PURE__ */ jsx(
           CircularButton,
@@ -255,6 +289,7 @@ function SiteHeader({
             ref: menuButtonRef,
             className: [`${baseClass}__menu-button`, drawerOpen && `${baseClass}__menu-button--hidden`].filter(Boolean).join(" "),
             icon: "menu",
+            size: "compact",
             variant: "secondary",
             tone: "neutral",
             ariaLabel: drawerOpenLabel,

package/components/SourceChip/SourceChip.css

@@ -188,7 +188,11 @@ button.ds-source-chip {
 }
 
 .ds-source-chip__preview {
+  /* A manual popover in the top layer while visible
+     (src/behaviors/useTopLayer); the floating layer only ranks it in a
+     browser without the Popover API. */
   z-index: var(--layer-floating);
+  overflow: visible;
   width: max-content;
   max-width: min(320px, calc(100vw - var(--padding-400)));
   padding: var(--padding-300) var(--padding-400);
@@ -216,7 +220,7 @@ button.ds-source-chip {
   display: none;
   opacity: 0;
   transform: translateY(4px);
-  transition-property: opacity, transform, display;
+  transition-property: opacity, transform, display, overlay;
   transition-duration: var(--motion-duration-fast);
   transition-timing-function: var(--motion-ease-standard);
   transition-behavior: allow-discrete;

package/components/SourceChip/SourceChip.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useId, useEffect } from "react";
 import { useAnchoredPosition } from "../../behaviors/useAnchoredPosition.js";
+import { useTopLayer } from "../../behaviors/useTopLayer.js";
 import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import { useLayer } from "../../behaviors/useLayer.js";
 import "./SourceChip.css";
@@ -61,6 +62,7 @@ const SourceChip = React.forwardRef(({ title, index, icon = "language", href, ex
       if (closeOpenPreview === closeThis) closeOpenPreview = null;
     };
   }, [visible]);
+  useTopLayer({ open: visible, panelRef });
   useAnchoredPosition({
     open: visible,
     anchorRef: hostRef,
@@ -135,6 +137,7 @@ const SourceChip = React.forwardRef(({ title, index, icon = "language", href, ex
             ref: panelRef,
             id: panelId,
             role: "tooltip",
+            popover: "manual",
             className: `${baseClass}__preview${visible ? ` ${baseClass}__preview--visible` : ""}`,
             children: [
               (logo || source || meta || href) && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__preview-top`, children: [

package/components/TableToolbar/TableToolbar.css

@@ -1,7 +1,7 @@
 /* ============================================
    TABLE TOOLBAR
    The control bar over a table: search, filter chips, the More panel's columns,
-   the density switch, the count and actions, in one row that wraps.
+   the density switch, the count, the actions and the AI command, in one line.
    ============================================ */
 
 .ds-table-toolbar {
@@ -63,6 +63,17 @@
   flex-shrink: 0;
 }
 
+/* Folded, the start cluster holds only the AI command, at its own size. */
+.ds-table-toolbar--narrow .ds-table-toolbar__start {
+  flex: 0 0 auto;
+}
+
+/* Folded, search moves into the end cluster and the start cluster is empty:
+   out of the row, so its gap cannot push the controls off the table's edge. */
+.ds-table-toolbar__start:empty {
+  display: none;
+}
+
 /* The search field flexes between a floor and a ceiling: the line wraps
    against its basis, so chips take the room it would otherwise hold, and it
    grows into room nothing else uses. */
@@ -109,6 +120,7 @@
    chip's editor) holds its pressed fill until the panel closes, so the
    bar says which control the open panel belongs to. */
 .ds-table-toolbar .ds-circular-button--tertiary[aria-expanded='true'],
+.ds-table-toolbar .ds-circular-button--secondary-neutral[aria-expanded='true'],
 .ds-table-toolbar .ds-chip[aria-expanded='true'],
 .ds-table-toolbar .ds-button[aria-expanded='true'] {
   background-color: var(--color-action-passive-bg-active);
@@ -291,7 +303,7 @@
 
 /* A count on an icon's top-end corner, drawn as BottomNav's count badge:
    a solid pill on the count badge pair, so it reads at a glance on the
-   filled icon buttons in both modes. */
+   outlined icon buttons in both modes. */
 .ds-table-toolbar__badge {
   position: absolute;
   inset-block-start: calc(-1 * var(--padding-100));
@@ -371,8 +383,68 @@
   min-width: 0;
 }
 
+/* A row that takes over the bar: the bar's controls fade out, then the row
+   comes in. Coming back is the reverse. The bar stays laid out throughout, so the
+   row never changes height. */
+.ds-table-toolbar__start > *,
+.ds-table-toolbar__end {
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard) var(--motion-duration-fast);
+}
+
 .ds-table-toolbar__main[data-covered] {
   visibility: hidden;
+  transition: visibility 0s linear calc(var(--motion-duration-fast) + var(--motion-duration-base));
+}
+
+.ds-table-toolbar__main[data-covered] .ds-table-toolbar__start > *,
+.ds-table-toolbar__main[data-covered] .ds-table-toolbar__end {
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* The AI button collapses to the circle the row's close button takes over,
+   clipped from its far end. Only while it does: a clip at rest would make the
+   button a stacking context and paint its glow over its fill. */
+.ds-table-toolbar__start > .ds-table-toolbar__command {
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard) var(--motion-duration-fast);
+}
+
+.ds-table-toolbar__main[data-covered='command'] .ds-table-toolbar__start > .ds-table-toolbar__command {
+  --ds-table-toolbar-circle: var(--control-height-default);
+  /* ds-allow(physical): inset() has no logical form; the rtl rule below mirrors it */
+  --ds-table-toolbar-collapsed: inset(0 calc(100% - var(--ds-table-toolbar-circle)) 0 0 round var(--radius-pill));
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard) var(--motion-duration-base);
+  animation: ds-table-toolbar-collapse var(--motion-duration-base) var(--motion-ease-standard) forwards;
+}
+
+.ds-table-toolbar__main[data-covered='command'] .ds-table-toolbar__start > .ds-table-toolbar__command.ds-ai-button--compact {
+  --ds-table-toolbar-circle: var(--control-height-compact);
+}
+
+.ds-table-toolbar__main[data-covered='command'] .ds-table-toolbar__start > .ds-table-toolbar__command:dir(rtl) {
+  /* ds-allow(physical): the mirror of the rule above */
+  --ds-table-toolbar-collapsed: inset(0 0 0 calc(100% - var(--ds-table-toolbar-circle)) round var(--radius-pill));
+}
+
+@keyframes ds-table-toolbar-collapse {
+  from {
+    clip-path: inset(calc(var(--gap-400) * -1) calc(var(--gap-400) * -1) round var(--radius-pill));
+  }
+  to {
+    clip-path: var(--ds-table-toolbar-collapsed);
+  }
+}
+
+/* The bulk bar fades in as the bar finishes fading out. */
+.ds-table-toolbar__bulk:not(.ds-table-toolbar__bulk--floating) {
+  animation: ds-table-toolbar-row-in var(--motion-duration-base) var(--motion-ease-entrance) var(--motion-duration-fast) backwards;
+}
+
+@keyframes ds-table-toolbar-row-in {
+  from {
+    opacity: 0;
+  }
 }
 
 .ds-table-toolbar__bulk {
@@ -498,3 +570,61 @@
   display: inline-flex;
   flex-shrink: 0;
 }
+
+/* The AI command's row: it covers the bar as the bulk bar does, the composer
+   taking all of it after the close button. Shut, it stays laid out and out of
+   sight. Opening, the close button arrives as the AI button finishes collapsing
+   and the composer opens out from beside it; closing, both leave first. */
+.ds-table-toolbar__command-row {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-200);
+  visibility: hidden;
+  pointer-events: none;
+  transition: visibility 0s linear var(--motion-duration-fast);
+}
+
+.ds-table-toolbar__command-row[data-open] {
+  visibility: visible;
+  pointer-events: auto;
+  transition: visibility 0s;
+}
+
+.ds-table-toolbar__command-row .ds-composer {
+  flex: 1;
+  min-width: 0;
+  opacity: 0;
+  /* ds-allow(physical): inset() has no logical form; the rtl rule below mirrors it */
+  clip-path: inset(0 100% 0 0 round var(--radius-300));
+  transition:
+    opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    clip-path var(--motion-duration-fast) var(--motion-ease-standard),
+    border-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-table-toolbar__command-row .ds-composer:dir(rtl) {
+  /* ds-allow(physical): the mirror of the rule above */
+  clip-path: inset(0 0 0 100% round var(--radius-300));
+}
+
+.ds-table-toolbar__command-row[data-open] .ds-composer {
+  opacity: 1;
+  clip-path: inset(0 0 0 0 round var(--radius-300));
+  transition:
+    opacity var(--motion-duration-base) var(--motion-ease-entrance) var(--motion-duration-base),
+    clip-path var(--motion-duration-base) var(--motion-ease-entrance) var(--motion-duration-base),
+    border-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-table-toolbar__command-close {
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-table-toolbar__command-row[data-open] .ds-table-toolbar__command-close {
+  opacity: 1;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard) var(--motion-duration-base);
+}