@lmvz-ds/components 0.38.0 → 0.40.0

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

@@ -78,12 +78,23 @@ legend {
   /** component dependencies */
   /* * the (invalid nested) import will be handled by postcss */
   /* stylelint-disable no-invalid-position-at-import-rule */
-  button {
-  /* secondary styling is default, primary is explicit */
-  /* --lmvz-button-background, --lmvz-button-color, --lmvz-button-radius are declared on :host
+  /* stylelint-disable nesting-selector-no-missing-scoping-root */
+
+/**
+ * This fragment is meant to be reusable in multiple component types.
+ * CAUTION: always wrap the import in a tag selector (ususally button)!
+ */
+& {
+  /* the (invalid nested) import will be handled by postcss */
+  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+  /* stylelint-disable nesting-selector-no-missing-scoping-root */
+& {
+  /* variables 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. */
+     They are also declared here so that non-shadow consumers have the default values in scope. */
+
+  /* secondary styling is default, primary is explicit */
+
   --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));
@@ -98,19 +109,20 @@ legend {
 
   display: inline-flex;
   align-items: center;
-  justify-content: var(--lmvz-button-content-justification-override, center);
-  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);
-  min-width: var(--lmvz-button-min-height);
-  border-radius: var(--lmvz-button-radius);
-  border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
+  justify-content: var(--lmvz-button-content-justification, center);
+  gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
+
+  box-sizing: border-box; /* to inlclude paddings & border in min-height */
+  padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
+  border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent);
+  border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px));
+
   background-color: var(--lmvz-button-background);
   color: var(--lmvz-button-color);
   cursor: pointer;
   font: var(--lmvz-button-font);
-  /* text-align: center; */
   text-decoration: none;
   white-space: nowrap;
   transition:
@@ -120,100 +132,91 @@ legend {
     box-shadow 0.15s ease;
 }
 
-button > * {
-  font: inherit;
-  color: inherit;
-}
 
-button: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));
-  position: relative;
-  z-index: 1;
-}
+  & > * {
+    font: inherit;
+    color: inherit;
+  }
+  &: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));
+    position: relative;
+    z-index: 1;
+  }
+  &:is([disabled], .disabled) {
+    cursor: not-allowed;
+    pointer-events: none;
+    /* } */
+
+    /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
+    /* button:is([disabled], .disabled) { */
+    /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
+    /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
+    opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+  }
+  &:not([disabled]):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
+  }
+  &:not([disabled]):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
+  }
 
-button:is([disabled], .disabled) {
-  cursor: not-allowed;
-  pointer-events: none;
-  /* } */
-
-  /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
-  /* button:is([disabled], .disabled) { */
-  /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
-  /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
-  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
-}
-
-button:not([disabled]):hover {
-  --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-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
-}
-
-button.primary {
-  --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-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
-}
-
-button.primary:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
-}
-
-button.danger {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
-  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.danger:not([disabled], .disabled):hover {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.danger:not([disabled], .disabled):active {
-  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
-  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
-}
-
-button.tertiary {
-  --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-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-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));
-}
+  /* secondary styling is default, primary is explicit */
 
-button.small {
-  --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-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
+  &.primary {
+    --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);
+  }
+  &.primary:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
+  }
+  &.primary:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
+  }
+  &.danger {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
+    --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.danger:not([disabled], .disabled):hover {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.danger:not([disabled], .disabled):active {
+    --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
+    --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
+  }
+  &.tertiary {
+    --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));
+  }
+  &.tertiary:not([disabled], .disabled):hover {
+    --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));
+  }
+  &.tertiary:not([disabled], .disabled):active {
+    --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));
+  }
+
+  &.small {
+    --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-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
     Router));
-}
-
-button.large {
-  --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-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
+  }
+  &.large {
+    --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-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
     Router));
+  }
 }
 
 

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

