rift-ds 1.15.0 → 1.17.0

package/README.md

@@ -13,7 +13,7 @@ An open source React design system built for AI products and coding agents: comp
 
 ## Why Rift DS
 
-- **<!-- component-count -->159<!-- /component-count --> components.** Buttons, forms and tables through to charts, navigation and overlays, each typed and documented with live examples. Every one forwards a ref and your own attributes to its element, state you can own works controlled or uncontrolled (a modal opens when your app says so, by design), and every word a component writes has a prop you can localise. The build checks the first two on every component, and the words wherever they sit in markup. React and React DOM are the only required peer dependencies.
+- **<!-- component-count -->162<!-- /component-count --> components.** Buttons, forms and tables through to charts, navigation and overlays, each typed and documented with live examples. Every one forwards a ref and your own attributes to its element, state you can own works controlled or uncontrolled (a modal opens when your app says so, by design), and every word a component writes has a prop you can localise. The build checks the first two on every component, and the words wherever they sit in markup. React and React DOM are the only required peer dependencies.
 - **AI patterns, the whole chat and templates, ready to use.** Composer, streaming chat thread, tool calls, reasoning and thread panel are in the box, the complete AI chat ships assembled as one widget that one command scaffolds, and the docs site has complete template screens built from them.
 - **Fully themeable.** The shipped themes are complete looks to start from, each in light and dark. One `data-brand` attribute applies a theme, and a few CSS overrides make your own.
 - **Ready for coding agents.** One command installs the agent skills, and a public MCP endpoint serves every component's props, so your agent builds with the library as it actually is. No key, no account.
@@ -107,13 +107,13 @@ import 'rift-ds/tokens/presets/presets.css';
 
 ## Components
 
-<!-- component-count -->159<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
+<!-- component-count -->162<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
 
 <details>
 <summary>The full list</summary>
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Artifact card · Artifact panel · Attachment drop zone · Attachment group · Attachment tile · Attachment viewer · Avatar · Avatar group · Badge · Banner · Bar chart · Bento tile · Bento tile art · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Command palette trigger · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Inspector colour picker · Inspector dropdown · Inspector input · Inspector section · Inspector segments · Inspector slider · Inspector toggle switch · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Mention · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Pixel avatar · Popover · Progress bar · Prompt suggestions · Prose · Question card · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Table toolbar · Tabs · Tag input · Textarea · Theme picker · Theme toggle · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · Widget · World map
+Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Artifact card · Artifact panel · Attachment drop zone · Attachment group · Attachment tile · Attachment viewer · Avatar · Avatar group · Badge · Banner · Bar chart · Bento tile · Bento tile art · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Command palette trigger · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Inspector colour picker · Inspector dropdown · Inspector input · Inspector section · Inspector segments · Inspector slider · Inspector toggle switch · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Mega menu · Mention · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Pixel avatar · Popover · Progress bar · Progressive blur · Prompt suggestions · Prose · Question card · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Site header · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Table toolbar · Tabs · Tag input · Textarea · Theme picker · Theme toggle · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · Widget · World map
 <!-- component-list:end -->
 
 </details>

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/Checkbox/Checkbox.css

@@ -28,8 +28,10 @@
   width: 24px;
   height: 24px;
   box-sizing: border-box;
-  border: var(--border-050) solid var(--color-input-border-primary);
-  border-radius: var(--radius-200); /* 8px */
+  border: var(--border-050) solid var(--color-input-indicator-border);
+  /* Always a rounded square, whatever the theme's radius: never sharp at a
+     zero radius, never rounding towards a radio's circle at a large one. */
+  border-radius: clamp(4px, var(--radius-200), 8px); /* ds-allow(spacing): the checkbox's shape is fixed, so its corner is bounded */
   background-color: var(--color-input-bg-primary);
   display: inline-flex;
   align-items: center;

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/Drawer/Drawer.d.ts

@@ -12,6 +12,12 @@ type DrawerOwnProps = {
     title: string;
     /** Optional subtitle under the title */
     description?: string;
+    /**
+     * Content shown in place of the title text, such as a site's logo. The
+     * `title` still names the dialog, read by assistive tech from a visually
+     * hidden heading.
+     */
+    heading?: React.ReactNode;
     /** Drawer body content */
     children?: React.ReactNode;
     /** Optional footer slot — typically a row of Buttons */