@hanzo/ui 8.27.91 → 8.29.0

package/dist/backends/gui/breadcrumb.cjs

@@ -3,13 +3,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BreadcrumbEllipsis = exports.BreadcrumbSeparator = exports.BreadcrumbPage = exports.BreadcrumbLink = exports.BreadcrumbItem = exports.BreadcrumbList = exports.Breadcrumb = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const box_1 = require("../../box.cjs");
-const cn_1 = require("../../core/cn.cjs");
-const Breadcrumb = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "nav", "aria-label": "Breadcrumb", className: className, ...props }));
+/**
+ * Breadcrumb — where you are, in a trail.
+ *
+ * A real `<nav>` around a real `<ol>`: the trail is ORDERED, and a screen
+ * reader announces "list, 4 items" and reads the position. Built out of divs it
+ * announces nothing, which is most of the point of a breadcrumb gone.
+ *
+ * The separators are `aria-hidden` and outside the items, because a slash is
+ * punctuation, not a step — a reader that voices them says "home slash shop
+ * slash bag" instead of counting.
+ *
+ * Drawn on gui props, after twenty-ui's Breadcrumb (MIT, NOTICE): a 32px trail
+ * in 13px quiet ink, steps 4px apart around a "/" held in an 8px slot, the page
+ * you are on in full ink and the one step that may shrink, with an ellipsis.
+ * It used to compose utility class strings (`gap-1.5 text-sm text-muted-foreground`),
+ * which this package's own house rule forbids.
+ */
+const gui_1 = require("@hanzo/gui");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const Breadcrumb = (props) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('breadcrumb'), render: "nav", "aria-label": "Breadcrumb", minH: 32, items: "center", overflow: "hidden", minW: 0, ...props }));
 exports.Breadcrumb = Breadcrumb;
-const BreadcrumbList = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "ol", className: (0, cn_1.cn)('grid grid-flow-col auto-cols-max items-center gap-1.5 text-sm text-muted-foreground', className), ...props }));
+const BreadcrumbList = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('breadcrumb-list'), render: "ol", items: "center", gap: "$1", m: 0, p: 0, minW: 0, style: { listStyle: 'none' }, ...props, children: children }));
 exports.BreadcrumbList = BreadcrumbList;
-const BreadcrumbItem = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "li", className: (0, cn_1.cn)('grid grid-flow-col auto-cols-max items-center gap-1.5', className), ...props }));
+const BreadcrumbItem = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('breadcrumb-item'), render: "li", items: "center", gap: "$1", shrink: 0, minW: 0, ...props, children: (0, ink_1.ink)(children, gui_1.Text, { fontSize: '$2', color: '$hint' }) }));
 exports.BreadcrumbItem = BreadcrumbItem;
 /**
  * A step in the trail.
@@ -18,13 +36,13 @@ exports.BreadcrumbItem = BreadcrumbItem;
  * to is not a link, and an anchor without a target is one a keyboard stops on
  * for nothing.
  */
-const BreadcrumbLink = ({ className, href, ...props }) => href ? ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "a", href: href, className: (0, cn_1.cn)('hover:text-foreground', className), ...props })) : ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "span", className: className, ...props }));
+const BreadcrumbLink = ({ href, children, ...props }) => href ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('breadcrumb-link'), render: "a", ...{ href }, fontSize: "$2", color: "$hint", textDecorationLine: "none", hoverStyle: { color: '$ink' }, ...props, children: children })) : ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('breadcrumb-link'), fontSize: "$2", color: "$hint", ...props, children: children }));
 exports.BreadcrumbLink = BreadcrumbLink;
-/** The step you are ON — not a link, and it says so. */
-const BreadcrumbPage = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "span", role: "link", "aria-disabled": true, "aria-current": "page", className: (0, cn_1.cn)('text-foreground', className), ...props }));
+/** The step you are ON — not a link, and it says so. The one step that shrinks. */
+const BreadcrumbPage = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('breadcrumb-page'), role: "link", "aria-disabled": true, "aria-current": "page", fontSize: "$2", color: "$ink", numberOfLines: 1, shrink: 1, minW: 0, ...props, children: children }));
 exports.BreadcrumbPage = BreadcrumbPage;
-const BreadcrumbSeparator = ({ children, className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "li", role: "presentation", "aria-hidden": "true", className: (0, cn_1.cn)('text-muted-foreground', className), ...props, children: children ?? '/' }));
+const BreadcrumbSeparator = ({ children, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('breadcrumb-separator'), render: "li", role: "presentation", "aria-hidden": true, width: 8, justify: "center", shrink: 0, ...props, children: (0, ink_1.ink)(children ?? '/', gui_1.Text, { fontSize: '$2', color: '$hint' }) }));
 exports.BreadcrumbSeparator = BreadcrumbSeparator;
 /** A trail too long to show whole. `…` is one character and reads as "more". */
-const BreadcrumbEllipsis = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box, { tag: "span", role: "presentation", "aria-hidden": "true", className: (0, cn_1.cn)('grid place-items-center', className), ...props, children: "\u2026" }));
+const BreadcrumbEllipsis = (props) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('breadcrumb-ellipsis'), role: "presentation", "aria-hidden": true, items: "center", justify: "center", ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$hint", children: "\u2026" }) }));
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;

package/dist/backends/gui/breadcrumb.d.ts

