@surflane/ui 0.5.0 → 0.6.0

package/README.md

@@ -18,7 +18,7 @@ Import the stylesheets once at the application root. `all.css` brings the tokens
 @import '@surflane/ui/all.css';
 ```
 
-The rules sit in `surflane.*` cascade layers, so your unlayered CSS overrides them. Set `data-theme="light"` or `data-theme="dark"` on `<html>` before the first paint and add `pui-typography` to `<body>`. The [install guide](https://surflane.page/install) walks through Vite, Next.js, React Router and Astro, with or without Tailwind CSS.
+To ship only what you use, import component stylesheets instead, such as `@surflane/ui/button.css` and `@surflane/ui/dialog.css`. Each brings the tokens and the styles of what its component renders. The rules sit in `surflane.*` cascade layers, so your unlayered CSS overrides them. Set `data-theme="light"` or `data-theme="dark"` on `<html>` before the first paint and add `pui-typography` to `<body>`. The [install guide](https://surflane.page/install) walks through Vite, Next.js, React Router and Astro, with or without Tailwind CSS.
 
 ```tsx
 import {

package/dist/app-shell.d.ts

@@ -1,11 +1,43 @@
 import * as React from 'react';
+import { type ButtonProps } from './button.js';
+export type AppShellRootProps = React.ComponentPropsWithoutRef<'div'> & {
+    layout?: 'header' | 'workspace';
+    /** Whether the sidebar is collapsed to its rail. Pass it to control the state. */
+    collapsed?: boolean;
+    /** The starting state when the shell controls it. */
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** A localStorage key that remembers the state across visits. A server-rendered
+     * app reads a cookie into defaultCollapsed instead, so the first paint is right. */
+    persist?: string;
+    /** ⌘B, or Ctrl+B, toggles the sidebar unless focus is in a text field. */
+    shortcut?: boolean;
+};
+export type AppShellSidebarToggleProps = Omit<ButtonProps, 'children'> & {
+    /** The button's name in each state; it is also the tooltip. */
+    labels?: {
+        collapse?: string;
+        expand?: string;
+    };
+    children?: React.ReactNode;
+};
 export declare const AppShell: {
     Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        collapsed?: boolean;
         layout?: "header" | "workspace";
+        /** Whether the sidebar is collapsed to its rail. Pass it to control the state. */
+        collapsed?: boolean;
+        /** The starting state when the shell controls it. */
+        defaultCollapsed?: boolean;
+        onCollapsedChange?: (collapsed: boolean) => void;
+        /** A localStorage key that remembers the state across visits. A server-rendered
+         * app reads a cookie into defaultCollapsed instead, so the first paint is right. */
+        persist?: string;
+        /** ⌘B, or Ctrl+B, toggles the sidebar unless focus is in a text field. */
+        shortcut?: boolean;
     } & React.RefAttributes<HTMLDivElement>>;
     Header: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Sidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+    SidebarToggle: React.ForwardRefExoticComponent<Omit<AppShellSidebarToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Page: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Footer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -16,9 +48,18 @@ export declare const AppShell: {
     } & React.RefAttributes<HTMLAnchorElement>>;
 };
 export declare const AppShellRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    collapsed?: boolean;
     layout?: "header" | "workspace";
-} & React.RefAttributes<HTMLDivElement>>, AppShellHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellSidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, AppShellContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, AppShellLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "children"> & {
+    /** Whether the sidebar is collapsed to its rail. Pass it to control the state. */
+    collapsed?: boolean;
+    /** The starting state when the shell controls it. */
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** A localStorage key that remembers the state across visits. A server-rendered
+     * app reads a cookie into defaultCollapsed instead, so the first paint is right. */
+    persist?: string;
+    /** ⌘B, or Ctrl+B, toggles the sidebar unless focus is in a text field. */
+    shortcut?: boolean;
+} & React.RefAttributes<HTMLDivElement>>, AppShellHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellSidebar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, AppShellSidebarToggle: React.ForwardRefExoticComponent<Omit<AppShellSidebarToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>, AppShellContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>, AppShellLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>, AppShellLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "children"> & {
     icon: React.ReactNode;
     label: string;
 } & React.RefAttributes<HTMLAnchorElement>>;

package/dist/app-shell.js

