@skdx/web-components 0.28.0 → 0.30.0

package/dist/number-field/NumberField.js

@@ -1,5 +1,5 @@
-var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=(r,a,t,i)=>{for(var s=i>1?void 0:i?f(a,t):a,u=r.length-1,o;u>=0;u--)(o=r[u])&&(s=(i?o(a,t,s):o(s))||s);return i&&s&&p(a,t,s),s};import{css as v,html as b,LitElement as d}from"lit";import{property as n}from"lit/decorators.js";import{hasAuthoredParts as y}from"../internal/authored.js";import{customElement as g}from"../internal/define.js";import{FormAssociated as V}from"../internal/form-associated.js";import{reflectHostState as E}from"../internal/part.js";import{fillNumberFieldAnatomy as A,NUMBER_FIELD_ANATOMY_GENERATED as M}from"./NumberFieldAnatomy.js";function m(r,a,t){return Math.min(Math.max(r,a),t)}function O(r){if(r===null||r.trim()==="")return null;let a=Number(r);return Number.isNaN(a)?null:a}function h(r){let a=String(r);if(a.includes("e")||a.includes("E"))return null;let t=a.indexOf(".");return t===-1?0:a.length-t-1}var e=class extends V(d){constructor(){super(...arguments);this.value=null;this.defaultValue=null;this.min=-1/0;this.max=1/0;this.step=1;this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.required=!1;this.clampBehavior="blur";this.allowWheel=!1;this.showControls=!0;this.incrementLabel="Increment";this.decrementLabel="Decrement";this.fillAnatomy=()=>{y(this,M)||A(this)}}get resolvedLocale(){if(!(!this.locale&&!this.formatOptions))return new Intl.NumberFormat(this.locale).resolvedOptions().locale}get outOfRange(){return this.value!==null&&(this.value<this.min||this.value>this.max)}connectedCallback(){super.connectedCallback(),this.hasAttribute("default-value")||(this.defaultValue=O(this.getAttribute("value"))),this.value===null&&(this.value=this.defaultValue),this.value=this.clampValue(this.value),queueMicrotask(this.fillAnatomy)}updated(t){t.size>0&&this.dispatchEvent(new CustomEvent("skdx-number-field-internal-update")),(t.has("value")||t.has("required"))&&this.syncFormState(),E(this,{"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null}),(t.has("showControls")||t.has("incrementLabel")||t.has("decrementLabel"))&&this.fillAnatomy()}syncFormState(){this.setFormValue(this.value===null?"":String(this.value)),this.setValueMissing(this.required&&this.value===null,"Please fill out this field.",this.querySelector("skdx-number-field-input input"))}formResetCallback(){this.value=this.clampValue(this.defaultValue)}clampValue(t){return t===null||this.clampBehavior==="never"?t:m(t,this.min,this.max)}setValue(t){let i=this.clampValue(t);i!==this.value&&(this.value=i,this.dispatchEvent(new CustomEvent("value-change",{detail:i,bubbles:!0,composed:!0})))}commitValue(t){let i=this.clampValue(t);this.setValue(i),this.dispatchEvent(new CustomEvent("value-commit",{detail:i,bubbles:!0,composed:!0}))}stepBy(t){let i=this.value??0,s=i+t*this.step,u=h(i),o=h(this.step),c=u===null||o===null?s:Number(s.toFixed(Math.min(Math.max(u,o),15)));this.commitValue(m(c,this.min,this.max))}render(){return b`<slot @slotchange=${this.fillAnatomy}></slot>`}};e.styles=v`
+var f=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var l=(n,r,t,a)=>{for(var s=a>1?void 0:a?v(r,t):r,u=n.length-1,o;u>=0;u--)(o=n[u])&&(s=(a?o(r,t,s):o(s))||s);return a&&s&&f(r,t,s),s};import{css as y,html as b,LitElement as d}from"lit";import{property as i}from"lit/decorators.js";import{hasAuthoredParts as g}from"../internal/authored.js";import{customElement as V}from"../internal/define.js";import{emit as m}from"../internal/events.js";import{FormAssociated as A}from"../internal/form-associated.js";import{reflectHostState as M}from"../internal/part.js";import{NUMBER_FIELD_FAMILY as B}from"./family.js";import{fillNumberFieldAnatomy as E,NUMBER_FIELD_ANATOMY_GENERATED as O}from"./NumberFieldAnatomy.js";function h(n,r,t){return Math.min(Math.max(n,r),t)}function L(n){if(n===null||n.trim()==="")return null;let r=Number(n);return Number.isNaN(r)?null:r}function c(n){let r=String(n);if(r.includes("e")||r.includes("E"))return null;let t=r.indexOf(".");return t===-1?0:r.length-t-1}var e=class extends A(d){constructor(){super(...arguments);this.value=null;this.defaultValue=null;this.min=-1/0;this.max=1/0;this.step=1;this.disabled=!1;this.invalid=!1;this.readOnly=!1;this.required=!1;this.clampBehavior="blur";this.allowWheel=!1;this.showControls=!0;this.incrementLabel="Increment";this.decrementLabel="Decrement";this.fillAnatomy=()=>{g(this,O)||E(this)}}get resolvedLocale(){if(!(!this.locale&&!this.formatOptions))return new Intl.NumberFormat(this.locale).resolvedOptions().locale}get outOfRange(){return this.value!==null&&(this.value<this.min||this.value>this.max)}connectedCallback(){super.connectedCallback(),this.hasAttribute("default-value")||(this.defaultValue=L(this.getAttribute("value"))),this.value===null&&(this.value=this.defaultValue),this.value=this.clampValue(this.value),queueMicrotask(this.fillAnatomy)}updated(t){t.size>0&&B.notify(this),(t.has("value")||t.has("required"))&&this.syncFormState(),M(this,{"data-disabled":this.disabled?"":null,"data-invalid":this.invalid?"":null,"data-readonly":this.readOnly?"":null}),(t.has("showControls")||t.has("incrementLabel")||t.has("decrementLabel"))&&this.fillAnatomy()}syncFormState(){this.setFormValue(this.value===null?"":String(this.value)),this.setValueMissing(this.required&&this.value===null,"Please fill out this field.",this.querySelector("skdx-number-field-input input"))}formResetCallback(){this.value=this.clampValue(this.defaultValue)}clampValue(t){return t===null||this.clampBehavior==="never"?t:h(t,this.min,this.max)}setValue(t){let a=this.clampValue(t);a!==this.value&&(this.value=a,m(this,"value-change",a))}commitValue(t){let a=this.clampValue(t);this.setValue(a),m(this,"value-commit",a)}stepBy(t){let a=this.value??0,s=a+t*this.step,u=c(a),o=c(this.step),p=u===null||o===null?s:Number(s.toFixed(Math.min(Math.max(u,o),15)));this.commitValue(h(p,this.min,this.max))}render(){return b`<slot @slotchange=${this.fillAnatomy}></slot>`}};e.styles=y`
     :host {
       display: contents;
     }
-  `,l([n({type:Number})],e.prototype,"value",2),l([n({type:Number,attribute:"default-value"})],e.prototype,"defaultValue",2),l([n({type:Number})],e.prototype,"min",2),l([n({type:Number})],e.prototype,"max",2),l([n({type:Number})],e.prototype,"step",2),l([n({type:Boolean,reflect:!0})],e.prototype,"disabled",2),l([n({type:Boolean,reflect:!0})],e.prototype,"invalid",2),l([n({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),l([n({type:String,reflect:!0})],e.prototype,"name",2),l([n({type:Boolean,reflect:!0})],e.prototype,"required",2),l([n({attribute:"required-message"})],e.prototype,"requiredMessage",2),l([n({type:Object,attribute:"format-options"})],e.prototype,"formatOptions",2),l([n({type:String})],e.prototype,"locale",2),l([n({type:String,attribute:"clamp-behavior"})],e.prototype,"clampBehavior",2),l([n({type:Boolean,reflect:!0,attribute:"allow-wheel"})],e.prototype,"allowWheel",2),l([n({type:Boolean,reflect:!0,attribute:"show-controls"})],e.prototype,"showControls",2),l([n({type:String,attribute:"increment-label"})],e.prototype,"incrementLabel",2),l([n({type:String,attribute:"decrement-label"})],e.prototype,"decrementLabel",2),e=l([g("skdx-number-field","number-field","root")],e);export{e as SkdxNumberField};
+  `,l([i({type:Number})],e.prototype,"value",2),l([i({type:Number,attribute:"default-value"})],e.prototype,"defaultValue",2),l([i({type:Number})],e.prototype,"min",2),l([i({type:Number})],e.prototype,"max",2),l([i({type:Number})],e.prototype,"step",2),l([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),l([i({type:Boolean,reflect:!0})],e.prototype,"invalid",2),l([i({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),l([i({type:String,reflect:!0})],e.prototype,"name",2),l([i({type:Boolean,reflect:!0})],e.prototype,"required",2),l([i({attribute:"required-message"})],e.prototype,"requiredMessage",2),l([i({type:Object,attribute:"format-options"})],e.prototype,"formatOptions",2),l([i({type:String})],e.prototype,"locale",2),l([i({type:String,attribute:"clamp-behavior"})],e.prototype,"clampBehavior",2),l([i({type:Boolean,reflect:!0,attribute:"allow-wheel"})],e.prototype,"allowWheel",2),l([i({type:Boolean,reflect:!0,attribute:"show-controls"})],e.prototype,"showControls",2),l([i({type:String,attribute:"increment-label"})],e.prototype,"incrementLabel",2),l([i({type:String,attribute:"decrement-label"})],e.prototype,"decrementLabel",2),l([i({type:String,reflect:!0,attribute:"data-size"})],e.prototype,"size",2),e=l([V("skdx-number-field","number-field","root")],e);export{e as SkdxNumberField};

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

@@ -2,15 +2,7 @@ import type { SkdxNumberField } from './NumberField.cjs';
 import './NumberFieldDecrement.cjs';
 import './NumberFieldIncrement.cjs';
 import './NumberFieldInput.cjs';
-/**
- * @internal Marks a direct child of `<skdx-number-field>` this module
- * generated. Written literally in the template below — Lit binds attribute
- * *values*, not attribute names, so the constant cannot be interpolated there.
- */
+/** @internal Marks a direct child this module generated; written literally since Lit can't interpolate attribute names. */
 export declare const NUMBER_FIELD_ANATOMY_GENERATED = "data-skdx-number-field-generated";
-/**
- * Builds the canonical anatomy: optional Decrement/Increment around Input.
- * Only called by `<skdx-number-field>` when no consumer-authored composition exists.
- * @internal
- */
+/** @internal Builds the canonical anatomy: optional Decrement/Increment around Input. */
 export declare function fillNumberFieldAnatomy(root: SkdxNumberField): void;

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

@@ -2,15 +2,7 @@ import type { SkdxNumberField } from './NumberField.js';
 import './NumberFieldDecrement.js';
 import './NumberFieldIncrement.js';
 import './NumberFieldInput.js';
-/**
- * @internal Marks a direct child of `<skdx-number-field>` this module
- * generated. Written literally in the template below — Lit binds attribute
- * *values*, not attribute names, so the constant cannot be interpolated there.
- */
+/** @internal Marks a direct child this module generated; written literally since Lit can't interpolate attribute names. */
 export declare const NUMBER_FIELD_ANATOMY_GENERATED = "data-skdx-number-field-generated";
-/**
- * Builds the canonical anatomy: optional Decrement/Increment around Input.
- * Only called by `<skdx-number-field>` when no consumer-authored composition exists.
- * @internal
- */
+/** @internal Builds the canonical anatomy: optional Decrement/Increment around Input. */
 export declare function fillNumberFieldAnatomy(root: SkdxNumberField): void;

package/dist/number-field/NumberFieldDecrement.cjs

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

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

@@ -1,11 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } 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.
+ * Button that lowers the closest `<skdx-number-field>`'s value by one `step`, repeating while held.
  *
  * @csspart decrement - The native `<button>` element inside the shadow root.
  */
@@ -17,6 +12,11 @@ export declare class SkdxNumberFieldDecrement extends LitElement {
      * @default 'Decrement'
      */
     label: string;
+    /**
+     * Disables this button on its own, on top of the field's own `disabled`.
+     * @default false — only the field's `disabled` state disables it.
+     */
+    disabled: boolean;
     private root;
     private delayTimer?;
     private intervalTimer?;
@@ -27,10 +27,12 @@ export declare class SkdxNumberFieldDecrement extends LitElement {
     private get isDisabled();
     private get atBoundInert();
     private readonly press;
+    private readonly tick;
     private readonly start;
+    private readonly onClick;
     private readonly stop;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,11 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } 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.
+ * Button that lowers the closest `<skdx-number-field>`'s value by one `step`, repeating while held.
  *
  * @csspart decrement - The native `<button>` element inside the shadow root.
  */
@@ -17,6 +12,11 @@ export declare class SkdxNumberFieldDecrement extends LitElement {
      * @default 'Decrement'
      */
     label: string;
+    /**
+     * Disables this button on its own, on top of the field's own `disabled`.
+     * @default false — only the field's `disabled` state disables it.
+     */
+    disabled: boolean;
     private root;
     private delayTimer?;
     private intervalTimer?;
@@ -27,10 +27,12 @@ export declare class SkdxNumberFieldDecrement extends LitElement {
     private get isDisabled();
     private get atBoundInert();
     private readonly press;
+    private readonly tick;
     private readonly start;
+    private readonly onClick;
     private readonly stop;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/number-field/NumberFieldDecrement.js

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

package/dist/number-field/NumberFieldIncrement.cjs

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

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

@@ -1,8 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Button that increments the closest `<skdx-number-field>` by one `step`.
- * Disabled at `max` or when field is disabled. Read-only keeps it focusable
- * but inert. Pointer-down repeats after delay, then at fixed interval.
+ * Button that increments the closest `<skdx-number-field>` by one `step`, repeating while held.
  *
  * @csspart increment - The native `<button>` element inside the shadow root.
  */
@@ -10,11 +8,15 @@ export declare class SkdxNumberFieldIncrement extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     /**
-     * Accessible name for the inner `<button>` (shadow root, so not from host `aria-label`).
-     * "Increment" says nothing about the *what*; provide context like "Add one guest".
+     * Accessible name for the inner `<button>`; the button is in shadow DOM so a host `aria-label` doesn't reach it.
      * @default 'Increment'
      */
     label: string;
+    /**
+     * Disables this button on its own, on top of the field's own `disabled`.
+     * @default false — only the field's `disabled` state disables it.
+     */
+    disabled: boolean;
     private root;
     private delayTimer?;
     private intervalTimer?;
@@ -25,10 +27,12 @@ export declare class SkdxNumberFieldIncrement extends LitElement {
     private get isDisabled();
     private get atBoundInert();
     private readonly press;
+    private readonly tick;
     private readonly start;
+    private readonly onClick;
     private readonly stop;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,8 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Button that increments the closest `<skdx-number-field>` by one `step`.
- * Disabled at `max` or when field is disabled. Read-only keeps it focusable
- * but inert. Pointer-down repeats after delay, then at fixed interval.
+ * Button that increments the closest `<skdx-number-field>` by one `step`, repeating while held.
  *
  * @csspart increment - The native `<button>` element inside the shadow root.
  */
@@ -10,11 +8,15 @@ export declare class SkdxNumberFieldIncrement extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     /**
-     * Accessible name for the inner `<button>` (shadow root, so not from host `aria-label`).
-     * "Increment" says nothing about the *what*; provide context like "Add one guest".
+     * Accessible name for the inner `<button>`; the button is in shadow DOM so a host `aria-label` doesn't reach it.
      * @default 'Increment'
      */
     label: string;
+    /**
+     * Disables this button on its own, on top of the field's own `disabled`.
+     * @default false — only the field's `disabled` state disables it.
+     */
+    disabled: boolean;
     private root;
     private delayTimer?;
     private intervalTimer?;
@@ -25,10 +27,12 @@ export declare class SkdxNumberFieldIncrement extends LitElement {
     private get isDisabled();
     private get atBoundInert();
     private readonly press;
+    private readonly tick;
     private readonly start;
+    private readonly onClick;
     private readonly stop;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/number-field/NumberFieldIncrement.js

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

package/dist/number-field/NumberFieldInput.cjs

@@ -1,25 +1,25 @@
-"use strict";var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var $=(s,o)=>{for(var t in o)u(s,t,{get:o[t],enumerable:!0})},k=(s,o,t,e)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of E(o))!L.call(s,r)&&r!==t&&u(s,r,{get:()=>o[r],enumerable:!(e=f(o,r))||e.enumerable});return s};var g=s=>k(u({},"__esModule",{value:!0}),s),h=(s,o,t,e)=>{for(var r=e>1?void 0:e?f(o,t):o,a=s.length-1,n;a>=0;a--)(n=s[a])&&(r=(e?n(o,t,r):n(r))||r);return e&&r&&u(o,t,r),r};var w={};$(w,{SkdxNumberFieldInput:()=>l});module.exports=g(w);var i=require("lit"),m=require("lit/decorators.js"),c=require("../internal/aria-label.cjs"),v=require("../internal/define.cjs"),d=require("../internal/number-format.cjs"),y=require("../internal/styles.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.text="";this.dirty=!1;this.hostLabel=null;this.handleRootUpdate=()=>{this.syncFromRoot(),this.requestUpdate()};this.handleInput=t=>{if(!this.root)return;let e=t.target.value;if(this.text=e,this.dirty=!0,e.trim()===""){this.root.setValue(null);return}let r=this.parse(e);Number.isNaN(r)||this.root.setValue(r)};this.settle=t=>{if(!(!this.root||!this.dirty)){if(this.dirty=!1,this.text.trim()==="")this.root.commitValue(null),this.text="";else{let e=this.parse(this.text);Number.isNaN(e)?this.root.commitValue(this.root.value):this.root.commitValue(e),this.text=this.format(this.root.value)}t&&(t.value=this.text)}};this.handleBlur=t=>{this.settle(t.target)};this.handleWheel=t=>{if(!this.root||!this.root.allowWheel||this.root.readOnly)return;let e=t.currentTarget;!e||e.ownerDocument.activeElement!==e||(t.preventDefault(),this.dirty=!1,this.root.stepBy(t.deltaY<0?1:-1),this.text=this.format(this.root.value),e.value=this.text)};this.handleKeydown=t=>{if(!this.root||this.root.readOnly)return;if(t.key==="Enter"){this.settle(t.target);return}let e=t.shiftKey?10:1,r=t.key==="ArrowUp"?e:t.key==="ArrowDown"?-e:t.key==="PageUp"?10:t.key==="PageDown"?-10:0;r!==0&&(t.preventDefault(),this.dirty=!1,this.root.stepBy(r),this.text=this.format(this.root.value),t.target.value=this.text)}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}connectedCallback(){if(super.connectedCallback(),(0,y.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,c.takeHostAriaLabel)(this),this.syncFromRoot()}disconnectedCallback(){this.root?.removeEventListener("skdx-number-field-internal-update",this.handleRootUpdate),super.disconnectedCallback()}syncFromRoot(){this.root&&(this.displays(this.text,this.root.value)||(this.text=this.format(this.root.value)))}format(t){return t===null?"":(0,d.formatNumberValue)(t,this.root?.resolvedLocale,this.root?.formatOptions)}parse(t){return(0,d.parseNumberValue)(t,this.root?.resolvedLocale,this.root?.formatOptions)}clamp(t){return t===null||!this.root||this.root.clampBehavior==="never"?t:Math.min(Math.max(t,this.root.min),this.root.max)}displays(t,e){let r=this.parse(t);return Number.isNaN(r)?e===null&&t.trim()==="":this.clamp(r)===e}render(){if(!this.root)return i.html``;let{min:t,max:e,disabled:r,readOnly:a,required:n,resolvedLocale:b,formatOptions:x}=this.root,p=this.root.invalid||this.root.outOfRange;return i.html`
+"use strict";var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var $=(o,i)=>{for(var t in i)u(o,t,{get:i[t],enumerable:!0})},k=(o,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of w(i))!N.call(o,r)&&r!==t&&u(o,r,{get:()=>i[r],enumerable:!(e=c(i,r))||e.enumerable});return o};var F=o=>k(u({},"__esModule",{value:!0}),o),h=(o,i,t,e)=>{for(var r=e>1?void 0:e?c(i,t):i,n=o.length-1,l;n>=0;n--)(l=o[n])&&(r=(e?l(i,t,r):l(r))||r);return e&&r&&u(i,t,r),r};var R={};$(R,{SkdxNumberFieldInput:()=>a});module.exports=F(R);var s=require("lit"),p=require("lit/decorators.js"),b=require("../internal/aria-label.cjs"),v=require("../internal/associated-label.cjs"),y=require("../internal/define.cjs"),x=require("../internal/ids.cjs"),L=require("../internal/light-dom-styles.cjs"),m=require("../internal/number-format.cjs"),d=require("./family.cjs");function M(o){let i=o.shiftKey?10:1;return o.key==="ArrowUp"?i:o.key==="ArrowDown"?-i:o.key==="PageUp"?10:o.key==="PageDown"?-10:0}function I(o,i){return o==="Home"&&Number.isFinite(i.min)?i.min:o==="End"&&Number.isFinite(i.max)?i.max:null}var a=class extends s.LitElement{constructor(){super(...arguments);this.root=null;this.text="";this.dirty=!1;this.hostLabel=null;this.handleRootUpdate=()=>{this.syncFromRoot(),this.requestUpdate()};this.handleInput=t=>{if(!this.root)return;let e=t.target.value;if(this.text=e,this.dirty=!0,e.trim()===""){this.root.setValue(null);return}let r=this.parse(e);Number.isNaN(r)||this.root.setValue(r)};this.settle=t=>{if(!(!this.root||!this.dirty)){if(this.dirty=!1,this.text.trim()==="")this.root.commitValue(null),this.text="";else{let e=this.parse(this.text);Number.isNaN(e)?this.root.commitValue(this.root.value):this.root.commitValue(e),this.text=this.format(this.root.value)}t&&(t.value=this.text)}};this.handleBlur=t=>{this.settle(t.target)};this.handleWheel=t=>{if(!this.root||!this.root.allowWheel||this.root.readOnly)return;let e=t.currentTarget;!e||e.ownerDocument.activeElement!==e||(t.preventDefault(),this.dirty=!1,this.root.stepBy(t.deltaY<0?1:-1),this.text=this.format(this.root.value),e.value=this.text)};this.handleKeydown=t=>{if(!this.root||this.root.readOnly)return;if(t.key==="Enter"){this.settle(t.target);return}let e=M(t),r=I(t.key,this.root);e===0&&r===null||(t.preventDefault(),this.dirty=!1,r===null?this.root.stepBy(e):this.root.commitValue(r),this.text=this.format(this.root.value),t.target.value=this.text)};this.ownLabelId=null}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}connectedCallback(){if(super.connectedCallback(),(0,L.installLightDomStyles)(),this.root=d.NUMBER_FIELD_FAMILY.root(this),!this.root)throw new Error("<skdx-number-field-input> must be used inside <skdx-number-field>.");this.root.addEventListener(d.NUMBER_FIELD_FAMILY.event,this.handleRootUpdate),this.hostLabel=(0,b.takeHostAriaLabel)(this),this.syncFromRoot()}disconnectedCallback(){this.root?.removeEventListener(d.NUMBER_FIELD_FAMILY.event,this.handleRootUpdate),super.disconnectedCallback()}syncFromRoot(){this.root&&(this.displays(this.text,this.root.value)||(this.text=this.format(this.root.value)))}format(t){return t===null?"":(0,m.formatNumberValue)(t,this.root?.resolvedLocale,this.root?.formatOptions)}parse(t){return(0,m.parseNumberValue)(t,this.root?.resolvedLocale,this.root?.formatOptions)}clamp(t){return t===null||!this.root||this.root.clampBehavior==="never"?t:Math.min(Math.max(t,this.root.min),this.root.max)}displays(t,e){let r=this.parse(t);return Number.isNaN(r)?e===null&&t.trim()==="":this.clamp(r)===e}syncLabelling(){let t=this.querySelector("input");if(!t||this.closest("[data-skdx-field]"))return;let e=(0,v.findAssociatedLabel)(this);if(!e){this.ownLabelId!==null&&t.removeAttribute("aria-labelledby"),this.ownLabelId=null;return}this.ownLabelId=(0,x.ensureId)(e,"skdx-number-field","label"),t.setAttribute("aria-labelledby",this.ownLabelId)}updated(){this.syncLabelling()}render(){if(!this.root)return s.html``;let{min:t,max:e,disabled:r,readOnly:n,required:l,resolvedLocale:E,formatOptions:g}=this.root,f=this.root.invalid||this.root.outOfRange;return s.html`
       <input
         part="input"
         type="text"
         inputmode="numeric"
         role="spinbutton"
-        aria-label=${this.hostLabel??i.nothing}
-        aria-valuenow=${this.root.value??i.nothing}
-        aria-valuetext=${(b||x)&&this.root.value!==null?this.format(this.root.value):i.nothing}
-        aria-valuemin=${Number.isFinite(t)?t:i.nothing}
-        aria-valuemax=${Number.isFinite(e)?e:i.nothing}
-        aria-invalid=${p?"true":i.nothing}
-        aria-readonly=${a?"true":i.nothing}
-        aria-required=${n?"true":i.nothing}
-        data-invalid=${p?"":i.nothing}
-        data-readonly=${a?"":i.nothing}
+        aria-label=${this.hostLabel??s.nothing}
+        aria-valuenow=${this.root.value??s.nothing}
+        aria-valuetext=${(E||g)&&this.root.value!==null?this.format(this.root.value):s.nothing}
+        aria-valuemin=${Number.isFinite(t)?t:s.nothing}
+        aria-valuemax=${Number.isFinite(e)?e:s.nothing}
+        aria-invalid=${f?"true":s.nothing}
+        aria-readonly=${n?"true":s.nothing}
+        aria-required=${l?"true":s.nothing}
+        data-invalid=${f?"":s.nothing}
+        data-readonly=${n?"":s.nothing}
         ?disabled=${r}
-        ?readonly=${a}
+        ?readonly=${n}
         .value=${this.text}
         @input=${this.handleInput}
         @blur=${this.handleBlur}
         @keydown=${this.handleKeydown}
         @wheel=${this.handleWheel}
       />
-    `}};h([(0,m.state)()],l.prototype,"text",2),h([(0,m.state)()],l.prototype,"hostLabel",2),l=h([(0,v.customElement)("skdx-number-field-input","number-field","input")],l);0&&(module.exports={SkdxNumberFieldInput});
+    `}};h([(0,p.state)()],a.prototype,"text",2),h([(0,p.state)()],a.prototype,"hostLabel",2),a=h([(0,y.customElement)("skdx-number-field-input","number-field","input")],a);0&&(module.exports={SkdxNumberFieldInput});

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

@@ -1,43 +1,35 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Text input for `<skdx-number-field>` (`role="spinbutton"`). Displays text locally (unclamped,
- * for mid-keystroke entry), publishes clamped value. Blur / Enter settles (commits). Arrow Up/Down
- * step by 1, Page Up/Down by 10. Clear input → null. Non-numeric text on blur → revert. Formatted
- * via `Intl.NumberFormat` per root's `formatOptions` / `locale`. Light DOM only (for label naming,
- * `<skdx-field>` discovery).
+ * Text input for `<skdx-number-field>` (`role="spinbutton"`) that displays unclamped text locally and publishes the clamped value on commit.
  *
  * @csspart input - Native `<input>` element (light DOM, so `::part()` does not reach).
  */
 export declare class SkdxNumberFieldInput extends LitElement {
     /** Light DOM, for the labelling reasons in the class docblock. */
-    createRenderRoot(): this;
+    createRenderRoot(): HTMLElement | DocumentFragment;
     /** Light DOM, so forward focus manually. */
     focus(options?: FocusOptions): void;
     private root;
     private text;
-    /** Whether anything typed since last settle (blur without typing → no `value-commit`). */
     private dirty;
-    /** Accessible name for the inner `<input>`, moved off this host — see `takeHostAriaLabel`. */
     private hostLabel;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private readonly handleRootUpdate;
     private syncFromRoot;
-    /** Format via `Intl.NumberFormat` (empty null, not zero). */
     private format;
-    /** Parse text via same formatter options. */
     private parse;
-    /** Clamp (null stays null, `clampBehavior: 'never'` unclamped). */
     private clamp;
-    /** Whether current text already renders value faithfully (don't reformat mid-keystroke). */
     private displays;
     private readonly handleInput;
-    /** Empty: null. Unparseable: revert. Otherwise: commit clamped. */
     private readonly settle;
     private readonly handleBlur;
     private readonly handleWheel;
     private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    private ownLabelId;
+    private syncLabelling;
+    protected updated(): void;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,43 +1,35 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Text input for `<skdx-number-field>` (`role="spinbutton"`). Displays text locally (unclamped,
- * for mid-keystroke entry), publishes clamped value. Blur / Enter settles (commits). Arrow Up/Down
- * step by 1, Page Up/Down by 10. Clear input → null. Non-numeric text on blur → revert. Formatted
- * via `Intl.NumberFormat` per root's `formatOptions` / `locale`. Light DOM only (for label naming,
- * `<skdx-field>` discovery).
+ * Text input for `<skdx-number-field>` (`role="spinbutton"`) that displays unclamped text locally and publishes the clamped value on commit.
  *
  * @csspart input - Native `<input>` element (light DOM, so `::part()` does not reach).
  */
 export declare class SkdxNumberFieldInput extends LitElement {
     /** Light DOM, for the labelling reasons in the class docblock. */
-    createRenderRoot(): this;
+    createRenderRoot(): HTMLElement | DocumentFragment;
     /** Light DOM, so forward focus manually. */
     focus(options?: FocusOptions): void;
     private root;
     private text;
-    /** Whether anything typed since last settle (blur without typing → no `value-commit`). */
     private dirty;
-    /** Accessible name for the inner `<input>`, moved off this host — see `takeHostAriaLabel`. */
     private hostLabel;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private readonly handleRootUpdate;
     private syncFromRoot;
-    /** Format via `Intl.NumberFormat` (empty null, not zero). */
     private format;
-    /** Parse text via same formatter options. */
     private parse;
-    /** Clamp (null stays null, `clampBehavior: 'never'` unclamped). */
     private clamp;
-    /** Whether current text already renders value faithfully (don't reformat mid-keystroke). */
     private displays;
     private readonly handleInput;
-    /** Empty: null. Unparseable: revert. Otherwise: commit clamped. */
     private readonly settle;
     private readonly handleBlur;
     private readonly handleWheel;
     private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    private ownLabelId;
+    private syncLabelling;
+    protected updated(): void;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/number-field/NumberFieldInput.js

@@ -1,25 +1,25 @@
-var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(u,a,t,e)=>{for(var r=e>1?void 0:e?v(a,t):a,o=u.length-1,l;o>=0;o--)(l=u[o])&&(r=(e?l(a,t,r):l(r))||r);return e&&r&&c(a,t,r),r};import{html as d,LitElement as y,nothing as i}from"lit";import{state as m}from"lit/decorators.js";import{takeHostAriaLabel as b}from"../internal/aria-label.js";import{customElement as x}from"../internal/define.js";import{formatNumberValue as E,parseNumberValue as L}from"../internal/number-format.js";import{installLightDomStyles as $}from"../internal/styles.js";var s=class extends y{constructor(){super(...arguments);this.root=null;this.text="";this.dirty=!1;this.hostLabel=null;this.handleRootUpdate=()=>{this.syncFromRoot(),this.requestUpdate()};this.handleInput=t=>{if(!this.root)return;let e=t.target.value;if(this.text=e,this.dirty=!0,e.trim()===""){this.root.setValue(null);return}let r=this.parse(e);Number.isNaN(r)||this.root.setValue(r)};this.settle=t=>{if(!(!this.root||!this.dirty)){if(this.dirty=!1,this.text.trim()==="")this.root.commitValue(null),this.text="";else{let e=this.parse(this.text);Number.isNaN(e)?this.root.commitValue(this.root.value):this.root.commitValue(e),this.text=this.format(this.root.value)}t&&(t.value=this.text)}};this.handleBlur=t=>{this.settle(t.target)};this.handleWheel=t=>{if(!this.root||!this.root.allowWheel||this.root.readOnly)return;let e=t.currentTarget;!e||e.ownerDocument.activeElement!==e||(t.preventDefault(),this.dirty=!1,this.root.stepBy(t.deltaY<0?1:-1),this.text=this.format(this.root.value),e.value=this.text)};this.handleKeydown=t=>{if(!this.root||this.root.readOnly)return;if(t.key==="Enter"){this.settle(t.target);return}let e=t.shiftKey?10:1,r=t.key==="ArrowUp"?e:t.key==="ArrowDown"?-e:t.key==="PageUp"?10:t.key==="PageDown"?-10:0;r!==0&&(t.preventDefault(),this.dirty=!1,this.root.stepBy(r),this.text=this.format(this.root.value),t.target.value=this.text)}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}connectedCallback(){if(super.connectedCallback(),$(),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=b(this),this.syncFromRoot()}disconnectedCallback(){this.root?.removeEventListener("skdx-number-field-internal-update",this.handleRootUpdate),super.disconnectedCallback()}syncFromRoot(){this.root&&(this.displays(this.text,this.root.value)||(this.text=this.format(this.root.value)))}format(t){return t===null?"":E(t,this.root?.resolvedLocale,this.root?.formatOptions)}parse(t){return L(t,this.root?.resolvedLocale,this.root?.formatOptions)}clamp(t){return t===null||!this.root||this.root.clampBehavior==="never"?t:Math.min(Math.max(t,this.root.min),this.root.max)}displays(t,e){let r=this.parse(t);return Number.isNaN(r)?e===null&&t.trim()==="":this.clamp(r)===e}render(){if(!this.root)return d``;let{min:t,max:e,disabled:r,readOnly:o,required:l,resolvedLocale:p,formatOptions:f}=this.root,h=this.root.invalid||this.root.outOfRange;return d`
+var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var u=(o,i,t,e)=>{for(var r=e>1?void 0:e?v(i,t):i,n=o.length-1,l;n>=0;n--)(l=o[n])&&(r=(e?l(i,t,r):l(r))||r);return e&&r&&b(i,t,r),r};import{html as m,LitElement as y,nothing as s}from"lit";import{state as p}from"lit/decorators.js";import{takeHostAriaLabel as x}from"../internal/aria-label.js";import{findAssociatedLabel as L}from"../internal/associated-label.js";import{customElement as E}from"../internal/define.js";import{ensureId as g}from"../internal/ids.js";import{installLightDomStyles as w}from"../internal/light-dom-styles.js";import{formatNumberValue as N,parseNumberValue as $}from"../internal/number-format.js";import{NUMBER_FIELD_FAMILY as h}from"./family.js";function k(o){let i=o.shiftKey?10:1;return o.key==="ArrowUp"?i:o.key==="ArrowDown"?-i:o.key==="PageUp"?10:o.key==="PageDown"?-10:0}function F(o,i){return o==="Home"&&Number.isFinite(i.min)?i.min:o==="End"&&Number.isFinite(i.max)?i.max:null}var a=class extends y{constructor(){super(...arguments);this.root=null;this.text="";this.dirty=!1;this.hostLabel=null;this.handleRootUpdate=()=>{this.syncFromRoot(),this.requestUpdate()};this.handleInput=t=>{if(!this.root)return;let e=t.target.value;if(this.text=e,this.dirty=!0,e.trim()===""){this.root.setValue(null);return}let r=this.parse(e);Number.isNaN(r)||this.root.setValue(r)};this.settle=t=>{if(!(!this.root||!this.dirty)){if(this.dirty=!1,this.text.trim()==="")this.root.commitValue(null),this.text="";else{let e=this.parse(this.text);Number.isNaN(e)?this.root.commitValue(this.root.value):this.root.commitValue(e),this.text=this.format(this.root.value)}t&&(t.value=this.text)}};this.handleBlur=t=>{this.settle(t.target)};this.handleWheel=t=>{if(!this.root||!this.root.allowWheel||this.root.readOnly)return;let e=t.currentTarget;!e||e.ownerDocument.activeElement!==e||(t.preventDefault(),this.dirty=!1,this.root.stepBy(t.deltaY<0?1:-1),this.text=this.format(this.root.value),e.value=this.text)};this.handleKeydown=t=>{if(!this.root||this.root.readOnly)return;if(t.key==="Enter"){this.settle(t.target);return}let e=k(t),r=F(t.key,this.root);e===0&&r===null||(t.preventDefault(),this.dirty=!1,r===null?this.root.stepBy(e):this.root.commitValue(r),this.text=this.format(this.root.value),t.target.value=this.text)};this.ownLabelId=null}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}connectedCallback(){if(super.connectedCallback(),w(),this.root=h.root(this),!this.root)throw new Error("<skdx-number-field-input> must be used inside <skdx-number-field>.");this.root.addEventListener(h.event,this.handleRootUpdate),this.hostLabel=x(this),this.syncFromRoot()}disconnectedCallback(){this.root?.removeEventListener(h.event,this.handleRootUpdate),super.disconnectedCallback()}syncFromRoot(){this.root&&(this.displays(this.text,this.root.value)||(this.text=this.format(this.root.value)))}format(t){return t===null?"":N(t,this.root?.resolvedLocale,this.root?.formatOptions)}parse(t){return $(t,this.root?.resolvedLocale,this.root?.formatOptions)}clamp(t){return t===null||!this.root||this.root.clampBehavior==="never"?t:Math.min(Math.max(t,this.root.min),this.root.max)}displays(t,e){let r=this.parse(t);return Number.isNaN(r)?e===null&&t.trim()==="":this.clamp(r)===e}syncLabelling(){let t=this.querySelector("input");if(!t||this.closest("[data-skdx-field]"))return;let e=L(this);if(!e){this.ownLabelId!==null&&t.removeAttribute("aria-labelledby"),this.ownLabelId=null;return}this.ownLabelId=g(e,"skdx-number-field","label"),t.setAttribute("aria-labelledby",this.ownLabelId)}updated(){this.syncLabelling()}render(){if(!this.root)return m``;let{min:t,max:e,disabled:r,readOnly:n,required:l,resolvedLocale:f,formatOptions:c}=this.root,d=this.root.invalid||this.root.outOfRange;return m`
       <input
         part="input"
         type="text"
         inputmode="numeric"
         role="spinbutton"
-        aria-label=${this.hostLabel??i}
-        aria-valuenow=${this.root.value??i}
-        aria-valuetext=${(p||f)&&this.root.value!==null?this.format(this.root.value):i}
-        aria-valuemin=${Number.isFinite(t)?t:i}
-        aria-valuemax=${Number.isFinite(e)?e:i}
-        aria-invalid=${h?"true":i}
-        aria-readonly=${o?"true":i}
-        aria-required=${l?"true":i}
-        data-invalid=${h?"":i}
-        data-readonly=${o?"":i}
+        aria-label=${this.hostLabel??s}
+        aria-valuenow=${this.root.value??s}
+        aria-valuetext=${(f||c)&&this.root.value!==null?this.format(this.root.value):s}
+        aria-valuemin=${Number.isFinite(t)?t:s}
+        aria-valuemax=${Number.isFinite(e)?e:s}
+        aria-invalid=${d?"true":s}
+        aria-readonly=${n?"true":s}
+        aria-required=${l?"true":s}
+        data-invalid=${d?"":s}
+        data-readonly=${n?"":s}
         ?disabled=${r}
-        ?readonly=${o}
+        ?readonly=${n}
         .value=${this.text}
         @input=${this.handleInput}
         @blur=${this.handleBlur}
         @keydown=${this.handleKeydown}
         @wheel=${this.handleWheel}
       />
-    `}};n([m()],s.prototype,"text",2),n([m()],s.prototype,"hostLabel",2),s=n([x("skdx-number-field-input","number-field","input")],s);export{s as SkdxNumberFieldInput};
+    `}};u([p()],a.prototype,"text",2),u([p()],a.prototype,"hostLabel",2),a=u([E("skdx-number-field-input","number-field","input")],a);export{a as SkdxNumberFieldInput};