@skdx/web-components 0.26.0

package/dist/navigation-menu/NavigationMenuTrigger.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu-trigger>` — opens its item's
+ * `<skdx-navigation-menu-content>`: sets `id`, `aria-expanded`,
+ * `aria-controls`, `data-skdx-nav-trigger` (for the list's roving focus), and
+ * `data-state` directly on this **host** element rather than inside shadow
+ * DOM, because `aria-controls`/`aria-labelledby` IDREFs can't cross a shadow
+ * boundary (same reasoning as `<skdx-dialog-content>`). Renders a plain
+ * `<div part="trigger">` in shadow DOM for styling only — every listener and
+ * every ARIA attribute lives on the host, so a native `<button>` there would
+ * only add a second, separately-focusable control inside this one. Non-touch
+ * pointer-enter/leave start the root's open/close hover timers; click or
+ * Enter/Space selects the item immediately, or *closes* it when it was not a
+ * hover that opened it (see {@link hoverOpened}); Escape closes and refocuses
+ * the trigger.
+ *
+ * @csspart trigger - The `<div>` wrapping the trigger content inside the shadow root.
+ */
+export declare class SkdxNavigationMenuTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult;
+    private root;
+    private item;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get open();
+    private syncHostAttributes;
+    /**
+     * Whether a hovering pointer is what opened this item.
+     *
+     * The root deliberately treats selection as "ensure open" rather than
+     * "toggle", because a mouse click is always preceded by a pointer-enter that
+     * has already opened the item — toggling there would close it on the very
+     * click meant to open it. That reasoning holds only for pointers that hover.
+     * Touch is excluded from the hover handlers by design and the keyboard never
+     * fires them at all, so for those two inputs the item opened *without* a
+     * hover — and with no hover to leave, no outside-hover close and (on touch)
+     * no Escape key, the menu could be opened and then never closed. This flag
+     * separates the two cases: toggle when hover did not open it, ensure-open
+     * when it did. Mirrors React's `hoverOpenedRef`.
+     */
+    private hoverOpened;
+    private readonly handlePointerEnter;
+    private readonly handlePointerLeave;
+    private readonly select;
+    private readonly handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu-trigger': SkdxNavigationMenuTrigger;
+    }
+}

package/dist/navigation-menu/NavigationMenuTrigger.js

@@ -0,0 +1,14 @@
+var d=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var h=(r,n,e,o)=>{for(var t=o>1?void 0:o?l(n,e):n,s=r.length-1,a;s>=0;s--)(a=r[s])&&(t=(o?a(n,e,t):a(t))||t);return o&&t&&d(n,e,t),t};import{css as v,html as p,LitElement as m}from"lit";import{customElement as c}from"../internal/define.js";import{delegatesFocusShadowRootOptions as u}from"../internal/styles.js";var i=class extends m{constructor(){super(...arguments);this.root=null;this.item=null;this.onUpdate=()=>this.syncHostAttributes();this.hoverOpened=!1;this.handlePointerEnter=e=>{e.pointerType!=="touch"&&(this.hoverOpened=!0,this.item&&this.root?.onTriggerEnter(this.item.value))};this.handlePointerLeave=e=>{e.pointerType!=="touch"&&(this.hoverOpened=!1,this.root?.onTriggerLeave())};this.select=()=>{this.item&&(this.open&&!this.hoverOpened?this.root?.onClose():this.root?.onItemSelect(this.item.value))};this.handleKeyDown=e=>{e.key==="Escape"?(this.root?.onClose(),this.focus()):(e.key===" "||e.key==="Enter")&&this.item&&(e.preventDefault(),this.select())}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-navigation-menu"),this.item=this.closest("skdx-navigation-menu-item"),this.root?.addEventListener("skdx-navigation-menu-internal-update",this.onUpdate),this.setAttribute("data-skdx-nav-trigger",""),this.setAttribute("role","button"),this.tabIndex=-1,this.item&&(this.id=this.item.triggerId),this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.addEventListener("click",this.select),this.addEventListener("keydown",this.handleKeyDown),this.syncHostAttributes()}disconnectedCallback(){this.root?.removeEventListener("skdx-navigation-menu-internal-update",this.onUpdate),this.removeEventListener("pointerenter",this.handlePointerEnter),this.removeEventListener("pointerleave",this.handlePointerLeave),this.removeEventListener("click",this.select),this.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}get open(){return!!this.item&&this.root?.value===this.item.value}syncHostAttributes(){let e=this.open;this.setAttribute("aria-expanded",String(e)),this.item&&this.setAttribute("aria-controls",this.item.contentId),this.setAttribute("data-state",e?"open":"closed")}render(){return p`
+      <div part="trigger">
+        <slot></slot>
+      </div>
+    `}};i.shadowRootOptions=u,i.styles=v`
+    :host {
+      display: inline-block;
+    }
+    div {
+      font: inherit;
+      color: inherit;
+      width: 100%;
+    }
+  `,i=h([c("skdx-navigation-menu-trigger","navigation-menu","trigger")],i);export{i as SkdxNavigationMenuTrigger};

package/dist/navigation-menu/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var M=(t,o)=>{for(var n in o)e(t,n,{get:o[n],enumerable:!0})},N=(t,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of u(o))!v.call(t,i)&&i!==n&&e(t,i,{get:()=>o[i],enumerable:!(r=p(o,i))||r.enumerable});return t};var S=t=>N(e({},"__esModule",{value:!0}),t);var I={};M(I,{SkdxNavigationMenu:()=>a.SkdxNavigationMenu,SkdxNavigationMenuContent:()=>k.SkdxNavigationMenuContent,SkdxNavigationMenuIndicator:()=>f.SkdxNavigationMenuIndicator,SkdxNavigationMenuItem:()=>g.SkdxNavigationMenuItem,SkdxNavigationMenuLink:()=>m.SkdxNavigationMenuLink,SkdxNavigationMenuList:()=>x.SkdxNavigationMenuList,SkdxNavigationMenuTrigger:()=>d.SkdxNavigationMenuTrigger});module.exports=S(I);var a=require("./NavigationMenu.cjs"),x=require("./NavigationMenuList.cjs"),g=require("./NavigationMenuItem.cjs"),d=require("./NavigationMenuTrigger.cjs"),k=require("./NavigationMenuContent.cjs"),m=require("./NavigationMenuLink.cjs"),f=require("./NavigationMenuIndicator.cjs");0&&(module.exports={SkdxNavigationMenu,SkdxNavigationMenuContent,SkdxNavigationMenuIndicator,SkdxNavigationMenuItem,SkdxNavigationMenuLink,SkdxNavigationMenuList,SkdxNavigationMenuTrigger});

package/dist/navigation-menu/index.d.cts

@@ -0,0 +1,7 @@
+export { SkdxNavigationMenu } from './NavigationMenu.cjs';
+export { SkdxNavigationMenuList } from './NavigationMenuList.cjs';
+export { SkdxNavigationMenuItem } from './NavigationMenuItem.cjs';
+export { SkdxNavigationMenuTrigger } from './NavigationMenuTrigger.cjs';
+export { SkdxNavigationMenuContent } from './NavigationMenuContent.cjs';
+export { SkdxNavigationMenuLink } from './NavigationMenuLink.cjs';
+export { SkdxNavigationMenuIndicator } from './NavigationMenuIndicator.cjs';

package/dist/navigation-menu/index.d.ts

@@ -0,0 +1,7 @@
+export { SkdxNavigationMenu } from './NavigationMenu.js';
+export { SkdxNavigationMenuList } from './NavigationMenuList.js';
+export { SkdxNavigationMenuItem } from './NavigationMenuItem.js';
+export { SkdxNavigationMenuTrigger } from './NavigationMenuTrigger.js';
+export { SkdxNavigationMenuContent } from './NavigationMenuContent.js';
+export { SkdxNavigationMenuLink } from './NavigationMenuLink.js';
+export { SkdxNavigationMenuIndicator } from './NavigationMenuIndicator.js';

package/dist/navigation-menu/index.js

@@ -0,0 +1 @@
+import{SkdxNavigationMenu as i}from"./NavigationMenu.js";import{SkdxNavigationMenuList as e}from"./NavigationMenuList.js";import{SkdxNavigationMenuItem as a}from"./NavigationMenuItem.js";import{SkdxNavigationMenuTrigger as g}from"./NavigationMenuTrigger.js";import{SkdxNavigationMenuContent as k}from"./NavigationMenuContent.js";import{SkdxNavigationMenuLink as f}from"./NavigationMenuLink.js";import{SkdxNavigationMenuIndicator as u}from"./NavigationMenuIndicator.js";export{i as SkdxNavigationMenu,k as SkdxNavigationMenuContent,u as SkdxNavigationMenuIndicator,a as SkdxNavigationMenuItem,f as SkdxNavigationMenuLink,e as SkdxNavigationMenuList,g as SkdxNavigationMenuTrigger};

package/dist/number-field/NumberField.cjs

@@ -0,0 +1,5 @@
+"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(r,t)=>{for(var a in t)m(r,a,{get:t[a],enumerable:!0})},E=(r,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of d(t))!b.call(r,n)&&n!==a&&m(r,n,{get:()=>t[n],enumerable:!(s=f(t,n))||s.enumerable});return r};var C=r=>E(m({},"__esModule",{value:!0}),r),i=(r,t,a,s)=>{for(var n=s>1?void 0:s?f(t,a):t,u=r.length-1,p;u>=0;u--)(p=r[u])&&(n=(s?p(t,a,n):p(n))||n);return s&&n&&m(t,a,n),n};var O={};g(O,{SkdxNumberField:()=>e});module.exports=C(O);var l=require("lit"),o=require("lit/decorators.js"),h=require("../internal/define.cjs"),v=require("../internal/form-associated.cjs"),y=require("../internal/part.cjs");function c(r,t,a){return Math.min(Math.max(r,t),a)}var e=class extends(0,v.FormAssociated)(l.LitElement){constructor(){super(...arguments);this.value=0;this.min=-1/0;this.max=1/0;this.step=1;this.disabled=!1;this.invalid=!1;this.readOnly=!1}connectedCallback(){super.connectedCallback(),this.value=c(this.value,this.min,this.max)}updated(a){a.size>0&&this.dispatchEvent(new CustomEvent("skdx-number-field-internal-update")),a.has("value")&&this.setFormValue(String(this.value)),(0,y.reflectHostState)(this,{"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}formResetCallback(){this.value=c(Number(this.getAttribute("value")??0),this.min,this.max)}setValue(a){let s=c(a,this.min,this.max);s!==this.value&&(this.value=s,this.dispatchEvent(new CustomEvent("value-change",{detail:s,bubbles:!0,composed:!0})))}render(){return l.html`<slot></slot>`}};e.styles=l.css`
+    :host {
+      display: contents;
+    }
+  `,i([(0,o.property)({type:Number})],e.prototype,"value",2),i([(0,o.property)({type:Number})],e.prototype,"min",2),i([(0,o.property)({type:Number})],e.prototype,"max",2),i([(0,o.property)({type:Number})],e.prototype,"step",2),i([(0,o.property)({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([(0,o.property)({type:Boolean,reflect:!0})],e.prototype,"invalid",2),i([(0,o.property)({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),i([(0,o.property)({type:String,reflect:!0})],e.prototype,"name",2),i([(0,o.property)({type:Object,attribute:"format-options"})],e.prototype,"formatOptions",2),i([(0,o.property)({type:String})],e.prototype,"locale",2),e=i([(0,h.customElement)("skdx-number-field","number-field","root")],e);0&&(module.exports={SkdxNumberField});

package/dist/number-field/NumberField.d.cts

@@ -0,0 +1,80 @@
+import { LitElement, type PropertyValues } from 'lit';
+declare const SkdxNumberField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-number-field>` — the Web Components implementation of the shared
+ * NumberField contract (see `@skdx/shared`'s `numberFieldContract`). Owns
+ * the clamped numeric value and acts as the shared-state root that
+ * `<skdx-number-field-input>` / `<skdx-number-field-increment>` /
+ * `<skdx-number-field-decrement>` look up via `closest('skdx-number-field')`,
+ * re-rendering on the `skdx-number-field-internal-update` event this element
+ * dispatches whenever a relevant property changes (same convention as
+ * `<skdx-select>`). `value` is the single source of truth — like a native
+ * `<input>`'s `value`, there is no separate controlled/uncontrolled mode.
+ *
+ * Form-associated via `ElementInternals`: with a `name`, the current number is
+ * submitted by the surrounding `<form>`. It is always clamped into
+ * `[min, max]` and can never be empty, so the control has no constraint to
+ * violate — `checkValidity()` always passes.
+ *
+ * @example
+ * ```html
+ * <skdx-number-field value="1" min="0" max="10">
+ *   <skdx-number-field-decrement>-</skdx-number-field-decrement>
+ *   <skdx-number-field-input></skdx-number-field-input>
+ *   <skdx-number-field-increment>+</skdx-number-field-increment>
+ * </skdx-number-field>
+ * ```
+ *
+ * @fires value-change - Fired with the new number after clamping to `min`/`max` and snapping to `step`. Suppressed when the clamped result equals the current value.
+ */
+export declare class SkdxNumberField extends SkdxNumberField_base {
+    static styles: import("lit").CSSResult;
+    /** Current value. Listen for `value-change` to observe or override changes. */
+    value: number;
+    /** Lower bound the value is clamped to. */
+    min: number;
+    /** Upper bound the value is clamped to. */
+    max: number;
+    /** Amount the step buttons / Arrow Up-Down change the value by (Page Up/Down uses 10x this). */
+    step: number;
+    /** Disables the field, its input, and both step buttons. */
+    disabled: boolean;
+    /** Marks the field as invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid: boolean;
+    /** Makes the input read-only and makes the step buttons inert (focusable but no-op). */
+    readOnly: boolean;
+    /** Name used as the `FormData` entry key when the field is inside a `<form>`. @default undefined */
+    name?: string;
+    /**
+     * `Intl.NumberFormat` options used to display the value (currency, percent,
+     * unit, grouping). Typed text is parsed back through the same options and
+     * the formatted string is announced via `aria-valuetext`. `min`/`max`/`step`
+     * always operate on the numeric value — with `{ style: 'percent' }` the
+     * value is the fraction, so `0.5` shows as `50%`. As an attribute, pass JSON:
+     * `format-options='{"style":"currency","currency":"USD"}'`.
+     * @default undefined — the value is displayed as `String(value)`.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** BCP-47 locale used for formatting and parsing (decimal/group separators). @default undefined */
+    locale?: string;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /** Restores the number the `value` attribute declared, clamped like the initial value is. */
+    formResetCallback(): void;
+    /**
+     * @internal Clamps `next` to [min, max] and commits it as `value`,
+     * dispatching `value-change` synchronously (not via Lit's async `updated()`
+     * lifecycle) so callers observing the event right after triggering a
+     * commit — a click, blur, or keypress — see it without awaiting a render.
+     */
+    setValue(next: number): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-number-field': SkdxNumberField;
+    }
+}
+export {};