@@ -8,12 +8,20 @@
  * The separators are `aria-hidden` and outside the items, because a slash is
  * punctuation, not a step — a reader that voices them says "home slash shop
  * slash bag" instead of counting.
+ *
+ * Drawn on gui props, after twenty-ui's Breadcrumb (MIT, NOTICE): a 32px trail
+ * in 13px quiet ink, steps 4px apart around a "/" held in an 8px slot, the page
+ * you are on in full ink and the one step that may shrink, with an ellipsis.
+ * It used to compose utility class strings (`gap-1.5 text-sm text-muted-foreground`),
+ * which this package's own house rule forbids.
  */
-import * as React from 'react';
-import { Box, type BoxProps } from '../../box.js';
-export declare const Breadcrumb: ({ className, ...props }: React.ComponentProps<typeof Box>) => React.JSX.Element;
-export declare const BreadcrumbList: ({ className, ...props }: React.ComponentProps<typeof Box>) => React.JSX.Element;
-export declare const BreadcrumbItem: ({ className, ...props }: React.ComponentProps<typeof Box>) => React.JSX.Element;
+import { Text, XStack } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+type Row = ComponentProps<typeof XStack>;
+type Words = ComponentProps<typeof Text>;
+export declare const Breadcrumb: (props: Row) => import("react").JSX.Element;
+export declare const BreadcrumbList: ({ children, ...props }: Row) => import("react").JSX.Element;
+export declare const BreadcrumbItem: ({ children, ...props }: Row) => import("react").JSX.Element;
 /**
  * A step in the trail.
  *
@@ -21,12 +29,13 @@ export declare const BreadcrumbItem: ({ className, ...props }: React.ComponentPr
  * to is not a link, and an anchor without a target is one a keyboard stops on
  * for nothing.
  */
-export declare const BreadcrumbLink: ({ className, href, ...props }: BoxProps<'a'> & {
+export declare const BreadcrumbLink: ({ href, children, ...props }: Words & {
     href?: string;
-}) => React.JSX.Element;
-/** The step you are ON — not a link, and it says so. */
-export declare const BreadcrumbPage: ({ className, ...props }: BoxProps<'span'>) => React.JSX.Element;
-export declare const BreadcrumbSeparator: ({ children, className, ...props }: React.ComponentProps<typeof Box>) => React.JSX.Element;
+}) => import("react").JSX.Element;
+/** The step you are ON — not a link, and it says so. The one step that shrinks. */
+export declare const BreadcrumbPage: ({ children, ...props }: Words) => import("react").JSX.Element;
+export declare const BreadcrumbSeparator: ({ children, ...props }: Row) => import("react").JSX.Element;
 /** A trail too long to show whole. `…` is one character and reads as "more". */
-export declare const BreadcrumbEllipsis: ({ className, ...props }: React.ComponentProps<typeof Box>) => React.JSX.Element;
+export declare const BreadcrumbEllipsis: (props: Row) => import("react").JSX.Element;
+export {};
 //# sourceMappingURL=breadcrumb.d.ts.map

package/dist/backends/gui/breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/breadcrumb.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAA;AAG9C,eAAO,MAAM,UAAU,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,sBAEnF,CAAA;AAED,eAAO,MAAM,cAAc,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,sBASvF,CAAA;AAED,eAAO,MAAM,cAAc,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,sBAMvF,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,kCAIxB,QAAQ,CAAC,GAAG,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,sBAKjC,CAAA;AAEH,wDAAwD;AACxD,eAAO,MAAM,cAAc,4BAA6B,QAAQ,CAAC,MAAM,CAAC,sBASvE,CAAA;AAED,eAAO,MAAM,mBAAmB,sCAI7B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,sBAUlC,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,sBAU3F,CAAA"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/breadcrumb.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3C,KAAK,GAAG,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAA;AACxC,KAAK,KAAK,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;AAExC,eAAO,MAAM,UAAU,UAAW,GAAG,gCAEpC,CAAA;AAED,eAAO,MAAM,cAAc,2BAA4B,GAAG,gCAIzD,CAAA;AAED,eAAO,MAAM,cAAc,2BAA4B,GAAG,gCAIzD,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,iCAAkC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,gCAkBnF,CAAA;AAEH,mFAAmF;AACnF,eAAO,MAAM,cAAc,2BAA4B,KAAK,gCAe3D,CAAA;AAED,eAAO,MAAM,mBAAmB,2BAA4B,GAAG,gCAI9D,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,UAAW,GAAG,gCAM5C,CAAA"}

package/dist/backends/gui/breadcrumb.js

