@hanzo/ui 8.0.72 → 8.0.73

package/dist/backends/gui/popover.cjs

@@ -1,7 +1,7 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopoverClose = exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = void 0;
+exports.PopoverClose = exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = exports.place = void 0;
 exports.Popover = Popover;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
@@ -9,20 +9,36 @@ 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 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';
+/**
+ * The placement a SIDE and an ALIGN name together. gui speaks floating-ui's
+ * one string; the compound API splits the same fact in two, so this rejoins
+ * them. `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.
+ *
+ * Example: place('bottom', 'start') === 'bottom-start'
+ */
+const place = (side, align = 'center') => {
+    const base = side.split('-')[0];
+    return align === 'center' ? base : `${base}-${align}`;
+};
+exports.place = place;
+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, exports.place)(placement ?? DEFAULT_SIDE, placed.align), ...props }) }));
 }
 const PopoverTrigger = gui_1.Popover.Trigger;
 exports.PopoverTrigger = PopoverTrigger;
@@ -30,10 +46,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,35 @@
  *
  * `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';
+export type Align = 'start' | 'center' | 'end';
+/**
+ * The placement a SIDE and an ALIGN name together. gui speaks floating-ui's
+ * one string; the compound API splits the same fact in two, so this rejoins
+ * them. `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.
+ *
+ * Example: place('bottom', 'start') === 'bottom-start'
+ */
+export declare const place: (side: string, align?: Align) => string;
 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;AAOd,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAE9C;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,GAAI,MAAM,MAAM,EAAE,QAAO,KAAgB,KAAG,MAG7D,CAAA;AAOD,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,43 @@ 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 { 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';
+/**
+ * The placement a SIDE and an ALIGN name together. gui speaks floating-ui's
+ * one string; the compound API splits the same fact in two, so this rejoins
+ * them. `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.
+ *
+ * Example: place('bottom', 'start') === 'bottom-start'
+ */
+export const place = (side, align = 'center') => {
+    const base = side.split('-')[0];
+    return align === 'center' ? base : `${base}-${align}`;
+};
+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,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,cAAc,GAAG,CAAC,CAAA;AACxB,MAAM,YAAY,GAAG,QAAQ,CAAA;AAI7B;;;;;;;GAOG;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;AAKD,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.73",
   "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": {