@robr0/design-system 0.9.0 → 0.11.0

package/components/MapLegend/MapLegend.css

@@ -0,0 +1,88 @@
+/* ============================================
+   MAP LEGEND COMPONENT
+   The corner block of a map: name, one line on
+   what it shows, and the key to its markers.
+   ============================================ */
+
+/* Base */
+
+.ds-map-legend {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  max-width: 32ch;
+  font-family: var(--font-family-code);
+  color: var(--color-text-primary);
+}
+
+/* Parts */
+
+.ds-map-legend__title {
+  font-family: var(--font-family-primary);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-map-legend__description {
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* Key */
+
+.ds-map-legend__key {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xxs);
+  margin: 0;
+  margin-top: var(--gap-xs);
+}
+
+.ds-map-legend__row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.ds-map-legend__glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+.ds-map-legend__glyph svg {
+  display: block;
+  overflow: visible;
+}
+
+.ds-map-legend__glyph path,
+.ds-map-legend__glyph rect {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}
+
+.ds-map-legend__arc-stop-start {
+  stop-color: var(--color-chart-series-7);
+}
+
+.ds-map-legend__arc-stop-end {
+  stop-color: var(--color-chart-series-5);
+}
+
+.ds-map-legend__label {
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-secondary);
+  margin: 0;
+}

package/components/MapLegend/MapLegend.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+/** One row of the key. */
+export interface MapLegendItem {
+    /**
+     * The marker the row explains. `point` and `anchor` draw Globe's cross and
+     * square; `arc` draws a short stroke of the arc gradient; a `line` is a flat
+     * rule in `color`; any React node renders as given.
+     */
+    glyph: 'point' | 'anchor' | 'arc' | 'line' | React.ReactNode;
+    /** What the marker means. */
+    label: React.ReactNode;
+    /** Colour for the `line` glyph (and the `arc` glyph, replacing its gradient). Any CSS colour. */
+    color?: string;
+}
+/** Props owned by MapLegend itself — everything else falls through to the root `<div>`. */
+type MapLegendOwnProps = {
+    /**
+     * The map's name, set above the key. Intentionally shadows the native
+     * `title` tooltip attribute, which MapLegend does not expose.
+     */
+    title?: string;
+    /** One or two lines saying what the map shows. */
+    description?: React.ReactNode;
+    /** The key itself: one row per marker kind. */
+    items?: MapLegendItem[];
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface MapLegendProps extends MapLegendOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof MapLegendOwnProps | 'children'> {
+}
+/**
+ * MapLegend — the block in the corner of a map: its name, a line on what it
+ * shows, and the key to its markers. The built-in glyphs are drawn on the
+ * same geometry Globe draws its markers with, so the key never shows a shape
+ * the map does not. Pure markup, no hooks, so it renders from a Server
+ * Component; the key is a `<dl>`, glyph as term and meaning as description.
+ */
+export declare const MapLegend: React.ForwardRefExoticComponent<MapLegendProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/MapLegend/MapLegend.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./MapLegend.css";
+const GLYPH_SIZE = 12;
+const half = GLYPH_SIZE / 2;
+const mark = 3.5;
+const builtInGlyph = (item, gradientId) => {
+  switch (item.glyph) {
+    case "point":
+      return /* @__PURE__ */ jsx("path", { d: `M${half - mark} ${half}H${half + mark}M${half} ${half - mark}V${half + mark}` });
+    case "anchor":
+      return /* @__PURE__ */ jsx("rect", { x: half - mark, y: half - mark, width: mark * 2, height: mark * 2 });
+    case "arc":
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M1 ${GLYPH_SIZE - 2}Q${half} -${half} ${GLYPH_SIZE - 1} ${GLYPH_SIZE - 2}`,
+          style: { stroke: item.color ?? `url(#${gradientId})` }
+        }
+      );
+    case "line":
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M1 ${half}H${GLYPH_SIZE - 1}`,
+          style: item.color ? { stroke: item.color } : void 0
+        }
+      );
+    default:
+      return null;
+  }
+};
+const isBuiltIn = (glyph) => glyph === "point" || glyph === "anchor" || glyph === "arc" || glyph === "line";
+const MapLegend = React.forwardRef(
+  ({ title, description, items = [], className = "", ...rest }, ref) => {
+    const baseClass = "ds-map-legend";
+    const gradientId = React.useId();
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      title && /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description }),
+      items.length > 0 && /* @__PURE__ */ jsx("dl", { className: `${baseClass}__key`, children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__row`, children: [
+        /* @__PURE__ */ jsx("dt", { className: `${baseClass}__glyph`, "aria-hidden": "true", children: isBuiltIn(item.glyph) ? /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: `0 0 ${GLYPH_SIZE} ${GLYPH_SIZE}`,
+            width: GLYPH_SIZE,
+            height: GLYPH_SIZE,
+            xmlns: "http://www.w3.org/2000/svg",
+            focusable: "false",
+            children: [
+              item.glyph === "arc" && !item.color && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${gradientId}-${i}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0", className: `${baseClass}__arc-stop-start` }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", className: `${baseClass}__arc-stop-end` })
+              ] }) }),
+              builtInGlyph(item, `${gradientId}-${i}`)
+            ]
+          }
+        ) : item.glyph }),
+        /* @__PURE__ */ jsx("dd", { className: `${baseClass}__label`, children: item.label })
+      ] }, i)) })
+    ] });
+  }
+);
+MapLegend.displayName = "MapLegend";
+export {
+  MapLegend
+};

