@hanzo/ui 8.0.72 → 8.0.74

package/dist/backends/gui/hover-card.cjs

@@ -21,11 +21,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *      Radix's own defaults (700 / 300) are kept.
  *   2. `side` + `align` + `sideOffset` (Content) -> ONE `placement` and one
  *      `offset` on the ROOT. Content still ACCEPTS all three and publishes them
- *      up through a context — the same idiom `popover.tsx` uses for `sideOffset`
- *      — so `<HoverCardContent side="left" align="start">` lands as
- *      `placement="left-start"` instead of being silently dropped, which is what
- *      `PopoverContent` does with `align` today. gui's popper and Radix agree on
- *      the default here (`bottom`/`center`), so nothing has to be written out.
+ *      up through a context — the same idiom `popover.tsx` uses — so
+ *      `<HoverCardContent side="left" align="start">` lands as
+ *      `placement="left-start"`. The rejoining rule itself is `place()`, shared
+ *      with `popover.tsx` rather than spelled here: it was written in both, and
+ *      the two copies had already diverged. gui's popper and Radix agree on the
+ *      default (`bottom`/`center`), so nothing has to be written out.
  *
  * One deliberate a11y deviation from Radix, in the safer direction. Radix's hover
  * card is sighted-user-only: its Content carries no role and its Trigger no aria
@@ -45,6 +46,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const gui_1 = require("@hanzo/gui");
 const react_1 = require("react");
 const ink_1 = require("./ink.cjs");
+const place_1 = require("./place.cjs");
 const slot_1 = require("./slot.cjs");
 const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
 /** Radix's defaults, kept so a migrated call site behaves identically. */
@@ -70,7 +72,7 @@ exports.HoverCardTrigger = HoverCardTrigger;
 const HoverCardContent = ({ side = 'bottom', align = 'center', sideOffset = DEFAULT_OFFSET, children, ...props }) => {
     const themeName = (0, portal_theme_1.useThemeName)();
     const publish = (0, react_1.useContext)(FloatContext);
-    (0, react_1.useEffect)(() => publish?.(align === 'center' ? side : `${side}-${align}`, sideOffset), [publish, side, align, sideOffset]);
+    (0, react_1.useEffect)(() => publish?.((0, place_1.place)(side, align), sideOffset), [publish, side, align, sideOffset]);
     return ((0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { ...(0, slot_1.slot)('hover-card-content'), bg: "$color2", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: WIDTH, ...props, children: (0, ink_1.ink)(children, undefined, { size: '$2' }) }) }));
 };
 exports.HoverCardContent = HoverCardContent;

package/dist/backends/gui/hover-card.d.ts

@@ -15,11 +15,12 @@
  *      Radix's own defaults (700 / 300) are kept.
  *   2. `side` + `align` + `sideOffset` (Content) -> ONE `placement` and one
  *      `offset` on the ROOT. Content still ACCEPTS all three and publishes them
- *      up through a context — the same idiom `popover.tsx` uses for `sideOffset`
- *      — so `<HoverCardContent side="left" align="start">` lands as
- *      `placement="left-start"` instead of being silently dropped, which is what
- *      `PopoverContent` does with `align` today. gui's popper and Radix agree on
- *      the default here (`bottom`/`center`), so nothing has to be written out.
+ *      up through a context — the same idiom `popover.tsx` uses — so
+ *      `<HoverCardContent side="left" align="start">` lands as
+ *      `placement="left-start"`. The rejoining rule itself is `place()`, shared
+ *      with `popover.tsx` rather than spelled here: it was written in both, and
+ *      the two copies had already diverged. gui's popper and Radix agree on the
+ *      default (`bottom`/`center`), so nothing has to be written out.
  *
  * One deliberate a11y deviation from Radix, in the safer direction. Radix's hover
  * card is sighted-user-only: its Content carries no role and its Trigger no aria
@@ -38,8 +39,7 @@
  */
 import { Popover as GuiPopover } from '@hanzo/gui';
 import { type ComponentProps } from 'react';
