@lmvz-ds/components 0.29.0 → 0.31.0

package/collection/components/lmvz-card/lmvz-card.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 {
   /** component dependencies */
@@ -62,16 +69,21 @@ h6 {
   /* stylelint-disable no-invalid-position-at-import-rule */
   button {
   /* secondary styling is default, primary is explicit */
-  --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000));
-  --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
-  --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
-  --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
-  --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));
-  --lmvz-button-font: var(--lmvz-typography-body-md-strong);
-  --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-secondary, #f0f0f0);
+  /* --lmvz-button-background, --lmvz-button-color, --lmvz-button-radius are declared on :host
+     so that outer ::slotted(lmvz-button) overrides are inherited correctly via shadow inheritance.
+     They are also declared here so that non-shadow consumers (e.g. @lmvz-ds/styles buttons.css
+     bundle and lmvz-card) have the default values in scope. */
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
+  --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));
+  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
+  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
+  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
+  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router));
+  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
 
   display: inline-flex;
   align-items: center;
@@ -102,8 +114,10 @@ button > * {
 }
 
 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));
+  position: relative;
+  z-index: 1;
 }
 
 button:is([disabled], .disabled) {
@@ -119,74 +133,76 @@ button:is([disabled], .disabled) {
 }
 
 button:not([disabled]):hover {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
 }
 
 button:not([disabled]):active {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
 }
 
 button.primary {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff);
-  --lmvz-button-border-width: 0;
-  --lmvz-button-border-color: transparent;
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
+  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
 }
 
 button.primary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e);
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
 }
 
 button.primary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454);
+  --lmvz-button-background: var(--lmvz-button-background-override, 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: 0;
-  --lmvz-button-border-color: transparent;
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
+  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
 }
 
 button.secondary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000);
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000));
 }
 
 button.secondary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000));
 }
 
 button.tertiary {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
 }
 
 button.tertiary:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
 }
 
 button.tertiary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
-  --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
 }
 
 button.small {
-  --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));
-  --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));
-  --lmvz-button-font: var(--lmvz-typography-body-sm-strong);
+  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
+  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
+  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
+  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
+    Router));
 }
 
 button.large {
-  --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
-  --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
-  --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
-  --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));
-  --lmvz-button-font: var(--lmvz-typography-body-lg-strong);
+  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
+  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
+  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
+  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+    Router));
 }
 
 
