@skdx/web-components 0.27.0 → 0.29.0

package/dist/internal/menu-group.js

@@ -0,0 +1 @@
+import{html as l,LitElement as a}from"lit";import{ensureId as r}from"./ids.js";var t=class extends a{constructor(){super(...arguments);this.labelTagName="";this.authoredLabelledBy=!1;this.labelledByChecked=!1;this.syncLabelling=()=>{if(this.authoredLabelledBy||this.hasAttribute("aria-label")||!this.labelTagName)return;let e=this.querySelector(`:scope > ${this.labelTagName}`);if(!e){this.removeAttribute("aria-labelledby");return}this.setAttribute("aria-labelledby",r(e,"skdx-menu","label"))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.labelledByChecked||(this.authoredLabelledBy=this.hasAttribute("aria-labelledby"),this.labelledByChecked=!0),this.syncLabelling()}render(){return l`<slot @slotchange=${this.syncLabelling}></slot>`}};export{t as SkdxMenuGroupBase};

package/dist/internal/menu-item.cjs

@@ -0,0 +1,5 @@
+"use strict";var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var E=(i,t)=>{for(var e in t)d(i,e,{get:t[e],enumerable:!0})},g=(i,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of y(t))!w.call(i,r)&&r!==e&&d(i,r,{get:()=>t[r],enumerable:!(n=v(t,r))||n.enumerable});return i};var S=i=>g(d({},"__esModule",{value:!0}),i),l=(i,t,e,n)=>{for(var r=n>1?void 0:n?v(t,e):t,c=i.length-1,h;c>=0;c--)(h=i[c])&&(r=(n?h(t,e,r):h(r))||r);return n&&r&&d(t,e,r),r};var L={};E(L,{SkdxMenuItemBase:()=>o});module.exports=S(L);var s=require("lit"),a=require("lit/decorators.js"),p=require("lit/static-html.js"),u=require("../utils/polymorphic.cjs"),b=require("./closest.cjs"),f=require("./positioning.cjs"),m=require("./styles.cjs");var o=class extends s.LitElement{constructor(){super(...arguments);this.disabled=!1;this.as="div";this.owner=null;this.ownerSelector="";this.handleActivate=()=>{if(this.disabled)return;this.beforeSelect();let e=new CustomEvent("select",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),!e.defaultPrevented&&this.effectiveCloseOnSelect()&&this.onSelected()};this.handleKeyDown=e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.handleActivate())};this.handlePointerEnter=()=>{this.disabled||this.focus()};this.handlePointerLeave=()=>{document.activeElement===this&&this.closest('[role="menu"]')?.focus()}}resolveOwner(){return(0,b.closestThroughPortal)(this,this.ownerSelector)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","menuitem"),this.owner=this.resolveOwner(),this.addEventListener("click",this.handleActivate),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncDisabledState()}disconnectedCallback(){this.removeEventListener("click",this.handleActivate),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),super.disconnectedCallback()}updated(e){e.has("disabled")&&this.syncDisabledState()}syncDisabledState(){this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),this.tabIndex=-1}beforeSelect(){}onSelected(){this.owner?.close(),this.owner?.focusTrigger()}effectiveCloseOnSelect(){return this.closeOnSelect??this.owner?.closeOnSelect??!0}hrefValue(){return s.nothing}render(){let e=(0,u.resolveTag)(this.as,"div");return p.html`<${e} tabindex="-1" href=${this.hrefValue()}><slot></slot></${e}>`}};o.styles=[m.hiddenHostStyles,s.css`
+      :host {
+        display: block;
+      }
+    `],l([(0,a.property)({type:Boolean,reflect:!0})],o.prototype,"disabled",2),l([(0,a.property)({attribute:"data-text-value",reflect:!0})],o.prototype,"textValue",2),l([(0,a.property)({attribute:"close-on-select",converter:f.optOutBoolean})],o.prototype,"closeOnSelect",2),l([(0,a.property)({type:String,reflect:!0})],o.prototype,"as",2);0&&(module.exports={SkdxMenuItemBase});

package/dist/internal/menu-item.d.cts

@@ -0,0 +1,68 @@
+import { LitElement, nothing, type TemplateResult } from 'lit';
+import { type PolymorphicTag } from '../utils/polymorphic.cjs';
+/**
+ * What an item needs from whatever owns the panel it sits in — a menu root, or
+ * one menubar menu.
+ * @internal
+ */
+export interface SkdxMenuItemOwner {
+    /** The owner's own close-on-select default, inherited when the item sets none. */
+    readonly closeOnSelect?: boolean | undefined;
+    /** Closes the panel this item was selected from. */
+    close(): void;
+    /** Returns focus to the control that opened the panel. */
+    focusTrigger(): void;
+}
+/**
+ * The item engine both menu families share: `role="menuitem"`, a roving tab
+ * stop that stays focusable while disabled, pointer-follow focus, and a
+ * cancelable `select` that closes the owning panel unless vetoed.
+ * @internal
+ */
+export declare class SkdxMenuItemBase extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Marks the item aria-disabled and blocks selection; stays in roving order, remains focusable.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Text typeahead matches this item by, instead of rendered text.
+     * Mapped to `data-text-value`.
+     * @default undefined
+     */
+    textValue?: string;
+    /**
+     * Whether selecting this item closes the menu, overriding the root's `close-on-select` for this item alone.
+     * @default undefined
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Element name to render instead of the default `<div>`.
+     * @default 'div'
+     */
+    as: PolymorphicTag;
+    /** @internal The panel owner selection closes, resolved once on connect. */
+    protected owner: SkdxMenuItemOwner | null;
+    /** @internal Selector of the element that owns this item's panel, per family. */
+    protected ownerSelector: string;
+    /** @internal Resolves the owner; families whose owner is not the element itself override this. */
+    protected resolveOwner(): SkdxMenuItemOwner | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncDisabledState;
+    /** @internal Hook for checkbox/radio items to run toggle logic before `select` fires. */
+    protected beforeSelect(): void;
+    /** @internal Called after a select that wasn't prevented and not vetoed by `closeOnSelect`. */
+    protected onSelected(): void;
+    /** @internal Whether this item closes the menu; checkbox items override to use their own default. */
+    protected effectiveCloseOnSelect(): boolean;
+    protected readonly handleActivate: () => void;
+    private readonly handleKeyDown;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    /** @internal The `href` the rendered element takes; families without a link item render none. */
+    protected hrefValue(): string | typeof nothing;
+    render(): TemplateResult;
+}

package/dist/internal/menu-item.d.ts

@@ -0,0 +1,68 @@
+import { LitElement, nothing, type TemplateResult } from 'lit';
+import { type PolymorphicTag } from '../utils/polymorphic.js';
+/**
+ * What an item needs from whatever owns the panel it sits in — a menu root, or
+ * one menubar menu.
+ * @internal
+ */
+export interface SkdxMenuItemOwner {
+    /** The owner's own close-on-select default, inherited when the item sets none. */
+    readonly closeOnSelect?: boolean | undefined;
+    /** Closes the panel this item was selected from. */
+    close(): void;
+    /** Returns focus to the control that opened the panel. */
+    focusTrigger(): void;
+}
+/**
+ * The item engine both menu families share: `role="menuitem"`, a roving tab
+ * stop that stays focusable while disabled, pointer-follow focus, and a
+ * cancelable `select` that closes the owning panel unless vetoed.
+ * @internal
+ */
+export declare class SkdxMenuItemBase extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Marks the item aria-disabled and blocks selection; stays in roving order, remains focusable.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Text typeahead matches this item by, instead of rendered text.
+     * Mapped to `data-text-value`.
+     * @default undefined
+     */
+    textValue?: string;
+    /**
+     * Whether selecting this item closes the menu, overriding the root's `close-on-select` for this item alone.
+     * @default undefined
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Element name to render instead of the default `<div>`.
+     * @default 'div'
+     */
+    as: PolymorphicTag;
+    /** @internal The panel owner selection closes, resolved once on connect. */
+    protected owner: SkdxMenuItemOwner | null;
+    /** @internal Selector of the element that owns this item's panel, per family. */
+    protected ownerSelector: string;
+    /** @internal Resolves the owner; families whose owner is not the element itself override this. */
+    protected resolveOwner(): SkdxMenuItemOwner | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private syncDisabledState;
+    /** @internal Hook for checkbox/radio items to run toggle logic before `select` fires. */
+    protected beforeSelect(): void;
+    /** @internal Called after a select that wasn't prevented and not vetoed by `closeOnSelect`. */
+    protected onSelected(): void;
+    /** @internal Whether this item closes the menu; checkbox items override to use their own default. */
+    protected effectiveCloseOnSelect(): boolean;
+    protected readonly handleActivate: () => void;
+    private readonly handleKeyDown;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    /** @internal The `href` the rendered element takes; families without a link item render none. */
+    protected hrefValue(): string | typeof nothing;
+    render(): TemplateResult;
+}

package/dist/internal/menu-item.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(l,i,e,n)=>{for(var t=n>1?void 0:n?h(i,e):i,a=l.length-1,d;a>=0;a--)(d=l[a])&&(t=(n?d(i,e,t):d(t))||t);return n&&t&&c(i,e,t),t};import{css as v,LitElement as p,nothing as u}from"lit";import{property as s}from"lit/decorators.js";import{html as b}from"lit/static-html.js";import{resolveTag as f}from"../utils/polymorphic.js";import{closestThroughPortal as m}from"./closest.js";import{optOutBoolean as y}from"./positioning.js";import{hiddenHostStyles as w}from"./styles.js";var r=class extends p{constructor(){super(...arguments);this.disabled=!1;this.as="div";this.owner=null;this.ownerSelector="";this.handleActivate=()=>{if(this.disabled)return;this.beforeSelect();let e=new CustomEvent("select",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),!e.defaultPrevented&&this.effectiveCloseOnSelect()&&this.onSelected()};this.handleKeyDown=e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.handleActivate())};this.handlePointerEnter=()=>{this.disabled||this.focus()};this.handlePointerLeave=()=>{document.activeElement===this&&this.closest('[role="menu"]')?.focus()}}resolveOwner(){return m(this,this.ownerSelector)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","menuitem"),this.owner=this.resolveOwner(),this.addEventListener("click",this.handleActivate),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncDisabledState()}disconnectedCallback(){this.removeEventListener("click",this.handleActivate),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),super.disconnectedCallback()}updated(e){e.has("disabled")&&this.syncDisabledState()}syncDisabledState(){this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),this.tabIndex=-1}beforeSelect(){}onSelected(){this.owner?.close(),this.owner?.focusTrigger()}effectiveCloseOnSelect(){return this.closeOnSelect??this.owner?.closeOnSelect??!0}hrefValue(){return u}render(){let e=f(this.as,"div");return b`<${e} tabindex="-1" href=${this.hrefValue()}><slot></slot></${e}>`}};r.styles=[w,v`
+      :host {
+        display: block;
+      }
+    `],o([s({type:Boolean,reflect:!0})],r.prototype,"disabled",2),o([s({attribute:"data-text-value",reflect:!0})],r.prototype,"textValue",2),o([s({attribute:"close-on-select",converter:y})],r.prototype,"closeOnSelect",2),o([s({type:String,reflect:!0})],r.prototype,"as",2);export{r as SkdxMenuItemBase};

package/dist/internal/menu-items.cjs

@@ -0,0 +1 @@
+"use strict";var b=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var V=(t,e)=>{for(var i in e)b(t,i,{get:e[i],enumerable:!0})},A=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of v(e))!I.call(t,r)&&r!==i&&b(t,r,{get:()=>e[r],enumerable:!(o=E(e,r))||o.enumerable});return t};var M=t=>A(b({},"__esModule",{value:!0}),t);var D={};V(D,{buildMenuItemElements:()=>p});module.exports=M(D);var h=require("./options.cjs"),g="http://www.w3.org/2000/svg";function k(){let t=document.createElementNS(g,"svg");return t.setAttribute("viewBox","0 0 16 16"),t.setAttribute("width","1em"),t.setAttribute("height","1em"),t.setAttribute("fill","none"),t.setAttribute("aria-hidden","true"),t.setAttribute("focusable","false"),t}function C(){let t=k(),e=document.createElementNS(g,"path");return e.setAttribute("d","M3 8.5l3 3 7-7"),e.setAttribute("stroke","currentColor"),e.setAttribute("stroke-width","1.5"),e.setAttribute("stroke-linecap","round"),e.setAttribute("stroke-linejoin","round"),t.append(e),t}function G(){let t=k(),e=document.createElementNS(g,"circle");return e.setAttribute("cx","8"),e.setAttribute("cy","8"),e.setAttribute("r","3"),e.setAttribute("fill","currentColor"),t.append(e),t}function s(t,e){return"type"in t&&t.type===e}function m(t,e,i){t.setAttribute("data-value",i.key),t.setAttribute("data-text-value",i.textValue??i.label);let o=i.itemContent?.get(i.key);if(o?t.append((0,h.stampRenderSlot)(o)):t.append(document.createTextNode(i.label)),i.shortcut){let r=document.createElement(e.shortcut);r.textContent=i.shortcut,t.append(r)}}function T(t,e,i){let o=document.createElement(e.radioGroup);t.value!==void 0&&o.setAttribute("value",t.value),o.addEventListener("value-change",r=>{t.onValueChange?.(r.detail)});for(let r of t.items){let l=document.createElement(e.radioItem);l.setAttribute("value",r.value),r.disabled&&l.setAttribute("disabled",""),l.append(S(e,G())),m(l,e,{key:r.value,label:r.label,textValue:r.textValue,itemContent:i}),o.append(l)}return o}function p(t,e,i={}){let{itemContent:o,onSelect:r,prefix:l}=i;return t.map((n,x)=>{let a=l===void 0?String(x):`${l}.${x}`;if(s(n,"separator"))return document.createElement(e.separator);if(s(n,"group")){let u=document.createElement(e.group);if(n.label!==void 0){let d=document.createElement(e.label);d.textContent=n.label,u.append(d)}return u.append(...p(n.items,e,{...i,prefix:a})),u}if(s(n,"radio-group"))return T(n,e,o);if(s(n,"submenu")){let u=document.createElement(e.sub),d=document.createElement(e.subTrigger);n.disabled&&d.setAttribute("disabled",""),m(d,e,{key:a,label:n.label,textValue:n.textValue,itemContent:o});let f=document.createElement(e.subContent);return f.append(...p(n.items,e,{...i,prefix:a})),u.append(d,f),u}if(s(n,"checkbox")){let u=document.createElement(e.checkboxItem);return n.checked&&u.setAttribute("checked",""),n.disabled&&u.setAttribute("disabled",""),u.append(S(e,C())),m(u,e,{key:a,label:n.label,textValue:n.textValue,shortcut:n.shortcut,itemContent:o}),u.addEventListener("checked-change",d=>{n.onCheckedChange?.(d.detail)}),u.addEventListener("select",()=>r?.(n)),u}let c=document.createElement(e.item);return n.disabled&&c.setAttribute("disabled",""),m(c,e,{key:a,label:n.label,textValue:n.textValue,shortcut:n.shortcut,itemContent:o}),c.addEventListener("select",()=>{n.onSelect?.(),r?.(n)}),c})}function S(t,e){let i=document.createElement(t.itemIndicator);return i.append(e),i}0&&(module.exports={buildMenuItemElements});

package/dist/internal/menu-items.d.cts

@@ -0,0 +1,72 @@
+/**
+ * Shared `items` data shape for menu families. Each redeclares it under its own name.
+ * @internal
+ */
+export type SkdxMenuItemDescriptor = {
+    label: string;
+    onSelect?: () => void;
+    shortcut?: string;
+    disabled?: boolean | undefined;
+    textValue?: string;
+} | {
+    type: 'separator';
+} | {
+    type: 'checkbox';
+    label: string;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    shortcut?: string;
+    disabled?: boolean | undefined;
+    textValue?: string;
+} | {
+    type: 'radio-group';
+    value?: string;
+    onValueChange?: (value: string) => void;
+    items: readonly SkdxMenuRadioItemDescriptor[];
+} | {
+    type: 'submenu';
+    label: string;
+    items: readonly SkdxMenuItemDescriptor[];
+    disabled?: boolean | undefined;
+    textValue?: string;
+} | {
+    type: 'group';
+    label?: string;
+    items: readonly SkdxMenuItemDescriptor[];
+};
+/** One option inside a `type: 'radio-group'` entry. @internal */
+export interface SkdxMenuRadioItemDescriptor {
+    label: string;
+    value: string;
+    disabled?: boolean | undefined;
+    textValue?: string;
+}
+/** Tag names for wiring menu item data. @internal */
+export interface SkdxMenuItemTags {
+    item: string;
+    checkboxItem: string;
+    radioGroup: string;
+    radioItem: string;
+    itemIndicator: string;
+    group: string;
+    label: string;
+    separator: string;
+    shortcut: string;
+    sub: string;
+    subTrigger: string;
+    subContent: string;
+}
+/** @internal */
+export interface SkdxMenuItemBuildOptions {
+    /** Consumer content per `data-value`, from `slot="item"` children. */
+    itemContent?: ReadonlyMap<string, Element>;
+    /** Recipe-level notification after the entry's callback, for plain and checkbox entries only. */
+    onSelect?: (item: SkdxMenuItemDescriptor) => void;
+    /** Index-path prefix for nested levels (e.g., `"2.1"`). */
+    prefix?: string;
+}
+/**
+ * Builds a light-DOM element tree for one menu family's `items` collection, shared by Menu and Menubar; every item carries `data-value` (the radio option's own value, else its index path).
+ * @internal
+ */
+export declare function buildMenuItemElements(items: readonly SkdxMenuItemDescriptor[], tags: SkdxMenuItemTags, options?: SkdxMenuItemBuildOptions): Element[];

package/dist/internal/menu-items.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Shared `items` data shape for menu families. Each redeclares it under its own name.
+ * @internal
+ */
+export type SkdxMenuItemDescriptor = {
+    label: string;
+    onSelect?: () => void;
+    shortcut?: string;
+    disabled?: boolean | undefined;
+    textValue?: string;
+} | {
+    type: 'separator';
+} | {
+    type: 'checkbox';
+    label: string;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    shortcut?: string;
+    disabled?: boolean | undefined;
+    textValue?: string;
+} | {
+    type: 'radio-group';
+    value?: string;
+    onValueChange?: (value: string) => void;
+    items: readonly SkdxMenuRadioItemDescriptor[];
+} | {
+    type: 'submenu';
+    label: string;
+    items: readonly SkdxMenuItemDescriptor[];
+    disabled?: boolean | undefined;
+    textValue?: string;
+} | {
+    type: 'group';
+    label?: string;
+    items: readonly SkdxMenuItemDescriptor[];
+};
+/** One option inside a `type: 'radio-group'` entry. @internal */
+export interface SkdxMenuRadioItemDescriptor {
+    label: string;
+    value: string;
+    disabled?: boolean | undefined;
+    textValue?: string;
+}
+/** Tag names for wiring menu item data. @internal */
+export interface SkdxMenuItemTags {
+    item: string;
+    checkboxItem: string;
+    radioGroup: string;
+    radioItem: string;
+    itemIndicator: string;
+    group: string;
+    label: string;
+    separator: string;
+    shortcut: string;
+    sub: string;
+    subTrigger: string;
+    subContent: string;
+}
+/** @internal */
+export interface SkdxMenuItemBuildOptions {
+    /** Consumer content per `data-value`, from `slot="item"` children. */
+    itemContent?: ReadonlyMap<string, Element>;
+    /** Recipe-level notification after the entry's callback, for plain and checkbox entries only. */
+    onSelect?: (item: SkdxMenuItemDescriptor) => void;
+    /** Index-path prefix for nested levels (e.g., `"2.1"`). */
+    prefix?: string;
+}
+/**
+ * Builds a light-DOM element tree for one menu family's `items` collection, shared by Menu and Menubar; every item carries `data-value` (the radio option's own value, else its index path).
+ * @internal
+ */
+export declare function buildMenuItemElements(items: readonly SkdxMenuItemDescriptor[], tags: SkdxMenuItemTags, options?: SkdxMenuItemBuildOptions): Element[];

package/dist/internal/menu-items.js

@@ -0,0 +1 @@
+import{stampRenderSlot as k}from"./options.js";var b="http://www.w3.org/2000/svg";function f(){let t=document.createElementNS(b,"svg");return t.setAttribute("viewBox","0 0 16 16"),t.setAttribute("width","1em"),t.setAttribute("height","1em"),t.setAttribute("fill","none"),t.setAttribute("aria-hidden","true"),t.setAttribute("focusable","false"),t}function S(){let t=f(),e=document.createElementNS(b,"path");return e.setAttribute("d","M3 8.5l3 3 7-7"),e.setAttribute("stroke","currentColor"),e.setAttribute("stroke-width","1.5"),e.setAttribute("stroke-linecap","round"),e.setAttribute("stroke-linejoin","round"),t.append(e),t}function E(){let t=f(),e=document.createElementNS(b,"circle");return e.setAttribute("cx","8"),e.setAttribute("cy","8"),e.setAttribute("r","3"),e.setAttribute("fill","currentColor"),t.append(e),t}function s(t,e){return"type"in t&&t.type===e}function m(t,e,i){t.setAttribute("data-value",i.key),t.setAttribute("data-text-value",i.textValue??i.label);let u=i.itemContent?.get(i.key);if(u?t.append(k(u)):t.append(document.createTextNode(i.label)),i.shortcut){let o=document.createElement(e.shortcut);o.textContent=i.shortcut,t.append(o)}}function v(t,e,i){let u=document.createElement(e.radioGroup);t.value!==void 0&&u.setAttribute("value",t.value),u.addEventListener("value-change",o=>{t.onValueChange?.(o.detail)});for(let o of t.items){let l=document.createElement(e.radioItem);l.setAttribute("value",o.value),o.disabled&&l.setAttribute("disabled",""),l.append(h(e,E())),m(l,e,{key:o.value,label:o.label,textValue:o.textValue,itemContent:i}),u.append(l)}return u}function x(t,e,i={}){let{itemContent:u,onSelect:o,prefix:l}=i;return t.map((n,p)=>{let a=l===void 0?String(p):`${l}.${p}`;if(s(n,"separator"))return document.createElement(e.separator);if(s(n,"group")){let r=document.createElement(e.group);if(n.label!==void 0){let d=document.createElement(e.label);d.textContent=n.label,r.append(d)}return r.append(...x(n.items,e,{...i,prefix:a})),r}if(s(n,"radio-group"))return v(n,e,u);if(s(n,"submenu")){let r=document.createElement(e.sub),d=document.createElement(e.subTrigger);n.disabled&&d.setAttribute("disabled",""),m(d,e,{key:a,label:n.label,textValue:n.textValue,itemContent:u});let g=document.createElement(e.subContent);return g.append(...x(n.items,e,{...i,prefix:a})),r.append(d,g),r}if(s(n,"checkbox")){let r=document.createElement(e.checkboxItem);return n.checked&&r.setAttribute("checked",""),n.disabled&&r.setAttribute("disabled",""),r.append(h(e,S())),m(r,e,{key:a,label:n.label,textValue:n.textValue,shortcut:n.shortcut,itemContent:u}),r.addEventListener("checked-change",d=>{n.onCheckedChange?.(d.detail)}),r.addEventListener("select",()=>o?.(n)),r}let c=document.createElement(e.item);return n.disabled&&c.setAttribute("disabled",""),m(c,e,{key:a,label:n.label,textValue:n.textValue,shortcut:n.shortcut,itemContent:u}),c.addEventListener("select",()=>{n.onSelect?.(),o?.(n)}),c})}function h(t,e){let i=document.createElement(t.itemIndicator);return i.append(e),i}export{x as buildMenuItemElements};

package/dist/internal/menu-panel.cjs

@@ -0,0 +1,5 @@
+"use strict";var f=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var L=(s,o)=>{for(var e in o)f(s,e,{get:o[e],enumerable:!0})},K=(s,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of O(o))!b.call(s,i)&&i!==e&&f(s,i,{get:()=>o[i],enumerable:!(t=w(o,i))||t.enumerable});return s};var D=s=>K(f({},"__esModule",{value:!0}),s),d=(s,o,e,t)=>{for(var i=t>1?void 0:t?w(o,e):o,a=s.length-1,l;a>=0;a--)(l=s[a])&&(i=(t?l(o,e,i):l(i))||i);return t&&i&&f(o,e,i),i};var k={};L(k,{SkdxMenuPanelBase:()=>r});module.exports=D(k);var p=require("lit"),c=require("lit/decorators.js"),y=require("./body-scroll-lock.cjs"),g=require("./direction.cjs"),n=require("./dismiss.cjs"),m=require("./menu-sub.cjs"),v=require("./outsideInert.cjs"),h=require("./positioning.cjs"),E=require("./styles.cjs"),u=require("./typeahead.cjs");var r=class extends p.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.loop=!0;this.owner=null;this.ownerEvent="";this.panelComponent="menu";this.arrowSelector="skdx-menu-arrow";this.triggerSelector="skdx-menu-trigger";this.keepFocusInPanel=!1;this.ownsNavigationKeys=!1;this.onOwnerUpdate=()=>{this.syncHostState(),this.afterOwnerUpdate()};this.typeahead=new u.Typeahead;this.layer={insideElements:()=>this.layerInsideElements()};this.scrollLocked=!1;this.handleOutsidePointerDown=e=>{if(!this.owner?.open)return;let t=e.target;this.contains(t)||this.pointerExempt(t)||(0,n.dispatchOutside)(this,"pointer-down-outside",e)&&this.closeOwner()};this.handleOutsideFocus=e=>{if(!this.owner?.open)return;let t=(0,n.focusOutsideTarget)(e);!t||this.contains(t)||this.focusExempt(t)||(0,n.dispatchOutside)(this,"focus-outside",e)&&this.closeOwner()};this.handleEscape=e=>{(0,n.dispatchEscapeKeyDown)(this,e)&&this.closeAndRefocus()};this.handleDocumentKeyDown=e=>{this.owner?.open&&(0,n.handleEscapeKeyDown)(e,this.layer,this.handleEscape)};this.handleKeyDown=e=>{let t=(0,m.menuItems)(this).filter(a=>a.closest('[role="menu"]')===this),i=t.indexOf(document.activeElement);if(e.key==="Tab"){this.closeAndRefocus();return}if(e.altKey&&e.key==="ArrowUp"){this.closeAndRefocus();return}if(!this.extraKeyDown(e)){if(e.key==="ArrowDown"||e.key==="ArrowUp"){this.onArrowKey(e,t,i);return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),this.claimKey(e),(e.key==="Home"?t[0]:t[t.length-1])?.focus();return}if((0,u.isTypeaheadKey)(e)){this.claimKey(e);let a=this.typeahead.match(e.key,t.map(u.itemText),i);a!==-1&&(e.preventDefault(),t[a]?.focus())}}}}resolveOwner(){return null}closeOwner(){}afterOwnerUpdate(){}layerInsideElements(){return[this,this.owner?.querySelector(this.triggerSelector)]}connectedCallback(){if(super.connectedCallback(),this.setAttribute("role","menu"),this.setAttribute("aria-orientation","vertical"),this.tabIndex=-1,this.owner=this.resolveOwner(),this.owner?.addEventListener(this.ownerEvent,this.onOwnerUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.owner){this.owner.contentEl=this,this.id?(this.owner.contentId=this.id,this.claimedAuthoredId(this.id)):this.id=this.owner.contentId,this.hasAttribute("aria-label")||this.setAttribute("aria-labelledby",this.owner.triggerId);let e=this.owner.querySelector(this.triggerSelector);if(e){let t=(0,g.resolveDirection)(e);t&&this.setAttribute("dir",t)}}this.syncHostState()}claimedAuthoredId(e){}disconnectedCallback(){this.owner?.contentEl===this&&(this.owner.contentEl=null),this.owner?.removeEventListener(this.ownerEvent,this.onOwnerUpdate),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.releaseLayer?.(),this.releaseLayer=void 0,this.cleanupPosition?.(),this.typeahead.clear(),(0,v.setOutsideInert)(this,!1),this.setBodyScrollLock(!1),super.disconnectedCallback()}firstUpdated(){this.owner?.open&&this.activate()}writePlacementState(){this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start")}syncHostState(){let e=this.owner?.open??!1;this.setAttribute("data-state",e?"open":"closed"),this.writePlacementState(),this.hidden=!e,this.applyOpenState(e)}applyOpenState(e){e&&!this.releaseLayer?this.releaseLayer=(0,n.pushDismissLayer)(this.layer):!e&&this.releaseLayer&&(this.releaseLayer(),this.releaseLayer=void 0);let t=e&&(this.owner?.modal??!1);(0,v.setOutsideInert)(this,t),this.setBodyScrollLock(t),e?this.activate():this.deactivate()}setBodyScrollLock(e){e!==this.scrollLocked&&(this.scrollLocked=e,e?(0,y.lockBodyScroll)():(0,y.unlockBodyScroll)())}updated(e){!this.cleanupPosition||!(0,h.placementChanged)(e)||(this.deactivate(),this.position())}focusPreventsScroll(){return!1}activate(){this.position(),requestAnimationFrame(()=>(0,n.focusOnOpen)(()=>{if(this.keepFocusInPanel&&this.contains(document.activeElement))return;let e=(0,m.menuItems)(this);((this.owner?.openIntent==="last"?e[e.length-1]:e[0])??this).focus({preventScroll:this.focusPreventsScroll()})}))}anchor(){return this.owner?.triggerEl??null}positionOptions(){return{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:this.panelComponent,arrow:()=>this.querySelector(this.arrowSelector)}}position(){if(this.cleanupPosition)return;let e=this.anchor();e&&(this.cleanupPosition=(0,h.positionFloating)(e,this,this.positionOptions()))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}pointerExempt(e){return(0,n.triggerContains)(this.owner?.triggerEl??null,e)}focusExempt(e){return this.pointerExempt(e)}extraKeyDown(e){return!1}claimKey(e){this.ownsNavigationKeys&&e.stopPropagation()}closeAndRefocus(){this.closeOwner(),this.owner?.focusTrigger()}onArrowKey(e,t,i){if(t.length===0&&!this.ownsNavigationKeys||(e.preventDefault(),this.claimKey(e),t.length===0))return;let a=e.key==="ArrowDown"?1:-1,l=i+a;l>=t.length?l=this.loop?0:t.length-1:l<0&&(l=this.loop?t.length-1:0),t[l]?.focus()}render(){return p.html`<slot></slot>`}};r.styles=[E.hiddenHostStyles,p.css`
+      :host {
+        display: block;
+      }
+    `],d([(0,c.property)({type:String,reflect:!0})],r.prototype,"side",2),d([(0,c.property)({type:String,reflect:!0})],r.prototype,"align",2),d([(0,c.property)({type:Number,reflect:!0,attribute:"side-offset"})],r.prototype,"sideOffset",2),d([(0,c.property)({type:Number,reflect:!0,attribute:"align-offset"})],r.prototype,"alignOffset",2),d([(0,c.property)({converter:h.optOutBoolean,attribute:"avoid-collisions"})],r.prototype,"avoidCollisions",2),d([(0,c.property)({type:Number,attribute:"collision-padding"})],r.prototype,"collisionPadding",2),d([(0,c.property)({attribute:!1})],r.prototype,"collisionBoundary",2),d([(0,c.property)({converter:h.optOutBoolean})],r.prototype,"loop",2);0&&(module.exports={SkdxMenuPanelBase});

package/dist/internal/menu-panel.d.cts

@@ -0,0 +1,142 @@
+import type { VirtualElement } from '@floating-ui/dom';
+import { LitElement, type TemplateResult } from 'lit';
+import { type PositionHandle, type PositionOptions } from './positioning.cjs';
+/**
+ * What a menu panel needs from whatever holds its open state — a menu root, or
+ * one menubar menu.
+ * @internal
+ */
+export interface SkdxMenuPanelOwner extends Element {
+    /** Whether the panel this owner holds is currently open. */
+    readonly open: boolean;
+    /** Whether the open panel takes the page out of use; families without modality leave it unset. */
+    readonly modal?: boolean;
+    /** The connected panel, which `close-auto-focus` dispatches from. */
+    contentEl: HTMLElement | null;
+    /** Id the trigger points `aria-controls` at. */
+    contentId: string;
+    /** Id the panel points `aria-labelledby` at. */
+    triggerId: string;
+    /** The element the panel anchors to and returns focus to. */
+    triggerEl: HTMLElement | null;
+    /** Which end of the item list the key that opened the panel asked focus to land on. */
+    openIntent: 'first' | 'last';
+    /** Returns focus to the trigger, after the cancelable close-auto-focus. */
+    focusTrigger(): void;
+}
+/**
+ * The floating `role="menu"` panel both menu families share: floating-ui
+ * placement, modality, the dismissal interceptors, roving Up/Down/Home/End
+ * navigation and typeahead.
+ * @internal
+ */
+export declare class SkdxMenuPanelBase extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Preferred edge to place the menu against.
+     * @default 'bottom'
+     */
+    side: PositionOptions['side'];
+    /**
+     * Preferred alignment along the chosen edge, relative to the trigger.
+     * @default 'start'
+     */
+    align: PositionOptions['align'];
+    /**
+     * Pixel gap between the menu and the trigger's edge.
+     * @default 4
+     */
+    sideOffset: number;
+    /**
+     * Pixel offset along the alignment axis.
+     * @default 0
+     */
+    alignOffset: number;
+    /**
+     * Flip/shift to stay within the viewport instead of overflowing it.
+     * @default true
+     */
+    avoidCollisions: boolean;
+    /**
+     * Minimum pixel distance to keep from the collision boundary when avoiding collisions.
+     * @default 8
+     */
+    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    /**
+     * Element (or elements) collisions are measured against instead of this menu's clipping ancestors.
+     * @default undefined
+     */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
+    /**
+     * Whether Up/Down arrow-key navigation wraps from the last item back to the first (and vice versa).
+     * @default true
+     */
+    loop: boolean;
+    /** @internal The element holding this panel's open state. */
+    protected owner: SkdxMenuPanelOwner | null;
+    /** @internal Event name the owner broadcasts its updates on, per family. */
+    protected ownerEvent: string;
+    /** @internal Kebab-case component name positioning writes its measurement properties under. */
+    protected panelComponent: string;
+    /** @internal This family's Arrow tag, looked up inside the panel on every reposition. */
+    protected arrowSelector: string;
+    /** @internal This family's Trigger tag, read for the writing direction the panel carries. */
+    protected triggerSelector: string;
+    /** @internal Whether a re-open while focus is already inside the panel leaves it where it is. */
+    protected keepFocusInPanel: boolean;
+    /** @internal Whether navigation keys stop propagating, so an ancestor row does not also rove. */
+    protected ownsNavigationKeys: boolean;
+    /** @internal Resolves the owner; each family knows its own containment. */
+    protected resolveOwner(): SkdxMenuPanelOwner | null;
+    /** @internal Closes the panel; each family spells the owner's close its own way. */
+    protected closeOwner(): void;
+    private readonly onOwnerUpdate;
+    private readonly typeahead;
+    /** @internal The live positioning handle, or undefined while the panel is not placed. */
+    protected cleanupPosition?: PositionHandle | undefined;
+    /** @internal Runs after every owner broadcast, once host state has been synced. */
+    protected afterOwnerUpdate(): void;
+    /** What counts as inside this panel, for the shared layer stack Escape is resolved against. */
+    private readonly layer;
+    /** @internal What Escape resolution counts as inside this panel's layer. */
+    protected layerInsideElements(): (Element | null | undefined)[];
+    private releaseLayer?;
+    connectedCallback(): void;
+    /** @internal The panel took an author-assigned id; families whose trigger already wrote an IDREF refresh it. */
+    protected claimedAuthoredId(_id: string): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    /** @internal Writes the placement attributes the skin reads; families placed at a pointer override this. */
+    protected writePlacementState(): void;
+    private syncHostState;
+    private applyOpenState;
+    private scrollLocked;
+    private setBodyScrollLock;
+    protected updated(changed: Map<string, unknown>): void;
+    /** @internal Whether the opening focus move must not scroll the page to the panel. */
+    protected focusPreventsScroll(): boolean;
+    private activate;
+    /** @internal What the panel is placed against; families placed at a pointer return a virtual element. */
+    protected anchor(): Element | VirtualElement | null;
+    /** @internal The floating-ui options for this placement. */
+    protected positionOptions(): PositionOptions;
+    private position;
+    private deactivate;
+    /** @internal Whether an outside pointer-down landed on something that counts as inside. */
+    protected pointerExempt(target: Node): boolean;
+    /** @internal Whether a focus move landed on something that counts as inside. */
+    protected focusExempt(target: Node): boolean;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    /** The consumer's veto is read first; `handleEscapeKeyDown` calls `preventDefault()` after it, and only for the topmost layer. */
+    private readonly handleEscape;
+    private readonly handleDocumentKeyDown;
+    /** @internal Keys this family handles before the shared roving navigation; return true once handled. */
+    protected extraKeyDown(_event: KeyboardEvent): boolean;
+    private readonly handleKeyDown;
+    /** Stops a navigation key at the panel, so an ancestor roving row does not also read it. */
+    private claimKey;
+    private closeAndRefocus;
+    private onArrowKey;
+    render(): TemplateResult;
+}

package/dist/internal/menu-panel.d.ts

@@ -0,0 +1,142 @@
+import type { VirtualElement } from '@floating-ui/dom';
+import { LitElement, type TemplateResult } from 'lit';
+import { type PositionHandle, type PositionOptions } from './positioning.js';
+/**
+ * What a menu panel needs from whatever holds its open state — a menu root, or
+ * one menubar menu.
+ * @internal
+ */
+export interface SkdxMenuPanelOwner extends Element {
+    /** Whether the panel this owner holds is currently open. */
+    readonly open: boolean;
+    /** Whether the open panel takes the page out of use; families without modality leave it unset. */
+    readonly modal?: boolean;
+    /** The connected panel, which `close-auto-focus` dispatches from. */
+    contentEl: HTMLElement | null;
+    /** Id the trigger points `aria-controls` at. */
+    contentId: string;
+    /** Id the panel points `aria-labelledby` at. */
+    triggerId: string;
+    /** The element the panel anchors to and returns focus to. */
+    triggerEl: HTMLElement | null;
+    /** Which end of the item list the key that opened the panel asked focus to land on. */
+    openIntent: 'first' | 'last';
+    /** Returns focus to the trigger, after the cancelable close-auto-focus. */
+    focusTrigger(): void;
+}
+/**
+ * The floating `role="menu"` panel both menu families share: floating-ui
+ * placement, modality, the dismissal interceptors, roving Up/Down/Home/End
+ * navigation and typeahead.
+ * @internal
+ */
+export declare class SkdxMenuPanelBase extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Preferred edge to place the menu against.
+     * @default 'bottom'
+     */
+    side: PositionOptions['side'];
+    /**
+     * Preferred alignment along the chosen edge, relative to the trigger.
+     * @default 'start'
+     */
+    align: PositionOptions['align'];
+    /**
+     * Pixel gap between the menu and the trigger's edge.
+     * @default 4
+     */
+    sideOffset: number;
+    /**
+     * Pixel offset along the alignment axis.
+     * @default 0
+     */
+    alignOffset: number;
+    /**
+     * Flip/shift to stay within the viewport instead of overflowing it.
+     * @default true
+     */
+    avoidCollisions: boolean;
+    /**
+     * Minimum pixel distance to keep from the collision boundary when avoiding collisions.
+     * @default 8
+     */
+    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    /**
+     * Element (or elements) collisions are measured against instead of this menu's clipping ancestors.
+     * @default undefined
+     */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
+    /**
+     * Whether Up/Down arrow-key navigation wraps from the last item back to the first (and vice versa).
+     * @default true
+     */
+    loop: boolean;
+    /** @internal The element holding this panel's open state. */
+    protected owner: SkdxMenuPanelOwner | null;
+    /** @internal Event name the owner broadcasts its updates on, per family. */
+    protected ownerEvent: string;
+    /** @internal Kebab-case component name positioning writes its measurement properties under. */
+    protected panelComponent: string;
+    /** @internal This family's Arrow tag, looked up inside the panel on every reposition. */
+    protected arrowSelector: string;
+    /** @internal This family's Trigger tag, read for the writing direction the panel carries. */
+    protected triggerSelector: string;
+    /** @internal Whether a re-open while focus is already inside the panel leaves it where it is. */
+    protected keepFocusInPanel: boolean;
+    /** @internal Whether navigation keys stop propagating, so an ancestor row does not also rove. */
+    protected ownsNavigationKeys: boolean;
+    /** @internal Resolves the owner; each family knows its own containment. */
+    protected resolveOwner(): SkdxMenuPanelOwner | null;
+    /** @internal Closes the panel; each family spells the owner's close its own way. */
+    protected closeOwner(): void;
+    private readonly onOwnerUpdate;
+    private readonly typeahead;
+    /** @internal The live positioning handle, or undefined while the panel is not placed. */
+    protected cleanupPosition?: PositionHandle | undefined;
+    /** @internal Runs after every owner broadcast, once host state has been synced. */
+    protected afterOwnerUpdate(): void;
+    /** What counts as inside this panel, for the shared layer stack Escape is resolved against. */
+    private readonly layer;
+    /** @internal What Escape resolution counts as inside this panel's layer. */
+    protected layerInsideElements(): (Element | null | undefined)[];
+    private releaseLayer?;
+    connectedCallback(): void;
+    /** @internal The panel took an author-assigned id; families whose trigger already wrote an IDREF refresh it. */
+    protected claimedAuthoredId(_id: string): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    /** @internal Writes the placement attributes the skin reads; families placed at a pointer override this. */
+    protected writePlacementState(): void;
+    private syncHostState;
+    private applyOpenState;
+    private scrollLocked;
+    private setBodyScrollLock;
+    protected updated(changed: Map<string, unknown>): void;
+    /** @internal Whether the opening focus move must not scroll the page to the panel. */
+    protected focusPreventsScroll(): boolean;
+    private activate;
+    /** @internal What the panel is placed against; families placed at a pointer return a virtual element. */
+    protected anchor(): Element | VirtualElement | null;
+    /** @internal The floating-ui options for this placement. */
+    protected positionOptions(): PositionOptions;
+    private position;
+    private deactivate;
+    /** @internal Whether an outside pointer-down landed on something that counts as inside. */
+    protected pointerExempt(target: Node): boolean;
+    /** @internal Whether a focus move landed on something that counts as inside. */
+    protected focusExempt(target: Node): boolean;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    /** The consumer's veto is read first; `handleEscapeKeyDown` calls `preventDefault()` after it, and only for the topmost layer. */
+    private readonly handleEscape;
+    private readonly handleDocumentKeyDown;
+    /** @internal Keys this family handles before the shared roving navigation; return true once handled. */
+    protected extraKeyDown(_event: KeyboardEvent): boolean;
+    private readonly handleKeyDown;
+    /** Stops a navigation key at the panel, so an ancestor roving row does not also read it. */
+    private claimKey;
+    private closeAndRefocus;
+    private onArrowKey;
+    render(): TemplateResult;
+}