package/components/MessageActions/MessageActions.css

@@ -74,3 +74,12 @@
   opacity: 0.4;
   cursor: not-allowed;
 }
+
+/* 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
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-message-actions .material-symbols-rounded {
+  color: inherit;
+}

package/components/MessageCard/MessageCard.css

@@ -5,9 +5,10 @@
    and an actions footer.
 
    Not the navigation Card — this is content
-   furniture inside a conversation, --radius-md
-   like the other chat primitives, sized by the
-   bubble or turn that holds it.
+   furniture inside a conversation, sized by the
+   bubble or turn that holds it. It shares Card's
+   cover geometry and the chat bubbles' 24px
+   shell, so cards read the same across surfaces.
    ============================================ */
 
 .ds-message-card {
@@ -17,18 +18,29 @@
   max-width: var(--ds-message-card-max-width, 100%);
   background-color: var(--color-bg-container-primary);
   border: var(--border-xs) solid var(--color-bg-container-border);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-xl);
   overflow: hidden;
 }
 
 /* ============================================
    MEDIA
-   Full bleed — the card's overflow clip rounds
-   the corners, so the slot carries no padding.
+   Inset, not full bleed: 12px of card around a
+   12px-radius slot keeps the corners concentric
+   with the card's 24px shell — the exact
+   geometry of Card's case-study cover, and the
+   same rule the Composer follows.
    ============================================ */
 
 .ds-message-card__media {
   display: block;
+  margin: var(--padding-sm-md) var(--padding-sm-md) 0;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  /* The slot carries its own surface, so drawn media — a chart, an SVG —
+     reads as the same image-shaped panel a photo would. The page tone, not
+     the container ramp: lightest in light mode, darkest in dark, so the
+     slot recedes behind the drawing instead of tinting it. */
+  background-color: var(--color-bg-page-primary);
 }
 
 .ds-message-card__media img {
@@ -36,15 +48,46 @@
   width: 100%;
 }
 
+/* A Chart in the slot sheds its own panel chrome — the card is already the
+   panel, and the slot's page tone is the brightest surface in light mode and
+   the darkest in dark, so the drawing keeps maximum contrast against its
+   ground instead of sitting on a second container tone. */
+.ds-message-card__media .ds-chart {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: var(--padding-sm) var(--padding-sm) 0 0;
+}
+
 /* ============================================
    BODY
+   The vertical rhythm is deliberately even: the
+   media-to-body distance (--padding-md) equals
+   the body-to-actions distance (--padding-sm on
+   each side of the seam), so the copy sits
+   centred between the image and the CTA row.
    ============================================ */
 
 .ds-message-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  padding: var(--padding-md) var(--padding-lg) var(--padding-sm);