package/dist/number-field/NumberField.d.ts

@@ -0,0 +1,80 @@
+import { LitElement, type PropertyValues } from 'lit';
+declare const SkdxNumberField_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-number-field>` — the Web Components implementation of the shared
+ * NumberField contract (see `@skdx/shared`'s `numberFieldContract`). Owns
+ * the clamped numeric value and acts as the shared-state root that
+ * `<skdx-number-field-input>` / `<skdx-number-field-increment>` /
+ * `<skdx-number-field-decrement>` look up via `closest('skdx-number-field')`,
+ * re-rendering on the `skdx-number-field-internal-update` event this element
+ * dispatches whenever a relevant property changes (same convention as
+ * `<skdx-select>`). `value` is the single source of truth — like a native
+ * `<input>`'s `value`, there is no separate controlled/uncontrolled mode.
+ *
+ * Form-associated via `ElementInternals`: with a `name`, the current number is
+ * submitted by the surrounding `<form>`. It is always clamped into
+ * `[min, max]` and can never be empty, so the control has no constraint to
+ * violate — `checkValidity()` always passes.
+ *
+ * @example
+ * ```html
+ * <skdx-number-field value="1" min="0" max="10">
+ *   <skdx-number-field-decrement>-</skdx-number-field-decrement>
+ *   <skdx-number-field-input></skdx-number-field-input>
+ *   <skdx-number-field-increment>+</skdx-number-field-increment>
+ * </skdx-number-field>
+ * ```
+ *
+ * @fires value-change - Fired with the new number after clamping to `min`/`max` and snapping to `step`. Suppressed when the clamped result equals the current value.
+ */
+export declare class SkdxNumberField extends SkdxNumberField_base {
+    static styles: import("lit").CSSResult;
+    /** Current value. Listen for `value-change` to observe or override changes. */
+    value: number;
+    /** Lower bound the value is clamped to. */
+    min: number;
+    /** Upper bound the value is clamped to. */
+    max: number;
+    /** Amount the step buttons / Arrow Up-Down change the value by (Page Up/Down uses 10x this). */
+    step: number;
+    /** Disables the field, its input, and both step buttons. */
+    disabled: boolean;
+    /** Marks the field as invalid, exposed as `aria-invalid`/`data-invalid`. */
+    invalid: boolean;
+    /** Makes the input read-only and makes the step buttons inert (focusable but no-op). */
+    readOnly: boolean;
+    /** Name used as the `FormData` entry key when the field is inside a `<form>`. @default undefined */
+    name?: string;
+    /**
+     * `Intl.NumberFormat` options used to display the value (currency, percent,
+     * unit, grouping). Typed text is parsed back through the same options and
+     * the formatted string is announced via `aria-valuetext`. `min`/`max`/`step`
+     * always operate on the numeric value — with `{ style: 'percent' }` the
+     * value is the fraction, so `0.5` shows as `50%`. As an attribute, pass JSON:
+     * `format-options='{"style":"currency","currency":"USD"}'`.
+     * @default undefined — the value is displayed as `String(value)`.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** BCP-47 locale used for formatting and parsing (decimal/group separators). @default undefined */
+    locale?: string;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /** Restores the number the `value` attribute declared, clamped like the initial value is. */
+    formResetCallback(): void;
+    /**
+     * @internal Clamps `next` to [min, max] and commits it as `value`,
+     * dispatching `value-change` synchronously (not via Lit's async `updated()`
+     * lifecycle) so callers observing the event right after triggering a
+     * commit — a click, blur, or keypress — see it without awaiting a render.
+     */
+    setValue(next: number): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-number-field': SkdxNumberField;
+    }
+}
+export {};

package/dist/number-field/NumberField.js

@@ -0,0 +1,5 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var e=(o,i,a,n)=>{for(var s=n>1?void 0:n?c(i,a):i,l=o.length-1,m;l>=0;l--)(m=o[l])&&(s=(n?m(i,a,s):m(s))||s);return n&&s&&p(i,a,s),s};import{css as f,html as h,LitElement as v}from"lit";import{property as r}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{FormAssociated as d}from"../internal/form-associated.js";import{reflectHostState as b}from"../internal/part.js";function u(o,i,a){return Math.min(Math.max(o,i),a)}var t=class extends d(v){constructor(){super(...arguments);this.value=0;this.min=-1/0;this.max=1/0;this.step=1;this.disabled=!1;this.invalid=!1;this.readOnly=!1}connectedCallback(){super.connectedCallback(),this.value=u(this.value,this.min,this.max)}updated(a){a.size>0&&this.dispatchEvent(new CustomEvent("skdx-number-field-internal-update")),a.has("value")&&this.setFormValue(String(this.value)),b(this,{"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null})}formResetCallback(){this.value=u(Number(this.getAttribute("value")??0),this.min,this.max)}setValue(a){let n=u(a,this.min,this.max);n!==this.value&&(this.value=n,this.dispatchEvent(new CustomEvent("value-change",{detail:n,bubbles:!0,composed:!0})))}render(){return h`<slot></slot>`}};t.styles=f`
+    :host {
+      display: contents;
+    }
+  `,e([r({type:Number})],t.prototype,"value",2),e([r({type:Number})],t.prototype,"min",2),e([r({type:Number})],t.prototype,"max",2),e([r({type:Number})],t.prototype,"step",2),e([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([r({type:Boolean,reflect:!0})],t.prototype,"invalid",2),e([r({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),e([r({type:String,reflect:!0})],t.prototype,"name",2),e([r({type:Object,attribute:"format-options"})],t.prototype,"formatOptions",2),e([r({type:String})],t.prototype,"locale",2),t=e([y("skdx-number-field","number-field","root")],t);export{t as SkdxNumberField};

package/dist/number-field/NumberFieldDecrement.cjs

@@ -0,0 +1,19 @@
+"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var f=(i,e)=>{for(var o in e)n(i,o,{get:e[o],enumerable:!0})},T=(i,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of c(e))!y.call(i,t)&&t!==o&&n(i,t,{get:()=>e[t],enumerable:!(l=m(e,t))||l.enumerable});return i};var E=i=>T(n({},"__esModule",{value:!0}),i),h=(i,e,o,l)=>{for(var t=l>1?void 0:l?m(e,o):e,d=i.length-1,p;d>=0;d--)(p=i[d])&&(t=(l?p(e,o,t):p(t))||t);return l&&t&&n(e,o,t),t};var g={};f(g,{SkdxNumberFieldDecrement:()=>s});module.exports=E(g);var r=require("lit"),u=require("lit/decorators.js"),b=require("../internal/define.cjs"),v=require("../internal/part.cjs"),a=require("../internal/styles.cjs");var R=400,k=80,s=class extends r.LitElement{constructor(){super(...arguments);this.label="Decrement";this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.press=()=>this.root?.setValue(this.root.value-this.root.step);this.start=()=>{this.isDisabled||this.readOnlyInert||(this.press(),this.delayTimer=setTimeout(()=>{this.intervalTimer=setInterval(this.press,k)},R))};this.stop=()=>{clearTimeout(this.delayTimer),clearInterval(this.intervalTimer)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-number-field"),!this.root)throw new Error("<skdx-number-field-decrement> must be used inside <skdx-number-field>.");this.root.addEventListener("skdx-number-field-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-number-field-internal-update",this.handleRootUpdate),this.stop(),super.disconnectedCallback()}get atLimit(){return this.root!==null&&this.root.value<=this.root.min}get isDisabled(){return!!this.root?.disabled||this.atLimit}get readOnlyInert(){return!!this.root?.readOnly&&!this.isDisabled}updated(){(0,v.reflectHostState)(this,{"data-disabled":this.isDisabled?"":null})}render(){return r.html`
+      <button
+        part="decrement"
+        type="button"
+        aria-label=${this.label}
+        aria-disabled=${this.readOnlyInert?"true":r.nothing}
+        ?disabled=${this.isDisabled}
+        data-disabled=${this.isDisabled?"":r.nothing}
+        @pointerdown=${this.start}
+        @pointerup=${this.stop}
+        @pointerleave=${this.stop}
+      >
+        <slot></slot>
+      </button>
+    `}};s.shadowRootOptions=a.delegatesFocusShadowRootOptions,s.styles=[a.resetNativeControl,a.hiddenHostStyles,r.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],h([(0,u.property)({type:String})],s.prototype,"label",2),s=h([(0,b.customElement)("skdx-number-field-decrement","number-field","decrement")],s);0&&(module.exports={SkdxNumberFieldDecrement});

package/dist/number-field/NumberFieldDecrement.d.cts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-number-field-decrement>` — a button that lowers the closest
+ * `<skdx-number-field>`'s value by one `step`. Disabled once the value
+ * reaches `min` or the field itself is disabled; while the field is
+ * read-only, stays focusable but inert (`aria-disabled`, no-op press).
+ * Holding it down (pointer) repeats the decrement after an initial delay,
+ * then at a fixed interval, until released.
+ *
+ * @csspart decrement - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxNumberFieldDecrement extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Accessible name for the inner `<button>`. The button lives in this
+     * element's shadow root, so an `aria-label` written on the host names
+     * nothing — this property is the only way in from markup, and "Decrement"
+     * says nothing about *what* ("Remove one guest", "Diminuer").
+     * @default 'Decrement'
+     */
+    label: string;
+    private root;
+    private delayTimer?;
+    private intervalTimer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleRootUpdate;
+    private get atLimit();
+    private get isDisabled();
+    private get readOnlyInert();
+    private readonly press;
+    private readonly start;
+    private readonly stop;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-number-field-decrement': SkdxNumberFieldDecrement;
+    }
+}