@@ -1,16 +1,85 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { cx } from './parts.js';
-/** Layout only. Routing, session, theme and mobile disclosure belong to the caller. */
-const Root = /* @__PURE__ */ React.forwardRef(function AppShellRoot({ collapsed = false, layout = 'header', className, ...props }, ref) {
-    return (_jsx("div", { ...props, ref: ref, "data-layout": layout, "data-sidebar": collapsed ? 'collapsed' : 'expanded', className: cx('pui-app-shell', className) }));
+import { cx, skin } from './parts.js';
+import { Button } from './button.js';
+import { Icon } from './icon.js';
+import { Tooltip } from './tooltip.js';
+const ShellContext = /* @__PURE__ */ React.createContext(null);
+const SidebarContext = /* @__PURE__ */ React.createContext(false);
+const editable = (target) => target instanceof HTMLElement &&
+    (target.isContentEditable ||
+        /^(input|textarea|select)$/i.test(target.tagName));
+const apple = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
+/** The sidebar shortcut as this platform writes it. */
+const shortcutLabel = () => (apple() ? '⌘B' : 'Ctrl+B');
+/** Layout only. Routing, session, theme and mobile disclosure belong to the caller;
+ * the shell keeps the sidebar's collapsed state unless you control it. */
+const Root = /* @__PURE__ */ React.forwardRef(function AppShellRoot({ collapsed, defaultCollapsed = false, onCollapsedChange, persist, shortcut = true, layout = 'header', className, children, ...props }, ref) {
+    const [own, setOwn] = React.useState(defaultCollapsed);
+    const value = collapsed ?? own;
+    const latest = React.useRef(value);
+    latest.current = value;
+    const setCollapsed = React.useCallback((next) => {
+        if (collapsed === undefined)
+            setOwn(next);
+        onCollapsedChange?.(next);
+        if (persist)
+            try {
+                localStorage.setItem(persist, next ? 'collapsed' : 'expanded');
+            }
+            catch { }
+    }, [collapsed, onCollapsedChange, persist]);
+    React.useLayoutEffect(() => {
+        if (!persist || collapsed !== undefined)
+            return;
+        try {
+            const stored = localStorage.getItem(persist);
+            if (stored)
+                setOwn(stored === 'collapsed');
+        }
+        catch { }
+    }, [persist, collapsed]);
+    React.useEffect(() => {
+        if (!shortcut)
+            return;
+        const toggle = (event) => {
+            if (event.key.toLowerCase() !== 'b' ||
+                event.altKey ||
+                event.shiftKey ||
+                !(apple() ? event.metaKey : event.ctrlKey) ||
+                editable(event.target))
+                return;
+            event.preventDefault();
+            setCollapsed(!latest.current);
+        };
+        document.addEventListener('keydown', toggle);
+        return () => document.removeEventListener('keydown', toggle);
+    }, [shortcut, setCollapsed]);
+    const sidebarId = React.useId();
+    const shell = React.useMemo(() => ({ collapsed: value, setCollapsed, sidebarId, shortcut }), [value, setCollapsed, sidebarId, shortcut]);
+    return (_jsx(ShellContext.Provider, { value: shell, children: _jsx("div", { ...props, ref: ref, "data-layout": layout, "data-sidebar": value ? 'collapsed' : 'expanded', className: cx('pui-app-shell', className), children: children }) }));
+});
+/** Collapses the sidebar to its rail and back. Its tooltip names the shortcut. */
+const SidebarToggle = /* @__PURE__ */ React.forwardRef(function AppShellSidebarToggle({ labels, className, children, onClick, ...props }, ref) {
+    const shell = React.useContext(ShellContext);
+    if (!shell)
+        throw new Error('AppShell.SidebarToggle belongs in AppShell.Root');
+    const label = shell.collapsed
+        ? (labels?.expand ?? 'Expand sidebar')
+        : (labels?.collapse ?? 'Collapse sidebar');
+    return (_jsx(Tooltip, { label: label, shortcut: shell.shortcut ? shortcutLabel() : undefined, children: _jsx(Button, { variant: 'ghost', size: 'icon', ...props, ref: ref, "aria-label": label, "aria-expanded": !shell.collapsed, "aria-controls": shell.sidebarId, className: skin('pui-app-shell-toggle', className), onClick: (event) => {
+                onClick?.(event);
+                if (!event.defaultPrevented)
+                    shell.setCollapsed(!shell.collapsed);
+            }, children: children ?? _jsx(Icon, { name: 'sidebar' }) }) }));
 });
 const Header = /* @__PURE__ */ React.forwardRef(function AppShellHeader({ className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, className: cx('pui-app-shell-header', className) }));
 });
