@surflane/ui 0.4.0 → 0.6.0

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/{navigation.d.ts → breadcrumbs.d.ts}

@@ -1,17 +1,13 @@
 import * as React from 'react';
-export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/separator").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 declare function BreadcrumbSeparator({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 declare function BreadcrumbCurrent({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 export declare const Breadcrumbs: {
     Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
     List: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
     Item: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
-    Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    Link: React.ForwardRefExoticComponent<import("./link.js").LinkProps & React.RefAttributes<HTMLAnchorElement>>;
     Separator: typeof BreadcrumbSeparator;
     Current: typeof BreadcrumbCurrent;
 };
-export declare const BreadcrumbsRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, BreadcrumbsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>, BreadcrumbsItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>, BreadcrumbsLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>, BreadcrumbsSeparator: typeof BreadcrumbSeparator, BreadcrumbsCurrent: typeof BreadcrumbCurrent;
+export declare const BreadcrumbsRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>, BreadcrumbsList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>, BreadcrumbsItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>, BreadcrumbsLink: React.ForwardRefExoticComponent<import("./link.js").LinkProps & React.RefAttributes<HTMLAnchorElement>>, BreadcrumbsSeparator: typeof BreadcrumbSeparator, BreadcrumbsCurrent: typeof BreadcrumbCurrent;
 export {};

package/dist/breadcrumbs.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Icon } from './icon.js';
+import { cx } from './parts.js';
+import { Link } from './link.js';
+const BreadcrumbRoot = /* @__PURE__ */ React.forwardRef(function BreadcrumbRoot({ className, 'aria-label': label = 'Breadcrumb', ...props }, ref) {
+    return (_jsx("nav", { ...props, ref: ref, "aria-label": label, className: cx('pui-breadcrumbs', className) }));
+});
+const BreadcrumbList = /* @__PURE__ */ React.forwardRef(function BreadcrumbList({ className, role = 'list', ...props }, ref) {
+    return (_jsx("ol", { ...props, role: role, ref: ref, className: cx('pui-breadcrumb-list', className) }));
+});
+const BreadcrumbItem = /* @__PURE__ */ React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
+    return (_jsx("li", { ...props, ref: ref, className: cx('pui-breadcrumb-item', className) }));
+});
+function BreadcrumbSeparator({ className, ...props }) {
+    return (_jsx("span", { ...props, className: cx('pui-breadcrumb-separator', className), "aria-hidden": 'true', children: _jsx(Icon, { name: 'chevron-forward' }) }));
+}
+function BreadcrumbCurrent({ className, ...props }) {
+    return (_jsx("span", { ...props, className: cx('pui-breadcrumb-current', className), "aria-current": 'page' }));
+}
+export const Breadcrumbs = {
+    Root: BreadcrumbRoot,
+    List: BreadcrumbList,
+    Item: BreadcrumbItem,
+    Link,
+    Separator: BreadcrumbSeparator,
+    Current: BreadcrumbCurrent,
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Root: BreadcrumbsRoot, List: BreadcrumbsList, Item: BreadcrumbsItem, Link: BreadcrumbsLink, Separator: BreadcrumbsSeparator, Current: BreadcrumbsCurrent, } = Breadcrumbs;

package/dist/button.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
 import { type ComponentSizeAlias } from './sizing.js';
 /** Visual priority. `default` remains a compatibility alias of `primary`. */
 export type ButtonVariant = 'primary' | 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
@@ -9,3 +10,13 @@ export type ButtonProps = React.ComponentProps<typeof BaseButton> & {
     size?: ButtonSize;
 };
 export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type LinkButtonProps = Omit<useRender.ComponentProps<'a'>, 'ref'> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+/** A link that looks like a Button. It navigates, so it stays a link for assistive
+ * technology; pass a router's link element as `render` to keep client navigation. */
+export declare const LinkButton: React.ForwardRefExoticComponent<Omit<useRender.ComponentProps<"a", {}, import("@base-ui/react/types").HTMLProps>, "ref"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+} & React.RefAttributes<HTMLAnchorElement>>;

package/dist/button.js