@@ -1,10 +1,28 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '../../box.js';
-import { cn } from '../../core/cn.js';
-export const Breadcrumb = ({ className, ...props }) => (_jsx(Box, { tag: "nav", "aria-label": "Breadcrumb", className: className, ...props }));
-export const BreadcrumbList = ({ className, ...props }) => (_jsx(Box, { tag: "ol", className: cn('grid grid-flow-col auto-cols-max items-center gap-1.5 text-sm text-muted-foreground', className), ...props }));
-export const BreadcrumbItem = ({ className, ...props }) => (_jsx(Box, { tag: "li", className: cn('grid grid-flow-col auto-cols-max items-center gap-1.5', className), ...props }));
+/**
+ * Breadcrumb — where you are, in a trail.
+ *
+ * A real `<nav>` around a real `<ol>`: the trail is ORDERED, and a screen
+ * reader announces "list, 4 items" and reads the position. Built out of divs it
+ * announces nothing, which is most of the point of a breadcrumb gone.
+ *
+ * The separators are `aria-hidden` and outside the items, because a slash is
+ * punctuation, not a step — a reader that voices them says "home slash shop
+ * slash bag" instead of counting.
+ *
+ * Drawn on gui props, after twenty-ui's Breadcrumb (MIT, NOTICE): a 32px trail
+ * in 13px quiet ink, steps 4px apart around a "/" held in an 8px slot, the page
+ * you are on in full ink and the one step that may shrink, with an ellipsis.
+ * It used to compose utility class strings (`gap-1.5 text-sm text-muted-foreground`),
+ * which this package's own house rule forbids.
+ */
+import { Text, XStack } from '@hanzo/gui';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+export const Breadcrumb = (props) => (_jsx(XStack, { ...slot('breadcrumb'), render: "nav", "aria-label": "Breadcrumb", minH: 32, items: "center", overflow: "hidden", minW: 0, ...props }));
+export const BreadcrumbList = ({ children, ...props }) => (_jsx(XStack, { ...slot('breadcrumb-list'), render: "ol", items: "center", gap: "$1", m: 0, p: 0, minW: 0, style: { listStyle: 'none' }, ...props, children: children }));
+export const BreadcrumbItem = ({ children, ...props }) => (_jsx(XStack, { ...slot('breadcrumb-item'), render: "li", items: "center", gap: "$1", shrink: 0, minW: 0, ...props, children: ink(children, Text, { fontSize: '$2', color: '$hint' }) }));
 /**
  * A step in the trail.
  *
@@ -12,10 +30,10 @@ export const BreadcrumbItem = ({ className, ...props }) => (_jsx(Box, { tag: "li
  * to is not a link, and an anchor without a target is one a keyboard stops on
  * for nothing.
  */
-export const BreadcrumbLink = ({ className, href, ...props }) => href ? (_jsx(Box, { tag: "a", href: href, className: cn('hover:text-foreground', className), ...props })) : (_jsx(Box, { tag: "span", className: className, ...props }));
-/** The step you are ON — not a link, and it says so. */
-export const BreadcrumbPage = ({ className, ...props }) => (_jsx(Box, { tag: "span", role: "link", "aria-disabled": true, "aria-current": "page", className: cn('text-foreground', className), ...props }));
-export const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx(Box, { tag: "li", role: "presentation", "aria-hidden": "true", className: cn('text-muted-foreground', className), ...props, children: children ?? '/' }));
+export const BreadcrumbLink = ({ href, children, ...props }) => href ? (_jsx(Text, { ...slot('breadcrumb-link'), render: "a", ...{ href }, fontSize: "$2", color: "$hint", textDecorationLine: "none", hoverStyle: { color: '$ink' }, ...props, children: children })) : (_jsx(Text, { ...slot('breadcrumb-link'), fontSize: "$2", color: "$hint", ...props, children: children }));
+/** The step you are ON — not a link, and it says so. The one step that shrinks. */
+export const BreadcrumbPage = ({ children, ...props }) => (_jsx(Text, { ...slot('breadcrumb-page'), role: "link", "aria-disabled": true, "aria-current": "page", fontSize: "$2", color: "$ink", numberOfLines: 1, shrink: 1, minW: 0, ...props, children: children }));
+export const BreadcrumbSeparator = ({ children, ...props }) => (_jsx(XStack, { ...slot('breadcrumb-separator'), render: "li", role: "presentation", "aria-hidden": true, width: 8, justify: "center", shrink: 0, ...props, children: ink(children ?? '/', Text, { fontSize: '$2', color: '$hint' }) }));
 /** A trail too long to show whole. `…` is one character and reads as "more". */
-export const BreadcrumbEllipsis = ({ className, ...props }) => (_jsx(Box, { tag: "span", role: "presentation", "aria-hidden": "true", className: cn('grid place-items-center', className), ...props, children: "\u2026" }));
+export const BreadcrumbEllipsis = (props) => (_jsx(XStack, { ...slot('breadcrumb-ellipsis'), role: "presentation", "aria-hidden": true, items: "center", justify: "center", ...props, children: _jsx(Text, { fontSize: "$2", color: "$hint", children: "\u2026" }) }));
 //# sourceMappingURL=breadcrumb.js.map