-const Sidebar = /* @__PURE__ */ React.forwardRef(function AppShellSidebar({ className, ...props }, ref) {
-    return (_jsx("aside", { ...props, ref: ref, className: cx('pui-app-shell-sidebar', className) }));
+const Sidebar = /* @__PURE__ */ React.forwardRef(function AppShellSidebar({ className, id, ...props }, ref) {
+    const shell = React.useContext(ShellContext);
+    return (_jsx(SidebarContext.Provider, { value: true, children: _jsx("aside", { ...props, ref: ref, id: id ?? shell?.sidebarId, className: cx('pui-app-shell-sidebar', className) }) }));
 });
 const Content = /* @__PURE__ */ React.forwardRef(function AppShellContent({ className, ...props }, ref) {
     return (_jsx("div", { ...props, ref: ref, className: cx('pui-app-shell-content', className) }));
@@ -29,12 +98,16 @@ const Label = /* @__PURE__ */ React.forwardRef(function AppShellLabel({ classNam
     return (_jsx("span", { ...props, ref: ref, className: cx('pui-app-shell-label', className) }));
 });
 const Link = /* @__PURE__ */ React.forwardRef(function AppShellLink({ icon, label, className, ...props }, ref) {
-    return (_jsxs("a", { ...props, ref: ref, "aria-label": props['aria-label'] ?? label, className: cx('pui-app-shell-link', className), children: [_jsx("span", { className: 'pui-app-shell-icon', "aria-hidden": 'true', children: icon }), _jsx(Label, { "aria-hidden": 'true', children: label })] }));
+    const shell = React.useContext(ShellContext);
+    const inSidebar = React.useContext(SidebarContext);
+    // On the collapsed rail only the icon shows, so the name appears as a tooltip.
+    return (_jsx(Tooltip, { label: label, enabled: Boolean(shell?.collapsed && inSidebar), children: _jsxs("a", { ...props, ref: ref, "aria-label": props['aria-label'] ?? label, className: cx('pui-app-shell-link', className), children: [_jsx("span", { className: 'pui-app-shell-icon', "aria-hidden": 'true', children: icon }), _jsx(Label, { "aria-hidden": 'true', children: label })] }) }));
 });
 export const AppShell = {
     Root,
     Header,
     Sidebar,
+    SidebarToggle,
     Content,
     Page,
     Footer,
@@ -42,4 +115,4 @@ export const AppShell = {
     Link,
 };
 // Flat names for React Server Components, which cannot dot into client exports.
-export const { Root: AppShellRoot, Header: AppShellHeader, Sidebar: AppShellSidebar, Content: AppShellContent, Page: AppShellPage, Footer: AppShellFooter, Label: AppShellLabel, Link: AppShellLink, } = AppShell;
+export const { Root: AppShellRoot, Header: AppShellHeader, Sidebar: AppShellSidebar, SidebarToggle: AppShellSidebarToggle, Content: AppShellContent, Page: AppShellPage, Footer: AppShellFooter, Label: AppShellLabel, Link: AppShellLink, } = AppShell;

package/dist/bottom-navigation.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+export type BottomNavigationRootProps = React.ComponentPropsWithoutRef<'nav'> & {
+    /** Names the navigation, such as "Primary". */
+    'aria-label': string;
+    /** mobile: shown at 760px and narrower, where AppShell hides its sidebar. always:
+     * at every width. */
+    visible?: 'mobile' | 'always';
+    /** fixed: pinned to the bottom of the viewport, above the safe area. static: in the
+     * flow, for a frame of your own. */
+    position?: 'fixed' | 'static';
+};
+export type BottomNavigationItemProps = Omit<useRender.ComponentProps<'a'>, 'ref' | 'children'> & {
+    icon: React.ReactNode;
+    label: string;
+    /** Marks the current destination with aria-current="page". */
+    current?: boolean;
+    /** A count, shown up to 99+, or true for a dot. */
+    badge?: number | boolean;
+    /** What the badge means, read after the label, such as "3 unread". A count reads
+     * as its number without it; a dot needs it. */
+    badgeLabel?: string;
+};
+export declare const BottomNavigation: {
+    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+        /** Names the navigation, such as "Primary". */
+        'aria-label': string;
+        /** mobile: shown at 760px and narrower, where AppShell hides its sidebar. always:
+         * at every width. */
+        visible?: "mobile" | "always";
+        /** fixed: pinned to the bottom of the viewport, above the safe area. static: in the
+         * flow, for a frame of your own. */
+        position?: "fixed" | "static";
+    } & React.RefAttributes<HTMLElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<useRender.ComponentProps<"a", {}, import("@base-ui/react/types").HTMLProps>, "children" | "ref"> & {
+        icon: React.ReactNode;
+        label: string;
+        /** Marks the current destination with aria-current="page". */
+        current?: boolean;
+        /** A count, shown up to 99+, or true for a dot. */
+        badge?: number | boolean;
+        /** What the badge means, read after the label, such as "3 unread". A count reads
+         * as its number without it; a dot needs it. */
+        badgeLabel?: string;
+    } & React.RefAttributes<HTMLAnchorElement>>;
+};
+export declare const BottomNavigationRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    /** Names the navigation, such as "Primary". */
+    'aria-label': string;
+    /** mobile: shown at 760px and narrower, where AppShell hides its sidebar. always:
+     * at every width. */
+    visible?: "mobile" | "always";
+    /** fixed: pinned to the bottom of the viewport, above the safe area. static: in the
+     * flow, for a frame of your own. */
+    position?: "fixed" | "static";
+} & React.RefAttributes<HTMLElement>>, BottomNavigationItem: React.ForwardRefExoticComponent<Omit<useRender.ComponentProps<"a", {}, import("@base-ui/react/types").HTMLProps>, "children" | "ref"> & {
+    icon: React.ReactNode;
+    label: string;
+    /** Marks the current destination with aria-current="page". */
+    current?: boolean;
+    /** A count, shown up to 99+, or true for a dot. */
+    badge?: number | boolean;
+    /** What the badge means, read after the label, such as "3 unread". A count reads
+     * as its number without it; a dot needs it. */
+    badgeLabel?: string;
+} & React.RefAttributes<HTMLAnchorElement>>;

package/dist/bottom-navigation.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { cx } from './parts.js';
+/** A phone's primary destinations along the bottom edge, within thumb reach. Pad the
+ * scrolling content by --size-bottom-navigation so the last line stays visible. */
+const Root = /* @__PURE__ */ React.forwardRef(function BottomNavigationRoot({ visible = 'mobile', position = 'fixed', className, children, ...props }, ref) {
+    return (_jsx("nav", { ...props, ref: ref, "data-visible": visible, "data-position": position, className: cx('pui-bottom-nav', className), children: _jsx("ul", { role: 'list', className: 'pui-bottom-nav-list', children: children }) }));
+});
+/** One destination: an icon above its label. Pass a router's link element as
+ * `render` to keep client navigation. */
+const Item = /* @__PURE__ */ React.forwardRef(function BottomNavigationItem({ icon, label, current, badge, badgeLabel, render, className, ...props }, ref) {
+    const count = typeof badge === 'number' && badge > 0
+        ? badge > 99
+            ? '99+'
+            : String(badge)
+        : undefined;
+    const shown = Boolean(count || badge === true);
+    const spoken = badgeLabel ?? count;
+    const link = useRender({
+        defaultTagName: 'a',
+        render,
+        ref,
+        props: {
+            ...props,
+            'aria-current': current ? 'page' : props['aria-current'],
+            className: cx('pui-bottom-nav-item', className),
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'pui-bottom-nav-icon', "aria-hidden": 'true', children: [icon, shown && (_jsx("span", { className: 'pui-bottom-nav-badge', "data-dot": count ? undefined : '', children: count }))] }), _jsx("span", { className: 'pui-bottom-nav-label', children: label }), shown && spoken && (_jsxs("span", { className: 'pui-feedback-sr', children: [", ", spoken] }))] })),
+        },
+    });
+    return _jsx("li", { className: 'pui-bottom-nav-entry', children: link });
+});
+export const BottomNavigation = { Root, Item };
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Root: BottomNavigationRoot, Item: BottomNavigationItem } = BottomNavigation;

