@lmvz-ds/components 0.23.0 → 0.25.0

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

@@ -5,31 +5,35 @@
  * Important: Always import this file _before_ layering your own styles!
  */
 @layer lmvz-ds.theme {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
 @font-face {
   font-family: Router;
   src:
+    local('RouterBook-Regular'),
     local('Router-Book'),
-    url('/assets/fonts/Router-Book.woff') format('woff'),
-    local('Router');
-  font-weight: 400 normal;
+    url('/assets/fonts/Router-Book.woff') format('woff');
+  font-weight: 400;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterMedium-Regular'),
     local('Router-Medium'),
-    url('/assets/fonts/Router-Medium.woff') format('woff'),
-    local('Router');
+    url('/assets/fonts/Router-Medium.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterBold-Regular'),
     local('Router-Bold'),
-    url('/assets/fonts/Router-Bold.woff') format('woff'),
-    local('Router');
-  font-weight: 700 bold;
+    url('/assets/fonts/Router-Bold.woff') format('woff');
+  font-weight: 700;
 }
 
 }
@@ -58,10 +62,11 @@ h6 {
   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-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
+  --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.75rem, 0.69rem + 0.26vw, 1rem));
+  --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, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
     Router);
   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);
   --lmvz-button-border-width: 0;
@@ -74,6 +79,7 @@ h6 {
   gap: var(--lmvz-button-gap);
   padding-block: var(--lmvz-button-padding-block);
   padding-inline: var(--lmvz-button-padding-inline);
+  min-height: var(--lmvz-button-min-height);
   border-radius: var(--lmvz-button-radius);
   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
   background-color: var(--lmvz-button-background);
@@ -96,8 +102,8 @@ button > * {
 }
 
 button:focus-visible {
-  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
 
 button:is([disabled], .disabled) {
@@ -129,12 +135,10 @@ button.primary {
 
 button.primary:not([disabled], .disabled):hover {
   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e);
-  --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7);
 }
 
 button.primary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454);
-  --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
 }
 
 button.secondary {
@@ -146,40 +150,44 @@ button.secondary {
 
 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);
+  --lmvz-button-color: 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-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
+  --lmvz-button-color: 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, #545454);
+  --lmvz-button-color: 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);
 }
 
 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);
 }
 
 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
+  --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.5rem, 0.44rem + 0.26vw, 0.75rem));
+  --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, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 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
+  --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(1rem, 0.94rem + 0.26vw, 1.25rem));
+  --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, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4
     Router);
 }
 

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

@@ -88,7 +88,7 @@ export class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (h(Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '226f2f4ddbf861a8aed66d72c1980aa713e667f3', ref: (e) => (this.validationEl = e), disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '436ecc98fc7d7350c67d01d13e5fd4566a238b03' }))));
+        return (h(Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '8d73f979fa227de22a03403a2a3938684911060a', ref: (e) => (this.validationEl = e), part: "button", disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '18e91a2f94ba0d7e5cf13150191003e2f0b2a03a' }))));
     }
     static get is() { return "lmvz-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 :host {
   display: flex;
   justify-content: flex-end;
-  gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  gap: var(--lmvz-component-input-gap-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
     Router);
 

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

@@ -5,31 +5,35 @@
  * Important: Always import this file _before_ layering your own styles!
  */
 @layer lmvz-ds.theme {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
 @font-face {
   font-family: Router;
   src:
+    local('RouterBook-Regular'),
     local('Router-Book'),
-    url('/assets/fonts/Router-Book.woff') format('woff'),
-    local('Router');
-  font-weight: 400 normal;
+    url('/assets/fonts/Router-Book.woff') format('woff');
+  font-weight: 400;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterMedium-Regular'),
     local('Router-Medium'),
-    url('/assets/fonts/Router-Medium.woff') format('woff'),
-    local('Router');
+    url('/assets/fonts/Router-Medium.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterBold-Regular'),
     local('Router-Bold'),
-    url('/assets/fonts/Router-Bold.woff') format('woff'),
-    local('Router');
-  font-weight: 700 bold;
+    url('/assets/fonts/Router-Bold.woff') format('woff');
+  font-weight: 700;
 }
 
 }
@@ -59,10 +63,11 @@ h6 {
   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-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
+  --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.75rem, 0.69rem + 0.26vw, 1rem));
+  --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, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4
     Router);
   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);
   --lmvz-button-border-width: 0;
