@lmvz-ds/components 0.29.0 → 0.31.0

package/collection/components/lmvz-link/lmvz-link.js

@@ -0,0 +1,183 @@
+import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
+import { Host, h } from "@stencil/core";
+import { linkTypes } from "../../api/ds.constants.js";
+import arrowRightSvg from "@lmvz-ds/icons/assets/arrow-right.svg";
+import externalSvg from "@lmvz-ds/icons/assets/external.svg";
+const ARROW_RIGHT_SVG = toValidSvgStringWithFallback(arrowRightSvg);
+const EXTERNAL_SVG = toValidSvgStringWithFallback(externalSvg);
+export class LmvzLink {
+    href = '';
+    target;
+    rel;
+    type = 'internal';
+    externalLabel = '(öffnet in neuem Tab)';
+    normalizeType(value) {
+        const normalized = linkTypes.includes(value) ? value : 'internal';
+        if (normalized !== this.type) {
+            this.type = normalized;
+        }
+    }
+    componentWillLoad() {
+        this.normalizeType(this.type);
+    }
+    computeHref() {
+        if (!this.href)
+            return undefined;
+        const trimmed = this.href.trim();
+        if (/^javascript:/i.test(trimmed) || /^data:/i.test(trimmed))
+            return undefined;
+        return this.href;
+    }
+    computeRel() {
+        if (this.target !== '_blank') {
+            return this.rel || undefined;
+        }
+        const tokens = new Set((this.rel ?? '')
+            .split(/\s+/)
+            .map((t) => t.trim())
+            .filter(Boolean));
+        tokens.add('noopener');
+        tokens.add('noreferrer');
+        return [...tokens].join(' ');
+    }
+    render() {
+        const rel = this.computeRel();
+        const iconSvg = this.type === 'external' ? EXTERNAL_SVG : ARROW_RIGHT_SVG;
+        const isBlank = this.target === '_blank';
+        return (h(Host, { key: '338116d5af3112ec2a4a09b652048b733565a7d4' }, h("a", { key: 'ae70aa2320ea2eeca56a14714de4dcfb06b8c94c', href: this.computeHref(), target: this.target, rel: rel }, h("slot", { key: '4852b3336a94a46f363a83fb2c4f6d267f680d3d' }), h("lmvz-icon", { key: 'e7f72016611a7d741eef7c81a047e026c699bdef', "aria-hidden": "true", icon: iconSvg }), isBlank && h("span", { key: 'b4138b479b7c36c3b16c8e96fc6e39736222b26f', class: "sr-only" }, this.externalLabel))));
+    }
+    static get is() { return "lmvz-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lmvz-link.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lmvz-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL the link points to. Mirrors the native anchor `href` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "href",
+                "defaultValue": "''"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_self' | '_blank' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Where to open the linked document."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Relationship of the linked URL. When `target=\"_blank\"`, `noopener` and\n`noreferrer` are automatically added if not already present."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Link.Type",
+                    "resolved": "\"external\" | \"internal\"",
+                    "references": {
+                        "Link": {
+                            "location": "import",
+                            "path": "../../api/ds.types.js",
+                            "id": "src/api/ds.types.d.ts::Link",
+                            "referenceLocation": "Link"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'internal'"
+                        }],
+                    "text": "Navigation type. Drives the icon shown after the label text.\n- `internal` \u2192 arrow-right icon\n- `external` \u2192 external icon\nInvalid values are normalized to `internal`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'internal'"
+            },
+            "externalLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'(\u00F6ffnet in neuem Tab)'"
+                        }],
+                    "text": "Visually-hidden text appended inside the anchor when `target=\"_blank\"`.\nProvides an accessible cue for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "external-label",
+                "defaultValue": "'(\u00F6ffnet in neuem Tab)'"
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "normalizeType"
+            }];
+    }
+}

package/collection/components/lmvz-menuitem/lmvz-menuitem.css

@@ -44,7 +44,8 @@
   justify-content: center;
   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);
-  font: var(--lmvz-typography-body-md);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
   padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
   cursor: pointer;
 

