@skdx/web-components 0.27.0 → 0.28.0

package/dist/internal/form-associated.d.cts

@@ -1,9 +1,7 @@
 import type { LitElement } from 'lit';
 type Constructor<T> = new (...args: any[]) => T;
 /**
- * What a form-associated control submits: a single entry (a string or a
- * `File`), a whole set of entries (`FormData`, for multi-value controls like
- * TagsInput or FileUpload), or `null` for "nothing to submit".
+ * What a form-associated control submits: single entry (string/File), FormData set, or null.
  */
 export type SkdxFormValue = string | File | FormData | null;
 /** The API {@link FormAssociated} adds to the element it wraps. */
@@ -11,38 +9,26 @@ export declare class SkdxFormAssociated {
     /** Name used as the `FormData` entry key when inside a `<form>`. Declared per component. */
     name?: string;
     /**
-     * Replaces the English message the browser shows when this control fails its
-     * `required` constraint. Each component passes its own wording to
-     * {@link SkdxFormAssociated.setValueMissing} — `'Please fill out this field.'`
-     * for a text input, `'Please select an option.'` for a radio group — and
-     * those strings are baked into the component, unreachable from markup once
-     * the shadow root closes over them. Set this to localise the message or to
-     * say something the surrounding form cares about ("A billing email is
-     * required to continue."). Declared per component so the attribute reflects
-     * and the docs extractor sees it; leaving it unset keeps today's wording.
-     *
+     * Replaces the `required` message; localise or customize (unset keeps component default).
      * @default undefined — the component's own English message
      */
     requiredMessage?: string;
     /**
-     * The element's `ElementInternals`, the same object a native control uses to
-     * publish its value and validity. `protected` — components reach it through
-     * the helpers below rather than poking at it directly.
+     * `ElementInternals` object for value/validity publishing (use helpers, don't access directly).
      */
     protected readonly internals: ElementInternals;
-    /** The `<form>` this control is associated with, or `null` when it is outside a form. */
-    readonly form: HTMLFormElement | null;
+    /**
+     * The `<form>` this control is associated with, or `null` when it is outside a form.
+     * Assigning re-associates via the `form` attribute, like a native control's `form=""`.
+     */
+    form: HTMLFormElement | null;
     /** Runs constraint validation, firing `invalid` when it fails. Mirrors `HTMLInputElement.checkValidity()`. */
     checkValidity(): boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity(): boolean;
     /**
-     * Sets or clears a validation message supplied from outside the component,
-     * mirroring `HTMLInputElement.setCustomValidity()`. Public, unlike the
-     * `protected` helpers below, because a `<skdx-field>` wrapping this control
-     * calls it to push its own error into the control's validity — the one
-     * method name that works identically on a native input and on an skdx
-     * form-associated element. An empty message clears it.
+     * Sets or clears custom validation message (public so `<skdx-field>` can push errors).
+     * Empty message clears.
      */
     setCustomValidity(message: string): void;
     /** Called by the browser when the containing form is reset. Override to restore the initial value. */
@@ -55,30 +41,21 @@ export declare class SkdxFormAssociated {
     protected multiFormValue(items: readonly (string | File)[]): SkdxFormValue;
     /** Flags or clears `valueMissing`, anchoring the browser's validation bubble to `anchor`. */
     protected setValueMissing(missing: boolean, message: string, anchor?: HTMLElement | null): void;
+    /**
+     * Flags or clears `rangeUnderflow` / `rangeOverflow`. Mutually exclusive with setValueMissing.
+     */
+    protected setRangeViolation(violation: 'underflow' | 'overflow' | null, message: string, anchor?: HTMLElement | null): void;
+    /**
+     * Flags or clears `stepMismatch`. Mutually exclusive with setValueMissing and setRangeViolation.
+     */
+    protected setStepMismatch(mismatch: boolean, message: string, anchor?: HTMLElement | null): void;
     /** Mirrors a native control's own `ValidityState` (and its message) into internals, anchored to it. */
     protected mirrorValidity(control: HTMLInputElement | HTMLTextAreaElement): void;
 }
 /**
- * Makes a Lit element a form-associated custom element: it submits inside a
- * native `<form>`, participates in constraint validation, and reacts to form
- * reset and `<fieldset disabled>` — the same wiring `<skdx-checkbox>` and
- * `<skdx-switch>` do by hand, factored out so every form control shares one
- * implementation.
- *
- * A component using this mixin declares its own `name`/`required` properties
- * (so the docs extractor and the custom-elements manifest still see them),
- * calls {@link SkdxFormAssociated.setFormValue} plus one of
- * {@link SkdxFormAssociated.setValueMissing} / {@link SkdxFormAssociated.mirrorValidity}
- * whenever its value changes, and overrides `formResetCallback()` to restore
- * its initial value.
- *
- * Every `ElementInternals` call is optional-chained: jsdom implements
- * `attachInternals()` but none of the form-participation methods on the
- * returned object (`setFormValue`, `setValidity`, `form`, `checkValidity`,
- * `reportValidity` are all absent), so unit tests patch the ones they assert
- * on onto `ElementInternals.prototype` and the rest degrade to no-ops instead
- * of throwing. Real form submission is a browser-only behavior — verify it
- * there.
+ * Mixin for form-associated Lit element: submits in `<form>`, constraint validation,
+ * form reset. Components call setFormValue and setValueMissing/mirrorValidity on changes,
+ * override formResetCallback. ElementInternals calls are optional-chained (jsdom degrades).
  *
  * @example
  * ```ts

package/dist/internal/form-associated.d.ts

@@ -1,9 +1,7 @@
 import type { LitElement } from 'lit';
 type Constructor<T> = new (...args: any[]) => T;
 /**
- * What a form-associated control submits: a single entry (a string or a
- * `File`), a whole set of entries (`FormData`, for multi-value controls like
- * TagsInput or FileUpload), or `null` for "nothing to submit".
+ * What a form-associated control submits: single entry (string/File), FormData set, or null.
  */
 export type SkdxFormValue = string | File | FormData | null;
 /** The API {@link FormAssociated} adds to the element it wraps. */
@@ -11,38 +9,26 @@ export declare class SkdxFormAssociated {
     /** Name used as the `FormData` entry key when inside a `<form>`. Declared per component. */
     name?: string;
     /**
-     * Replaces the English message the browser shows when this control fails its
-     * `required` constraint. Each component passes its own wording to
-     * {@link SkdxFormAssociated.setValueMissing} — `'Please fill out this field.'`
-     * for a text input, `'Please select an option.'` for a radio group — and
-     * those strings are baked into the component, unreachable from markup once
-     * the shadow root closes over them. Set this to localise the message or to
-     * say something the surrounding form cares about ("A billing email is
-     * required to continue."). Declared per component so the attribute reflects
-     * and the docs extractor sees it; leaving it unset keeps today's wording.
-     *
+     * Replaces the `required` message; localise or customize (unset keeps component default).
      * @default undefined — the component's own English message
      */
     requiredMessage?: string;
     /**
-     * The element's `ElementInternals`, the same object a native control uses to
-     * publish its value and validity. `protected` — components reach it through
-     * the helpers below rather than poking at it directly.
+     * `ElementInternals` object for value/validity publishing (use helpers, don't access directly).
      */
     protected readonly internals: ElementInternals;
-    /** The `<form>` this control is associated with, or `null` when it is outside a form. */
-    readonly form: HTMLFormElement | null;
+    /**
+     * The `<form>` this control is associated with, or `null` when it is outside a form.
+     * Assigning re-associates via the `form` attribute, like a native control's `form=""`.
+     */
+    form: HTMLFormElement | null;
     /** Runs constraint validation, firing `invalid` when it fails. Mirrors `HTMLInputElement.checkValidity()`. */
     checkValidity(): boolean;
     /** Like `checkValidity()`, but also shows the browser's validation message. */
     reportValidity(): boolean;
     /**
-     * Sets or clears a validation message supplied from outside the component,
-     * mirroring `HTMLInputElement.setCustomValidity()`. Public, unlike the
-     * `protected` helpers below, because a `<skdx-field>` wrapping this control
-     * calls it to push its own error into the control's validity — the one
-     * method name that works identically on a native input and on an skdx
-     * form-associated element. An empty message clears it.
+     * Sets or clears custom validation message (public so `<skdx-field>` can push errors).
+     * Empty message clears.
      */
     setCustomValidity(message: string): void;
     /** Called by the browser when the containing form is reset. Override to restore the initial value. */
@@ -55,30 +41,21 @@ export declare class SkdxFormAssociated {
     protected multiFormValue(items: readonly (string | File)[]): SkdxFormValue;
     /** Flags or clears `valueMissing`, anchoring the browser's validation bubble to `anchor`. */
     protected setValueMissing(missing: boolean, message: string, anchor?: HTMLElement | null): void;
+    /**
+     * Flags or clears `rangeUnderflow` / `rangeOverflow`. Mutually exclusive with setValueMissing.
+     */
+    protected setRangeViolation(violation: 'underflow' | 'overflow' | null, message: string, anchor?: HTMLElement | null): void;
+    /**
+     * Flags or clears `stepMismatch`. Mutually exclusive with setValueMissing and setRangeViolation.
+     */
+    protected setStepMismatch(mismatch: boolean, message: string, anchor?: HTMLElement | null): void;
     /** Mirrors a native control's own `ValidityState` (and its message) into internals, anchored to it. */
     protected mirrorValidity(control: HTMLInputElement | HTMLTextAreaElement): void;
 }
 /**
- * Makes a Lit element a form-associated custom element: it submits inside a
- * native `<form>`, participates in constraint validation, and reacts to form
- * reset and `<fieldset disabled>` — the same wiring `<skdx-checkbox>` and
- * `<skdx-switch>` do by hand, factored out so every form control shares one
- * implementation.
- *
- * A component using this mixin declares its own `name`/`required` properties
- * (so the docs extractor and the custom-elements manifest still see them),
- * calls {@link SkdxFormAssociated.setFormValue} plus one of
- * {@link SkdxFormAssociated.setValueMissing} / {@link SkdxFormAssociated.mirrorValidity}
- * whenever its value changes, and overrides `formResetCallback()` to restore
- * its initial value.
- *
- * Every `ElementInternals` call is optional-chained: jsdom implements
- * `attachInternals()` but none of the form-participation methods on the
- * returned object (`setFormValue`, `setValidity`, `form`, `checkValidity`,
- * `reportValidity` are all absent), so unit tests patch the ones they assert
- * on onto `ElementInternals.prototype` and the rest degrade to no-ops instead
- * of throwing. Real form submission is a browser-only behavior — verify it
- * there.
+ * Mixin for form-associated Lit element: submits in `<form>`, constraint validation,
+ * form reset. Components call setFormValue and setValueMissing/mirrorValidity on changes,
+ * override formResetCallback. ElementInternals calls are optional-chained (jsdom degrades).
  *
  * @example
  * ```ts

package/dist/internal/form-associated.js

@@ -1 +1 @@
-function s(o){class i extends o{constructor(...e){super(...e),this.internals=this.attachInternals()}get form(){return this.internals.form??null}checkValidity(){return this.internals.checkValidity?.()??!0}reportValidity(){return this.internals.reportValidity?.()??!0}setCustomValidity(e){e?this.internals.setValidity?.({customError:!0},e):this.internals.setValidity?.({})}formResetCallback(){}formDisabledCallback(e){this.disabled=e}setFormValue(e){this.internals.setFormValue?.(e)}multiFormValue(e){let t=this.name;if(!t||e.length===0)return null;let r=new FormData;for(let a of e)r.append(t,a);return r}setValueMissing(e,t,r){this.internals.setValidity?.(e?{valueMissing:!0}:{},this.requiredMessage||t,r??void 0)}mirrorValidity(e){this.internals.setValidity?.(e.validity,e.validationMessage,e)}}return i.formAssociated=!0,i}export{s as FormAssociated};
+function s(o){class n extends o{constructor(...e){super(...e),this.internals=this.attachInternals()}get form(){return this.internals.form??null}set form(e){e?.id?this.setAttribute("form",e.id):this.removeAttribute("form")}checkValidity(){return this.internals.checkValidity?.()??!0}reportValidity(){return this.internals.reportValidity?.()??!0}setCustomValidity(e){e?this.internals.setValidity?.({customError:!0},e):this.internals.setValidity?.({})}formResetCallback(){}formDisabledCallback(e){this.disabled=e}setFormValue(e){this.internals.setFormValue?.(e)}multiFormValue(e){let t=this.name;if(!t||e.length===0)return null;let r=new FormData;for(let i of e)r.append(t,i);return r}setValueMissing(e,t,r){this.internals.setValidity?.(e?{valueMissing:!0}:{},this.requiredMessage||t,r??void 0)}setRangeViolation(e,t,r){let i=e==="underflow"?{rangeUnderflow:!0}:e==="overflow"?{rangeOverflow:!0}:{};this.internals.setValidity?.(i,t,r??void 0)}setStepMismatch(e,t,r){this.internals.setValidity?.(e?{stepMismatch:!0}:{},t,r??void 0)}mirrorValidity(e){this.internals.setValidity?.(e.validity,e.validationMessage,e)}}return n.formAssociated=!0,n}export{s as FormAssociated};

package/dist/internal/glyphs.cjs

@@ -0,0 +1,43 @@
+"use strict";var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var d=(t,e)=>{for(var r in e)s(t,r,{get:e[r],enumerable:!0})},p=(t,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of a(e))!n.call(t,o)&&o!==r&&s(t,o,{get:()=>e[o],enumerable:!(i=h(e,o))||i.enumerable});return t};var u=t=>p(s({},"__esModule",{value:!0}),t);var v={};d(v,{checkGlyph:()=>c,closeGlyph:()=>f,dashGlyph:()=>m,starGlyph:()=>g});module.exports=u(v);var l=require("lit"),c=l.html`<svg
+  viewBox="0 0 16 16"
+  width="1em"
+  height="1em"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M3 8.5l3 3 7-7"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>`,m=l.html`<svg
+  viewBox="0 0 16 16"
+  width="1em"
+  height="1em"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+</svg>`,f=l.html`<svg
+  viewBox="0 0 16 16"
+  width="1em"
+  height="1em"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+</svg>`,g=l.html`<svg
+  viewBox="0 0 20 20"
+  width="1em"
+  height="1em"
+  fill="currentColor"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path d="M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6-4.5-4.2 6.1-.7z" />
+</svg>`;0&&(module.exports={checkGlyph,closeGlyph,dashGlyph,starGlyph});

package/dist/internal/glyphs.d.cts

@@ -0,0 +1,16 @@
+import { type TemplateResult } from 'lit';
+/**
+ * Built-in default glyphs for derived anatomies, inlined rather than imported
+ * from `@skdx/icons` so framework packages don't depend on the icons package.
+ * All glyphs are `aria-hidden`, `focusable="false"`, sized `1em`, and painted
+ * with `currentColor` — decorative and colored by the surrounding text.
+ * @internal
+ */
+/** The check glyph a derived Checkbox Indicator draws while checked, absent a custom `slot="indicator"`. */
+export declare const checkGlyph: TemplateResult;
+/** The dash glyph a derived Checkbox Indicator draws while indeterminate, absent a custom `slot="indicator"`. */
+export declare const dashGlyph: TemplateResult;
+/** The × glyph a derived Tag Delete draws — the same shape `<skdx-tag-group>` composes onto its own generated tags. */
+export declare const closeGlyph: TemplateResult;
+/** The star glyph a derived Rating Item draws, absent a custom `slot="icon"`. */
+export declare const starGlyph: TemplateResult;

package/dist/internal/glyphs.d.ts

@@ -0,0 +1,16 @@
+import { type TemplateResult } from 'lit';
+/**
+ * Built-in default glyphs for derived anatomies, inlined rather than imported
+ * from `@skdx/icons` so framework packages don't depend on the icons package.
+ * All glyphs are `aria-hidden`, `focusable="false"`, sized `1em`, and painted
+ * with `currentColor` — decorative and colored by the surrounding text.
+ * @internal
+ */
+/** The check glyph a derived Checkbox Indicator draws while checked, absent a custom `slot="indicator"`. */
+export declare const checkGlyph: TemplateResult;
+/** The dash glyph a derived Checkbox Indicator draws while indeterminate, absent a custom `slot="indicator"`. */
+export declare const dashGlyph: TemplateResult;
+/** The × glyph a derived Tag Delete draws — the same shape `<skdx-tag-group>` composes onto its own generated tags. */
+export declare const closeGlyph: TemplateResult;
+/** The star glyph a derived Rating Item draws, absent a custom `slot="icon"`. */
+export declare const starGlyph: TemplateResult;

package/dist/internal/glyphs.js

@@ -0,0 +1,43 @@
+import{html as e}from"lit";var o=e`<svg
+  viewBox="0 0 16 16"
+  width="1em"
+  height="1em"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M3 8.5l3 3 7-7"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>`,l=e`<svg
+  viewBox="0 0 16 16"
+  width="1em"
+  height="1em"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+</svg>`,r=e`<svg
+  viewBox="0 0 16 16"
+  width="1em"
+  height="1em"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+</svg>`,s=e`<svg
+  viewBox="0 0 20 20"
+  width="1em"
+  height="1em"
+  fill="currentColor"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path d="M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6-4.5-4.2 6.1-.7z" />
+</svg>`;export{o as checkGlyph,r as closeGlyph,l as dashGlyph,s as starGlyph};

package/dist/internal/host-attributes.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},m=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of c(e))!f.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(i=l(e,r))||i.enumerable});return t};var p=t=>m(s({},"__esModule",{value:!0}),t);var w={};g(w,{applyHostAttributes:()=>d,claimHostAttributes:()=>a,forwardHostAttributes:()=>u,forwardHostAttributesToContent:()=>E,resolveHostLabel:()=>M,setOptionalAttribute:()=>v});module.exports=p(w);var b=new Set(["id","class","style"]);function A(t){return b.has(t)||t.startsWith("data-")||t.startsWith("aria-")}var o=new WeakMap;function a(t){let e=o.get(t);e||(e=new Map,o.set(t,e));for(let{name:n,value:i}of Array.from(t.attributes))A(n)&&(e.set(n,i),t.removeAttribute(n));return e}function d(t,e,n=[]){for(let[i,r]of e)n.includes(i)||t.setAttribute(i,r)}function u(t,e){let n=a(t);return d(e,n),n}function E(t,e){let i=u(t,e).get("id");i!==void 0&&(t.contentId=i)}function M(t,e){return t.get("aria-label")??(e||void 0)}function v(t,e,n){n===void 0?t.removeAttribute(e):t.setAttribute(e,n)}0&&(module.exports={applyHostAttributes,claimHostAttributes,forwardHostAttributes,forwardHostAttributesToContent,resolveHostLabel,setOptionalAttribute});