package/dist/number-field/NumberFieldDecrement.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-number-field-decrement>` — a button that lowers the closest
+ * `<skdx-number-field>`'s value by one `step`. Disabled once the value
+ * reaches `min` or the field itself is disabled; while the field is
+ * read-only, stays focusable but inert (`aria-disabled`, no-op press).
+ * Holding it down (pointer) repeats the decrement after an initial delay,
+ * then at a fixed interval, until released.
+ *
+ * @csspart decrement - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxNumberFieldDecrement extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Accessible name for the inner `<button>`. The button lives in this
+     * element's shadow root, so an `aria-label` written on the host names
+     * nothing — this property is the only way in from markup, and "Decrement"
+     * says nothing about *what* ("Remove one guest", "Diminuer").
+     * @default 'Decrement'
+     */
+    label: string;
+    private root;
+    private delayTimer?;
+    private intervalTimer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleRootUpdate;
+    private get atLimit();
+    private get isDisabled();
+    private get readOnlyInert();
+    private readonly press;
+    private readonly start;
+    private readonly stop;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-number-field-decrement': SkdxNumberFieldDecrement;
+    }
+}

package/dist/number-field/NumberFieldDecrement.js

@@ -0,0 +1,19 @@
+var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(o,i,s,r)=>{for(var e=r>1?void 0:r?h(i,s):i,a=o.length-1,l;a>=0;a--)(l=o[a])&&(e=(r?l(i,s,e):l(e))||e);return r&&e&&p(i,s,e),e};import{css as m,html as u,LitElement as b,nothing as d}from"lit";import{property as v}from"lit/decorators.js";import{customElement as c}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{controlBoxOnHost as f,delegatesFocusShadowRootOptions as T,hiddenHostStyles as E,resetNativeControl as R}from"../internal/styles.js";var k=400,g=80,t=class extends b{constructor(){super(...arguments);this.label="Decrement";this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.press=()=>this.root?.setValue(this.root.value-this.root.step);this.start=()=>{this.isDisabled||this.readOnlyInert||(this.press(),this.delayTimer=setTimeout(()=>{this.intervalTimer=setInterval(this.press,g)},k))};this.stop=()=>{clearTimeout(this.delayTimer),clearInterval(this.intervalTimer)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-number-field"),!this.root)throw new Error("<skdx-number-field-decrement> must be used inside <skdx-number-field>.");this.root.addEventListener("skdx-number-field-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-number-field-internal-update",this.handleRootUpdate),this.stop(),super.disconnectedCallback()}get atLimit(){return this.root!==null&&this.root.value<=this.root.min}get isDisabled(){return!!this.root?.disabled||this.atLimit}get readOnlyInert(){return!!this.root?.readOnly&&!this.isDisabled}updated(){y(this,{"data-disabled":this.isDisabled?"":null})}render(){return u`
+      <button
+        part="decrement"
+        type="button"
+        aria-label=${this.label}
+        aria-disabled=${this.readOnlyInert?"true":d}
+        ?disabled=${this.isDisabled}
+        data-disabled=${this.isDisabled?"":d}
+        @pointerdown=${this.start}
+        @pointerup=${this.stop}
+        @pointerleave=${this.stop}
+      >
+        <slot></slot>
+      </button>
+    `}};t.shadowRootOptions=T,t.styles=[R,E,m`
+      :host {
+        display: inline-block;
+      }
+    `,f],n([v({type:String})],t.prototype,"label",2),t=n([c("skdx-number-field-decrement","number-field","decrement")],t);export{t as SkdxNumberFieldDecrement};

package/dist/number-field/NumberFieldIncrement.cjs

@@ -0,0 +1,19 @@
+"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var f=(i,e)=>{for(var o in e)n(i,o,{get:e[o],enumerable:!0})},T=(i,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of c(e))!y.call(i,t)&&t!==o&&n(i,t,{get:()=>e[t],enumerable:!(l=m(e,t))||l.enumerable});return i};var E=i=>T(n({},"__esModule",{value:!0}),i),h=(i,e,o,l)=>{for(var t=l>1?void 0:l?m(e,o):e,d=i.length-1,p;d>=0;d--)(p=i[d])&&(t=(l?p(e,o,t):p(t))||t);return l&&t&&n(e,o,t),t};var g={};f(g,{SkdxNumberFieldIncrement:()=>s});module.exports=E(g);var r=require("lit"),u=require("lit/decorators.js"),b=require("../internal/define.cjs"),v=require("../internal/part.cjs"),a=require("../internal/styles.cjs");var R=400,k=80,s=class extends r.LitElement{constructor(){super(...arguments);this.label="Increment";this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.press=()=>this.root?.setValue(this.root.value+this.root.step);this.start=()=>{this.isDisabled||this.readOnlyInert||(this.press(),this.delayTimer=setTimeout(()=>{this.intervalTimer=setInterval(this.press,k)},R))};this.stop=()=>{clearTimeout(this.delayTimer),clearInterval(this.intervalTimer)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-number-field"),!this.root)throw new Error("<skdx-number-field-increment> must be used inside <skdx-number-field>.");this.root.addEventListener("skdx-number-field-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-number-field-internal-update",this.handleRootUpdate),this.stop(),super.disconnectedCallback()}get atLimit(){return this.root!==null&&this.root.value>=this.root.max}get isDisabled(){return!!this.root?.disabled||this.atLimit}get readOnlyInert(){return!!this.root?.readOnly&&!this.isDisabled}updated(){(0,v.reflectHostState)(this,{"data-disabled":this.isDisabled?"":null})}render(){return r.html`
+      <button
+        part="increment"
+        type="button"
+        aria-label=${this.label}
+        aria-disabled=${this.readOnlyInert?"true":r.nothing}
+        ?disabled=${this.isDisabled}
+        data-disabled=${this.isDisabled?"":r.nothing}
+        @pointerdown=${this.start}
+        @pointerup=${this.stop}
+        @pointerleave=${this.stop}
+      >
+        <slot></slot>
+      </button>
+    `}};s.shadowRootOptions=a.delegatesFocusShadowRootOptions,s.styles=[a.resetNativeControl,a.hiddenHostStyles,r.css`
+      :host {
+        display: inline-block;
+      }
+    `,a.controlBoxOnHost],h([(0,u.property)({type:String})],s.prototype,"label",2),s=h([(0,b.customElement)("skdx-number-field-increment","number-field","increment")],s);0&&(module.exports={SkdxNumberFieldIncrement});

package/dist/number-field/NumberFieldIncrement.d.cts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-number-field-increment>` — a button that raises the closest
+ * `<skdx-number-field>`'s value by one `step`. Disabled once the value
+ * reaches `max` or the field itself is disabled; while the field is
+ * read-only, stays focusable but inert (`aria-disabled`, no-op press).
+ * Holding it down (pointer) repeats the increment after an initial delay,
+ * then at a fixed interval, until released.
+ *
+ * @csspart increment - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxNumberFieldIncrement extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Accessible name for the inner `<button>`. The button lives in this
+     * element's shadow root, so an `aria-label` written on the host names
+     * nothing — this property is the only way in from markup, and "Increment"
+     * says nothing about *what* ("Add one guest", "Augmenter").
+     * @default 'Increment'
+     */
+    label: string;
+    private root;
+    private delayTimer?;
+    private intervalTimer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleRootUpdate;
+    private get atLimit();
+    private get isDisabled();
+    private get readOnlyInert();
+    private readonly press;
+    private readonly start;
+    private readonly stop;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-number-field-increment': SkdxNumberFieldIncrement;
+    }
+}