@@ -75,6 +80,7 @@ h6 {
   gap: var(--lmvz-button-gap);
   padding-block: var(--lmvz-button-padding-block);
   padding-inline: var(--lmvz-button-padding-inline);
+  min-height: var(--lmvz-button-min-height);
   border-radius: var(--lmvz-button-radius);
   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
   background-color: var(--lmvz-button-background);
@@ -97,8 +103,8 @@ button > * {
 }
 
 button:focus-visible {
-  outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
 
 button:is([disabled], .disabled) {
@@ -130,12 +136,10 @@ button.primary {
 
 button.primary:not([disabled], .disabled):hover {
   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e);
-  --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7);
 }
 
 button.primary:not([disabled], .disabled):active {
   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454);
-  --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
 }
 
 button.secondary {
@@ -147,40 +151,44 @@ button.secondary {
 
 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);
+  --lmvz-button-color: 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-border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
+  --lmvz-button-color: 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, #545454);
+  --lmvz-button-color: 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);
 }
 
 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);
 }
 
 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
+  --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.5rem, 0.44rem + 0.26vw, 0.75rem));
+  --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, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 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
+  --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(1rem, 0.94rem + 0.26vw, 1.25rem));
+  --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, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4
     Router);
 }
 

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

@@ -5,31 +5,35 @@
  * Important: Always import this file _before_ layering your own styles!
  */
 @layer lmvz-ds.theme {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
 @font-face {
   font-family: Router;
   src:
+    local('RouterBook-Regular'),
     local('Router-Book'),
-    url('/assets/fonts/Router-Book.woff') format('woff'),
-    local('Router');
-  font-weight: 400 normal;
+    url('/assets/fonts/Router-Book.woff') format('woff');
+  font-weight: 400;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterMedium-Regular'),
     local('Router-Medium'),
-    url('/assets/fonts/Router-Medium.woff') format('woff'),
-    local('Router');
+    url('/assets/fonts/Router-Medium.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterBold-Regular'),
     local('Router-Bold'),
-    url('/assets/fonts/Router-Bold.woff') format('woff'),
-    local('Router');
-  font-weight: 700 bold;
+    url('/assets/fonts/Router-Bold.woff') format('woff');
+  font-weight: 700;
 }
 
 }
@@ -46,7 +50,7 @@
   --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);
 
   --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
-  --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe);
 
   --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);
 
@@ -54,7 +58,7 @@
 
   --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
   --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
-  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);
+  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
   --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
   --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 
@@ -119,14 +123,14 @@ label {
   transition: color var(--checkbox-duration) var(--checkbox-easing);
 }
 .helper-text {
-  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
     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, 400 clamp(0.75rem, 0.73rem + 0.06vw, 0.81rem) / 1.4
+  font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
     Router);
   color: var(--checkbox-error-color);
   display: block;
