@mcp-b/web-components 0.2.0

package/dist/number-field-BQHB7UYo.js

@@ -0,0 +1,726 @@
+import { Localize } from "./utilities/localize.js";
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { SigveloBlurEvent, SigveloChangeEvent, SigveloFocusEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+import { live } from "lit/directives/live.js";
+import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
+//#region src/components/number-field/number-field.styles.ts
+var number_field_styles_default = css`
+  #visual-box.xs,
+  #visual-box.sm,
+  #visual-box.md,
+  #visual-box.lg,
+  #visual-box.xl {
+    padding: 0;
+    gap: 0;
+  }
+
+  /* Pills */
+  #visual-box.pill {
+    border-radius: var(--sigvelo-radius-full);
+  }
+
+  #text-box {
+    /* Hide the number spinners in Firefox*/
+    -moz-appearance: textfield;
+    flex: 1 1 auto;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  /* Hide the number spinners in Chrome/Safari */
+  #text-box::-webkit-inner-spin-button,
+  #text-box::-webkit-outer-spin-button {
+    display: none;
+  }
+
+  #stepper-up,
+  #stepper-down {
+    display: flex;
+    top: 0;
+    bottom: 0;
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+    margin: 0;
+    padding: 0 0.75em;
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-size: 1.25em;
+    cursor: pointer;
+    transition: var(--sigvelo-motion-duration-interaction) translate ease;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-border-width);
+    }
+
+    &:active:not(:disabled) {
+      translate: 0 var(--sigvelo-motion-distance-xs);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+`;
+//#endregion
+//#region src/components/number-field/number-field.ts
+/**
+* <sigvelo-number-field>
+*
+* @summary Allows users to input and edit numbers.
+* @tag sigvelo-number-field
+* @documentation https://design-system.sigvelo.com/docs/components/number-field
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot label - The number field's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot description - The number field's description. For plain-text descriptions, you can use the `description`
+*  attribute instead.
+* @slot start - An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
+* @slot end - An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
+*
+* @event sigvelo-blur - Emitted when the number field loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user commits changes to the number field's value.
+* @event sigvelo-focus - Emitted when the number field receives focus. This event does not bubble.
+* @event sigvelo-input - Emitted when the number field receives input.
+*
+* @csspart label - The element that contains the number field's label.
+* @csspart description - The element that contains the number field's description.
+* @csspart visual-box - The element that wraps the internal text box.
+* @csspart text-box - The internal text box, an `<input>` element.
+* @csspart stepper - The up and down stepper buttons.
+* @csspart stepper-up - The up stepper button.
+* @csspart stepper-down - The down stepper button.
+*
+* @cssstate disabled - Applied when the number field is disabled.
+* @cssstate blank - Applied when the number field has a blank value.
+* @cssstate focused - Applied when the number field has focus.
+* @cssstate user-valid - Applied when the number field is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the number field is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* ```html
+* <sigvelo-number-field
+*   name="name"
+*   label="Lives"
+*   value="9"
+*   style="max-width: 200px;"
+* ></sigvelo-number-field>
+* ```
+*
+* @example Labels and descriptions
+* You can use the `label` and `description` attributes to provide plain text labels and descriptions for the text field. If you want to provide HTML, use the `label` and `description` slots instead.
+*
+* ```html
+* <sigvelo-number-field name="name" label="Kitten age (months)" style="max-width: 200px;">
+*   <span slot="description">
+*     <a href="https://example.com/" target="_blank">How to determine age</a>
+*   </span>
+* </sigvelo-number-field>
+* ```
+*
+* @example Providing an initial value
+* Use the `value` attribute to provide an initial value for the text field.
+*
+* ```html
+* <sigvelo-number-field
+*   name="name"
+*   label="Treats given today"
+*   value="2"
+*   style="max-width: 200px;"
+* >
+* </sigvelo-number-field>
+* ```
+*
+* @example Setting min, max, and step
+* Use the `min` and `max` attributes to set a minimum and maximum value for the number field. Use the `step` attribute to change the granularity the value must adhere to.
+*
+* ```html
+* <sigvelo-number-field
+*   name="donation"
+*   label="Monthly shelter donation"
+*   description="Amount in dollars (5-100)"
+*   min="5"
+*   max="100"
+*   step="5"
+*   value="25"
+*   style="max-width: 200px;"
+* ></sigvelo-number-field>
+* ```
+*
+* @example Adding a placeholder
+* Use the `placeholder` attribute to show a placeholder in the text field when it's empty.
+*
+* ```html
+* <sigvelo-number-field
+*   type="number"
+*   label="Weight"
+*   description="Measured in pounds"
+*   min="0"
+*   step="0.5"
+*   placeholder="10.5"
+*   style="max-width: 200px;"
+* ></sigvelo-number-field>
+* ```
+*
+* @example Start and end content
+* Use the `start` and `end` slots to add presentational icons or text. Avoid interactive elements such as buttons, links, etc. Works well with `<sigvelo-icon>` and `<svg>` elements.
+*
+* ```html
+* <div style="max-width: 200px;">
+*   <sigvelo-number-field type="number" value="100" name="adoption" label="Adoption fee">
+*     <span slot="start">$</span>
+*   </sigvelo-number-field>
+*
+*   <br>
+*
+*   <sigvelo-number-field type="number" value="30" name="playtime" label="Playtime minutes">
+*     <sigvelo-icon slot="end" name="clock"></sigvelo-icon>
+*   </sigvelo-number-field>
+*
+*   <br>
+*
+*   <sigvelo-number-field name="treats" value="2" label="Daily treats">
+*     <sigvelo-icon slot="start" name="cat"></sigvelo-icon>
+*     <sigvelo-icon slot="end" name="cookie"></sigvelo-icon>
+*   </sigvelo-number-field>
+* </sigvelo-number-field>
+* ```
+*
+* @example Filled and unstyled number fields
+* Set the `variant` attribute to `normal`, `filled`, or `unstyled` to change the text field's variant.
+*
+* ```html
+* <div style="max-width: 200px;">
+*   <sigvelo-number-field variant="normal" label="Normal number field" placeholder="Enter number" style="max-width: 200px;"></sigvelo-number-field><br>
+*   <sigvelo-number-field variant="filled" label="Filled number field" placeholder="Enter number" style="max-width: 200px;"></sigvelo-number-field><br>
+*   <sigvelo-number-field variant="unstyled" label="Unstyled number field" placeholder="Enter number" style="max-width: 200px;"></sigvelo-number-field>
+* </div>
+* ```
+*
+* @example Pill-shaped number fields
+* Text fields can be rendered with pill-shaped edges by adding the `pill` attribute.
+*
+* ```html
+* <sigvelo-number-field pill label="Whiskers count" style="max-width: 200px;"></sigvelo-number-field>
+* ```
+*
+* @example Without steppers
+* Add the `without-steppers` attribute to remove the stepper buttons.
+*
+* ```html
+* <sigvelo-number-field
+*   name="name"
+*   label="Purrs per minute"
+*   value="25"
+*   without-steppers
+*   style="max-width: 200px;"
+* ></sigvelo-number-field>
+* ```
+*
+* **Note:** This will remove the stepper buttons, but keyboard users can still modify the value using the arrow keys.
+*
+* @example Changing the size
+* Use the `size` attribute to change the text field's size.
+*
+* ```html
+* <div style="max-width: 200px;">
+*   <sigvelo-number-field size="xs" label="Hairball count (xs)"></sigvelo-number-field><br>
+*   <sigvelo-number-field size="sm" label="Meows per hour (sm)"></sigvelo-number-field><br>
+*   <sigvelo-number-field size="md" label="Zoomies today (md)"></sigvelo-number-field><br>
+*   <sigvelo-number-field size="lg" label="Treats budget (lg)"></sigvelo-number-field><br>
+*   <sigvelo-number-field size="xl" label="Seconds until empty bowl (xl)"></sigvelo-number-field>
+* </div>
+* ```
+*
+* @example Disabling
+* Use the `disabled` attribute to disable the text field.
+*
+* ```html
+* <sigvelo-number-field label="Limit reached (no more cats!)" disabled style="max-width: 200px;"></sigvelo-number-field>
+* ```
+*
+* @example Showing labels on the side
+* With the `sigvelo-side-label` utility, you can show labels on the side instead of on top of the text field. You can control the width of the label by setting the `--label-width` custom property.
+*
+* ```html
+* <div style="max-width: 300px;">
+*   <sigvelo-number-field
+*     class="sigvelo-side-label"
+*     style="--label-width: 12ch;"
+*     name="name"
+*     label="Age"
+*     description="How old is your feline friend?"
+*   ></sigvelo-number-field>
+*   <br>
+*   <sigvelo-number-field
+*     class="sigvelo-side-label"
+*     style="--label-width: 12ch;"
+*     type="number"
+*     name="email"
+*     label="Weight"
+*     description="In pounds, please be honest!"
+*   ></sigvelo-number-field>
+* </div>
+* ```
+*
+* @example Validation
+* A number of attributes can be used to enable validation using the Constraint Validation API. These include `required`, `pattern`, `minlength`, `maxlength`, `min`, `max`, and `step`. They work exactly like their native counterparts.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" style="max-width: 200px;">
+*   <sigvelo-number-field name="required" label="Number of cats" required></sigvelo-number-field><br>
+*   <sigvelo-number-field name="min" label="Minimum cats (min 3)" required min="3"></sigvelo-number-field><br>
+*   <sigvelo-number-field name="max" label="Maximum cats (max 10)" required max="10"></sigvelo-number-field><br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+* ```
+*
+* @example Using custom validation
+* Use the `setCustomValidity()` method to make the text field invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" id="number-field__custom-validation">
+*   <sigvelo-number-field
+*     name="name"
+*     label="Happiness level (1-10)"
+*     description="This field will be invalid until custom validation is removed"
+*     style="max-width: 200px;"
+*   ></sigvelo-number-field>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+* </form>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.getElementById('number-field__custom-validation');
+*   const textField = form.querySelector('sigvelo-number-field');
+*
+*   textField.setCustomValidity('Not so fast, bubba!');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid text fields using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="number-field__validation-pseudo">
+*   <sigvelo-number-field
+*     name="name"
+*     label="Toy budget"
+*     description="Must be at least $50"
+*     min="50"
+*     required
+*     style="max-width: 200px;"
+*   ></sigvelo-number-field>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .number-field__validation-pseudo {
+*     sigvelo-number-field:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-number-field:invalid {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="number-field__validation-custom">
+*   <sigvelo-number-field
+*     name="name"
+*     label="Cat videos watched"
+*     description="Be honest…"
+*     required
+*     style="max-width: 200px;"
+*     value="1000"
+*   ></sigvelo-number-field>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .number-field__validation-custom {
+*     sigvelo-number-field:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-number-field:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloNumberField = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.isPasswordVisible = false;
+		this.value = "";
+		this.disabled = false;
+		this.readonly = false;
+		this.variant = "normal";
+		this.size = "md";
+		this.pill = false;
+		this.required = false;
+		this.withoutSteppers = false;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			number_field_styles_default
+		];
+	}
+	get focusableAnchor() {
+		return this.textBox;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("invalid", this.handleHostInvalid);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("invalid", this.handleHostInvalid);
+	}
+	updated(changedProperties) {
+		this.updateValidity();
+		if (changedProperties.has("value")) {
+			this.customStates.set("blank", this.value === "");
+			this.internals.setFormValue(this.value);
+		}
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (this.hadUserInteraction || this.wasSubmitted) {
+			this.customStates.set("user-invalid", this.isInvalid);
+			this.customStates.set("user-valid", !this.isInvalid);
+		} else {
+			this.customStates.set("user-invalid", false);
+			this.customStates.set("user-valid", false);
+		}
+	}
+	/** @internal Called when a containing fieldset is disabled. */
+	formDisabledCallback(isDisabled) {
+		this.disabled = isDisabled;
+	}
+	/** @internal Called when the form is reset. */
+	formResetCallback() {
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.value = this.getAttribute("value") ?? "";
+	}
+	handleBlur() {
+		this.customStates.set("focused", false);
+		this.dispatchEvent(new SigveloBlurEvent());
+	}
+	handleChange() {
+		this.hadUserInteraction = true;
+		this.dispatchEvent(new SigveloChangeEvent());
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleFocus() {
+		this.customStates.set("focused", true);
+		this.dispatchEvent(new SigveloFocusEvent());
+	}
+	handleHostInvalid() {
+		this.wasSubmitted = true;
+	}
+	handleDecrease() {
+		this.stepDown();
+		this.handleInput();
+		this.dispatchEvent(new InputEvent("change", {
+			bubbles: true,
+			composed: true,
+			cancelable: false
+		}));
+		this.dispatchEvent(new InputEvent("input", {
+			bubbles: true,
+			composed: true,
+			cancelable: false
+		}));
+		this.dispatchEvent(new SigveloChangeEvent());
+	}
+	handleIncrease() {
+		this.stepUp();
+		this.handleInput();
+		this.dispatchEvent(new InputEvent("change", {
+			bubbles: true,
+			composed: true,
+			cancelable: false
+		}));
+		this.dispatchEvent(new InputEvent("input", {
+			bubbles: true,
+			composed: true,
+			cancelable: false
+		}));
+		this.dispatchEvent(new SigveloChangeEvent());
+	}
+	maintainFocusOnPointerDown(event) {
+		event.preventDefault();
+		this.focus();
+	}
+	async handleInput() {
+		this.value = this.textBox.value;
+		await this.updateComplete;
+		this.dispatchEvent(new SigveloInputEvent());
+	}
+	handleKeyDown(event) {
+		if (event.key === "Enter" && this.internals.form) {
+			const submitter = [...this.internals.form.elements].find((el) => {
+				return ["button", "input"].includes(el.localName) && el.type === "submit";
+			});
+			this.internals.form.requestSubmit(submitter);
+		}
+	}
+	handleVisualBoxPointerDown(event) {
+		const target = event.target;
+		const isBox = target?.id === "visual-box";
+		const isSlot = target.hasAttribute("slot");
+		if (isBox || isSlot) {
+			event.preventDefault();
+			this.textBox.focus();
+		}
+	}
+	/** Sets the form control's validity */
+	async updateValidity() {
+		await this.updateComplete;
+		const hasCustomValidity = this.getCustomValidity().length > 0;
+		const validationMessage = hasCustomValidity ? this.getCustomValidity() : this.textBox.validationMessage;
+		const flags = {
+			badInput: this.textBox.validity.badInput,
+			customError: hasCustomValidity,
+			patternMismatch: this.textBox.validity.patternMismatch,
+			rangeOverflow: this.textBox.validity.rangeOverflow,
+			rangeUnderflow: this.textBox.validity.rangeUnderflow,
+			stepMismatch: this.textBox.validity.stepMismatch,
+			tooLong: this.textBox.validity.tooLong,
+			tooShort: this.textBox.validity.tooShort,
+			typeMismatch: this.textBox.validity.typeMismatch,
+			valueMissing: this.textBox.validity.valueMissing
+		};
+		this.isInvalid = hasCustomValidity ? true : !this.textBox.validity.valid;
+		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
+	}
+	/** Sets focus to the number field. */
+	focus() {
+		this.textBox.focus();
+	}
+	/** Removes focus from the number field. */
+	blur() {
+		this.textBox.blur();
+	}
+	/** Selects all text in the number field. */
+	select() {
+		this.textBox.select();
+	}
+	/** Sets the start and end positions of the current text selection in the number field. */
+	setSelectionRange(start, end, direction = "none") {
+		this.textBox.setSelectionRange(start, end, direction);
+	}
+	/** Replaces a range of text in the number field with a new string. */
+	setRangeText(replacement, start, end, selectMode) {
+		this.textBox.setRangeText(replacement, start ?? this.textBox.selectionStart, end ?? this.textBox.selectionEnd, selectMode);
+		this.value = this.textBox.value;
+	}
+	/**
+	* When a supported `type` is used, this method will decrease the number field's value by `step`. This is a programmatic
+	* change, so `input` and `change` events will not be emitted when this is called.
+	*/
+	stepDown() {
+		this.textBox.stepDown();
+		this.value = this.textBox.value;
+		this.focus();
+	}
+	/**
+	* When a supported `type` is used, this method will increase the number field's value by `step`. This is a programmatic
+	* change, so `input` and `change` events will not be emitted when this is called.
+	*/
+	stepUp() {
+		this.textBox.stepUp();
+		this.value = this.textBox.value;
+		this.focus();
+	}
+	render() {
+		const hasLabel = this.label || this.slotsWithContent.has("label");
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		const valueAsNumber = parseFloat(this.value) || 0;
+		const canIncrease = this.max === void 0 || valueAsNumber < this.max;
+		const canDecrease = this.min === void 0 || valueAsNumber > this.min;
+		return html`
+      <label id="label" part="label" for="text-box" class=${classMap({ vh: !hasLabel })}>
+        <slot name="label">${this.label}</slot>
+      </label>
+
+      <div id="description" part="description" class=${classMap({ vh: !hasDescription })}>
+        <slot name="description">${this.description}</slot>
+      </div>
+
+      <div
+        id="visual-box"
+        part="visual-box"
+        class=${classMap({
+			normal: this.variant === "normal",
+			filled: this.variant === "filled",
+			unstyled: this.variant === "unstyled",
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			pill: this.pill,
+			disabled: this.disabled
+		})}
+        @pointerdown=${this.handleVisualBoxPointerDown}
+      >
+        ${!this.withoutSteppers ? html`
+              <button
+                id="stepper-down"
+                part="stepper stepper-down"
+                ?disabled=${!canDecrease || this.disabled}
+                tabindex="-1"
+                aria-label=${this.localize.term("decrease")}
+                @pointerdown=${this.maintainFocusOnPointerDown}
+                @click=${this.handleDecrease}
+              >
+                <sigvelo-icon library="system" name="minus"></sigvelo-icon>
+              </button>
+            ` : ""}
+
+        <slot name="start"></slot>
+
+        <input
+          id="text-box"
+          part="text-box"
+          type="number"
+          inputmode="numeric"
+          ?autofocus=${this.autofocus}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          placeholder=${ifDefined(this.placeholder)}
+          pattern=${ifDefined(this.pattern)}
+          min=${ifDefined(this.min)}
+          max=${ifDefined(this.max)}
+          step=${ifDefined(this.step)}
+          .value=${live(this.value)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          spellcheck="false"
+          enterkeyhint=${ifDefined(this.enterkeyhint)}
+          aria-describedby="description"
+          aria-invalid=${this.isInvalid ? "true" : "false"}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @keydown=${this.handleKeyDown}
+        />
+
+        <slot name="end"></slot>
+
+        ${!this.withoutSteppers ? html`
+              <button
+                id="stepper-up"
+                part="stepper stepper-up"
+                ?disabled=${!canIncrease || this.disabled}
+                tabindex="-1"
+                aria-label=${this.localize.term("increase")}
+                @pointerdown=${this.maintainFocusOnPointerDown}
+                @click=${this.handleIncrease}
+              >
+                <sigvelo-icon library="system" name="plus"></sigvelo-icon>
+              </button>
+            ` : ""}
+      </div>
+    `;
+	}
+};
+__decorate([query("input")], SigveloNumberField.prototype, "textBox", void 0);
+__decorate([state()], SigveloNumberField.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloNumberField.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloNumberField.prototype, "wasSubmitted", void 0);
+__decorate([state()], SigveloNumberField.prototype, "isPasswordVisible", void 0);
+__decorate([property()], SigveloNumberField.prototype, "label", void 0);
+__decorate([property()], SigveloNumberField.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloNumberField.prototype, "name", void 0);
+__decorate([property()], SigveloNumberField.prototype, "value", void 0);
+__decorate([property()], SigveloNumberField.prototype, "placeholder", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloNumberField.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloNumberField.prototype, "readonly", void 0);
+__decorate([property({ reflect: true })], SigveloNumberField.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], SigveloNumberField.prototype, "size", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloNumberField.prototype, "pill", void 0);
+__decorate([property()], SigveloNumberField.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloNumberField.prototype, "required", void 0);
+__decorate([property()], SigveloNumberField.prototype, "pattern", void 0);
+__decorate([property({ type: Number })], SigveloNumberField.prototype, "min", void 0);
+__decorate([property({ type: Number })], SigveloNumberField.prototype, "max", void 0);
+__decorate([property()], SigveloNumberField.prototype, "step", void 0);
+__decorate([property()], SigveloNumberField.prototype, "autocomplete", void 0);
+__decorate([property({ type: Boolean })], SigveloNumberField.prototype, "autofocus", void 0);
+__decorate([property()], SigveloNumberField.prototype, "enterkeyhint", void 0);
+__decorate([property({
+	attribute: "without-steppers",
+	type: Boolean
+})], SigveloNumberField.prototype, "withoutSteppers", void 0);
+customElements.define("sigvelo-number-field", SigveloNumberField);
+//#endregion
+export { SigveloNumberField as t };