@@ -2,15 +2,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
 import { useComponentSize } from './sizing.js';
-import { sizeName, skin } from './parts.js';
-export const Button = /* @__PURE__ */ React.forwardRef(function Button({ className, variant = 'default', size, ...props }, ref) {
-    const scheme = useComponentSize(size === 'icon-sm' || size === 'icon-xs'
+import { sizeName, skin, cx } from './parts.js';
+/** The size scheme a button size implies: icon sizes follow the scale, xs and icon
+ * keep the surrounding scheme. */
+function schemeOf(size) {
+    return size === 'icon-sm' || size === 'icon-xs'
         ? 'small'
         : size === 'icon-lg'
             ? 'large'
             : size === 'xs' || size === 'icon'
                 ? undefined
-                : size);
+                : size;
+}
+export const Button = /* @__PURE__ */ React.forwardRef(function Button({ className, variant = 'default', size, ...props }, ref) {
+    const scheme = useComponentSize(schemeOf(size));
     return (_jsx(BaseButton, { ref: ref, ...props, className: skin('pui-button', className), "data-variant": variant, "data-size": sizeName(size), "data-ui-size": scheme }));
 });
+/** A link that looks like a Button. It navigates, so it stays a link for assistive
+ * technology; pass a router's link element as `render` to keep client navigation. */
+export const LinkButton = /* @__PURE__ */ React.forwardRef(function LinkButton({ render, className, variant = 'default', size, ...props }, ref) {
+    const scheme = useComponentSize(schemeOf(size));
+    return useRender({
+        defaultTagName: 'a',
+        render,
+        ref,
+        props: {
+            ...props,
+            className: cx('pui-button', className),
+            'data-variant': variant,
+            'data-size': sizeName(size),
+            'data-ui-size': scheme,
+        },
+    });
+});

package/dist/{content.d.ts → card.d.ts}

@@ -1,15 +1,17 @@
 import * as React from 'react';
 declare const CardRoot: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    tone?: "canvas" | "subtle";
-    padding?: import("./foundations.js").Space;
+    surface?: import("./layout.js").SurfaceKind;
+    tone?: import("./layout.js").SurfaceKind;
+    padding?: import("./layout.js").Space;
 }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     level?: 2 | 3 | 4 | 5 | 6;
 } & React.RefAttributes<HTMLHeadingElement>>;
 export declare const Card: {
     Root: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-        tone?: "canvas" | "subtle";
-        padding?: import("./foundations.js").Space;
+        surface?: import("./layout.js").SurfaceKind;
+        tone?: import("./layout.js").SurfaceKind;
+        padding?: import("./layout.js").Space;
     }, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Header: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
         size?: import("./sizing.js").ComponentSize;
@@ -27,26 +29,6 @@ export declare const Card: {
         size?: import("./sizing.js").ComponentSize;
     } & React.RefAttributes<HTMLDivElement>>;
 };
-export type CodeBlockProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onCopy'> & {
-    code: string;
-    label?: string;
-    language?: string;
-    wrap?: boolean;
-    copyLabel?: string;
-    copiedLabel?: string;
-    copyErrorLabel?: string;
-    onCopy?: (code: string) => void | Promise<void>;
-};
-export declare const CodeBlock: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onCopy"> & {
-    code: string;
-    label?: string;
-    language?: string;
-    wrap?: boolean;
-    copyLabel?: string;
-    copiedLabel?: string;
-    copyErrorLabel?: string;
-    onCopy?: (code: string) => void | Promise<void>;
-} & React.RefAttributes<HTMLDivElement>>;
 export { CardRoot, CardTitle };
 export declare const CardHeader: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "size"> & {
     size?: import("./sizing.js").ComponentSize;

package/dist/card.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Surface } from './layout.js';
+import { part, cx } from './parts.js';
+const CardRoot = /* @__PURE__ */ React.forwardRef(function CardRoot({ className, padding, ...props }, ref) {
+    return (_jsx(Surface, { ...props, padding: padding, ref: ref, className: cx('pui-card', className) }));
+});
+const CardTitle = /* @__PURE__ */ React.forwardRef(function CardTitle({ level = 3, className, ...props }, ref) {
+    return React.createElement(`h${level}`, {
+        ...props,
+        ref,
+        className: cx('pui-card-title', className),
+    });
+});
+export const Card = {
+    Root: CardRoot,
+    Header: /* @__PURE__ */ part('div', 'pui-card-header'),
+    Title: CardTitle,
+    Description: /* @__PURE__ */ part('p', 'pui-card-description'),
+    Body: /* @__PURE__ */ part('div', 'pui-card-body'),
+    Footer: /* @__PURE__ */ part('div', 'pui-card-footer'),
+};
+// Flat names for React Server Components, which cannot dot into client exports.
+export { CardRoot, CardTitle };
+export const { Header: CardHeader, Description: CardDescription, Body: CardBody, Footer: CardFooter, } = Card;