package/dist/number-field/NumberFieldIncrement.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-number-field-increment>` — a button that raises the closest
+ * `<skdx-number-field>`'s value by one `step`. Disabled once the value
+ * reaches `max` or the field itself is disabled; while the field is
+ * read-only, stays focusable but inert (`aria-disabled`, no-op press).
+ * Holding it down (pointer) repeats the increment after an initial delay,
+ * then at a fixed interval, until released.
+ *
+ * @csspart increment - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxNumberFieldIncrement extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Accessible name for the inner `<button>`. The button lives in this
+     * element's shadow root, so an `aria-label` written on the host names
+     * nothing — this property is the only way in from markup, and "Increment"
+     * says nothing about *what* ("Add one guest", "Augmenter").
+     * @default 'Increment'
+     */
+    label: string;
+    private root;
+    private delayTimer?;
+    private intervalTimer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleRootUpdate;
+    private get atLimit();
+    private get isDisabled();
+    private get readOnlyInert();
+    private readonly press;
+    private readonly start;
+    private readonly stop;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-number-field-increment': SkdxNumberFieldIncrement;
+    }
+}

package/dist/number-field/NumberFieldIncrement.js

@@ -0,0 +1,19 @@
+var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(o,i,s,r)=>{for(var e=r>1?void 0:r?h(i,s):i,a=o.length-1,l;a>=0;a--)(l=o[a])&&(e=(r?l(i,s,e):l(e))||e);return r&&e&&p(i,s,e),e};import{css as m,html as u,LitElement as b,nothing as d}from"lit";import{property as v}from"lit/decorators.js";import{customElement as c}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{controlBoxOnHost as f,delegatesFocusShadowRootOptions as T,hiddenHostStyles as E,resetNativeControl as R}from"../internal/styles.js";var k=400,g=80,t=class extends b{constructor(){super(...arguments);this.label="Increment";this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.press=()=>this.root?.setValue(this.root.value+this.root.step);this.start=()=>{this.isDisabled||this.readOnlyInert||(this.press(),this.delayTimer=setTimeout(()=>{this.intervalTimer=setInterval(this.press,g)},k))};this.stop=()=>{clearTimeout(this.delayTimer),clearInterval(this.intervalTimer)}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-number-field"),!this.root)throw new Error("<skdx-number-field-increment> must be used inside <skdx-number-field>.");this.root.addEventListener("skdx-number-field-internal-update",this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-number-field-internal-update",this.handleRootUpdate),this.stop(),super.disconnectedCallback()}get atLimit(){return this.root!==null&&this.root.value>=this.root.max}get isDisabled(){return!!this.root?.disabled||this.atLimit}get readOnlyInert(){return!!this.root?.readOnly&&!this.isDisabled}updated(){y(this,{"data-disabled":this.isDisabled?"":null})}render(){return u`
+      <button
+        part="increment"
+        type="button"
+        aria-label=${this.label}
+        aria-disabled=${this.readOnlyInert?"true":d}
+        ?disabled=${this.isDisabled}
+        data-disabled=${this.isDisabled?"":d}
+        @pointerdown=${this.start}
+        @pointerup=${this.stop}
+        @pointerleave=${this.stop}
+      >
+        <slot></slot>
+      </button>
+    `}};t.shadowRootOptions=T,t.styles=[R,E,m`
+      :host {
+        display: inline-block;
+      }
+    `,f],n([v({type:String})],t.prototype,"label",2),t=n([c("skdx-number-field-increment","number-field","increment")],t);export{t as SkdxNumberFieldIncrement};

package/dist/number-field/NumberFieldInput.cjs

@@ -0,0 +1,23 @@
+"use strict";var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var $=(a,o)=>{for(var t in o)u(a,t,{get:o[t],enumerable:!0})},g=(a,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of x(o))!k.call(a,e)&&e!==t&&u(a,e,{get:()=>o[e],enumerable:!(r=p(o,e))||r.enumerable});return a};var E=a=>g(u({},"__esModule",{value:!0}),a),d=(a,o,t,r)=>{for(var e=r>1?void 0:r?p(o,t):o,s=a.length-1,l;s>=0;s--)(l=a[s])&&(e=(r?l(o,t,e):l(e))||e);return r&&e&&u(o,t,e),e};var L={};$(L,{SkdxNumberFieldInput:()=>n});module.exports=E(L);var i=require("lit"),m=require("lit/decorators.js"),f=require("../internal/aria-label.cjs"),v=require("../internal/define.cjs"),h=require("../internal/number-format.cjs"),c=require("../internal/styles.cjs");var n=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.text="0";this.hostLabel=null;this.handleRootUpdate=()=>{this.syncFromRoot(),this.requestUpdate()};this.handleInput=t=>{this.text=t.target.value};this.handleBlur=t=>{if(!this.root)return;let r=this.parse(this.text);Number.isNaN(r)?this.text=this.format(this.root.value):(this.root.setValue(r),this.text=this.format(this.root.value)),t.target.value=this.text};this.handleKeydown=t=>{if(!this.root)return;let{value:r,step:e}=this.root;t.key==="ArrowUp"?(t.preventDefault(),this.root.setValue(r+e)):t.key==="ArrowDown"?(t.preventDefault(),this.root.setValue(r-e)):t.key==="PageUp"?(t.preventDefault(),this.root.setValue(r+e*10)):t.key==="PageDown"&&(t.preventDefault(),this.root.setValue(r-e*10))}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}connectedCallback(){if(super.connectedCallback(),(0,c.installLightDomStyles)(),this.root=this.closest("skdx-number-field"),!this.root)throw new Error("<skdx-number-field-input> must be used inside <skdx-number-field>.");this.root.addEventListener("skdx-number-field-internal-update",this.handleRootUpdate),this.hostLabel=(0,f.takeHostAriaLabel)(this),this.syncFromRoot()}disconnectedCallback(){this.root?.removeEventListener("skdx-number-field-internal-update",this.handleRootUpdate),super.disconnectedCallback()}syncFromRoot(){this.root&&(this.text=this.format(this.root.value))}format(t){return(0,h.formatNumberValue)(t,this.root?.locale,this.root?.formatOptions)}parse(t){return(0,h.parseNumberValue)(t,this.root?.locale,this.root?.formatOptions)}render(){if(!this.root)return i.html``;let{min:t,max:r,disabled:e,readOnly:s,invalid:l,locale:b,formatOptions:y}=this.root;return i.html`
+      <input
+        part="input"
+        type="text"
+        inputmode="numeric"
+        role="spinbutton"
+        aria-label=${this.hostLabel??i.nothing}
+        aria-valuenow=${this.root.value}
+        aria-valuetext=${b||y?this.format(this.root.value):i.nothing}
+        aria-valuemin=${Number.isFinite(t)?t:i.nothing}
+        aria-valuemax=${Number.isFinite(r)?r:i.nothing}
+        aria-invalid=${l?"true":i.nothing}
+        aria-readonly=${s?"true":i.nothing}
+        data-invalid=${l?"":i.nothing}
+        data-readonly=${s?"":i.nothing}
+        ?disabled=${e}
+        ?readonly=${s}
+        .value=${this.text}
+        @input=${this.handleInput}
+        @blur=${this.handleBlur}
+        @keydown=${this.handleKeydown}
+      />
+    `}};d([(0,m.state)()],n.prototype,"text",2),d([(0,m.state)()],n.prototype,"hostLabel",2),n=d([(0,v.customElement)("skdx-number-field-input","number-field","input")],n);0&&(module.exports={SkdxNumberFieldInput});