@skdx/react 0.26.0 → 0.28.0

package/dist/utils/liveAnnouncer.d.cts

@@ -1,23 +1,10 @@
 /** Which of the two singleton live regions a message is routed to. */
 export type AnnouncePoliteness = 'polite' | 'assertive';
-/**
- * How long {@link announce} waits before writing a message, so a burst of
- * calls (a combobox re-filtering on every keystroke) collapses into the one
- * announcement the user actually cares about instead of a queue of stale
- * ones.
- */
+/** Debounce for announce; burst of calls collapses to final message only. */
 export declare const ANNOUNCE_DEBOUNCE_MS = 150;
 /**
- * Announces `message` to screen readers through a process-wide `aria-live`
- * region, without rendering anything into your own tree — for state changes
- * that have no visible text of their own (a filtered result count, a
- * re-sorted column).
- *
- * Debounced by {@link ANNOUNCE_DEBOUNCE_MS} and deduplicated: only the last
- * message in a burst is written, and a message identical to what the region
- * already holds is skipped (writing the same text back is not a DOM change,
- * so assistive tech would ignore it anyway). Empty/whitespace messages are
- * ignored. No-ops during SSR.
+ * Announces to screen readers via process-wide `aria-live` region.
+ * Debounced and deduplicated; skips empty/whitespace. No-op during SSR.
  *
  * @example
  * ```ts
@@ -26,22 +13,15 @@ export declare const ANNOUNCE_DEBOUNCE_MS = 150;
  * ```
  */
 export declare function announce(message: string, politeness?: AnnouncePoliteness): void;
-/**
- * Empties the live region(s) and drops any debounced message still waiting to
- * be written — pass a politeness to clear just one. Mostly useful between
- * tests, and when navigating away from the thing a pending message describes.
- */
+/** Clears live region(s); pass politeness to clear one only. */
 export declare function clearAnnouncements(politeness?: AnnouncePoliteness): void;
-/** What {@link useLiveAnnouncer} returns. */
+/** Stable `announce` and `clear` for dependency arrays. */
 export interface LiveAnnouncerApi {
-    /** See {@link announce}. */
     announce: (message: string, politeness?: AnnouncePoliteness) => void;
-    /** See {@link clearAnnouncements}. */
     clear: (politeness?: AnnouncePoliteness) => void;
 }
 /**
- * Hook form of {@link announce} — returns a stable `{ announce, clear }` pair,
- * safe to list in a `useEffect`/`useCallback` dependency array.
+ * Hook form; returns stable pair for dependency arrays.
  *
  * @example
  * ```tsx
@@ -50,21 +30,18 @@ export interface LiveAnnouncerApi {
  * ```
  */
 export declare function useLiveAnnouncer(): LiveAnnouncerApi;
-/** Props for {@link LiveAnnouncer}. */
+/** Props for LiveAnnouncer. */
 export interface LiveAnnouncerProps {
-    /** Announced whenever this value changes. An empty string announces nothing. */
+    /** Announced when changed; empty string announces nothing. */
     message: string;
     /**
-     * Which live region to announce through.
+     * Which live region to use.
      * @default 'polite'
      */
     politeness?: AnnouncePoliteness;
 }
 /**
- * Declarative form of {@link announce}: renders nothing, and announces
- * `message` every time it changes. Use it when the message is already a
- * render-time value; use {@link useLiveAnnouncer} when it isn't (inside an
- * event handler).
+ * Declarative announcer; announces message on change.
  *
  * @example
  * ```tsx

package/dist/utils/liveAnnouncer.d.ts

@@ -1,23 +1,10 @@
 /** Which of the two singleton live regions a message is routed to. */
 export type AnnouncePoliteness = 'polite' | 'assertive';
-/**
- * How long {@link announce} waits before writing a message, so a burst of
- * calls (a combobox re-filtering on every keystroke) collapses into the one
- * announcement the user actually cares about instead of a queue of stale
- * ones.
- */
+/** Debounce for announce; burst of calls collapses to final message only. */
 export declare const ANNOUNCE_DEBOUNCE_MS = 150;
 /**
- * Announces `message` to screen readers through a process-wide `aria-live`
- * region, without rendering anything into your own tree — for state changes
- * that have no visible text of their own (a filtered result count, a
- * re-sorted column).
- *
- * Debounced by {@link ANNOUNCE_DEBOUNCE_MS} and deduplicated: only the last
- * message in a burst is written, and a message identical to what the region
- * already holds is skipped (writing the same text back is not a DOM change,
- * so assistive tech would ignore it anyway). Empty/whitespace messages are
- * ignored. No-ops during SSR.
+ * Announces to screen readers via process-wide `aria-live` region.
+ * Debounced and deduplicated; skips empty/whitespace. No-op during SSR.
  *
  * @example
  * ```ts
@@ -26,22 +13,15 @@ export declare const ANNOUNCE_DEBOUNCE_MS = 150;
  * ```
  */
 export declare function announce(message: string, politeness?: AnnouncePoliteness): void;
-/**
- * Empties the live region(s) and drops any debounced message still waiting to
- * be written — pass a politeness to clear just one. Mostly useful between
- * tests, and when navigating away from the thing a pending message describes.
- */
+/** Clears live region(s); pass politeness to clear one only. */
 export declare function clearAnnouncements(politeness?: AnnouncePoliteness): void;
-/** What {@link useLiveAnnouncer} returns. */
+/** Stable `announce` and `clear` for dependency arrays. */
 export interface LiveAnnouncerApi {
-    /** See {@link announce}. */
     announce: (message: string, politeness?: AnnouncePoliteness) => void;
-    /** See {@link clearAnnouncements}. */
     clear: (politeness?: AnnouncePoliteness) => void;
 }
 /**
- * Hook form of {@link announce} — returns a stable `{ announce, clear }` pair,
- * safe to list in a `useEffect`/`useCallback` dependency array.
+ * Hook form; returns stable pair for dependency arrays.
  *
  * @example
  * ```tsx
@@ -50,21 +30,18 @@ export interface LiveAnnouncerApi {
  * ```
  */
 export declare function useLiveAnnouncer(): LiveAnnouncerApi;