package/dist/chart.d.ts

@@ -18,14 +18,39 @@ 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. */
+    labels?: Partial<ChartLabels>;
+    /** @deprecated Use labels.missing. */
     missingLabel?: string;
+    /** @deprecated Use labels.empty. */
     emptyLabel?: string;
     hiddenSeries?: readonly string[];
     defaultHiddenSeries?: readonly string[];
     onHiddenSeriesChange?: (keys: string[]) => void;
 };
+export type ChartLabels = {
+    missing: string;
+    empty: string;
+    noSeries: string;
+    showAll: string;
+    keyboardHelp: string;
+    values: (title: string) => string;
+    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. */
 export declare const Chart: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children" | "title"> & {
@@ -38,9 +63,19 @@ 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. */
+    labels?: Partial<ChartLabels>;
+    /** @deprecated Use labels.missing. */
     missingLabel?: string;
+    /** @deprecated Use labels.empty. */
     emptyLabel?: string;
     hiddenSeries?: readonly string[];
     defaultHiddenSeries?: readonly string[];

package/dist/chart.js

@@ -1,11 +1,32 @@
 '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 { Table } from './data.js';
+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';
+const chartLabels = {
+    missing: 'Not available',
+    empty: 'No numeric measurements to display.',
+    noSeries: 'No series selected.',
+    showAll: 'Show all series',
+    keyboardHelp: 'Focus the chart and use Left/Right to inspect points. Escape clears details. The data table includes every series.',
+    values: (title) => `${title} values`,
+    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' ||
@@ -18,14 +39,52 @@ 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, missingLabel = 'Not available', emptyLabel = 'No numeric measurements to display.', 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 }),
+        ...(emptyLabel === undefined ? {} : { empty: emptyLabel }),
+        ...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);
@@ -43,7 +102,7 @@ export const Chart = /* @__PURE__ */ React.forwardRef(function Chart({ title, de
     }), [locale]);
     const format = (value) => typeof value === 'number' && Number.isFinite(value)
         ? `${formatValue ? formatValue(value) : number.format(value)} ${unit}`
-        : missingLabel;
+        : text.missing;
     const rows = React.useMemo(() => {
         const ids = new Set(), keys = new Set();
         for (const s of series) {
@@ -71,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)
@@ -82,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: ['pui-chart', className].filter(Boolean).join(' '), "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: "Focus the chart and use Left/Right to inspect points. Escape clears details. The data table includes every series." }), _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: "No series selected." }), _jsx(Button, { variant: 'outline', onClick: () => {
-                                setRestoreRequested(true);
-                                changeHidden([]);
-                            }, children: "Show all series" })] })) : (_jsx("p", { children: emptyLabel })) })), _jsx("div", { className: 'pui-chart-inspector', ref: setHost, role: 'status', "aria-live": 'polite', "aria-atomic": 'true', "aria-label": `${title} values`, hidden: !hasValues }), _jsxs("details", { className: 'pui-chart-table', children: [_jsx("summary", { children: "View data table" }), _jsx(Table.Container, { label: `${title} data table`, orientation: 'both', scrollChain: 'contain', style: { maxHeight: 320 }, children: _jsxs(Table.Root, { children: [_jsxs(Table.Caption, { children: ["All input measurements, including hidden series. Unit: ", 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/checkbox-group.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox-group").CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;