@skdx/vue 0.27.0 → 0.29.0

package/dist/utils/liveAnnouncer.d.cts

@@ -1,36 +1,15 @@
-/** Which of the two singleton live regions a message is routed to. */
-export type AnnouncePoliteness = 'polite' | 'assertive';
+import { type AnnouncePoliteness } from './announcer.cjs';
+export { ANNOUNCE_DEBOUNCE_MS, type AnnouncePoliteness } from './announcer.cjs';
 /**
- * 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.
- */
-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 template — 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 a message to screen readers via a debounced aria-live region (polite or assertive), debounced to the last message of a burst; a repeat is re-announced, empty text is skipped.
  * @example
  * ```ts
- * announce(`${results.length} results available`);
- * announce('Upload failed', 'assertive');
+ * announce(`${results.length} results`);
+ * announce('Failed', 'assertive');
  * ```
  */
 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 the live region(s); pass `politeness` to clear only one. */
 export declare function clearAnnouncements(politeness?: AnnouncePoliteness): void;
 /** What {@link useLiveAnnouncer} returns. */
 export interface LiveAnnouncerApi {
@@ -40,14 +19,11 @@ export interface LiveAnnouncerApi {
     clear: (politeness?: AnnouncePoliteness) => void;
 }
 /**
- * Composable form of {@link announce} — returns a stable `{ announce, clear }`
- * pair. There is no per-component state to set up or tear down (the regions
- * are process-wide singletons), so it is safe to call outside `setup()` too.
- *
+ * Composable form of {@link announce}; returns a stable `{ announce, clear }` pair safe to call outside `setup()`.
  * @example
  * ```ts
  * const { announce } = useLiveAnnouncer();
- * watch(count, (n) => announce(`${n} results available`));
+ * watch(count, (n) => announce(`${n} results`));
  * ```
  */
 export declare function useLiveAnnouncer(): LiveAnnouncerApi;

package/dist/utils/liveAnnouncer.d.ts

@@ -1,36 +1,15 @@
-/** Which of the two singleton live regions a message is routed to. */
-export type AnnouncePoliteness = 'polite' | 'assertive';
+import { type AnnouncePoliteness } from './announcer.js';
+export { ANNOUNCE_DEBOUNCE_MS, type AnnouncePoliteness } from './announcer.js';
 /**
- * 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.
- */
-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 template — 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 a message to screen readers via a debounced aria-live region (polite or assertive), debounced to the last message of a burst; a repeat is re-announced, empty text is skipped.
  * @example
  * ```ts
- * announce(`${results.length} results available`);
- * announce('Upload failed', 'assertive');
+ * announce(`${results.length} results`);
+ * announce('Failed', 'assertive');
  * ```
  */
 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 the live region(s); pass `politeness` to clear only one. */
 export declare function clearAnnouncements(politeness?: AnnouncePoliteness): void;
 /** What {@link useLiveAnnouncer} returns. */
 export interface LiveAnnouncerApi {
@@ -40,14 +19,11 @@ export interface LiveAnnouncerApi {
     clear: (politeness?: AnnouncePoliteness) => void;
 }
 /**
- * Composable form of {@link announce} — returns a stable `{ announce, clear }`
- * pair. There is no per-component state to set up or tear down (the regions
- * are process-wide singletons), so it is safe to call outside `setup()` too.
- *
+ * Composable form of {@link announce}; returns a stable `{ announce, clear }` pair safe to call outside `setup()`.
  * @example
  * ```ts
  * const { announce } = useLiveAnnouncer();
- * watch(count, (n) => announce(`${n} results available`));
+ * watch(count, (n) => announce(`${n} results`));
  * ```
  */
 export declare function useLiveAnnouncer(): LiveAnnouncerApi;

package/dist/utils/liveAnnouncer.js

@@ -1 +1 @@
-var e=150,t=/* @__PURE__ */new Map;function n(e,n="polite"){if(typeof document>"u")return;const o=e.trim();if(!o)return;const i=function(e){const n=t.get(e);if(n?.node.isConnected)return n;const o=document.createElement("div");o.setAttribute("aria-live",e),o.setAttribute("aria-atomic","true"),o.setAttribute("data-skdx-live-announcer",e),o.style.cssText="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal;",document.body.appendChild(o);const i={node:o,timer:void 0};return t.set(e,i),i}(n);clearTimeout(i.timer),i.timer=setTimeout(()=>{i.timer=void 0,i.node.textContent!==o&&(i.node.textContent=o)},150)}function o(e){for(const[n,o]of t)void 0!==e&&n!==e||(clearTimeout(o.timer),o.timer=void 0,o.node.textContent="")}var i={announce:n,clear:o};function r(){return i}export{e as ANNOUNCE_DEBOUNCE_MS,n as announce,o as clearAnnouncements,r as useLiveAnnouncer};
+import{ANNOUNCE_DEBOUNCE_MS as n,Announcer as e}from"./announcer.js";var o=new e;function c(n,e="polite"){o.announce(n,e),typeof document<"u"&&function(){const n=document.querySelectorAll("dialog[open]"),e=n[n.length-1]??document.body;for(const n of document.querySelectorAll("[data-skdx-live-announcer]"))n.parentElement!==e&&e.append(n)}()}function t(n){o.clear(n)}var a={announce:c,clear:t};function u(){return a}export{n as ANNOUNCE_DEBOUNCE_MS,c as announce,t as clearAnnouncements,u as useLiveAnnouncer};

package/dist/utils/measure-auto-resize.cjs

@@ -0,0 +1 @@
+function a(i,s,d){const t=getComputedStyle(i),e=r=>parseFloat(r)||0,g=e(t.borderTopWidth)+e(t.borderBottomWidth),h=e(t.paddingTop)+e(t.paddingBottom),l=t.boxSizing==="border-box",n=e(t.lineHeight),u=r=>r*n+(l?h+g:0);i.style.height="auto";let o=i.scrollHeight+(l?g:-h);return d!=null&&n>0&&(o=Math.max(o,u(d))),s!=null&&n>0&&(o=Math.min(o,u(s))),o}exports.measureAutoResizeHeight=a;

package/dist/utils/measure-auto-resize.d.cts

@@ -0,0 +1,5 @@
+/**
+ * Returns the pixel height an auto-resizing `<textarea>` should be given so it
+ * shows all of its content, floored at `minRows` and capped to `maxRows`.
+ */
+export declare function measureAutoResizeHeight(node: HTMLTextAreaElement, maxRows?: number, minRows?: number): number;

package/dist/utils/measure-auto-resize.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns the pixel height an auto-resizing `<textarea>` should be given so it
+ * shows all of its content, floored at `minRows` and capped to `maxRows`.
+ */
+export declare function measureAutoResizeHeight(node: HTMLTextAreaElement, maxRows?: number, minRows?: number): number;

package/dist/utils/measure-auto-resize.js

@@ -0,0 +1 @@
+function t(t,e,o){const i=getComputedStyle(t),r=t=>parseFloat(t)||0,l=r(i.borderTopWidth)+r(i.borderBottomWidth),n=r(i.paddingTop)+r(i.paddingBottom),a="border-box"===i.boxSizing,d=r(i.lineHeight),h=t=>t*d+(a?n+l:0);t.style.height="auto";let g=t.scrollHeight+(a?l:-n);return null!=o&&d>0&&(g=Math.max(g,h(o))),null!=e&&d>0&&(g=Math.min(g,h(e))),g}export{t as measureAutoResizeHeight};

package/dist/utils/mentions.cjs

@@ -0,0 +1,2 @@
+var a=/[\p{L}\p{N}_]/u;function h(t){return t===void 0?["@"]:typeof t=="string"?[...t]:t}function d(t,e,i={}){const{allowedSpaces:n=0,requireWordBoundary:o=!0}=i,c=h(i.triggers),u=Math.max(0,Math.min(e,t.length));let f=0;for(let r=u-1;r>=0;r--){const s=t[r];if(s===`
+`||s==="\r")return null;if(c.includes(s)){const l=r>0?t[r-1]:"";return o&&l!==""&&a.test(l)?null:{trigger:s,query:t.slice(r+1,u),start:r,end:u}}if(/\s/.test(s)&&++f>n)return null}return null}function g(t,e){return t!==null&&t.start===e}function p(t,e,i,n=!0){const o=t.slice(e.end),c=n&&!/^\s/.test(o)?" ":"";return{value:t.slice(0,e.start)+i+c+o,caret:e.start+i.length+c.length}}function M(t,e){return{getBoundingClientRect:()=>{const n=t();return{x:n.left,y:n.top,top:n.top,left:n.left,bottom:n.top+n.height,right:n.left,width:0,height:n.height}},contextElement:e}}exports.caretAnchor=M;exports.findMentionToken=d;exports.insertMention=p;exports.isMentionDismissed=g;

package/dist/utils/mentions.d.cts

@@ -0,0 +1,116 @@
+/** The trigger character a Mentions field uses when it configures none. */
+export declare const DEFAULT_MENTION_TRIGGER = "@";
+/** The mention being typed: its trigger character, the text after it, and the range the pair occupies. */
+export interface MentionToken {
+    /** The trigger character that opened the token. */
+    trigger: string;
+    /** Text between the trigger character and the caret — what the item list is filtered by. */
+    query: string;
+    /** Offset of the trigger character in the field value. */
+    start: number;
+    /** Offset just past the query; always the caret offset the token was found at. */
+    end: number;
+}
+/** Where a trigger character is allowed to open a token, and what abandons one. */
+export interface MentionTokenOptions {
+    /**
+     * Trigger characters, either as an array or as one string read a character at a time.
+     * @defaultValue `'@'`
+     */
+    triggers?: string | readonly string[] | undefined;
+    /**
+     * How many spaces a query may contain before the token is abandoned.
+     * @defaultValue 0
+     */
+    allowedSpaces?: number | undefined;
+    /**
+     * Whether a trigger opens a token only at the start of the value or after a non-word character, so `user@example` is left alone.
+     * @defaultValue true
+     */
+    requireWordBoundary?: boolean | undefined;
+}
+/**
+ * The mention token the caret sits in, found by scanning backwards from the
+ * caret to the nearest trigger character.
+ *
+ * Returns `null` for every condition that ends a mention: no trigger before
+ * the caret, a line break between them, more spaces than `allowedSpaces`, a
+ * trigger that fails the word-boundary rule, or a caret that has moved out of
+ * the token. There is no token to cancel — call this again after every value,
+ * caret or selection change and the answer is the whole state.
+ *
+ * @param value the field's full text
+ * @param caret the caret offset, clamped into the value
+ * @param options the trigger and boundary rules
+ */
+export declare function findMentionToken(value: string, caret: number, options?: MentionTokenOptions): MentionToken | null;
+/**
+ * Whether an Escape recorded at `dismissedAt` still suppresses this token.
+ *
+ * Escape closes the popup while the token is still syntactically alive, so the
+ * offset of the dismissed trigger is held until {@link findMentionToken}
+ * returns `null` — which is the adapter's cue to forget it.
+ *
+ * @param token the token found for the current caret, or `null`
+ * @param dismissedAt the `start` of the token Escape closed, or `null`
+ */
+export declare function isMentionDismissed(token: MentionToken | null, dismissedAt: number | null): boolean;
+/** The field value and caret offset an insertion produces. */
+export interface MentionInsertion {
+    /** The whole field value with the token's range replaced. */
+    value: string;
+    /** Caret offset just past the inserted text, and past the appended space when one was added. */
+    caret: number;
+}
+/**
+ * Replaces a token's range with the serialized mention text.
+ *
+ * @param value the field value the token was found in
+ * @param token the token being replaced, from {@link findMentionToken}
+ * @param text the full replacement including the trigger character
+ * @param appendSpace whether a single space follows the mention, skipped when the value already continues with whitespace
+ */
+export declare function insertMention(value: string, token: MentionToken, text: string, appendSpace?: boolean): MentionInsertion;
+/** The caret's position in viewport coordinates, as an adapter measured it. */
+export interface CaretRect {
+    /** Distance in pixels from the viewport's top edge to the caret's top. */
+    top: number;
+    /** Distance in pixels from the viewport's left edge to the caret. */
+    left: number;
+    /** The caret's height in pixels, normally the field's computed line height. */
+    height: number;
+}
+/** The rectangle floating-ui reads off a positioning reference. */
+export interface AnchorRect {
+    x: number;
+    y: number;
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+}
+/** A positioning reference that is a rectangle rather than an element. */
+export interface VirtualAnchor {
+    getBoundingClientRect(): AnchorRect;
+    /** The element the rect lives inside, so floating-ui can observe ancestor scroll and resize. */
+    contextElement: Element;
+}
+/**
+ * Wraps a caret measurement as the zero-width virtual anchor the popup is
+ * positioned against.
+ *
+ * The measurement is re-read on every call, so one anchor survives a moved
+ * caret without being rebuilt, and `contextElement` is what lets floating-ui
+ * observe the ancestor scroll and resize that make it re-read.
+ *
+ * @param measure re-reads the caret rectangle, normally closing over a {@link MeasureCaretRect}, its field and the offset
+ * @param contextElement the field the caret sits in
+ */
+export declare function caretAnchor(measure: () => CaretRect, contextElement: Element): VirtualAnchor;
+/**
+ * The caret measurement each adapter implements with its own DOM work: the
+ * viewport rectangle of the caret at `offset` inside `field`.
+ */
+export type MeasureCaretRect = (field: HTMLTextAreaElement | HTMLInputElement, offset: number) => CaretRect;

package/dist/utils/mentions.d.ts

@@ -0,0 +1,116 @@
+/** The trigger character a Mentions field uses when it configures none. */
+export declare const DEFAULT_MENTION_TRIGGER = "@";
+/** The mention being typed: its trigger character, the text after it, and the range the pair occupies. */
+export interface MentionToken {
+    /** The trigger character that opened the token. */
+    trigger: string;
+    /** Text between the trigger character and the caret — what the item list is filtered by. */
+    query: string;
+    /** Offset of the trigger character in the field value. */
+    start: number;
+    /** Offset just past the query; always the caret offset the token was found at. */
+    end: number;
+}
+/** Where a trigger character is allowed to open a token, and what abandons one. */
+export interface MentionTokenOptions {
+    /**
+     * Trigger characters, either as an array or as one string read a character at a time.
+     * @defaultValue `'@'`
+     */
+    triggers?: string | readonly string[] | undefined;
+    /**
+     * How many spaces a query may contain before the token is abandoned.
+     * @defaultValue 0
+     */
+    allowedSpaces?: number | undefined;
+    /**
+     * Whether a trigger opens a token only at the start of the value or after a non-word character, so `user@example` is left alone.
+     * @defaultValue true
+     */
+    requireWordBoundary?: boolean | undefined;
+}
+/**
+ * The mention token the caret sits in, found by scanning backwards from the
+ * caret to the nearest trigger character.
+ *
+ * Returns `null` for every condition that ends a mention: no trigger before
+ * the caret, a line break between them, more spaces than `allowedSpaces`, a
+ * trigger that fails the word-boundary rule, or a caret that has moved out of
+ * the token. There is no token to cancel — call this again after every value,
+ * caret or selection change and the answer is the whole state.
+ *
+ * @param value the field's full text
+ * @param caret the caret offset, clamped into the value
+ * @param options the trigger and boundary rules
+ */
+export declare function findMentionToken(value: string, caret: number, options?: MentionTokenOptions): MentionToken | null;
+/**
+ * Whether an Escape recorded at `dismissedAt` still suppresses this token.
+ *
+ * Escape closes the popup while the token is still syntactically alive, so the
+ * offset of the dismissed trigger is held until {@link findMentionToken}
+ * returns `null` — which is the adapter's cue to forget it.
+ *
+ * @param token the token found for the current caret, or `null`
+ * @param dismissedAt the `start` of the token Escape closed, or `null`
+ */
+export declare function isMentionDismissed(token: MentionToken | null, dismissedAt: number | null): boolean;
+/** The field value and caret offset an insertion produces. */
+export interface MentionInsertion {
+    /** The whole field value with the token's range replaced. */
+    value: string;
+    /** Caret offset just past the inserted text, and past the appended space when one was added. */
+    caret: number;
+}
+/**
+ * Replaces a token's range with the serialized mention text.
+ *
+ * @param value the field value the token was found in
+ * @param token the token being replaced, from {@link findMentionToken}
+ * @param text the full replacement including the trigger character
+ * @param appendSpace whether a single space follows the mention, skipped when the value already continues with whitespace
+ */
+export declare function insertMention(value: string, token: MentionToken, text: string, appendSpace?: boolean): MentionInsertion;
+/** The caret's position in viewport coordinates, as an adapter measured it. */
+export interface CaretRect {
+    /** Distance in pixels from the viewport's top edge to the caret's top. */
+    top: number;
+    /** Distance in pixels from the viewport's left edge to the caret. */
+    left: number;
+    /** The caret's height in pixels, normally the field's computed line height. */
+    height: number;
+}
+/** The rectangle floating-ui reads off a positioning reference. */
+export interface AnchorRect {
+    x: number;
+    y: number;
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+}
+/** A positioning reference that is a rectangle rather than an element. */
+export interface VirtualAnchor {
+    getBoundingClientRect(): AnchorRect;
+    /** The element the rect lives inside, so floating-ui can observe ancestor scroll and resize. */
+    contextElement: Element;
+}
+/**
+ * Wraps a caret measurement as the zero-width virtual anchor the popup is
+ * positioned against.
+ *
+ * The measurement is re-read on every call, so one anchor survives a moved
+ * caret without being rebuilt, and `contextElement` is what lets floating-ui
+ * observe the ancestor scroll and resize that make it re-read.
+ *
+ * @param measure re-reads the caret rectangle, normally closing over a {@link MeasureCaretRect}, its field and the offset
+ * @param contextElement the field the caret sits in
+ */
+export declare function caretAnchor(measure: () => CaretRect, contextElement: Element): VirtualAnchor;
+/**
+ * The caret measurement each adapter implements with its own DOM work: the
+ * viewport rectangle of the caret at `offset` inside `field`.
+ */
+export type MeasureCaretRect = (field: HTMLTextAreaElement | HTMLInputElement, offset: number) => CaretRect;

package/dist/utils/mentions.js

@@ -0,0 +1 @@
+var t=/[\p{L}\p{N}_]/u;function e(e,n,r={}){const{allowedSpaces:i=0,requireWordBoundary:o=!0}=r,s=function(t){return void 0===t?["@"]:"string"==typeof t?[...t]:t}(r.triggers),l=Math.max(0,Math.min(n,e.length));let u=0;for(let n=l-1;n>=0;n--){const r=e[n];if("\n"===r||"\r"===r)return null;if(s.includes(r)){const i=n>0?e[n-1]:"";return o&&""!==i&&t.test(i)?null:{trigger:r,query:e.slice(n+1,l),start:n,end:l}}if(/\s/.test(r)&&++u>i)return null}return null}function n(t,e){return null!==t&&t.start===e}function r(t,e,n,r=!0){const i=t.slice(e.end),o=r&&!/^\s/.test(i)?" ":"";return{value:t.slice(0,e.start)+n+o+i,caret:e.start+n.length+o.length}}function i(t,e){return{getBoundingClientRect:()=>{const e=t();return{x:e.left,y:e.top,top:e.top,left:e.left,bottom:e.top+e.height,right:e.left,width:0,height:e.height}},contextElement:e}}export{i as caretAnchor,e as findMentionToken,r as insertMention,n as isMentionDismissed};

package/dist/utils/menuGroup.cjs

@@ -0,0 +1 @@
+const r=require("./id.cjs");let e=require("vue");var n=Symbol("skdx-menu-group-context");function s(u){const t=r.nextId("menu-group-label"),o=(0,e.ref)(!1),a=(0,e.ref)(!1);return(0,e.onMounted)(()=>{a.value=!0}),(0,e.provide)(n,{labelId:t,setHasLabel:l=>{o.value=l}}),(0,e.computed)(()=>o.value||!a.value&&u()?t:void 0)}function d(){const u=(0,e.inject)(n,void 0);if(u)return u.setHasLabel(!0),(0,e.onUnmounted)(()=>u.setHasLabel(!1)),u.labelId}exports.MENU_GROUP_CONTEXT=n;exports.useMenuGroupLabel=s;exports.useMenuLabelId=d;

package/dist/utils/menuGroup.d.cts

@@ -0,0 +1,17 @@
+import { type ComputedRef, type InjectionKey } from 'vue';
+/**
+ * Naming for role="group" containers (Group/RadioGroup) by their Label.
+ * Label registers on mount/clears on unmount. Allows group to withhold
+ * aria-labelledby when no Label rendered.
+ */
+/** @internal What a menu Group/RadioGroup provides so a nested Label can register and take the labelling id. */
+export interface MenuGroupContext {
+    labelId: string;
+    setHasLabel(hasLabel: boolean): void;
+}
+/** @internal Injection key a menu Group/RadioGroup provides — shared by Menu and Menubar. */
+export declare const MENU_GROUP_CONTEXT: InjectionKey<MenuGroupContext>;
+/** @internal Mints a Label id and provides registration context; returns `aria-labelledby`, undefined until registered. */
+export declare function useMenuGroupLabel(declaresLabel: () => boolean): ComputedRef<string | undefined>;
+/** @internal Id for Label to render, registering on mount/unmount; `undefined` when standalone. */
+export declare function useMenuLabelId(): string | undefined;

package/dist/utils/menuGroup.d.ts

@@ -0,0 +1,17 @@
+import { type ComputedRef, type InjectionKey } from 'vue';
+/**
+ * Naming for role="group" containers (Group/RadioGroup) by their Label.
+ * Label registers on mount/clears on unmount. Allows group to withhold
+ * aria-labelledby when no Label rendered.
+ */
+/** @internal What a menu Group/RadioGroup provides so a nested Label can register and take the labelling id. */
+export interface MenuGroupContext {
+    labelId: string;
+    setHasLabel(hasLabel: boolean): void;
+}
+/** @internal Injection key a menu Group/RadioGroup provides — shared by Menu and Menubar. */
+export declare const MENU_GROUP_CONTEXT: InjectionKey<MenuGroupContext>;
+/** @internal Mints a Label id and provides registration context; returns `aria-labelledby`, undefined until registered. */
+export declare function useMenuGroupLabel(declaresLabel: () => boolean): ComputedRef<string | undefined>;
+/** @internal Id for Label to render, registering on mount/unmount; `undefined` when standalone. */
+export declare function useMenuLabelId(): string | undefined;

package/dist/utils/menuGroup.js

@@ -0,0 +1 @@
+import{nextId as e}from"./id.js";import{computed as a,inject as o,onMounted as s,onUnmounted as u,provide as n,ref as t}from"vue";var l=/* @__PURE__ */Symbol("skdx-menu-group-context");function r(o){const u=e("menu-group-label"),r=t(!1),d=t(!1);return s(()=>{d.value=!0}),n(l,{labelId:u,setHasLabel:e=>{r.value=e}}),a(()=>r.value||!d.value&&o()?u:void 0)}function d(){const e=o(l,void 0);if(e)return e.setHasLabel(!0),u(()=>e.setHasLabel(!1)),e.labelId}export{l as MENU_GROUP_CONTEXT,r as useMenuGroupLabel,d as useMenuLabelId};

package/dist/utils/menuSub.cjs

@@ -1 +1 @@
-const e=require("./id.cjs");var n='[role^="menuitem"]:not([data-disabled])',t=Symbol("skdx-menu-sub-context");function u(){return e.nextId("menu-sub-content")}exports.ITEM_SELECTOR=n;exports.MENU_SUB_CONTEXT=t;exports.nextMenuSubContentId=u;
+const n=require("./id.cjs");let u=require("vue");var t='[role^="menuitem"]',r=Symbol("skdx-menu-sub-context"),e=Symbol("skdx-menu-family");function i(){return(0,u.inject)(e,void 0)?.family??"menu"}function M(){return(0,u.inject)(e,void 0)?.label}function m(){return n.nextId("menu-sub-content")}function l(){return n.nextId("menu-sub-trigger")}exports.ITEM_SELECTOR=t;exports.MENU_FAMILY_CONTEXT=e;exports.MENU_SUB_CONTEXT=r;exports.nextMenuSubContentId=m;exports.nextMenuSubTriggerId=l;exports.useMenuFamily=i;exports.useMenuFamilyLabel=M;

package/dist/utils/menuSub.d.cts

@@ -1,42 +1,15 @@
-import type { InjectionKey, Ref } from 'vue';
+import { type Component, type InjectionKey, type Ref } from 'vue';
 /**
- * Nested-submenu layer shared by DropdownMenu, ContextMenu and Menubar. The
- * three families differ in how a *root* menu opens, but a submenu's own
- * behaviour is identical in all of them, so each family's barrel re-exports
- * `MenuSub` / `MenuSubTrigger` / `MenuSubContent` under its own `Skdx…Sub…`
- * names, the same way it re-exports the shared `useMenuItem` wiring.
- *
- * The submenu reuses the existing popper layer: `MenuSub` opens a nested
- * `PopperRoot` whose anchor is the SubTrigger, so no new positioning code is
- * involved. `MenuSubContent` deliberately renders inline inside the parent
- * menu's DOM rather than in its own portal, which is what makes the parent's
- * existing outside-pointer-down dismissal treat clicks in a submenu as
- * "inside", and what keeps submenu items out of the parent's typeahead while
- * the submenu is closed (they simply are not mounted).
+ * Nested submenu shared by Menu and Menubar, rendered inline (not portaled) so parent dismissal/typeahead keep working.
  * @internal
  */
-/** @internal CSS selector matching focusable, non-disabled items within a submenu panel. */
-export declare const ITEM_SELECTOR = "[role^=\"menuitem\"]:not([data-disabled])";
-/**
- * @internal Grace period (ms) between the pointer leaving the
- * SubTrigger/SubContent pair and the submenu closing, so a diagonal sweep
- * from the trigger to the panel doesn't shut the submenu mid-travel.
- */
+/** @internal Menu items including disabled (APG: disabled items must be focusable for discovery). */
+export declare const ITEM_SELECTOR = "[role^=\"menuitem\"]";
+/** @internal Delay (ms) before submenu closes after pointer leaves, preventing accidental close during trigger-to-panel sweep. */
 export declare const CLOSE_DELAY_MS = 150;
 /** @internal Shared submenu state a `MenuSub` provides to its SubTrigger and SubContent. */
 export interface MenuSubContext {
-    /**
-     * The family whose submenu this is, so the two shared parts can name
-     * themselves.
-     *
-     * These parts are one implementation re-exported under three names, so they
-     * cannot hard-code a family — and with no family they emitted no class at
-     * all, which meant `.skdx-dropdown-menu__sub-trigger` and every
-     * `.skdx-*__sub-content` rule matched nothing. Every submenu in the library
-     * rendered as unstyled `<div>`s: no panel, no border, no padding, no
-     * highlight on the row that opens it. React hit exactly this and fixed it the
-     * same way; see `packages/react/src/utils/menuSub.tsx`.
-     */
+    /** Family name so shared parts emit the correct CSS class names. */
     family: string;
     open: Readonly<Ref<boolean>>;
     /** Opens immediately, cancelling any pending close. */
@@ -48,8 +21,25 @@ export interface MenuSubContext {
     triggerRef: Ref<HTMLElement | null>;
     contentRef: Ref<HTMLElement | null>;
     contentId: string;
+    /** SubTrigger id, wired to SubContent's `aria-labelledby` (`aria-controls` alone left the panel unnamed). */
+    triggerId: string;
 }
 /** @internal Injection key a `MenuSub` provides so its SubTrigger and SubContent share open state and element refs. */
 export declare const MENU_SUB_CONTEXT: InjectionKey<MenuSubContext>;
+/** @internal Which menu family the parts below a root belong to, so shared parts emit the right class names. */
+export interface MenuFamilyContext {
+    /** `'menu'` or `'menubar'`. */
+    family: string;
+    /** The family's Label component, which a Group looks for in its slot before mount. */
+    label: Component;
+}
+/** @internal Injection key a menu root provides so a nested `MenuSub` can read its family name. */
+export declare const MENU_FAMILY_CONTEXT: InjectionKey<MenuFamilyContext>;
+/** @internal The enclosing family's name; `menu` for a part rendered outside any root. */
+export declare function useMenuFamily(): string;
+/** @internal The enclosing family's Label component, which a Group looks for in its slot before mount. */
+export declare function useMenuFamilyLabel(): Component | undefined;
 /** @internal Generates a unique id for a submenu's content. */
 export declare function nextMenuSubContentId(): string;
+/** @internal Generates a unique id for a submenu's trigger, which its content names itself after. */
+export declare function nextMenuSubTriggerId(): string;

package/dist/utils/menuSub.d.ts

@@ -1,42 +1,15 @@
-import type { InjectionKey, Ref } from 'vue';
+import { type Component, type InjectionKey, type Ref } from 'vue';
 /**
- * Nested-submenu layer shared by DropdownMenu, ContextMenu and Menubar. The
- * three families differ in how a *root* menu opens, but a submenu's own
- * behaviour is identical in all of them, so each family's barrel re-exports
- * `MenuSub` / `MenuSubTrigger` / `MenuSubContent` under its own `Skdx…Sub…`
- * names, the same way it re-exports the shared `useMenuItem` wiring.
- *
- * The submenu reuses the existing popper layer: `MenuSub` opens a nested
- * `PopperRoot` whose anchor is the SubTrigger, so no new positioning code is
- * involved. `MenuSubContent` deliberately renders inline inside the parent
- * menu's DOM rather than in its own portal, which is what makes the parent's
- * existing outside-pointer-down dismissal treat clicks in a submenu as
- * "inside", and what keeps submenu items out of the parent's typeahead while
- * the submenu is closed (they simply are not mounted).
+ * Nested submenu shared by Menu and Menubar, rendered inline (not portaled) so parent dismissal/typeahead keep working.
  * @internal
  */
-/** @internal CSS selector matching focusable, non-disabled items within a submenu panel. */
-export declare const ITEM_SELECTOR = "[role^=\"menuitem\"]:not([data-disabled])";
-/**
- * @internal Grace period (ms) between the pointer leaving the
- * SubTrigger/SubContent pair and the submenu closing, so a diagonal sweep
- * from the trigger to the panel doesn't shut the submenu mid-travel.
- */
+/** @internal Menu items including disabled (APG: disabled items must be focusable for discovery). */
+export declare const ITEM_SELECTOR = "[role^=\"menuitem\"]";
+/** @internal Delay (ms) before submenu closes after pointer leaves, preventing accidental close during trigger-to-panel sweep. */
 export declare const CLOSE_DELAY_MS = 150;
 /** @internal Shared submenu state a `MenuSub` provides to its SubTrigger and SubContent. */
 export interface MenuSubContext {
-    /**
-     * The family whose submenu this is, so the two shared parts can name
-     * themselves.
-     *
-     * These parts are one implementation re-exported under three names, so they
-     * cannot hard-code a family — and with no family they emitted no class at
-     * all, which meant `.skdx-dropdown-menu__sub-trigger` and every
-     * `.skdx-*__sub-content` rule matched nothing. Every submenu in the library
-     * rendered as unstyled `<div>`s: no panel, no border, no padding, no
-     * highlight on the row that opens it. React hit exactly this and fixed it the
-     * same way; see `packages/react/src/utils/menuSub.tsx`.
-     */
+    /** Family name so shared parts emit the correct CSS class names. */
     family: string;
     open: Readonly<Ref<boolean>>;
     /** Opens immediately, cancelling any pending close. */
@@ -48,8 +21,25 @@ export interface MenuSubContext {
     triggerRef: Ref<HTMLElement | null>;
     contentRef: Ref<HTMLElement | null>;
     contentId: string;
+    /** SubTrigger id, wired to SubContent's `aria-labelledby` (`aria-controls` alone left the panel unnamed). */
+    triggerId: string;
 }
 /** @internal Injection key a `MenuSub` provides so its SubTrigger and SubContent share open state and element refs. */
 export declare const MENU_SUB_CONTEXT: InjectionKey<MenuSubContext>;
+/** @internal Which menu family the parts below a root belong to, so shared parts emit the right class names. */
+export interface MenuFamilyContext {
+    /** `'menu'` or `'menubar'`. */
+    family: string;
+    /** The family's Label component, which a Group looks for in its slot before mount. */
+    label: Component;
+}
+/** @internal Injection key a menu root provides so a nested `MenuSub` can read its family name. */
+export declare const MENU_FAMILY_CONTEXT: InjectionKey<MenuFamilyContext>;
+/** @internal The enclosing family's name; `menu` for a part rendered outside any root. */
+export declare function useMenuFamily(): string;
+/** @internal The enclosing family's Label component, which a Group looks for in its slot before mount. */
+export declare function useMenuFamilyLabel(): Component | undefined;
 /** @internal Generates a unique id for a submenu's content. */
 export declare function nextMenuSubContentId(): string;
+/** @internal Generates a unique id for a submenu's trigger, which its content names itself after. */
+export declare function nextMenuSubTriggerId(): string;

package/dist/utils/menuSub.js

@@ -1 +1 @@
-import{nextId as n}from"./id.js";var t='[role^="menuitem"]:not([data-disabled])',e=/* @__PURE__ */Symbol("skdx-menu-sub-context");function o(){return n("menu-sub-content")}export{t as ITEM_SELECTOR,e as MENU_SUB_CONTEXT,o as nextMenuSubContentId};
+import{nextId as e}from"./id.js";import{inject as n}from"vue";var u='[role^="menuitem"]',t=/* @__PURE__ */Symbol("skdx-menu-sub-context"),r=/* @__PURE__ */Symbol("skdx-menu-family");function i(){return n(r,void 0)?.family??"menu"}function m(){return n(r,void 0)?.label}function o(){return e("menu-sub-content")}function s(){return e("menu-sub-trigger")}export{u as ITEM_SELECTOR,r as MENU_FAMILY_CONTEXT,t as MENU_SUB_CONTEXT,o as nextMenuSubContentId,s as nextMenuSubTriggerId,i as useMenuFamily,m as useMenuFamilyLabel};

package/dist/utils/mergeStyle.cjs

@@ -0,0 +1 @@
+function o(r){if(!r)return{};if(typeof r=="string"){const i={};for(const t of r.split(";")){const n=t.indexOf(":");if(n===-1)continue;const e=t.slice(0,n).trim(),c=t.slice(n+1).trim();e&&(i[e]=c)}return i}return Array.isArray(r)?r.reduce((i,t)=>({...i,...o(t)}),{}):r}exports.toStyleObject=o;

package/dist/utils/mergeStyle.d.cts

@@ -0,0 +1,2 @@
+/** Parses a fallthrough `style` (string, object, or array of either) into a flat kebab-case map. */
+export declare function toStyleObject(style: unknown): Record<string, string>;

package/dist/utils/mergeStyle.d.ts

@@ -0,0 +1,2 @@
+/** Parses a fallthrough `style` (string, object, or array of either) into a flat kebab-case map. */
+export declare function toStyleObject(style: unknown): Record<string, string>;

package/dist/utils/mergeStyle.js

@@ -0,0 +1 @@
+function t(r){if(!r)return{};if("string"==typeof r){const t={};for(const e of r.split(";")){const r=e.indexOf(":");if(-1===r)continue;const i=e.slice(0,r).trim(),n=e.slice(r+1).trim();i&&(t[i]=n)}return t}return Array.isArray(r)?r.reduce((r,e)=>({...r,...t(e)}),{}):r}export{t as toStyleObject};

package/dist/utils/mirroredValues.cjs

@@ -0,0 +1 @@
+function u(r,e={}){return r.length>0?[...r]:e.required||e.singleValued?[""]:[]}exports.mirroredFormValues=u;

package/dist/utils/mirroredValues.d.cts

@@ -0,0 +1,15 @@
+/** What {@link mirroredFormValues} needs beyond the selection itself. */
+export interface MirroredFormValuesOptions {
+    /**
+     * Whether the control is `required`; an empty selection then still mirrors one empty-valued control so `valueMissing` can fire.
+     * @defaultValue false
+     */
+    required?: boolean | undefined;
+    /**
+     * True for a control that holds at most one value, where an empty selection still submits one empty entry, like a native single `<select>`.
+     * @defaultValue false
+     */
+    singleValued?: boolean | undefined;
+}
+/** Mirrors an array-valued control as one visually-hidden native control per value, all sharing one `name`, read via `formData.getAll(name)`. */
+export declare function mirroredFormValues(values: readonly string[], options?: MirroredFormValuesOptions): string[];