-type Side = 'top' | 'right' | 'bottom' | 'left';
-type Align = 'start' | 'center' | 'end';
+import { type Align, type Side } from './place.js';
 export type HoverCardProps = Omit<ComponentProps<typeof GuiPopover>, 'hoverable' | 'placement' | 'offset'> & {
     openDelay?: number;
     closeDelay?: number;

package/dist/backends/gui/hover-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/hover-card.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAcd,KAAK,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAC/C,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAOvC,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,cAAc,CAAC,OAAO,UAAU,CAAC,EACjC,WAAW,GAAG,WAAW,GAAG,QAAQ,CACrC,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,iBAAS,SAAS,CAAC,EACjB,SAAsB,EACtB,UAAwB,EACxB,GAAG,KAAK,EACT,EAAE,cAAc,2CAsBhB;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,CAAA;AAE7E,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAErD,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC9E,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,iDAMvB,qBAAqB,4CAuBvB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/hover-card.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAGd,OAAO,EAAS,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAA;AAkBtD,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,cAAc,CAAC,OAAO,UAAU,CAAC,EACjC,WAAW,GAAG,WAAW,GAAG,QAAQ,CACrC,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,iBAAS,SAAS,CAAC,EACjB,SAAsB,EACtB,UAAwB,EACxB,GAAG,KAAK,EACT,EAAE,cAAc,2CAsBhB;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,CAAA;AAE7E,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAErD,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC9E,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,iDAMvB,qBAAqB,4CAuBvB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/backends/gui/hover-card.js

@@ -17,11 +17,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *      Radix's own defaults (700 / 300) are kept.
  *   2. `side` + `align` + `sideOffset` (Content) -> ONE `placement` and one
  *      `offset` on the ROOT. Content still ACCEPTS all three and publishes them
- *      up through a context — the same idiom `popover.tsx` uses for `sideOffset`
- *      — so `<HoverCardContent side="left" align="start">` lands as
- *      `placement="left-start"` instead of being silently dropped, which is what
- *      `PopoverContent` does with `align` today. gui's popper and Radix agree on
- *      the default here (`bottom`/`center`), so nothing has to be written out.
+ *      up through a context — the same idiom `popover.tsx` uses — so
+ *      `<HoverCardContent side="left" align="start">` lands as
+ *      `placement="left-start"`. The rejoining rule itself is `place()`, shared
+ *      with `popover.tsx` rather than spelled here: it was written in both, and
+ *      the two copies had already diverged. gui's popper and Radix agree on the
+ *      default (`bottom`/`center`), so nothing has to be written out.
  *
  * One deliberate a11y deviation from Radix, in the safer direction. Radix's hover
  * card is sighted-user-only: its Content carries no role and its Trigger no aria
@@ -41,6 +42,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Popover as GuiPopover } from '@hanzo/gui';
 import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
 import { ink } from './ink.js';
+import { place } from './place.js';
 import { slot } from './slot.js';
 import { PortalTheme, useThemeName } from '../../product/menu/portal-theme.js';
 /** Radix's defaults, kept so a migrated call site behaves identically. */