package/dist/internal/host-attributes.d.cts

@@ -0,0 +1,34 @@
+/**
+ * Claims and caches forwardable attributes from root, accumulating across
+ * rebuilds. Removes them from the host.
+ *
+ * @internal
+ */
+export declare function claimHostAttributes(root: Element): Map<string, string>;
+/**
+ * Applies claimed attributes to target, except those in `skip`
+ * (caller sets these).
+ *
+ * @internal
+ */
+export declare function applyHostAttributes(target: Element, claimed: ReadonlyMap<string, string>, skip?: readonly string[]): void;
+/** Claim and apply in one step. @internal */
+export declare function forwardHostAttributes(root: Element, target: Element): Map<string, string>;
+/**
+ * Forward to Content panel and update root's `contentId` if `id` was claimed,
+ * so IDREFs point to the forwarded element, not the minted one.
+ *
+ * @internal
+ */
+export declare function forwardHostAttributesToContent(root: Element & {
+    contentId: string;
+}, content: Element): void;
+/**
+ * Resolves accessible name: `aria-label` from host, else `placeholder`, else
+ * undefined. No fallback; missing names should surface, not be masked.
+ *
+ * @internal
+ */
+export declare function resolveHostLabel(claimed: ReadonlyMap<string, string>, placeholder?: string): string | undefined;
+/** Set attribute iff value is defined. @internal */
+export declare function setOptionalAttribute(target: Element, name: string, value: string | undefined): void;