@@ -172,12 +176,9 @@ label {
 :host([disabled]) input {
   cursor: not-allowed;
 }
-/* Focus ring, applied via sibling combinator on the native input */
-input:focus-visible ~ .box {
-  outline: 2px solid var(--checkbox-focus-color);
-  outline-offset: 2px;
-  /* box-shadow: 0 0 0 3px rgba(15, 138, 204, 0.2); TODO: no design token available for focus shadow color/spread */
-  box-shadow: 0 var(--lmvz-semantic-shadow-l1-1-position-y, 2px) 0 var(--lmvz-semantic-shadow-l1-1-blur, 4px) var(--lmvz-semantic-color-shadow-l1-colored, rgba(175, 223, 249, 0.42));
+:host(:focus-within) .pill {
+  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) {
@@ -200,7 +201,7 @@ input:focus-visible ~ .box {
     color: HighlightText;
   }
 
-  input:focus-visible ~ .box {
+  :host(:focus-within) .pill {
     outline-color: Highlight;
     box-shadow: none;
   }

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

@@ -1,6 +1,6 @@
+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 checkmark from "../../assets/icons/checkmark.svg";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
 const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmark);
@@ -83,7 +83,7 @@ export class LmvzCheckbox extends ReactiveControllerHost {
         this.lmvzChange.emit(this.checked);
     };
     render() {
-        return (h(Host, { key: '70201fa49465f1e29b98bb251ea254be0293b1df' }, h("div", { key: 'dfeb788e3e2d9a8329e7798954c744eee616692e', class: "pill" }, h("input", { key: '79fefaa297a5fbbb1b7f180c7cf4cccf8650a1f0', 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: '8808a026274979678515b3e750065af38d62fff9', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '861c08fb2a5cc6f24d3ae0a9f28cb6d2f51beda4', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '6dc36656d76bd3a6816553b4dcbdbea2c9bd2b0f', class: "content" }, h("label", { key: 'c343c4261e2eb231925d0f3ca0a83f9f3cdd0b9b', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '8473ed19adfe975b715a5e0b78c949c6b11de99e', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: 'e934cec1cc622908188cf9090e24988e5df45799', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (h(Host, { key: '158efacac5c28a18003149d4acb0d1cf5385cef4' }, h("div", { key: '5deaf853f9c465b70b7e5472579c5d5212105c34', class: "pill" }, h("input", { key: '7e8da452d41cd48293569ec60dad0585ff3290f1', 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: 'd1ee72be8e3fc2b4e70ff64b70bfcec93f08f063', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '73e123aa8c91e9098b4d8bbd48bbc7bae6c12383', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '2a161e6db9e792dca1fa24c1562bd0b79d62235b', class: "content" }, h("label", { key: 'fb38792095bf6da433867472d866d6700db45dac', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: 'b8c16fc4782f67e1dca82329d081943a7d75a524', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '87d6940217d379777e26c578cff761dcfd96e79a', 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,7 @@
   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, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.4
+  font: var(--lmvz-typography-body-xs-strong, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.4
     Router);
   background-color: var(--lmvz-chip-background-color);
   color: var(--lmvz-chip-foreground-color);
@@ -34,7 +34,7 @@
 :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, 500 clamp(0.63rem, 0.61rem + 0.06vw, 0.69rem) / 1.4
+  font: var(--lmvz-typography-body-2xs-strong, 500 clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem) / 1.4
     Router);
   gap: var(--lmvz-dimension-2-4, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));
 }
@@ -57,7 +57,7 @@
 
 :host([type='active']) {
   --lmvz-chip-border-color: var(--lmvz-semantic-color-status-on-active-subtle, #c1e6fa);
-  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  --lmvz-chip-background-color: var(--lmvz-semantic-color-status-active, #f6fbfe);
   --lmvz-chip-foreground-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }
 

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

@@ -5,31 +5,35 @@
  * Important: Always import this file _before_ layering your own styles!
  */
 @layer lmvz-ds.theme {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
 @font-face {
   font-family: Router;
   src:
+    local('RouterBook-Regular'),
     local('Router-Book'),
-    url('/assets/fonts/Router-Book.woff') format('woff'),
-    local('Router');
-  font-weight: 400 normal;
+    url('/assets/fonts/Router-Book.woff') format('woff');
+  font-weight: 400;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterMedium-Regular'),
     local('Router-Medium'),
-    url('/assets/fonts/Router-Medium.woff') format('woff'),
-    local('Router');
+    url('/assets/fonts/Router-Medium.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterBold-Regular'),
     local('Router-Bold'),
-    url('/assets/fonts/Router-Bold.woff') format('woff'),
-    local('Router');
-  font-weight: 700 bold;
+    url('/assets/fonts/Router-Bold.woff') format('woff');
+  font-weight: 700;
 }
 
 }
@@ -46,9 +50,9 @@
   --input-height: 48px; /* From Figma input-size=48 */
   --input-padding-x: 16px;
 
-  --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);
+  --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
-  --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);
+  --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);
 
   --label-floating-scale: 0.85; /* 14px -> 12px approx */
@@ -83,13 +87,9 @@
   pointer-events: none;
 }
 .input-container:focus-within .input-wrapper {
-  border-color: var(--input-border-color-focus);
-  outline: 2px solid var(--input-border-color-focus);
-  outline-offset: 2px;
-}
-/* Enhanced focus indicator for keyboard users */
-.input-container:has(input:focus-visible) .input-wrapper {
-  box-shadow: 0 0 0 3px rgb(0 86 214 / 20%);
+  /* border-color: var(--input-border-color-focus); */
+  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-menuitem/lmvz-menuitem.css

@@ -5,31 +5,35 @@
  * Important: Always import this file _before_ layering your own styles!
  */
 @layer lmvz-ds.theme {
+/**
+ * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
+ */
+
 @font-face {
   font-family: Router;
   src:
+    local('RouterBook-Regular'),
     local('Router-Book'),
-    url('/assets/fonts/Router-Book.woff') format('woff'),
-    local('Router');
-  font-weight: 400 normal;
+    url('/assets/fonts/Router-Book.woff') format('woff');
+  font-weight: 400;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterMedium-Regular'),
     local('Router-Medium'),
-    url('/assets/fonts/Router-Medium.woff') format('woff'),
-    local('Router');
+    url('/assets/fonts/Router-Medium.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: Router;
   src:
+    local('RouterBold-Regular'),
     local('Router-Bold'),
-    url('/assets/fonts/Router-Bold.woff') format('woff'),
-    local('Router');
-  font-weight: 700 bold;
+    url('/assets/fonts/Router-Bold.woff') format('woff');
+  font-weight: 700;
 }
 
 }
@@ -45,7 +49,7 @@
   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;
 
-  --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #545454);
+  --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
   --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
 
   background: var(--lmvz-menuitem-background);
@@ -62,6 +66,6 @@
   z-index: 1;
 }
 :host([aria-expanded='true']) {
-  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f1f9fe);
+  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-active, #f6fbfe);
   --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
 }