rift-ds 1.16.0 → 1.18.0

package/components/SegmentedControl/SegmentedControl.js

@@ -5,6 +5,7 @@ import "./SegmentedControl.css";
 import "../../behaviors/visually-hidden.css";
 import "../../fonts/material-symbols.css";
 import { mirrorClass, logicalArrowKey } from "../../behaviors/direction.js";
+import { useAnchoredPosition } from "../../behaviors/useAnchoredPosition.js";
 const SegmentedControl = React.forwardRef(
   ({
     segments,
@@ -70,6 +71,7 @@ const SegmentedControl = React.forwardRef(
       variantClass,
       fullWidthClass,
       pillReady ? `${baseClass}--pill-ready` : "",
+      !showLabels ? `${baseClass}--icons` : "",
       className
     ].filter(Boolean).join(" ");
     const positionPill = useCallback(
@@ -182,6 +184,28 @@ const SegmentedControl = React.forwardRef(
         }
       };
     }, []);
+    const tipSegmentRef = useRef(null);
+    const tipLabelRef = useRef(null);
+    const [tip, setTip] = useState(null);
+    const showTip = (target) => {
+      if (showLabels) return;
+      const segment = target?.closest(`.${baseClass}__segment`);
+      const strip = containerRef.current;
+      const label = segment?.querySelector(`.${baseClass}__label--tip`);
+      if (!segment || !strip || !label) return;
+      tipSegmentRef.current = segment;
+      tipLabelRef.current = label;
+      setTip([...strip.querySelectorAll(`.${baseClass}__segment`)].indexOf(segment));
+    };
+    useAnchoredPosition({
+      open: tip !== null,
+      target: tip,
+      anchorRef: tipSegmentRef,
+      panelRef: tipLabelRef,
+      side: "bottom",
+      align: "center",
+      gapProperty: "--gap-100"
+    });
     const handleKeyDown = (e, idx) => {
       const enabledSegments = segments.filter((s) => !s.disabled);
       const currentEnabledIdx = enabledSegments.findIndex((s) => s.value === segments[idx].value);
@@ -213,54 +237,72 @@ const SegmentedControl = React.forwardRef(
         });
       }
     };
-    return /* @__PURE__ */ jsxs("div", { "aria-label": ariaLabel, ...rest, ref: setRef, className: classes, role: "tablist", children: [
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__pill`, "aria-hidden": "true", ref: pillRef }),
-      segments.map((segment, idx) => {
-        const isActive = segment.value === activeSegment;
-        const btnClasses = [
-          `${baseClass}__segment`,
-          isActive ? `${baseClass}__segment--active` : "",
-          segment.disabled ? `${baseClass}__segment--disabled` : ""
-        ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            className: btnClasses,
-            "aria-selected": isActive,
-            "aria-disabled": segment.disabled || void 0,
-            disabled: segment.disabled,
-            tabIndex: isActive ? 0 : -1,
-            "data-segment-value": segment.value,
-            onClick: () => {
-              if (!segment.disabled) {
-                select(segment.value);
-              }
-            },
-            onKeyDown: (e) => handleKeyDown(e, idx),
-            children: [
-              segment.icon && collapseMode !== "labels" && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: `${baseClass}__icon${typeof segment.icon === "string" ? ` material-symbols-rounded ${mirrorClass(segment.icon)}` : ""}`,
-                  "aria-hidden": "true",
-                  children: segment.icon
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: `${baseClass}__label${collapseMode === "icons" && segment.icon ? ` ${baseClass}__label--hidden ds-visually-hidden` : ""}`,
-                  children: segment.label
-                }
-              )
-            ]
-          },
-          segment.value
-        );
-      })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        ...rest,
+        ref: setRef,
+        className: classes,
+        role: "tablist",
+        onPointerOver: (event) => {
+          rest.onPointerOver?.(event);
+          showTip(event.target);
+        },
+        onFocus: (event) => {
+          rest.onFocus?.(event);
+          showTip(event.target);
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__pill`, "aria-hidden": "true", ref: pillRef }),
+          segments.map((segment, idx) => {
+            const isActive = segment.value === activeSegment;
+            const btnClasses = [
+              `${baseClass}__segment`,
+              isActive ? `${baseClass}__segment--active` : "",
+              segment.disabled ? `${baseClass}__segment--disabled` : ""
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                className: btnClasses,
+                "aria-selected": isActive,
+                "aria-disabled": segment.disabled || void 0,
+                disabled: segment.disabled,
+                tabIndex: isActive ? 0 : -1,
+                "data-segment-value": segment.value,
+                onClick: () => {
+                  if (!segment.disabled) {
+                    select(segment.value);
+                  }
+                },
+                onKeyDown: (e) => handleKeyDown(e, idx),
+                children: [
+                  segment.icon && collapseMode !== "labels" && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__icon${typeof segment.icon === "string" ? ` material-symbols-rounded ${mirrorClass(segment.icon)}` : ""}`,
+                      "aria-hidden": "true",
+                      children: segment.icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${baseClass}__label${!segment.icon ? "" : !showLabels ? ` ${baseClass}__label--tip` : collapseMode === "icons" ? ` ${baseClass}__label--hidden ds-visually-hidden` : ""}`,
+                      children: segment.label
+                    }
+                  )
+                ]
+              },
+              segment.value
+            );
+          })
+        ]
+      }
+    );
   }
 );
 SegmentedControl.displayName = "SegmentedControl";

