@lmvz-ds/components 0.14.0 → 0.15.2

package/dist/collection/collection-manifest.json

@@ -8,6 +8,7 @@
     "components/lmvz-icon/lmvz-icon.js",
     "components/lmvz-input/lmvz-input.js",
     "components/lmvz-menuitem/lmvz-menuitem.js",
+    "components/lmvz-select/lmvz-select.js",
     "integration/header-integration.js"
   ],
   "mixins": [],

package/dist/collection/components/lmvz-button/lmvz-button.css

@@ -56,6 +56,10 @@
 
 }
 @layer lmvz-ds.reset {
+body {
+  margin: 0;
+}
+
 h1,
 h2,
 h3,

package/dist/collection/components/lmvz-card/lmvz-card.css

@@ -56,6 +56,10 @@
 
 }
 @layer lmvz-ds.reset {
+body {
+  margin: 0;
+}
+
 h1,
 h2,
 h3,

package/dist/collection/components/lmvz-header/lmvz-header.js

@@ -1,11 +1,13 @@
 import { h, Host } from "@stencil/core";
-import logo from "../../../assets/icons/Logo.svg";
+import logo from "../../assets/icons/Logo.svg";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { ListKeyboardNavigationController } from "../../utils/aria/list-keyboard-controller";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
 export class LmvzHeader extends ReactiveControllerHost {
     el;
-    validationEl = this.el;
+    get validationEl() {
+        return this.el;
+    }
     primarySlot;
     secondarySlot;
     secondaryNav;
@@ -78,7 +80,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: 'e5efeeb233de82c44e23302d20ebb488dfc6307b', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '5e34efe17901ec990d09cd6764c37858ced1f021', class: "brand" }, h("slot", { key: 'd30fa8bf8e77a6f02bad45dbad58fe9bbdc8b3f3', name: "brand" }, h("img", { key: '074192bf3b5b4bcdb19302a954c56c5c61ee4b8f', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '663f04ecb9d6ea026f9476888b532f8e1c4e432c', "aria-label": "Hauptnavigation" }, h("div", { key: 'ed0f492144c2b94822db02733c371329a95d8a1e', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'cbcf15f96b5b6c2133506902dc992c962e4873fb', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '109ca0ea7ee937c9a1a4a510305595486ea48d94', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'b88d0da4772cf171854c369fa4e01131377c4f35', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '4f024b948ea1ebce1ef914b1149420cd9ed817dd', class: "actions" }, h("slot", { key: 'b1f6cff936e2a8fa5c0ff4e3bcc938a5c4f88e0c', name: "actions" }))));
+        return (h(Host, { key: '1ac6c66802a59061742f677e0c3ab2fb1b12363b', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'ea534c09323539a0df13cb00d0aec382d3c81dd8', class: "brand" }, h("slot", { key: 'b303a741a7d44869c4e53295ab13d606b5ed1d63', name: "brand" }, h("img", { key: '7fd47fa34f3404016be40c8bd49ea28fddd58a8a', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '8e4f9db8b85f3dbea452bb309ae55bc1fac16dcb', "aria-label": "Hauptnavigation" }, h("div", { key: '681c36337dcb3bc4e1833e602af4c642ab1c6acb', role: "menubar", class: "primary-menubar" }, h("slot", { key: '6298235a3421ab083943f25a93c239ae686b8a20', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '64b02f2562779e5e412e5076c66d9fcd2a0bb6f5', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '6e0589f700073ba93dc15f5873ca61e03eba5975', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '50a84ddd9ed61f6c2a1fa32a91ccfdcfb1f3ae94', class: "actions" }, h("slot", { key: 'e57d76343a0f21666479e9a1d3ae4e94843b403e', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/lmvz-input/lmvz-input.js

@@ -6,7 +6,9 @@ import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
 let inputIdCounter = 0;
 export class LmvzInput extends ReactiveControllerHost {
     el;
-    validationEl = this.el;
+    get validationEl() {
+        return this.el;
+    }
     lmvzInput;
     internals;
     nativeInputElement;
@@ -144,9 +146,9 @@ export class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (h("div", { key: '79ab97e1e1d0217d5302ca1dea7087292ef19fc7', class: classNames('input-container', {
+        return (h("div", { key: '50e70a8963db11234428d8753b4ac4a22424fe93', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: '9e59a33c261f610f93e1d6db3a07107f9300bbda', class: 'input-wrapper' }, h("slot", { key: 'fadb3f5e49afa817014cdbd44774462b467827f4', name: 'before-input' }), h("div", { key: '27d592787bb841fbd430c2e8ce0adc10f59b68ec', class: 'label-input-group' }, h("label", { key: 'f83f154f356660ecafde254b5437ce6c42898b54', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'b51463179a2099ecd687ccd2480136379b0d0502', class: 'required-indicator', "aria-hidden": 'true' }, ' ', "*"))), h("input", { key: '30d8308f286e82fba5d2ebdad972509c06294543', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("slot", { key: 'a8448a0827ce24194b21b8281d2b54eb76f24652', name: 'after-input' })), h("div", { key: '79413854b97380812c84f3128d1db053d4154008', id: this.helperId, role: 'status' }, this.helperText || null), h("div", { key: 'd34c6b421688934b69917f6da1f9bb22c220a6f9', id: this.errorId, role: 'alert' }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, h("div", { key: '15fdd5c130ff915830b5a9055743d3493f02baf0', class: "input-wrapper" }, h("slot", { key: '16dd0a7af0ea88b1b4f23e9c62bc20f28425b9ee', name: "before-input" }), h("div", { key: '46afc3affa6fca9049da985fb65a2aab94b0d479', class: "label-input-group" }, h("label", { key: '21c938202cdd21beb284b75d2451247a421a0218', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '0bbba8b04242a1bee0bf0b5b0bc15c11f616cbac', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '9af271fb9251e78706190a0e6cb8373ace8a10f7', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("slot", { key: 'db559809a6a5614b522f362c3cf6e97469fb4da4', name: "after-input" })), h("div", { key: '191b364963a017f6b458c2d33fbc4a1b376b8379', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '058d13a869f6a3c49f94793eeacecb2b2e672e5c', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/lmvz-select/lmvz-select.css

@@ -0,0 +1,197 @@
+
+@layer /** */
+    /**
+     * reset: CSS resets for browser defaults or expectedly problematic 3rd party libraries
+     */
+    lmvz-ds.reset,
+
+    /**
+     * theme: tokens, typography, etc. 
+     */
+    lmvz-ds.theme,
+
+    /**
+     * components: overrides for UI components and CSS-only component implementation
+     *      Design System components should append their styles into this layer at definition! 
+     */
+    lmvz-ds.components,
+
+    /**
+     * overrides: utility classes, helpers, product- or application-specific styles.
+     *      Usually, you do not want to add DS util styles to a layer directly.
+     *      Only place those styles here, that are being exported as part of a theme. 
+     */
+    lmvz-ds.overrides;
+/**
+ * This defines the order of our lmvz-ds' CSS layers.
+ * Important: Always import this file _before_ layering your own styles!
+ */
+@layer lmvz-ds.theme {
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Book'),
+    url('/assets/fonts/Router-Book.woff') format('woff'),
+    local('Router');
+  font-weight: 400 normal;
+}
+
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Medium'),
+    url('/assets/fonts/Router-Medium.woff') format('woff'),
+    local('Router');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: Router;
+  src:
+    local('Router-Bold'),
+    url('/assets/fonts/Router-Bold.woff') format('woff'),
+    local('Router');
+  font-weight: 700 bold;
+}
+
+}
+:host {
+  display: block;
+  font-family: var(--lmvz-global-font-family-default, Router);
+  /* Extra top space to accommodate the floating label */
+
+  --lmvz-internal-select-floating-label-top-offset: 0.375rem;
+
+  padding-top: var(--lmvz-internal-select-floating-label-top-offset);
+
+  /* Component variable mapping */
+  --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);
+  --lmvz-select-bg: var(--lmvz-semantic-color-int-secondary, #f0f0f0);
+  --lmvz-select-bg-hover: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
+  --lmvz-select-text-color: var(--lmvz-semantic-color-int-on-secondary, #000000);
+  --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
+  --lmvz-select-padding-x: var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  --lmvz-select-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
+  --lmvz-select-height: 40px;
+  --lmvz-select-label-font-size: var(--lmvz-component-component-typography-body-sm-font-size, 0.75rem);
+  --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);
+  --lmvz-select-label-minimized-padding-x: 4px;
+  --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);
+  --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-selected, #0e7ab4);
+  --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
+}
+.select-wrapper {
+  position: relative;
+  height: var(--lmvz-select-height);
+}
+/* Floating label – positioned above the trigger when a value is selected */
+label {
+  position: absolute;
+  top: 50%;
+  left: var(--lmvz-select-padding-x);
+  font-size: var(--lmvz-select-label-font-size);
+  color: var(--lmvz-select-label-color);
+  line-height: normal;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 2;
+  transform: translateY(-50%);
+  transform-origin: left top;
+  transition:
+    top 0.2s ease-out,
+    transform 0.2s ease-out,
+    opacity 0.2s ease-out,
+    padding 0.2s ease-out;
+}
+label.assistive-label {
+  opacity: 0;
+  padding: 0;
+}
+label.floating-label {
+  top: var(--lmvz-select-label-top-offset);
+  transform: translateY(0) scale(0.85);
+  left: calc(var(--lmvz-select-padding-x) - 2px);
+  background-color: var(--lmvz-select-bg);
+  padding: 0 var(--lmvz-select-label-minimized-padding-x);
+  opacity: 1;
+  font-weight: 500;
+}
+label > span[aria-hidden='true'],
+div[aria-hidden='true'] > span:first-child > span[aria-hidden='true'] {
+  color: var(--lmvz-select-error-color);
+  margin-left: 2px;
+  display: inline-block;
+  line-height: 0;
+  vertical-align: middle;
+}
+/* Visual pill trigger */
+div[aria-hidden] {
+  display: flex;
+  align-items: center;
+  gap: var(--lmvz-select-gap);
+  height: 100%;
+  padding: 0 var(--lmvz-select-padding-x);
+  border-radius: var(--lmvz-select-radius);
+  background-color: var(--lmvz-select-bg);
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  transition: background-color 0.15s ease;
+}
+:host(:not([disabled])) .select-wrapper:hover div[aria-hidden] {
+  background-color: var(--lmvz-select-bg-hover);
+}
+.select-wrapper:focus-within div[aria-hidden] {
+  outline: 2px solid var(--lmvz-select-focus-color);
+  outline-offset: 2px;
+}
+div[aria-hidden] > span:first-child {
+  flex: 1 0 0;
+  font-size: var(--lmvz-component-component-typography-body-md-font-size, 0.875rem);
+  font-weight: var(--lmvz-global-font-weight-500, 500);
+  color: var(--lmvz-select-text-color);
+  line-height: 1.4;
+  letter-spacing: var(--lmvz-component-body-md-letter-spacing, 0px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+div[aria-hidden] > span:last-child {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+img {
+  display: block;
+  width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+  height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
+}
+/* Native select – absolutely covers the trigger, invisible, intercepts clicks */
+select {
+  appearance: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 2;
+  border: none;
+  background: transparent;
+  margin: 0;
+  padding: 0;
+}
+:host([disabled]) .select-wrapper {
+  opacity: var(--lmvz-select-disabled-opacity);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+[role='status'] {
+  margin-top: 4px;
+  padding-left: var(--lmvz-select-padding-x);
+  font-size: var(--lmvz-select-label-font-size);
+  color: var(--lmvz-select-helper-color);
+  line-height: normal;
+}

package/dist/collection/components/lmvz-select/lmvz-select.js

@@ -0,0 +1,223 @@
+import { h, Host } from "@stencil/core";
+import chevronDownSvg from "../../assets/icons/chevron-down.svg";
+import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
+import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+let selectIdCounter = 0;
+export class LmvzSelect extends ReactiveControllerHost {
+    el;
+    get validationEl() {
+        return this.el;
+    }
+    selectId = `lmvz-select-${selectIdCounter++}`;
+    nativeSelectEl;
+    constructor() {
+        super();
+        this.addController(new AriaValidationController(this));
+    }
+    lmvzChange;
+    value;
+    label;
+    helperText;
+    disabled = false;
+    required = false;
+    name;
+    selectedLabel = '';
+    get hasValue() {
+        return Boolean(this.value);
+    }
+    componentDidLoad() {
+        this.syncSelectedLabel();
+        super.componentDidLoad();
+    }
+    handleValueChange(newValue) {
+        if (this.nativeSelectEl && this.nativeSelectEl.value !== (newValue ?? '')) {
+            this.nativeSelectEl.value = newValue ?? '';
+        }
+        this.syncSelectedLabel();
+    }
+    syncSelectedLabel() {
+        if (!this.nativeSelectEl)
+            return;
+        const idx = this.nativeSelectEl.selectedIndex;
+        this.selectedLabel = idx >= 0 ? (this.nativeSelectEl.options[idx]?.text ?? '') : '';
+    }
+    handleChange = (event) => {
+        const select = event.target;
+        this.value = select.value;
+        this.syncSelectedLabel();
+        this.lmvzChange.emit(select.value);
+    };
+    render() {
+        const hasValue = this.hasValue;
+        const shouldShowLabel = hasValue;
+        return (h(Host, { key: '2e93e1107001237254f4f9d1a0bee5caf1ab2471' }, h("div", { key: 'a5403bf851515d24b9a112661f457b9a6d1bc189', class: "select-wrapper" }, h("label", { key: 'c0821beee587d720ef3bf185094645dd2d22b701', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '3659c7947caa419ccf21954da3efc24e5bac6963', "aria-hidden": "true" }, " *")), h("div", { key: '65db22f89f119cbb96ed9de556fd60d7d1c5cce3', "aria-hidden": "true" }, h("span", { key: 'e0e53b6fe461ab078a6268f2f0050a14722d15a4' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '2f508f1d94c1437da702e81d2520f9df3f9e96ea', "aria-hidden": "true" }, " *")), h("span", { key: '7bbc03b8f6665341874e6bcc02592bfdc7aa5861' }, h("img", { key: '6453a928e8aa56bfd39b40d11685554bb37c16e4', src: chevronDownSvg, alt: "" }))), h("select", { key: '40170929a774d271c1487e16d15410715471c06b', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: '5d29283095f87f4d3d38183c4a7e42f5b0e806e4', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '56bf95ba5ab35768681eac7770e56560f6b57f88' }))), this.helperText && h("div", { key: 'fbe735b28acdd21088d377635804781197c0b1b1', role: "status" }, this.helperText)));
+    }
+    static get is() { return "lmvz-select"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./lmvz-select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed as a placeholder when no value is selected,\nand floated above the trigger when a value is present."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed below the select field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the select is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether a value is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute passed to the native select for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedLabel": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "lmvzChange",
+                "name": "lmvzChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user selects a new option. Detail contains the new value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}

package/dist/collection/integration/header-integration.js

@@ -15,11 +15,11 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: '75fb60387c32835c7b7ef3cc30db812abfb9367e' }, h("lmvz-header", { key: '91149faea6215e9f1aed260462bbeb230b73b855', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'd5d7dcc462e262c511eff6b90bd798d514632057', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '4ac381b41e28f822c78da0056dac5e246f7e918b', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '8ae037a821128c3cb2f36373c449636e2bfcc007', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '6c0fec0e451812f0721d426bf6b991b5fb25d9cd', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: 'c43f7d2bbf035f2375b3def77cecc397b3cd8de6', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '9c9c4d86c5027901c8cdfa0d66d615342034ff7b', icon: "book" }), "Deutsch 7"), h("lmvz-menuitem", { key: '7a91ed4e5aaf13a0d3e03e183dcf57f9c3d0f322', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'f1dea525f81b168de5db345d5f1dc978e63fbda8', icon: "book" }), "Mathe 2"), h("lmvz-menuitem", { key: '7fafd65317c833c22888ab57a28d0f28f314e92b', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '47b11e1ee520fd0898052071b52d1a89e5b54d43', icon: "cog" }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '42d5fc054af9032a5f0ae185b2db2ef1fb565b11', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: 'f962c1a573e72ee5e1ec67195e26be3b59185efb', icon: "cog" })), h("lmvz-button", { key: '31675becc7bc819577f9aeda2c474637a65e5949', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '87f52382c676820e8e5d981fc4ac7824b892e923', icon: "user" }))), h("main", { key: 'b5949edfd76c42f5e654cf04a6e1f5cd3654ed0d' }, h("h1", { key: '75228585f485f33349c780ad82b22449811761ec' }, "Content"))));
+        return (h(Host, { key: 'a20e667b943c45a1cc78890676037453d5a3fe25' }, h("lmvz-header", { key: 'c462cd3f90b1abbc1b4366e7bf18f5532909161e', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '101474828e4ff41ea9a1377d7d72e45a4e2e91ba', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '58ccfd734fcfb9bc157e24c986e194a49b3fee17', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: 'ee340824a9b5fada1e5c9d3c85d99778718a811f', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '1a3243929e7ab53ffe894f1a8cf9facf9420ae88', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '25a0a9eab0315bee1316f4187e6f683b2c402a5f', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '31bc21254ef8b51cedaba5ac70785e376fa52c54', icon: "book" }), "Deutsch 7"), h("lmvz-menuitem", { key: 'ec0ae15104c0cfa2b0b230f5d2300b8454fa601b', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '297fac997a5e6bbf787641e60bd96e08699f8287', icon: "book" }), "Mathe 2"), h("lmvz-menuitem", { key: '02f7219c4399cce2e081a318091184c9e4beeaff', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: 'b23b652a3ce798a9f2a2c84e4e37815e87a5a415', icon: "cog" }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: 'cbb1d78ab84f7f2902d256fdcec168585f946e74', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '76f1daddc46a82223f25749ee9cec91cee4e302d', icon: "cog" })), h("lmvz-button", { key: '09ddbc536be8adac0a30f34c0dbd05bb0650c0c8', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: 'a47a9cb459402f4005f18f5297a421ca07146ffe', icon: "user" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }
-    static get styles() { return ":host {\n      display: block;\n      min-height: 100vh;\n      background: var(--lmvz-color-spec-bg-outer-view);\n    }\n\n    .active button {\n      background-color: var(--lmvz-semantic-color-status-selected);\n    }\n\n    main {\n      padding: var(--lmvz-component-box-padding-y) var(--lmvz-component-box-padding-x);\n    }"; }
+    static get styles() { return ".active button {\n      background-color: var(--lmvz-semantic-color-status-selected);\n    }"; }
     static get properties() {
         return {
             "activeNav": {

package/dist/components/index.d.ts

@@ -15,6 +15,8 @@ export { LmvzInput as LmvzInput } from '../types/components/lmvz-input/lmvz-inpu
 export { defineCustomElement as defineCustomElementLmvzInput } from './lmvz-input';
 export { LmvzMenuItem as LmvzMenuitem } from '../types/components/lmvz-menuitem/lmvz-menuitem';
 export { defineCustomElement as defineCustomElementLmvzMenuitem } from './lmvz-menuitem';
+export { LmvzSelect as LmvzSelect } from '../types/components/lmvz-select/lmvz-select';
+export { defineCustomElement as defineCustomElementLmvzSelect } from './lmvz-select';
 
 /**
  * Get the base path to where the assets can be found. Use "setAssetPath(path)"

package/dist/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BaPwpeMs.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-DugBvwmd.js";export{LmvzIcon,c as clearIconCache,defineCustomElement as defineCustomElementLmvzIcon}from"./lmvz-icon.js";import{r as t}from"./p-CSRpdnrt.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzChip,defineCustomElement as defineCustomElementLmvzChip}from"./lmvz-chip.js";export{LmvzHeader,defineCustomElement as defineCustomElementLmvzHeader}from"./lmvz-header.js";export{LmvzInput,defineCustomElement as defineCustomElementLmvzInput}from"./lmvz-input.js";export{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";const o=["primary","secondary","tertiary"],n=["small","default","large"],m=["xs","sm","md","lg"],l=[...m,"xl"],p=["text","email","password","tel","url","search","number"],f=[...m,"inherit"],v=["thin","medium","bold","filled"],h=["Logo","actions","adduser","alert","apple","arrow-down","arrow-left","arrow-right","arrow-up","book","bookmark","checkmark","chevron-down","chevron-left","chevron-right","chevron-up","close-l","close-sm","cog","computer","dashboard","delete","download","edit","external","facebook","favorite","filter","group","hide","home","info","instagram","letter","linkedin","logout","map","minus","navigation","plus","qr-scan","question","reader","reset","school","search","send","settings","share","shopping-cart","show","snapchat","sort","speech-bubble","star","student","upload","user","warn-circle","warn-triangle","whatsapp","world","x","youtube"];function z(e){return t(e).catch((e=>{console.error("Unhandled error in Effect:",e)}))}export{h as iconNames,f as iconSizes,v as iconWeights,p as inputTypes,z as run,n as scaleValues,m as sizes,l as textSizes,o as variants}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BaPwpeMs.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-DR19QMDG.js";export{LmvzIcon,c as clearIconCache,defineCustomElement as defineCustomElementLmvzIcon}from"./lmvz-icon.js";import{r as t}from"./p-CSRpdnrt.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzChip,defineCustomElement as defineCustomElementLmvzChip}from"./lmvz-chip.js";export{LmvzHeader,defineCustomElement as defineCustomElementLmvzHeader}from"./lmvz-header.js";export{LmvzInput,defineCustomElement as defineCustomElementLmvzInput}from"./lmvz-input.js";export{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";export{LmvzSelect,defineCustomElement as defineCustomElementLmvzSelect}from"./lmvz-select.js";const o=["primary","secondary","tertiary"],n=["small","default","large"],m=["xs","sm","md","lg"],l=[...m,"xl"],f=["text","email","password","tel","url","search","number"],p=[...m,"inherit"],v=["thin","medium","bold","filled"],h=["Logo","actions","adduser","alert","apple","arrow-down","arrow-left","arrow-right","arrow-up","book","bookmark","checkmark","chevron-down","chevron-left","chevron-right","chevron-up","close-l","close-sm","cog","computer","dashboard","delete","download","edit","external","facebook","favorite","filter","group","hide","home","info","instagram","letter","linkedin","logout","map","minus","navigation","plus","qr-scan","question","reader","reset","school","search","send","settings","share","shopping-cart","show","snapchat","sort","speech-bubble","star","student","upload","user","warn-circle","warn-triangle","whatsapp","world","x","youtube"];function z(e){return t(e).catch((e=>{console.error("Unhandled error in Effect:",e)}))}export{h as iconNames,p as iconSizes,v as iconWeights,f as inputTypes,z as run,n as scaleValues,m as sizes,l as textSizes,o as variants}

package/dist/components/lmvz-button.js

@@ -1 +1 @@
-import{p as t,c as o,h as e,d as r,t as n}from"./p-BaPwpeMs.js";import{c as a}from"./p-BfTCfPZ1.js";import{R as l,a as m}from"./p-DugBvwmd.js";import{E as i}from"./p-CN0JX9-m.js";import{i as s,f as d}from"./p-B3JVFwO1.js";const c=t(class extends l{get el(){return this}validationEl;inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;get ti(){return 0}scale="default";variant="secondary";disabled=!1;type="button";form;constructor(t){super(!1),!1!==t&&this.__registerHost(),this.__attachShadow(),this.lmvzActivation=o(this,"lmvzActivation"),this.addController(new m(this)),this.addController(new i(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=s(this.el),super.connectedCallback()}renderHiddenButton(){const t=this.formEl=d(this.form,this.el);if(!t)return;const{formButtonEl:o}=this;if(null!==o&&t.contains(o))return;const e=this.formButtonEl=document.createElement("button");e.type="submit",e.style.display="none",e.disabled=this.disabled,t.appendChild(e)}submitForm(t){this.formEl&&this.formButtonEl&&(t.preventDefault(),this.formButtonEl.click())}handleClick=t=>{"submit"===this.type&&this.submitForm(t)};render(){return this.renderHiddenButton(),e(r,{key:"3f3eda78349322ce5160d7aac1290a73f0adcd4a","aria-disabled":this.disabled?"true":null},e("button",{key:"b132404d8d5f5bf0fa7e845b562c953c5ceec36c",ref:t=>this.validationEl=t,disabled:this.disabled,class:a(this.variant,{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},e("slot",{key:"ce63f7f1061ec9c3f10cbcfc67998ddbf3e04c3d"})))}static get delegatesFocus(){return!0}static get style(){return" @layer           lmvz-ds.reset,           lmvz-ds.theme,           lmvz-ds.components,           lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 {   margin: 0; }  } :host {         button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   background-color: var(--lmvz-button-background);   color: var(--lmvz-button-color);   cursor: pointer;   font: var(--lmvz-button-font);   text-align: center;   text-decoration: none;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  button.secondary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); }  button.secondary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    button.small {   --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); }  button.large {   --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router); }     display: contents; } ::slotted(*) {   --lmvz-component-color: var(--lmvz-button-color); } "}},[785,"lmvz-button",{ti:[2562,"tabindex"],scale:[513],variant:[513],disabled:[516],type:[1],form:[1]}]),v=c,u=function(){"undefined"!=typeof customElements&&["lmvz-button"].forEach((t=>{"lmvz-button"===t&&(customElements.get(n(t))||customElements.define(n(t),c))}))};export{v as LmvzButton,u as defineCustomElement}
+import{p as t,c as o,h as e,d as r,t as n}from"./p-BaPwpeMs.js";import{c as a}from"./p-BfTCfPZ1.js";import{R as l,a as m}from"./p-DR19QMDG.js";import{E as i}from"./p-CN0JX9-m.js";import{i as s,f as d}from"./p-B3JVFwO1.js";const c=t(class extends l{get el(){return this}validationEl;inheritedAttributes={};formEl=null;formButtonEl=null;lmvzActivation;get ti(){return 0}scale="default";variant="secondary";disabled=!1;type="button";form;constructor(t){super(!1),!1!==t&&this.__registerHost(),this.__attachShadow(),this.lmvzActivation=o(this,"lmvzActivation"),this.addController(new m(this)),this.addController(new i(this,{localHandler:this.handleClick.bind(this),keys:["Enter"]}))}connectedCallback(){this.inheritedAttributes=s(this.el),super.connectedCallback()}renderHiddenButton(){const t=this.formEl=d(this.form,this.el);if(!t)return;const{formButtonEl:o}=this;if(null!==o&&t.contains(o))return;const e=this.formButtonEl=document.createElement("button");e.type="submit",e.style.display="none",e.disabled=this.disabled,t.appendChild(e)}submitForm(t){this.formEl&&this.formButtonEl&&(t.preventDefault(),this.formButtonEl.click())}handleClick=t=>{"submit"===this.type&&this.submitForm(t)};render(){return this.renderHiddenButton(),e(r,{key:"3f3eda78349322ce5160d7aac1290a73f0adcd4a","aria-disabled":this.disabled?"true":null},e("button",{key:"b132404d8d5f5bf0fa7e845b562c953c5ceec36c",ref:t=>this.validationEl=t,disabled:this.disabled,class:a(this.variant,{[this.scale??""]:!!this.scale,disabled:this.disabled}),...this.inheritedAttributes},e("slot",{key:"ce63f7f1061ec9c3f10cbcfc67998ddbf3e04c3d"})))}static get delegatesFocus(){return!0}static get style(){return" @layer           lmvz-ds.reset,           lmvz-ds.theme,           lmvz-ds.components,           lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  } :host {         button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   background-color: var(--lmvz-button-background);   color: var(--lmvz-button-color);   cursor: pointer;   font: var(--lmvz-button-font);   text-align: center;   text-decoration: none;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  button.secondary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); }  button.secondary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    button.small {   --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); }  button.large {   --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router); }     display: contents; } ::slotted(*) {   --lmvz-component-color: var(--lmvz-button-color); } "}},[785,"lmvz-button",{ti:[2562,"tabindex"],scale:[513],variant:[513],disabled:[516],type:[1],form:[1]}]),v=c,u=function(){"undefined"!=typeof customElements&&["lmvz-button"].forEach((t=>{"lmvz-button"===t&&(customElements.get(n(t))||customElements.define(n(t),c))}))};export{v as LmvzButton,u as defineCustomElement}