package/dist/internal/host-attributes.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Claims and caches forwardable attributes from root, accumulating across
+ * rebuilds. Removes them from the host.
+ *
+ * @internal
+ */
+export declare function claimHostAttributes(root: Element): Map<string, string>;
+/**
+ * Applies claimed attributes to target, except those in `skip`
+ * (caller sets these).
+ *
+ * @internal
+ */
+export declare function applyHostAttributes(target: Element, claimed: ReadonlyMap<string, string>, skip?: readonly string[]): void;
+/** Claim and apply in one step. @internal */
+export declare function forwardHostAttributes(root: Element, target: Element): Map<string, string>;
+/**
+ * Forward to Content panel and update root's `contentId` if `id` was claimed,
+ * so IDREFs point to the forwarded element, not the minted one.
+ *
+ * @internal
+ */
+export declare function forwardHostAttributesToContent(root: Element & {
+    contentId: string;
+}, content: Element): void;
+/**
+ * Resolves accessible name: `aria-label` from host, else `placeholder`, else
+ * undefined. No fallback; missing names should surface, not be masked.
+ *
+ * @internal
+ */
+export declare function resolveHostLabel(claimed: ReadonlyMap<string, string>, placeholder?: string): string | undefined;
+/** Set attribute iff value is defined. @internal */
+export declare function setOptionalAttribute(target: Element, name: string, value: string | undefined): void;