package/dist/chart.d.ts

@@ -18,6 +18,12 @@ export type ChartProps = Omit<React.ComponentPropsWithoutRef<'figure'>, 'childre
     yLabel: string;
     type?: 'line' | 'bar' | 'area';
     height?: number;
+    /** Keeps 0 on the value axis. Turn it off for values far from zero, such as
+     * prices, so the line uses the height; bars always start at zero. */
+    includeZero?: boolean;
+    /** neutral tells series apart by ink, dashes and markers. categorical adds six hues,
+     * for categories that color must separate, such as buckets or sectors. */
+    palette?: 'neutral' | 'categorical';
     locale?: string;
     formatValue?: (value: number) => string;
     /** Text the chart shows or announces; pass translations here. */
@@ -40,6 +46,10 @@ export type ChartLabels = {
     viewTable: string;
     table: (title: string) => string;
     tableCaption: (unit: string) => string;
+    /** The readout before any point is inspected. */
+    inspectHint: string;
+    /** The data table's only row when there is no data. */
+    noRows: string;
 };
 /** Cartesian trends with a persistent, keyboard-readable tooltip region and a
  * full data-table alternative. Missing values are gaps, never fabricated zeros. */
@@ -53,6 +63,12 @@ export declare const Chart: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     yLabel: string;
     type?: "line" | "bar" | "area";
     height?: number;
+    /** Keeps 0 on the value axis. Turn it off for values far from zero, such as
+     * prices, so the line uses the height; bars always start at zero. */
+    includeZero?: boolean;
+    /** neutral tells series apart by ink, dashes and markers. categorical adds six hues,
+     * for categories that color must separate, such as buckets or sectors. */
+    palette?: "neutral" | "categorical";
     locale?: string;
     formatValue?: (value: number) => string;
     /** Text the chart shows or announces; pass translations here. */

