@surflane/ui 0.12.0 → 0.13.0

package/dist/code.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Button } from './button.js';
 export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onCopy'> & {
     code: string;
     label?: string;
@@ -6,12 +7,6 @@ export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'childr
     wrap?: boolean;
     /** The copy button's text: the action, then the result. */
     labels?: Partial<CodeBlockLabels>;
-    /** @deprecated Use `labels.copy`. Removed in a later minor. */
-    copyLabel?: string;
-    /** @deprecated Use `labels.copied`. Removed in a later minor. */
-    copiedLabel?: string;
-    /** @deprecated Use `labels.copyError`. Removed in a later minor. */
-    copyErrorLabel?: string;
     onCopy?: (code: string) => void | Promise<void>;
 };
 export type CodeBlockLabels = {
@@ -19,6 +14,23 @@ export type CodeBlockLabels = {
     copied: string;
     copyError: string;
 };
-export declare const CodeBlock: ({ code, label, language, wrap, labels, copyLabel: legacyCopyLabel, copiedLabel: legacyCopiedLabel, copyErrorLabel: legacyCopyErrorLabel, onCopy, className, ref, ...props }: CodeBlockProps & {
+export type CopyButtonLabels = CodeBlockLabels;
+export type CopyButtonProps = Omit<React.ComponentPropsWithoutRef<typeof Button>, 'children' | 'onClick' | 'onCopy' | 'value'> & {
+    /** What to copy: the text, or a function that returns it when pressed. */
+    value: string | (() => string | Promise<string>);
+    /** The button's text: the action, then the result. */
+    labels?: Partial<CopyButtonLabels>;
+    /** Copies instead of the clipboard write; throw to report a failure. */
+    onCopy?: (text: string) => void | Promise<void>;
+    /** Hears each outcome, such as to select the source after a failure. */
+    onResult?: (result: 'copied' | 'failed') => void;
+};
+/** 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 declare const CopyButton: ({ value, labels, onCopy, onResult, variant, size, className, ref, ...props }: CopyButtonProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.JSX.Element;
+export declare const CodeBlock: ({ code, label, language, wrap, labels, onCopy, className, ref, ...props }: CodeBlockProps & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.JSX.Element;

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/rules/alert-dialog.css

@@ -6,15 +6,17 @@
   .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 {

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);
   }
@@ -233,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. */
@@ -277,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;
   }
@@ -291,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']
@@ -350,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) {
@@ -401,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

@@ -63,12 +63,12 @@
     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 surface plane. */
+  /* 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-surface);
+    background: var(--surf-recessed);
     overflow: hidden;
   }
   .surf-bar-list-fill {

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 {
@@ -150,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);

package/dist/css/rules/card.css

@@ -12,4 +12,18 @@
     line-height: var(--surf-ui-title-leading);
     letter-spacing: var(--surf-ui-title-tracking);
   }
+  /* Compact density, after any size: a card pads 12px, keeps 8px between its parts
+     and titles itself with the label role, as a dense panel needs. */
+  :where([data-ui-density='compact'], [data-ui-density='compact'] *).surf-card {
+    padding: var(--surf-surface-padding, var(--surf-ui-density-gap));
+    gap: var(--surf-ui-density-inset);
+  }
+  :where(
+    [data-ui-density='compact'],
+    [data-ui-density='compact'] *
+  ).surf-card-title {
+    font-size: var(--surf-type-label-size);
+    line-height: var(--surf-type-label-leading);
+    letter-spacing: var(--surf-type-label-tracking);
+  }
 }

package/dist/css/rules/chart.css

@@ -37,12 +37,14 @@
     align-items: center;
     gap: 0 var(--surf-space-4);
   }
+  /* The legend takes the inline end of the key: the right, or the left right to left. */
   .surf-chart-legend {
     display: flex;
     flex-wrap: wrap;
     gap: var(--surf-space-1) var(--surf-space-2);
     padding: 0;
-    margin: 0 0 0 auto;
+    margin: 0;
+    margin-inline-start: auto;
     list-style: none;
   }
   .surf-chart-mark {
@@ -103,10 +105,16 @@
     overflow-wrap: anywhere;
   }
   .surf-chart-legend-button:hover {
-    background: var(--surf-interaction-hover-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-chart-legend-button:active {
-    background: var(--surf-interaction-active-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-active-bg),
+      var(--surf-interaction-active-bg)
+    );
   }
   .surf-chart-legend-button[aria-pressed='false'] span {
     text-decoration: line-through;
@@ -211,7 +219,7 @@
     box-sizing: border-box;
     min-height: 100px;
     padding: var(--surf-space-3) var(--surf-space-4);
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
     color: var(--surf-ink-body);
     border-radius: var(--surf-radius-md);
     font: var(--surf-weight-regular)
@@ -240,7 +248,7 @@
     gap: var(--surf-space-3);
     min-height: 160px;
     padding: var(--surf-space-4);
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
     color: var(--surf-ink-muted);
     border-radius: var(--surf-radius-md);
   }

package/dist/css/rules/choice.css

@@ -39,7 +39,10 @@
   .surf-radio:hover:not([data-disabled], [data-readonly]),
   .surf-switch:hover:not([data-disabled], [data-readonly]) {
     border-color: var(--surf-control-choice-hover-border);
-    background: var(--surf-control-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-checkbox:is([data-checked], [data-indeterminate]),
   .surf-radio[data-checked],
@@ -54,7 +57,10 @@
       [data-disabled],
       [data-readonly]
     ) {
-    background: var(--surf-control-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
     border-color: var(--surf-control-choice-hover-border);
   }
   :is(.surf-checkbox, .surf-radio, .surf-switch):is(
@@ -103,6 +109,24 @@
     ) {
     border-color: var(--surf-status-danger-fg);
   }
+  /* On touch and narrow screens a ChoiceLabel makes the whole row the target. A
+     choice without one, such as a table row's checkbox, keeps its size and reaches
+     --surf-control-target-size around it instead. */
+  @media (max-width: 760px), (pointer: coarse) {
+    :is(.surf-checkbox, .surf-radio, .surf-switch):not(.surf-choice-label *) {
+      position: relative;
+    }
+    :is(.surf-checkbox, .surf-radio, .surf-switch):not(
+        .surf-choice-label *
+      )::after {
+      content: '';
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--surf-control-target-size));
+      block-size: max(100%, var(--surf-control-target-size));
+      translate: -50% -50%;
+    }
+  }
   @media (forced-colors: active) {
     .surf-checkbox,
     .surf-radio,