package/components/Stat/Stat.css

@@ -111,6 +111,63 @@
   margin-bottom: var(--gap-100);
 }
 
+/* ============================================
+   AUTO DELTA — inline while the stat has room,
+   stacked under the label once it is narrow.
+   The root fills its parent and is the size
+   container; the body inside it re-templates.
+   ============================================ */
+
+.ds-stat--delta-auto {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  container: ds-stat / inline-size;
+}
+
+.ds-stat__body {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    'value delta'
+    'label label';
+  justify-items: start;
+  column-gap: var(--gap-200);
+  row-gap: var(--gap-050);
+}
+
+.ds-stat__body .ds-stat__value {
+  grid-area: value;
+}
+
+.ds-stat__body .ds-stat__label {
+  grid-area: label;
+}
+
+.ds-stat__body .ds-stat__delta {
+  grid-area: delta;
+  align-self: end;
+  /* The inline placement's optical baseline. */
+  margin-bottom: var(--gap-100);
+}
+
+/* Too narrow for the value and its delta side by side: the delta drops
+   under the label, the stacked placement's order. */
+@container ds-stat (max-width: 180px) {
+  .ds-stat__body {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      'value'
+      'label'
+      'delta';
+  }
+
+  .ds-stat__body .ds-stat__delta {
+    align-self: start;
+    margin-bottom: 0;
+  }
+}
+
 /* Icons take the colour of the text around them. Explicit, not just
    inherited by default: a consumer stylesheet that sets a colour on
    .material-symbols-rounded itself (a common global default) would

package/components/Stat/Stat.d.ts

@@ -9,8 +9,14 @@ type StatOwnProps = {
     delta?: string;
     /** Direction of the delta — colours it and adds an arrow */
     trend?: 'up' | 'down' | 'neutral';
-    /** Where the delta sits: stacked below the label, or inline to the right of the value, bottom-aligned */
-    deltaPlacement?: 'stacked' | 'inline';
+    /**
+     * Where the delta sits: stacked below the label, inline to the right of the
+     * value (bottom-aligned), or `auto`: inline while the stat has room and
+     * stacked once it is narrow, such as a KPI tile in a two-up phone grid.
+     * `auto` fills its parent's width and reads its own, so it restacks
+     * wherever it sits, whatever the viewport.
+     */
+    deltaPlacement?: 'stacked' | 'inline' | 'auto';
     /** Stat size */
     size?: 'default' | 'large';
     /** The BCP 47 locale a number `value` is written in, such as `ar-EG`. Defaults to `en-US`. This component can render from a Server Component, so it takes the prop alone and reads no LocaleProvider. */

package/components/Stat/Stat.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React from "react";
 import "./Stat.css";
 import "../../fonts/material-symbols.css";
@@ -25,9 +25,10 @@ const Stat = React.forwardRef(
       baseClass,
       `${baseClass}--${size}`,
       deltaPlacement === "inline" ? `${baseClass}--delta-inline` : "",
+      deltaPlacement === "auto" ? `${baseClass}--delta-auto` : "",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+    const parts = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: typeof value === "number" ? formatNumber(value, locale) : value }),
       /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
       delta && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__delta ${baseClass}__delta--${trend}`, children: [
@@ -35,6 +36,7 @@ const Stat = React.forwardRef(
         delta
       ] })
     ] });
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, children: deltaPlacement === "auto" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__body`, children: parts }) : parts });
   }
 );
 Stat.displayName = "Stat";