@@ -65,7 +67,7 @@ const HoverCardTrigger = (props) => (_jsx(GuiPopover.Trigger, { ...slot('hover-c
 const HoverCardContent = ({ side = 'bottom', align = 'center', sideOffset = DEFAULT_OFFSET, children, ...props }) => {
     const themeName = useThemeName();
     const publish = useContext(FloatContext);
-    useEffect(() => publish?.(align === 'center' ? side : `${side}-${align}`, sideOffset), [publish, side, align, sideOffset]);
+    useEffect(() => publish?.(place(side, align), sideOffset), [publish, side, align, sideOffset]);
     return (_jsx(PortalTheme, { name: themeName, children: _jsx(GuiPopover.Content, { ...slot('hover-card-content'), bg: "$color2", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: WIDTH, ...props, children: ink(children, undefined, { size: '$2' }) }) }));
 };
 export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/backends/gui/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/backends/gui/hover-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/backends/gui/hover-card.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/place.cjs

@@ -0,0 +1,34 @@
+'use client';"use strict";
+/**
+ * PLACE — one floating panel, two vocabularies.
+ *
+ * gui speaks floating-ui's single placement string (`bottom`, `bottom-start`),
+ * and it keeps that string on the popper ROOT. The compound API every call site
+ * is written against splits the same fact in two and puts it on the CONTENT: a
+ * `side` and an `align`. Rejoining them is the whole of the translation, and it
+ * belongs in one place because two components need it — `popover` and
+ * `hover-card`, which is a popover in hover mode.
+ *
+ * It lives in its own leaf rather than in either component so that neither has
+ * to import the other for it. It was written twice before that was true, and the
+ * two copies had already diverged: one of them could not re-align a side that
+ * already carried a suffix.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.place = void 0;
+/**
+ * The placement a side and an align name together.
+ *
+ * `center` is the ABSENCE of a suffix rather than a suffix of its own, and a
+ * side that already carries one is RE-aligned rather than appended to — so the
+ * result is always a legal placement and applying it twice changes nothing.
+ *
+ *     place('bottom')            === 'bottom'
+ *     place('bottom', 'start')   === 'bottom-start'
+ *     place('bottom-end', 'start') === 'bottom-start'
+ */
+const place = (side, align = 'center') => {
+    const base = side.split('-')[0];
+    return align === 'center' ? base : `${base}-${align}`;
+};
+exports.place = place;

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

@@ -0,0 +1,32 @@
+/**
+ * PLACE — one floating panel, two vocabularies.
+ *
+ * gui speaks floating-ui's single placement string (`bottom`, `bottom-start`),
+ * and it keeps that string on the popper ROOT. The compound API every call site
+ * is written against splits the same fact in two and puts it on the CONTENT: a
+ * `side` and an `align`. Rejoining them is the whole of the translation, and it
+ * belongs in one place because two components need it — `popover` and
+ * `hover-card`, which is a popover in hover mode.
+ *
+ * It lives in its own leaf rather than in either component so that neither has
+ * to import the other for it. It was written twice before that was true, and the
+ * two copies had already diverged: one of them could not re-align a side that
+ * already carried a suffix.
+ */
+/** Where the panel sits relative to its trigger. */
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+/** Where the panel lines up along that side. */
+export type Align = 'start' | 'center' | 'end';
+/**
+ * The placement a side and an align name together.
+ *
+ * `center` is the ABSENCE of a suffix rather than a suffix of its own, and a
+ * side that already carries one is RE-aligned rather than appended to — so the
+ * result is always a legal placement and applying it twice changes nothing.
+ *
+ *     place('bottom')            === 'bottom'
+ *     place('bottom', 'start')   === 'bottom-start'
+ *     place('bottom-end', 'start') === 'bottom-start'
+ */
+export declare const place: (side: string, align?: Align) => string;
+//# sourceMappingURL=place.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"place.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/place.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,oDAAoD;AACpD,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEtD,gDAAgD;AAChD,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAE9C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,GAAI,MAAM,MAAM,EAAE,QAAO,KAAgB,KAAG,MAG7D,CAAA"}

package/dist/backends/gui/place.js

@@ -0,0 +1,31 @@
+'use client';/**
+ * PLACE — one floating panel, two vocabularies.
+ *
+ * gui speaks floating-ui's single placement string (`bottom`, `bottom-start`),
+ * and it keeps that string on the popper ROOT. The compound API every call site
+ * is written against splits the same fact in two and puts it on the CONTENT: a
+ * `side` and an `align`. Rejoining them is the whole of the translation, and it
+ * belongs in one place because two components need it — `popover` and
+ * `hover-card`, which is a popover in hover mode.
+ *
+ * It lives in its own leaf rather than in either component so that neither has
+ * to import the other for it. It was written twice before that was true, and the
+ * two copies had already diverged: one of them could not re-align a side that
+ * already carried a suffix.
+ */
+/**
+ * The placement a side and an align name together.
+ *
+ * `center` is the ABSENCE of a suffix rather than a suffix of its own, and a
+ * side that already carries one is RE-aligned rather than appended to — so the
+ * result is always a legal placement and applying it twice changes nothing.
+ *
+ *     place('bottom')            === 'bottom'
+ *     place('bottom', 'start')   === 'bottom-start'
+ *     place('bottom-end', 'start') === 'bottom-start'
+ */
+export const place = (side, align = 'center') => {
+    const base = side.split('-')[0];
+    return align === 'center' ? base : `${base}-${align}`;
+};
+//# sourceMappingURL=place.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"place.js","sourceRoot":"","sources":["../../../src/backends/gui/place.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAQH;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,QAAe,QAAQ,EAAU,EAAE;IACrE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IAC/B,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,KAAK,EAAE,CAAA;AACvD,CAAC,CAAA"}

package/dist/backends/gui/popover.cjs

@@ -9,20 +9,24 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *
  * `PopoverContent` mounts its own portal and re-applies the trigger's resolved
  * theme inside it (gui portals re-root the subtree, so theme context does not
- * flow). `sideOffset` lands on the popper root, which is where gui keeps it.
+ * flow).
+ *
+ * gui keeps BOTH placement facts on the popper ROOT — `offset` and `placement`
+ * — while the compound API spells them on Content, as `sideOffset` and `align`.
+ * One value, one owner: the root holds them, Content publishes into it.
  */
 const gui_1 = require("@hanzo/gui");
 const react_1 = require("react");
 const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
+const place_1 = require("./place.cjs");
 const slot_1 = require("./slot.cjs");
 const DEFAULT_OFFSET = 4;
-/** gui puts `offset` on the popper ROOT; the compound API puts `sideOffset` on
- *  Content. One value, one owner: the root holds it, Content publishes into it. */
-const OffsetContext = /* @__PURE__ */ (0, react_1.createContext)(null);
-function Popover({ offset = DEFAULT_OFFSET, ...props }) {
-    const [current, setOffset] = (0, react_1.useState)(offset);
-    (0, react_1.useEffect)(() => setOffset(offset), [offset]);
-    return ((0, jsx_runtime_1.jsx)(OffsetContext.Provider, { value: setOffset, children: (0, jsx_runtime_1.jsx)(gui_1.Popover, { offset: current, ...props }) }));
+const DEFAULT_SIDE = 'bottom';
+const Publish = /* @__PURE__ */ (0, react_1.createContext)(null);
+function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
+    const [placed, setPlaced] = (0, react_1.useState)({});
+    const publish = (0, react_1.useCallback)((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
+    return ((0, jsx_runtime_1.jsx)(Publish.Provider, { value: publish, children: (0, jsx_runtime_1.jsx)(gui_1.Popover, { offset: placed.offset ?? offset, placement: (0, place_1.place)(placement ?? DEFAULT_SIDE, placed.align), ...props }) }));
 }
 const PopoverTrigger = gui_1.Popover.Trigger;
 exports.PopoverTrigger = PopoverTrigger;
@@ -30,10 +34,10 @@ const PopoverAnchor = gui_1.Popover.Anchor;
 exports.PopoverAnchor = PopoverAnchor;
 const PopoverClose = gui_1.Popover.Close;
 exports.PopoverClose = PopoverClose;
-const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align: _align, ...props }) => {
+const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align, ...props }) => {
     const themeName = (0, portal_theme_1.useThemeName)();
-    const setOffset = (0, react_1.useContext)(OffsetContext);
-    (0, react_1.useEffect)(() => setOffset?.(sideOffset), [setOffset, sideOffset]);
+    const publish = (0, react_1.useContext)(Publish);
+    (0, react_1.useEffect)(() => publish?.({ offset: sideOffset, align }), [publish, sideOffset, align]);
     return ((0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { ...(0, slot_1.slot)('popover-content'), bg: "$color2", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: 288, ...props }) }));
 };
 exports.PopoverContent = PopoverContent;

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

