rift-ds 1.17.0 → 1.19.0

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;
@@ -621,13 +671,12 @@
   inset-inline-start: calc(var(--ds-sidebar-float-inset, 20px) + 280px + var(--gap-300));
 }
 
-/* Inset: the side panel joins the rail on the shell plane, with no borders
-   between them, so rail and panel read as one column of navigation and the
-   inset content surface starts beyond both (AppLayout reserves the panel's
-   width while it shows). */
+/* Inset: the side panel joins the rail on the shell plane, one hairline
+   divider between the two levels, and the inset content surface starts
+   beyond both (AppLayout reserves the panel's width while it shows). The
+   trailing edge needs no border: the surface's own edge ends the panel. */
 .ds-app-sidebar__panel--inset {
   background-color: var(--color-bg-app-shell);
-  border-inline-start-color: transparent;
   border-inline-end-color: transparent;
 }
 
@@ -638,85 +687,126 @@
    widens to 80px and names every destination:
    a pill indicator behind the icon, the label
    beneath (the navigation-rail pattern).
+
+   Expand/collapse holds one seat, as ThreadPanel
+   does: the logo, every icon and the avatar sit
+   at the same x and y in both states, so only the
+   rail's width, the rows' explicit heights and
+   the labels' opacity move. The caption under the
+   icon fades out as the inline label fades in.
    ============================================ */
 .ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) {
   width: 80px;
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__logo {
-  /* Centres the 24px mark in the 80px rail: (80 - 24) / 2. */
-  padding: 0 calc(var(--padding-500) + var(--padding-200));
+/* The seat: 12px row margin + 16px row padding puts every 24px icon's
+   centre on the 80px rail's centre line (28 + 12 = 40), and the logo,
+   the category labels and the profile row share that leading edge. */
+.ds-app-sidebar--panel-mode .ds-app-sidebar__logo {
+  padding-inline-start: calc(var(--padding-500) + var(--padding-200));
+}
+
+.ds-app-sidebar--panel-mode .ds-app-sidebar__category {
+  padding-inline-start: calc(var(--padding-500) + var(--padding-200));
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__nav {
+.ds-app-sidebar--panel-mode .ds-app-sidebar__nav {
   gap: 0;
+  transition: gap var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn {
-  height: auto;
-  margin: 0 var(--padding-100);
-  /* Room between the content and the focus ring; the rows' spacing lives
-     here rather than in the nav gap, so the rhythm is unchanged. */
-  padding: var(--padding-100) 0;
-  justify-content: center;
-  border-radius: var(--radius-300);
+.ds-app-sidebar--panel-mode.ds-app-sidebar--expanded .ds-app-sidebar__nav {
+  gap: var(--gap-100);
+}
+
+/* The icon is pinned to the row's top in both states, so it holds its
+   y while the row's height glides between its two explicit values. */
+.ds-app-sidebar--panel-mode .ds-app-sidebar__btn {
+  position: relative;
+  isolation: isolate;
+  align-items: flex-start;
+  /* Collapsed: the 32px indicator, the caption beneath it, a 4px beat
+     above, between and below. */
+  height: calc(32px + var(--font-caption-line-height) + var(--padding-100) * 3);
+  margin: 0 var(--padding-300);
+  padding: var(--padding-200) var(--padding-200) var(--padding-200) var(--padding-400);
   overflow: visible;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    height var(--motion-duration-slow) var(--motion-ease-emphasized);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn:hover,
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active {
-  background-color: transparent;
+.ds-app-sidebar--panel-mode.ds-app-sidebar--expanded .ds-app-sidebar__btn {
+  height: 40px;
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-left {
-  flex-direction: column;
-  gap: var(--gap-100);
-  width: 100%;
+.ds-app-sidebar--panel-mode .ds-app-sidebar__btn-left {
+  height: 24px;
 }
 
-/* The trailing chevron and count pill are faded out on any collapsed
-   rail, but faded still takes width: on this centred column it pushed
-   the icon and label off centre. Here they leave the layout outright. */
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-chevron,
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-badge {
-  display: none;
+.ds-app-sidebar--panel-mode .ds-app-sidebar__btn-chevron {
+  flex-shrink: 0;
 }
 
 /* The indicator: a 56 x 32 pill behind the icon carries hover and the
-   selection, so the label stays legible on the page ground. */
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+   selection while collapsed, so the caption stays legible on the page
+   ground; expanded, the row's own pill takes over and the two crossfade. */
+.ds-app-sidebar--panel-mode .ds-app-sidebar__btn::before {
+  content: '';
+  position: absolute;
+  top: var(--padding-100);
+  inset-inline-start: 0;
+  z-index: -1;
   width: 56px;
   height: 32px;
   border-radius: var(--radius-pill);
+  background-color: transparent;
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn:hover .ds-app-sidebar__btn-icon,
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active .ds-app-sidebar__btn-icon {
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn:hover,
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active {
+  background-color: transparent;
+}
+
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn:hover::before,
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active::before {
   background-color: var(--color-action-passive-bg-hover);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn-label {
-  opacity: 1;
-  max-width: 100%;
+/* The caption: centred under the indicator, the rail's 72px wide
+   (80 less a 4px inset either side), fading out as the rail opens. */
+.ds-app-sidebar__btn-caption {
+  position: absolute;
+  top: calc(32px + var(--padding-100) * 2);
+  inset-inline-start: calc(var(--padding-200) * -1);
+  width: 72px;
   font-family: var(--font-caption-family);
   font-size: var(--font-caption-size);
   font-weight: var(--font-caption-weight);
   line-height: var(--font-caption-line-height);
   letter-spacing: var(--font-caption-letter-spacing);
+  color: var(--color-text-primary);
   text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
   text-overflow: ellipsis;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-app-sidebar--expanded .ds-app-sidebar__btn-caption {
+  opacity: 0;
+  transition-duration: var(--motion-duration-fast);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active .ds-app-sidebar__btn-label {
+.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__btn--active .ds-app-sidebar__btn-caption {
   font-weight: var(--font-paragraph-sm-emphasis-weight);
 }
 
-.ds-app-sidebar--panel-mode:not(.ds-app-sidebar--expanded) .ds-app-sidebar__profile {
-  /* Centres the 40px avatar in the 80px rail. */
+.ds-app-sidebar--panel-mode .ds-app-sidebar__profile {
+  /* Centres the 40px avatar in the 80px rail, and holds it there open. */
   padding: 0 var(--padding-500);
 }
 

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,16 +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 })
               ] }),
-              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-badge`, children: item.badge }),
+              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${isCount(item.badge) ? ` ${baseClass}__btn-badge--count` : ""}`, children: item.badge }),
               hasChildren && /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -390,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,

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;