@c2n/number-input 0.0.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# Number Input
+
+A form-associated, themeable numeric input with consistent step controls.
+
+```bash
+npm install @c2n/number-input
+```
+
+```html
+<c2-number-input name="quantity" value="1" min="0" max="10" aria-label="Quantity"></c2-number-input>
+```

package/dist/number-input.js

@@ -0,0 +1,291 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+//#region src/number-input.scss?inline
+var number_input_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--c2-number-input__supporting-text--gap,4px);\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: flex;\n  box-sizing: border-box;\n  min-height: var(--c2-number-input--min-height,36px);\n  overflow: hidden;\n  border: var(--c2-number-input--border,1px solid #bcbcc6);\n  border-radius: var(--c2-number-input--border-radius,6px);\n  color: var(--c2-number-input--color,#18181b);\n  background: var(--c2-number-input--background,#ffffff);\n  font-size: var(--c2-number-input--font-size,14px);\n  font-family: var(--c2-number-input--font-family,inherit);\n  line-height: var(--c2-number-input--line-height,20px);\n  cursor: text;\n  outline: var(--c2-number-input__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-color: transparent;\n  outline-offset: var(--c2-number-input__focus--outline-offset,0px);\n  transition: border 250ms cubic-bezier(0.2, 0, 0, 1), background 250ms cubic-bezier(0.2, 0, 0, 1), outline-color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.field:hover {\n  border: var(--c2-number-input__hover--border,1px solid #a1a1aa);\n}\n.field.focused {\n  border: var(--c2-number-input__focus--border,1px solid #0265dc);\n  outline: var(--c2-number-input__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-number-input__focus--outline-offset,0px);\n}\n.field.error {\n  border: var(--c2-number-input__error--border,1px solid #dc2626);\n}\n.field.error.focused {\n  outline: var(--c2-number-input__error__focus--outline,2px solid rgba(220, 38, 38, 0.25));\n}\n.field.read-only {\n  cursor: default;\n  background: var(--c2-number-input__read-only--background,#fafafa);\n}\n.field.disabled {\n  cursor: default;\n  opacity: var(--c2-number-input__disabled--opacity,0.38);\n  pointer-events: none;\n}\n\n.value-area {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  align-items: center;\n  gap: var(--c2-number-input__value--gap,8px);\n  padding: var(--c2-number-input__value--padding,6px 10px 6px 12px);\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  width: 8ch;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  color: inherit;\n  background: transparent;\n  font: inherit;\n  line-height: inherit;\n  appearance: textfield;\n}\ninput::placeholder {\n  color: var(--c2-number-input__placeholder--color,#71717a);\n  opacity: 1;\n}\ninput::-webkit-inner-spin-button, input::-webkit-outer-spin-button {\n  margin: 0;\n  appearance: none;\n}\n\n::slotted([slot=prefix]),\n::slotted([slot=suffix]) {\n  flex: none;\n  color: var(--c2-number-input__adornment--color,#71717a);\n  font-size: var(--c2-number-input__adornment--font-size,14px);\n}\n\n.steppers {\n  display: grid;\n  flex: 0 0 var(--c2-number-input__stepper--width,28px);\n  grid-template-rows: 1fr 1fr;\n  border-left: var(--c2-number-input__stepper--border-left,1px solid #e4e4e7);\n}\n\n.stepper {\n  display: grid;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  place-items: center;\n  border: 0;\n  color: var(--c2-number-input__stepper--color,#71717a);\n  background: transparent;\n  cursor: pointer;\n}\n.stepper:hover:not(:disabled) {\n  color: var(--c2-number-input__stepper__hover--color,#18181b);\n  background: var(--c2-number-input__stepper__hover--background,#f4f4f5);\n}\n.stepper:disabled {\n  cursor: default;\n  opacity: 0.38;\n}\n\n.stepper.up {\n  border-bottom: var(--c2-number-input__stepper--border-left,1px solid #e4e4e7);\n}\n\n.stepper svg,\n::slotted([slot=decrement-icon]),\n::slotted([slot=increment-icon]) {\n  width: var(--c2-number-input__stepper-icon--size,14px);\n  height: var(--c2-number-input__stepper-icon--size,14px);\n}\n\n.supporting-text {\n  color: var(--c2-number-input__supporting-text--color,#71717a);\n  font-size: var(--c2-number-input__supporting-text--font-size,12px);\n  line-height: var(--c2-number-input__supporting-text--line-height,16px);\n}\n.supporting-text.error {\n  color: var(--c2-number-input__supporting-text__error--color,#dc2626);\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/number-input.ts
+var NumberInput = class NumberInput extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.internals = this.attachInternals();
+		this.customValidityMessage = "";
+		this.defaultValue = "";
+		this.defaultCaptured = false;
+		this.disabledByForm = false;
+		this.focused = false;
+		this.hasSupportingSlot = false;
+		this.value = "";
+		this.step = "1";
+		this.name = "";
+		this.autocomplete = "";
+		this.placeholder = "";
+		this.required = false;
+		this.readOnly = false;
+		this.disabled = false;
+		this.hideSteppers = false;
+		this.error = false;
+		this.help = "";
+		this.errorText = "";
+		this.ariaLabel = null;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.styles = unsafeCSS(number_input_default);
+	}
+	get form() {
+		return this.internals.form;
+	}
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	/** Parsed value, or `NaN` when empty. */
+	get valueAsNumber() {
+		return this.input?.valueAsNumber ?? NaN;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.defaultCaptured) {
+			this.defaultValue = this.getAttribute("value") ?? "";
+			this.defaultCaptured = true;
+		}
+	}
+	focus(options) {
+		this.input?.focus(options);
+	}
+	/** Selects the numeric text. */
+	select() {
+		this.input?.select();
+	}
+	/** Increases the value by `step` a given number of times. */
+	stepUp(amount = 1) {
+		this.stepBy(Math.max(1, Math.trunc(amount)));
+	}
+	/** Decreases the value by `step` a given number of times. */
+	stepDown(amount = 1) {
+		this.stepBy(-Math.max(1, Math.trunc(amount)));
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.input?.setCustomValidity(message);
+		this.syncFormState();
+	}
+	formResetCallback() {
+		this.value = this.defaultValue;
+		this.error = false;
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state === "string") this.value = state;
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
+	}
+	get steppersDisabled() {
+		return this.effectiveDisabled || this.readOnly || this.step === "any";
+	}
+	get atMinimum() {
+		const value = Number(this.value);
+		return this.value !== "" && this.min !== void 0 && Number.isFinite(value) && value <= this.min;
+	}
+	get atMaximum() {
+		const value = Number(this.value);
+		return this.value !== "" && this.max !== void 0 && Number.isFinite(value) && value >= this.max;
+	}
+	handleInput(event) {
+		this.value = event.target.value;
+		redispatchEvent(this, event);
+	}
+	handleChange(event) {
+		this.value = event.target.value;
+		redispatchEvent(this, event);
+	}
+	handleFocusIn(event) {
+		this.focused = true;
+		redispatchEvent(this, event);
+	}
+	handleFocusOut(event) {
+		this.focused = false;
+		redispatchEvent(this, event);
+	}
+	handleSlotChange(event) {
+		this.hasSupportingSlot = event.target.assignedNodes({ flatten: true }).length > 0;
+	}
+	keepInputFocus(event) {
+		event.preventDefault();
+	}
+	forwardFocus(event) {
+		if (!event.target.closest(".stepper")) this.input?.focus();
+	}
+	stepBy(amount) {
+		if (!this.input || this.steppersDisabled) return;
+		if (amount > 0) this.input.stepUp(amount);
+		else this.input.stepDown(-amount);
+		this.value = this.input.value;
+		this.input.focus();
+		this.dispatchEvent(new InputEvent("input", {
+			bubbles: true,
+			composed: true,
+			inputType: "insertReplacementText"
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	updated(changed) {
+		if (changed.has("value") && this.input && this.input.value !== this.value) {
+			this.value = this.input.value;
+			return;
+		}
+		this.syncFormState();
+	}
+	syncFormState() {
+		if (!this.input) return;
+		if (this.effectiveDisabled) {
+			this.internals.setFormValue(null);
+			this.internals.setValidity({});
+			return;
+		}
+		this.internals.setFormValue(this.value, this.value);
+		this.input.setCustomValidity(this.customValidityMessage);
+		this.internals.setValidity(this.input.validity, this.input.validationMessage, this.input);
+	}
+	renderStepper(direction) {
+		const down = direction === "down";
+		const disabled = this.steppersDisabled || (down ? this.atMinimum : this.atMaximum);
+		return html`<button
+      class="stepper ${direction}"
+      type="button"
+      tabindex="-1"
+      aria-label=${down ? "Decrease value" : "Increase value"}
+      ?disabled=${disabled}
+      @pointerdown=${this.keepInputFocus}
+      @click=${() => down ? this.stepDown() : this.stepUp()}
+    >
+      <slot name=${down ? "decrement-icon" : "increment-icon"}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+          <path d=${down ? "M5 12h14" : "M12 5v14M5 12h14"}></path>
+        </svg>
+      </slot>
+    </button>`;
+	}
+	render() {
+		const showError = this.error && !this.effectiveDisabled;
+		const message = showError ? this.errorText : this.help;
+		const showSupporting = !!message || this.hasSupportingSlot;
+		return html`
+      <div
+        class="field ${classMap({
+			focused: this.focused,
+			error: showError,
+			"read-only": this.readOnly,
+			disabled: this.effectiveDisabled
+		})}"
+        @click=${this.forwardFocus}
+      >
+        <div class="value-area">
+          <slot name="prefix"></slot>
+          <input
+            type="number"
+            inputmode="decimal"
+            aria-label=${ifDefined(this.ariaLabel || void 0)}
+            aria-invalid=${showError ? "true" : nothing}
+            aria-describedby=${showSupporting ? "supporting-text" : nothing}
+            name=${ifDefined(this.name || void 0)}
+            autocomplete=${ifDefined(this.autocomplete || void 0)}
+            min=${ifDefined(this.min)}
+            max=${ifDefined(this.max)}
+            step=${this.step}
+            placeholder=${this.placeholder || nothing}
+            ?required=${this.required}
+            ?readonly=${this.readOnly}
+            ?disabled=${this.effectiveDisabled}
+            .value=${live(this.value)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @focusin=${this.handleFocusIn}
+            @focusout=${this.handleFocusOut}
+          />
+          <slot name="suffix"></slot>
+        </div>
+        ${this.hideSteppers ? nothing : html`<div class="steppers">${this.renderStepper("up")}${this.renderStepper("down")}</div>`}
+      </div>
+      ${showSupporting ? html`<div id="supporting-text" class="supporting-text ${classMap({ error: showError })}">
+              <slot name="supporting-text" @slotchange=${this.handleSlotChange}>${message}</slot>
+            </div>` : html`<slot name="supporting-text" hidden @slotchange=${this.handleSlotChange}></slot>`}
+    `;
+	}
+};
+__decorate([state()], NumberInput.prototype, "disabledByForm", void 0);
+__decorate([state()], NumberInput.prototype, "focused", void 0);
+__decorate([state()], NumberInput.prototype, "hasSupportingSlot", void 0);
+__decorate([query("input")], NumberInput.prototype, "input", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], NumberInput.prototype, "value", void 0);
+__decorate([property({ type: Number })], NumberInput.prototype, "min", void 0);
+__decorate([property({ type: Number })], NumberInput.prototype, "max", void 0);
+__decorate([property({ type: String })], NumberInput.prototype, "step", void 0);
+__decorate([property({ type: String })], NumberInput.prototype, "name", void 0);
+__decorate([property({ type: String })], NumberInput.prototype, "autocomplete", void 0);
+__decorate([property({ type: String })], NumberInput.prototype, "placeholder", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NumberInput.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NumberInput.prototype, "readOnly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NumberInput.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "hide-steppers"
+})], NumberInput.prototype, "hideSteppers", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NumberInput.prototype, "error", void 0);
+__decorate([property({ type: String })], NumberInput.prototype, "help", void 0);
+__decorate([property({ attribute: "error-text" })], NumberInput.prototype, "errorText", void 0);
+__decorate([property({ attribute: "aria-label" })], NumberInput.prototype, "ariaLabel", void 0);
+NumberInput = __decorate([customElement("c2-number-input")], NumberInput);
+//#endregion
+export { NumberInput };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@c2n/number-input",
+  "version": "0.0.8",
+  "type": "module",
+  "main": "dist/number-input.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/number-input.d.ts",
+      "default": "./dist/number-input.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "number-input",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.8",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/number-input. Import once, anywhere in the program:
+//
+//     import '@c2n/number-input/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { NumberInput } from '@c2n/number-input'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-number-input': C2Props<NumberInput>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/number-input.d.ts