@@ -3,21 +3,27 @@
  *
  * `PopoverContent` mounts its own portal and re-applies the trigger's resolved
  * theme inside it (gui portals re-root the subtree, so theme context does not
- * flow). `sideOffset` lands on the popper root, which is where gui keeps it.
+ * flow).
+ *
+ * gui keeps BOTH placement facts on the popper ROOT — `offset` and `placement`
+ * — while the compound API spells them on Content, as `sideOffset` and `align`.
+ * One value, one owner: the root holds them, Content publishes into it.
  */
 import { Popover as GuiPopover } from '@hanzo/gui';
 import { type ComponentProps } from 'react';
+import { type Align } from './place.js';
+export type { Align };
 export type PopoverProps = Omit<ComponentProps<typeof GuiPopover>, 'offset'> & {
     offset?: number;
 };
-declare function Popover({ offset, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function Popover({ offset, placement, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 declare const PopoverTrigger: typeof GuiPopover.Trigger;
 declare const PopoverAnchor: typeof GuiPopover.Anchor;
 declare const PopoverClose: typeof GuiPopover.Close;
 export type PopoverContentProps = ComponentProps<typeof GuiPopover.Content> & {
     sideOffset?: number;
-    align?: 'start' | 'center' | 'end';
+    align?: Align;
 };
-declare const PopoverContent: ({ sideOffset, align: _align, ...props }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const PopoverContent: ({ sideOffset, align, ...props }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
 //# sourceMappingURL=popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAAkD,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAU3F,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElG,iBAAS,OAAO,CAAC,EAAE,MAAuB,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAQnE;AAED,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AACpE,QAAA,MAAM,aAAa,EAAE,OAAO,UAAU,CAAC,MAA0B,CAAA;AACjE,QAAA,MAAM,YAAY,EAAE,OAAO,UAAU,CAAC,KAAwB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;CACnC,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,yCAA0D,mBAAmB,4CAkBpG,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAEd,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAM3C,YAAY,EAAE,KAAK,EAAE,CAAA;AAOrB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElG,iBAAS,OAAO,CAAC,EAAE,MAAuB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAY9E;AAED,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AACpE,QAAA,MAAM,aAAa,EAAE,OAAO,UAAU,CAAC,MAA0B,CAAA;AACjE,QAAA,MAAM,YAAY,EAAE,OAAO,UAAU,CAAC,KAAwB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,CAAA;AAED,QAAA,MAAM,cAAc,GAAI,iCAAkD,mBAAmB,4CAkB5F,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}

package/dist/backends/gui/popover.js

@@ -5,28 +5,32 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * `PopoverContent` mounts its own portal and re-applies the trigger's resolved
  * theme inside it (gui portals re-root the subtree, so theme context does not
- * flow). `sideOffset` lands on the popper root, which is where gui keeps it.
+ * flow).
+ *
+ * gui keeps BOTH placement facts on the popper ROOT — `offset` and `placement`
+ * — while the compound API spells them on Content, as `sideOffset` and `align`.
+ * One value, one owner: the root holds them, Content publishes into it.
  */
 import { Popover as GuiPopover } from '@hanzo/gui';
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
 import { PortalTheme, useThemeName } from '../../product/menu/portal-theme.js';
+import { place } from './place.js';
 import { slot } from './slot.js';
 const DEFAULT_OFFSET = 4;
-/** gui puts `offset` on the popper ROOT; the compound API puts `sideOffset` on
- *  Content. One value, one owner: the root holds it, Content publishes into it. */
-const OffsetContext = /* @__PURE__ */ createContext(null);
-function Popover({ offset = DEFAULT_OFFSET, ...props }) {
-    const [current, setOffset] = useState(offset);
-    useEffect(() => setOffset(offset), [offset]);
-    return (_jsx(OffsetContext.Provider, { value: setOffset, children: _jsx(GuiPopover, { offset: current, ...props }) }));
+const DEFAULT_SIDE = 'bottom';
+const Publish = /* @__PURE__ */ createContext(null);
+function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
+    const [placed, setPlaced] = useState({});
+    const publish = useCallback((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
+    return (_jsx(Publish.Provider, { value: publish, children: _jsx(GuiPopover, { offset: placed.offset ?? offset, placement: place(placement ?? DEFAULT_SIDE, placed.align), ...props }) }));
 }
 const PopoverTrigger = GuiPopover.Trigger;
 const PopoverAnchor = GuiPopover.Anchor;
 const PopoverClose = GuiPopover.Close;
-const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align: _align, ...props }) => {
+const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align, ...props }) => {
     const themeName = useThemeName();
-    const setOffset = useContext(OffsetContext);
-    useEffect(() => setOffset?.(sideOffset), [setOffset, sideOffset]);
+    const publish = useContext(Publish);
+    useEffect(() => publish?.({ offset: sideOffset, align }), [publish, sideOffset, align]);
     return (_jsx(PortalTheme, { name: themeName, children: _jsx(GuiPopover.Content, { ...slot('popover-content'), bg: "$color2", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: 288, ...props }) }));
 };
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAuB,MAAM,OAAO,CAAA;AAC3F,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,cAAc,GAAG,CAAC,CAAA;AAExB;mFACmF;AACnF,MAAM,aAAa,GAAG,eAAe,CAAC,aAAa,CAA+B,IAAI,CAAC,CAAA;AAIvF,SAAS,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,KAAK,EAAgB;IAClE,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAC7C,SAAS,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAC5C,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,YACtC,KAAC,UAAU,IAAC,MAAM,EAAE,OAAO,KAAM,KAAK,GAAI,GACnB,CAC1B,CAAA;AACH,CAAC;AAED,MAAM,cAAc,GAA8B,UAAU,CAAC,OAAO,CAAA;AACpE,MAAM,aAAa,GAA6B,UAAU,CAAC,MAAM,CAAA;AACjE,MAAM,YAAY,GAA4B,UAAU,CAAC,KAAK,CAAA;AAO9D,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,GAAG,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAuB,EAAE,EAAE;IACvG,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,SAAS,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IAC3C,SAAS,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;IACjE,OAAO,CACL,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,YAC1B,KAAC,UAAU,CAAC,OAAO,OACb,IAAI,CAAC,iBAAiB,CAAC,EAC3B,EAAE,EAAC,SAAS,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAC,IAAI,EACZ,CAAC,EAAC,IAAI,EACN,KAAK,EAAE,GAAG,KACN,KAAK,GACT,GACU,CACf,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,QAAQ,GAET,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,cAAc,GAAG,CAAC,CAAA;AACxB,MAAM,YAAY,GAAG,QAAQ,CAAA;AAO7B,MAAM,OAAO,GAAG,eAAe,CAAC,aAAa,CAA+B,IAAI,CAAC,CAAA;AAIjF,SAAS,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgB;IAC7E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAA;IAChD,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IACxF,OAAO,CACL,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,YAC9B,KAAC,UAAU,IACT,MAAM,EAAE,MAAM,CAAC,MAAM,IAAI,MAAM,EAC/B,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,YAAY,EAAE,MAAM,CAAC,KAAK,CAAqB,KACzE,KAAK,GACT,GACe,CACpB,CAAA;AACH,CAAC;AAED,MAAM,cAAc,GAA8B,UAAU,CAAC,OAAO,CAAA;AACpE,MAAM,aAAa,GAA6B,UAAU,CAAC,MAAM,CAAA;AACjE,MAAM,YAAY,GAA4B,UAAU,CAAC,KAAK,CAAA;AAO9D,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,GAAG,cAAc,EAAE,KAAK,EAAE,GAAG,KAAK,EAAuB,EAAE,EAAE;IAC/F,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACnC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAA;IACvF,OAAO,CACL,KAAC,WAAW,IAAC,IAAI,EAAE,SAAS,YAC1B,KAAC,UAAU,CAAC,OAAO,OACb,IAAI,CAAC,iBAAiB,CAAC,EAC3B,EAAE,EAAC,SAAS,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAC,IAAI,EACZ,CAAC,EAAC,IAAI,EACN,KAAK,EAAE,GAAG,KACN,KAAK,GACT,GACU,CACf,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}

package/dist/backends/gui/slider.cjs

@@ -1,7 +1,7 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Slider = void 0;
+exports.Slider = exports.named = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /** Slider — 6px track, 16px thumb, `touch()` to the 44px floor on every target. */
 const gui_1 = require("@hanzo/gui");
@@ -9,12 +9,36 @@ const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
 const TRACK = 6;
 const THUMB = 16;
-const Slider = (props) => ((0, jsx_runtime_1.jsxs)(gui_1.Slider, { ...(0, slot_1.slot)('slider'), width: "100%", ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.Slider.Track, { ...(0, slot_1.slot)('slider-track'), height: TRACK, bg: "$color4", rounded: "$10", children: (0, jsx_runtime_1.jsx)(gui_1.Slider.TrackActive, { ...(0, slot_1.slot)('slider-range'), bg: "$color12" }) }), (0, jsx_runtime_1.jsx)(gui_1.Slider.Thumb, { ...(0, slot_1.slot)('slider-thumb'), index: 0, circular: true, size: THUMB, 
-            // A FILLED knob, no ring. It used to be a dark knob ringed in `$color12`,
-            // which is #fff on dark — the one border value the identity does not
-            // allow. `$borderColor` is not the fix either: gui gives the thumb its own
-            // `SliderThumb` sub-theme, where that token is white as well. A filled
-            // knob needs no border, and `$color12` reads on both themes (white on
-            // dark, near-black on light).
-            bg: "$color12", borderWidth: 0, ...(0, gesture_1.touch)(THUMB) })] }));
+/**
+ * The name belongs where the ROLE is. gui puts `role="slider"` on the Thumb,
+ * so a name spread onto the root lands on a plain container that no screen
+ * reader announces — the control reads as an unlabelled slider. These are the
+ * naming and description properties an ARIA slider must carry; everything else
+ * (value, range, step, orientation, disabled) is the root's and stays there.
+ */
+const NAMES = ['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-valuetext'];
+/** Splits a caller's props into what the thumb must carry and what the root keeps. */
+const named = (props) => {
+    const name = {};
+    const rest = {};
+    for (const [k, v] of Object.entries(props)) {
+        if (NAMES.includes(k))
+            name[k] = v;
+        else
+            rest[k] = v;
+    }
+    return { name, rest };
+};
+exports.named = named;
+const Slider = (props) => {
+    const { name, rest } = (0, exports.named)(props);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Slider, { ...(0, slot_1.slot)('slider'), width: "100%", ...rest, children: [(0, jsx_runtime_1.jsx)(gui_1.Slider.Track, { ...(0, slot_1.slot)('slider-track'), height: TRACK, bg: "$color4", rounded: "$10", children: (0, jsx_runtime_1.jsx)(gui_1.Slider.TrackActive, { ...(0, slot_1.slot)('slider-range'), bg: "$color12" }) }), (0, jsx_runtime_1.jsx)(gui_1.Slider.Thumb, { ...(0, slot_1.slot)('slider-thumb'), index: 0, circular: true, size: THUMB, 
+                // A FILLED knob, no ring. It used to be a dark knob ringed in `$color12`,
+                // which is #fff on dark — the one border value the identity does not
+                // allow. `$borderColor` is not the fix either: gui gives the thumb its own
+                // `SliderThumb` sub-theme, where that token is white as well. A filled
+                // knob needs no border, and `$color12` reads on both themes (white on
+                // dark, near-black on light).
+                bg: "$color12", borderWidth: 0, ...(0, gesture_1.touch)(THUMB), ...name })] }));
+};
 exports.Slider = Slider;

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