package/collection/components/lmvz-menuitem/lmvz-menuitem.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { ElementActivationController } from "../../utils/aria/element-activation-controller";
-import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 export class LmvzMenuItem extends ReactiveControllerHost {
     el;
     get validationEl() {
@@ -21,7 +21,7 @@ export class LmvzMenuItem extends ReactiveControllerHost {
         this.addController(new ElementActivationController(this));
     }
     render() {
-        return (h(Host, { key: '3a722fe1fbacabd99ac5a5bd23537a1ff383fb95' }, h("slot", { key: 'e475dd50bbd2f9f349edb61766a0b21c1fb1ae16', ref: (e) => (this.validationSlot = e) })));
+        return (h(Host, { key: '9c86e99a0427a5d11925a30bcdb9f88124006413' }, h("slot", { key: '9a578cdf49bd1edd981d68d7b28c39b784980345', ref: (e) => (this.validationSlot = e) })));
     }
     static get is() { return "lmvz-menuitem"; }
     static get encapsulation() { return "scoped"; }

package/collection/components/lmvz-message/lmvz-message.css

@@ -10,7 +10,8 @@
   border: var(--lmvz-semantic-border-width-default, 1px) solid;
   border-radius: var(--lmvz-semantic-border-radius-md, 6px);
 
-  font: var(--lmvz-typography-body-md-strong);
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
 }
 
 /* neutral maps to status-active tokens to preserve Figma's "neutral" naming convention;

package/collection/components/lmvz-message/lmvz-message.js

@@ -60,7 +60,7 @@ export class LmvzMessage {
     }
     render() {
         const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
-        return (h(Host, { key: '447fd8ce5b2c9cd176eb4408e9e29773364bfcef', role: role }, this.leadingIcon && h("span", { key: '63414bc912e2feda3a553ead42c660953e25d4c4', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), h("span", { key: '4cbdeffedcb8e8c3b7a267b25d2ab2eef6ad26bb', class: "message" }, h("slot", { key: 'b7b6a462f9ae5571114c8b8876387ee9f97c9903', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (h("lmvz-button", { key: '7b4362ef6d69e27cc614b2445daf5f217e8f21ea', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (h("lmvz-button", { key: 'dae3ff6f9f8606811722c08b6465145b542149a1', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, h("lmvz-icon", { key: '0e5e7e1deef5027e218271c79d04b43f3a3109e1', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
+        return (h(Host, { key: 'f422e8ee4bb4466757c081bc6b33761db15cb02d', role: role }, this.leadingIcon && h("span", { key: 'c4077083db459a65cacce2cbb8e8dbb477572d95', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), h("span", { key: '77c3af94194adc2b663c6d6626951e5789e17686', class: "message" }, h("slot", { key: '8db714f6bd0ac80a3c77a2768431baa37a63b3d1', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (h("lmvz-button", { key: 'f75e835f39e97ea217727b55dc842ceda004834b', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (h("lmvz-button", { key: '51b04ad48a68e0843445104e303eae5bb4cdd351', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, h("lmvz-icon", { key: '5949210f479a6a19f1c4bb9d3c91a77a1c0ad8a6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
     }
     static get is() { return "lmvz-message"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-modal/lmvz-modal.css

@@ -55,6 +55,13 @@ h6 {
   display: none !important;
 }
 
+hr {
+  height: 0;
+  border: none;
+  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
+}
+
 }
 :host {
   display: contents;
@@ -109,13 +116,15 @@ dialog::backdrop {
 }
 .title {
   min-inline-size: 0;
-  font: var(--lmvz-typography-heading-lg);
+  font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5
+    Router);
 }
 .has-title .title {
   flex: 1 1 auto;
 }
 .body {
-  font: var(--lmvz-typography-body-md);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
   flex: 1;
   overflow: scroll;
   /* min-block-size: clamp(8rem, 40vw, 60vh); */

package/collection/components/lmvz-modal/lmvz-modal.js

@@ -2,8 +2,8 @@ import closeIcon from "@lmvz-ds/icons/assets/close-sm.svg";
 import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
 import { Host, h } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
-import { getDeepActiveElement, inheritAriaAttributes } from "../../utils/component";
-import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { getDeepActiveElement, inheritAriaAttributes } from "../../utils/element/element.util";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 const closeIconSvg = toValidSvgStringWithFallback(closeIcon);
 let modalIdCounter = 0;
 export class LmvzModal extends ReactiveControllerHost {
@@ -223,7 +223,7 @@ export class LmvzModal extends ReactiveControllerHost {
         this.hasHeader = this.hasAssignedContent(this.headerSlot);
     };
     render() {
-        return (h(Host, { key: '5fbfbed1ae590e58f32ba47a8c3e1a321d59ba6b' }, h("dialog", { key: '90f0393450eaf0681b54cbb95f79379d951d652a', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: 'f07319e7cdf70f8d35b9aaabb83d7c284fec2c0f', class: "modal-shell" }, h("header", { key: 'a17ee4e506cef206357d07db1689dd46cf6cab05', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '3695c1c15530a330493fb1d8e990b59ddb246375', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'a2113f68da9c8ad2b697d5b76644533b9b59c664', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: '33c6c3339144a0a69d869857b18b950726281d9e', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: 'e680344beebd5ae4a7a24496f5f8113fd6d98187', icon: closeIconSvg }))), h("div", { key: '1798cdc2f930ae04959c8c0630347fb6f9825693', class: "body" }, h("slot", { key: 'eb77bb57b51a5efe18a765a45d4157613f50bbd4' })), h("footer", { key: '4c8c1f12919822af2471c60f78443b539f7a20e8', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: '0a26fc145d70d7d95adbd8f3e4c29edabfc12422', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: '8d05a256d8b8c28f20f51ea03358522768a15913', name: "actions" })))))));
+        return (h(Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, h("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, h("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, h("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, h("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, h("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), h("lmvz-button", { key: 'dcebb06482cdef7423c6b62ef877ca9aaabf55a4', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, h("lmvz-icon", { key: '0db22c68fe164ed2a33bfaeacf9eac619424f464', icon: closeIconSvg }))), h("div", { key: 'ef402c343f2c68210351f7556eec08f2e9be851b', class: "body" }, h("slot", { key: '3fe86dc88c88c2cf7bfe3429c62cb2047b64611a' })), h("footer", { key: '92b7bdab1ffe700749fc029723f70913f436397d', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, h("lmvz-button-group", { key: '7e1b310fb1b20449ead14d0702af4977c74198dd', ref: (element) => (this.buttonGroupEl = element) }, h("slot", { key: 'cb2187ab2758c61e80b65f9fc55c6be5f9fd0458', name: "actions" })))))));
     }
     static get is() { return "lmvz-modal"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-radio/lmvz-radio.css

@@ -110,14 +110,16 @@ input {
   min-width: 0;
 }
 label {
-  font: var(--lmvz-typography-body-md);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
   color: var(--radio-label-color);
   cursor: pointer;
   transition: color var(--radio-duration) var(--radio-easing);
 }
 .helper-text {
   display: block;
-  font: var(--lmvz-typography-body-sm);
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
+    Router);
   color: var(--radio-helper-color);
   margin-block-start: 2px;
 }

package/collection/components/lmvz-radio/lmvz-radio.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { RadioGroupController } from "../../utils/radio/radio-group-controller";
-import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 let radioIdCounter = 0;
 export class LmvzRadio extends ReactiveControllerHost {
     el;
@@ -137,7 +137,7 @@ export class LmvzRadio extends ReactiveControllerHost {
         this.radioGroupController.setFocused(target);
     }
     render() {
-        return (h(Host, { key: 'c07af5c7d75b0f0d2c20b3af9ea763bd28e027b5' }, h("input", { key: '2e7fddb7aa5df3f8bc0f1efbd110158680ec45d7', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'a2afc55b85527674e5a18bfc28e194ecc034053a', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: 'd135da1d567743ea98ec5860feda3e6e8013bdb6', class: "dot" })), h("span", { key: '38c83e877135b221260bacdefca3cdb5446a4453', class: "content" }, h("label", { key: '781d9d5544c0cb9d061875ef3674f3c3156f0675', htmlFor: this.radioId }, this.label), h("span", { key: '1ed064b27dea65cbfb1b1bd38a9cb1b7a07de37e', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+        return (h(Host, { key: '9b8fbfe18376f9411f792630065dfd219f9ddb32' }, h("input", { key: '24a0675eff854bbd751c07905db4be11e5353d11', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'f888c1f76f6f929609584d378dbe0974fd980f68', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '57fbb1e7abdca10861cf8709d4300459e1f62e5c', class: "dot" })), h("span", { key: '1c845611162be86500e8475ac37412e2d3f2fd99', class: "content" }, h("label", { key: '1399f4d34ff0e6d369cefc9f5d08208a4dee593f', htmlFor: this.radioId }, this.label), h("span", { key: '1345435ff2f4773260ea3f73e943f043c2b88bdb', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
     }
     static get is() { return "lmvz-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -140,12 +140,13 @@ div[aria-hidden] {
   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
 }
 .select-wrapper:focus-within div[aria-hidden] {
-  outline: var(--lmvz-ds-outline);
-  outline-offset: var(--lmvz-ds-outline-offset);
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
 div[aria-hidden] > span:first-child {
   flex: 1 0 0;
-  font: var(--lmvz-typography-body-md-strong);
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
   color: var(--lmvz-select-text-color);
   overflow: hidden;
   text-overflow: ellipsis;

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
-import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 let selectIdCounter = 0;
 export class LmvzSelect extends ReactiveControllerHost {
     el;
@@ -51,7 +51,7 @@ export class LmvzSelect extends ReactiveControllerHost {
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (h(Host, { key: 'ce6cbd48640762e2d2c41f939c2bd0d400ada7a6', "data-highlighted": String(this.highlighted) }, h("div", { key: 'b89edad5195bfe39e1a236e67cd03ea61d20556e', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '29b4b78a8dd6e67107c6ae3bcfbf105f5f70de32', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '0a6f4af49a0e842470b6babace9201a995dc625d', "aria-hidden": "true" }, " *")), h("div", { key: '277e73e2cc7aca046c66c6516e48cbcdec86b544', "aria-hidden": "true" }, h("span", { key: '763dbccfb4624f4996fb7f412e8792a1cc006f34' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '1881c6bdbb577aed043fb19069398ca096c4cbc9', "aria-hidden": "true" }, " *")), h("span", { key: 'bcb3202de388bccb82882af748c7275327bb615b' }, h("svg", { key: '6a06e9eacb4c1e726b06b26243541c99f8b4ca1f', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { key: '4984bd9b193183b03ab4858b4e8bea1ec3d2f471', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("select", { key: '24b57f7ad6a3f2c010485ecd0e7aa4749d204320', 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: '8fc22471bb91bb1ec62bc49ec2c07bf3abb39b5c', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '5273b6fae866178fa7c334c7d12d228634f65279' }))), this.helperText && h("div", { key: 'd3b93cac08ca5e74f335d6d867ac587036810482', role: "status" }, this.helperText)));
+        return (h(Host, { key: 'c753006bdabf1723fa9ff61eb35f58d5bef3157b', "data-highlighted": String(this.highlighted) }, h("div", { key: '6b06056fd48ef4f837cbe17383756e3726c68f90', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '819901582fc449566a112cd4544fa0af903a7011', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: '14ad70c1cf1a96c7398698fa86baeadd5fe4257b', "aria-hidden": "true" }, " *")), h("div", { key: '589c6946bee6e320a36dfa0ed765ff9e02af4c2f', "aria-hidden": "true" }, h("span", { key: '04444223ed66a5ddff3eb7bd581cf5a7e615cf6b' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '9631d4a655514957a4564be939d8bd16c3a036f0', "aria-hidden": "true" }, " *")), h("span", { key: '3950abf6ee9528adb5895fe6bc88be67b39d458e' }, h("svg", { key: '98a0a380e9ca5044ca1fefb03b74bfc178974a60', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { key: '19fe8b40e315fabee982ba37fe2d397493429519', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("select", { key: '7480ff36ef3acfe10fb0122bfdf7feb5af406c67', 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: '5d00f696c2c4d7c35c180018a4c487cbb0229d37', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: '218fe11d224d7ca72c8555301d41d8878b6b34b4' }))), this.helperText && h("div", { key: 'edbb738590305f6724a590a3532fd9284a187866', role: "status" }, this.helperText)));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }

package/collection/components/lmvz-snackbar/lmvz-snackbar.css

@@ -17,7 +17,8 @@
   gap: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
 
   pointer-events: auto;
-  font: var(--lmvz-typography-body-md-strong);
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
 
   /* this will be picked up by lmvz-icon as well */
   --lmvz-component-color: var(--lmvz-semantic-color-status-on-success, #37867c);

package/collection/components/lmvz-snackbar/lmvz-snackbar.js

@@ -58,7 +58,7 @@ export class LmvzSnackbar {
         this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
     };
     render() {
-        return (h(Host, { key: '4018b33b7d4263c1e138217d5181231e3562a2ad', class: this.animationClass }, h("lmvz-icon", { key: '351f90e1fd9eb7b4f5e864bccd46a643cd158bf1', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: 'fea43a01e328c7922d563e73256d7c3012b49fd9', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: '5ef8589a379ccbcfaf42197227dc95ba51c225fe', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
+        return (h(Host, { key: 'f207854371f8423ff8dc9b732d1dabe1ab06e0b1', class: this.animationClass }, h("lmvz-icon", { key: 'e0ffdd4c51d11f94aa33c5a9678a15e4162d4bdd', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), h("span", { key: 'fcce1cbef0597af7e86de7b33a4f8a40c09f0cc8', class: "message" }, this.message), this.actionLabel && (h("lmvz-button", { key: '3cdbd81ba0c9102d0539c913f530e2abfbed0fb6', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
     }
     static get is() { return "lmvz-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-spinner/lmvz-spinner.js

@@ -4,7 +4,7 @@ export class LmvzSpinner {
     ariaLabel;
     render() {
         const hasLabel = !!this.ariaLabel?.trim();
-        return (h(Host, { key: 'c788616cdce6548fe228671cb78dfcd98740c42b', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '01d2fd9a20454ae051f63fc3403e4b1679db2697', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { key: '1bc55615f8fc46b26031d4dc24a24b6e79ca8b98', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
+        return (h(Host, { key: '1953e9328170f6203b0936fd051fcaae44cba1d6', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, h("svg", { key: '4393e17fe0b2e899cdd84f0bfba2047d3a08bac1', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { key: 'a321ad329e7a94680b37f2e11bb0ab3ef6344708', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
     }
     static get is() { return "lmvz-spinner"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-tab/lmvz-tab.css

@@ -22,6 +22,13 @@ h6 {
   display: none !important;
 }
 
+hr {
+  height: 0;
+  border: none;
+  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
+}
+
 }
 :host {
   display: inline-block;
@@ -51,7 +58,8 @@ button {
   background: var(--lmvz-tab-background);
   color: var(--lmvz-tab-color);
 
-  font: var(--lmvz-typography-body-md-strong);
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
   cursor: pointer;
   white-space: nowrap;
   transition:
@@ -59,8 +67,8 @@ button {
     color 0.15s ease;
 }
 button:focus-visible {
-  outline: var(--lmvz-ds-outline);
-  outline-offset: var(--lmvz-ds-outline-offset);
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
   z-index: 1;
 }
 button:disabled {

package/collection/components/lmvz-tab/lmvz-tab.js

@@ -14,7 +14,7 @@ export class LmvzTab {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (h(Host, { key: '1232c42d1e4b0a22710076dcd021e910e9b71c3c' }, h("button", { key: 'a5d85b761836038a93b102052ff9b09cab04bd7f', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: 'ce429f5e6d05ed4ef506276231aa0a54cd9f050f', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: '637e0da61c21950b0b1c8d5622315c8921007fdb', class: "label" }, h("slot", { key: '1c035b6763d0fa894d9dadb1407b87ca3e2f0da5' })), h("span", { key: '88c6e4d8fe990e6b722664641d23310748afd7c0', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (h(Host, { key: '642a74020dfe8e3f96ebbdf8067b1eba5c07bd15' }, h("button", { key: 'b786b259aed2f2e1f61f3ef14959f564841b3761', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: 'e29265a24673c39397266ef21419cebdf9a05a2c', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: 'c74ae843e36f85291e404955056ba1f34d0393e7', class: "label" }, h("slot", { key: '0f13548f3ec10a126016bfc92aa93a4c21b86e0f' })), h("span", { key: '2f969a70550975bffd1884a55b12fec733331b01', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get is() { return "lmvz-tab"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-tabs/lmvz-tabs.css

@@ -22,6 +22,13 @@ h6 {
   display: none !important;
 }
 
+hr {
+  height: 0;
+  border: none;
+  margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;
+  border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);
+}
+
 }
 :host {
   display: inline-block;

package/collection/components/lmvz-tabs/lmvz-tabs.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
-import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 let tabsIdCounter = 0;
 export class LmvzTabs extends ReactiveControllerHost {
     el;
@@ -232,7 +232,7 @@ export class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (h(Host, { key: '5f15ece5a15ef010e84c169171acc3647386ac76', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: '38fca070606c4e15fe3218d818c9c271619088c6', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: 'a18f16a5fbcd5bdd7694abfd362cd601e852b546', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '2d84a819e13e658a677835e629e057f7a19556a0', part: "panels-container", class: "panels-container" }, h("slot", { key: 'e66d34d3f861b23700ad5a29076744fa1f93a5f2', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (h(Host, { key: '0247aeab4ec148274ab25c78a5444d14c1b70d89', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: 'aa8baa8e55f84ee0fa75ce02a172adebfe4fefcd', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: 'b626f8dc73503c5013fa2e0a7623752eeb6f733f', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '230e7cc4686d643e8562aa93db6b2a3e94fccb5f', part: "panels-container", class: "panels-container" }, h("slot", { key: '713f88911b7cb14d3487d0945aac818b6727dee7', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get is() { return "lmvz-tabs"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-toggle/lmvz-toggle.css

@@ -110,7 +110,8 @@ input {
   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }
 label {
-  font: var(--lmvz-typography-body-md);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
   color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   cursor: pointer;
 }

package/collection/components/lmvz-toggle/lmvz-toggle.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
-import { componentOnReady } from "../../utils/component";
-import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
+import { componentOnReady } from "../../utils/stencil/stencil.util";
 let toggleIdCounter = 0;
 export class LmvzToggle extends ReactiveControllerHost {
     el;
@@ -65,7 +65,7 @@ export class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (h(Host, { key: '0b0266a50b2307a13c635ee1a2c1b7e44cacccb4' }, h("span", { key: 'e8cf4c4e35e013627bb6eeb4b7bae46060c3a846', class: "track" }, h("input", { key: '6dc43e819aa89c5b6394c3d2eed0e8852213766a', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: '7e57a501ebcb9f560d0a03c35dbaa7744933246b', class: "thumb", "aria-hidden": "true" })), h("label", { key: '0e8d733132e72593048ce3eb1f8c2049f3420b2a', htmlFor: this.toggleId }, this.label)));
+        return (h(Host, { key: '56c73859d7eeb40842744a29392598678268d7e8' }, h("span", { key: '145915fb9d77976328c39c00e7ef73426220b3ca', class: "track" }, h("input", { key: '4363e8e3a614ce18da19abc70257b82363b291da', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), h("span", { key: '794ef6a50e8442dd1c460df7c42ffcf3009aab15', class: "thumb", "aria-hidden": "true" })), h("label", { key: '9432dc73d637ea8dbeb5c3b3ff8d0941c662f707', htmlFor: this.toggleId }, this.label)));
     }
     static get is() { return "lmvz-toggle"; }
     static get encapsulation() { return "scoped"; }

package/collection/index.js

@@ -1,5 +1,5 @@
 export * from '@lmvz-ds/aria-validation';
-export { chipSizes, chipTypes, iconSizes, iconWeights, inputSizes, inputTypes, messageTypes, selectSizes, textSizes } from './api/ds.constants';
+export * from './api/ds.constants';
 export * from './components/lmvz-message/public';
 export * from './components/lmvz-snackbar/public';
 export * from './utils/public';

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

@@ -20,7 +20,7 @@ export class HeaderIntegration {
         this.activeNav = navId;
     }
     render() {
-        return (h(Host, { key: '486f50ef3557f03de1dc65bf15dd57dfd2c87320' }, h("lmvz-header", { key: 'b211695fa242ab94fdce20ac81124947863a7b4b', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: 'e115102451abce94e6379dc2b6720f9c9bafaf8c', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: 'cb6a95e74dd1c5b8573a39c065c6db15c5d61202', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '97aa26d9baf88298471bc71b990deae3b60e7676', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: 'f3bf5d14a42d34ad6db9002eb7d6c08f9494a582', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '701662627e73569de837fb5fbaed29d5876f32b5', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '7bdb0638da817f9dbabe485d63e6cf1fc2855648', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '75c6ee450059c8222e47ffc011b29450bb7cdb31', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '8b2a7a3025841a898b1143f3fc96a1cf42660e8e', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '473f408b189415cbffbde216a2c3e73500a3b133', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '103c8189dc41562c45ac980725001f282b7b1992', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: '1a142f62810aa0fb3da4c1b4a41189f058bc845b', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '424be6810c1333c4b048fdf002d7957c2c66aca2', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: 'cd47ed633202cb0da71fc5d1607509c246816436', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '95ed21547f113346bf50b3d5d5617b2c4b8e1794', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
+        return (h(Host, { key: 'ebc2b4339568b47368f941f4b4771ccbaa6a4eeb' }, h("lmvz-header", { key: '85a1799f16e513db71e0475dd8d85d2fb880c002', lmvzActiveNav: this.activeNav }, h("lmvz-menuitem", { key: '6c50b1a6308c20e93ff93fe9a33ebee413b265c2', slot: "nav-primary", id: "lehrmittel", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '665c24100d40b0285bf0c6387e3d59bc2842ff51', href: "#" }, "Lehrmittel")), h("lmvz-menuitem", { key: '15655bcb6e443837df2427d930b980fdb198a038', slot: "nav-primary", id: "verwaltung", onLmvzActivation: this.activate.bind(this) }, h("a", { key: '90f0fddc72671b948dc7fcedd2e1592aeeb97c1d', href: "#" }, "Verwaltung")), h("lmvz-menuitem", { key: '6997f5e88ae16639c72d3c65c5d37a690a4d8c22', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: '8aefbaac518eb8ace38945cbaa892d4532e60f78', ...typedIconFromSet('lmvz', 'edit') }), "Deutsch 7"), h("lmvz-menuitem", { key: '1ee162b6adeb0151815122edb35c245d77635697', slot: "connect-nav-lehrmittel" }, h("lmvz-icon", { key: 'bc40228254458c8ad5099d227e81f02e3cf760dd', ...typedIconFromSet('lmvz', 'edit') }), "Mathe 2"), h("lmvz-menuitem", { key: '57ead3b0ef5c3db1a1910827e3161e6030df9064', slot: "connect-nav-verwaltung" }, h("lmvz-icon", { key: '56b8c01e30764a6cc6687589034f580f359d4856', ...typedIconFromSet('lmvz', 'settings') }), "iwas mit Verwaltung"), h("lmvz-menuitem", { key: 'd0f3058017c06d7cf0a2301d6aec0a9fdb410685', slot: "connect-nav-verwaltung", "aria-label": "Einstellungen" }, h("lmvz-icon", { key: '39fe3ec2d11cc716ec385a7cd4ca9e1ef8fa05df', ...typedIconFromSet('lmvz', 'settings') })), h("lmvz-button", { key: '175bc0c4f5593b2a9f3985f5a487eeadf5e2e1fe', slot: "actions", "aria-label": "Benutzerkonto" }, h("lmvz-icon", { key: '4873746ad3d8e2ee424c69074ec52e71844f7f2d', ...typedIconFromSet('lmvz', 'user'), size: "lg" })))));
     }
     static get is() { return "header-integration"; }
     static get encapsulation() { return "shadow"; }

package/collection/styles/fragments/_focus-within.css

@@ -1,6 +1,6 @@
 :host(:focus-within) {
-  outline: var(--lmvz-ds-outline);
-  outline-offset: var(--lmvz-ds-outline-offset);
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
 
 /* Forced Colors / Windows High Contrast */

package/collection/utils/aria/aria.constants.js

@@ -0,0 +1,53 @@
+export const ariaAttributes = [
+    'role',
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
+];