package/dist/backends/gui/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/backends/gui/breadcrumb.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAeZ,OAAO,EAAE,GAAG,EAAiB,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;AAElC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoC,EAAE,EAAE,CAAC,CACvF,KAAC,GAAG,IAAC,GAAG,EAAC,KAAK,gBAAY,YAAY,EAAC,SAAS,EAAE,SAAS,KAAM,KAAK,GAAI,CAC3E,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoC,EAAE,EAAE,CAAC,CAC3F,KAAC,GAAG,IACF,GAAG,EAAC,IAAI,EACR,SAAS,EAAE,EAAE,CACX,qFAAqF,EACrF,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoC,EAAE,EAAE,CAAC,CAC3F,KAAC,GAAG,IACF,GAAG,EAAC,IAAI,EACR,SAAS,EAAE,EAAE,CAAC,uDAAuD,EAAE,SAAS,CAAC,KAC7E,KAAK,GACT,CACH,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,IAAI,EACJ,GAAG,KAAK,EAC0B,EAAE,EAAE,CACtC,IAAI,CAAC,CAAC,CAAC,CACL,KAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC1F,CAAC,CAAC,CAAC,CACF,KAAC,GAAG,IAAC,GAAG,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,KAAM,KAAK,GAAI,CACpD,CAAA;AAEH,wDAAwD;AACxD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE,CAAC,CAC3E,KAAC,GAAG,IACF,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,MAAM,mBACI,IAAI,kBACN,MAAM,EACnB,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,KACvC,KAAK,GACT,CACH,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACyB,EAAE,EAAE,CAAC,CACtC,KAAC,GAAG,IACF,GAAG,EAAC,IAAI,EACR,IAAI,EAAC,cAAc,iBACP,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,YAER,QAAQ,IAAI,GAAG,GACZ,CACP,CAAA;AAED,gFAAgF;AAChF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoC,EAAE,EAAE,CAAC,CAC/F,KAAC,GAAG,IACF,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,cAAc,iBACP,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,KAC/C,KAAK,uBAGL,CACP,CAAA"}
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/backends/gui/breadcrumb.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/button-group.cjs

@@ -0,0 +1,43 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroupContext = void 0;
+exports.ButtonGroup = ButtonGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ButtonGroup — buttons joined into one control: "Update view" with its chevron
+ * menu, a cell's hover actions, a diagram's zoom pair.
+ *
+ * Two independent choices, as twenty-ui's ButtonGroup has them (MIT, NOTICE):
+ *
+ *   attached (default)  the buttons share their edges — each after the first
+ *                       steps 1px back over its neighbour's border, the inner
+ *                       corners go square, and a focused button rises above
+ *                       the neighbours so its whole ring shows.
+ *   framed              the buttons sit inside a bordered frame: a `$rim` edge,
+ *                       a 4px corner and 2px of padding on the panel ground, the
+ *                       buttons' own corners cut to 1px so the two radii stay
+ *                       concentric (4 − 2 − 1).
+ *
+ * Attached rides gui's own `XGroup`, which already squares the corners between
+ * items by placement (`XGroup.Item` zeroes the connecting radii of every child it
+ * wraps); this file adds the 1px overlap and the focus lift gui does not draw.
+ * Unattached is a plain row with a 2px gap.
+ *
+ * `size`, `variant` and `tone` set here reach every Button inside through
+ * context, and a Button that names its own keeps it.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const slot_1 = require("./slot.cjs");
+exports.ButtonGroupContext = (0, react_1.createContext)(null);
+/** The frame: a $rim edge, 4px corner, 2px padding, on the panel ground. */
+const FRAME = { borderWidth: 1, borderColor: '$rim', rounded: '$xs', p: '$0.5', bg: '$panel' };
+function ButtonGroup({ attached = true, framed = false, size, variant, tone, children, ...props }) {
+    const items = react_1.Children.toArray(children).filter(react_1.isValidElement);
+    const ctx = { size, variant, tone, framed };
+    const frame = framed ? FRAME : null;
+    if (!attached)
+        return ((0, jsx_runtime_1.jsx)(exports.ButtonGroupContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('button-group'), role: "group", display: "inline-flex", self: "flex-start", items: "center", gap: "$0.5", ...frame, ...props, children: items }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.ButtonGroupContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)(gui_1.XGroup, { ...(0, slot_1.slot)('button-group'), "data-attached": "", role: "group", unstyled: true, display: "inline-flex", self: "flex-start", items: "center", ...frame, ...props, children: items.map((child, i) => ((0, jsx_runtime_1.jsx)(gui_1.XGroup.Item, { ...(i > 0 ? { ml: -1 } : null), focusStyle: { zIndex: 1 }, children: child }, child.key ?? i))) }) }));
+}

package/dist/backends/gui/button-group.d.ts