-/** Props for {@link LiveAnnouncer}. */
+/** Props for LiveAnnouncer. */
 export interface LiveAnnouncerProps {
-    /** Announced whenever this value changes. An empty string announces nothing. */
+    /** Announced when changed; empty string announces nothing. */
     message: string;
     /**
-     * Which live region to announce through.
+     * Which live region to use.
      * @default 'polite'
      */
     politeness?: AnnouncePoliteness;
 }
 /**
- * Declarative form of {@link announce}: renders nothing, and announces
- * `message` every time it changes. Use it when the message is already a
- * render-time value; use {@link useLiveAnnouncer} when it isn't (inside an
- * event handler).
+ * Declarative announcer; announces message on change.
  *
  * @example
  * ```tsx

package/dist/utils/menuGlyph.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var d=(e,o)=>{for(var s in o)l(e,s,{get:o[s],enumerable:!0})},a=(e,o,s,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of h(o))!p.call(e,r)&&r!==s&&l(e,r,{get:()=>o[r],enumerable:!(n=i(o,r))||n.enumerable});return e};var g=e=>a(l({},"__esModule",{value:!0}),e);var v={};d(v,{CheckGlyph:()=>k,DotGlyph:()=>u});module.exports=g(v);var t=require("react/jsx-runtime"),c={viewBox:"0 0 16 16",width:"1em",height:"1em","aria-hidden":!0,focusable:"false"},k=()=>(0,t.jsx)("svg",{...c,fill:"none",children:(0,t.jsx)("path",{d:"M3 8.5l3 3 7-7",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})}),u=()=>(0,t.jsx)("svg",{...c,children:(0,t.jsx)("circle",{cx:"8",cy:"8",r:"3",fill:"currentColor"})});0&&(module.exports={CheckGlyph,DotGlyph});

package/dist/utils/menuGlyph.d.cts

@@ -0,0 +1,4 @@
+/** @internal Checkbox item glyph. */
+export declare const CheckGlyph: () => import("react").JSX.Element;
+/** @internal Radio item glyph. */
+export declare const DotGlyph: () => import("react").JSX.Element;

package/dist/utils/menuGlyph.d.ts

@@ -0,0 +1,4 @@
+/** @internal Checkbox item glyph. */
+export declare const CheckGlyph: () => import("react").JSX.Element;
+/** @internal Radio item glyph. */
+export declare const DotGlyph: () => import("react").JSX.Element;

package/dist/utils/menuGlyph.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";var e={viewBox:"0 0 16 16",width:"1em",height:"1em","aria-hidden":!0,focusable:"false"},r=()=>o("svg",{...e,fill:"none",children:o("path",{d:"M3 8.5l3 3 7-7",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})}),t=()=>o("svg",{...e,children:o("circle",{cx:"8",cy:"8",r:"3",fill:"currentColor"})});export{r as CheckGlyph,t as DotGlyph};

package/dist/utils/menuGroup.cjs

@@ -0,0 +1 @@
+"use strict";var c=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,i=Object.prototype.hasOwnProperty;var p=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of b(t))!i.call(e,a)&&a!==n&&r(e,a,{get:()=>t[a],enumerable:!(o=d(t,a))||o.enumerable});return e};var x=(e,t,n)=>(n=e!=null?c(f(e)):{},s(t||!e||!e.__esModule?r(n,"default",{value:e,enumerable:!0}):n,e)),M=e=>s(r({},"__esModule",{value:!0}),e);var m={};p(m,{MenuGroupProvider:()=>L,useMenuGroupLabel:()=>C,useMenuLabelId:()=>R});module.exports=M(m);var u=x(require("react"),1),l=require("./createContext.cjs"),G={labelId:"",setHasLabel:()=>{}},[L,I]=(0,l.createSafeContext)("MenuGroup",G);function C(){let e=u.useId(),[t,n]=u.useState(!1),o=u.useMemo(()=>({labelId:e,setHasLabel:n}),[e]);return{labelId:t?e:void 0,context:o}}function R(){let{labelId:e,setHasLabel:t}=I("MenuLabel");return u.useEffect(()=>{if(e)return t(!0),()=>t(!1)},[e,t]),e||void 0}0&&(module.exports={MenuGroupProvider,useMenuGroupLabel,useMenuLabelId});

