rift-ds 1.16.0 → 1.17.0

package/bin/templates/blocks/components/blocks/AppShell.tsx

@@ -78,7 +78,7 @@ export function AppShell({ activeKey, breadcrumb, title, actions, children }: Ap
         expanded={expanded}
         onExpandedChange={setExpanded}
         logoText={PRODUCT_NAME}
-        floating
+        layout="floating"
       />
 
       <div className={`${styles.main} ${expanded ? styles.mainExpanded : ''}`}>

package/chat/ChatLauncher.d.ts

@@ -44,6 +44,16 @@ export interface ChatLauncherProps {
     widget?: Omit<ChatWidgetProps, 'fullscreenEnabled' | 'placementEnabled' | 'compact' | 'phone'>;
     /** Rendered inside the panel after the widget: for a host's extra chrome. */
     children?: ReactNode;
+    /**
+     * How the docked panel sits on the page. `raised` (the default) is a glass
+     * card with the floating shadow, inset by `--ds-chat-inset`. `inset` is
+     * flat: the app surface colour, no shadow, border or blur, and the
+     * `--ds-shell-inset` gap, so it matches AppLayout's `inset` content
+     * surface beside it. The overlay below the dock threshold takes the same
+     * gap but keeps its shadow, since it still covers the page; the floating
+     * card and the takeover keep their own look.
+     */
+    surface?: 'raised' | 'inset';
 }
 /**
  * The site-wide panel. Mount it once, after the page content, so it sits
@@ -68,4 +78,4 @@ export interface ChatLauncherProps {
  * touch the host's body). The panel's geometry reads `--ds-chat-width`,
  * `--ds-chat-inset` and `--ds-chat-float-height`, defaulted on `:root`.
  */
-export declare function ChatLauncher({ label, icon, summary, hidden, panelId, hostAttribute, panelLabel, aiButtonLabels, widget, children, }: ChatLauncherProps): import("react").JSX.Element | null;
+export declare function ChatLauncher({ label, icon, summary, hidden, panelId, hostAttribute, panelLabel, aiButtonLabels, widget, children, surface, }: ChatLauncherProps): import("react").JSX.Element | null;

package/chat/ChatLauncher.js

@@ -44,7 +44,8 @@ function ChatLauncher({
   panelLabel = "Chat",
   aiButtonLabels,
   widget,
-  children
+  children,
+  surface = "raised"
 }) {
   const { open, setOpen, panelPhase, view, side, floating, returnFocusRef, send } = useChatWidget();
   const launchSuggestion = (id) => {
@@ -270,6 +271,10 @@ function ChatLauncher({
     side === "left" ? "ds-chat-launcher__panel--left" : "",
     isFloating ? "ds-chat-launcher__panel--floating" : "",
     isFull ? "ds-chat-launcher__panel--full" : "",
+    // Inset: the dock and the overlay both sit at the shell's gap; only the
+    // dock goes flat, since the overlay still covers the page.
+    surface === "inset" && !isFloating && !isFull ? "ds-chat-launcher__panel--inset" : "",
+    surface === "inset" && docked && !isFloating && !isFull ? "ds-chat-launcher__panel--flat" : "",
     panelPhase === "closing" ? "ds-chat-launcher__panel--closing" : ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -332,6 +337,7 @@ function ChatLauncher({
         className: [
           "ds-chat-launcher__dock-handle",
           side === "left" ? "ds-chat-launcher__dock-handle--left" : "",
+          surface === "inset" ? "ds-chat-launcher__dock-handle--inset" : "",
           resizing ? "ds-chat-launcher__dock-handle--resizing" : ""
         ].filter(Boolean).join(" "),
         "aria-hidden": "true",

package/chat/ChatWidget.css

@@ -995,6 +995,22 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
   left: var(--ds-chat-inset); /* ds-allow(physical): the left dock is the screen's left edge */
 }
 
+/* The inset surface (ChatLauncher's surface="inset"). Docked and as an
+   overlay, the panel is held off the edges by the shell's gap rather than
+   the chat's own, so it lines up with AppLayout's inset content surface.
+   Docked, it is also flat: a plane on the app surface colour with no
+   shadow, border or blur. The overlay keeps its shadow over the page. */
+.ds-chat-launcher__panel--inset {
+  --ds-chat-inset: var(--ds-shell-inset, 10px); /* AppSidebar.css declares the gap; the fallback mirrors it */
+}
+
+.ds-chat-launcher__panel--flat {
+  background: var(--color-bg-app-surface);
+  border-color: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
 /* Fullscreen view: a true viewport takeover. The stronger blur keeps the
    transcript readable while the page's colours still shine through. The
    border fades rather than vanishing, so the geometry never snaps mid-glide. */
@@ -1047,6 +1063,11 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
   left: calc(var(--ds-chat-inset) + var(--ds-chat-width) - 10px); /* ds-allow(physical): the dock grip tracks the docked card's screen edge */
 }
 
+/* The inset surface's dock sits at the shell's gap, so its grip does too. */
+.ds-chat-launcher__dock-handle--inset {
+  --ds-chat-inset: var(--ds-shell-inset, 10px); /* AppSidebar.css declares the gap; the fallback mirrors it */
+}
+
 .ds-chat-launcher__dock-handle::after {
   content: "";
   width: 4px;

package/components/AppLayout/AppLayout.css

@@ -19,7 +19,7 @@
   /* The rail's width plus, while it shows, the side panel's. */
   margin-inline-start: calc(var(--ds-app-layout-rail, 64px) + var(--ds-app-layout-panel, 0px));
   padding: var(--padding-1000) var(--padding-500);
-  transition: margin-left var(--motion-duration-slow) var(--motion-ease-emphasized);
+  transition: margin-inline-start var(--motion-duration-slow) var(--motion-ease-emphasized);
   min-width: 0;
 }
 
@@ -47,6 +47,72 @@
   gap: var(--gap-1000);
 }
 
+/* ============================================
+   FLOATING LAYOUT — the rail floats as a glass
+   card, so the main column clears its inset on
+   both sides of it
+   ============================================ */
+.ds-app-layout--floating .ds-app-layout__main {
+  margin-inline-start: calc(
+    var(--ds-app-layout-rail, 64px) + var(--ds-app-layout-panel, 0px) +
+      var(--ds-sidebar-float-inset, 20px) * 2
+  );
+}
+
+/* ============================================
+   INSET LAYOUT — the rail flush on the shell
+   colour, the content full width in a surface
+   inset from the other three edges. The page
+   holds the viewport and the surface scrolls.
+   The rail's own item inset is the gap on its
+   side, so the selected item sits evenly
+   between the two edges.
+   ============================================ */
+.ds-app-layout--inset {
+  height: 100dvh;
+  min-height: 0;
+  background-color: var(--color-bg-app-shell);
+}
+
+.ds-app-layout--inset .ds-app-layout__main {
+  padding: var(--ds-shell-inset);
+  padding-inline-start: 0;
+  min-height: 0;
+}
+
+.ds-app-layout__surface {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+  background-color: var(--color-bg-app-surface);
+  border-radius: var(--radius-600);
+}
+
+.ds-app-layout__scroller {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  padding: var(--padding-1000) var(--padding-1000);
+  /* The scrollbar stays invisible until the surface scrolls (data-scrolling
+     is set by the scroll handler and cleared once it settles). */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.ds-app-layout__scroller[data-scrolling] {
+  scrollbar-color: var(--color-bg-container-border) transparent;
+}
+
+/* Full width in the surface, and a size container: content inside can
+   restack by the room the surface gives it (an open chat panel or an
+   expanded rail narrows it without the viewport changing) with
+   @container ds-app-layout-content queries. */
+.ds-app-layout--inset .ds-app-layout__content {
+  max-width: none;
+  container: ds-app-layout-content / inline-size;
+}
+
 /* ============================================
    RESPONSIVE
    ============================================ */
@@ -56,7 +122,29 @@
     padding: var(--padding-500) var(--padding-400);
   }
 
-  .ds-app-layout--expanded .ds-app-layout__main {
+  .ds-app-layout--expanded .ds-app-layout__main,
+  .ds-app-layout--floating .ds-app-layout__main {
     margin-inline-start: 0;
   }
+
+  /* Phones: the rail is a drawer, so the inset surface runs edge to edge
+     and the page scrolls normally. */
+  .ds-app-layout--inset {
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .ds-app-layout--inset .ds-app-layout__main {
+    padding: 0;
+  }
+
+  .ds-app-layout__surface {
+    overflow: visible;
+    border-radius: 0;
+  }
+
+  .ds-app-layout__scroller {
+    overflow-y: visible;
+    padding: var(--padding-500) var(--padding-400);
+  }
 }

package/components/AppLayout/AppLayout.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { AppSidebarSection, AppSidebarProfile } from '../AppSidebar/AppSidebar';
+import { AppSidebarSection, AppSidebarProfile, AppSidebarLayout } from '../AppSidebar/AppSidebar';
 import { LinkComponent } from '../../behaviors/LinkProvider';
 /** Props owned by AppLayout itself — everything else falls through to the outer wrapper `<div>`. */
 type AppLayoutOwnProps = {
@@ -23,6 +23,14 @@ type AppLayoutOwnProps = {
     logo?: React.ReactNode;
     /** Page content — centred in the main area */
     children: React.ReactNode;
+    /**
+     * How the rail and the content meet the page. `flush` (the default) runs
+     * the rail edge to edge with the content centred beside it. `floating`
+     * floats the rail as a glass card, the content still centred. `inset` runs
+     * the rail flush on the app shell colour and sets the content full width
+     * in a surface inset from the other edges, which scrolls inside itself.
+     */
+    layout?: AppSidebarLayout;
     /**
      * Colour scheme: 'dark' pins the layout to the dark theme (the historical
      * behaviour and the default); 'inherit' drops the pin so the layout
@@ -42,7 +50,7 @@ export interface AppLayoutProps extends AppLayoutOwnProps, Omit<React.ComponentP
 }
 /**
  * AppLayout — full-page template with a collapsible sidebar
- * and a centred content area.
+ * and a content area, centred or set in an inset surface (see `layout`).
  *
  * The forwarded ref and any unrecognised props target the outer wrapper
  * `<div>`. With `theme="inherit"` a `data-theme` passed by the consumer

package/components/AppLayout/AppLayout.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useRef, useEffect } from "react";
 import { AppSidebar } from "../AppSidebar/AppSidebar.js";
+import { MOTION_SCROLL_SETTLE_MS } from "../../tokens/motion.js";
 import "./AppLayout.css";
 const AppLayout = React.forwardRef(
   ({
@@ -15,6 +16,7 @@ const AppLayout = React.forwardRef(
     logoText,
     logo,
     children,
+    layout = "flush",
     theme = "dark",
     linkComponent,
     className = "",
@@ -25,9 +27,20 @@ const AppLayout = React.forwardRef(
     const handleExpandedChange = useCallback((next) => {
       setExpanded(next);
     }, []);
+    const scrollTimer = useRef(void 0);
+    useEffect(() => () => clearTimeout(scrollTimer.current), []);
+    const handleSurfaceScroll = useCallback((event) => {
+      const scroller = event.currentTarget;
+      scroller.dataset.scrolling = "";
+      clearTimeout(scrollTimer.current);
+      scrollTimer.current = setTimeout(() => {
+        delete scroller.dataset.scrolling;
+      }, MOTION_SCROLL_SETTLE_MS);
+    }, []);
     const classes = [
       baseClass,
       expanded ? `${baseClass}--expanded` : "",
+      layout !== "flush" ? `${baseClass}--${layout}` : "",
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs(
@@ -51,10 +64,15 @@ const AppLayout = React.forwardRef(
               onExpandedChange: handleExpandedChange,
               logoText,
               logo,
+              layout,
               linkComponent
             }
           ),
-          /* @__PURE__ */ jsx("main", { className: `${baseClass}__main`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) })
+          /* @__PURE__ */ jsx("main", { className: `${baseClass}__main`, children: layout === "inset" ? (
+            // The surface clips to its rounded corners and the scroller
+            // inside it scrolls, so the scrollbar never squares a corner.
+            /* @__PURE__ */ jsx("div", { className: `${baseClass}__surface`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__scroller`, onScroll: handleSurfaceScroll, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) }) })
+          ) : /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) })
         ]
       }
     );

package/components/AppSidebar/AppSidebar.css

@@ -51,6 +51,22 @@
   backdrop-filter: blur(24px);
 }
 
+/* The inset layout's gap: between the content surface and the viewport
+   edges, and around a docked chat panel's inset surface (ChatLauncher's
+   surface="inset" falls back to the same value when this sheet is absent). */
+:root {
+  --ds-shell-inset: 10px;
+}
+
+/* ============================================
+   INSET VARIANT — the rail flush on the app
+   shell colour, beside a content surface inset
+   from the edges (AppLayout's inset layout)
+   ============================================ */
+.ds-app-sidebar--inset {
+  background-color: var(--color-bg-app-shell);
+}
+
 /* ============================================
    TOP SECTION — logo + nav
    ============================================ */
@@ -605,6 +621,16 @@
   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). */
+.ds-app-sidebar__panel--inset {
+  background-color: var(--color-bg-app-shell);
+  border-inline-start-color: transparent;
+  border-inline-end-color: transparent;
+}
+
 /* ============================================
    PANEL MODE RAIL — labels under icons
    With the second level in the panel, the

package/components/AppSidebar/AppSidebar.d.ts

@@ -61,6 +61,8 @@ export interface AppSidebarProfile {
     /** Avatar image URL */
     avatarUrl?: string;
 }
+/** How the rail meets the page: edge to edge, floating as a card, or flush beside an inset content surface. */
+export type AppSidebarLayout = 'flush' | 'floating' | 'inset';
 /** Props owned by AppSidebar itself — everything else falls through to the `<nav>`. */
 type AppSidebarOwnProps = {
     /** Navigation sections */
@@ -97,10 +99,19 @@ type AppSidebarOwnProps = {
     /** Callback when profile more button clicked */
     onProfileMore?: () => void;
     /**
-     * Floats the rail off the viewport edges as a glass card: inset with
-     * rounded corners, the translucent glass fill over a backdrop blur, and
-     * the floating shadow. The inset defaults to 20px and is overridable via
-     * the --ds-sidebar-float-inset custom property.
+     * How the rail meets the page. `flush` runs it edge to edge on the page
+     * colour. `floating` floats it off the viewport edges as a glass card:
+     * inset with rounded corners, the translucent glass fill over a backdrop
+     * blur, and the floating shadow (the inset defaults to 20px and is
+     * overridable via the --ds-sidebar-float-inset custom property). `inset`
+     * runs it flush on the app shell colour, beside a content surface inset
+     * from the edges, as AppLayout's `inset` layout draws it. Defaults to
+     * `flush` (or `floating` while the deprecated `floating` is set).
+     */
+    layout?: AppSidebarLayout;
+    /**
+     * Floats the rail as a glass card, the same as `layout="floating"`.
+     * @deprecated Use `layout="floating"`.
      */
     floating?: boolean;
     /** Rendered under the logo row, above the nav; fades out while collapsed */

package/components/AppSidebar/AppSidebar.js

@@ -46,7 +46,8 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
   expanded: controlledExpanded,
   onExpandedChange,
   onProfileMore,
-  floating = false,
+  layout: layoutProp,
+  floating: floatingProp = false,
   topSlot,
   footerSlot,
   className = "",
@@ -63,6 +64,8 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
   ...rest
 }, ref) {
   const baseClass = "ds-app-sidebar";
+  const layout = layoutProp ?? (floatingProp ? "floating" : "flush");
+  const floating = layout === "floating";
   const Link = useLinkComponent(linkComponent);
   const avatarSeed = (item) => typeof item.pixelAvatar === "string" ? item.pixelAvatar : item.label;
   const avatarItems = sections.flatMap(
@@ -228,6 +231,7 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
     // a modal overlay would be all cost and no labels.
     isExpanded || mobileOpen ? `${baseClass}--expanded` : "",
     floating ? `${baseClass}--floating` : "",
+    layout === "inset" ? `${baseClass}--inset` : "",
     mobileOpen ? `${baseClass}--mobile-open` : "",
     isPanelMode ? `${baseClass}--panel-mode` : "",
     className
@@ -480,7 +484,8 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
           panelVisible ? `${baseClass}__panel--visible` : "",
           isExpanded ? `${baseClass}__panel--beside-expanded` : "",
           isPanelMode ? `${baseClass}__panel--panel-mode` : "",
-          floating ? `${baseClass}__panel--floating` : ""
+          floating ? `${baseClass}__panel--floating` : "",
+          layout === "inset" ? `${baseClass}__panel--inset` : ""
         ].filter(Boolean).join(" "),
         items: panelSource.items,
         title: panelSource.label,

package/components/DataTable/DataTable.js

@@ -22,7 +22,7 @@ import { TableContext } from "./tableContext.js";
 import { Popover } from "../Popover/Popover.js";
 import { typedComparator, TYPE_DEFAULTS, typedText, formatNumber } from "./columnTypes.js";
 import { TypedCell } from "./TypedCell.js";
-import { reconcileView } from "./views.js";
+import { slotStartingView, reconcileView } from "./views.js";
 import { calculate, TOTALS, NUMERIC_TOTALS } from "./aggregates.js";
 import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import { TYPED_KINDS, LIVE_KINDS, EDITOR_MIN_WIDTH } from "./editorKinds.js";
@@ -272,11 +272,21 @@ function DataTable({
   const locale = useLocale(localeProp);
   const collator = useMemo(() => textCollator(locale), [locale]);
   const compareValues = useMemo(() => valueComparator(collator), [collator]);
-  const [size, setSize] = useControllable(sizeProp, defaultSize ?? "default", onSizeChange);
-  const [search, setSearchState] = useControllable(searchProp, defaultSearch ?? "", onSearchChange);
+  const [startingView] = useState(() => slotStartingView(toolbar));
+  const startsWith = (key, controlled) => controlled === void 0 && startingView?.[key] !== void 0;
+  const [size, setSize] = useControllable(
+    sizeProp,
+    (startsWith("size", sizeProp) ? startingView.size : void 0) ?? defaultSize ?? "default",
+    onSizeChange
+  );
+  const [search, setSearchState] = useControllable(
+    searchProp,
+    (startsWith("search", searchProp) ? startingView.search : void 0) ?? defaultSearch ?? "",
+    onSearchChange
+  );
   const [filters, setFiltersState] = useControllable(
     filtersProp,
-    defaultFilters ?? [],
+    (startsWith("filters", filtersProp) ? startingView.filters : void 0) ?? defaultFilters ?? [],
     onFiltersChange
   );
   const filterLabels = {
@@ -286,7 +296,7 @@ function DataTable({
   };
   const [pageSize, setPageSize] = useControllable(
     pageSizeProp,
-    defaultPageSize,
+    (startsWith("pageSize", pageSizeProp) ? startingView.pageSize : void 0) ?? defaultPageSize,
     onPageSizeChange
   );
   const [page, setPageState] = useControllable(pageProp, defaultPage ?? 1, onPageChange);
@@ -321,14 +331,15 @@ function DataTable({
     return () => clearTimeout(timer);
   }, [announceRequest]);
   const isSortControlled = sortsProp !== void 0 || sort !== void 0;
+  const openingSorts = defaultSorts ?? (defaultSort ? [defaultSort] : []);
   const [uncontrolledSorts, setUncontrolledSorts] = useState(
-    defaultSorts ?? (defaultSort ? [defaultSort] : [])
+    (startsWith("sorts", sortsProp ?? sort) ? startingView.sorts : void 0) ?? openingSorts
   );
   const currentSorts = sortsProp ?? (sort !== void 0 ? sort ? [sort] : [] : uncontrolledSorts);
   const sortOf = (key) => currentSorts.find((entry) => entry.key === key);
   const [groupingState, setGroupingState] = useControllable(
     groupingProp,
-    defaultGrouping ?? [],
+    (startsWith("grouping", groupingProp) ? startingView.grouping : void 0) ?? defaultGrouping ?? [],
     onGroupingChange
   );
   const [expandedState, setExpanded] = useControllable(
@@ -391,7 +402,7 @@ function DataTable({
   const canHide = (col) => !col.locked && (col.hideable ?? true);
   const [widthsState, setWidths] = useControllable(
     columnWidths,
-    defaultColumnWidths ?? {},
+    (startsWith("columnWidths", columnWidths) ? startingView.columnWidths : void 0) ?? defaultColumnWidths ?? {},
     onColumnWidthsChange
   );
   const [orderState, setOrder] = useControllable(columnOrder, defaultColumnOrder ?? [], onColumnOrderChange);
@@ -1022,7 +1033,16 @@ function DataTable({
     size,
     ...pageSize !== void 0 ? { pageSize } : {}
   };
-  const [baseView] = useState(currentView);
+  const [baseView] = useState(() => ({
+    ...currentView,
+    ...startsWith("sorts", sortsProp ?? sort) ? { sorts: openingSorts } : {},
+    ...startsWith("filters", filtersProp) ? { filters: defaultFilters ?? [] } : {},
+    ...startsWith("search", searchProp) ? { search: defaultSearch ?? "" } : {},
+    ...startsWith("columnWidths", columnWidths) ? { columnWidths: defaultColumnWidths ?? {} } : {},
+    ...startsWith("grouping", groupingProp) ? { grouping: defaultGrouping ?? [] } : {},
+    ...startsWith("size", sizeProp) ? { size: defaultSize ?? "default" } : {},
+    ...startsWith("pageSize", pageSizeProp) ? { pageSize: defaultPageSize } : {}
+  }));
   const viewColumns = columns.map((col) => ({
     key: col.key,
     filterKind: col.type ? TYPE_DEFAULTS[col.type].filter : void 0,

package/components/DataTable/FilterEditor.js

@@ -120,9 +120,8 @@ function FilterEditor({
       }
     );
   })();
-  const isList = column.kind === "enum" || column.kind === "tags";
   return /* @__PURE__ */ jsxs("div", { className: "ds-data-table__filter-editor", role: "group", "aria-label": labels.editor(column.label), children: [
-    !isList && /* @__PURE__ */ jsx(
+    operators.length > 1 && /* @__PURE__ */ jsx(
       Dropdown,
       {
         size,

package/components/DataTable/filterModel.js

@@ -2,9 +2,10 @@ const OPERATORS = {
   text: ["contains", "notContains", "is", "isNot", "startsWith", "endsWith", "isEmpty", "isNotEmpty"],
   number: ["eq", "neq", "lt", "lte", "gt", "gte", "between", "isEmpty", "isNotEmpty"],
   date: ["is", "before", "after", "between", "isEmpty", "isNotEmpty"],
-  // A list filter is its checkboxes, so it has the one condition they mean.
-  enum: ["isAnyOf"],
-  tags: ["hasAnyOf"],
+  // A list filter is its checkboxes; the condition says what a tick means,
+  // and the first, "any of", is the one a new filter starts with.
+  enum: ["isAnyOf", "isNoneOf"],
+  tags: ["hasAnyOf", "hasAllOf", "hasNoneOf"],
   boolean: ["isChecked", "isNotChecked"]
 };
 const VALUELESS = /* @__PURE__ */ new Set(["isEmpty", "isNotEmpty", "isChecked", "isNotChecked"]);

package/components/DataTable/views.d.ts

@@ -30,6 +30,15 @@ export interface TableView {
     /** Rows per page. */
     pageSize?: number;
 }
+/**
+ * The view a table starts on when a TableToolbar with saved views sits
+ * directly in its `toolbar` slot: the active one (`activeView`, else
+ * `defaultActiveView`, else the first). Read from the element's props, so
+ * the table's first render, the server's HTML included, is already that
+ * view; the toolbar applies it on mount too, for a bar the table cannot
+ * see into (one wrapped in another component).
+ */
+export declare function slotStartingView(toolbar: unknown): TableView | undefined;
 /** What reconciling needs to know about a column. */
 export interface ViewColumn {
     key: string;

package/components/DataTable/views.js

@@ -1,4 +1,12 @@
 import { OPERATORS, VALUELESS } from "./filterModel.js";
+function slotStartingView(toolbar) {
+  if (!toolbar || typeof toolbar !== "object" || !("props" in toolbar)) return void 0;
+  const props = toolbar.props;
+  const views = props?.views ?? props?.defaultViews;
+  if (!Array.isArray(views) || views.length === 0) return void 0;
+  const id = props?.activeView ?? props?.defaultActiveView;
+  return (views.find((v) => v.id === id) ?? views[0]).view;
+}
 function reconcileView(view, columns) {
   const byKey = new Map(columns.map((col) => [col.key, col]));
   const known = (key) => byKey.has(key);
@@ -35,5 +43,6 @@ function reconcileView(view, columns) {
   return next;
 }
 export {
-  reconcileView
+  reconcileView,
+  slotStartingView
 };

package/components/SegmentedControl/SegmentedControl.css

@@ -228,3 +228,72 @@
 .ds-segmented-control--compact .ds-segmented-control__icon {
   --icon-size: var(--icon-size-500);
 }
+
+/* ============================================
+   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 an unfamiliar glyph is
+   never left to be guessed. 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. A strip the collapse ladder
+   squeezed to icons keeps its labels clipped
+   instead.
+   ============================================ */
+
+.ds-segmented-control__label--tip {
+  /* 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-segmented-control__segment:hover .ds-segmented-control__label--tip,
+.ds-segmented-control__segment:focus-visible .ds-segmented-control__label--tip {
+  opacity: 1;
+  transform: none;
+  transition-delay: var(--motion-duration-slow);
+}
+
+/* Flipped above the strip, it slides down into place instead. */
+.ds-segmented-control__label--tip[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-segmented-control--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-segmented-control__label--tip {
+    transition: none;
+  }
+}

package/components/SegmentedControl/SegmentedControl.d.ts

@@ -65,9 +65,10 @@ type SegmentedControlOwnProps = {
     collapse?: boolean;
     /**
      * Show each segment's label beside its icon. Set it to `false` for an
-     * icon-only strip: the labels stay in the accessibility tree as the
-     * segments' names, and a segment without an icon keeps its label on
-     * screen. Defaults to `true`.
+     * icon-only strip: each label becomes its segment's tooltip on hover and
+     * keyboard focus and stays the segment's name in the accessibility tree,
+     * and a segment without an icon keeps its label on screen. Defaults to
+     * `true`.
      */
     showLabels?: boolean;
     /**