@@ -11,7 +11,7 @@ export class LmvzHeader extends ReactiveControllerHost {
     primarySlot;
     secondarySlot;
     secondaryNav;
-    keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both' });
+    keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both', manageTabIndex: false, enableHomeAndEnd: false });
     get primaryMenuitems() {
         return this.primarySlot?.assignedElements({ flatten: false }) || [];
     }
@@ -87,7 +87,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: '77744fd74160551232eb0347e9ebb01eb3b9bec0', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'dfd78b2a2ab06b010d9f29dd61f57aced82243fe', class: "brand" }, h("slot", { key: 'c6d29bbdbcbe581a8a170fbeb3d6ab1e31d27dcd', name: "brand" }, h("img", { key: '80cea3b254d153411864d52c2ba300e0eb3c57a7', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '71c53ae0300b61291d0763cdb23f1f645a83928a', "aria-label": "Hauptnavigation" }, h("div", { key: '09949b77a66c54a10c4c141de846fd5697b9d445', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'acec0cf7e13325c49d1e0929b90b056ad1cbbe64', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'd35860c71ad5e28ee2e3aaafb157acbeff41d83e', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'a4c3a1ad1b1de5bd903b54ed6bd1616ce6517bbb', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'ff50045d9ab28bf66a619a48d9ea1f0ed2f5f952', class: "actions" }, h("slot", { key: '6ead0b7a54bf93bb06f0eab2aa8159bd6e96e8f5', name: "actions" }))));
+        return (h(Host, { key: 'a72c860d7f67c9631c462c0abcc798bb142dfc55', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '4ed87264d201c513bce284536793692424ed864b', class: "brand" }, h("slot", { key: '9291d81d7f8a630007b8ad827a16ebea7222b9d2', name: "brand" }, h("img", { key: '77da99409f40d93e4a2d190cbb2a8857f1e81c36', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '3c40c04bb23524ae58e391a54b044e225a25ad07', "aria-label": "Hauptnavigation" }, h("div", { key: '207b8032d3d11b4bfacb6e7fcffb683ad5da8ccc', role: "menubar", class: "primary-menubar" }, h("slot", { key: '8ae67a57ac7b6bb6083c469a857542e31b0c2294', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '86b9696c95e9ae0e3843fa1607f268dcae8cb279', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '67966de33555dc26ac2dc51fc8a85d456a2e8e85', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'bfb2831144cee723c3182d96d64f44be1cc5a78b', class: "actions" }, h("slot", { key: '6956b81fa8ed6c446edc5f7d9708462b39bc8cbb', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -126,24 +126,12 @@ label > span[aria-hidden='true'],
   z-index: 1;
   transition: border-color 0.15s ease;
 }
-:host(:not([disabled], [highlighted], [error])) .select-wrapper:hover .select-trigger {
+:host(:not([disabled], [error])) .select-wrapper:hover .select-trigger {
   border-color: var(--lmvz-select-border-color-hover);
 }
 :host([error]) .select-trigger {
   border-color: var(--lmvz-select-error-color);
 }
-:host([highlighted]) .select-trigger {
-  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
-  border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
-  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
-}
-:host([highlighted]) .select-trigger > span:first-child {
-  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
-}
-:host([highlighted]) label.floating-label {
-  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
-  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
-}
 :host:has(:focus-visible) .select-trigger {
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
@@ -158,8 +146,7 @@ label > span[aria-hidden='true'],
   white-space: nowrap;
   text-align: left;
 }
-/* Active-selected text color: when a value is selected (not applicable in highlighted state) */
-:host(:not([highlighted])) .select-wrapper.has-value .select-trigger > span:first-child {
+.select-wrapper.has-value .select-trigger > span:first-child {
   color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
 }
 /* Trailing chevron child span, shared by single- and multiselect modes. Scoped with the
@@ -177,8 +164,7 @@ label > span[aria-hidden='true'],
   flex-shrink: 0;
 }
 /* Chip row — rendered inline inside the trigger's leading text span (.select-trigger >
-   span:first-child), reusing that span's flex/overflow/ellipsis truncation contract instead of
-   duplicating it. Single-line: overflowing chips are truncated with an ellipsis, never wrapped. */
+   span:first-child). Overflowing chips are truncated with an ellipsis to enforce single line. */
 .select-trigger > span:first-child lmvz-chip {
   vertical-align: middle;
 }
@@ -228,40 +214,69 @@ label > span[aria-hidden='true'],
 :host([size='large']) .select-trigger > span:first-child {
   font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
 }
-/*
- * Option-list item styling for the `role="option"` elements rendered inside the
- * `lmvz-popover` (containerRole="listbox") popup. The token set mirrors the states
- * `lmvz-action-list` applies to its `<lmvz-button>`/`<button>` items (tertiary variant),
- * so the listbox looks visually identical to an action-list item:
- *   - default:  --lmvz-semantic-color-int-tertiary / --lmvz-semantic-color-int-on-tertiary
- *   - hover:    --lmvz-semantic-color-int-tertiary-hover / --lmvz-semantic-color-int-on-tertiary-hover
- *   - active:   --lmvz-semantic-color-int-tertiary-active / --lmvz-semantic-color-int-on-tertiary-active
- *   - disabled: --lmvz-component-input-disabled-opacity (opacity, same token as lib-styles buttons fragment)
- *   - focus:    --lmvz-ds-outline / --lmvz-ds-outline-offset (same as lib-styles buttons fragment focus-visible)
- * "selected" has no action-list equivalent (action-list is a menu, not a listbox), so it
- * reuses this component's own highlighted-state tokens for consistency with the trigger.
- * "active" (`data-active="true"`) is this component's own addition: since the combobox uses
- * the activedescendant model, the highlighted option never receives real DOM focus, so
- * `:hover`/`:focus-visible` cannot indicate it to sighted keyboard users — `data-active` is
- * set by the host from `ListboxController`'s active id and styled the same as hover/focus.
- */
 .lmvz-select-option {
   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
 
-  display: flex;
+  /* The configuration here will match lmvz-action-list's items, though semantic states might differ intentionally */
+  --lmvz-button-background-override: var(--lmvz-select-option-background);
+  --lmvz-button-color-override: var(--lmvz-select-option-color);
+  --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);
+  --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  --lmvz-button-content-justification: normal;
+  --lmvz-button-font-override: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+
+  /* the (invalid nested) import will be handled by postcss */
+  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+  /* stylelint-disable nesting-selector-no-missing-scoping-root */
+& {
+  /* variables 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 have the default values in scope. */
+
+  /* secondary styling is default, primary is explicit */
+
+  --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-label-md-strong, normal 700 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;
-  gap: var(--lmvz-select-gap);
-  padding: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  border-radius: var(--lmvz-semantic-border-radius-md, 6px);
-  background-color: var(--lmvz-select-option-background);
-  color: var(--lmvz-select-option-color);
+  justify-content: var(--lmvz-button-content-justification, center);
+  gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
+
+  box-sizing: border-box; /* to inlclude paddings & border in min-height */
+  padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
+  border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent);
+  border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px));
+
+  background-color: var(--lmvz-button-background);
+  color: var(--lmvz-button-color);
   cursor: pointer;
-  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-button-font);
+  text-decoration: none;
+  white-space: nowrap;
   transition:
     background-color 0.15s ease,
-    color 0.15s ease;
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+
+  display: flex;
 }
 .lmvz-select-option:not([aria-disabled='true']):hover {
   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);

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

@@ -72,7 +72,6 @@ export class LmvzSelect extends ReactiveControllerHost {
     required = false;
     name;
     size = 'default';
-    highlighted = false;
     selectedLabel = '';
     selectedId;
     activeId;
@@ -346,7 +345,7 @@ export class LmvzSelect extends ReactiveControllerHost {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
         const showChips = this.multiple && hasValue;
-        return (h(Host, { key: 'aece4095568891e34afc978c6a0aa9e638e7e207', "data-highlighted": String(this.highlighted) }, h("div", { key: '7c0e2a71a2b3b0bee46009c3498062b86f6eca72', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: 'f473d3a012cbd43c691de1782ead4a5d5e59cd32', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && h("span", { key: '50a2d3999af0310fcf1af62fdf72109fc25f76ee', "aria-hidden": "true" }, " *")), h("div", { key: 'd09b26c4e8d9e4ae8ab503c4abb2b22f7e0d905c', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": this.triggerAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, h("span", { key: '99fbb4a7a2ce16e63bf30b2c25a0c413533d60f5' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '3f6473f7f064e98bcdf936e2b9a5978f20e00772', "aria-hidden": "true" }, " *")), h("span", { key: 'cfb75d279c2c101d7724c596a4f2cd34ce13d7c0', "aria-hidden": "true" }, h("svg", { key: '51e30ae88d4355e0513cce076c97dd335b6a1d7e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0b1fb9c3d6809daa93abc404fbb82469d9f4a1cc', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("lmvz-popover", { key: '02b3524eed3eb4da9899f2acb85eba2cc3f09d78', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, "aria-multiselectable": this.multiple ? 'true' : undefined, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), h("div", { key: '84cbf09b5d47eeebba9ed55f21aa715257faf1f1', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, h("slot", { key: '928aa417eca972d4d85592f569c3fc95419dd9b3', onSlotchange: this.handleSlotChange }))), this.helperText && (h("div", { key: '5c0dac612458ba3564c3ac445f396c9e95832fe6', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (h("div", { key: '4c5c0a3826239fd2d5b52ad9118937dc5494c632', id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (h(Host, { key: '77cb72cdce635eae0f9a29cb9121dd7d16955219' }, h("div", { key: 'cc6c04090457df17c6a9e74354fc21875d378642', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '8dc52469a7b3333578494b2f7bdb4e870044ac6c', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && h("span", { key: 'c198fb4944e46c5219a42e16ae24dc3c414b1b00', "aria-hidden": "true" }, " *")), h("div", { key: '034cc67405aac73a6557036dea90e4644c1578ed', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": this.triggerAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, h("span", { key: 'c61c136bfaab211572a988d3b16c2746f80b1ac6' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '24201baae63a4f6fdaef2441d304cd8f69430fb5', "aria-hidden": "true" }, " *")), h("span", { key: '547c61dfdc83f89cf7cd0582c785b9552190e533', "aria-hidden": "true" }, h("svg", { key: 'f6a0cb7c77682aec03cd146e84712c17df5ff910', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '35a8a50e27f18e54003974ae5b5ed578602664d3', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("lmvz-popover", { key: '0d5b94659c23763d59638046a397963d79a5e588', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, "aria-multiselectable": this.multiple ? 'true' : undefined, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), h("div", { key: 'c4a313fe4b6c53678a4f3dafced210f00e3c93d5', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, h("slot", { key: '1fb311e6938812e68ae5155184af2e2ba7c19861', onSlotchange: this.handleSlotChange }))), this.helperText && (h("div", { key: 'accade9aae4cb2e23fa1d8f62dd9b6efdf3ddfb5', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (h("div", { key: 'faa5eba225adda67b44b8a63ae98a678fddf49ad', id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }
@@ -592,29 +591,6 @@ export class LmvzSelect extends ReactiveControllerHost {
                 "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'default'"
-            },
-            "highlighted": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Whether the select has an active filter or selection that should be visually\ndistinguished (e.g. a filter chip is applied).\n\nWhen `true`:\n- The host attribute `highlighted` is present (CSS: `:host([highlighted])`).\n- The host attribute `data-highlighted=\"true\"` is set for assistive-technology\n  consumers that observe data attributes. When `false`, `data-highlighted` is\n  set to `\"false\"`.\n\nNote: `aria-pressed` is intentionally not used here; it is reserved for toggle-button\nroles. `aria-selected` is reserved for this component's own `role=\"option\"` elements.\nThe `data-highlighted` attribute provides the accessible contract for this state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "highlighted",
-                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1,4 @@
+import { SnackbarController } from "./snackbar-controller";
 export { SnackbarController } from './snackbar-controller';
+window.LmvzApi ??= {};
+window.LmvzApi.SnackbarController = SnackbarController;

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

@@ -128,7 +128,6 @@ button:active {
   opacity: 0;
   transition: opacity 0.15s ease;
 
-  /* Horizontal: full-width bar at bottom */
   inset-block-end: 0;
   inset-inline: 0;
   block-size: var(--lmvz-tab-indicator-size);
@@ -140,18 +139,6 @@ button:active {
 :host([selected][has-media]) .indicator {
   opacity: 1;
 }
-:host([vertical]) button {
-  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
-}
-:host([vertical]) .indicator {
-  /* Vertical: narrow bar at inline-start edge */
-  inset-block: 0;
-  inset-inline: 0 auto;
-  inline-size: var(--lmvz-tab-indicator-size);
-  block-size: auto;
-  border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;
-  background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));
-}
 ::slotted(*) {
   --lmvz-component-color: var(--lmvz-tab-color);
 }

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

@@ -5,7 +5,7 @@ export class LmvzTab {
     value;
     disabled = false;
     selected = false;
-    vertical = false;
+    panel;
     handleMediaSlotChange = () => {
         this.el.toggleAttribute('has-media', (this.mediaSlotEl?.assignedElements() ?? []).length > 0);
     };
@@ -14,7 +14,7 @@ export class LmvzTab {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (h(Host, { key: '4380fe35cacb11bc7114664c126504e8f4fb09a0' }, h("button", { key: 'ac77443cbba5c94f864820088f60c0bac23d0775', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: '9988497505ca3effa6c41011ac408a5d25629ca1', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: '70566c46fba36b8717aa82917e45abd39cd7a2ea', class: "label" }, h("slot", { key: 'a595738c387ee2f4f77f6ccdfdfb0589751ce999' })), h("span", { key: '933758dc965d1151ca6a96367ea40290189384ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (h(Host, { key: '8fb0ddc827d31fa1669a7fdaef288be5002a7c53' }, h("button", { key: '72b8f8be2f7ec7d0d2840148d48188382699d9b9', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: 'c951ae74e7b15feff7f32bc87b2e3fd46221b6b4', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: '8a06f3a9598bbf90819ff3644874f53b1ed9f840', class: "label" }, h("slot", { key: '98217fca2371ad7b0ded79628895337603a54c2f' })), h("span", { key: '68a11cf2f3d51aa6f4b9a7d2efcce1a1bb0c7640', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get is() { return "lmvz-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -96,28 +96,24 @@ export class LmvzTab {
                 "attribute": "selected",
                 "defaultValue": "false"
             },
-            "vertical": {
-                "type": "boolean",
+            "panel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Vertical orientation context.\nSet by the parent `lmvz-tabs` when `orientation=\"vertical\"` \u2014 do not set manually.\nWhen true the selection indicator moves to the inline-start edge."
+                    "tags": [],
+                    "text": "The `id` of the target `lmvz-tab-panel` this tab controls.\nWhen omitted, pairing falls back to DOM position."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "vertical",
-                "defaultValue": "false"
+                "attribute": "panel"
             }
         };
     }

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

@@ -62,11 +62,6 @@ legend {
   background: none;
   border-radius: 0;
 }
-/* ── Vertical orientation ────────────────────────────────────────────────── */
-:host([orientation='vertical']) .tablist {
-  flex-direction: column;
-  overflow: visible auto;
-}
 /* The panels slot renders inline; individual panels control their own display */
 ::slotted([role='tabpanel']) {
   display: block;