rift-ds 1.18.0 → 1.19.0

package/behaviors/useAnchoredPosition.d.ts

@@ -4,7 +4,9 @@
  * hover cards, tooltips).
  *
  * The panel stays where it is in the DOM, so it keeps the trigger's stacking
- * context and any theme scoped above it, but is `position: fixed`, placed
+ * context (a tooltip excepted, which paints in the top layer through
+ * src/behaviors/useTopLayer) and any theme scoped above it, but is
+ * `position: fixed`, placed
  * from the anchor's rectangle. A fixed panel is not clipped by an ancestor's
  * `overflow`, which is what lets a menu inside a table's scroll wrapper, a
  * rail or a card show whole. Portals would escape the same way but would

package/behaviors/useAnchoredPosition.js

@@ -2,6 +2,7 @@
 import { useRef, useLayoutEffect } from "react";
 import { isRtl } from "./direction.js";
 function fixedContainingBlock(element) {
+  if (element.matches(":popover-open")) return null;
   for (let node = element.parentElement; node; node = node.parentElement) {
     const style = getComputedStyle(node);
     const read = (property) => style.getPropertyValue(property).trim();

package/behaviors/useTopLayer.d.ts

@@ -0,0 +1,35 @@
+import { RefObject } from 'react';
+/**
+ * Lifts a panel into the browser's top layer while `open`, so it paints
+ * above everything on the page: every z-index, every stacking context, every
+ * `overflow` clip. Tooltips always sit here; no layer token can rank above
+ * the top layer, so nothing a page or a host does can cover one.
+ *
+ * The panel renders with `popover="manual"` and this hook calls
+ * `showPopover()` / `hidePopover()`. A panel that must stay in the
+ * accessibility tree at rest (SegmentedControl's segment labels, which are
+ * the segments' names) cannot carry the attribute, since a closed popover is
+ * `display: none`; the hook adds it for as long as the panel is shown and
+ * takes it off again. A manual popover has no light dismiss
+ * and closes no other popover, so dismissal stays with the shared layer
+ * stack (src/behaviors/useLayer). The panel keeps its place in the DOM, so
+ * it still inherits the custom properties of any theme scoped above it; only
+ * where it paints changes.
+ *
+ * Call it before useAnchoredPosition in the component: layout effects run in
+ * order, and the anchored hook must see the panel already in the top layer,
+ * where the viewport is its containing block whatever its ancestors
+ * transform (`fixedContainingBlock` returns null for an open popover).
+ *
+ * The panel's CSS adds `overlay` to its transition list with
+ * `allow-discrete`, so the exit fade still plays in the top layer, and sets
+ * `overflow: visible` over the popover default so an arrow outside the box
+ * still draws. A browser without the Popover API leaves the panel where it
+ * was, stacking at its layer token.
+ */
+export declare function useTopLayer({ open, panelRef, target, }: {
+    open: boolean;
+    panelRef: RefObject<HTMLElement | null>;
+    /** Changes when the ref is pointed at a different panel, as useAnchoredPosition's `target`. */
+    target?: unknown;
+}): void;

package/behaviors/useTopLayer.js

@@ -0,0 +1,22 @@
+"use client";
+import { useLayoutEffect } from "react";
+function useTopLayer({
+  open,
+  panelRef,
+  target
+}) {
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!open || !panel || typeof panel.showPopover !== "function") return;
+    const added = !panel.hasAttribute("popover");
+    if (added) panel.setAttribute("popover", "manual");
+    if (!panel.matches(":popover-open")) panel.showPopover();
+    return () => {
+      if (panel.isConnected && panel.matches(":popover-open")) panel.hidePopover();
+      if (added) panel.removeAttribute("popover");
+    };
+  }, [open, panelRef, target]);
+}
+export {
+  useTopLayer
+};

package/chat/ChatLauncher.js