@@ -202,7 +218,8 @@ button.large {
 }
 * {
   color: var(--lmvz-semantic-color-on-surface-primary, #000000);
-  font: var(--lmvz-typography-body-md);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
 }
 .top {
   display: flex;
@@ -229,7 +246,8 @@ button.large {
 
   padding-bottom: var(--lmvz-global-s4, 4px);
   overflow-wrap: break-word;
-  font: var(--lmvz-typography-heading-2xl);
+  font: var(--lmvz-typography-heading-2xl, 500 clamp(2.25rem, 2.13rem + 0.52vw, 2.75rem) / 1.4
+    Router);
 }
 .description {
   display: flex;
@@ -238,7 +256,8 @@ button.large {
   align-items: flex-start;
   align-self: stretch;
   white-space: pre-line;
-  font: var(--lmvz-typography-body-md);
+  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
 }
 .image-wrapper {
   aspect-ratio: 4 / 3;

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { createAssetUrlSafely } from "../../utils/assets";
+import { createAssetUrlSafely } from "../../utils/stencil/assets";
 export class LmvzCard {
     cardTitle;
     imageUrl;
@@ -19,7 +19,7 @@ export class LmvzCard {
         const imgStyle = {
             backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
         };
-        return (h(Host, { key: '2d9ecdeed986f142fb7ff477b56dece59549bbc7', role: "article" }, h("div", { key: '34fc9c3a1338b31ce73424e8c07c79a291ead85c', class: "top" }, h("div", { key: '1756e6b26d7f42499753c36ed0fc13755fe32bfe', class: "image-wrapper", style: imgStyle }, h("div", { key: 'cd8be8acc9e949092b6363024316d12d445a9fbc', class: "chip-slot" }, h("slot", { key: '26389ab3b7031b948ff1701857e6028446662cf5', name: "chip" })))), h("div", { key: '2fa61cd7bef437f15929ae39be7fa294e8778321', class: "bottom" }, h("header", { key: 'b237ca025e42a29f528f827dc3c83b3b0f9267c0' }, h("h2", { key: 'ffd0a509ba97acb75d4c15d0fd01eef08689a2a7', class: "title" }, this.cardTitle)), h("p", { key: 'c40bd5d5f7e41a0cebc2f7f9e572ba98cc892cc1', class: "description" }, this.description), h("div", { key: '7663f93b41ef1e798b464bd6ad75ca8a53c0667b', class: "actions" }, h("button", { key: '3348e6700aa1571183558ab8fe4f73393c1cc943', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: 'd3a12cdabbdd68c3b04e06984db44abd3bbd22ea', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: '80e31e6b691e18d1b42a2b4831349c3abf8e02b0', class: "icon-placeholder" }, "..."))))));
+        return (h(Host, { key: '1dd819fd7c752af8d15001c08f7f60c6ea7278b9', role: "article" }, h("div", { key: 'e0cc822e627b6bbe665e4faa705cc46a09bac7c6', class: "top" }, h("div", { key: 'db79cb5a67ebdd6097f985e4b4bd27665b6329ef', class: "image-wrapper", style: imgStyle }, h("div", { key: '90facc8595ddbbf31e3768faa8254a82ab8d3e65', class: "chip-slot" }, h("slot", { key: 'cb2e6a1053aae2b2ca90c52c175e3c4174c89d23', name: "chip" })))), h("div", { key: 'cb11069a329385178677e92d08044e0fe8e5b982', class: "bottom" }, h("header", { key: '1e6076352124ca03de2fb13c17a565b4f492567e' }, h("h2", { key: '73f11099fb751bd4f967dbe49b79763b6a8268f3', class: "title" }, this.cardTitle)), h("p", { key: '36cf87b4c2004bff1e65feedd13e137d67115de3', class: "description" }, this.description), h("div", { key: '6c1d82f4968ce8252307858e6ad0681274f06397', class: "actions" }, h("button", { key: '0366e0caaf9235a3eaf7bfcab116e6a828fb248d', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '4f435e79d75a621d6fe065471a915b55308ad15d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: '7dec97e0b0ca58c40fc5308cc7863acafa8c5147', class: "icon-placeholder" }, "..."))))));
     }
     static get is() { return "lmvz-card"; }
     static get encapsulation() { return "scoped"; }

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

@@ -118,19 +118,22 @@ input {
   cursor: pointer;
 }
 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(--checkbox-label-color);
   transition: color var(--checkbox-duration) var(--checkbox-easing);
   cursor: pointer;
 }
 .helper-text {
-  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);
   /* font-weight: 400 per DS token standard (body-sm). Note: lmvz-input.css [role='status'] incorrectly uses font-weight: 500 — DS inconsistency, see lmvz-input.css line ~153 */
   color: var(--checkbox-helper-color);
   margin-block-start: 2px;
 }
 .error-text {
-  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(--checkbox-error-color);
   display: block;
   margin-block-start: 4px;
@@ -176,8 +179,8 @@ label {
   }
 }
 :host(:focus-within) .pill {
-  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 */
 @media (forced-colors: active) {

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

@@ -2,7 +2,7 @@ import checkmark from "@lmvz-ds/icons/assets/checkmark.svg";
 import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
 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";
 const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmark);
 let checkboxIdCounter = 0;
 export class LmvzCheckbox extends ReactiveControllerHost {
@@ -86,7 +86,7 @@ export class LmvzCheckbox extends ReactiveControllerHost {
         this.nativeInput?.click();
     }
     render() {
-        return (h(Host, { key: 'cea4a962a76cab10c27adc6742fe0686b2ce6dbe' }, h("div", { key: '1addfd795587de85ecbc632fbeb45026a4e46050', class: "pill" }, h("input", { key: '8957359d0cc3f2c315badee7e20fcc81e85e0f00', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: '400dbe9379ceb4aceeb431fe6060c82b41009cda', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '9612093e65346b419ec8e4469fea7f00fe4c3ff4', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: 'fd1136ea0726941bc400b8970f7cae4bb3b59363', class: "content" }, h("label", { key: 'a06deb2d4bc76efb884701a17e4a28420a99965c', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '2bd33f14062bedbb0609dff3ac7fbcee6fa16f21', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: 'ac4fcb6f0a2de16a17f0287e42b70b6339a50acc', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (h(Host, { key: 'b6b4153dbf80af15cb15799889ca23b621b4ef73' }, h("div", { key: 'f11d6baaa4b04ee74b201be8c4e125ccd5c366aa', class: "pill" }, h("input", { key: 'd61dccfa163ecf4fffa95a5d44be35adbb8ee8ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), h("span", { key: '87d62f1e0572e174e6d15f30ff59e37f6a5333cb', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '74d29a32599f6c1ee8bde0cb6f27e384de7fcc2d', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '544990c81b3f7f90b53902d580d2eb2197edfa8b', class: "content" }, h("label", { key: '1884744656a280f85bec91b27315d3a6b70e8238', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '6783ff413a884c78dbd52e07cc7b433f5a9dcf29', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '7c19fe406223a11e25df54cdfa304bc000eb421f', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get is() { return "lmvz-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,7 +7,8 @@
   padding-inline: var(--lmvz-dimension-8-10, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
   border: 1px solid var(--lmvz-chip-border-color);
   border-radius: var(--lmvz-semantic-border-radius-round, 999px);
-  font: var(--lmvz-typography-body-xs-strong);
+  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.5
+    Router);
   background-color: var(--lmvz-chip-background-color);
   color: var(--lmvz-chip-foreground-color);
 
@@ -33,7 +34,8 @@
 :host([size='small']) {
   padding-block: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
   padding-inline: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
-  font: var(--lmvz-typography-body-2xs-strong);
+  font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.5
+    Router);
   gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
 }
 

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

@@ -1,8 +1,8 @@
-import { debounce } from "@lmvz-ds/lib-ts/stream/debounce.js";
 import { Host, h } from "@stencil/core";
+import { debounce } from "@lmvz-ds/lib-ts/stream/debounce.js";
 import { chipSizes, chipTypes } from "../../api/ds.constants.js";
 import { AriaValidationController, isAriaValidationEnabled } from "../../utils/aria/aria-validation-controller";
-import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host.js";
 export class LmvzChip extends ReactiveControllerHost {
     ariaValidationController = new AriaValidationController(this);
     beforeSlot;
@@ -48,7 +48,7 @@ export class LmvzChip extends ReactiveControllerHost {
         }
     }, 500);
     render() {
-        return (h(Host, { key: '70654d69189e77f9356853a921366083b2c4b969', type: this.type, size: this.size }, h("slot", { key: 'c7e667b93166286fe68a812dd8eec82885e3fc5e', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: 'af38dd0429b42685a114e26175ce42d09f5fdcc1', class: "content-overflow-wrapper" }, h("slot", { key: '924158498d65b9ac7c912b6b1a479016176e0b78', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: '9ff0394dbfb2131fafe513d0f2d8ce26c7781f20', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
+        return (h(Host, { key: 'f326ca8e4dba40941db6b9a711ba46989c4cf1b3', type: this.type, size: this.size }, h("slot", { key: 'f9925e107c2e474ecbaca756451dc4249000b0db', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), h("span", { key: '0b6ea980e0b0500d2955a03088d08eb2ca67f64f', class: "content-overflow-wrapper" }, h("slot", { key: '2b7f5c02e9a09128e0a404c7fe35f6278ce1fa61', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), h("slot", { key: '929291cdaccf26d332823f9a100c6b6a84dc04f2', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -73,8 +73,8 @@ export class LmvzChip extends ReactiveControllerHost {
                     "references": {
                         "Chip": {
                             "location": "import",
-                            "path": "../../api/ds.constants.js",
-                            "id": "src/api/ds.constants.ts::Chip",
+                            "path": "../../api/ds.types.js",
+                            "id": "src/api/ds.types.d.ts::Chip",
                             "referenceLocation": "Chip"
                         }
                     }
@@ -103,8 +103,8 @@ export class LmvzChip extends ReactiveControllerHost {
                     "references": {
                         "Chip": {
                             "location": "import",
-                            "path": "../../api/ds.constants.js",
-                            "id": "src/api/ds.constants.ts::Chip",
+                            "path": "../../api/ds.types.js",
+                            "id": "src/api/ds.types.d.ts::Chip",
                             "referenceLocation": "Chip"
                         }
                     }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
-import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 import logo from "../../assets/icons/Logo.svg";
 export class LmvzHeader extends ReactiveControllerHost {
     el;
@@ -84,7 +84,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: '0152283363802ea854334e0349e145e7d6219e09', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'cdc1d52dbfb658f99bffa2df2353b6a1ad232f97', class: "brand" }, h("slot", { key: '25a039ea2224058f97f8ec1cb1aa310b388f2b2e', name: "brand" }, h("img", { key: '9ca6f39b6e41382a438b3afd36348ee17b36d346', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'a6b7c1e7baca1ef2075d38cfaf631a277d2bb7ac', "aria-label": "Hauptnavigation" }, h("div", { key: 'eb8c2db72d86cf3c4e2b0d94271bf73882c3bd96', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'b8a2b3c031158ce73ada65995b0d4e6e0e4eac72', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '87dabdc52e40163b35e8c7681d3e4aa3a17d6d82', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '6cb38c14357ef682f1c804ab77cd70514308b6d4', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '9e46e6e484556c5fbe0f2c573188e845fbca801b', class: "actions" }, h("slot", { key: '4c1ea348528ccc3722c2dbbe0795e9f61d67edee', name: "actions" }))));
+        return (h(Host, { key: '5730219e990fc0f131ffacc7c88e6a5311553399', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '7285f2dcac7d60c5d93328aa0e2fe8aa6b7b379c', class: "brand" }, h("slot", { key: 'd06d953ee82eab20da3f383c15032bcbe8803ff9', name: "brand" }, h("img", { key: 'd2441ce0efbf99c05f6344051703a96ffb376450', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '7f092938728af5cb6568383a6622df49f222dc93', "aria-label": "Hauptnavigation" }, h("div", { key: 'caa56893d6185aebb89661e62a555407675ccc2a', role: "menubar", class: "primary-menubar" }, h("slot", { key: '90684f49cd3d53e20a63d4ebc37ec24e630bc313', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'ead46c08c6833565a55cd7af27fbece4e4468a03', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '3f2ba617d9ed78abb9ab94b9515b02bb6836385a', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '6fc79122baa3fd95992cbf30a465c3b40438a18f', class: "actions" }, h("slot", { key: 'c427f5a3ad693169e267060b9076086fd0e37670', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { parseSvgString } from "@lmvz-ds/lib-ts/validation/svg.js";
 import { Build, h, Host } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { resolveIconSvg } from "../../utils/icons/icons";
-import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
+import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 export class LmvzIcon extends ReactiveControllerHost {
     intersectionObserver;
     ariaValidationController = new AriaValidationController(this);
@@ -57,7 +57,7 @@ export class LmvzIcon extends ReactiveControllerHost {
         super.componentDidRender();
     }
     render() {
-        return h(Host, { key: '03b4391d02a77409257bcda51c2b65ad9a9e0a0c', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+        return h(Host, { key: '4fba217d573d968951819f12af24d775c8ac62dc', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
     }
     waitUntilVisible(callback, rootMargin = 50) {
         if (!Build.isBrowser || typeof window === 'undefined' || !window.IntersectionObserver) {

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

@@ -109,8 +109,8 @@
 }
 .input-container:focus-within .input-wrapper {
   border-color: var(--input-border-color-focus);
-  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));
 }
 /* Error State */
 :host([error]) .input-wrapper {

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

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import classNames from "classnames";
 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 inputIdCounter = 0;
 export class LmvzInput extends ReactiveControllerHost {
     el;
@@ -140,7 +140,7 @@ export class LmvzInput extends ReactiveControllerHost {
     handleFocus = () => { };
     handleBlur = (event) => {
         const input = event.target;
-        input.reportValidity?.();
+        input.checkValidity?.();
     };
     updateNativeError(fromEvent) {
         const input = fromEvent ?? this.nativeInputElement;
@@ -151,9 +151,9 @@ export class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (h("div", { key: '4be6846147fec950acad0c0cb8643bfa69233935', class: classNames('input-container', {
+        return (h("div", { key: '693614c334a94373dcef56b461455bf872249a69', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, h("div", { key: 'ae9bf8ffd91b73a86c2ebd21af051efe26a1d5fd', class: "input-wrapper" }, h("slot", { key: '36b3f7d97a11296aeead44c4d8ab4f0f8edf62d1', name: "before-input" }), h("div", { key: '4320f461ffa908730cd898863f43644aa3677081', class: "label-input-group" }, h("label", { key: '1dd51cf16f064303fd9c5249cbe3a357c7515ddc', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: '74bb8124b1126501201eb7c3361c6cf7f17dda5c', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '9cff77bea65c50331a6804d7039672bbe01e710c', 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: '689a3aa53e22f89173893adbc72eaf4953a2c7f6', name: "after-input" })), h("div", { key: 'd29b9ea209c138d0de09f71042f539a56ed4f9fa', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '8be227367abadb0e001d9475f0793aed31dbb64a', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, h("div", { key: '0eb36d76661d70bea71027ca7b30763d89bd6cb6', class: "input-wrapper" }, h("slot", { key: '03adf18ebe01fe70dc821dcea2bb2963df40f8b4', name: "before-input" }), h("div", { key: 'f1254561b53e321d0f2e4cf4ac93936119083f3f', class: "label-input-group" }, h("label", { key: 'e17cdec368fd36a041d9d8853f4a82249f1b5d8c', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (h("span", { key: 'b3e003bf972c3ad5b6c5b25f8ee509bd5d8df758', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), h("input", { key: '75f192118b7a4c3e507172e13d0ae7e32118aad3', 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: '58a9701259ca92fd7441c1480de741d92bc47bc9', name: "after-input" })), h("div", { key: '396b719d080c781f38d736e28e9c048f629d6ffe', id: this.helperId, role: "status" }, this.helperText || null), h("div", { key: '9e5c86e6098f58d95c0984348d3da07b9e34e1fb', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get is() { return "lmvz-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,44 @@
+:host {
+  display: inline;
+}
+
+a {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));
+  padding-inline: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)) var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+  padding-block: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
+  color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+  text-decoration: underline;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+a:hover {
+  background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+  color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
+}
+
+a:active {
+  background-color: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
+  color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
+}
+
+a:focus-visible {
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}