package/dist/chart.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { Area, Bar, CartesianGrid, ComposedChart, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { Area, Bar, CartesianGrid, ComposedChart, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, useActiveTooltipCoordinate, useActiveTooltipLabel, useIsTooltipActive, usePlotArea, } from 'recharts';
+import { createPortal } from 'react-dom';
 import { Table } from './table.js';
 import { Button } from './button.js';
 import { cx } from './parts.js';
@@ -15,9 +16,17 @@ const chartLabels = {
     viewTable: 'View data table',
     table: (title) => `${title} data table`,
     tableCaption: (unit) => `All input measurements, including hidden series. Unit: ${unit}.`,
+    inspectHint: 'Hover, touch or use chart arrow keys to inspect a measurement.',
+    noRows: 'No rows.',
 };
+/** The round step at or above a raw step: 1, 2, 2.5 or 5 times a power of ten. */
+function roundStep(raw) {
+    if (!(raw > 0))
+        return 0;
+    const power = 10 ** Math.floor(Math.log10(raw));
+    return power * ([1, 2, 2.5, 5, 10].find((f) => f * power >= raw) ?? 10);
+}
 const dashes = [undefined, '7 4', '2 4', '10 3 2 3', '12 5', '4 3'];
-const colorFor = (index) => `var(--chart-series-${(index % 3) + 1})`;
 function Marker({ cx, cy, color, index, }) {
     if (typeof cx !== 'number' ||
         typeof cy !== 'number' ||
@@ -30,9 +39,37 @@ function Marker({ cx, cy, color, index, }) {
 function Pattern({ id, index, color, }) {
     return (_jsxs("pattern", { id: id, patternUnits: 'userSpaceOnUse', width: '8', height: '8', children: [_jsx("rect", { width: '8', height: '8', fill: color }), index % 3 === 1 ? (_jsx("path", { d: 'M-2 2L2-2M0 8L8 0M6 10L10 6', stroke: 'var(--canvas)', strokeWidth: '1.5' })) : index % 3 === 2 ? (_jsx("circle", { cx: '4', cy: '4', r: '1.4', fill: 'var(--canvas)' })) : null] }));
 }
+/** A series' swatch, as the legend and the floating values draw it. */
+function SeriesMark({ type, index, color, pattern, }) {
+    return (_jsx("svg", { className: 'pui-chart-mark', viewBox: '0 0 32 20', "aria-hidden": 'true', focusable: 'false', children: type === 'bar' ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: pattern, color: color, index: index }) }), _jsx("rect", { x: '4', y: '3', width: '24', height: '14', rx: '2', fill: `url(#${pattern})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M1 10h30', stroke: color, strokeWidth: '2', strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: color })] })) }));
+}
+/** The active point's values beside it, for pointer and touch users. The readout
+ * below the plot announces the same values, so this copy stays out of the
+ * accessibility tree. It sits on the side of the point with more room and stays
+ * inside the plot. */
+function FloatingValues({ host, hidden, render, }) {
+    const active = useIsTooltipActive();
+    const label = useActiveTooltipLabel();
+    const point = useActiveTooltipCoordinate();
+    const plot = usePlotArea();
+    const box = React.useRef(null);
+    const [width, setWidth] = React.useState(0);
+    const shown = Boolean(host && !hidden && active && label !== undefined && point && plot);
+    React.useLayoutEffect(() => {
+        if (shown && box.current)
+            setWidth(box.current.offsetWidth);
+    }, [shown, label, plot?.width]);
+    if (!shown || !point || !plot)
+        return null;
+    // The gap between the point and the box, in px: the --space-3 step.
+    const gap = 12;
+    const start = point.x > plot.x + plot.width / 2;
+    const left = Math.min(Math.max(start ? point.x - gap - width : point.x + gap, plot.x), plot.x + plot.width - width);
+    return createPortal(_jsx("div", { ref: box, className: 'pui-chart-tooltip', "aria-hidden": 'true', style: { left, top: plot.y, visibility: width ? undefined : 'hidden' }, children: render(String(label)) }), host);
+}
 /** Cartesian trends with a persistent, keyboard-readable tooltip region and a
  * full data-table alternative. Missing values are gaps, never fabricated zeros. */
-export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height = 280, locale = 'en-US', formatValue, labels, missingLabel, emptyLabel, hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ...props }, ref) {
+export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, description, data, series, unit, xLabel, yLabel, type = 'line', height = 280, includeZero = true, palette = 'neutral', locale = 'en-US', formatValue, labels, missingLabel, emptyLabel, hiddenSeries, defaultHiddenSeries = [], onHiddenSeriesChange, className, ...props }, ref) {
     const text = {
         ...chartLabels,
         ...(missingLabel === undefined ? {} : { missing: missingLabel }),
@@ -40,10 +77,14 @@ export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, de
         ...labels,
     };
     const id = React.useId().replace(/[^a-zA-Z0-9_-]/g, '_');
+    const colorFor = (index) => palette === 'categorical'
+        ? `var(--chart-category-${(index % 6) + 1})`
+        : `var(--chart-series-${(index % 3) + 1})`;
     const [internalHidden, setInternalHidden] = React.useState(defaultHiddenSeries);
     const hidden = new Set(hiddenSeries ?? internalHidden);
     const visible = series.filter((s) => !hidden.has(s.key));
     const [host, setHost] = React.useState(null);
+    const [floatHost, setFloatHost] = React.useState(null);
     const [dismissed, setDismissed] = React.useState(false);
     const firstLegend = React.useRef(null);
     const [restoreRequested, setRestoreRequested] = React.useState(false);
@@ -89,7 +130,16 @@ export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, de
     const values = rows
         .flatMap((row) => visible.map((s) => row.values[s.key]))
         .filter((value) => typeof value === 'number');
-    const min = values.reduce((a, b) => Math.min(a, b), 0), max = values.reduce((a, b) => Math.max(a, b), 0);
+    // Bars grow from zero, so they always keep it on the axis. Without zero, the axis
+    // spans the values, widened to round steps so its ticks read cleanly.
+    const keepZero = includeZero || type === 'bar';
+    const start = keepZero ? 0 : (values[0] ?? 0);
+    const low = values.reduce((a, b) => Math.min(a, b), start), high = values.reduce((a, b) => Math.max(a, b), start);
+    const step = keepZero ? 0 : roundStep((high - low) / 4);
+    const min = step ? Math.floor(low / step) * step : low, max = step ? Math.ceil(high / step) * step : high;
+    const ticks = step
+        ? Array.from({ length: Math.round((max - min) / step) + 1 }, (_, index) => min + index * step)
+        : undefined;
     const hasValues = values.length > 0;
     const changeHidden = (next) => {
         if (hiddenSeries === undefined)
@@ -100,48 +150,53 @@ export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, de
         .filter((s) => (s.key === key ? !hidden.has(key) : hidden.has(s.key)))
         .map((s) => s.key));
     const chartHeight = Number.isFinite(height) ? Math.max(200, height) : 280;
-    return (_jsxs("figure", { ...props, ref: ref, className: cx('pui-chart', className), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: 'pui-chart-caption', children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsx("ul", { className: 'pui-chart-legend', "aria-label": `${title} series`, children: series.map((s, index) => (_jsx("li", { children: _jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: 'button', className: 'pui-chart-legend-button', "aria-label": `${s.label} series`, "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx("svg", { width: '32', height: '20', viewBox: '0 0 32 20', "aria-hidden": 'true', children: type === 'bar' ? (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx(Pattern, { id: `${id}-legend-${index}`, color: colorFor(index), index: index }) }), _jsx("rect", { x: '4', y: '3', width: '24', height: '14', rx: '2', fill: `url(#${id}-legend-${index})` })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: 'M1 10h30', stroke: colorFor(index), strokeWidth: '2', strokeDasharray: dashes[index % dashes.length] }), _jsx(Marker, { cx: 16, cy: 10, index: index, color: colorFor(index) })] })) }), _jsx("span", { children: s.label })] }) }, s.key))) }), _jsxs("p", { className: 'pui-chart-axis-label', children: [yLabel, " (", unit, ")"] }), hasValues ? (_jsxs(_Fragment, { children: [_jsx("p", { className: 'pui-chart-help', id: `${id}-keys`, children: text.keyboardHelp }), _jsx("div", { className: 'pui-chart-plot', onKeyDownCapture: (event) => {
-                            if (event.key === 'Escape')
-                                setDismissed(true);
-                            else if (event.key === 'ArrowLeft' ||
-                                event.key === 'ArrowRight')
-                                setDismissed(false);
-                        }, onMouseMoveCapture: () => setDismissed(false), onTouchStartCapture: () => setDismissed(false), onFocusCapture: () => setDismissed(false), children: _jsx(ResponsiveContainer, { width: '100%', height: chartHeight, minWidth: 0, initialDimension: { width: 320, height: chartHeight }, children: _jsxs(ComposedChart, { data: rows, accessibilityLayer: true, role: 'application', "aria-label": title, "aria-describedby": `${id}-summary ${id}-keys`, margin: { top: 16, right: 20, bottom: 8, left: 0 }, children: [_jsx("defs", { children: series.map((s, index) => (_jsx(Pattern, { id: `${id}-pattern-${index}`, index: index, color: colorFor(index) }, s.key))) }), _jsx(CartesianGrid, { vertical: false, stroke: 'var(--line)' }), _jsx(XAxis, { dataKey: 'id', tickFormatter: (value) => {
-                                            const label = byId.get(String(value))?.label ?? String(value);
-                                            // minTickGap already drops ticks that would overlap; the cap
-                                            // only keeps one very long label from crowding the axis.
-                                            return label.length > 24
-                                                ? label.slice(0, 23) + '…'
-                                                : label;
-                                        }, tick: { fill: 'var(--ink-muted)', fontSize: 12 }, tickLine: false, axisLine: { stroke: 'var(--line)' }, minTickGap: 24, interval: 'preserveStartEnd' }), _jsx(YAxis, { width: 56, tickFormatter: (value) => compact.format(Number(value)), tick: { fill: 'var(--ink-muted)', fontSize: 12 }, tickLine: false, axisLine: false, domain: [min, max === min ? max + 1 : max] }), _jsx(ReferenceLine, { y: 0, stroke: 'var(--ink-muted)' }), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
-                                            ? false
-                                            : {
-                                                stroke: 'var(--control-border)',
-                                                fill: 'transparent',
-                                            }, wrapperStyle: {
-                                            position: 'static',
-                                            visibility: 'visible',
-                                            pointerEvents: 'auto',
-                                        }, content: (tooltip) => {
-                                            const row = tooltip.active && !dismissed
-                                                ? byId.get(String(tooltip.label))
-                                                : undefined;
-                                            return (_jsx("div", { className: 'pui-chart-readout', "data-chart-readout": row?.id, children: row ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: visible.map((s) => (_jsxs("li", { children: [s.label, ": ", format(row.values[s.key])] }, s.key))) })] })) : (_jsx("span", { children: "Hover, touch or use chart arrow keys to inspect a measurement." })) }));
-                                        } })), series.map((s, index) => {
-                                        const common = {
-                                            name: s.label,
-                                            dataKey: (row) => row.values[s.key] ?? null,
-                                            hide: hidden.has(s.key),
-                                            isAnimationActive: false,
-                                            stroke: colorFor(index),
-                                        };
-                                        return type === 'bar' ? (_jsx(Bar, { ...common, fill: `url(#${id}-pattern-${index})`, maxBarSize: 48 }, s.key)) : type === 'area' ? (_jsx(Area, { ...common, type: 'linear', strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], fill: `url(#${id}-pattern-${index})`, fillOpacity: 0.12, connectNulls: false, dot: rows.length > 40
-                                                ? false
-                                                : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key)) : (_jsx(Line, { ...common, type: 'linear', strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], connectNulls: false, dot: rows.length > 40
-                                                ? false
-                                                : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key));
-                                    })] }) }) }), _jsx("p", { className: 'pui-chart-axis-label pui-chart-x-label', children: xLabel })] })) : (_jsx("div", { className: 'pui-chart-empty', role: 'status', children: visible.length === 0 && series.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { children: text.noSeries }), _jsx(Button, { variant: 'outline', onClick: () => {
-                                setRestoreRequested(true);
-                                changeHidden([]);
-                            }, children: text.showAll })] })) : (_jsx("p", { children: text.empty })) })), _jsx("div", { className: 'pui-chart-inspector', ref: setHost, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', "aria-label": text.values(title), hidden: !hasValues }), _jsxs("details", { className: 'pui-chart-table', children: [_jsx("summary", { children: text.viewTable }), _jsx(Table.Container, { label: text.table(title), orientation: 'both', scrollChain: 'contain', children: _jsxs(Table.Root, { children: [_jsx(Table.Caption, { children: text.tableCaption(unit) }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'col', children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: 'col', children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'row', children: row.label }), series.map((s) => (_jsx(Table.Cell, { children: format(row.values[s.key]) }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: "No rows." }) })) })] }) })] })] }));
+    return (_jsxs("figure", { ...props, ref: ref, className: cx('pui-chart', className), "aria-labelledby": `${id}-title`, children: [_jsxs("figcaption", { className: 'pui-chart-caption', children: [_jsx("strong", { id: `${id}-title`, children: title }), _jsx("p", { id: `${id}-summary`, children: description })] }), _jsxs("div", { className: 'pui-chart-frame', children: [_jsxs("div", { className: 'pui-chart-key', children: [_jsxs("p", { className: 'pui-chart-axis-label', children: [yLabel, " (", unit, ")"] }), _jsx("ul", { className: 'pui-chart-legend', "aria-label": `${title} series`, children: series.map((s, index) => (_jsx("li", { children: _jsxs("button", { ref: index === 0 ? firstLegend : undefined, type: 'button', className: 'pui-chart-legend-button', "aria-label": `${s.label} series`, "aria-pressed": !hidden.has(s.key), onClick: () => toggle(s.key), children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-legend-${index}` }), _jsx("span", { children: s.label })] }) }, s.key))) })] }), hasValues ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'pui-chart-plot', onKeyDownCapture: (event) => {
+                                    if (event.key === 'Escape')
+                                        setDismissed(true);
+                                    else if (event.key === 'ArrowLeft' ||
+                                        event.key === 'ArrowRight')
+                                        setDismissed(false);
+                                }, onMouseMoveCapture: () => setDismissed(false), onTouchStartCapture: () => setDismissed(false), onFocusCapture: () => setDismissed(false), children: [_jsx(ResponsiveContainer, { width: '100%', height: chartHeight, minWidth: 0, initialDimension: { width: 320, height: chartHeight }, children: _jsxs(ComposedChart, { data: rows, accessibilityLayer: true, role: 'application', "aria-label": title, "aria-describedby": `${id}-summary ${id}-keys`, margin: { top: 16, right: 20, bottom: 8, left: 0 }, children: [_jsx("defs", { children: series.map((s, index) => (_jsx(Pattern, { id: `${id}-pattern-${index}`, index: index, color: colorFor(index) }, s.key))) }), _jsx(CartesianGrid, { vertical: false, stroke: 'var(--line)' }), _jsx(XAxis, { dataKey: 'id', tickFormatter: (value) => {
+                                                        const label = byId.get(String(value))?.label ?? String(value);
+                                                        // minTickGap already drops ticks that would overlap; the cap
+                                                        // only keeps one very long label from crowding the axis.
+                                                        return label.length > 24
+                                                            ? label.slice(0, 23) + '…'
+                                                            : label;
+                                                    }, tick: { fill: 'var(--ink-muted)', fontSize: 12 }, tickLine: false, axisLine: { stroke: 'var(--line)' }, minTickGap: 24, interval: 'preserveStartEnd' }), _jsx(YAxis, { width: 56, tickFormatter: (value) => compact.format(Number(value)), tick: { fill: 'var(--ink-muted)', fontSize: 12 }, tickLine: false, axisLine: false, domain: [min, max === min ? max + 1 : max], ticks: ticks }), _jsx(ReferenceLine, { y: 0, stroke: 'var(--ink-muted)' }), host && (_jsx(Tooltip, { portal: host, isAnimationActive: false, active: dismissed ? false : undefined, filterNull: false, cursor: dismissed
+                                                        ? false
+                                                        : {
+                                                            stroke: 'var(--control-border)',
+                                                            fill: 'transparent',
+                                                        }, wrapperStyle: {
+                                                        position: 'static',
+                                                        visibility: 'visible',
+                                                        pointerEvents: 'auto',
+                                                    }, content: (tooltip) => {
+                                                        const row = tooltip.active && !dismissed
+                                                            ? byId.get(String(tooltip.label))
+                                                            : undefined;
+                                                        return (_jsx("div", { className: 'pui-chart-readout', "data-chart-readout": row?.id, children: row ? (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: visible.map((s) => (_jsxs("li", { children: [s.label, ": ", format(row.values[s.key])] }, s.key))) })] })) : (_jsx("span", { children: text.inspectHint })) }));
+                                                    } })), series.map((s, index) => {
+                                                    const common = {
+                                                        name: s.label,
+                                                        dataKey: (row) => row.values[s.key] ?? null,
+                                                        hide: hidden.has(s.key),
+                                                        isAnimationActive: false,
+                                                        stroke: colorFor(index),
+                                                    };
+                                                    return type === 'bar' ? (_jsx(Bar, { ...common, fill: `url(#${id}-pattern-${index})`, maxBarSize: 48 }, s.key)) : type === 'area' ? (_jsx(Area, { ...common, type: 'linear', strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], fill: `url(#${id}-pattern-${index})`, fillOpacity: 0.12, connectNulls: false, dot: rows.length > 40
+                                                            ? false
+                                                            : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key)) : (_jsx(Line, { ...common, type: 'linear', strokeWidth: 2, strokeDasharray: dashes[index % dashes.length], connectNulls: false, dot: rows.length > 40
+                                                            ? false
+                                                            : (dot) => (_jsx(Marker, { ...dot, color: colorFor(index), index: index })), activeDot: false }, s.key));
+                                                }), _jsx(FloatingValues, { host: floatHost, hidden: dismissed, render: (label) => {
+                                                        const row = byId.get(label);
+                                                        if (!row)
+                                                            return null;
+                                                        return (_jsxs(_Fragment, { children: [_jsx("strong", { children: row.label }), _jsx("ul", { children: series.map((s, index) => hidden.has(s.key) ? null : (_jsxs("li", { children: [_jsx(SeriesMark, { type: type, index: index, color: colorFor(index), pattern: `${id}-float-${index}` }), _jsx("span", { children: s.label }), _jsx("span", { className: 'pui-chart-tooltip-value', children: format(row.values[s.key]) })] }, s.key))) })] }));
+                                                    } })] }) }), _jsx("div", { className: 'pui-chart-float', ref: setFloatHost })] }), _jsx("p", { className: 'pui-chart-axis-label pui-chart-x-label', children: xLabel })] })) : (_jsx("div", { className: 'pui-chart-empty', role: 'status', children: visible.length === 0 && series.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { children: text.noSeries }), _jsx(Button, { variant: 'outline', onClick: () => {
+                                        setRestoreRequested(true);
+                                        changeHidden([]);
+                                    }, children: text.showAll })] })) : (_jsx("p", { children: text.empty })) }))] }), hasValues && (_jsx("p", { className: 'pui-chart-help', id: `${id}-keys`, children: text.keyboardHelp })), _jsx("div", { className: 'pui-chart-inspector', ref: setHost, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', "aria-label": text.values(title), hidden: !hasValues }), _jsxs("details", { className: 'pui-chart-table', children: [_jsx("summary", { children: text.viewTable }), _jsx(Table.Container, { label: text.table(title), orientation: 'both', scrollChain: 'contain', children: _jsxs(Table.Root, { children: [_jsx(Table.Caption, { children: text.tableCaption(unit) }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'col', children: xLabel }), series.map((s) => (_jsxs(Table.HeaderCell, { scope: 'col', children: [s.label, " (", unit, ")"] }, s.key)))] }) }), _jsx(Table.Body, { children: rows.length ? (rows.map((row) => (_jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { scope: 'row', children: row.label }), series.map((s) => (_jsx(Table.Cell, { children: format(row.values[s.key]) }, s.key)))] }, row.id)))) : (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: series.length + 1, children: text.noRows }) })) })] }) })] })] }));
 });