@@ -0,0 +1,145 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+/** Events fired by {@link NumberInput}, keyed for `addEventListener`. */
+export interface NumberInputEventMap {
+    input: InputEvent;
+    change: Event;
+}
+export interface NumberInput {
+    addEventListener: TypedAddEventListener<NumberInput, NumberInputEventMap>;
+    removeEventListener: TypedRemoveEventListener<NumberInput, NumberInputEventMap>;
+}
+/**
+ * A form-associated number field backed by a native `<input type="number">`. It keeps native decimal parsing,
+ * validation and Arrow Up/Down behavior, replaces browser-specific spinners with themeable decrement/increment
+ * controls, and supports prefix/suffix adornments, helper text and an error state.
+ *
+ * @tag c2-number-input
+ *
+ * @slot prefix - Currency symbol or other adornment before the value.
+ * @slot suffix - Unit or other adornment after the value.
+ * @slot decrement-icon - Replaces the minus icon in the decrement control.
+ * @slot increment-icon - Replaces the plus icon in the increment control.
+ * @slot supporting-text - Rich helper content below the field. `help` and `error-text` are plain-text shortcuts.
+ *
+ * @event {InputEvent} input - Re-dispatched when typing or stepping changes the value.
+ * @event {Event} change - Re-dispatched when a typed value is committed or a step control changes the value.
+ *
+ * @cssproperty {pixel} [--c2-number-input--min-height=36px]
+ * @cssproperty {border} [--c2-number-input--border=1px solid #bcbcc6]
+ * @cssproperty {border-radius} [--c2-number-input--border-radius=6px]
+ * @cssproperty {color} [--c2-number-input--color=#18181b]
+ * @cssproperty {color} [--c2-number-input--background=#ffffff]
+ * @cssproperty {font-size} [--c2-number-input--font-size=14px]
+ * @cssproperty {font-family} [--c2-number-input--font-family=inherit]
+ * @cssproperty {pixel} [--c2-number-input--line-height=20px]
+ * @cssproperty {padding} [--c2-number-input__value--padding=6px 10px 6px 12px]
+ * @cssproperty {pixel} [--c2-number-input__value--gap=8px]
+ * @cssproperty {color} [--c2-number-input__placeholder--color=#71717a]
+ * @cssproperty {border} [--c2-number-input__hover--border=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-number-input__focus--border=1px solid #0265dc]
+ * @cssproperty {outline} [--c2-number-input__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-number-input__focus--outline-offset=0px]
+ * @cssproperty {border} [--c2-number-input__error--border=1px solid #dc2626]
+ * @cssproperty {outline} [--c2-number-input__error__focus--outline=2px solid rgba(220, 38, 38, 0.25)]
+ * @cssproperty {color} [--c2-number-input__read-only--background=#fafafa]
+ * @cssproperty {opacity} [--c2-number-input__disabled--opacity=0.38]
+ * @cssproperty {pixel} [--c2-number-input__stepper--width=28px]
+ * @cssproperty {border} [--c2-number-input__stepper--border-left=1px solid #e4e4e7]
+ * @cssproperty {color} [--c2-number-input__stepper--color=#71717a]
+ * @cssproperty {color} [--c2-number-input__stepper__hover--color=#18181b]
+ * @cssproperty {color} [--c2-number-input__stepper__hover--background=#f4f4f5]
+ * @cssproperty {pixel} [--c2-number-input__stepper-icon--size=14px]
+ * @cssproperty {color} [--c2-number-input__adornment--color=#71717a]
+ * @cssproperty {font-size} [--c2-number-input__adornment--font-size=14px]
+ * @cssproperty {pixel} [--c2-number-input__supporting-text--gap=4px]
+ * @cssproperty {font-size} [--c2-number-input__supporting-text--font-size=12px]
+ * @cssproperty {pixel} [--c2-number-input__supporting-text--line-height=16px]
+ * @cssproperty {color} [--c2-number-input__supporting-text--color=#71717a]
+ * @cssproperty {color} [--c2-number-input__supporting-text__error--color=#dc2626]
+ */
+export declare class NumberInput extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    private readonly internals;
+    private customValidityMessage;
+    private defaultValue;
+    private defaultCaptured;
+    private disabledByForm;
+    private focused;
+    private hasSupportingSlot;
+    private readonly input?;
+    /** Current numeric text, or an empty string. Use `valueAsNumber` for a parsed value. */
+    value: string;
+    /** Minimum valid value. */
+    min?: number;
+    /** Maximum valid value. */
+    max?: number;
+    /** Increment used by Arrow keys and the step controls, or `any` to disable step controls. */
+    step: string;
+    /** Form field name. */
+    name: string;
+    /** Browser autocomplete hint. */
+    autocomplete: string;
+    /** Text shown while the field is empty. */
+    placeholder: string;
+    /** Requires a number before the form can be submitted. */
+    required: boolean;
+    /** Prevents editing while keeping the value in form submission. */
+    readOnly: boolean;
+    /** Prevents interaction and excludes the value from form submission. */
+    disabled: boolean;
+    /** Hides the decrement and increment controls. */
+    hideSteppers: boolean;
+    /** Applies the visual error state and sets `aria-invalid`. */
+    error: boolean;
+    /** Helper text shown below the field. */
+    help: string;
+    /** Message shown below the field while `error` is set. */
+    errorText: string;
+    /** Accessible name forwarded to the native number input. */
+    ariaLabel: string | null;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    /** Parsed value, or `NaN` when empty. */
+    get valueAsNumber(): number;
+    connectedCallback(): void;
+    focus(options?: FocusOptions): void;
+    /** Selects the numeric text. */
+    select(): void;
+    /** Increases the value by `step` a given number of times. */
+    stepUp(amount?: number): void;
+    /** Decreases the value by `step` a given number of times. */
+    stepDown(amount?: number): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    private get effectiveDisabled();
+    private get steppersDisabled();
+    private get atMinimum();
+    private get atMaximum();
+    private handleInput;
+    private handleChange;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleSlotChange;
+    private keepInputFocus;
+    private forwardFocus;
+    private stepBy;
+    protected updated(changed: PropertyValues<this>): void;
+    private syncFormState;
+    private renderStepper;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-number-input': NumberInput;
+    }
+}
+//# sourceMappingURL=number-input.d.ts.map

package/types/src/number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/number-input.ts"],"names":[],"mappings":"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"}

package/vue.d.ts

@@ -0,0 +1,37 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/number-input. Import once, anywhere in the program:
+//
+//     import '@c2n/number-input/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { NumberInput, NumberInputEventMap } from '@c2n/number-input'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-number-input': DefineComponent<
+      C2Props<NumberInput> & {
+        'hide-steppers'?: unknown
+        'error-text'?: unknown
+        'aria-label'?: unknown
+        onInput?: (event: NumberInputEventMap['input']) => void
+        onChange?: (event: NumberInputEventMap['change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}