@@ -1,6 +1,22 @@
 /** Slider — 6px track, 16px thumb, `touch()` to the 44px floor on every target. */
 import { Slider as GuiSlider } from '@hanzo/gui';
 import type { ComponentProps } from 'react';
+/**
+ * The name belongs where the ROLE is. gui puts `role="slider"` on the Thumb,
+ * so a name spread onto the root lands on a plain container that no screen
+ * reader announces — the control reads as an unlabelled slider. These are the
+ * naming and description properties an ARIA slider must carry; everything else
+ * (value, range, step, orientation, disabled) is the root's and stays there.
+ */
+declare const NAMES: readonly ["aria-label", "aria-labelledby", "aria-describedby", "aria-valuetext"];
+type Name = (typeof NAMES)[number];
+/** An ARIA naming property is a string by contract, so the split says so. */
+type Names = Partial<Record<Name, string>>;
+/** Splits a caller's props into what the thumb must carry and what the root keeps. */
+export declare const named: (props: Record<string, unknown>) => {
+    name: Names;
+    rest: Record<string, unknown>;
+};
 export type SliderProps = ComponentProps<typeof GuiSlider>;
 declare const Slider: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;
 export { Slider };

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/slider.tsx"],"names":[],"mappings":"AAEA,mFAAmF;AACnF,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAO3C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1D,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,4CAqBjC,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/slider.tsx"],"names":[],"mappings":"AAEA,mFAAmF;AACnF,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAO3C;;;;;;GAMG;AACH,QAAA,MAAM,KAAK,kFAAmF,CAAA;AAE9F,KAAK,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAElC,6EAA6E;AAC7E,KAAK,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAA;AAE1C,sFAAsF;AACtF,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAG;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAQlG,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1D,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,4CAyBjC,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/backends/gui/slider.js