package/dist/utils/menuGroup.d.cts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+/**
+ * Naming for `role="group"` containers in menu families (Group, RadioGroup).
+ * `role="group"` needs `aria-labelledby` pointing at the Label; registration ensures the id exists.
+ */
+/** @internal What a `role="group"` hands to the Label inside it. */
+export interface MenuGroupContextValue {
+    /** Id the Label takes, and the group points `aria-labelledby` at. */
+    labelId: string;
+    /** Called by the Label on mount/unmount, so the group knows whether the id resolves. */
+    setHasLabel: (hasLabel: boolean) => void;
+}
+declare const MenuGroupProvider: {
+    (props: MenuGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+};
+export { MenuGroupProvider };
+/**
+ * @internal State a `Group`/`RadioGroup` needs to be named by its Label:
+ * `labelId` is the value for `aria-labelledby`, and is `undefined` until a
+ * Label is actually mounted; `context` goes straight into a
+ * {@link MenuGroupProvider}.
+ */
+export declare function useMenuGroupLabel(): {
+    labelId: string | undefined;
+    context: MenuGroupContextValue;
+};
+/**
+ * @internal The id a `Label` must render, so the group around it can name
+ * itself after it — `undefined` when the Label is not inside one.
+ */
+export declare function useMenuLabelId(): string | undefined;

package/dist/utils/menuGroup.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+/**
+ * Naming for `role="group"` containers in menu families (Group, RadioGroup).
+ * `role="group"` needs `aria-labelledby` pointing at the Label; registration ensures the id exists.
+ */
+/** @internal What a `role="group"` hands to the Label inside it. */
+export interface MenuGroupContextValue {
+    /** Id the Label takes, and the group points `aria-labelledby` at. */
+    labelId: string;
+    /** Called by the Label on mount/unmount, so the group knows whether the id resolves. */
+    setHasLabel: (hasLabel: boolean) => void;
+}
+declare const MenuGroupProvider: {
+    (props: MenuGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+};
+export { MenuGroupProvider };
+/**
+ * @internal State a `Group`/`RadioGroup` needs to be named by its Label:
+ * `labelId` is the value for `aria-labelledby`, and is `undefined` until a
+ * Label is actually mounted; `context` goes straight into a
+ * {@link MenuGroupProvider}.
+ */
+export declare function useMenuGroupLabel(): {
+    labelId: string | undefined;
+    context: MenuGroupContextValue;
+};
+/**
+ * @internal The id a `Label` must render, so the group around it can name
+ * itself after it — `undefined` when the Label is not inside one.
+ */
+export declare function useMenuLabelId(): string | undefined;

package/dist/utils/menuGroup.js

@@ -0,0 +1 @@
+import*as e from"react";import{createSafeContext as o}from"./createContext.js";var r={labelId:"",setHasLabel:()=>{}},[c,s]=o("MenuGroup",r);function d(){let t=e.useId(),[n,u]=e.useState(!1),a=e.useMemo(()=>({labelId:t,setHasLabel:u}),[t]);return{labelId:n?t:void 0,context:a}}function b(){let{labelId:t,setHasLabel:n}=s("MenuLabel");return e.useEffect(()=>{if(t)return n(!0),()=>n(!1)},[t,n]),t||void 0}export{c as MenuGroupProvider,d as useMenuGroupLabel,b as useMenuLabelId};

package/dist/utils/menuSub.cjs

@@ -1 +1 @@
-"use strict";var I=Object.create;var P=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var F=(e,o)=>{for(var a in o)P(e,a,{get:o[a],enumerable:!0})},T=(e,o,a,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of A(o))!_.call(e,i)&&i!==a&&P(e,i,{get:()=>o[i],enumerable:!(t=O(o,i))||t.enumerable});return e};var q=(e,o,a)=>(a=e!=null?I(K(e)):{},T(o||!e||!e.__esModule?P(a,"default",{value:e,enumerable:!0}):a,e)),B=e=>T(P({},"__esModule",{value:!0}),e);var W={};F(W,{MENU_BRANCH_ATTRIBUTE:()=>x,MenuSub:()=>L,MenuSubContent:()=>k,MenuSubTrigger:()=>D});module.exports=B(W);var r=q(require("react"),1),C=require("./composeRefs.cjs"),S=require("./createContext.cjs"),d=require("./direction.cjs"),M=require("./part.cjs"),R=require("./popper.cjs"),y=require("./portal.cjs"),c=require("./primitive.cjs"),E=require("./useControllableState.cjs"),v=require("./useOpenChangeComplete.cjs"),h=require("./useRovingFocus.cjs"),p=require("react/jsx-runtime"),w='[role^="menuitem"]:not([data-disabled])',x="data-skdx-menu-branch",U=150,[V,N]=(0,S.createSafeContext)("MenuSub");function L({family:e,children:o,open:a,defaultOpen:t=!1,onOpenChange:i,onOpenChangeComplete:s}){let m=r.useRef(null),n=r.useRef(null),u=r.useRef(void 0),[b=!1,l]=(0,E.useControllableState)({prop:a,defaultProp:t,onChange:i});(0,v.useOpenChangeComplete)(b,n,s),r.useEffect(()=>()=>clearTimeout(u.current),[]);let f=r.useCallback(()=>{clearTimeout(u.current),l(!0)},[l]),g=r.useCallback(()=>{clearTimeout(u.current),l(!1)},[l]),H=r.useCallback(()=>{clearTimeout(u.current),u.current=setTimeout(()=>l(!1),U)},[l]);return(0,p.jsx)(R.PopperRoot,{children:(0,p.jsx)(V,{family:e,open:b,openNow:f,closeNow:g,scheduleClose:H,triggerRef:m,contentRef:n,contentId:r.useId(),children:o})})}L.displayName="MenuSub";var D=r.forwardRef(({disabled:e,...o},a)=>{let t=N("MenuSubTrigger"),i=(0,C.useComposedRefs)(a,t.triggerRef),s=(0,d.useDirection)(),m=()=>{t.openNow(),requestAnimationFrame(()=>{let n=t.contentRef.current;(n?.querySelector(w)??n)?.focus()})};return(0,p.jsx)(R.PopperAnchor,{asChild:!0,children:(0,p.jsx)(c.Primitive.div,{role:"menuitem","aria-haspopup":"menu","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed","data-disabled":e?"":void 0,"aria-disabled":e||void 0,tabIndex:e?void 0:-1,...o,...(0,M.skdxPart)(t.family,"sub-trigger",o.className),ref:i,onClick:(0,c.composeEventHandlers)(o.onClick,()=>{e||m()}),onKeyDown:(0,c.composeEventHandlers)(o.onKeyDown,n=>{if(e)return;let u=(0,d.directionalKey)(n.key,n.currentTarget,s);["ArrowRight","Enter"," "].includes(u)&&(n.preventDefault(),n.stopPropagation(),m())}),onPointerEnter:(0,c.composeEventHandlers)(o.onPointerEnter,n=>{e||(n.currentTarget.focus(),t.openNow())}),onPointerLeave:(0,c.composeEventHandlers)(o.onPointerLeave,()=>{e||t.scheduleClose()})})})});D.displayName="MenuSubTrigger";var k=r.forwardRef(({forceMount:e,loop:o=!0,side:a="end",align:t="start",sideOffset:i=0,...s},m)=>{let n=N("MenuSubContent"),u=(0,C.useComposedRefs)(m,n.contentRef),b=(0,d.useDirection)(),l=(0,h.useRovingFocus)({orientation:"vertical",loop:o,itemSelector:w,typeahead:!0});return e||n.open?(0,p.jsx)(y.Portal,{[x]:"",children:(0,p.jsx)(R.PopperContent,{role:"menu","aria-orientation":"vertical",id:n.contentId,"data-state":n.open?"open":"closed",tabIndex:-1,side:a,align:t,sideOffset:i,...s,...(0,M.skdxPart)(n.family,"sub-content",s.className),ref:u,onKeyDown:(0,c.composeEventHandlers)(s.onKeyDown,f=>{let g=(0,d.directionalKey)(f.key,f.currentTarget,b);g==="ArrowLeft"||g==="Escape"?(f.preventDefault(),n.closeNow(),n.triggerRef.current?.focus()):l(f),f.key!=="Tab"&&f.stopPropagation()}),onPointerEnter:(0,c.composeEventHandlers)(s.onPointerEnter,n.openNow),onPointerLeave:(0,c.composeEventHandlers)(s.onPointerLeave,n.scheduleClose)})}):null});k.displayName="MenuSubContent";0&&(module.exports={MENU_BRANCH_ATTRIBUTE,MenuSub,MenuSubContent,MenuSubTrigger});
+"use strict";var O=Object.create;var P=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var F=(e,n)=>{for(var o in n)P(e,o,{get:n[o],enumerable:!0})},y=(e,n,o,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of A(n))!_.call(e,t)&&t!==o&&P(e,t,{get:()=>n[t],enumerable:!(c=H(n,t))||c.enumerable});return e};var V=(e,n,o)=>(o=e!=null?O(K(e)):{},y(n||!e||!e.__esModule?P(o,"default",{value:e,enumerable:!0}):o,e)),q=e=>y(P({},"__esModule",{value:!0}),e);var W={};F(W,{MENU_BRANCH_ATTRIBUTE:()=>x,MenuSub:()=>N,MenuSubContent:()=>I,MenuSubTrigger:()=>L});module.exports=q(W);var i=V(require("react"),1),C=require("./composeRefs.cjs"),T=require("./createContext.cjs"),m=require("./direction.cjs"),M=require("./part.cjs"),g=require("./popper.cjs"),S=require("./portal.cjs"),l=require("./primitive.cjs"),h=require("./useControllableState.cjs"),v=require("./useOpenChangeComplete.cjs"),E=require("./useRovingFocus.cjs"),p=require("react/jsx-runtime"),w='[role^="menuitem"]',x="data-skdx-menu-branch",B=150,[U,D]=(0,T.createSafeContext)("MenuSub");function N({family:e,children:n,open:o,defaultOpen:c=!1,onOpenChange:t,onOpenChangeComplete:u}){let R=i.useRef(null),r=i.useRef(null),a=i.useRef(void 0),[s=!1,d]=(0,h.useControllableState)({prop:o,defaultProp:c,onChange:t});(0,v.useOpenChangeComplete)(s,r,u),i.useEffect(()=>()=>clearTimeout(a.current),[]);let f=i.useCallback(()=>{clearTimeout(a.current),d(!0)},[d]),b=i.useCallback(()=>{clearTimeout(a.current),d(!1)},[d]),k=i.useCallback(()=>{clearTimeout(a.current),a.current=setTimeout(()=>d(!1),B)},[d]);return(0,p.jsx)(g.PopperRoot,{children:(0,p.jsx)(U,{family:e,open:s,openNow:f,closeNow:b,scheduleClose:k,triggerRef:R,contentRef:r,contentId:i.useId(),triggerId:i.useId(),children:n})})}N.displayName="MenuSub";var L=i.forwardRef(({disabled:e,textValue:n,...o},c)=>{let t=D("MenuSubTrigger"),u=(0,C.useComposedRefs)(c,t.triggerRef),R=(0,m.useDirection)(),r=()=>{t.openNow(),requestAnimationFrame(()=>{let a=t.contentRef.current;(a?.querySelector(w)??a)?.focus({preventScroll:!0})})};return(0,p.jsx)(g.PopperAnchor,{asChild:!0,children:(0,p.jsx)(l.Primitive.div,{role:"menuitem",id:t.triggerId,"aria-haspopup":"menu","aria-expanded":t.open,"aria-controls":t.contentId,"data-state":t.open?"open":"closed","data-disabled":e?"":void 0,"data-text-value":n,"aria-disabled":e||void 0,tabIndex:-1,...o,...(0,M.skdxPart)(t.family,"sub-trigger",o.className),ref:u,onClick:(0,l.composeEventHandlers)(o.onClick,()=>{e||r()}),onKeyDown:(0,l.composeEventHandlers)(o.onKeyDown,a=>{if(e)return;let s=(0,m.directionalKey)(a.key,a.currentTarget,R);["ArrowRight","Enter"," "].includes(s)&&(a.preventDefault(),a.stopPropagation(),r())}),onPointerEnter:(0,l.composeEventHandlers)(o.onPointerEnter,a=>{e||(a.currentTarget.focus(),t.openNow())}),onPointerLeave:(0,l.composeEventHandlers)(o.onPointerLeave,()=>{e||t.scheduleClose()})})})});L.displayName="MenuSubTrigger";var I=i.forwardRef(({forceMount:e,loop:n=!0,side:o="end",align:c="start",sideOffset:t=0,...u},R)=>{let r=D("MenuSubContent"),a=(0,C.useComposedRefs)(R,r.contentRef),s=(0,m.usePortalledDirection)(r.triggerRef),d=(0,E.useRovingFocus)({orientation:"vertical",loop:n,itemSelector:w,typeahead:!0,includeDisabled:!0});return e||r.open?(0,p.jsx)(S.Portal,{[x]:"",children:(0,p.jsx)(g.PopperContent,{role:"menu","aria-orientation":"vertical",dir:s,"aria-labelledby":u["aria-label"]===void 0?r.triggerId:void 0,id:r.contentId,"data-state":r.open?"open":"closed",tabIndex:-1,side:o,align:c,sideOffset:t,...u,...(0,M.skdxPart)(r.family,"sub-content",u.className),ref:a,onKeyDown:(0,l.composeEventHandlers)(u.onKeyDown,f=>{let b=(0,m.directionalKey)(f.key,f.currentTarget,s);b==="ArrowLeft"||b==="Escape"?(f.preventDefault(),r.closeNow(),r.triggerRef.current?.focus()):d(f),f.key!=="Tab"&&f.stopPropagation()}),onPointerEnter:(0,l.composeEventHandlers)(u.onPointerEnter,r.openNow),onPointerLeave:(0,l.composeEventHandlers)(u.onPointerLeave,r.scheduleClose)})}):null});I.displayName="MenuSubContent";0&&(module.exports={MENU_BRANCH_ATTRIBUTE,MenuSub,MenuSubContent,MenuSubTrigger});

