@mcp-b/web-components 0.2.0

package/dist/select-DLIaRnA4.js

@@ -0,0 +1,690 @@
+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";
+import { getSlotHtml } from "@mcp-b/wc-support/utilities/html";
+//#region src/components/select/select.styles.ts
+var select_styles_default = css`
+  #visual-box {
+    cursor: default;
+  }
+
+  #chevron {
+    font-size: 1.25em;
+    pointer-events: none;
+  }
+`;
+//#endregion
+//#region src/components/select/select.ts
+/**
+* <sigvelo-select>
+*
+* @summary Allows users to choose an option from a predefined list of options.
+* @tag sigvelo-select
+* @documentation https://design-system.sigvelo.com/docs/components/select
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot label - The select's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot description - The select'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 select loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user commits changes to the select's value.
+* @event sigvelo-focus - Emitted when the select receives focus. This event does not bubble.
+* @event sigvelo-input - Emitted when the select receives input.
+*
+* @csspart label - The element that contains the select's label.
+* @csspart description - The element that contains the select's description.
+* @csspart visual-box - The element that wraps the internal text box.
+* @csspart text-box - The internal text box, a `<select>` element.
+* @csspart chevron - The chevron icon, a `<sigvelo-icon>` element.
+* @csspart chevron__svg - The chevron icon's `<svg>` part.
+*
+* @cssstate disabled - Applied when the select is disabled.
+* @cssstate blank - Applied when the select has no selected option.
+* @cssstate focused - Applied when the select has focus.
+* @cssstate user-valid - Applied when the select is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the select is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* This component works very similar to the `<select>` element. You can add `<option>`, `<optgroup>`, and `<hr>` elements to it to group and provide options, which are then copied into the component's shadow root.
+*
+* ```html
+* <sigvelo-select
+*   name="cat"
+*   label="Wild cats"
+*   description="Select your favorite type of cat from the wild"
+* >
+*   <optgroup label="Small cats">
+*     <option value="bobcat">Bobcat</option>
+*     <option value="sand-cat">Sand cat</option>
+*     <option value="serval">Serval</option>
+*   </optgroup>
+*   <optgroup label="Big cats">
+*     <option value="cheetah">Cheetah</option>
+*     <option value="lion">Lion</option>
+*     <option value="tiger">Tiger</option>
+*   </optgroup>
+* </sigvelo-select>
+* ```
+*
+* @example Labels and descriptions
+* You can use the `label` and `description` attributes to provide plain text labels and descriptions for the select. If you want to provide HTML, use the `label` and `description` slots instead.
+*
+* ```html
+* <sigvelo-select name="zzz" label="Where to sleep">
+*   <span slot="description">
+*     For more information, <a href="https://example.com/" target="_blank">visit our website</a>.
+*   </span>
+*   <option value="box">Cardboard box</option>
+*   <option value="floor">Floor</option>
+*   <option value="laundry">Laundry</option>
+*   <option value="pillow">Pillow</option>
+*   <option value="sunbeam">Sunbeam</option>
+* </sigvelo-select>
+* ```
+*
+* @example Providing an initial value
+* Use the `value` attribute to provide an initial value for the select.
+*
+* ```html
+* <sigvelo-select name="size" label="Select a size" value="md">
+*   <option value="xs">Extra small</option>
+*   <option value="sm">Small</option>
+*   <option value="md">Medium</option>
+*   <option value="lg">Large</option>
+*   <option value="xl">Extra large</option>
+* </sigvelo-select>
+* ```
+*
+* **Note:** This behavior is different from native selects that use the option's `selected` attribute to set the value. With `<sigvelo-select>`, always use the `value` attribute to set the value.
+*
+* @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
+* <sigvelo-select name="account" label="Account type">
+*   <sigvelo-icon slot="start" name="user"></sigvelo-icon>
+*   <option value="owner">Owner</option>
+*   <option value="admin">Administrator</option>
+*   <option value="user">User</option>
+*   <option value="guest">Guest</option>
+* </sigvelo-select>
+*
+* <br>
+*
+* <sigvelo-select name="contact" label="Preferred method of contact">
+*   <sigvelo-icon slot="end" name="mail"></sigvelo-icon>
+*   <option value="email">Email</option>
+*   <option value="phone">Phone</option>
+*   <option value="mail">Regular Mail</option>
+*   <option value="text">Text Message</option>
+*   <option value="none">None</option>
+* </sigvelo-select>
+* ```
+*
+* @example Filled and unstyled selects
+* Set the `variant` attribute to `normal`, `filled`, or `unstyled` to change the select's variant.
+*
+* ```html
+* <sigvelo-select variant="normal" label="Normal select" value="normal">
+*   <option value="normal">Normal</option>
+*   <option value="filled">Filled</option>
+*   <option value="unstyled">Unstyled</option>
+* </sigvelo-select><br>
+*
+* <sigvelo-select variant="filled" label="Filled select" value="filled">
+*   <option value="normal">Normal</option>
+*   <option value="filled">Filled</option>
+*   <option value="unstyled">Unstyled</option>
+* </sigvelo-select><br>
+*
+* <sigvelo-select variant="unstyled" label="Unstyled select" value="unstyled">
+*   <option value="normal">Normal</option>
+*   <option value="filled">Filled</option>
+*   <option value="unstyled">Unstyled</option>
+* </sigvelo-select>
+* ```
+*
+* @example Pill-shaped selects
+* Selects can be rendered with pill-shaped edges by adding the `pill` attribute.
+*
+* ```html
+* <sigvelo-select pill label="Pill-shaped">
+*   <option value="1">One</option>
+*   <option value="2">Two</option>
+*   <option value="3">Three</option>
+* </sigvelo-select>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to change the select's size.
+*
+* ```html
+* <sigvelo-select size="xs" label="Extra small" value="xs">
+*   <option value="xs">Extra small</option>
+*   <option value="sm">Small</option>
+*   <option value="md">Medium</option>
+*   <option value="lg">Large</option>
+*   <option value="xl">Extra large</option>
+* </sigvelo-select><br>
+*
+* <sigvelo-select size="sm" label="Small" value="sm">
+*   <option value="xs">Extra small</option>
+*   <option value="sm">Small</option>
+*   <option value="md">Medium</option>
+*   <option value="lg">Large</option>
+*   <option value="xl">Extra large</option>
+* </sigvelo-select><br>
+*
+* <sigvelo-select size="md" label="Medium" value="md">
+*   <option value="xs">Extra small</option>
+*   <option value="sm">Small</option>
+*   <option value="md">Medium</option>
+*   <option value="lg">Large</option>
+*   <option value="xl">Extra large</option>
+* </sigvelo-select><br>
+*
+* <sigvelo-select size="lg" label="Large" value="lg">
+*   <option value="xs">Extra small</option>
+*   <option value="sm">Small</option>
+*   <option value="md">Medium</option>
+*   <option value="lg">Large</option>
+*   <option value="xl">Extra large</option>
+* </sigvelo-select><br>
+*
+* <sigvelo-select size="xl" label="Extra large" value="xl">
+*   <option value="xs">Extra small</option>
+*   <option value="sm">Small</option>
+*   <option value="md">Medium</option>
+*   <option value="lg">Large</option>
+*   <option value="xl">Extra large</option>
+* </sigvelo-select>
+* ```
+*
+* @example Adding option groups
+* Use `<optgroup>` elements to add option groups. Set the `label` attribute to an appropriate label.
+*
+* ```html
+* <sigvelo-select name="cat" label="Wild cats">
+*   <optgroup label="Small cats">
+*     <option value="bobcat">Bobcat</option>
+*     <option value="sand-cat">Sand cat</option>
+*     <option value="serval">Serval</option>
+*   </optgroup>
+*   <optgroup label="Big cats">
+*     <option value="cheetah">Cheetah</option>
+*     <option value="lion">Lion</option>
+*     <option value="tiger">Tiger</option>
+*   </optgroup>
+* </sigvelo-select>
+* ```
+*
+* @example Adding dividers
+* Use `<hr>` to add dividers between options.
+*
+* ```html
+* <sigvelo-select name="animal" label="Animal">
+*   <option value="bird">Bird</option>
+*   <option value="cat">Cat</option>
+*   <option value="dog">Dog</option>
+*   <option value="lizard">Lizard</option>
+*   <hr>
+*   <option value="other">Other</option>
+* </sigvelo-select>
+* ```
+*
+* @example Disabling options
+* Use the `disabled` attribute to disable individual options.
+*
+* ```html
+* <sigvelo-select label="Disabled options">
+*   <option value="bird">Bird</option>
+*   <option value="cat">Cat</option>
+*   <option value="dog" disabled>Dog</option>
+*   <option value="lizard">Lizard</option>
+* </sigvelo-select>
+* ```
+*
+* @example Disabling option groups
+* Use the `disabled` attribute to disable an option group.
+*
+* ```html
+* <sigvelo-select label="Disabled option groups">
+*   <optgroup label="Group one">
+*     <option value="morning-1">Morning</option>
+*     <option value="afternoon-1">Afternoon</option>
+*     <option value="evening-1">Evening</option>
+*   </optgroup>
+*   <optgroup label="Group two" disabled>
+*     <option value="morning-2">Morning</option>
+*     <option value="afternoon-2">Afternoon</option>
+*     <option value="evening-2">Evening</option>
+*   </optgroup>
+* </sigvelo-select>
+* ```
+*
+* **Warning:** Disabled option groups [don't currently work](https://bugs.webkit.org/show_bug.cgi?id=227042) in iOS Safari.
+*
+* @example Disabling selects
+* Use the `disabled` attribute to disable the select.
+*
+* ```html
+* <sigvelo-select label="Disabled" disabled>
+*   <option value="bird">Bird</option>
+*   <option value="cat">Cat</option>
+*   <option value="dog">Dog</option>
+*   <option value="lizard">Lizard</option>
+* </sigvelo-select>
+* ```
+*
+* @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 select. You can control the width of the label by setting the `--label-width` custom property.
+*
+* ```html
+* <sigvelo-select
+*   class="sigvelo-side-label"
+*   style="--label-width: 8ch;"
+*   name="quantity"
+*   label="Quantity"
+*   description="How many do you need?"
+* >
+*   <option value="1">1</option>
+*   <option value="2">2</option>
+*   <option value="3">3</option>
+*   <option value="4">4</option>
+*   <option value="5">5</option>
+* </sigvelo-select>
+* <br>
+* <sigvelo-select
+*   class="sigvelo-side-label"
+*   style="--label-width: 8ch;"
+*   name="delivery"
+*   label="Delivery"
+*   description="How soon do you need it?"
+* >
+*   <option value="next">Next-day</option>
+*   <option value="priority">Priority</option>
+*   <option value="ground">Ground</option>
+* </sigvelo-select>
+* ```
+*
+* @example Validation
+* The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until an option with a non-empty value is selected.
+*
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank">
+*   <sigvelo-select name="required" label="Required" required>
+*     <option value=""></option>
+*     <option value="bird">Bird</option>
+*     <option value="cat">Cat</option>
+*     <option value="dog">Dog</option>
+*     <option value="lizard">Lizard</option>
+*   </sigvelo-select>
+*   <br>
+*   <sigvelo-button type="submit">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+* ```
+*
+* @example Using custom validation
+* Use the `setCustomValidity()` method to make the select 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="select__custom-validation">
+*   <sigvelo-select
+*     name="animal"
+*     label="Animal"
+*     description="This field will be invalid until custom validation is removed"
+*   >
+*     <option value="bird">Bird</option>
+*     <option value="cat">Cat</option>
+*     <option value="dog">Dog</option>
+*     <option value="lizard">Lizard</option>
+*   </sigvelo-select>
+*   <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('select__custom-validation');
+*   const select = form.querySelector('sigvelo-select');
+*
+*   select.setCustomValidity('Not so fast, bubba!');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid selects using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="select__validation-pseudo">
+*   <sigvelo-select
+*     name="animal"
+*     label="Animal"
+*     description="This field is required"
+*     required
+*   >
+*     <option value=""></option>
+*     <option value="bird">Bird</option>
+*     <option value="cat">Cat</option>
+*     <option value="dog">Dog</option>
+*     <option value="lizard">Lizard</option>
+*   </sigvelo-select>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .select__validation-pseudo {
+*     sigvelo-select:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-select: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="select__validation-custom">
+*   <sigvelo-select
+*     name="animal"
+*     label="Animal"
+*     description="This field is required"
+*     required
+*   >
+*     <option value=""></option>
+*     <option value="bird">Bird</option>
+*     <option value="cat">Cat</option>
+*     <option value="dog">Dog</option>
+*     <option value="lizard">Lizard</option>
+*   </sigvelo-select>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .select__validation-custom {
+*     sigvelo-select:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-select:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloSelect = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.value = "";
+		this.disabled = false;
+		this.readonly = false;
+		this.variant = "normal";
+		this.size = "md";
+		this.pill = false;
+		this.required = false;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			select_styles_default
+		];
+	}
+	get focusableAnchor() {
+		return this.textBox;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("invalid", this.handleHostInvalid);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("invalid", this.handleHostInvalid);
+	}
+	firstUpdated() {
+		new MutationObserver(() => this.syncOptions()).observe(this, {
+			subtree: true,
+			childList: true,
+			attributes: true
+		});
+		this.syncOptions();
+	}
+	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());
+	}
+	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();
+			this.showPicker();
+		}
+	}
+	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;
+	}
+	async handleInput() {
+		this.value = this.textBox.value;
+		await this.updateComplete;
+		this.dispatchEvent(new SigveloInputEvent());
+	}
+	syncOptions() {
+		this.textBox.innerHTML = getSlotHtml(this.defaultSlot);
+		if (this.value) this.textBox.value = this.value;
+		else {
+			const firstOption = this.textBox.querySelector("option");
+			if (firstOption) this.value = firstOption.value;
+		}
+	}
+	/** 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 select. */
+	focus() {
+		this.textBox.focus();
+	}
+	/** Removes focus from the select. */
+	blur() {
+		this.textBox.blur();
+	}
+	/** Shows the picker in supportive browsers. */
+	showPicker() {
+		if ("showPicker" in this.textBox) this.textBox.showPicker();
+	}
+	render() {
+		const hasLabel = this.label || this.slotsWithContent.has("label");
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		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}
+      >
+        <slot name="start"></slot>
+
+        <select
+          id="text-box"
+          part="text-box"
+          ?autofocus=${this.autofocus}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          .value=${live(this.value)}
+          autocomplete=${ifDefined(this.autocomplete)}
+          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}
+        ></select>
+
+        <slot hidden></slot>
+
+        <slot name="end"></slot>
+
+        <sigvelo-icon
+          id="chevron"
+          part="chevron"
+          exportparts="svg:chevron__svg"
+          library="system"
+          name="selector"
+        ></sigvelo-icon>
+      </div>
+    `;
+	}
+};
+__decorate([query("slot:not([name])")], SigveloSelect.prototype, "defaultSlot", void 0);
+__decorate([query("#text-box")], SigveloSelect.prototype, "textBox", void 0);
+__decorate([state()], SigveloSelect.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloSelect.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloSelect.prototype, "wasSubmitted", void 0);
+__decorate([state()], SigveloSelect.prototype, "options", void 0);
+__decorate([property()], SigveloSelect.prototype, "label", void 0);
+__decorate([property()], SigveloSelect.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloSelect.prototype, "name", void 0);
+__decorate([property()], SigveloSelect.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSelect.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSelect.prototype, "readonly", void 0);
+__decorate([property({ reflect: true })], SigveloSelect.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], SigveloSelect.prototype, "size", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSelect.prototype, "pill", void 0);
+__decorate([property()], SigveloSelect.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSelect.prototype, "required", void 0);
+__decorate([property()], SigveloSelect.prototype, "autocomplete", void 0);
+__decorate([property()], SigveloSelect.prototype, "enterkeyhint", void 0);
+SigveloSelect.disableWarning?.("change-in-update");
+customElements.define("sigvelo-select", SigveloSelect);
+//#endregion
+export { SigveloSelect as t };