@@ -6,13 +6,36 @@ import { slot } from './slot.js';
 import { touch } from './gesture.js';
 const TRACK = 6;
 const THUMB = 16;
-const Slider = (props) => (_jsxs(GuiSlider, { ...slot('slider'), width: "100%", ...props, children: [_jsx(GuiSlider.Track, { ...slot('slider-track'), height: TRACK, bg: "$color4", rounded: "$10", children: _jsx(GuiSlider.TrackActive, { ...slot('slider-range'), bg: "$color12" }) }), _jsx(GuiSlider.Thumb, { ...slot('slider-thumb'), index: 0, circular: true, size: THUMB, 
-            // A FILLED knob, no ring. It used to be a dark knob ringed in `$color12`,
-            // which is #fff on dark — the one border value the identity does not
-            // allow. `$borderColor` is not the fix either: gui gives the thumb its own
-            // `SliderThumb` sub-theme, where that token is white as well. A filled
-            // knob needs no border, and `$color12` reads on both themes (white on
-            // dark, near-black on light).
-            bg: "$color12", borderWidth: 0, ...touch(THUMB) })] }));
+/**
+ * The name belongs where the ROLE is. gui puts `role="slider"` on the Thumb,
+ * so a name spread onto the root lands on a plain container that no screen
+ * reader announces — the control reads as an unlabelled slider. These are the
+ * naming and description properties an ARIA slider must carry; everything else
+ * (value, range, step, orientation, disabled) is the root's and stays there.
+ */
+const NAMES = ['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-valuetext'];
+/** Splits a caller's props into what the thumb must carry and what the root keeps. */
+export const named = (props) => {
+    const name = {};
+    const rest = {};
+    for (const [k, v] of Object.entries(props)) {
+        if (NAMES.includes(k))
+            name[k] = v;
+        else
+            rest[k] = v;
+    }
+    return { name, rest };
+};
+const Slider = (props) => {
+    const { name, rest } = named(props);
+    return (_jsxs(GuiSlider, { ...slot('slider'), width: "100%", ...rest, children: [_jsx(GuiSlider.Track, { ...slot('slider-track'), height: TRACK, bg: "$color4", rounded: "$10", children: _jsx(GuiSlider.TrackActive, { ...slot('slider-range'), bg: "$color12" }) }), _jsx(GuiSlider.Thumb, { ...slot('slider-thumb'), index: 0, circular: true, size: THUMB, 
+                // A FILLED knob, no ring. It used to be a dark knob ringed in `$color12`,
+                // which is #fff on dark — the one border value the identity does not
+                // allow. `$borderColor` is not the fix either: gui gives the thumb its own
+                // `SliderThumb` sub-theme, where that token is white as well. A filled
+                // knob needs no border, and `$color12` reads on both themes (white on
+                // dark, near-black on light).
+                bg: "$color12", borderWidth: 0, ...touch(THUMB), ...name })] }));
+};
 export { Slider };
 //# sourceMappingURL=slider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/backends/gui/slider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,mFAAmF;AACnF,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,KAAK,GAAG,CAAC,CAAA;AACf,MAAM,KAAK,GAAG,EAAE,CAAA;AAIhB,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE,CAAC,CACrC,MAAC,SAAS,OAAK,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAC,MAAM,KAAK,KAAK,aACnD,KAAC,SAAS,CAAC,KAAK,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,YAClF,KAAC,SAAS,CAAC,WAAW,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,EAAE,EAAC,UAAU,GAAG,GACjD,EAClB,KAAC,SAAS,CAAC,KAAK,OACV,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE,CAAC,EACR,QAAQ,QACR,IAAI,EAAE,KAAK;YACX,0EAA0E;YAC1E,qEAAqE;YACrE,2EAA2E;YAC3E,uEAAuE;YACvE,sEAAsE;YACtE,8BAA8B;YAC9B,EAAE,EAAC,UAAU,EACb,WAAW,EAAE,CAAC,KACV,KAAK,CAAC,KAAK,CAAC,GAChB,IACQ,CACb,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/backends/gui/slider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,mFAAmF;AACnF,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,KAAK,GAAG,CAAC,CAAA;AACf,MAAM,KAAK,GAAG,EAAE,CAAA;AAEhB;;;;;;GAMG;AACH,MAAM,KAAK,GAAG,CAAC,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,gBAAgB,CAAU,CAAA;AAO9F,sFAAsF;AACtF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAA8B,EAAkD,EAAE;IACtG,MAAM,IAAI,GAAU,EAAE,CAAA;IACtB,MAAM,IAAI,GAA4B,EAAE,CAAA;IACxC,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAC3C,IAAK,KAA2B,CAAC,QAAQ,CAAC,CAAC,CAAC;YAAE,IAAI,CAAC,CAAS,CAAC,GAAG,CAAW,CAAA;;YACtE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;IAClB,CAAC;IACD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA;AACvB,CAAC,CAAA;AAID,MAAM,MAAM,GAAG,CAAC,KAAkB,EAAE,EAAE;IACpC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,KAAgC,CAAC,CAAA;IAC9D,OAAO,CACL,MAAC,SAAS,OAAK,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAC,MAAM,KAAK,IAAI,aAClD,KAAC,SAAS,CAAC,KAAK,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAC,SAAS,EAAC,OAAO,EAAC,KAAK,YAClF,KAAC,SAAS,CAAC,WAAW,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,EAAE,EAAC,UAAU,GAAG,GACjD,EAClB,KAAC,SAAS,CAAC,KAAK,OACV,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE,CAAC,EACR,QAAQ,QACR,IAAI,EAAE,KAAK;gBACX,0EAA0E;gBAC1E,qEAAqE;gBACrE,2EAA2E;gBAC3E,uEAAuE;gBACvE,sEAAsE;gBACtE,8BAA8B;gBAC9B,EAAE,EAAC,UAAU,EACb,WAAW,EAAE,CAAC,KACV,KAAK,CAAC,KAAK,CAAC,KACZ,IAAI,GACR,IACQ,CACb,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.0.72",
+  "version": "8.0.74",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {