@sken-ds/primitives 0.3.0 → 0.3.4

package/dist/sken-number-input.js

@@ -0,0 +1,538 @@
+import { t as e } from "./decorate-D4FKzyDw.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/sken-number-input.ts
+var s = 1, c = !0, l = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	#e;
+	constructor() {
+		super(), this.#e = null, this.defaultValue = void 0, this.value = void 0, this.min = void 0, this.max = void 0, this.step = s, this.showStepperButtons = c, this.placeholder = void 0, this.label = void 0, this.required = !1, this.disabled = !1, this.readonly = !1, this.helperText = void 0, this.infoText = void 0, this.warningText = void 0, this.validText = void 0, this.invalidText = void 0, this.textAlignment = "end", this.size = "md", this.invalid = !1, this.describedById = void 0, this.name = void 0, this.#t = "", this.#r = "0.5rem", this.#i = () => {
+			let e = this.renderRoot.querySelector("input"), t = this.renderRoot.querySelector(".steppers"), n = this.renderRoot.querySelector(".slot-end");
+			!e || !n || requestAnimationFrame(() => {
+				if (!e.isConnected) return;
+				let r = t && this.showStepperButtons ? t.getBoundingClientRect().width : 0, i = n.getBoundingClientRect().width, a = parseFloat(getComputedStyle(e).fontSize) * .5, o = r, s = o + a;
+				n.style.insetInlineEnd = s > 0 ? `${s}px` : "0.5rem";
+				let c = s + i, l = Math.max(o, c) + a;
+				e.style.paddingInlineEnd = `${l}px`;
+			});
+		}, this.#a = null, this.#o = null, this.#c = (e) => {
+			let t = e.target;
+			this.#t = t.value;
+			let n = this.#v(t.value);
+			this.value, this.#n(), this.dispatchEvent(new CustomEvent("sken-input", {
+				detail: n,
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.#l = (e) => {
+			let t = e.target, n = this.#v(t.value), r = this.#_(n);
+			r !== n && (this.#t = r === void 0 ? "" : String(r), t.value = this.#t), this.#n(), this.dispatchEvent(new CustomEvent("sken-change", {
+				detail: r,
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.#u = (e) => {
+			this.dispatchEvent(new CustomEvent("sken-focus", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.#d = (e) => {
+			this.dispatchEvent(new CustomEvent("sken-blur", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.#f = (e) => {
+			if (this.disabled || this.readonly) return;
+			let t = e.shiftKey || e.key === "PageUp" || e.key === "PageDown" ? 10 : 1;
+			e.key === "ArrowUp" ? (e.preventDefault(), this.#h(1, t)) : e.key === "ArrowDown" ? (e.preventDefault(), this.#h(-1, t)) : e.key === "PageUp" ? (e.preventDefault(), this.#h(1, 10)) : e.key === "PageDown" ? (e.preventDefault(), this.#h(-1, 10)) : e.key === "Home" && this.min !== void 0 ? (e.preventDefault(), this.#g(this.min)) : e.key === "End" && this.max !== void 0 ? (e.preventDefault(), this.#g(this.max)) : e.key;
+		}, this.#p = () => this.#h(1), this.#m = () => this.#h(-1);
+		try {
+			this.#e = this.attachInternals();
+		} catch {
+			this.#e = null;
+		}
+	}
+	#t;
+	connectedCallback() {
+		super.connectedCallback(), this.#t = this.value === void 0 ? this.defaultValue === void 0 ? "" : String(this.defaultValue) : String(this.value), this.#n();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#a?.disconnect(), this.#o?.disconnect();
+	}
+	formResetCallback() {
+		if (this.value === void 0) {
+			this.#t = this.defaultValue === void 0 ? "" : String(this.defaultValue);
+			let e = this.renderRoot.querySelector("input");
+			e && (e.value = this.#t), this.#n();
+		} else this.requestUpdate();
+	}
+	formDisabledCallback(e) {
+		this.disabled = e;
+	}
+	#n() {
+		if (!this.#e) return;
+		let e = this.value === void 0 ? "" : String(this.value);
+		this.#e.setFormValue(e);
+	}
+	firstUpdated() {
+		let e = this.renderRoot.querySelector(".slot-end"), t = this.renderRoot.querySelector("slot[name=\"end\"]");
+		e && t && (this.#a = new MutationObserver(() => this.#i()), this.#a.observe(e, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0
+		}), t.addEventListener("slotchange", this.#i)), this.#o = new IntersectionObserver((e) => {
+			for (let t of e) t.isIntersecting && this.#i();
+		}), this.#o.observe(this), this.#i();
+	}
+	#r;
+	#i;
+	#a;
+	#o;
+	static {
+		this.styles = n`
+    :host {
+      display: inline-block;
+      inline-size: 100%;
+    }
+
+    .field {
+      display: grid;
+      gap: 0.375rem;
+    }
+
+    .label {
+      font-size: 0.8125rem;
+      font-weight: 500;
+      color: var(--sken-foreground);
+    }
+
+    .label[data-required='true']::after {
+      content: ' *';
+      color: var(--sken-destructive);
+    }
+
+    .input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      inline-size: 100%;
+    }
+
+    input {
+      box-sizing: border-box;
+      inline-size: 100%;
+      border: 1px solid var(--sken-border);
+      border-radius: var(--sken-md);
+      background: var(--sken-input);
+      color: var(--sken-foreground);
+      font-family: var(--sken-family-sans);
+      font-size: var(--sken-size-md);
+      line-height: 1.25;
+      text-overflow: ellipsis;
+      padding-block: var(--sken-2);
+      padding-inline: var(--sken-3);
+      /* When the ± steppers are visible, reserve the right edge
+         for them so the value text never overlaps. 1.5rem (button)
+         + 2 * 0.25rem (insets) + 0.25rem (air) = 2.25rem. */
+      padding-inline-end: var(--sken-3);
+      min-block-size: 2.25rem;
+      transition:
+        border-color 120ms ease,
+        box-shadow 120ms ease;
+      /* Hide the native steppers: we render our own. */
+      -moz-appearance: textfield;
+    }
+
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    input::placeholder {
+      color: var(--sken-muted-foreground);
+      opacity: 1;
+    }
+
+    /* ── Stepper buttons ───────────────────────────────────── */
+    /*
+     * The stepper column is a vertical pair of + and − buttons
+     * anchored to the right edge of the input. Sizes scale with
+     * the host's [size] attribute (sm / md / lg) so the buttons
+     * match the input's vertical rhythm. Default (md) is 24x20
+     * per button. Glyph color is --sken-foreground; hover swaps
+     * to --sken-primary. Disabled state uses --sken-disabled.
+     */
+    .steppers {
+      position: absolute;
+      inset-block: 0.25rem;
+      inset-inline-end: 0.25rem;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .stepper {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 1.5rem;
+      block-size: 1.25rem;
+      background: transparent;
+      border: 0;
+      padding: 0;
+      color: var(--sken-foreground);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 1rem;
+      line-height: 1;
+      font-weight: 600;
+      border-radius: var(--sken-sm, 0.25rem);
+      /* The parent .steppers is a flex column; prevent the
+         buttons from being squashed when the host's vertical
+         rhythm is tight (sm). The explicit block-size wins. */
+      flex-shrink: 0;
+      transition: color 120ms ease, background-color 120ms ease;
+    }
+
+    .stepper:hover:not(:disabled) {
+      color: var(--sken-primary);
+      /* No background fill on hover. A background would paint
+         over the input's right border, hiding it. The color
+         change to --sken-primary is enough affordance for a
+         20x24px icon button. */
+      background: transparent;
+    }
+
+    .stepper:focus-visible {
+      outline: 2px solid var(--sken-ring, currentColor);
+      outline-offset: 1px;
+    }
+
+    .stepper:disabled {
+      cursor: not-allowed;
+      opacity: var(--sken-disabled);
+    }
+
+    /* When the ± steppers are visible, reserve the right edge
+       of the input so the value text never overlaps. The
+       reservation is 2rem for the md size (default): 1.5rem
+       (button) + 2 * 0.25rem (column insets). The sm / lg
+       variants below override the button size, so the
+       reservation needs to scale too. */
+    :host([show-stepper-buttons]) input {
+      padding-inline-end: 2rem;
+    }
+
+    /* ── Stepper sizes ─────────────────────────────────────── */
+    :host([size='sm']) .steppers {
+      inset-block: 0.125rem;
+      inset-inline-end: 0.125rem;
+      gap: 1px;
+    }
+    :host([size='sm']) .stepper {
+      inline-size: 1.125rem;
+      block-size: 0.875rem;
+      font-size: 0.75rem;
+    }
+    /* sm: 1.125rem (button) + 2 * 0.125rem (insets) = 1.375rem,
+       plus 0.125rem of breathing air = 1.5rem. */
+    :host([size='sm'][show-stepper-buttons]) input {
+      padding-inline-end: 1.5rem;
+    }
+
+    :host([size='lg']) .steppers {
+      inset-block: 0.375rem;
+      inset-inline-end: 0.375rem;
+      gap: 3px;
+    }
+    :host([size='lg']) .stepper {
+      inline-size: 1.75rem;
+      block-size: 1.5rem;
+      font-size: 1.125rem;
+    }
+    /* lg: 1.75rem (button) + 2 * 0.375rem (insets) = 2.5rem,
+       plus 0.25rem of breathing air = 2.75rem. */
+    :host([size='lg'][show-stepper-buttons]) input {
+      padding-inline-end: 2.75rem;
+    }
+
+    /* Hide steppers on touch devices where they would be hard
+       to hit accurately. The user can still use ↑/↓ keys or
+       type directly. */
+    @media (hover: none) {
+      .steppers {
+        display: none;
+      }
+      input {
+        padding-inline-end: var(--sken-3);
+      }
+      :host([size='sm']) input {
+        padding-inline-end: var(--sken-2);
+      }
+      :host([size='lg']) input {
+        padding-inline-end: var(--sken-4);
+      }
+    }
+
+    /* ── Slot containers ────────────────────────────────────── */
+    .slot {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+      pointer-events: none;
+      color: var(--sken-muted-foreground);
+    }
+
+    .slot ::slotted(*) {
+      pointer-events: auto;
+    }
+
+    .slot-start {
+      inset-inline-start: 0.5rem;
+    }
+
+    /*
+     * The end slot's position is set in JS via the inline style
+     * (see #adjustLayout). The rule below is a fallback for the
+     * initial render before JS has measured the slot, and a
+     * sensible default when the slot is empty.
+     */
+    .slot-end {
+      inset-inline-end: 0.5rem;
+    }
+
+    /* ── States ─────────────────────────────────────────────── */
+    .input-wrapper:hover input:not(:disabled):not(:read-only) {
+      border-color: var(--sken-foreground);
+    }
+
+    .input-wrapper:focus-within input {
+      outline: 2px solid var(--sken-ring, currentColor);
+      outline-offset: 2px;
+      border-color: var(--sken-primary);
+    }
+
+    input:disabled {
+      cursor: not-allowed;
+      opacity: var(--sken-disabled);
+    }
+
+    input:read-only {
+      background: var(--sken-muted);
+    }
+
+    :host([invalid]) input {
+      border-color: var(--sken-destructive);
+    }
+
+    :host([invalid]) .input-wrapper:focus-within input {
+      outline-color: var(--sken-destructive);
+    }
+
+    /* ── Sizes ──────────────────────────────────────────────── */
+    :host([size='sm']) input {
+      padding-block: var(--sken-1);
+      padding-inline: var(--sken-2);
+      font-size: var(--sken-size-sm);
+      /* 2 × 0.875rem (buttons) + 1px (gap) + 2 × 0.125rem
+         (insets) = ~2.0625rem. Round up to 2.25rem for visual
+         breathing room. */
+      min-block-size: 2.25rem;
+    }
+    :host([size='md']) input {
+      /* Default styles above. */
+    }
+    :host([size='lg']) input {
+      padding-block: var(--sken-3);
+      padding-inline: var(--sken-4);
+      font-size: var(--sken-size-lg);
+      /* 2 × 1.5rem (buttons) + 3px (gap) + 2 × 0.375rem
+         (insets) = ~3.9375rem. Round up to 4rem. */
+      min-block-size: 4rem;
+    }
+
+    /* ── Validation messages ─────────────────────────────────── */
+    .messages {
+      display: grid;
+      gap: 0.25rem;
+    }
+
+    .message {
+      margin: 0;
+      font-size: 0.75rem;
+      line-height: 1.4;
+    }
+
+    .message[data-tone='info'] {
+      color: var(--sken-info, #0082ff);
+    }
+
+    .message[data-tone='warning'] {
+      color: var(--sken-warning, #f59e0b);
+    }
+
+    .message[data-tone='valid'] {
+      color: var(--sken-success, #10b981);
+    }
+
+    .message[data-tone='invalid'] {
+      color: var(--sken-destructive, #dc2626);
+    }
+
+    .message[data-tone='helper'] {
+      color: var(--sken-muted-foreground);
+    }
+  `;
+	}
+	render() {
+		let e = this.#s();
+		return r`
+      <div class="field" part="field">
+        ${this.label ? r`
+              <label class="label" part="label" data-required=${this.required}>
+                ${this.label}
+              </label>
+            ` : i}
+        <div class="input-wrapper" part="wrapper">
+          <div class="slot slot-start" part="slot-start">
+            <slot name="start"></slot>
+          </div>
+          <input
+            part="input"
+            type="number"
+            .value=${this.#t}
+            placeholder=${this.placeholder ?? ""}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            min=${this.min ?? ""}
+            max=${this.max ?? ""}
+            step=${this.step}
+            aria-invalid=${this.invalid ? "true" : "false"}
+            aria-describedby=${this.describedById ?? ""}
+            name=${this.name ?? ""}
+            style="text-align: ${this.textAlignment}"
+            @input=${this.#c}
+            @change=${this.#l}
+            @focus=${this.#u}
+            @blur=${this.#d}
+            @keydown=${this.#f}
+          />
+          <div class="slot slot-end" part="slot-end">
+            <slot name="end"></slot>
+          </div>
+          ${this.showStepperButtons ? r`
+                <div class="steppers" part="steppers">
+                  <button
+                    class="stepper"
+                    part="stepper stepper-up"
+                    type="button"
+                    aria-label="Increment"
+                    ?disabled=${this.disabled || this.readonly || this.value !== void 0 && this.max !== void 0 && this.value >= this.max}
+                    @click=${this.#p}
+                  >
+                    +
+                  </button>
+                  <button
+                    class="stepper"
+                    part="stepper stepper-down"
+                    type="button"
+                    aria-label="Decrement"
+                    ?disabled=${this.disabled || this.readonly || this.value !== void 0 && this.min !== void 0 && this.value <= this.min}
+                    @click=${this.#m}
+                  >
+                    −
+                  </button>
+                </div>
+              ` : i}
+        </div>
+        ${e.length > 0 ? r`
+              <div class="messages" part="messages">${e}</div>
+            ` : i}
+      </div>
+    `;
+	}
+	#s() {
+		let e = [];
+		return this.invalidText && e.push(r`<p class="message" data-tone="invalid" part="message-invalid">
+          ${this.invalidText}
+        </p>`), this.warningText && e.push(r`<p class="message" data-tone="warning" part="message-warning">
+          ${this.warningText}
+        </p>`), this.infoText && e.push(r`<p class="message" data-tone="info" part="message-info">
+          ${this.infoText}
+        </p>`), this.validText && e.push(r`<p class="message" data-tone="valid" part="message-valid">
+          ${this.validText}
+        </p>`), this.helperText && e.length === 0 && e.push(r`<p class="message" data-tone="helper" part="message-helper">
+          ${this.helperText}
+        </p>`), e;
+	}
+	#c;
+	#l;
+	#u;
+	#d;
+	#f;
+	#p;
+	#m;
+	#h(e, t = 1) {
+		if (this.disabled || this.readonly) return;
+		let n = this.renderRoot.querySelector("input")?.value ?? "", r = n === "" ? this.value ?? 0 : Number(n);
+		if (!Number.isFinite(r)) return;
+		let i = r + e * this.step * t;
+		this.#g(i);
+	}
+	#g(e) {
+		let t = this.#_(e);
+		this.#t = t === void 0 ? "" : String(t);
+		let n = this.renderRoot.querySelector("input");
+		n && (n.value = this.#t), this.#n(), this.dispatchEvent(new CustomEvent("sken-input", {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("sken-change", {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	#_(e) {
+		if (e === void 0 || Number.isNaN(e)) return;
+		let t = e;
+		return this.min !== void 0 && t < this.min && (t = this.min), this.max !== void 0 && t > this.max && (t = this.max), t;
+	}
+	#v(e) {
+		if (e === "" || e === "-") return;
+		let t = Number(e);
+		if (!Number.isNaN(t)) return t;
+	}
+};
+e([o({
+	attribute: "default-value",
+	type: Number
+})], l.prototype, "defaultValue", void 0), e([o({ type: Number })], l.prototype, "value", void 0), e([o({ type: Number })], l.prototype, "min", void 0), e([o({ type: Number })], l.prototype, "max", void 0), e([o({ type: Number })], l.prototype, "step", void 0), e([o({
+	attribute: "show-stepper-buttons",
+	reflect: !0,
+	type: Boolean
+})], l.prototype, "showStepperButtons", void 0), e([o()], l.prototype, "placeholder", void 0), e([o()], l.prototype, "label", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], l.prototype, "required", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], l.prototype, "disabled", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], l.prototype, "readonly", void 0), e([o({ attribute: "helper-text" })], l.prototype, "helperText", void 0), e([o({ attribute: "info-text" })], l.prototype, "infoText", void 0), e([o({ attribute: "warning-text" })], l.prototype, "warningText", void 0), e([o({ attribute: "valid-text" })], l.prototype, "validText", void 0), e([o({ attribute: "invalid-text" })], l.prototype, "invalidText", void 0), e([o({ attribute: "text-alignment" })], l.prototype, "textAlignment", void 0), e([o({ reflect: !0 })], l.prototype, "size", void 0), e([o({
+	reflect: !0,
+	type: Boolean
+})], l.prototype, "invalid", void 0), e([o({ attribute: "described-by-id" })], l.prototype, "describedById", void 0), e([o()], l.prototype, "name", void 0), l = e([a("sken-number-input")], l);
+//#endregion
+export { l as SkenNumberInput };
+
+//# sourceMappingURL=sken-number-input.js.map

package/dist/sken-number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sken-number-input.js","names":["#rawText","#parseNumber","#syncFormValue","#clamp","#step","#commitValue","#internals","#slotEndObserver","#visibilityObserver","#adjustLayout","#renderMessages","#handleInput","#handleChange","#handleFocus","#handleBlur","#handleKeydown","#handleStepUp","#handleStepDown"],"sources":["../src/components/sken-number-input.ts"],"sourcesContent":["// ── <sken-number-input> — Sken-owned Web Component ─────────────────\n// Lit 3 primitive for numeric input with visible ± stepper buttons,\n// min/max clamping, and the same start/end slot system as\n// <sken-input>. Promoted from the SkenNumberInput PoC story (which\n// was a thin wrap of <ix-number-input>). The PoC proved the UX;\n// this primitive owns the contract.\n\nimport { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport type { SkenNumberInputSize } from '@sken-ds/contracts'\n\n/**\n * Default step when the consumer does not pass one. Matches the\n * native `<input type=\"number\" step>` default.\n */\nconst DEFAULT_STEP = 1\n\n/**\n * Default value for `showStepperButtons`. The PoC validated that\n * the iX default of `false` is wrong for our use case: consumers\n * expect ± buttons for the numeric fields they use most (Alma\n * demo: quantity, temperature, score). The Sken primitive flips\n * the default to `true`; consumers who want a bare input pass\n * `showStepperButtons={false}` explicitly.\n */\nconst DEFAULT_SHOW_STEPPER_BUTTONS = true\n\n@customElement('sken-number-input')\nexport class SkenNumberInput extends LitElement {\n  // Form-associated custom element. Same pattern as SkenInput /\n  // SkenTextarea. The numeric value is stringified for\n  // FormData (FormData is text-only); undefined becomes the\n  // empty string. The implicit-submit-on-Enter rule still\n  // applies, so a form with a single number input and a\n  // submit button will submit on Enter.\n  // https://lit.dev/docs/components/form/\n  static formAssociated = true\n\n  // ElementInternals handle. Created in the constructor.\n  // Nullable to gracefully degrade in test environments.\n  #internals: ElementInternals | null = null\n\n  constructor() {\n    super()\n    try {\n      this.#internals = this.attachInternals()\n    } catch {\n      this.#internals = null\n    }\n  }\n\n  // ── Props ─────────────────────────────────────────────────────\n  @property({ attribute: 'default-value', type: Number }) defaultValue: number | undefined = undefined\n  @property({ type: Number }) value: number | undefined = undefined\n  @property({ type: Number }) min: number | undefined = undefined\n  @property({ type: Number }) max: number | undefined = undefined\n  @property({ type: Number }) step: number = DEFAULT_STEP\n  @property({ attribute: 'show-stepper-buttons', reflect: true, type: Boolean }) showStepperButtons =\n    DEFAULT_SHOW_STEPPER_BUTTONS\n  @property() placeholder: string | undefined = undefined\n  @property() label: string | undefined = undefined\n  @property({ reflect: true, type: Boolean }) required = false\n  @property({ reflect: true, type: Boolean }) disabled = false\n  @property({ reflect: true, type: Boolean }) readonly = false\n  @property({ attribute: 'helper-text' }) helperText: string | undefined = undefined\n  @property({ attribute: 'info-text' }) infoText: string | undefined = undefined\n  @property({ attribute: 'warning-text' }) warningText: string | undefined = undefined\n  @property({ attribute: 'valid-text' }) validText: string | undefined = undefined\n  @property({ attribute: 'invalid-text' }) invalidText: string | undefined = undefined\n  @property({ attribute: 'text-alignment' }) textAlignment: 'start' | 'end' = 'end'\n  @property({ reflect: true }) size: SkenNumberInputSize = 'md'\n  @property({ reflect: true, type: Boolean }) invalid = false\n  @property({ attribute: 'described-by-id' }) describedById: string | undefined = undefined\n  @property() name: string | undefined = undefined\n\n  // ── Internal state ────────────────────────────────────────────\n  /**\n   * The raw text in the input. The DOM input is the source of\n   * truth for the text (so the user can type a partial value like\n   * \"-\", which is not a valid number yet). The numeric `value` is\n   * derived from this on commit (blur, Enter, stepper).\n   */\n  #rawText: string = ''\n\n  // ── DOM refs (queried on demand) ────────────────────────────\n\n  // ── Lifecycle ─────────────────────────────────────────────────\n  override connectedCallback(): void {\n    super.connectedCallback()\n    // Seed the raw text from the controlled value or the default.\n    // We do NOT trigger a re-render here; the property is only\n    // set after Lit has applied the host attributes, and the\n    // first render will read the right value through this.value.\n    if (this.value === undefined) {\n      this.#rawText = this.defaultValue !== undefined ? String(this.defaultValue) : ''\n    } else {\n      this.#rawText = String(this.value)\n    }\n    // Publish the initial value to the surrounding form.\n    this.#syncFormValue()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.#slotEndObserver?.disconnect()\n    this.#visibilityObserver?.disconnect()\n  }\n\n  // ── Form-association callbacks ─────────────────────────────\n  // formResetCallback: restore uncontrolled seed; re-render\n  // controlled so Lit re-publishes the controlled value.\n  formResetCallback(): void {\n    if (this.value === undefined) {\n      this.#rawText = this.defaultValue !== undefined ? String(this.defaultValue) : ''\n      const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n      if (inputEl) inputEl.value = this.#rawText\n      this.#syncFormValue()\n    } else {\n      this.requestUpdate()\n    }\n  }\n\n  // formDisabledCallback: mirror the form's :disabled state\n  // onto the prop. Lit re-renders; the inner <input> picks up\n  // ?disabled=${this.disabled} in the template.\n  formDisabledCallback(isDisabled: boolean): void {\n    this.disabled = isDisabled\n  }\n\n  // Publish the current value to the form. FormData is\n  // text-only, so we stringify the number (or empty string\n  // for undefined). The string roundtrip preserves precision\n  // for integers and finite decimals; consumers that need\n  // BigInt or arbitrary precision should re-parse on the\n  // server side.\n  #syncFormValue(): void {\n    if (!this.#internals) return\n    const value = this.value !== undefined ? String(this.value) : ''\n    this.#internals.setFormValue(value)\n  }\n\n  /**\n   * Set up the dynamic layout once the shadow root has the\n   * element children we need to measure. Same pattern as\n   * SkenInput: MutationObserver on the slot container to\n   * catch children being added/removed, IntersectionObserver\n   * to catch the case where the input is hidden at first\n   * connect (e.g. inside a closed <details> or an off-screen\n   * tab), and slotchange as belt-and-braces.\n   */\n  protected override firstUpdated(): void {\n    const endContainer = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n    const endSlot = this.renderRoot.querySelector('slot[name=\"end\"]') as HTMLSlotElement | null\n    if (endContainer && endSlot) {\n      this.#slotEndObserver = new MutationObserver(() => this.#adjustLayout())\n      this.#slotEndObserver.observe(endContainer, { childList: true, subtree: true, attributes: true })\n      endSlot.addEventListener('slotchange', this.#adjustLayout)\n    }\n    this.#visibilityObserver = new IntersectionObserver(entries => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) this.#adjustLayout()\n      }\n    })\n    this.#visibilityObserver.observe(this)\n    this.#adjustLayout()\n  }\n\n  /**\n   * The gap between a slot's edge and the input's text. 0.5rem\n   * is what the SkenInput primitive uses (mirrors the iX rule).\n   * The number input needs an extra \"air\" margin because the\n   * stepper column is also on the right edge and we don't want\n   * the value text to crash into the slot.\n   */\n  #SLOT_AIR = '0.5rem'\n\n  /**\n   * Measure the stepper column width and the end slot width, then\n   * apply:\n   * - The input's padding-inline-end so the value text never\n   *   overlaps the slot OR the stepper.\n   * - The end slot's inset-inline-end so it sits to the LEFT of\n   *   the stepper (or at the right edge when no stepper).\n   *\n   * The math:\n   *   endInset      = stepperReserve + air      (slot's right edge)\n   *   paddingInline = max(endInset, stepperReserve) + air\n   * If the end slot is empty, its width is 0 and the calc\n   * falls back to the stepper-only reservation.\n   */\n  #adjustLayout = (): void => {\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    const stepperEl = this.renderRoot.querySelector('.steppers') as HTMLElement | null\n    const slotEndEl = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n    if (!inputEl || !slotEndEl) return\n\n    requestAnimationFrame(() => {\n      if (!inputEl.isConnected) return\n      const stepperWidth = stepperEl && this.showStepperButtons\n        ? stepperEl.getBoundingClientRect().width\n        : 0\n      const endWidth = slotEndEl.getBoundingClientRect().width\n      const air = parseFloat(getComputedStyle(inputEl).fontSize) * 0.5 // 0.5em in px\n      const stepperReserve = stepperWidth\n      // The slot's right edge sits at stepperReserve + air from\n      // the input's right edge, so it never overlaps the stepper\n      // column.\n      const endInset = stepperReserve + air\n      slotEndEl.style.insetInlineEnd = endInset > 0 ? `${endInset}px` : '0.5rem'\n      // The input's padding-inline-end has to be at least the\n      // wider of (stepperReserve, endInset + endWidth) so the\n      // value text never overlaps either.\n      const textReserve = endInset + endWidth\n      const padEnd = Math.max(stepperReserve, textReserve) + air\n      inputEl.style.paddingInlineEnd = `${padEnd}px`\n    })\n  }\n\n  #slotEndObserver: MutationObserver | null = null\n  #visibilityObserver: IntersectionObserver | null = null\n\n  // ── Styles ────────────────────────────────────────────────────\n  static styles = css`\n    :host {\n      display: inline-block;\n      inline-size: 100%;\n    }\n\n    .field {\n      display: grid;\n      gap: 0.375rem;\n    }\n\n    .label {\n      font-size: 0.8125rem;\n      font-weight: 500;\n      color: var(--sken-foreground);\n    }\n\n    .label[data-required='true']::after {\n      content: ' *';\n      color: var(--sken-destructive);\n    }\n\n    .input-wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n      inline-size: 100%;\n    }\n\n    input {\n      box-sizing: border-box;\n      inline-size: 100%;\n      border: 1px solid var(--sken-border);\n      border-radius: var(--sken-md);\n      background: var(--sken-input);\n      color: var(--sken-foreground);\n      font-family: var(--sken-family-sans);\n      font-size: var(--sken-size-md);\n      line-height: 1.25;\n      text-overflow: ellipsis;\n      padding-block: var(--sken-2);\n      padding-inline: var(--sken-3);\n      /* When the ± steppers are visible, reserve the right edge\n         for them so the value text never overlaps. 1.5rem (button)\n         + 2 * 0.25rem (insets) + 0.25rem (air) = 2.25rem. */\n      padding-inline-end: var(--sken-3);\n      min-block-size: 2.25rem;\n      transition:\n        border-color 120ms ease,\n        box-shadow 120ms ease;\n      /* Hide the native steppers: we render our own. */\n      -moz-appearance: textfield;\n    }\n\n    input::-webkit-outer-spin-button,\n    input::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    input::placeholder {\n      color: var(--sken-muted-foreground);\n      opacity: 1;\n    }\n\n    /* ── Stepper buttons ───────────────────────────────────── */\n    /*\n     * The stepper column is a vertical pair of + and − buttons\n     * anchored to the right edge of the input. Sizes scale with\n     * the host's [size] attribute (sm / md / lg) so the buttons\n     * match the input's vertical rhythm. Default (md) is 24x20\n     * per button. Glyph color is --sken-foreground; hover swaps\n     * to --sken-primary. Disabled state uses --sken-disabled.\n     */\n    .steppers {\n      position: absolute;\n      inset-block: 0.25rem;\n      inset-inline-end: 0.25rem;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .stepper {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      inline-size: 1.5rem;\n      block-size: 1.25rem;\n      background: transparent;\n      border: 0;\n      padding: 0;\n      color: var(--sken-foreground);\n      cursor: pointer;\n      font-family: inherit;\n      font-size: 1rem;\n      line-height: 1;\n      font-weight: 600;\n      border-radius: var(--sken-sm, 0.25rem);\n      /* The parent .steppers is a flex column; prevent the\n         buttons from being squashed when the host's vertical\n         rhythm is tight (sm). The explicit block-size wins. */\n      flex-shrink: 0;\n      transition: color 120ms ease, background-color 120ms ease;\n    }\n\n    .stepper:hover:not(:disabled) {\n      color: var(--sken-primary);\n      /* No background fill on hover. A background would paint\n         over the input's right border, hiding it. The color\n         change to --sken-primary is enough affordance for a\n         20x24px icon button. */\n      background: transparent;\n    }\n\n    .stepper:focus-visible {\n      outline: 2px solid var(--sken-ring, currentColor);\n      outline-offset: 1px;\n    }\n\n    .stepper:disabled {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n\n    /* When the ± steppers are visible, reserve the right edge\n       of the input so the value text never overlaps. The\n       reservation is 2rem for the md size (default): 1.5rem\n       (button) + 2 * 0.25rem (column insets). The sm / lg\n       variants below override the button size, so the\n       reservation needs to scale too. */\n    :host([show-stepper-buttons]) input {\n      padding-inline-end: 2rem;\n    }\n\n    /* ── Stepper sizes ─────────────────────────────────────── */\n    :host([size='sm']) .steppers {\n      inset-block: 0.125rem;\n      inset-inline-end: 0.125rem;\n      gap: 1px;\n    }\n    :host([size='sm']) .stepper {\n      inline-size: 1.125rem;\n      block-size: 0.875rem;\n      font-size: 0.75rem;\n    }\n    /* sm: 1.125rem (button) + 2 * 0.125rem (insets) = 1.375rem,\n       plus 0.125rem of breathing air = 1.5rem. */\n    :host([size='sm'][show-stepper-buttons]) input {\n      padding-inline-end: 1.5rem;\n    }\n\n    :host([size='lg']) .steppers {\n      inset-block: 0.375rem;\n      inset-inline-end: 0.375rem;\n      gap: 3px;\n    }\n    :host([size='lg']) .stepper {\n      inline-size: 1.75rem;\n      block-size: 1.5rem;\n      font-size: 1.125rem;\n    }\n    /* lg: 1.75rem (button) + 2 * 0.375rem (insets) = 2.5rem,\n       plus 0.25rem of breathing air = 2.75rem. */\n    :host([size='lg'][show-stepper-buttons]) input {\n      padding-inline-end: 2.75rem;\n    }\n\n    /* Hide steppers on touch devices where they would be hard\n       to hit accurately. The user can still use ↑/↓ keys or\n       type directly. */\n    @media (hover: none) {\n      .steppers {\n        display: none;\n      }\n      input {\n        padding-inline-end: var(--sken-3);\n      }\n      :host([size='sm']) input {\n        padding-inline-end: var(--sken-2);\n      }\n      :host([size='lg']) input {\n        padding-inline-end: var(--sken-4);\n      }\n    }\n\n    /* ── Slot containers ────────────────────────────────────── */\n    .slot {\n      position: absolute;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1;\n      pointer-events: none;\n      color: var(--sken-muted-foreground);\n    }\n\n    .slot ::slotted(*) {\n      pointer-events: auto;\n    }\n\n    .slot-start {\n      inset-inline-start: 0.5rem;\n    }\n\n    /*\n     * The end slot's position is set in JS via the inline style\n     * (see #adjustLayout). The rule below is a fallback for the\n     * initial render before JS has measured the slot, and a\n     * sensible default when the slot is empty.\n     */\n    .slot-end {\n      inset-inline-end: 0.5rem;\n    }\n\n    /* ── States ─────────────────────────────────────────────── */\n    .input-wrapper:hover input:not(:disabled):not(:read-only) {\n      border-color: var(--sken-foreground);\n    }\n\n    .input-wrapper:focus-within input {\n      outline: 2px solid var(--sken-ring, currentColor);\n      outline-offset: 2px;\n      border-color: var(--sken-primary);\n    }\n\n    input:disabled {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n\n    input:read-only {\n      background: var(--sken-muted);\n    }\n\n    :host([invalid]) input {\n      border-color: var(--sken-destructive);\n    }\n\n    :host([invalid]) .input-wrapper:focus-within input {\n      outline-color: var(--sken-destructive);\n    }\n\n    /* ── Sizes ──────────────────────────────────────────────── */\n    :host([size='sm']) input {\n      padding-block: var(--sken-1);\n      padding-inline: var(--sken-2);\n      font-size: var(--sken-size-sm);\n      /* 2 × 0.875rem (buttons) + 1px (gap) + 2 × 0.125rem\n         (insets) = ~2.0625rem. Round up to 2.25rem for visual\n         breathing room. */\n      min-block-size: 2.25rem;\n    }\n    :host([size='md']) input {\n      /* Default styles above. */\n    }\n    :host([size='lg']) input {\n      padding-block: var(--sken-3);\n      padding-inline: var(--sken-4);\n      font-size: var(--sken-size-lg);\n      /* 2 × 1.5rem (buttons) + 3px (gap) + 2 × 0.375rem\n         (insets) = ~3.9375rem. Round up to 4rem. */\n      min-block-size: 4rem;\n    }\n\n    /* ── Validation messages ─────────────────────────────────── */\n    .messages {\n      display: grid;\n      gap: 0.25rem;\n    }\n\n    .message {\n      margin: 0;\n      font-size: 0.75rem;\n      line-height: 1.4;\n    }\n\n    .message[data-tone='info'] {\n      color: var(--sken-info, #0082ff);\n    }\n\n    .message[data-tone='warning'] {\n      color: var(--sken-warning, #f59e0b);\n    }\n\n    .message[data-tone='valid'] {\n      color: var(--sken-success, #10b981);\n    }\n\n    .message[data-tone='invalid'] {\n      color: var(--sken-destructive, #dc2626);\n    }\n\n    .message[data-tone='helper'] {\n      color: var(--sken-muted-foreground);\n    }\n  `\n\n  // ── Render ────────────────────────────────────────────────────\n  protected override render() {\n    const messages = this.#renderMessages()\n    return html`\n      <div class=\"field\" part=\"field\">\n        ${this.label\n          ? html`\n              <label class=\"label\" part=\"label\" data-required=${this.required}>\n                ${this.label}\n              </label>\n            `\n          : nothing}\n        <div class=\"input-wrapper\" part=\"wrapper\">\n          <div class=\"slot slot-start\" part=\"slot-start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <input\n            part=\"input\"\n            type=\"number\"\n            .value=${this.#rawText}\n            placeholder=${this.placeholder ?? ''}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            min=${this.min ?? ''}\n            max=${this.max ?? ''}\n            step=${this.step}\n            aria-invalid=${this.invalid ? 'true' : 'false'}\n            aria-describedby=${this.describedById ?? ''}\n            name=${this.name ?? ''}\n            style=\"text-align: ${this.textAlignment}\"\n            @input=${this.#handleInput}\n            @change=${this.#handleChange}\n            @focus=${this.#handleFocus}\n            @blur=${this.#handleBlur}\n            @keydown=${this.#handleKeydown}\n          />\n          <div class=\"slot slot-end\" part=\"slot-end\">\n            <slot name=\"end\"></slot>\n          </div>\n          ${this.showStepperButtons\n            ? html`\n                <div class=\"steppers\" part=\"steppers\">\n                  <button\n                    class=\"stepper\"\n                    part=\"stepper stepper-up\"\n                    type=\"button\"\n                    aria-label=\"Increment\"\n                    ?disabled=${this.disabled || this.readonly ||\n                      (this.value !== undefined && this.max !== undefined && this.value >= this.max)}\n                    @click=${this.#handleStepUp}\n                  >\n                    +\n                  </button>\n                  <button\n                    class=\"stepper\"\n                    part=\"stepper stepper-down\"\n                    type=\"button\"\n                    aria-label=\"Decrement\"\n                    ?disabled=${this.disabled || this.readonly ||\n                      (this.value !== undefined && this.min !== undefined && this.value <= this.min)}\n                    @click=${this.#handleStepDown}\n                  >\n                    −\n                  </button>\n                </div>\n              `\n            : nothing}\n        </div>\n        ${messages.length > 0\n          ? html`\n              <div class=\"messages\" part=\"messages\">${messages}</div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  #renderMessages() {\n    const messages: ReturnType<typeof html>[] = []\n    if (this.invalidText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"invalid\" part=\"message-invalid\">\n          ${this.invalidText}\n        </p>`,\n      )\n    }\n    if (this.warningText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"warning\" part=\"message-warning\">\n          ${this.warningText}\n        </p>`,\n      )\n    }\n    if (this.infoText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"info\" part=\"message-info\">\n          ${this.infoText}\n        </p>`,\n      )\n    }\n    if (this.validText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"valid\" part=\"message-valid\">\n          ${this.validText}\n        </p>`,\n      )\n    }\n    if (this.helperText && messages.length === 0) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"helper\" part=\"message-helper\">\n          ${this.helperText}\n        </p>`,\n      )\n    }\n    return messages\n  }\n\n  // ── Event handlers ───────────────────────────────────────────\n  #handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    this.#rawText = target.value\n    // Emit the parsed number (or undefined if empty / invalid).\n    const parsed = this.#parseNumber(target.value)\n    if (this.value === undefined) {\n      // Uncontrolled: store internally, do not mutate this.value\n      // because the contract is \"controlled by the consumer\".\n      this.#syncFormValue()\n      this.dispatchEvent(\n        new CustomEvent<number | undefined>('sken-input', {\n          detail: parsed,\n          bubbles: true,\n          composed: true,\n        }),\n      )\n    } else {\n      this.#syncFormValue()\n      this.dispatchEvent(\n        new CustomEvent<number | undefined>('sken-input', {\n          detail: parsed,\n          bubbles: true,\n          composed: true,\n        }),\n      )\n    }\n  }\n\n  #handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    const parsed = this.#parseNumber(target.value)\n    // Clamp on commit. If the user typed 150 with max=100, we\n    // commit 100 and update the input text.\n    const clamped = this.#clamp(parsed)\n    if (clamped !== parsed) {\n      this.#rawText = clamped !== undefined ? String(clamped) : ''\n      target.value = this.#rawText\n    }\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<number | undefined>('sken-change', {\n        detail: clamped,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #handleFocus = (_event: FocusEvent) => {\n    this.dispatchEvent(new CustomEvent('sken-focus', { bubbles: true, composed: true }))\n  }\n\n  #handleBlur = (_event: FocusEvent) => {\n    this.dispatchEvent(new CustomEvent('sken-blur', { bubbles: true, composed: true }))\n  }\n\n  #handleKeydown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return\n    // Shift+Arrow and PageUp/PageDown apply a 10x multiplier to\n    // the step. This is the standard \"fast forward\" pattern in\n    // numeric inputs across Mature DS (iX, Material, AntD). It\n    // lets the consumer reach the target faster when the step\n    // is small relative to the typical range.\n    const multiplier = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? 10 : 1\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      this.#step(+1, multiplier)\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      this.#step(-1, multiplier)\n    } else if (event.key === 'PageUp') {\n      event.preventDefault()\n      this.#step(+1, 10)\n    } else if (event.key === 'PageDown') {\n      event.preventDefault()\n      this.#step(-1, 10)\n    } else if (event.key === 'Home' && this.min !== undefined) {\n      event.preventDefault()\n      this.#commitValue(this.min)\n    } else if (event.key === 'End' && this.max !== undefined) {\n      event.preventDefault()\n      this.#commitValue(this.max)\n    } else if (event.key === 'Enter') {\n      // Enter fires the change event naturally via the input;\n      // no need to do anything here. The contract documents\n      // \"Enter commits\" but the browser already does that.\n    }\n  }\n\n  #handleStepUp = () => this.#step(+1)\n  #handleStepDown = () => this.#step(-1)\n\n  // ── Helpers ───────────────────────────────────────────────────\n  /**\n   * Increment / decrement the value by `step * multiplier`,\n   * clamped at [min, max]. Emits `sken-input` and `sken-change`\n   * (we treat the stepper as a commit, not a keystroke). The\n   * `multiplier` defaults to 1; the keyboard handler passes 10\n   * for Shift+Arrow and PageUp/PageDown (the \"fast forward\"\n   * pattern).\n   *\n   * The current value is read from the rendered <input>, NOT\n   * from `this.value`. Reading from the input is robust for\n   * both modes:\n   * - Controlled: the consumer is async (Vue's reactive update\n   *   applies on the next tick). By the time the second click\n   *   arrives, the consumer's `value` prop may still be the\n   *   pre-click value, but the input's `.value` is already\n   *   updated by #commitValue from the first click.\n   * - Uncontrolled: the primitive owns the value. The input's\n   *   `.value` is the source of truth; `this.value` is the\n   *   initial seed and not maintained by the primitive in this\n   *   mode.\n   */\n  #step(direction: 1 | -1, multiplier: number = 1) {\n    if (this.disabled || this.readonly) return\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    const text = inputEl?.value ?? ''\n    const current = text === '' ? (this.value ?? 0) : Number(text)\n    if (!Number.isFinite(current)) return\n    const next = current + direction * this.step * multiplier\n    this.#commitValue(next)\n  }\n\n  /**\n   * Commit a value: clamp, update internal state, emit events.\n   * Same path used by the stepper buttons and the keyboard\n   * Home / End shortcuts.\n   */\n  #commitValue(raw: number) {\n    const clamped = this.#clamp(raw)\n    this.#rawText = clamped !== undefined ? String(clamped) : ''\n    // Update the DOM input so the next @input sees the new value\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    if (inputEl) inputEl.value = this.#rawText\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<number | undefined>('sken-input', {\n        detail: clamped,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n    this.dispatchEvent(\n      new CustomEvent<number | undefined>('sken-change', {\n        detail: clamped,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #clamp(value: number | undefined): number | undefined {\n    if (value === undefined || Number.isNaN(value)) return undefined\n    let v = value\n    if (this.min !== undefined && v < this.min) v = this.min\n    if (this.max !== undefined && v > this.max) v = this.max\n    return v\n  }\n\n  #parseNumber(text: string): number | undefined {\n    if (text === '' || text === '-') return undefined\n    const n = Number(text)\n    if (Number.isNaN(n)) return undefined\n    return n\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-number-input': SkenNumberInput\n  }\n}\n"],"mappings":"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"}