package/components/TableToolbar/TableToolbar.css

@@ -393,6 +393,12 @@
   min-width: 0;
 }
 
+/* The count and Select all N never give up width: the actions' fit is
+   measured against what they need, and what does not fit folds into More. */
+.ds-table-toolbar__bulk-start {
+  flex-shrink: 0;
+}
+
 /* Actions that do not fit stay laid out out of sight, so they can be measured. */
 .ds-table-toolbar__bulk-end {
   position: relative;

package/components/TableToolbar/TableToolbar.js

@@ -408,12 +408,15 @@ const TableToolbar = React.forwardRef(
     }, [narrow, filterIds, size]);
     const bulkRef = useRef(null);
     const bulkId = useId();
-    const [actionFit, setActionFit] = useState(Number.MAX_SAFE_INTEGER);
+    const [actionFit, setActionFit] = useState({
+      icons: false,
+      shown: Number.MAX_SAFE_INTEGER
+    });
     const bulkOn = Boolean(table?.selectable && table.selectedIds.length > 0);
     const actionIds = bulkActions.map((action) => action.id + action.label).join("|");
     useLayoutEffect(() => {
       const bar = bulkRef.current;
-      if (!bar || narrow || !bulkOn) return;
+      if (!bar || !bulkOn) return;
       const measure = () => {
         const gap = parseFloat(getComputedStyle(bar).columnGap) || 0;
         const start = bar.querySelector(".ds-table-toolbar__bulk-start");
@@ -422,17 +425,25 @@ const TableToolbar = React.forwardRef(
         const endGap = parseFloat(getComputedStyle(end).columnGap) || 0;
         const room = bar.clientWidth - start.getBoundingClientRect().width - gap;
         const buttons = [...end.querySelectorAll(":scope > [data-action]")];
-        const moreWidth = bar.getBoundingClientRect().height + endGap;
-        let used = 0;
-        let n = 0;
-        for (let i = 0; i < buttons.length; i += 1) {
-          const width = buttons[i].getBoundingClientRect().width + (i > 0 ? endGap : 0);
-          const reserve = i < buttons.length - 1 ? moreWidth : 0;
-          if (used + width + reserve > room) break;
-          used += width;
-          n += 1;
+        const square = bar.getBoundingClientRect().height;
+        const full = buttons.reduce((sum, button, i) => sum + button.getBoundingClientRect().width + (i > 0 ? endGap : 0), 0);
+        let next = { icons: false, shown: buttons.length };
+        if (narrow || full > room) {
+          const iconable = buttons.filter((button) => button.hasAttribute("data-iconable")).length;
+          let used = 0;
+          let n = 0;
+          for (let i = 0; i < iconable; i += 1) {
+            const width = square + (i > 0 ? endGap : 0);
+            const reserve = i < buttons.length - 1 ? square + endGap : 0;
+            if (used + width + reserve > room) break;
+            used += width;
+            n += 1;
+          }
+          next = { icons: true, shown: n };
         }
-        setActionFit((previous) => previous === n ? previous : n);
+        setActionFit(
+          (previous) => previous.icons === next.icons && previous.shown === next.shown ? previous : next
+        );
       };
       measure();
       const observer = new ResizeObserver(measure);
@@ -460,14 +471,19 @@ const TableToolbar = React.forwardRef(
       ...bulkActions.filter((action) => !action.destructive),
       ...bulkActions.filter((action) => action.destructive)
     ];
-    const shownActions = narrow ? 0 : Math.min(actionFit, orderedActions.length);
-    const folded = orderedActions.slice(shownActions);
+    const iconFirst = [
+      ...orderedActions.filter((action) => action.icon != null),
+      ...orderedActions.filter((action) => action.icon == null)
+    ];
+    const shownActions = Math.min(actionFit.shown, orderedActions.length);
+    const folded = (actionFit.icons ? iconFirst : orderedActions).slice(shownActions);
     const bulkButton = (action, index) => {
-      const out = index >= shownActions;
+      const out = actionFit.icons || index >= shownActions;
       return /* @__PURE__ */ jsx(
         Button,
         {
           "data-action": "",
+          "data-iconable": action.icon != null || void 0,
           className: out ? "ds-table-toolbar__chip--overflow" : void 0,
           "aria-hidden": out || void 0,
           inert: out || void 0,
@@ -523,7 +539,21 @@ const TableToolbar = React.forwardRef(
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "ds-table-toolbar__bulk-end", children: [
-            !narrow && orderedActions.map(bulkButton),
+            orderedActions.map(bulkButton),
+            actionFit.icons && iconFirst.slice(0, shownActions).map((action) => /* @__PURE__ */ jsx(
+              CircularButton,
+              {
+                icon: action.icon,
+                variant: "secondary",
+                tone: action.destructive ? "destructive" : "neutral",
+                size,
+                ariaLabel: action.label,
+                tooltip: action.label,
+                disabled: action.disabled,
+                onClick: () => action.onSelect(selection)
+              },
+              action.id
+            )),
             folded.length > 0 && /* @__PURE__ */ jsx(
               DropdownMenu,
               {
@@ -902,6 +932,12 @@ const TableToolbar = React.forwardRef(
     );
     const active = views.find((v) => v.id === activeViewId) ?? views[0];
     const dirty = Boolean(table && active && !table.viewMatches(active.view));
+    const appliedStart = useRef(false);
+    useEffect(() => {
+      if (appliedStart.current || !table) return;
+      appliedStart.current = true;
+      if (active && !table.viewMatches(active.view)) table.applyView(active.view);
+    }, [table]);
     const [renaming, setRenaming] = useState(null);
     const commitRename = () => {
       const name = renaming?.trim();

package/components/ThemeToggle/ThemeToggle.css

@@ -3,80 +3,10 @@
    The colour-mode control. It is a
    SegmentedControl, which draws every pixel;
    this root keeps the strip at its own width
-   in a squeezed row, and dresses the icon-only
-   form.
+   in a squeezed row. The icon-only form, its
+   tooltips included, is SegmentedControl's.
    ============================================ */
 
 .ds-theme-toggle {
   flex-shrink: 0;
 }
-
-/* ============================================
-   ICON STRIP (showLabels={false})
-   The glyphs alone, with each label turned
-   into the segment's tooltip: it appears below
-   the segment on hover and keyboard focus, on
-   Tooltip's surface, so "routine" is never
-   left to be guessed as System. The component
-   places the label with the shared
-   anchored-position behaviour, so a seat that
-   clips cannot cut it off, and it flips above
-   the strip when there is no room below. The label
-   stays in the accessibility tree as the
-   segment's name. This is the documentation
-   site's header toggle, moved into the
-   package so a consumer's strip behaves the
-   same.
-   ============================================ */
-
-.ds-theme-toggle--icons .ds-segmented-control__label {
-  /* Out of flow at rest; the behaviour makes it fixed once it shows. */
-  position: absolute;
-  z-index: var(--layer-floating);
-  padding: var(--padding-150) var(--padding-200);
-  border-radius: var(--radius-100);
-  border: var(--border-025) solid var(--color-bg-container-border);
-  background-color: var(--color-bg-page-primary);
-  color: var(--color-text-primary);
-  box-shadow: var(--shadow-floating);
-  font-family: var(--font-paragraph-sm-family);
-  font-size: var(--font-paragraph-sm-size);
-  font-weight: var(--font-paragraph-sm-weight);
-  line-height: var(--font-paragraph-sm-line-height);
-  letter-spacing: var(--font-paragraph-sm-letter-spacing);
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transform: translateY(calc(-1 * var(--gap-100)));
-  transition:
-    opacity var(--motion-duration-fast) var(--motion-ease-standard),
-    transform var(--motion-duration-fast) var(--motion-ease-standard);
-}
-
-/* --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. */
-.ds-theme-toggle--icons .ds-segmented-control__segment:hover .ds-segmented-control__label,
-.ds-theme-toggle--icons .ds-segmented-control__segment:focus-visible .ds-segmented-control__label {
-  opacity: 1;
-  transform: none;
-  transition-delay: var(--motion-duration-slow);
-}
-
-/* Flipped above the strip, it slides down into place instead. */
-.ds-theme-toggle--icons .ds-segmented-control__label[data-side='top'] {
-  transform: translateY(var(--gap-100));
-}
-
-/* Without an inline label a segment's asymmetric padding reads lopsided:
-   square each one into an even pill around its glyph. */
-.ds-theme-toggle--icons .ds-segmented-control__segment {
-  padding-inline: var(--padding-200);
-}
-
-/* ds-allow(motion): drops the label tooltip's slide outright rather than playing it at 0.01ms. */
-@media (prefers-reduced-motion: reduce) {
-  .ds-theme-toggle--icons .ds-segmented-control__label {
-    transition: none;
-  }
-}

package/components/ThemeToggle/ThemeToggle.d.ts

@@ -13,7 +13,7 @@ type ThemeToggleOwnProps = {
     defaultValue?: ColorModeSetting;
     /** Fires with the setting after every pick, controlled or not. */
     onValueChange?: (value: ColorModeSetting) => void;
-    /** Control size, on SegmentedControl's scale. */
+    /** Control size, on SegmentedControl's scale: `default` (the default), the height of the CommandPaletteTrigger and AiButton beside it in a top bar, or `compact`. */
     size?: 'default' | 'compact';
     /** Show each segment's label beside its icon. Set `false` for an icon-only strip: each label becomes the segment's tooltip on hover and keyboard focus, and stays its accessible name. */
     showLabels?: boolean;

package/components/ThemeToggle/ThemeToggle.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect } from "react";
 import { SegmentedControl } from "../SegmentedControl/SegmentedControl.js";
-import { useAnchoredPosition } from "../../behaviors/useAnchoredPosition.js";
 import { DEFAULT_COLOR_MODE_STORAGE_KEY } from "./colorMode.js";
 import { useColorMode } from "./useColorMode.js";
 import "./ThemeToggle.css";
@@ -11,7 +10,7 @@ const ThemeToggle = React.forwardRef(
     value,
     defaultValue,
     onValueChange,
-    size = "compact",
+    size = "default",
     showLabels = true,
     storageKey,
     systemLabel = "System",
@@ -32,33 +31,6 @@ const ThemeToggle = React.forwardRef(
       }
       if (stored === null) setSetting(defaultValue);
     }, []);
-    const stripRef = useRef(null);
-    const segmentRef = useRef(null);
-    const labelRef = useRef(null);
-    const [tip, setTip] = useState(null);
-    const setStripRef = (node) => {
-      stripRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    };
-    const showTip = (target) => {
-      if (showLabels) return;
-      const segment = target?.closest(".ds-segmented-control__segment");
-      const strip = stripRef.current;
-      if (!segment || !strip) return;
-      segmentRef.current = segment;
-      labelRef.current = segment.querySelector(".ds-segmented-control__label");
-      setTip([...strip.querySelectorAll(".ds-segmented-control__segment")].indexOf(segment));
-    };
-    useAnchoredPosition({
-      open: tip !== null,
-      target: tip,
-      anchorRef: segmentRef,
-      panelRef: labelRef,
-      side: "bottom",
-      align: "center",
-      gapProperty: "--gap-100"
-    });
     const segments = [
       { value: "system", label: systemLabel, icon: "routine" },
       { value: "light", label: lightLabel, icon: "light_mode" },
@@ -69,15 +41,7 @@ const ThemeToggle = React.forwardRef(
       {
         "aria-label": ariaLabel,
         ...rest,
-        ref: setStripRef,
-        onPointerOver: (event) => {
-          rest.onPointerOver?.(event);
-          showTip(event.target);
-        },
-        onFocus: (event) => {
-          rest.onFocus?.(event);
-          showTip(event.target);
-        },
+        ref,
         className: ["ds-theme-toggle", !showLabels && "ds-theme-toggle--icons", className].filter(Boolean).join(" "),
         segments,
         value: setting,
@@ -87,7 +51,7 @@ const ThemeToggle = React.forwardRef(
           onValueChange?.(next);
         },
         size,
-        showLabels: true
+        showLabels
       }
     );
   }

package/components/registry.json

@@ -139,7 +139,7 @@
       "name": "AppLayout",
       "label": "App layout",
       "slug": "app-layout",
-      "description": "Full-page template pairing the collapsible App sidebar with a centred content area.",
+      "description": "Full-page template pairing the collapsible App sidebar with a content area, centred or set in an inset surface.",
       "category": "layout",
       "client": true
     },

package/components/registry.json.d.ts

@@ -139,7 +139,7 @@ declare const _default: {
       "name": "AppLayout",
       "label": "App layout",
       "slug": "app-layout",
-      "description": "Full-page template pairing the collapsible App sidebar with a centred content area.",
+      "description": "Full-page template pairing the collapsible App sidebar with a content area, centred or set in an inset surface.",
       "category": "layout",
       "client": true
     },