package/dist/internal/host-attributes.js

@@ -0,0 +1 @@
+var o=new Set(["id","class","style"]);function a(t){return o.has(t)||t.startsWith("data-")||t.startsWith("aria-")}var r=new WeakMap;function d(t){let e=r.get(t);e||(e=new Map,r.set(t,e));for(let{name:n,value:i}of Array.from(t.attributes))a(n)&&(e.set(n,i),t.removeAttribute(n));return e}function u(t,e,n=[]){for(let[i,s]of e)n.includes(i)||t.setAttribute(i,s)}function l(t,e){let n=d(t);return u(e,n),n}function c(t,e){let i=l(t,e).get("id");i!==void 0&&(t.contentId=i)}function f(t,e){return t.get("aria-label")??(e||void 0)}function g(t,e,n){n===void 0?t.removeAttribute(e):t.setAttribute(e,n)}export{u as applyHostAttributes,d as claimHostAttributes,l as forwardHostAttributes,c as forwardHostAttributesToContent,f as resolveHostLabel,g as setOptionalAttribute};

package/dist/internal/menu-group.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var c=(l,e)=>{for(var t in e)i(l,t,{get:e[t],enumerable:!0})},u=(l,e,t,b)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of h(e))!n.call(l,a)&&a!==t&&i(l,a,{get:()=>e[a],enumerable:!(b=o(e,a))||b.enumerable});return l};var y=l=>u(i({},"__esModule",{value:!0}),l);var m={};c(m,{SkdxMenuGroupBase:()=>s});module.exports=y(m);var r=require("lit"),d=require("./ids.cjs"),s=class extends r.LitElement{constructor(){super(...arguments);this.labelTagName="";this.authoredLabelledBy=!1;this.labelledByChecked=!1;this.syncLabelling=()=>{if(this.authoredLabelledBy||this.hasAttribute("aria-label")||!this.labelTagName)return;let t=this.querySelector(`:scope > ${this.labelTagName}`);if(!t){this.removeAttribute("aria-labelledby");return}this.setAttribute("aria-labelledby",(0,d.ensureId)(t,"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 r.html`<slot @slotchange=${this.syncLabelling}></slot>`}};0&&(module.exports={SkdxMenuGroupBase});

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * Base for a menu family's Group/RadioGroup — sets `role="group"` and points
+ * `aria-labelledby` at its direct-child Label, minting an id if needed.
+ *
+ * Matched by tag name (not attribute-based lookup), since parent
+ * `connectedCallback` runs before children during parsing. The tag name is
+ * available from parse time; an attribute-based approach would miss a Label
+ * that hasn't upgraded yet. The `slotchange` fallback re-checks after the
+ * subtree settles. Consumer's `aria-label` or `aria-labelledby` wins.
+ * @internal
+ */
+export declare class SkdxMenuGroupBase extends LitElement {
+    /** @internal Tag name of this family's Label part, e.g. `'skdx-dropdown-menu-label'`. */
+    protected readonly labelTagName: string;
+    private authoredLabelledBy;
+    private labelledByChecked;
+    connectedCallback(): void;
+    private readonly syncLabelling;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * Base for a menu family's Group/RadioGroup — sets `role="group"` and points
+ * `aria-labelledby` at its direct-child Label, minting an id if needed.
+ *
+ * Matched by tag name (not attribute-based lookup), since parent
+ * `connectedCallback` runs before children during parsing. The tag name is
+ * available from parse time; an attribute-based approach would miss a Label
+ * that hasn't upgraded yet. The `slotchange` fallback re-checks after the
+ * subtree settles. Consumer's `aria-label` or `aria-labelledby` wins.
+ * @internal
+ */
+export declare class SkdxMenuGroupBase extends LitElement {
+    /** @internal Tag name of this family's Label part, e.g. `'skdx-dropdown-menu-label'`. */
+    protected readonly labelTagName: string;
+    private authoredLabelledBy;
+    private labelledByChecked;
+    connectedCallback(): void;
+    private readonly syncLabelling;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/internal/menu-group.js

@@ -0,0 +1 @@
+import{html as t,LitElement as a}from"lit";import{ensureId as r}from"./ids.js";var l=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 t`<slot @slotchange=${this.syncLabelling}></slot>`}};export{l as SkdxMenuGroupBase};

package/dist/internal/menu-items.cjs

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

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

@@ -0,0 +1,78 @@
+/**
+ * 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;
+    textValue?: string;
+} | {
+    type: 'separator';
+} | {
+    type: 'checkbox';
+    label: string;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    shortcut?: string;
+    disabled?: boolean;
+    textValue?: string;
+} | {
+    type: 'radio-group';
+    value?: string;
+    onValueChange?: (value: string) => void;
+    items: readonly SkdxMenuRadioItemDescriptor[];
+} | {
+    type: 'submenu';
+    label: string;
+    items: readonly SkdxMenuItemDescriptor[];
+    disabled?: boolean;
+    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;
+    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. Plain and checkbox entries only;
+     * radio group's `onValueChange` carries the selected value.
+     */
+    onSelect?: (item: SkdxMenuItemDescriptor) => void;
+    /** Index-path prefix for nested levels (e.g., `"2.1"`). */
+    prefix?: string;
+}
+/**
+ * Builds light-DOM element tree for one menu family's `items` collection.
+ * Shared by DropdownMenu, ContextMenu and Menubar (item model once; caller marks with
+ * `data-skdx-<family>-generated`, so helper stays marker-agnostic). Every item carries
+ * `data-value`: radio option's own value, else index path (`"0"`, `"2.1"`; matches `slot="item"`).
+ * @internal
+ */
+export declare function buildMenuItemElements(items: readonly SkdxMenuItemDescriptor[], tags: SkdxMenuItemTags, options?: SkdxMenuItemBuildOptions): Element[];

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

@@ -0,0 +1,78 @@
+/**
+ * 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;
+    textValue?: string;
+} | {
+    type: 'separator';
+} | {
+    type: 'checkbox';
+    label: string;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    shortcut?: string;
+    disabled?: boolean;
+    textValue?: string;
+} | {
+    type: 'radio-group';
+    value?: string;
+    onValueChange?: (value: string) => void;
+    items: readonly SkdxMenuRadioItemDescriptor[];
+} | {
+    type: 'submenu';
+    label: string;
+    items: readonly SkdxMenuItemDescriptor[];
+    disabled?: boolean;
+    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;
+    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. Plain and checkbox entries only;
+     * radio group's `onValueChange` carries the selected value.
+     */
+    onSelect?: (item: SkdxMenuItemDescriptor) => void;
+    /** Index-path prefix for nested levels (e.g., `"2.1"`). */
+    prefix?: string;
+}
+/**
+ * Builds light-DOM element tree for one menu family's `items` collection.
+ * Shared by DropdownMenu, ContextMenu and Menubar (item model once; caller marks with
+ * `data-skdx-<family>-generated`, so helper stays marker-agnostic). Every item carries
+ * `data-value`: radio option's own value, else index path (`"0"`, `"2.1"`; matches `slot="item"`).
+ * @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 S}from"./options.js";var g="http://www.w3.org/2000/svg";function h(){let n=document.createElementNS(g,"svg");return n.setAttribute("viewBox","0 0 16 16"),n.setAttribute("width","1em"),n.setAttribute("height","1em"),n.setAttribute("fill","none"),n.setAttribute("aria-hidden","true"),n.setAttribute("focusable","false"),n}function E(){let n=h(),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"),n.append(e),n}function k(){let n=h(),e=document.createElementNS(g,"circle");return e.setAttribute("cx","8"),e.setAttribute("cy","8"),e.setAttribute("r","3"),e.setAttribute("fill","currentColor"),n.append(e),n}function c(n,e){return"type"in n&&n.type===e}function b(n,e,o,d,a,m,t){n.setAttribute("data-value",e),n.setAttribute("data-text-value",d??o);let l=t?.get(e);if(l?n.append(S(l)):n.append(document.createTextNode(o)),a){let u=document.createElement(m.shortcut);u.textContent=a,n.append(u)}}function x(n,e,o={}){let{itemContent:d,onSelect:a,prefix:m}=o;return n.map((t,l)=>{let u=m===void 0?String(l):`${m}.${l}`;if(c(t,"separator"))return document.createElement(e.separator);if(c(t,"group")){let i=document.createElement(e.group);if(t.label!==void 0){let r=document.createElement(e.label);r.textContent=t.label,i.append(r)}return i.append(...x(t.items,e,{...o,prefix:u})),i}if(c(t,"radio-group")){let i=document.createElement(e.radioGroup);t.value!==void 0&&i.setAttribute("value",t.value),i.addEventListener("value-change",r=>{t.onValueChange?.(r.detail)});for(let r of t.items){let s=document.createElement(e.radioItem);s.setAttribute("value",r.value),r.disabled&&s.setAttribute("disabled",""),s.append(f(e,k())),b(s,r.value,r.label,r.textValue,void 0,e,d),i.append(s)}return i}if(c(t,"submenu")){let i=document.createElement(e.sub),r=document.createElement(e.subTrigger);t.disabled&&r.setAttribute("disabled",""),b(r,u,t.label,t.textValue,void 0,e,d);let s=document.createElement(e.subContent);return s.append(...x(t.items,e,{...o,prefix:u})),i.append(r,s),i}if(c(t,"checkbox")){let i=document.createElement(e.checkboxItem);return t.checked&&i.setAttribute("checked",""),t.disabled&&i.setAttribute("disabled",""),i.append(f(e,E())),b(i,u,t.label,t.textValue,t.shortcut,e,d),i.addEventListener("checked-change",r=>{t.onCheckedChange?.(r.detail)}),i.addEventListener("select",()=>a?.(t)),i}let p=document.createElement(e.item);return t.disabled&&p.setAttribute("disabled",""),b(p,u,t.label,t.textValue,t.shortcut,e,d),p.addEventListener("select",()=>{t.onSelect?.(),a?.(t)}),p})}function f(n,e){let o=document.createElement(n.itemIndicator);return o.append(e),o}export{x as buildMenuItemElements};