@surflane/ui 0.11.0 → 0.13.0

package/dist/code.js

@@ -2,22 +2,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon } from './icon.js';
-import { cx } from './parts.js';
+import { cx, skin } from './parts.js';
 import { Button } from './button.js';
 import { SyntaxHighlighter } from './syntax-highlighter.js';
 import { ScrollArea } from './scroll-area.js';
 const copyIcons = { idle: 'copy', copied: 'check', failed: 'alert' };
-// Feedback stays inside the copy button and returns to the action after this long.
+// Feedback stays inside the button and returns to the action after this long.
 const copyFeedbackDuration = 2000;
-export const CodeBlock = function CodeBlock({ code, label = 'Code', language, wrap = false, labels, copyLabel: legacyCopyLabel, copiedLabel: legacyCopiedLabel, copyErrorLabel: legacyCopyErrorLabel, onCopy, className, ref, ...props }) {
-    const copyLabel = labels?.copy ?? legacyCopyLabel ?? 'Copy code';
-    const copiedLabel = labels?.copied ?? legacyCopiedLabel ?? 'Copied';
-    const copyErrorLabel = labels?.copyError ?? legacyCopyErrorLabel ?? 'Copy unavailable';
+/** Copies text and says what happened in its own label: the result replaces the
+ * action in place, as a polite live region, then the action returns after 2s.
+ * The button is as wide as its longest label, so nothing around it moves. */
+export const CopyButton = function CopyButton({ value, labels, onCopy, onResult, variant = 'outline', size = 'small', className, ref, ...props }) {
+    const copyLabel = labels?.copy ?? 'Copy';
+    const copiedLabel = labels?.copied ?? 'Copied';
+    const copyErrorLabel = labels?.copyError ?? 'Copy unavailable';
     const [state, setState] = React.useState('idle');
     // After the first copy, each change of label fades in; the first render does not.
     const [used, setUsed] = React.useState(false);
     const revision = React.useRef(0), mounted = React.useRef(false), timer = React.useRef(undefined);
-    const button = React.useRef(null), source = React.useRef(null);
     React.useEffect(() => {
         mounted.current = true;
         return () => {
@@ -26,29 +28,13 @@ export const CodeBlock = function CodeBlock({ code, label = 'Code', language, wr
             clearTimeout(timer.current);
         };
     }, []);
+    // New text clears a result, and a late answer for the old text is dropped.
+    const source = typeof value === 'string' ? value : null;
     React.useEffect(() => {
         revision.current++;
         clearTimeout(timer.current);
         setState('idle');
-    }, [code]);
-    const resting = React.useRef(true);
-    resting.current = state === 'idle';
-    // The button keeps its resting width, so the feedback never moves the toolbar.
-    React.useLayoutEffect(() => {
-        const element = button.current;
-        if (!element || state !== 'idle')
-            return;
-        const measure = () => {
-            element.style.minInlineSize = '';
-            element.style.minInlineSize = `${element.getBoundingClientRect().width}px`;
-        };
-        measure();
-        // Fonts can finish loading after a copy; the result label must not set the width.
-        document.fonts?.ready.then(() => {
-            if (mounted.current && resting.current)
-                measure();
-        });
-    }, [copyLabel, state]);
+    }, [source]);
     async function copy() {
         const request = ++revision.current;
         clearTimeout(timer.current);
@@ -56,10 +42,11 @@ export const CodeBlock = function CodeBlock({ code, label = 'Code', language, wr
         setState('busy');
         let outcome;
         try {
+            const text = typeof value === 'string' ? value : await value();
             if (onCopy)
-                await onCopy(code);
+                await onCopy(text);
             else
-                await navigator.clipboard.writeText(code);
+                await navigator.clipboard.writeText(text);
             outcome = 'copied';
         }
         catch {
@@ -68,20 +55,27 @@ export const CodeBlock = function CodeBlock({ code, label = 'Code', language, wr
         if (!mounted.current || request !== revision.current)
             return;
         setState(outcome);
-        // A failed copy selects the source, so the keyboard copy shortcut works next.
-        if (outcome === 'failed' && source.current)
-            window.getSelection()?.selectAllChildren(source.current);
+        onResult?.(outcome);
         timer.current = setTimeout(() => {
             if (mounted.current && request === revision.current)
                 setState('idle');
         }, copyFeedbackDuration);
     }
     const icon = state === 'copied' || state === 'failed' ? state : 'idle';
-    return (_jsxs("div", { ...props, ref: ref, "data-wrap": wrap || undefined, className: cx('surf-code-block', className), children: [_jsxs("div", { className: 'surf-code-toolbar', children: [_jsxs("span", { className: 'surf-code-label', children: [label, language && _jsx("span", { className: 'surf-code-language', children: language })] }), _jsxs(Button, { ref: button, type: 'button', variant: 'outline', size: 'small', className: 'surf-code-copy', onClick: copy, 
-                        // A pending copy blocks a second start but keeps focus on the button.
-                        disabled: state === 'busy', focusableWhenDisabled: true, "aria-busy": state === 'busy' || undefined, "data-copy-state": icon === 'idle' ? undefined : icon, "data-copy-used": used || undefined, children: [_jsx(Icon, { name: copyIcons[icon], className: 'surf-code-copy-icon' }, icon), _jsx("span", { "aria-live": 'polite', children: _jsx("span", { className: 'surf-code-copy-label', children: state === 'copied'
-                                        ? copiedLabel
-                                        : state === 'failed'
-                                            ? copyErrorLabel
-                                            : copyLabel }, icon) })] })] }), _jsx(ScrollArea, { label: label, orientation: 'horizontal', children: _jsx("pre", { ref: source, className: 'surf-code-text', children: _jsx(SyntaxHighlighter, { code: code, language: language, inline: true }) }) })] }));
+    return (_jsxs(Button, { ...props, ref: ref, type: 'button', variant: variant, size: size, className: skin('surf-copy-button', className), onClick: copy, 
+        // A pending copy blocks a second start but keeps focus on the button.
+        disabled: state === 'busy', focusableWhenDisabled: true, "aria-busy": state === 'busy' || undefined, "data-copy-state": icon === 'idle' ? undefined : icon, "data-copy-used": used || undefined, children: [_jsx(Icon, { name: copyIcons[icon], className: 'surf-copy-icon' }, icon), _jsxs("span", { className: 'surf-copy-text', children: [_jsx("span", { "aria-live": 'polite', children: _jsx("span", { className: 'surf-copy-label', children: state === 'copied'
+                                ? copiedLabel
+                                : state === 'failed'
+                                    ? copyErrorLabel
+                                    : copyLabel }, icon) }), [copyLabel, copiedLabel, copyErrorLabel].map((label, index) => (_jsx("span", { className: 'surf-copy-room', "data-label": label, "aria-hidden": 'true' }, index)))] })] }));
+};
+export const CodeBlock = function CodeBlock({ code, label = 'Code', language, wrap = false, labels, onCopy, className, ref, ...props }) {
+    const source = React.useRef(null);
+    return (_jsxs("div", { ...props, ref: ref, "data-wrap": wrap || undefined, className: cx('surf-code-block', className), children: [_jsxs("div", { className: 'surf-code-toolbar', children: [_jsxs("span", { className: 'surf-code-label', children: [label, language && _jsx("span", { className: 'surf-code-language', children: language })] }), _jsx(CopyButton, { className: 'surf-code-copy', value: code, onCopy: onCopy, labels: { ...labels, copy: labels?.copy ?? 'Copy code' }, 
+                        // A failed copy selects the source, so the keyboard copy shortcut works next.
+                        onResult: (result) => {
+                            if (result === 'failed' && source.current)
+                                window.getSelection()?.selectAllChildren(source.current);
+                        } })] }), _jsx(ScrollArea, { label: label, orientation: 'horizontal', children: _jsx("pre", { ref: source, className: 'surf-code-text', children: _jsx(SyntaxHighlighter, { code: code, language: language, inline: true }) }) })] }));
 };

package/dist/combobox.d.ts

@@ -4,10 +4,7 @@ declare function ComboboxRoot<Value, Multiple extends boolean | undefined = fals
 export declare const Combobox: {
     Root: typeof ComboboxRoot;
     Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Content: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding"> & {
-        /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
-        positionerProps?: React.ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>;
-    } & {
+    Content: ({ side, align, sideOffset, collisionPadding, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding"> & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
     Popup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/combobox").ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -159,9 +156,6 @@ export declare const ComboboxArrow: React.ForwardRefExoticComponent<Omit<import(
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => React.JSX.Element, ComboboxTrigger: ({ children, className, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCombobox.Trigger> & {
     ref?: React.Ref<HTMLButtonElement>;
-}) => React.JSX.Element, ComboboxValue: typeof BaseCombobox.Value, ComboboxContent: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding"> & {
-    /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
-    positionerProps?: React.ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>;
-} & {
+}) => React.JSX.Element, ComboboxValue: typeof BaseCombobox.Value, ComboboxContent: ({ side, align, sideOffset, collisionPadding, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup> & Pick<React.ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>, "side" | "align" | "sideOffset" | "collisionPadding"> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;

package/dist/combobox.js

@@ -14,8 +14,8 @@ function ComboboxRoot({ children, form, ...props }) {
 }
 const ComboPopup = /* @__PURE__ */ part(BaseCombobox.Popup, 'surf-combobox-popup', { portal: true });
 const ComboPositioner = /* @__PURE__ */ part(BaseCombobox.Positioner, 'surf-positioner', { portal: true });
-const ComboContent = function ComboContent({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }) {
-    return (_jsx(OwnPortal, { portal: BaseCombobox.Portal, children: _jsx(ComboPositioner, { sideOffset: 6, ...positionerProps, ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(ComboPopup, { ...props, ref: ref }) }) }));
+const ComboContent = function ComboContent({ side, align, sideOffset, collisionPadding, ref, ...props }) {
+    return (_jsx(OwnPortal, { portal: BaseCombobox.Portal, children: _jsx(ComboPositioner, { sideOffset: 6, ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(ComboPopup, { ...props, ref: ref }) }) }));
 };
 const ComboTrigger = function ComboTrigger({ children, className, ref, ...props }) {
     return (_jsx(BaseCombobox.Trigger, { "aria-label": 'Show options', ...props, ref: ref, className: skin('surf-combobox-action', className), children: children ?? _jsx(Icon, { name: 'chevron-down' }) }));

package/dist/context-menu.d.ts

@@ -14,10 +14,7 @@ export declare const ContextMenu: {
     } & {
         ref?: React.Ref<HTMLDivElement> | undefined;
     }) => React.JSX.Element;
-    Content: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Popup> & Placement<typeof BaseContextMenu.Positioner> & {
-        /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
-        positionerProps?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner>;
-    } & {
+    Content: ({ side, align, sideOffset, collisionPadding, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Popup> & Placement<typeof BaseContextMenu.Positioner> & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.JSX.Element;
     Popup: ({ ref, ...props }: Omit<Omit<Omit<import("@base-ui/react/context-menu").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
@@ -117,9 +114,6 @@ export declare const ContextMenuArrow: React.ForwardRefExoticComponent<Omit<impo
     size?: import("./size.js").ComponentSize;
 } & {
     ref?: React.Ref<HTMLDivElement> | undefined;
-}) => React.JSX.Element, ContextMenuContent: ({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Popup> & Placement<typeof BaseContextMenu.Positioner> & {
-    /** @deprecated Pass side, align, sideOffset and collisionPadding directly. */
-    positionerProps?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner>;
-} & {
+}) => React.JSX.Element, ContextMenuContent: ({ side, align, sideOffset, collisionPadding, ref, ...props }: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Popup> & Placement<typeof BaseContextMenu.Positioner> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;

package/dist/context-menu.js

@@ -4,8 +4,8 @@ import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
 import { Menu } from './menu.js';
 import { OwnPortal, defined, part, scopedPortal, } from './parts.js';
 const ContextPositioner = /* @__PURE__ */ part(BaseContextMenu.Positioner, 'surf-positioner', { portal: true });
-const ContextContent = function ContextContent({ side, align, sideOffset, collisionPadding, positionerProps, ref, ...props }) {
-    return (_jsx(OwnPortal, { portal: BaseContextMenu.Portal, children: _jsx(ContextPositioner, { ...positionerProps, ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(Menu.Popup, { ...props, ref: ref }) }) }));
+const ContextContent = function ContextContent({ side, align, sideOffset, collisionPadding, ref, ...props }) {
+    return (_jsx(OwnPortal, { portal: BaseContextMenu.Portal, children: _jsx(ContextPositioner, { ...defined({ side, align, sideOffset, collisionPadding }), children: _jsx(Menu.Popup, { ...props, ref: ref }) }) }));
 };
 /** Same menu anatomy and styling, with the context-specific cursor positioner. */
 export const ContextMenu = {

package/dist/css/bar-list.css

@@ -0,0 +1,9 @@
+/* Bar list, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/css/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/scroll-area.css';
+@import './rules/bar-list.css';

package/dist/css/chart.css

@@ -5,7 +5,9 @@
 @import '@surflane/css/presentation/base.css';
 @import './rules/base.css';
 @import './rules/sizing.css';
+@import './rules/popup.css';
 @import './rules/icon.css';
+@import './rules/popover.css';
 @import './rules/button.css';
 @import './rules/scroll-area.css';
 @import '@surflane/css/presentation/table.css';

package/dist/css/dashboard.css

@@ -0,0 +1,20 @@
+/* Dashboard, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/css/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/popup.css';
+@import './rules/icon.css';
+@import './rules/popover.css';
+@import './rules/button.css';
+@import './rules/spinner.css';
+@import './rules/skeleton.css';
+@import '@surflane/css/foundations/layout.css';
+@import './rules/layout.css';
+@import '@surflane/css/presentation/card.css';
+@import './rules/card.css';
+@import '@surflane/css/presentation/inline-message.css';
+@import './rules/inline-message.css';
+@import './rules/dashboard.css';

package/dist/css/rules/alert-dialog.css

@@ -6,18 +6,24 @@
   .surf-confirm-content {
     --surf-dialog-width: var(--surf-size-dialog-small);
   }
+  /* A confirmation is one short message: its actions sit on the same plane. */
   .surf-confirm-content .surf-dialog-footer {
-    border-top: 0;
     padding-top: var(--surf-space-2);
+    background: none;
+    --surf-plane: var(--surf-canvas);
+    --surf-recessed: var(--surf-surface);
   }
 }
 @layer surflane.sizes {
   .surf-confirm-content .surf-dialog-header {
     padding-inline-end: var(--surf-space-6);
-    border-bottom: 0;
   }
   :where([data-ui-size], [data-ui-size] *).surf-confirm-content
     .surf-dialog-header {
     padding-inline-end: var(--surf-ui-card-padding);
   }
+  :where([data-ui-size], [data-ui-size] *).surf-confirm-content
+    .surf-dialog-footer {
+    padding-top: var(--surf-space-2);
+  }
 }

package/dist/css/rules/app-shell.css

@@ -16,13 +16,9 @@
      that frames it and clips it. Only the page surface inside it is rounded. */
   .surf-app-shell {
     --surf-app-shell-inset: var(--surf-space-3);
-    /* --app-shell-radius, if a caller still sets it, keeps deriving the page radius. */
     --surf-app-shell-page-radius: max(
       0px,
-      calc(
-        var(--app-shell-radius, var(--surf-radius-sheet)) -
-          var(--surf-app-shell-inset)
-      )
+      calc(var(--surf-radius-sheet) - var(--surf-app-shell-inset))
     );
     --surf-app-shell-sidebar-width: 216px;
     /* The collapsed sidebar's width. Set it on the shell for a narrower rail. */
@@ -34,6 +30,8 @@
     min-inline-size: 0;
     padding: var(--surf-app-shell-inset);
     background: var(--surf-chrome);
+    --surf-plane: var(--surf-chrome);
+    --surf-recessed: var(--surf-canvas);
   }
   .surf-app-shell[data-sidebar='collapsed'] {
     --surf-app-shell-sidebar-width: var(--surf-app-shell-rail-width);
@@ -61,6 +59,8 @@
     background: var(--surf-canvas);
     border-radius: var(--surf-app-shell-page-radius);
     overflow-wrap: anywhere;
+    --surf-plane: var(--surf-canvas);
+    --surf-recessed: var(--surf-surface);
   }
   .surf-app-shell-footer {
     margin-block-start: auto;
@@ -88,13 +88,19 @@
     transition: background-color var(--surf-duration-fast) var(--surf-ease-out);
   }
   .surf-app-shell-link:hover {
-    background: var(--surf-interaction-hover-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-app-shell-link:active:not([aria-current='page']) {
-    background: var(--surf-interaction-active-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-active-bg),
+      var(--surf-interaction-active-bg)
+    );
   }
   .surf-app-shell-link[aria-current='page'] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     color: var(--surf-ink);
     font-weight: var(--surf-weight-medium);
   }
@@ -211,6 +217,16 @@
       border-radius: 0;
     }
   }
+  /* The menu trigger shows only where the sidebar hides, at the header's end. */
+  .surf-app-shell-menu-trigger.surf-button {
+    display: none;
+  }
+  @media (max-width: 760px) {
+    .surf-app-shell-menu-trigger.surf-button {
+      display: inline-flex;
+      margin-inline-start: auto;
+    }
+  }
   @media (max-width: 760px), (pointer: coarse) {
     .surf-app-shell-link {
       min-block-size: var(--surf-control-target-size);
@@ -223,7 +239,9 @@
   }
   @media (forced-colors: active) {
     .surf-app-shell-link[aria-current='page'] {
-      outline: 1px solid Highlight;
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
     }
   }
   /* Workspace variant: product sidebar owns the brand; the content scrollport is caller-provided. */
@@ -267,7 +285,7 @@
     position: absolute;
     inset-block-start: var(--surf-space-5);
     inset-inline-end: calc(var(--surf-app-shell-toggle-size) / -2);
-    border: 1px solid var(--surf-line);
+    border: 1px solid var(--surf-control-border);
     background: var(--surf-canvas);
     z-index: 1;
   }
@@ -281,6 +299,25 @@
     border-color: transparent;
     background: transparent;
   }
+  /* On touch the toggle grows to the target size, expanded or collapsed. */
+  @media (pointer: coarse) {
+    .surf-app-shell[data-layout='workspace']
+      > .surf-app-shell-sidebar
+      > .surf-app-shell-toggle {
+      --surf-app-shell-toggle-size: max(
+        var(--surf-space-8),
+        var(--surf-control-target-size)
+      );
+    }
+    .surf-app-shell[data-layout='workspace'][data-sidebar='collapsed']
+      > .surf-app-shell-sidebar
+      > .surf-app-shell-toggle {
+      --surf-app-shell-toggle-size: max(
+        var(--surf-space-10),
+        var(--surf-control-target-size)
+      );
+    }
+  }
   /* A ScrollArea in the sidebar takes the room between the brand and the footer, and
    * one in the content fills it, so the menu and the page scroll on their own. */
   .surf-app-shell[data-layout='workspace']
@@ -340,6 +377,8 @@
     padding: var(--surf-space-6);
     background: var(--surf-canvas);
     border-radius: var(--surf-app-shell-page-radius);
+    --surf-plane: var(--surf-canvas);
+    --surf-recessed: var(--surf-surface);
   }
   /* On a phone the page meets the screen's edges, below the mobile header. */
   @media (max-width: 760px) {
@@ -391,6 +430,14 @@
   }
 }
 @layer surflane.sizes {
+  /* Compact density: the page and the content keep the 12px the blocks inside keep,
+     on a phone too. */
+  :where([data-ui-density='compact'], [data-ui-density='compact'] *):is(
+    .surf-app-shell-page,
+    .surf-app-shell-content
+  ) {
+    padding: var(--surf-ui-density-gap);
+  }
   /* A row rendered as a Button, such as Menu.Trigger, keeps the row's shape and the
    * sidebar's text over the button's size scheme. */
   .surf-app-shell-link.surf-button {

package/dist/css/rules/bar-list.css

@@ -0,0 +1,101 @@
+/* Bar list, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Every row is one height, so a list that scrolls shows whole rows: a name line,
+     and a detail line when any row has one. */
+  .surf-bar-list {
+    --surf-bar-list-row: calc(
+      var(--surf-type-body-size) * var(--surf-type-body-leading) +
+        var(--surf-space-2)
+    );
+    min-inline-size: 0;
+  }
+  .surf-bar-list[data-detail] {
+    --surf-bar-list-row: calc(
+      var(--surf-type-body-size) * var(--surf-type-body-leading) +
+        var(--surf-type-caption-size) * var(--surf-type-caption-leading) +
+        var(--surf-space-2)
+    );
+  }
+  .surf-bar-list .surf-scroll-viewport {
+    max-block-size: calc(var(--surf-bar-list-rows) * var(--surf-bar-list-row));
+  }
+  /* Name, bar and value share one line, in columns every row shares, so the bars
+     start together and the values line up at the end. */
+  .surf-bar-list-items {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(var(--surf-space-12), 3fr) auto;
+    column-gap: var(--surf-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .surf-bar-list-item {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: center;
+    box-sizing: border-box;
+    block-size: var(--surf-bar-list-row);
+    padding-block: var(--surf-space-1);
+    color: var(--surf-ink-body);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
+  }
+  .surf-bar-list-label {
+    display: grid;
+    min-inline-size: 0;
+  }
+  .surf-bar-list-name,
+  .surf-bar-list-detail {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .surf-bar-list-name {
+    color: var(--surf-ink);
+  }
+  .surf-bar-list-detail {
+    color: var(--surf-ink-muted);
+    font-size: var(--surf-type-caption-size);
+    line-height: var(--surf-type-caption-leading);
+  }
+  /* The pair Progress and Slider use: the brand mark on the recessed step. */
+  .surf-bar-list-bar {
+    display: block;
+    block-size: var(--surf-space-2);
+    border-radius: var(--surf-radius-full);
+    background: var(--surf-recessed);
+    overflow: hidden;
+  }
+  .surf-bar-list-fill {
+    display: block;
+    block-size: 100%;
+    border-radius: inherit;
+    background: var(--surf-brand-mark);
+  }
+  .surf-bar-list-value {
+    color: var(--surf-ink);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    white-space: nowrap;
+  }
+  @media (forced-colors: active) {
+    .surf-bar-list-bar {
+      background: Canvas;
+      outline: 1px solid CanvasText;
+    }
+    .surf-bar-list-fill {
+      background: CanvasText;
+    }
+  }
+}
+@layer surflane.sizes {
+  /* The bar is as thick as Meter's and Progress's at each size. */
+  :where([data-ui-size], [data-ui-size] *).surf-bar-list-bar {
+    block-size: var(--surf-ui-gauge);
+  }
+}

package/dist/css/rules/bar.css

@@ -20,19 +20,12 @@
     width: fit-content;
     max-width: 100%;
   }
-  .surf-toggle,
-  .surf-toolbar-button {
-    position: relative;
-  }
+  /* A toolbar or menubar is a recessed plane; forced colors draw its edge. */
   @media (forced-colors: active) {
-    .surf-toggle[data-pressed]::after,
-    .surf-toolbar-button[aria-pressed='true']::after {
-      content: '';
-      position: absolute;
-      inset: 3px;
-      border: 1px solid CanvasText;
-      border-radius: inherit;
-      pointer-events: none;
+    .surf-toolbar,
+    .surf-menubar {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
     }
   }
 }

package/dist/css/rules/bottom-navigation.css

@@ -75,7 +75,7 @@
     color: var(--surf-ink);
   }
   .surf-bottom-nav-item[aria-current='page'] .surf-bottom-nav-icon {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
   }
   @media (hover: hover) {
     .surf-bottom-nav-item:hover .surf-bottom-nav-icon {
@@ -117,6 +117,22 @@
     font-variant-numeric: tabular-nums;
     text-align: center;
   }
+  /* Status fills, each 4.5:1 against the canvas-colored count. */
+  .surf-bottom-nav-badge[data-tone='caution'] {
+    background: var(--surf-status-caution-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='success'] {
+    background: var(--surf-status-success-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='info'] {
+    background: var(--surf-status-info-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='progress'] {
+    background: var(--surf-status-progress-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='neutral'] {
+    background: var(--surf-status-neutral-fg);
+  }
   .surf-bottom-nav-badge[data-dot] {
     inset-block-start: 0;
     min-inline-size: 0;
@@ -134,10 +150,13 @@
       border-block-start-color: CanvasText;
     }
     .surf-bottom-nav-item[aria-current='page'] .surf-bottom-nav-icon {
-      outline: 1px solid Highlight;
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
     }
     .surf-bottom-nav-badge {
       border: 1px solid CanvasText;
+      forced-color-adjust: auto;
     }
   }
 }

package/dist/css/rules/breadcrumbs.css

@@ -1,9 +1,3 @@
 /* Breadcrumbs, with the styles of what it renders. */
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
-
-@layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *):is(.surf-breadcrumbs) {
-    font-size: var(--surf-ui-font);
-  }
-}

package/dist/css/rules/button.css

@@ -24,7 +24,7 @@
     text-decoration: none;
     cursor: pointer;
   }
-  .surf-button:is([data-variant='default'], [data-variant='primary']) {
+  .surf-button[data-variant='primary'] {
     /* On the brand fill the layer is its ink: light ink barely moves bright cyan. */
     --surf-interaction-hover-bg: oklch(from var(--surf-on-brand) l c h / 0.08);
     --surf-interaction-active-bg: oklch(from var(--surf-on-brand) l c h / 0.14);
@@ -33,7 +33,7 @@
     color: var(--surf-on-brand);
   }
   .surf-button[data-variant='outline'] {
-    border-color: var(--surf-line);
+    border-color: var(--surf-control-border);
     background: transparent;
   }
   .surf-button[data-variant='ghost'] {
@@ -66,7 +66,7 @@
     }
   }
   .surf-button[data-variant='secondary'] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     color: var(--surf-ink);
   }
   .surf-button[data-variant='destructive'] {
@@ -100,14 +100,6 @@
   }
 }
 @layer surflane.sizes {
-  .surf-button[data-size='xs'] {
-    height: 24px;
-    min-height: 24px;
-    padding-inline: var(--surf-space-2);
-    font-size: var(--surf-type-caption-size);
-    letter-spacing: var(--surf-type-caption-tracking);
-    gap: var(--surf-space-1);
-  }
   .surf-button[data-size^='icon'] {
     width: var(--surf-control-height);
     padding: 0;
@@ -117,7 +109,7 @@
     min-height: var(--surf-control-height);
     padding-inline: var(--surf-ui-button-padding);
     font-size: var(--surf-ui-font);
-    line-height: var(--surf-ui-leading);
+    line-height: var(--surf-ui-label-leading);
   }
   :where([data-ui-size], [data-ui-size] *).surf-button[data-size^='icon'] {
     inline-size: var(--surf-control-height);