@@ -0,0 +1,48 @@
+/**
+ * ButtonGroup — buttons joined into one control: "Update view" with its chevron
+ * menu, a cell's hover actions, a diagram's zoom pair.
+ *
+ * Two independent choices, as twenty-ui's ButtonGroup has them (MIT, NOTICE):
+ *
+ *   attached (default)  the buttons share their edges — each after the first
+ *                       steps 1px back over its neighbour's border, the inner
+ *                       corners go square, and a focused button rises above
+ *                       the neighbours so its whole ring shows.
+ *   framed              the buttons sit inside a bordered frame: a `$rim` edge,
+ *                       a 4px corner and 2px of padding on the panel ground, the
+ *                       buttons' own corners cut to 1px so the two radii stay
+ *                       concentric (4 − 2 − 1).
+ *
+ * Attached rides gui's own `XGroup`, which already squares the corners between
+ * items by placement (`XGroup.Item` zeroes the connecting radii of every child it
+ * wraps); this file adds the 1px overlap and the focus lift gui does not draw.
+ * Unattached is a plain row with a 2px gap.
+ *
+ * `size`, `variant` and `tone` set here reach every Button inside through
+ * context, and a Button that names its own keeps it.
+ */
+import { XStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+import type { ButtonSize, ButtonTone, ButtonVariant } from './button.js';
+/** What a Button inside a group takes when it names none of its own. */
+export type ButtonGroupDefaults = {
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    framed?: boolean;
+};
+export declare const ButtonGroupContext: import("react").Context<ButtonGroupDefaults | null>;
+export type ButtonGroupProps = Omit<ComponentProps<typeof XStack>, 'children'> & {
+    /** The buttons share their edges (default) or stand 2px apart. */
+    attached?: boolean;
+    /** The buttons sit inside a bordered frame. */
+    framed?: boolean;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    /** Names the group for assistive technology, which reads it as one control. */
+    'aria-label'?: string;
+    children?: ReactNode;
+};
+export declare function ButtonGroup({ attached, framed, size, variant, tone, children, ...props }: ButtonGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=button-group.d.ts.map

package/dist/backends/gui/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/button-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAU,MAAM,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAA2C,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACpG,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAGrE,wEAAwE;AACxE,MAAM,MAAM,mBAAmB,GAAG;IAAE,IAAI,CAAC,EAAE,UAAU,CAAC;IAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAErH,eAAO,MAAM,kBAAkB,qDAAkE,CAAA;AAEjG,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAKD,wBAAgB,WAAW,CAAC,EAC1B,QAAe,EACf,MAAc,EACd,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAsClB"}

package/dist/backends/gui/button-group.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ButtonGroup — buttons joined into one control: "Update view" with its chevron
+ * menu, a cell's hover actions, a diagram's zoom pair.
+ *
+ * Two independent choices, as twenty-ui's ButtonGroup has them (MIT, NOTICE):
+ *
+ *   attached (default)  the buttons share their edges — each after the first
+ *                       steps 1px back over its neighbour's border, the inner
+ *                       corners go square, and a focused button rises above
+ *                       the neighbours so its whole ring shows.
+ *   framed              the buttons sit inside a bordered frame: a `$rim` edge,
+ *                       a 4px corner and 2px of padding on the panel ground, the
+ *                       buttons' own corners cut to 1px so the two radii stay
+ *                       concentric (4 − 2 − 1).
+ *
+ * Attached rides gui's own `XGroup`, which already squares the corners between
+ * items by placement (`XGroup.Item` zeroes the connecting radii of every child it
+ * wraps); this file adds the 1px overlap and the focus lift gui does not draw.
+ * Unattached is a plain row with a 2px gap.
+ *
+ * `size`, `variant` and `tone` set here reach every Button inside through
+ * context, and a Button that names its own keeps it.
+ */
+import { XGroup, XStack } from '@hanzo/gui';
+import { Children, createContext, isValidElement } from 'react';
+import { slot } from './slot.js';
+export const ButtonGroupContext = /* @__PURE__ */ createContext(null);
+/** The frame: a $rim edge, 4px corner, 2px padding, on the panel ground. */
+const FRAME = { borderWidth: 1, borderColor: '$rim', rounded: '$xs', p: '$0.5', bg: '$panel' };
+export function ButtonGroup({ attached = true, framed = false, size, variant, tone, children, ...props }) {
+    const items = Children.toArray(children).filter(isValidElement);
+    const ctx = { size, variant, tone, framed };
+    const frame = framed ? FRAME : null;
+    if (!attached)
+        return (_jsx(ButtonGroupContext.Provider, { value: ctx, children: _jsx(XStack, { ...slot('button-group'), role: "group", display: "inline-flex", self: "flex-start", items: "center", gap: "$0.5", ...frame, ...props, children: items }) }));
+    return (_jsx(ButtonGroupContext.Provider, { value: ctx, children: _jsx(XGroup, { ...slot('button-group'), "data-attached": "", role: "group", unstyled: true, display: "inline-flex", self: "flex-start", items: "center", ...frame, ...props, children: items.map((child, i) => (_jsx(XGroup.Item, { ...(i > 0 ? { ml: -1 } : null), focusStyle: { zIndex: 1 }, children: child }, child.key ?? i))) }) }));
+}
+//# sourceMappingURL=button-group.js.map

package/dist/backends/gui/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../src/backends/gui/button-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAuC,MAAM,OAAO,CAAA;AAEpG,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAK7B,MAAM,CAAC,MAAM,kBAAkB,GAAG,eAAe,CAAC,aAAa,CAA6B,IAAI,CAAC,CAAA;AAejG,4EAA4E;AAC5E,MAAM,KAAK,GAAG,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAW,CAAA;AAEvG,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,GAAG,IAAI,EACf,MAAM,GAAG,KAAK,EACd,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACS;IACjB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAA;IAC/D,MAAM,GAAG,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAA;IAC3C,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;IAEnC,IAAI,CAAC,QAAQ;QACX,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YACrC,KAAC,MAAM,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,aAAa,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,KAAK,KAAK,KAAM,KAAK,YAClI,KAAK,GACC,GACmB,CAC/B,CAAA;IAEH,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YACrC,KAAC,MAAM,OACD,IAAI,CAAC,cAAc,CAAC,mBACV,EAAE,EAChB,IAAI,EAAC,OAAO,EACZ,QAAQ,QACR,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,QAAQ,KACV,KAAK,KACJ,KAAgB,YAEpB,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAIvB,KAAC,MAAM,CAAC,IAAI,OAA0B,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,YACzF,KAAK,IADU,KAAK,CAAC,GAAG,IAAI,CAAC,CAElB,CACf,CAAC,GACK,GACmB,CAC/B,CAAA;AACH,CAAC"}

package/dist/backends/gui/button.cjs

@@ -31,34 +31,65 @@ const react_1 = require("react");
 const sx_1 = require("../../sx.cjs");
 const ink_1 = require("./ink.cjs");
 const gesture_1 = require("./gesture.cjs");
+const density_1 = require("./density.cjs");
+const button_group_1 = require("./button-group.cjs");
+const tooltip_1 = require("./tooltip.cjs");
+const shortcut_1 = require("./shortcut.cjs");
 /** The floor every size takes under a coarse pointer: a thumb, not a cursor. */
 const TOUCH = 44;
+/**
+ * `xs` (24), `icon-xs` (24) and `icon-2xs` (20) are the record density: the
+ * quiet buttons a table cell, a chip, a kanban header and a menu row hold
+ * (twenty-ui's sm and xs, MIT). They sit beside 13px text, carry a 14px icon and
+ * keep the 44px press area under a coarse pointer like every other size.
+ */
 const HEIGHT = {
     default: 36,
     sm: 32,
+    xs: 24,
     lg: 40,
     icon: 36,
     'icon-sm': 32,
+    'icon-xs': 24,
+    'icon-2xs': 20,
     'icon-lg': 40,
 };
 /** Type scale per size — applied to the Text host, which is what renders it. */
 const TYPE = {
     default: '$3',
     sm: '$2',
+    xs: '$2',
     lg: '$3',
     icon: '$3',
     'icon-sm': '$2',
+    'icon-xs': '$2',
+    'icon-2xs': '$1',
     'icon-lg': '$3',
 };
+/** The icon each size draws a `startIcon`/`endIcon` at, when the icon names no size of its own. */
+const GLYPH = {
+    default: 16,
+    sm: 14,
+    xs: 14,
+    lg: 16,
+    icon: 16,
+    'icon-sm': 16,
+    'icon-xs': 14,
+    'icon-2xs': 14,
+    'icon-lg': 20,
+};
 /** The spinner's CEILING, paired 1:1 with TYPE above. A ceiling rather than a
  *  size for the reason the height ladder gives: a pin clips, a bound does not.
  *  A spinner stands in for the label, so it may not outgrow the label's line. */
 const SPIN = {
     default: 16,
     sm: 14,
+    xs: 12,
     lg: 16,
     icon: 16,
     'icon-sm': 14,
+    'icon-xs': 12,
+    'icon-2xs': 12,
     'icon-lg': 16,
 };
 const Frame = (0, gui_1.styled)(gui_1.Button.Frame, {
@@ -156,25 +187,162 @@ const Frame = (0, gui_1.styled)(gui_1.Button.Frame, {
             // TOUCH, the target a thumb lands on; a mouse keeps the designed sizes.
             default: { height: 'auto', minHeight: HEIGHT.default, px: '$4', $touchable: { minHeight: TOUCH } },
             sm: { height: 'auto', minHeight: HEIGHT.sm, px: '$3', gap: '$1.5', $touchable: { minHeight: TOUCH } },
+            xs: { height: 'auto', minHeight: HEIGHT.xs, px: '$2', gap: '$1', $touchable: { minHeight: TOUCH } },
             lg: { height: 'auto', minHeight: HEIGHT.lg, px: '$6', $touchable: { minHeight: TOUCH } },
             icon: { height: 'auto', minHeight: HEIGHT.icon, width: 'auto', minWidth: HEIGHT.icon, px: 0, $touchable: { minHeight: TOUCH, minWidth: TOUCH } },
             'icon-sm': { height: 'auto', minHeight: HEIGHT['icon-sm'], width: 'auto', minWidth: HEIGHT['icon-sm'], px: 0, $touchable: { minHeight: TOUCH, minWidth: TOUCH } },
+            'icon-xs': { height: 'auto', minHeight: HEIGHT['icon-xs'], width: 'auto', minWidth: HEIGHT['icon-xs'], px: 0, $touchable: { minHeight: TOUCH, minWidth: TOUCH } },
+            'icon-2xs': { height: 'auto', minHeight: HEIGHT['icon-2xs'], width: 'auto', minWidth: HEIGHT['icon-2xs'], px: 0, rounded: '$xs', $touchable: { minHeight: TOUCH, minWidth: TOUCH } },
             'icon-lg': { height: 'auto', minHeight: HEIGHT['icon-lg'], width: 'auto', minWidth: HEIGHT['icon-lg'], px: 0, $touchable: { minHeight: TOUCH, minWidth: TOUCH } },
         },
+        // The record density's gutter: 8 beside the label and 4 between an icon and
+        // it, on the 32px box `compact` gives a size-less Button. After `size`, so
+        // it wins over the 12 `sm` states; passed only when the density chose the
+        // size, so a named size — an icon size, whose gutter is its width, above all
+        // — keeps its own.
+        compact: {
+            true: { px: '$2', gap: '$1' },
+        },
+        // After `variant`, so a tone restates the variant's colours rather than
+        // racing them. A function of the variant because the axis means a different
+        // pair per shape: the edge and the ink of an outline, the tint of a soft
+        // button, the fill of a solid one. `neutral` is the variant as it is.
+        tone: (tone, { props }) => {
+            const t = TONES[tone];
+            if (!t)
+                return {};
+            switch (props.variant) {
+                case 'primary':
+                    return { bg: t.fill, color: t.fillInk, borderColor: 'transparent', hoverStyle: { bg: t.fillHover, borderColor: 'transparent' } };
+                case 'secondary':
+                    return { bg: t.soft, color: t.ink, hoverStyle: { bg: t.softHover, opacity: 1 } };
+                case 'ghost':
+                    return { color: t.ink, hoverStyle: { bg: t.tint } };
+                case 'default':
+                case 'outline':
+                case undefined:
+                    return { color: t.ink, borderColor: t.edge, hoverStyle: { bg: t.tint, borderColor: t.edge } };
+                default:
+                    return { color: t.ink };
+            }
+        },
+        // Lifted off the page: the ladder's first rung (the `elevation-1` class the
+        // component adds — lit edge and small drop, owned by glass.css) and, on an
+        // outline, the page's ground with the stronger edge, so it reads as raised
+        // rather than as a hole (twenty-ui's `elevated`). Never `--shadow-sm`: that
+        // size ramp is common property and glass.test holds the ladder off it.
+        elevated: (on, { props }) => on
+            ? {
+                // The page's ground, through `--surface-page`. Neither `$background`
+                // nor `var(--background)` will do: gui redeclares `--background` on
+                // its Button sub-theme, so inside a button both read gui's button grey
+                // (rgb(36,36,36) measured). `--surface-page` is declared on :root as
+                // `var(--background)` and inherits RESOLVED, so it is the page's.
+                ...(props.variant === 'default' || props.variant === 'outline' || props.variant === undefined
+                    ? { bg: 'var(--surface-page)', borderColor: '$rim' }
+                    : null),
+            }
+            : {},
+        fullWidth: {
+            true: { width: '100%', self: 'stretch' },
+        },
+        round: {
+            true: { rounded: '$10' },
+        },
         disabled: {
             true: { opacity: 0.5, pointerEvents: 'none', cursor: 'default' },
         },
     },
     defaultVariants: { variant: 'default', size: 'default' },
 });
+/** Each tone's pairs: ink and edge for an outline, tint under the pointer, the
+ *  soft fill and its hover, the solid fill, its ink and its hover. */
+const TONES = {
+    accent: {
+        ink: 'var(--primary)',
+        edge: 'var(--primary)',
+        tint: '$hover',
+        soft: '$hover',
+        softHover: '$raised',
+        fill: 'var(--primary)',
+        fillInk: 'var(--primary-foreground)',
+        fillHover: 'var(--primary-hover)',
+    },
+    danger: {
+        ink: '$bad',
+        edge: '$red7',
+        tint: 'var(--state-error-bg)',
+        soft: 'var(--state-error-bg)',
+        softHover: '$red4',
+        fill: 'var(--destructive)',
+        fillInk: 'var(--destructive-foreground)',
+        fillHover: 'var(--destructive-hover)',
+    },
+    success: {
+        ink: '$good',
+        edge: '$green7',
+        tint: 'var(--state-success-bg)',
+        soft: 'var(--state-success-bg)',
+        softHover: '$green4',
+        fill: '$green9',
+        fillInk: '#ffffff',
+        fillHover: '$green10',
+    },
+};
+/** The ink a tone gives its icons, which read colour from a prop and not from the label's text context. */
+const toneInk = (tone, variant) => {
+    if (tone === 'neutral')
+        return undefined;
+    return variant === 'primary' ? TONES[tone].fillInk : TONES[tone].ink;
+};
 /**
  * A stable class handle for hosts that hook buttons from CSS. Styling lives in
  * the tokens; this only names the variant and size.
  */
 const style_1 = require("../../style.cjs");
 Object.defineProperty(exports, "buttonVariants", { enumerable: true, get: function () { return style_1.buttonVariants; } });
-function Button({ className, variant = 'default', size = 'default', asChild = false, isLoading = false, disabled, children, ...props }) {
-    const resolved = size ?? 'default';
+/**
+ * A Lucide-style icon element, given the size it is drawn at and the label's
+ * colour, each only where it names none of its own. A gui icon reads its colour
+ * from a prop, not from the text context the label's colour rides on, so a
+ * subtle button's icon would otherwise stay at full ink beside a quiet label.
+ */
+const glyph = (icon, size, color) => {
+    if (!(0, react_1.isValidElement)(icon))
+        return icon;
+    const own = icon.props;
+    const next = { ...(own.size == null ? { size } : null), ...(color && own.color == null ? { color } : null) };
+    return Object.keys(next).length ? (0, react_1.cloneElement)(icon, next) : icon;
+};
+/** The two record sizes whose child IS the icon, so the button draws it at its glyph. */
+const SMALL_ICON = new Set(['icon-xs', 'icon-2xs']);
+/** How long a pointer rests on a button before its tooltip shows (twenty-ui's 1000ms). */
+const TOOLTIP_DELAY = 1000;
+function Button({ tooltip, ...props }) {
+    if (tooltip == null || tooltip === false)
+        return (0, jsx_runtime_1.jsx)(Pressable, { ...props });
+    const label = typeof tooltip === 'string' && props['aria-label'] == null ? { 'aria-label': tooltip } : null;
+    return ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { delay: TOOLTIP_DELAY, placement: "bottom", children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(Pressable, { ...props, ...(props.disabled ? { focusableWhenDisabled: true } : null), ...label }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: tooltip })] }));
+}
+function Pressable({ className, variant: own, size, asChild = false, isLoading = false, disabled, startIcon, endIcon, shortcut, shortcutJoinLabel, emphasis = 'standard', tone: ownTone, loadingPosition = 'start', fullWidth, elevated, shape, focusableWhenDisabled, children, ...props }) {
+    const density = (0, density_1.useDensity)();
+    const group = (0, react_1.useContext)(button_group_1.ButtonGroupContext);
+    const variant = own ?? group?.variant ?? 'default';
+    const tone = ownTone ?? group?.tone ?? 'neutral';
+    const resolved = size ?? group?.size ?? (density === 'compact' ? 'sm' : 'default');
+    // Only the box the density chose takes its gutter: a named size is a decision.
+    const compact = density === 'compact' && size == null && group?.size == null;
+    const quiet = emphasis === 'subtle' ? { color: '$hint' } : null;
+    const tint = emphasis === 'subtle' ? '$hint' : toneInk(tone, variant);
+    // The record density's label weight: medium, as twenty-ui sets every button.
+    const weight = density === 'compact' ? { fontWeight: '500' } : null;
+    // Disabled but focusable: the frame's `disabled` would take pointer events and
+    // focus away, so the state is said in ARIA and the press is refused here.
+    const inert = !!disabled && !!focusableWhenDisabled;
+    const center = isLoading && loadingPosition === 'center';
+    // aria-hidden: the label stays the name and `disabled` says it is busy; an
+    // unnamed progressbar beside it is what axe reports.
+    const spinner = (0, jsx_runtime_1.jsx)(gui_1.Spinner, { "aria-hidden": true, size: "small", maxW: SPIN[resolved], maxH: SPIN[resolved] });
     // gui's own `asChild` cannot merge into the child here: the Button frame bakes
     // a `render: <button>`, so asChild WRAPS the child in a button and drops every
     // compiled style (measured: `<button class="is_View "><a>…</a></button>`).
@@ -188,7 +356,12 @@ function Button({ className, variant = 'default', size = 'default', asChild = fa
     // default, as `render` below records) so it cannot say otherwise. A caller's
     // `role` still lands, from the spread after it.
     const link = host != null && host.props.href != null;
-    return ((0, jsx_runtime_1.jsxs)(Frame, { "data-slot": "button", "data-variant": variant ?? 'default', "data-size": resolved, variant: variant ?? 'default', size: resolved, ...(host
+    return ((0, jsx_runtime_1.jsxs)(Frame, { "data-slot": "button", "data-variant": variant, "data-size": resolved, ...(tone !== 'neutral' ? { 'data-tone': tone } : null), variant: variant, size: resolved, ...(compact ? { compact: true } : null), ...(tone !== 'neutral' ? { tone } : null), ...(elevated ? { elevated: true } : null), ...(fullWidth ? { fullWidth: true } : null), ...(shape === 'round' ? { round: true } : null), ...(group?.framed ? { rounded: 1 } : null), ...(center ? { position: 'relative' } : null), ...(host
             ? { render: (0, react_1.createElement)(host.type, { ...host.props, children: undefined }) }
-            : null), ...(link ? { role: undefined } : null), disabled: disabled || isLoading, ...(0, gesture_1.touch)(HEIGHT[resolved], 44, 'y'), ...(0, sx_1.sx)((0, style_1.buttonVariants)({ variant, size, className })), ...props, children: [isLoading && (0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", maxW: SPIN[resolved], maxH: SPIN[resolved] }), (0, ink_1.ink)(body, gui_1.Button.Text, { fontSize: TYPE[resolved] })] }));
+            : null), ...(link ? { role: undefined } : null), disabled: inert ? false : disabled || isLoading, ...(inert ? { 'aria-disabled': true, opacity: 0.5, cursor: 'not-allowed' } : null), ...(0, gesture_1.touch)(HEIGHT[resolved], 44, 'y'), ...(0, sx_1.sx)((0, style_1.buttonVariants)({ variant, size, className: elevated ? [className, 'elevation-1'].filter(Boolean).join(' ') : className })), ...props, ...(inert ? { onPress: undefined, onClick: (e) => e?.preventDefault?.() } : null), children: [isLoading && loadingPosition === 'start' ? spinner : null, center ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "absolute", t: 0, b: 0, l: 0, r: 0, items: "center", justify: "center", pointerEvents: "none", children: spinner })) : null, startIcon ? glyph(startIcon, GLYPH[resolved], tint) : null, (0, ink_1.ink)(SMALL_ICON.has(resolved) ? glyph(body, GLYPH[resolved], tint) : body, gui_1.Button.Text, {
+                fontSize: TYPE[resolved],
+                ...weight,
+                ...quiet,
+                ...(center ? { opacity: 0 } : null),
+            }), shortcut && shortcut.length ? ((0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: shortcut, variant: "button", sequenceJoinLabel: shortcutJoinLabel, ...(center ? { opacity: 0 } : null) })) : null, endIcon ? glyph(endIcon, GLYPH[resolved], tint) : null, isLoading && loadingPosition === 'end' ? spinner : null] }));
 }