rift-ds 1.16.0 → 1.18.0

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,15 @@
   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, 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-end-color: transparent;
+}
+
 /* ============================================
    PANEL MODE RAIL — labels under icons
    With the second level in the panel, the
@@ -612,85 +637,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

@@ -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
@@ -320,6 +324,7 @@ const AppSidebar = React.forwardRef(function AppSidebar2({
                 ),
                 /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-label`, children: item.label })
               ] }),
+              isPanelMode && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-caption`, "aria-hidden": "true", children: item.label }),
               item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-badge`, children: item.badge }),
               hasChildren && /* @__PURE__ */ jsx(
                 "span",
@@ -480,7 +485,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;
     /**