package/dist/utils/menuSub.d.cts

@@ -3,34 +3,16 @@ import { type PopperContentProps } from './popper.cjs';
 import { type PrimitivePropsWithRef } from './primitive.cjs';
 /**
  * Marks a portalled submenu panel as belonging to the menu that opened it.
- *
  * A menu passes `[${MENU_BRANCH_ATTRIBUTE}]` to `useDismiss` as its
- * `insideSelector`, so the panel counts as inside despite no longer being
+ * `insideSelector`, so the panel counts as inside despite not being
  * `contains()`-reachable from the menu's content ref.
  *
- * Deliberately valueless rather than keyed to the owning menu's id, which would
- * mean threading that id through three families for a distinction nothing can
- * observe: opening a second menu dismisses the first through *its* trigger's
- * pointer-down, which is outside either way, so two menus are never open with
- * a submenu between them.
+ * Deliberately valueless rather than keyed to the owning menu's id: two menus
+ * are never open with a submenu between them, so nothing can observe the distinction.
  */
 export declare const MENU_BRANCH_ATTRIBUTE = "data-skdx-menu-branch";
 /** Props for a menu submenu root ({@link MenuSub}). */
 export interface MenuSubProps {
-    /**
-     * The re-exporting family, e.g. `'context-menu'`, which is what lets the
-     * shared parts name their own classes. Supplied by the family wrapper
-     * (`DropdownMenuSub`, `ContextMenuSub`, `MenubarSub`), never by an
-     * application — each wrapper `Omit`s it from its own props for that reason.
-     *
-     * Written as a description followed by the tag, not as tag text: the docs
-     * manifest takes a member's summary from the text *before* the first block
-     * tag, so `@internal The re-exporting family…` left all three wrappers
-     * reported as having an undescribed prop.
-     *
-     * @internal
-     */
-    family: string;
     /**
      * The `SubTrigger` and `SubContent` parts of this submenu.
      * @default undefined — renders nothing if omitted.
@@ -63,10 +45,17 @@ export interface MenuSubProps {
 /** Props for a menu submenu trigger ({@link MenuSubTrigger}). */
 export interface MenuSubTriggerProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Excludes the trigger from roving-focus navigation and blocks it from opening the submenu.
+     * Marks the trigger aria-disabled and blocks it from opening the submenu. It stays in the roving order and remains focusable, so a keyboard user still discovers it.
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Text typeahead matches this trigger by, instead of its rendered text.
+     * Reflected to `data-text-value`, which every matcher reads ahead of
+     * `textContent`.
+     * @default undefined — the trigger's rendered text is used.
+     */
+    textValue?: string;
 }
 /**
  * Props for a menu submenu panel ({@link MenuSubContent}). Extends the shared
@@ -93,14 +82,21 @@ export interface MenuSubContentProps extends PopperContentProps {
  * hover grace timer, and provides a nested popper anchor context so
  * `MenuSubContent` positions against `MenuSubTrigger`. Renders no DOM element
  * itself.
+ *
+ * The `family` parameter is not part of MenuSubProps — it is supplied by the
+ * wrapping family component (DropdownMenuSub, ContextMenuSub, MenubarSub) and
+ * resolved from that family's context, not exposed as a public prop.
  */