+}
+
+/* Without an actions footer the body closes the card, so it takes the full
+   bottom padding back. */
+.ds-message-card__body:last-child {
+  padding-bottom: var(--padding-md);
+}
+
+/* Title and meta form one unit, tucked closer together than the body's
+   stack gap so the meta reads as the title's subline. */
+.ds-message-card__header {
   display: flex;
   flex-direction: column;
   gap: var(--gap-xs);
-  padding: var(--padding-sm-md) var(--padding-md);
+  min-width: 0;
 }
 
 .ds-message-card__title-row {
@@ -67,11 +110,11 @@
 
 .ds-message-card__title {
   min-width: 0;
-  font-family: var(--font-title-body-family);
-  font-size: var(--font-title-body-size);
-  font-weight: var(--font-title-body-weight);
-  line-height: var(--font-title-body-line-height);
-  letter-spacing: var(--font-title-body-letter-spacing);
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
   color: var(--color-text-primary);
 }
 
@@ -98,14 +141,23 @@
    ACTIONS
    Mirrors ToolCall's actions footer exactly, so
    approvals on a tool call and link actions on
-   a card read as the same row.
+   a card read as the same row. Whitespace alone
+   separates it from the body — no rule.
    ============================================ */
 
 .ds-message-card__actions {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   gap: var(--gap-sm);
-  padding: var(--padding-sm-md) var(--padding-md);
-  border-top: var(--border-xs) solid var(--color-divider);
+  padding: var(--padding-sm) var(--padding-lg) var(--padding-md);
+}
+
+/* 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
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-message-card .material-symbols-rounded {
+  color: inherit;
 }

package/components/MessageCard/MessageCard.d.ts

@@ -5,7 +5,7 @@ type MessageCardOwnProps = {
     title?: string;
     /** One or two lines under the title. */
     description?: string;
-    /** Top media slot — an image or chart, rendered flush to the card edges (the card clips it). */
+    /** Top media slot — an image or chart, inset from the card edges with its own rounded corners. */
     media?: React.ReactNode;
     /** Small leading icon beside the title — a Material Symbol name, or any custom element. */
     icon?: string | React.ReactNode;

package/components/MessageCard/MessageCard.js

@@ -10,11 +10,13 @@ const MessageCard = React.forwardRef(
     return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
       media && /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children: media }),
       hasBody && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__body`, children: [
-        (title || icon) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__title-row`, children: [
-          icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }),
-          title && /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+        (title || icon || meta) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+          (title || icon) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__title-row`, children: [
+            icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }),
+            title && /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title })
+          ] }),
+          meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta })
         ] }),
-        meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta }),
         description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description }),
         children
       ] }),

package/components/ModelPicker/ModelPicker.css

@@ -22,7 +22,10 @@
   display: inline-flex;
   align-items: center;
   gap: var(--gap-xxs);
-  padding: var(--padding-xxs) var(--padding-sm);
+  /* CircularButton's 40px, so the pill and the composer's round icon
+     buttons read as one row of equals — same height, same resting shape. */
+  height: 40px;
+  padding: 0 var(--padding-md);
   background-color: var(--color-action-passive-bg);
   border: none;
   border-radius: var(--radius-full);

package/components/ModelPicker/ModelPicker.js

@@ -98,17 +98,54 @@ const ModelPicker = React.forwardRef(
             });
           }
           break;
+        case "Home":
+          if (isOpen) {
+            e.preventDefault();
+            const first = models.findIndex((m) => !m.disabled);
+            if (first >= 0) setFocusedIndex(first);
+          }
+          break;
+        case "End":
+          if (isOpen) {
+            e.preventDefault();
+            let last = models.length - 1;
+            while (last >= 0 && models[last].disabled) last--;
+            if (last >= 0) setFocusedIndex(last);
+          }
+          break;
         case "Escape":
           setIsOpen(false);
           break;
       }
     };
+    const handleEffortKeyDown = (e, index) => {
+      let targetIndex = -1;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault();
+          targetIndex = (index + 1) % effortOptions.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault();
+          targetIndex = (index - 1 + effortOptions.length) % effortOptions.length;
+          break;
+      }
+      if (targetIndex >= 0) {
+        selectEffort(effortOptions[targetIndex].value);
+        document.getElementById(`${id}-effort-option-${targetIndex}`)?.focus();
+      }
+    };
     useEffect(() => {
       if (isOpen && focusedIndex >= 0 && listRef.current) {
         const focusedEl = listRef.current.children[focusedIndex];
         focusedEl?.scrollIntoView({ block: "nearest" });
       }
     }, [focusedIndex, isOpen]);
+    const activeOptionId = isOpen && focusedIndex >= 0 && models[focusedIndex] ? `${id}-option-${focusedIndex}` : void 0;
+    const checkedEffortIndex = effortOptions.findIndex((o) => o.value === currentEffort);
+    const effortTabStop = checkedEffortIndex >= 0 ? checkedEffortIndex : 0;
     const classes = [
       baseClass,
       `${baseClass}--${placement}`,
@@ -126,6 +163,7 @@ const ModelPicker = React.forwardRef(
           "aria-expanded": isOpen,
           "aria-haspopup": "listbox",
           "aria-controls": isOpen ? listboxId : void 0,
+          "aria-activedescendant": activeOptionId,
           "aria-label": rest["aria-label"] ?? "Choose a model",
           onClick: () => {
             setIsOpen((prev) => !prev);
@@ -150,6 +188,7 @@ const ModelPicker = React.forwardRef(
             children: models.map((model, index) => /* @__PURE__ */ jsxs(
               "li",
               {
+                id: `${id}-option-${index}`,
                 className: [
                   `${baseClass}__option`,
                   model.value === currentValue ? `${baseClass}__option--selected` : "",
@@ -190,17 +229,20 @@ const ModelPicker = React.forwardRef(
               className: `${baseClass}__effort-options`,
               role: "radiogroup",
               "aria-labelledby": `${id}-effort-label`,
-              children: effortOptions.map((option) => /* @__PURE__ */ jsx(
+              children: effortOptions.map((option, index) => /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
+                  id: `${id}-effort-option-${index}`,
                   className: [
                     `${baseClass}__effort-option`,
                     option.value === currentEffort ? `${baseClass}__effort-option--selected` : ""
                   ].filter(Boolean).join(" "),
                   role: "radio",
                   "aria-checked": option.value === currentEffort,
+                  tabIndex: index === effortTabStop ? 0 : -1,
                   onClick: () => selectEffort(option.value),
+                  onKeyDown: (e) => handleEffortKeyDown(e, index),
                   children: option.label
                 },
                 option.value

package/components/NotificationCenter/NotificationCenter.css

@@ -260,3 +260,12 @@
   white-space: nowrap;
   border: 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
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-notification-center .material-symbols-rounded {
+  color: inherit;
+}

package/components/NotificationCenter/NotificationCenter.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState } from "react";
+import React, { useState, useId } from "react";
 import { EmptyState } from "../EmptyState/EmptyState.js";
 import "./NotificationCenter.css";
 import "../../fonts/material-symbols.css";
@@ -42,6 +42,11 @@ const NotificationCenter = React.forwardRef(
     const isTabControlled = activeTab !== void 0;
     const [uncontrolledTab, setUncontrolledTab] = useState(defaultTab ?? tabs?.[0]?.value);
     const currentTab = isTabControlled ? activeTab : uncontrolledTab;
+    const idBase = useId();
+    const panelId = `${idBase}-panel`;
+    const tabIdFor = (index) => `${idBase}-tab-${index}`;
+    const activeTabIndex = tabs?.findIndex((tab) => tab.value === currentTab) ?? -1;
+    const hasTabs = !!tabs && tabs.length > 0;
     const selectTab = (value) => {
       if (!isTabControlled) setUncontrolledTab(value);
       onTabChange?.(value);
@@ -80,21 +85,23 @@ const NotificationCenter = React.forwardRef(
       /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [
         /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
           /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
-          unreadCount !== void 0 && unreadCount > 0 && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__unread`, children: [
+          unreadCount !== void 0 && unreadCount > 0 && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__unread`, "aria-live": "polite", children: [
             unreadCount,
             " unread"
           ] })
         ] }),
         onMarkAllRead && /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__mark-all`, onClick: onMarkAllRead, children: markAllLabel })
       ] }),