package/dist/css/accordion.css

@@ -0,0 +1,11 @@
+/* Accordion, 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/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/icon.css';
+@import './rules/button.css';
+@import './rules/disclosure.css';
+@import './rules/accordion.css';

package/dist/css/alert-dialog.css

@@ -0,0 +1,11 @@
+/* Alert Dialog, 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/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/icon.css';
+@import '@surflane/design-tokens/controls.css';
+@import './rules/dialog.css';
+@import './rules/alert-dialog.css';

package/{src → dist/css}/all.css

@@ -1,6 +1,6 @@
 /* Every Surflane stylesheet in one import, in the recommended order: tokens, controls,
  * composition, document typography and components. Each file keeps its cascade layer. */
-@layer surflane.tokens, surflane.themes, surflane.base, surflane.components;
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components, surflane.sizes;
 @import '@surflane/design-tokens/tokens.css';
 @import '@surflane/design-tokens/controls.css';
 @import '@surflane/design-tokens/foundations.css';

package/dist/css/app-shell.css

@@ -0,0 +1,12 @@
+/* App shell / Sidebar, 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/design-tokens/presentation/base.css';
+@import './rules/base.css';
+@import './rules/sizing.css';
+@import './rules/popup.css';
+@import './rules/icon.css';
+@import './rules/tooltip.css';
+@import './rules/button.css';
+@import './rules/app-shell.css';