-export declare function MenuSub({ family, children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, }: MenuSubProps): React.JSX.Element;
+export declare function MenuSub({ family, children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, }: MenuSubProps & {
+    family: string;
+}): React.JSX.Element;
 export declare namespace MenuSub {
     var displayName: string;
 }
 /**
  * @internal The parent-menu item that opens a submenu: `role="menuitem"` with
- * `aria-haspopup="menu"`, `aria-expanded`, `aria-controls` and `data-state`.
+ * `aria-haspopup="menu"`, `aria-expanded`, `aria-controls`, an `id` for
+ * `MenuSubContent` to name itself after, and `data-state`.
  * Doubles as the popper anchor for `MenuSubContent`. Opens on click, Enter,
  * Space and ArrowRight (moving focus to the submenu's first item), and on
  * hover (leaving focus where it is). Under `dir="rtl"` the opening key is
@@ -108,7 +104,9 @@ export declare namespace MenuSub {
  */
 export declare const MenuSubTrigger: React.ForwardRefExoticComponent<Omit<MenuSubTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
- * @internal The submenu's floating panel: `role="menu"` with
+ * @internal The submenu's floating panel: `role="menu"` named after its
+ * SubTrigger via `aria-labelledby` (unless the consumer supplies an
+ * `aria-label`, which wins), with
  * `aria-orientation="vertical"` and `data-state`, positioned by the shared
  * popper layer against its `MenuSubTrigger` (`side="end"`, `align="start"` by
  * default — logical, so it opens to the right under LTR and to the left under

package/dist/utils/menuSub.d.ts

@@ -3,34 +3,16 @@ import { type PopperContentProps } from './popper.js';
 import { type PrimitivePropsWithRef } from './primitive.js';
 /**
  * Marks a portalled submenu panel as belonging to the menu that opened it.
- *
  * A menu passes `[${MENU_BRANCH_ATTRIBUTE}]` to `useDismiss` as its
- * `insideSelector`, so the panel counts as inside despite no longer being
+ * `insideSelector`, so the panel counts as inside despite not being
  * `contains()`-reachable from the menu's content ref.
  *
- * Deliberately valueless rather than keyed to the owning menu's id, which would
- * mean threading that id through three families for a distinction nothing can
- * observe: opening a second menu dismisses the first through *its* trigger's
- * pointer-down, which is outside either way, so two menus are never open with
- * a submenu between them.
+ * Deliberately valueless rather than keyed to the owning menu's id: two menus
+ * are never open with a submenu between them, so nothing can observe the distinction.
  */
 export declare const MENU_BRANCH_ATTRIBUTE = "data-skdx-menu-branch";
 /** Props for a menu submenu root ({@link MenuSub}). */
 export interface MenuSubProps {
-    /**
-     * The re-exporting family, e.g. `'context-menu'`, which is what lets the
-     * shared parts name their own classes. Supplied by the family wrapper
-     * (`DropdownMenuSub`, `ContextMenuSub`, `MenubarSub`), never by an
-     * application — each wrapper `Omit`s it from its own props for that reason.
-     *
-     * Written as a description followed by the tag, not as tag text: the docs
-     * manifest takes a member's summary from the text *before* the first block
-     * tag, so `@internal The re-exporting family…` left all three wrappers
-     * reported as having an undescribed prop.
-     *
-     * @internal
-     */
-    family: string;
     /**
      * The `SubTrigger` and `SubContent` parts of this submenu.
      * @default undefined — renders nothing if omitted.
@@ -63,10 +45,17 @@ export interface MenuSubProps {
 /** Props for a menu submenu trigger ({@link MenuSubTrigger}). */
 export interface MenuSubTriggerProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Excludes the trigger from roving-focus navigation and blocks it from opening the submenu.
+     * Marks the trigger aria-disabled and blocks it from opening the submenu. It stays in the roving order and remains focusable, so a keyboard user still discovers it.
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Text typeahead matches this trigger by, instead of its rendered text.
+     * Reflected to `data-text-value`, which every matcher reads ahead of
+     * `textContent`.
+     * @default undefined — the trigger's rendered text is used.
+     */
+    textValue?: string;
 }
 /**
  * Props for a menu submenu panel ({@link MenuSubContent}). Extends the shared
@@ -93,14 +82,21 @@ export interface MenuSubContentProps extends PopperContentProps {
  * hover grace timer, and provides a nested popper anchor context so
  * `MenuSubContent` positions against `MenuSubTrigger`. Renders no DOM element
  * itself.
+ *
+ * The `family` parameter is not part of MenuSubProps — it is supplied by the
+ * wrapping family component (DropdownMenuSub, ContextMenuSub, MenubarSub) and
+ * resolved from that family's context, not exposed as a public prop.
  */
-export declare function MenuSub({ family, children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, }: MenuSubProps): React.JSX.Element;
+export declare function MenuSub({ family, children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, }: MenuSubProps & {
+    family: string;
+}): React.JSX.Element;
 export declare namespace MenuSub {
     var displayName: string;
 }
 /**
  * @internal The parent-menu item that opens a submenu: `role="menuitem"` with
- * `aria-haspopup="menu"`, `aria-expanded`, `aria-controls` and `data-state`.
+ * `aria-haspopup="menu"`, `aria-expanded`, `aria-controls`, an `id` for
+ * `MenuSubContent` to name itself after, and `data-state`.
  * Doubles as the popper anchor for `MenuSubContent`. Opens on click, Enter,
  * Space and ArrowRight (moving focus to the submenu's first item), and on
  * hover (leaving focus where it is). Under `dir="rtl"` the opening key is
@@ -108,7 +104,9 @@ export declare namespace MenuSub {
  */
 export declare const MenuSubTrigger: React.ForwardRefExoticComponent<Omit<MenuSubTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
- * @internal The submenu's floating panel: `role="menu"` with
+ * @internal The submenu's floating panel: `role="menu"` named after its
+ * SubTrigger via `aria-labelledby` (unless the consumer supplies an
+ * `aria-label`, which wins), with
  * `aria-orientation="vertical"` and `data-state`, positioned by the shared
  * popper layer against its `MenuSubTrigger` (`side="end"`, `align="start"` by
  * default — logical, so it opens to the right under LTR and to the left under

package/dist/utils/menuSub.js

@@ -1 +1 @@
-import*as o from"react";import{useComposedRefs as b}from"./composeRefs.js";import{createSafeContext as y}from"./createContext.js";import{directionalKey as g,useDirection as P}from"./direction.js";import{skdxPart as C}from"./part.js";import{PopperAnchor as E,PopperContent as v,PopperRoot as h}from"./popper.js";import{Portal as w}from"./portal.js";import{composeEventHandlers as s,Primitive as x}from"./primitive.js";import{useControllableState as N}from"./useControllableState.js";import{useOpenChangeComplete as L}from"./useOpenChangeComplete.js";import{useRovingFocus as D}from"./useRovingFocus.js";import{jsx as f}from"react/jsx-runtime";var M='[role^="menuitem"]:not([data-disabled])',k="data-skdx-menu-branch",H=150,[I,T]=y("MenuSub");function O({family:t,children:r,open:p,defaultOpen:n=!1,onOpenChange:m,onOpenChangeComplete:i}){let l=o.useRef(null),e=o.useRef(null),a=o.useRef(void 0),[d=!1,u]=N({prop:p,defaultProp:n,onChange:m});L(d,e,i),o.useEffect(()=>()=>clearTimeout(a.current),[]);let c=o.useCallback(()=>{clearTimeout(a.current),u(!0)},[u]),R=o.useCallback(()=>{clearTimeout(a.current),u(!1)},[u]),S=o.useCallback(()=>{clearTimeout(a.current),a.current=setTimeout(()=>u(!1),H)},[u]);return f(h,{children:f(I,{family:t,open:d,openNow:c,closeNow:R,scheduleClose:S,triggerRef:l,contentRef:e,contentId:o.useId(),children:r})})}O.displayName="MenuSub";var A=o.forwardRef(({disabled:t,...r},p)=>{let n=T("MenuSubTrigger"),m=b(p,n.triggerRef),i=P(),l=()=>{n.openNow(),requestAnimationFrame(()=>{let e=n.contentRef.current;(e?.querySelector(M)??e)?.focus()})};return f(E,{asChild:!0,children:f(x.div,{role:"menuitem","aria-haspopup":"menu","aria-expanded":n.open,"aria-controls":n.contentId,"data-state":n.open?"open":"closed","data-disabled":t?"":void 0,"aria-disabled":t||void 0,tabIndex:t?void 0:-1,...r,...C(n.family,"sub-trigger",r.className),ref:m,onClick:s(r.onClick,()=>{t||l()}),onKeyDown:s(r.onKeyDown,e=>{if(t)return;let a=g(e.key,e.currentTarget,i);["ArrowRight","Enter"," "].includes(a)&&(e.preventDefault(),e.stopPropagation(),l())}),onPointerEnter:s(r.onPointerEnter,e=>{t||(e.currentTarget.focus(),n.openNow())}),onPointerLeave:s(r.onPointerLeave,()=>{t||n.scheduleClose()})})})});A.displayName="MenuSubTrigger";var K=o.forwardRef(({forceMount:t,loop:r=!0,side:p="end",align:n="start",sideOffset:m=0,...i},l)=>{let e=T("MenuSubContent"),a=b(l,e.contentRef),d=P(),u=D({orientation:"vertical",loop:r,itemSelector:M,typeahead:!0});return t||e.open?f(w,{[k]:"",children:f(v,{role:"menu","aria-orientation":"vertical",id:e.contentId,"data-state":e.open?"open":"closed",tabIndex:-1,side:p,align:n,sideOffset:m,...i,...C(e.family,"sub-content",i.className),ref:a,onKeyDown:s(i.onKeyDown,c=>{let R=g(c.key,c.currentTarget,d);R==="ArrowLeft"||R==="Escape"?(c.preventDefault(),e.closeNow(),e.triggerRef.current?.focus()):u(c),c.key!=="Tab"&&c.stopPropagation()}),onPointerEnter:s(i.onPointerEnter,e.openNow),onPointerLeave:s(i.onPointerLeave,e.scheduleClose)})}):null});K.displayName="MenuSubContent";export{k as MENU_BRANCH_ATTRIBUTE,O as MenuSub,K as MenuSubContent,A as MenuSubTrigger};
+import*as o from"react";import{useComposedRefs as R}from"./composeRefs.js";import{createSafeContext as T}from"./createContext.js";import{directionalKey as b,useDirection as S,usePortalledDirection as h}from"./direction.js";import{skdxPart as P}from"./part.js";import{PopperAnchor as v,PopperContent as E,PopperRoot as w}from"./popper.js";import{Portal as x}from"./portal.js";import{composeEventHandlers as s,Primitive as D}from"./primitive.js";import{useControllableState as N}from"./useControllableState.js";import{useOpenChangeComplete as L}from"./useOpenChangeComplete.js";import{useRovingFocus as I}from"./useRovingFocus.js";import{jsx as d}from"react/jsx-runtime";var C='[role^="menuitem"]',k="data-skdx-menu-branch",O=150,[H,M]=T("MenuSub");function A({family:r,children:f,open:a,defaultOpen:p=!1,onOpenChange:n,onOpenChangeComplete:i}){let m=o.useRef(null),e=o.useRef(null),t=o.useRef(void 0),[u=!1,l]=N({prop:a,defaultProp:p,onChange:n});L(u,e,i),o.useEffect(()=>()=>clearTimeout(t.current),[]);let c=o.useCallback(()=>{clearTimeout(t.current),l(!0)},[l]),g=o.useCallback(()=>{clearTimeout(t.current),l(!1)},[l]),y=o.useCallback(()=>{clearTimeout(t.current),t.current=setTimeout(()=>l(!1),O)},[l]);return d(w,{children:d(H,{family:r,open:u,openNow:c,closeNow:g,scheduleClose:y,triggerRef:m,contentRef:e,contentId:o.useId(),triggerId:o.useId(),children:f})})}A.displayName="MenuSub";var K=o.forwardRef(({disabled:r,textValue:f,...a},p)=>{let n=M("MenuSubTrigger"),i=R(p,n.triggerRef),m=S(),e=()=>{n.openNow(),requestAnimationFrame(()=>{let t=n.contentRef.current;(t?.querySelector(C)??t)?.focus({preventScroll:!0})})};return d(v,{asChild:!0,children:d(D.div,{role:"menuitem",id:n.triggerId,"aria-haspopup":"menu","aria-expanded":n.open,"aria-controls":n.contentId,"data-state":n.open?"open":"closed","data-disabled":r?"":void 0,"data-text-value":f,"aria-disabled":r||void 0,tabIndex:-1,...a,...P(n.family,"sub-trigger",a.className),ref:i,onClick:s(a.onClick,()=>{r||e()}),onKeyDown:s(a.onKeyDown,t=>{if(r)return;let u=b(t.key,t.currentTarget,m);["ArrowRight","Enter"," "].includes(u)&&(t.preventDefault(),t.stopPropagation(),e())}),onPointerEnter:s(a.onPointerEnter,t=>{r||(t.currentTarget.focus(),n.openNow())}),onPointerLeave:s(a.onPointerLeave,()=>{r||n.scheduleClose()})})})});K.displayName="MenuSubTrigger";var _=o.forwardRef(({forceMount:r,loop:f=!0,side:a="end",align:p="start",sideOffset:n=0,...i},m)=>{let e=M("MenuSubContent"),t=R(m,e.contentRef),u=h(e.triggerRef),l=I({orientation:"vertical",loop:f,itemSelector:C,typeahead:!0,includeDisabled:!0});return r||e.open?d(x,{[k]:"",children:d(E,{role:"menu","aria-orientation":"vertical",dir:u,"aria-labelledby":i["aria-label"]===void 0?e.triggerId:void 0,id:e.contentId,"data-state":e.open?"open":"closed",tabIndex:-1,side:a,align:p,sideOffset:n,...i,...P(e.family,"sub-content",i.className),ref:t,onKeyDown:s(i.onKeyDown,c=>{let g=b(c.key,c.currentTarget,u);g==="ArrowLeft"||g==="Escape"?(c.preventDefault(),e.closeNow(),e.triggerRef.current?.focus()):l(c),c.key!=="Tab"&&c.stopPropagation()}),onPointerEnter:s(i.onPointerEnter,e.openNow),onPointerLeave:s(i.onPointerLeave,e.scheduleClose)})}):null});_.displayName="MenuSubContent";export{k as MENU_BRANCH_ATTRIBUTE,A as MenuSub,_ as MenuSubContent,K as MenuSubTrigger};

package/dist/utils/numberFormat.d.cts

@@ -1,13 +1,7 @@
 /**
- * `Intl.NumberFormat` display/parse pair for NumberField.
- *
- * With neither `locale` nor `formatOptions`, formatting is off and the value
- * round-trips through `String`/`Number` exactly as it did before — the
- * formatted path is opt-in.
- *
- * Percent follows `Intl.NumberFormat` semantics: the value is the *fraction*,
- * so `0.5` displays as `50%` and typing `50%` parses back to `0.5`. `min`,
- * `max` and `step` therefore also operate on the fraction.
+ * `Intl.NumberFormat` display/parse pair for NumberField. Without `locale`
+ * or `formatOptions`, formatting is off. Percent values are fractions:
+ * `0.5` displays as `50%`; `min`, `max`, `step` operate on fractions.
  */
 export declare function formatNumberValue(value: number, locale?: string, formatOptions?: Intl.NumberFormatOptions): string;
 /**

package/dist/utils/numberFormat.d.ts

@@ -1,13 +1,7 @@
 /**
- * `Intl.NumberFormat` display/parse pair for NumberField.
- *
- * With neither `locale` nor `formatOptions`, formatting is off and the value
- * round-trips through `String`/`Number` exactly as it did before — the
- * formatted path is opt-in.
- *
- * Percent follows `Intl.NumberFormat` semantics: the value is the *fraction*,
- * so `0.5` displays as `50%` and typing `50%` parses back to `0.5`. `min`,
- * `max` and `step` therefore also operate on the fraction.
+ * `Intl.NumberFormat` display/parse pair for NumberField. Without `locale`
+ * or `formatOptions`, formatting is off. Percent values are fractions:
+ * `0.5` displays as `50%`; `min`, `max`, `step` operate on fractions.
  */
 export declare function formatNumberValue(value: number, locale?: string, formatOptions?: Intl.NumberFormatOptions): string;
 /**

package/dist/utils/part.d.cts

@@ -1,57 +1,3 @@
-/**
- * The styling hook every part of every component emits.
- *
- * Why this exists
- * ---------------
- * The React package is headless: importing it must never pull in CSS, and it
- * still doesn't — this file emits *class names*, not styles. A class name with
- * no stylesheet behind it is inert, so `@skdx/react` on its own renders
- * exactly the markup it always did, plus an attribute a stylesheet may or may
- * not match. That is the whole trade: components stay unstyled, but they stop
- * being *unstylable* without the consumer inventing their own class for every
- * part.
- *
- * Before this, 85% of the package's DOM had no stable selector at all. A
- * consumer wanting to style an accordion trigger had to either wrap it in
- * their own element or reach in with a structural selector like
- * `[data-state] > button`, which breaks the moment the anatomy changes. The 15%
- * that *were* addressable used ad-hoc `data-skdx-accordion-trigger` attributes,
- * added case by case, with no rule for when a part earned one.
- *
- * The contract this emits
- * -----------------------
- * For a root part:
- *
- * ```html
- * <button class="skdx-button" data-skdx-component="button" data-part="root">
- * ```
- *
- * For a non-root part:
- *
- * ```html
- * <span class="skdx-button__icon" data-part="icon">
- * ```
- *
- * Three hooks, because each answers a different question and no one of them
- * answers all three:
- *
- *   - `class` is what a stylesheet matches. `:where(.skdx-button)` gives
- *     `@skdx/skins` zero specificity, so a consumer's own single class beats
- *     it without `!important`.
- *   - `data-skdx-component` identifies the *family* on the root only, so
- *     `[data-skdx-component="button"]` finds every button regardless of which
- *     part classes a consumer has since overridden.
- *   - `data-part` names the part in the same vocabulary the Web Components
- *     package already exposes through `::part()`, which is what keeps a skin
- *     written against React reusable against `<skdx-button>`.
- *
- * Part names are not invented here. They come from each family's existing
- * `styling.cssParts` in `@skdx/shared` — the vocabulary
- * `packages/web-components` already ships and `scripts/contract-parts.mjs`
- * already enforces — so the two frameworks cannot drift apart by construction.
- *
- * @see docs/architecture/component-styling-contract.md
- */
 /** The attribute bag {@link skdxPart} returns, spread onto a part's root element. */
 export interface SkdxPartAttributes {
     className: string;