-      tabs && tabs.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__tabs`, role: "tablist", "aria-label": `${title} filters`, children: tabs.map((tab, index) => {
+      hasTabs && /* @__PURE__ */ jsx("div", { className: `${baseClass}__tabs`, role: "tablist", "aria-label": `${title} filters`, children: tabs.map((tab, index) => {
         const isActive = tab.value === currentTab;
         return /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
+            id: tabIdFor(index),
             role: "tab",
             "aria-selected": isActive,
+            "aria-controls": panelId,
             tabIndex: isActive ? 0 : -1,
             className: [
               `${baseClass}__tab`,
@@ -110,15 +117,24 @@ const NotificationCenter = React.forwardRef(
           tab.value
         );
       }) }),
-      /* @__PURE__ */ jsx("div", { className: `${baseClass}__list`, children: hasItems ? children : emptyState ?? /* @__PURE__ */ jsx(
-        EmptyState,
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          icon: "notifications",
-          title: "Nothing new",
-          description: "Notifications will collect here as they arrive.",
-          size: "compact"
+          className: `${baseClass}__list`,
+          role: hasTabs ? "tabpanel" : void 0,
+          id: hasTabs ? panelId : void 0,
+          "aria-labelledby": hasTabs && activeTabIndex >= 0 ? tabIdFor(activeTabIndex) : void 0,
+          children: hasItems ? children : emptyState ?? /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              icon: "notifications",
+              title: "Nothing new",
+              description: "Notifications will collect here as they arrive.",
+              size: "compact"
+            }
+          )
         }
-      ) })
+      )
     ] });
   }
 );

package/components/NumberInput/NumberInput.css

@@ -152,3 +152,12 @@
 .ds-numberinput--compact .ds-numberinput__stepper {
   padding: 0 var(--padding-sm); /* 8px */
 }
+
+/* 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
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-numberinput .material-symbols-rounded {
+  color: inherit;
+}

package/components/Popover/Popover.css

@@ -35,13 +35,15 @@
 
   /* Hidden by default */
   opacity: 0;
+  visibility: hidden; /* keeps panel content out of the tab order when closed */
   pointer-events: none;
   transform: scale(0.96);
-  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard);
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard), transform var(--motion-duration-base) var(--motion-ease-standard), visibility var(--motion-duration-base) var(--motion-ease-standard);
 }
 
 .ds-popover__panel--open {
   opacity: 1;
+  visibility: visible;
   pointer-events: auto;
   transform: scale(1);
 }

package/components/Popover/Popover.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useEffect } from "react";
+import { MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
 import "./Popover.css";
 const INTERACTIVE_TAGS = /* @__PURE__ */ new Set(["button", "a", "input", "select", "textarea", "summary"]);
 const canCarryPopoverSemantics = (el) => typeof el.type === "string" ? INTERACTIVE_TAGS.has(el.type) : true;
@@ -59,7 +60,7 @@ const Popover = ({
   };
   const handleMouseLeave = () => {
     if (trigger === "hover") {
-      hoverTimeoutRef.current = setTimeout(() => setOpen(false), 150);
+      hoverTimeoutRef.current = setTimeout(() => setOpen(false), MOTION_HOVER_HIDE_DELAY_MS);
     }
   };
   const baseClass = "ds-popover";

package/components/SectionTitle/SectionTitle.css

@@ -11,6 +11,14 @@
   padding-bottom: var(--padding-xl);
 }
 
+/* Divider-less variant: for headings above content that draws its own
+   lines, where a second rule would double up. The generous clearance
+   the divider needed drops to a small breathing gap. */
+.ds-section-title--no-divider {
+  border-bottom: none;
+  padding-bottom: var(--padding-md);
+}
+
 /* ============================================
    HEADING
    ============================================ */

package/components/SectionTitle/SectionTitle.d.ts

@@ -4,7 +4,9 @@ export interface SectionTitleProps {
     title: string;
     /** Optional trailing content (count, badge, metadata) */
     trailing?: React.ReactNode;
+    /** Whether to draw the bottom divider line. Set false above content that draws its own lines (bordered tables, calendars), so the section separates by whitespace alone. */
+    divider?: boolean;
     /** Additional CSS classes */
     className?: string;
 }
-export declare function SectionTitle({ title, trailing, className, }: SectionTitleProps): React.JSX.Element;
+export declare function SectionTitle({ title, trailing, divider, className, }: SectionTitleProps): React.JSX.Element;