@@ -82,6 +82,29 @@ function ChatLauncher({
   }, [showPanel, isDocked, side, takeover, hostAttribute]);
   useScrollLock(modal && !takeover);
   const panelRef = useRef(null);
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    const vv = window.visualViewport;
+    if (!showPanel || !takeover || !panel || !vv) return;
+    let frame = 0;
+    const sync = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        panel.style.setProperty("--ds-chat-viewport-height", `${vv.height}px`);
+        panel.style.setProperty("--ds-chat-viewport-top", `${vv.offsetTop}px`);
+      });
+    };
+    sync();
+    vv.addEventListener("resize", sync);
+    vv.addEventListener("scroll", sync);
+    return () => {
+      cancelAnimationFrame(frame);
+      vv.removeEventListener("resize", sync);
+      vv.removeEventListener("scroll", sync);
+      panel.style.removeProperty("--ds-chat-viewport-height");
+      panel.style.removeProperty("--ds-chat-viewport-top");
+    };
+  }, [showPanel, takeover]);
   const wasOpen = useRef(false);
   useEffect(() => {
     if (wasOpen.current && !open) {

package/chat/ChatWidget.css

@@ -1207,13 +1207,18 @@ html[data-chat-resizing] .ds-chat-launcher__panel--floating .ds-chat-header {
    way the browser handles any page with a field at the bottom. The launcher
    reads the same threshold as TAKEOVER_QUERY; this rule covers the first
    render, before a media query has been read, so the two must stay in step.
-   No transition: there is no card form to glide from. */
+   No transition: there is no card form to glide from. Once open, the
+   launcher writes the visual viewport's height and pan here, so the
+   composer ends at the keyboard and the header stays on screen; 100dvh is
+   the first paint's height and the fallback without visualViewport. */
 @media (max-width: 719px) {
   .ds-chat-launcher__panel {
     position: relative;
-    top: auto;
+    /* A relative offset, not a transform: a transform would become the
+       containing block of every fixed popup inside the panel. */
+    top: var(--ds-chat-viewport-top, 0px);
     left: auto;
-    height: 100dvh;
+    height: var(--ds-chat-viewport-height, 100dvh);
     width: 100%;
     max-width: none;
     border: none;

package/components/AiButton/AiButton.css

@@ -279,6 +279,7 @@
    focus outline is its signal, as on Button, and a widened ring inside it
    would read as two concentric strokes. */
 .ds-ai-button:hover::before,
+.ds-ai-button[aria-expanded='true']::before,
 .ds-ai-button--busy::before,
 .ds-ai-button--done::before,
 .ds-ai-button--error::before {
@@ -287,6 +288,7 @@
 }
 
 .ds-ai-button:hover::after,
+.ds-ai-button[aria-expanded='true']::after,
 .ds-ai-button--busy::after,
 .ds-ai-button--done::after,
 .ds-ai-button--error::after {
@@ -339,6 +341,15 @@
   --icon-size: var(--icon-size-500);
 }
 
+.ds-ai-button--icon-only {
+  width: var(--control-height-default);
+  padding: 0;
+}
+
+.ds-ai-button--compact.ds-ai-button--icon-only {
+  width: var(--control-height-compact);
+}
+
 /* Reduced motion: the ring and glow stay, the turning stops. */
 /* ds-allow(motion): parks a looping animation, which the collapsed duration would strobe rather than stop (the ring's turn and the busy spin), and drops the status icon's entrance. */
 @media (prefers-reduced-motion: reduce) {

package/components/AiButton/AiButton.d.ts

@@ -21,6 +21,8 @@ type AiButtonOwnProps = {
     label?: string;
     /** Leading icon — Material Symbol name (string) or custom element (ReactNode) */
     icon?: string | React.ReactNode;
+    /** Draws the button as a circle holding only its icon, for a tight bar. The label stays as its accessible name. */
+    iconOnly?: boolean;
     /** Button size */
     size?: 'default' | 'compact';
     /** Whether the button is disabled */

package/components/AiButton/AiButton.js

@@ -26,6 +26,7 @@ const AiButton = React.forwardRef(
   ({
     label = "Ask AI",
     icon = "auto_awesome",
+    iconOnly = false,
     size = "default",
     disabled,
     state: status,
@@ -164,6 +165,7 @@ const AiButton = React.forwardRef(
       }
     };
     const classes = [
+      iconOnly ? `${baseClass}--icon-only` : "",
       baseClass,
       `${baseClass}--${size}`,
       disabled && `${baseClass}--disabled`,
@@ -183,7 +185,7 @@ const AiButton = React.forwardRef(
         },
         shownStatus
       ) }),
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__text`, children: label })
+      /* @__PURE__ */ jsx("span", { className: iconOnly ? "ds-visually-hidden" : `${baseClass}__text`, children: label })
     ] });
     const control = href && !disabled ? /* @__PURE__ */ jsx(
       Link,

package/components/AppSidebar/AppSidebar.css

@@ -268,6 +268,9 @@
   opacity: 1;
 }
 
+/* The trailing pill holds a beat off the row's end, so it sits as far in
+   from the rail's edge as the icon does at the start. A word is a quiet
+   pill; a count takes the count badge pair (the --count rule below). */
 .ds-app-sidebar__btn-badge {
   font-family: var(--font-caption-family);
   font-size: var(--font-caption-size);
@@ -277,6 +280,7 @@
   background-color: var(--color-bg-container-tertiary);
   border-radius: var(--radius-pill);
   padding: var(--padding-050) var(--padding-200);
+  margin-inline-end: var(--padding-100);
   min-width: 0;
   flex-shrink: 1;
   overflow: hidden;
@@ -288,6 +292,61 @@
   opacity: 1;
 }
 
+/* On a filled row the quiet pill steps back to the page ground, or it
+   would share the row's fill and dissolve into it. */
+.ds-app-sidebar__btn--active .ds-app-sidebar__btn-badge:not(.ds-app-sidebar__btn-badge--count),
+.ds-app-sidebar__btn:hover .ds-app-sidebar__btn-badge:not(.ds-app-sidebar__btn-badge--count),
+.ds-app-sidebar__sub-btn--active .ds-app-sidebar__btn-badge:not(.ds-app-sidebar__btn-badge--count),
+.ds-app-sidebar__sub-btn:hover .ds-app-sidebar__btn-badge:not(.ds-app-sidebar__btn-badge--count) {
+  background-color: var(--color-bg-page-primary);
+}
+
+/* A count: a solid pill on the count badge pair, the "how many" mark
+   BottomNav and TableToolbar share, which reads on any row fill. */
+.ds-app-sidebar__btn-badge--count {
+  color: var(--color-count-badge-text);
+  background-color: var(--color-count-badge-bg);
+}
+
+/* The icon's seat: the same box as the icon, there to anchor the corner
+   copy of the count. */
+.ds-app-sidebar__btn-seat {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+/* The collapsed rail's count rides the icon's top-end corner, BottomNav's
+   badge in size and pair. Its end edge sits on the row's padding edge, so
+   it stays inside the collapsed row's clip, and it grows back over the
+   icon; it fades out as the trailing pill fades in. */
+.ds-app-sidebar__btn-corner-badge {
+  position: absolute;
+  top: calc(var(--padding-100) * -1);
+  inset-inline-end: calc(var(--padding-200) * -1);
+  box-sizing: border-box;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 var(--padding-100);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-count-badge-bg);
+  color: var(--color-count-badge-text);
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-caption-line-height);
+  text-align: center;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn-corner-badge {
+  opacity: 0;
+  transition-duration: var(--motion-duration-fast);
+}
+
 .ds-app-sidebar__btn-chevron {
   --icon-size: var(--icon-size-600);
   color: var(--color-icon-secondary);
@@ -400,15 +459,6 @@
   flex-shrink: 0;
 }
 
-/* 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-app-sidebar__btn--active .ds-app-sidebar__btn-badge,
-.ds-app-sidebar__btn:hover .ds-app-sidebar__btn-badge,
-.ds-app-sidebar__sub-btn--active .ds-app-sidebar__btn-badge,
-.ds-app-sidebar__sub-btn:hover .ds-app-sidebar__btn-badge {
-  background-color: var(--color-bg-page-primary);
-}
-
 .ds-app-sidebar__sub-chevron {
   --icon-size: var(--icon-size-500);
   flex-shrink: 0;

package/components/AppSidebar/AppSidebar.d.ts

@@ -9,7 +9,7 @@ export interface AppSidebarSubItem {
     onClick?: () => void;
     /** Renders the sub-item as a real link to this URL instead of a button. Ignored when the sub-item has children, whose row opens them */
     href?: string;
-    /** 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 entry sits under when it is listed in the panel (see `subNav`); ignored in the accordion */
     group?: string;
@@ -42,7 +42,7 @@ export interface AppSidebarItem {
     onClick?: () => void;
     /** Renders the item as a real link to this URL instead of a button. Ignored when the item has children, whose row is the accordion toggle */
     href?: string;
-    /** Trailing count pill, e.g. unread items; hidden while the rail is collapsed */
+    /** Trailing pill, e.g. unread items. A count takes the count badge colours and, while the rail is collapsed, rides the icon's corner; a word stays a quiet pill, hidden while collapsed */
     badge?: string | number;
     /** Sub-items: an accordion under the row, or the side panel's contents when `subNav="panel"` */
     children?: AppSidebarSubItem[];

package/components/AppSidebar/AppSidebar.js

@@ -14,6 +14,9 @@ import "../../behaviors/direction.css";
 import "../../fonts/material-symbols.css";
 import { mirrorClass } from "../../behaviors/direction.js";
 import { distinctPixelInks } from "../PixelAvatar/pixelInks.js";
+function isCount(badge) {
+  return typeof badge === "number" || /^\d+\+?$/.test(badge.trim());
+}
 function DefaultLogo() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -315,17 +318,20 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
             ].filter(Boolean).join(" ");
             const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("span", { className: `${baseClass}__btn-left`, children: [
-                item.pixelAvatar ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-icon ${baseClass}__btn-icon--avatar`, children: /* @__PURE__ */ jsx(PixelAvatar, { name: avatarSeed(item), ink: avatarInks.get(item.key) }) }) : /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `${baseClass}__btn-icon${typeof item.icon === "string" ? ` material-symbols-rounded ${mirrorClass(item.icon)}` : ""}`,
-                    children: item.icon
-                  }
-                ),
+                /* @__PURE__ */ jsxs("span", { className: `${baseClass}__btn-seat`, children: [
+                  item.pixelAvatar ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-icon ${baseClass}__btn-icon--avatar`, children: /* @__PURE__ */ jsx(PixelAvatar, { name: avatarSeed(item), ink: avatarInks.get(item.key) }) }) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__btn-icon${typeof item.icon === "string" ? ` material-symbols-rounded ${mirrorClass(item.icon)}` : ""}`,
+                      children: item.icon
+                    }
+                  ),
+                  item.badge !== void 0 && isCount(item.badge) && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-corner-badge`, "aria-hidden": "true", children: item.badge })
+                ] }),
                 /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-label`, children: item.label })
               ] }),
               isPanelMode && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-caption`, "aria-hidden": "true", children: item.label }),
-              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-badge`, children: item.badge }),
+              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-badge${isCount(item.badge) ? ` ${baseClass}__btn-badge--count` : ""}`, children: item.badge }),
               hasChildren && /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -391,7 +397,7 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
                     ].filter(Boolean).join(" ");
                     const subLabel = /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx("span", { className: `${baseClass}__sub-label`, children: sub.label }),
-                      sub.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-badge`, children: sub.badge }),
+                      sub.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-badge${isCount(sub.badge) ? ` ${baseClass}__btn-badge--count` : ""}`, children: sub.badge }),
                       subHasChildren && /* @__PURE__ */ jsx(
                         "span",
                         {

package/components/Chart/BarChart.js

@@ -121,6 +121,7 @@ const BarChart = React.forwardRef(({
             Bar,
             {
               ...animation,
+              className: `${baseClass}__bar`,
               dataKey: yKey,
               fill: resolvedBarColor,
               radius: [3, 3, 0, 0],

package/components/Chart/Chart.css

@@ -100,6 +100,12 @@
   position: relative;
 }
 
+/* A bar is a large filled mass, so it takes a wash of its series colour, the
+   way an area fill does; thin marks (lines, dots, swatches) keep the full token. */
+.ds-chart__bar .recharts-rectangle {
+  fill-opacity: 0.45;
+}
+
 /* ============================================
    BARE MODE — the chart sits inside another
    panel that supplies the surface, so its own

package/components/Chart/ComboChart.js

@@ -138,6 +138,7 @@ const ComboChart = React.forwardRef(({
                 Bar,
                 {
                   ...animation,
+                  className: `${baseClass}__bar`,
                   yAxisId: "bar",
                   dataKey: barKey,
                   name: resolvedBarLabel,

package/components/Chart/StackedBarChart.js

@@ -106,6 +106,7 @@ const StackedBarChart = React.forwardRef(({
             Bar,
             {
               ...animation,
+              className: `${baseClass}__bar`,
               dataKey: s.dataKey,
               name: s.label,
               fill: s.color || defaultColors[i % defaultColors.length],

package/components/CommandPaletteTrigger/CommandPaletteTrigger.css

@@ -70,12 +70,24 @@
   padding: 0 var(--padding-200);
 }
 
+/* The compact field's keycaps step down to caption type with no block
+   padding, so they sit inside the shorter row with air around them
+   instead of filling it. */
+.ds-command-palette-trigger--compact .ds-kbd--compact {
+  padding-block: 0;
+  font-size: var(--font-caption-size);
+  line-height: var(--font-caption-line-height);
+}
+
 /* Folded to the icon: a circle the row height across, hovering like the
-   theme picker's trigger rather than like a field. */
+   theme picker's trigger rather than like a field. With no prompt beside it
+   the glyph is the control, so it takes the icon colour the family's other
+   circles wear rather than the field's placeholder tone. */
 .ds-command-palette-trigger--icon-only {
   justify-content: center;
   width: var(--control-height-default);
   padding: 0;
+  color: var(--color-action-icon-default);
 }
 
 .ds-command-palette-trigger--compact.ds-command-palette-trigger--icon-only {

package/components/Composer/Composer.css

@@ -633,3 +633,75 @@
 .ds-composer--disabled.ds-composer--mentions .ds-composer__textarea {
   color: transparent;
 }
+
+/* ============================================
+   COMPACT: the same shell at the compact density
+   ============================================ */
+.ds-composer--compact {
+  --ds-composer-send-size: var(--control-height-compact);
+  --ds-composer-text-inset: var(--padding-300);
+  /* Concentric on this density's tighter ring. */
+  --ds-composer-radius: calc(
+    min(var(--radius-pill), var(--ds-composer-send-size) / 2) + var(--padding-100) + var(--border-025)
+  );
+}
+
+.ds-composer--compact .ds-composer__content {
+  padding-block: var(--padding-200) var(--padding-100);
+  height: calc(var(--ds-composer-text-height, var(--font-paragraph-sm-line-height)) + var(--padding-200) + var(--padding-100));
+}
+
+.ds-composer--compact .ds-composer__textarea {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  max-height: calc(var(--ds-composer-max-rows, 8) * var(--font-paragraph-sm-line-height));
+}
+
+.ds-composer--compact .ds-composer__footer {
+  padding: var(--padding-100);
+}
+
+/* ============================================
+   INLINE: one row at the control height, the send button on the text's line.
+   The shell is an input here, so it does not float, and the button sits
+   inside the height, concentric on a thinner ring.
+   ============================================ */
+.ds-composer--inline {
+  --ds-composer-control: var(--control-height-default);
+  --ds-composer-line: var(--font-paragraph-line-height);
+  --ds-composer-send-size: calc(var(--ds-composer-control) - var(--padding-050) * 2 - var(--border-025) * 2);
+  --ds-composer-radius: calc(
+    min(var(--radius-pill), var(--ds-composer-send-size) / 2) + var(--padding-050) + var(--border-025)
+  );
+  flex-direction: row;
+  align-items: center;
+  box-shadow: none;
+}
+
+.ds-composer--inline.ds-composer--compact {
+  --ds-composer-control: var(--control-height-compact);
+  --ds-composer-line: var(--font-paragraph-sm-line-height);
+}
+
+.ds-composer--inline .ds-composer__content,
+.ds-composer--inline.ds-composer--compact .ds-composer__content {
+  --ds-composer-text-block: calc((var(--ds-composer-control) - var(--ds-composer-line)) / 2 - var(--border-025));
+  flex: 1;
+  min-width: 0;
+  width: auto;
+  padding-block: var(--ds-composer-text-block);
+  padding-inline: var(--ds-composer-text-inset) var(--padding-100);
+  height: calc(var(--ds-composer-text-height, var(--ds-composer-line)) + var(--ds-composer-text-block) * 2);
+}
+
+.ds-composer--inline .ds-composer__footer,
+.ds-composer--inline.ds-composer--compact .ds-composer__footer {
+  flex-shrink: 0;
+  padding: var(--padding-050);
+}
+
+.ds-composer--inline .ds-composer__footer .ds-circular-button {
+  width: var(--ds-composer-send-size);
+  height: var(--ds-composer-send-size);
+}

package/components/Composer/Composer.d.ts

@@ -32,7 +32,11 @@ type ComposerOwnProps = {
     streaming?: boolean;
     /** Fires when the stop button is pressed while `streaming`. */
     onStop?: () => void;
-    /** Growth cap in text rows before the textarea scrolls internally. */
+    /** The density, matching a table's or a bar's: `compact` tightens the padding and takes the smaller text and buttons. */
+    size?: 'default' | 'compact';
+    /** One row with the send button on the text's line, the shell exactly `size`'s control height, so it lines up with an Input or a table's toolbar. For a popover, a sheet or a tight bar. `maxRows` defaults to 1. */
+    inline?: boolean;
+    /** Growth cap in text rows before the textarea scrolls internally. Defaults to 8, or 1 when `inline`. */
     maxRows?: number;
     /**
      * While focused, the shell wears AiButton's slowly rotating gradient ring

package/components/Composer/Composer.js

@@ -34,7 +34,9 @@ const Composer = React.forwardRef(
     onSubmit,
     streaming = false,
     onStop,
-    maxRows = 8,
+    size = "default",
+    inline = false,
+    maxRows = inline ? 1 : 8,
     aiGlow = false,
     context,
     contextIcon,
@@ -362,6 +364,8 @@ const Composer = React.forwardRef(
     const classes = [
       baseClass,
       aiGlow ? `${baseClass}--ai-glow` : "",
+      size === "compact" ? `${baseClass}--compact` : "",
+      inline ? `${baseClass}--inline` : "",
       streaming ? `${baseClass}--streaming` : "",
       disabled ? `${baseClass}--disabled` : "",
       dragging ? `${baseClass}--dragging` : "",
@@ -469,6 +473,7 @@ const Composer = React.forwardRef(
                 {
                   icon: "add",
                   variant: "tertiary",
+                  size,
                   ariaLabel: attachLabel,
                   disabled,
                   onClick: () => fileInputRef.current?.click()
@@ -483,6 +488,7 @@ const Composer = React.forwardRef(
                 {
                   icon: "stop",
                   variant: "primary",
+                  size,
                   ariaLabel: stopLabel,
                   disabled,
                   onClick: onStop
@@ -492,6 +498,7 @@ const Composer = React.forwardRef(
                 {
                   icon: "arrow_upward",
                   variant: "primary",
+                  size,
                   ariaLabel: sendLabel,
                   disabled: !canSend,
                   onClick: submit

package/components/DataTable/DataTable.css

@@ -848,7 +848,10 @@
    read, from a visually hidden thead.
    ============================================ */
 
+/* The wrapper qualifier outranks Table's phone rule, which holds a
+   column table at max-content so it scrolls: cards fit the frame. */
 .ds-data-table__grid--stacked,
+.ds-table__wrapper .ds-data-table__grid--stacked,
 .ds-data-table__grid--stacked > tbody {
   display: block;
   width: 100%;
@@ -901,8 +904,10 @@
   width: auto;
 }
 
+/* The actions close the title line, at its end, with or without a row header beside them. */
 .ds-data-table__grid--stacked .ds-data-table__actions {
   order: 1;
+  margin-inline-start: auto;
 }
 
 /* A row has no drag on a card, and no filler column. */
@@ -922,11 +927,10 @@
   gap: var(--gap-200);
 }
 
+/* A long header wraps in its quarter rather than losing its end. */
 .ds-data-table__stack-label {
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: break-word;
   font-family: var(--font-caption-family);
   font-size: var(--font-caption-size);
   font-weight: var(--font-caption-weight);

package/components/Popover/Popover.d.ts

@@ -19,6 +19,8 @@ type PopoverOwnProps = {
     surface?: 'panel' | 'menu';
     /** Preferred position. `left` and `right` are screen sides; `start` and `end` follow the reading direction, so `end` opens to the right in English and to the left in Arabic. */
     position?: 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end';
+    /** Which edge of the trigger the panel lines up with, on the top and bottom sides. `start` and `end` follow the reading direction. Defaults to `start`. */
+    align?: 'start' | 'end';
     /** Trigger mode */
     trigger?: 'click' | 'hover';
     /** Whether the popover is open (controlled mode) */

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);

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,