@lmvz-ds/components 0.38.0 → 0.39.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-tabs/lmvz-tabs.js

@@ -7,10 +7,12 @@ export class LmvzTabs extends ReactiveControllerHost {
     instanceId = ++tabsIdCounter;
     tabSlotEl;
     panelSlotEl;
+    tablistEl;
     focusController = new DirectionalFocusController(this, {
         orientation: 'horizontal',
         manageTabIndex: true,
         enableHomeAndEnd: true,
+        listenerTarget: this.tablistEl,
     });
     value;
     orientation = 'horizontal';
@@ -29,6 +31,9 @@ export class LmvzTabs extends ReactiveControllerHost {
         this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
         this.el.addEventListener('lmvzTabReady', this.handleTabReady);
         this.handleTabSlotChange();
+        if (this.tablistEl) {
+            this.focusController.updateListenerTarget(this.tablistEl);
+        }
         super.componentDidLoad();
     }
     disconnectedCallback() {
@@ -113,6 +118,7 @@ export class LmvzTabs extends ReactiveControllerHost {
             orientation: this.orientation,
             manageTabIndex: true,
             enableHomeAndEnd: true,
+            listenerTarget: this.tablistEl,
         });
         this.addController(this.focusController);
         if (this.el.isConnected) {
@@ -235,7 +241,7 @@ export class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (h(Host, { key: '33205038c047420618800be3ef755e1d13a0127c', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: 'e803f772c5b187326fc80cfa2d3b9d74f6ee1df8', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: '6871a7b6b26c6251ceb544c03b245450aa53373d', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '17721962da2ecf107a5b878dea996812c61be998', part: "panels-container", class: "panels-container" }, h("slot", { key: '485de66efc7812ecb2368a6b01b0d8ab63971497', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (h(Host, { key: 'be4fe04b1374a2793d3b1e9a658a449474efdd03', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: 'd91015eddf16dfad5d49e942eb86e9f568978f34', role: "tablist", "aria-orientation": this.orientation, class: "tablist", ref: (el) => (this.tablistEl = el) }, h("slot", { key: 'be0990a7c668bc96a67c01561e3142ec028dabd0', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '338323738dfdbb436d86cdb4f6041a67c1af433d', part: "panels-container", class: "panels-container" }, h("slot", { key: 'd225be099c8cb902776ce0a7dbf7dcb2aef2d03b', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get is() { return "lmvz-tabs"; }
     static get encapsulation() { return "shadow"; }

package/collection/utils/aria/directional-focus-controller.js

@@ -1,8 +1,5 @@
 import { getDeepActiveElement, isInputElement } from "../element/element.util";
 import { getLmvzComponentMetaInfo, registerLmvzComponentMetaInfo } from "../stencil/reactive-controller-host";
-export function isFocusControllerHost(el) {
-    return Boolean(getLmvzComponentMetaInfo(el, 'isFocusControllerHost'));
-}
 const defaultConfig = {
     orientation: 'both',
     enableHomeAndEnd: false,
@@ -22,11 +19,21 @@ export class DirectionalFocusController {
     }
     hostConnected() {
         registerLmvzComponentMetaInfo(this.host.el, 'isFocusControllerHost', true);
-        this.host.el.addEventListener('keydown', this.handleKeydown);
+        this.getListenerTarget().addEventListener('keydown', this.handleKeydown);
         this.syncManagedFocusTarget();
     }
     hostDisconnected() {
-        this.host.el.removeEventListener('keydown', this.handleKeydown);
+        this.getListenerTarget().removeEventListener('keydown', this.handleKeydown);
+    }
+    updateListenerTarget(listenerTarget) {
+        if (listenerTarget === this.config.listenerTarget)
+            return;
+        this.getListenerTarget().removeEventListener('keydown', this.handleKeydown);
+        this.config.listenerTarget = listenerTarget;
+        this.getListenerTarget().addEventListener('keydown', this.handleKeydown);
+    }
+    getListenerTarget() {
+        return this.config.listenerTarget ?? this.host.el;
     }
     updateElements(elements) {
         const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
@@ -178,10 +185,12 @@ export class DirectionalFocusController {
         return isTabOrderable && element.getAttribute('aria-hidden') !== 'true' && (element.checkVisibility?.() ?? true) && element.offsetParent !== null;
     }
 }
-function isDirectionalFocusReceiver(el) {
+export function isFocusControllerHost(el) {
+    return Boolean(getLmvzComponentMetaInfo(el, 'isFocusControllerHost'));
+}
+export function isDirectionalFocusReceiver(el) {
     return typeof el.resolveFocusableElement === 'function';
 }
 function resolveElement(el) {
     return isDirectionalFocusReceiver(el) ? (el.resolveFocusableElement() ?? el) : el;
 }
-export { DirectionalFocusController as ListKeyboardNavigationController };

package/collection/utils/icons/public.js

@@ -1,2 +1,5 @@
+import { typedIconFromSet } from "./icons.js";
 export { getRegisteredIconProvider, registerIconProvider } from './icons-registry.js';
 export { typedIconFromSet } from './icons.js';
+window.LmvzApi ??= {};
+window.LmvzApi.typedIconFromSet = typedIconFromSet;

package/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-DbBJxuBm.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-BDonpCG8.js";export{g as chipSizes,f as chipTypes,d as iconSizes,e as iconWeights,b as inputSizes,i as inputTypes,l as linkTypes,m as messageTypes,p as popoverPlacements,n as popoverSizes,s as scaleValues,c as selectSizes,a as sizes,k as snackbarDismissReasons,j as snackbarPriorities,h as snackbarStatuses,t as textSizes,v as variants}from"./p-0ctLESas.js";export{g as getRegisteredIconProvider,r as registerIconProvider,t as typedIconFromSet}from"./p-CgGqXTxQ.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzActionList,defineCustomElement as defineCustomElementLmvzActionList}from"./lmvz-action-list.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzButtonGroup,defineCustomElement as defineCustomElementLmvzButtonGroup}from"./lmvz-button-group.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzCheckbox,defineCustomElement as defineCustomElementLmvzCheckbox}from"./lmvz-checkbox.js";export{LmvzChip,defineCustomElement as defineCustomElementLmvzChip}from"./lmvz-chip.js";export{LmvzDatepicker,defineCustomElement as defineCustomElementLmvzDatepicker}from"./lmvz-datepicker.js";export{LmvzHeader,defineCustomElement as defineCustomElementLmvzHeader}from"./lmvz-header.js";export{LmvzIcon,defineCustomElement as defineCustomElementLmvzIcon}from"./lmvz-icon.js";export{LmvzInput,defineCustomElement as defineCustomElementLmvzInput}from"./lmvz-input.js";export{LmvzLink,defineCustomElement as defineCustomElementLmvzLink}from"./lmvz-link.js";export{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";export{LmvzMessage,defineCustomElement as defineCustomElementLmvzMessage}from"./lmvz-message.js";export{LmvzModal,defineCustomElement as defineCustomElementLmvzModal}from"./lmvz-modal.js";export{LmvzPopover,defineCustomElement as defineCustomElementLmvzPopover}from"./lmvz-popover.js";export{LmvzRadio,defineCustomElement as defineCustomElementLmvzRadio}from"./lmvz-radio.js";export{LmvzSelect,defineCustomElement as defineCustomElementLmvzSelect}from"./lmvz-select.js";export{LmvzSnackbar,defineCustomElement as defineCustomElementLmvzSnackbar}from"./lmvz-snackbar.js";export{LmvzSpinner,defineCustomElement as defineCustomElementLmvzSpinner}from"./lmvz-spinner.js";export{LmvzTab,defineCustomElement as defineCustomElementLmvzTab}from"./lmvz-tab.js";export{LmvzTabs,defineCustomElement as defineCustomElementLmvzTabs}from"./lmvz-tabs.js";export{LmvzToggle,defineCustomElement as defineCustomElementLmvzToggle}from"./lmvz-toggle.js";const o={low:0,normal:1,high:2},z={success:5e3,warning:5e3,error:8e3};let C=0;function E(){return C+=1,"snackbar-"+C}class L{hostEl=void 0;active=void 0;getHost(){return void 0===this.hostEl||this.hostEl.isConnected||(this.hostEl=void 0),void 0===this.hostEl&&(this.hostEl=function(){if("undefined"==typeof document)return;const e=document.querySelector("[data-snackbar-host]");if(e)return e;const s=document.createElement("lmvz-snackbar");return s.setAttribute("data-snackbar-host",""),document.body.appendChild(s),s}()),this.hostEl}clearTimer(e){void 0!==e.timerId&&(clearTimeout(e.timerId),e.timerId=void 0)}scheduleTimer(e,s){s<=0||(e.timerStartedAt=Date.now(),e.timerId=setTimeout((()=>{void 0!==this.active&&this.active.id===e.id&&this.dismissActive(e,"timeout")}),s))}dismissActive(e,s){this.clearTimer(e);const t=e.hostEl;t.removeEventListener("pointerenter",e.onPointerEnter),t.removeEventListener("pointerleave",e.onPointerLeave),t.removeEventListener("focusin",e.onFocusIn),t.removeEventListener("focusout",e.onFocusOut),e.onActionListener&&t.removeEventListener("lmvzAction",e.onActionListener),t.hide?.(),this.active?.id===e.id&&(this.active=void 0),"action"!==s&&t.dispatchEvent(new CustomEvent("lmvzClose",{detail:{reason:s},bubbles:!0,composed:!0})),e.resolve({reason:s})}pauseTimer(e){if(e.pauseCount+=1,e.pauseCount>1||void 0===e.timerId)return;const s=void 0!==e.timerStartedAt?Date.now()-e.timerStartedAt:0;e.remaining=Math.max(0,e.remaining-s),e.timerStartedAt=void 0,this.clearTimer(e)}resumeTimer(e){e.pauseCount>0&&(e.pauseCount-=1),e.pauseCount>0||e.remaining>0&&this.scheduleTimer(e,e.remaining)}applyToHost(e,s){e.setAttribute("status",s.status??"success"),void 0!==s.actionLabel?e.setAttribute("action-label",s.actionLabel):e.removeAttribute("action-label")}open(e){const s=o[e.priority??"normal"];if(void 0!==this.active&&s<this.active.priority){let e;const s=new Promise((s=>{e=s}));return e({reason:"swallowed"}),{id:E(),closed:s,dismiss(){}}}void 0!==this.active&&this.dismissActive(this.active,"overridden");const t=this.getHost();if(void 0===t){const e=E();let s;const t=new Promise((e=>{s=e}));return s({reason:"swallowed"}),{id:e,closed:t,dismiss(){}}}const m=E(),i=0===e.duration?0:e.duration??z[e.status??"success"];let n;const a=new Promise((e=>{n=e})),r={id:m,priority:s,resolve:n,timerId:void 0,remaining:i,timerStartedAt:void 0,pauseCount:0,hostEl:t,onPointerEnter:()=>this.pauseTimer(r),onPointerLeave:()=>this.resumeTimer(r),onFocusIn:()=>this.pauseTimer(r),onFocusOut:()=>this.resumeTimer(r)};this.active=r,t.addEventListener("pointerenter",r.onPointerEnter),t.addEventListener("pointerleave",r.onPointerLeave),t.addEventListener("focusin",r.onFocusIn),t.addEventListener("focusout",r.onFocusOut),this.applyToHost(t,e);const l=()=>{void 0!==this.active&&this.active.id===m&&(e.onAction?.(),this.dismissActive(r,"action"))};return r.onActionListener=l,t.addEventListener("lmvzAction",l,{once:!0}),t.show?.(),queueMicrotask((()=>t.setAttribute("message",e.message))),i>0&&this.scheduleTimer(r,i),{id:m,closed:a,dismiss:()=>{this.active?.id===m&&this.dismissActive(r,"manual")}}}dismiss(e){this.active&&(e&&this.active.id!==e||this.dismissActive(this.active,"manual"))}}export{L as SnackbarController}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-DbBJxuBm.js";export{A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT,d as disableAriaValidation,e as enableAriaValidation,i as isAriaValidationEnabled,q as queueValidation,u as useVerboseLogging}from"./p-BDonpCG8.js";export{g as chipSizes,f as chipTypes,d as iconSizes,e as iconWeights,b as inputSizes,i as inputTypes,l as linkTypes,m as messageTypes,p as popoverPlacements,n as popoverSizes,s as scaleValues,c as selectSizes,a as sizes,k as snackbarDismissReasons,j as snackbarPriorities,h as snackbarStatuses,t as textSizes,v as variants}from"./p-0ctLESas.js";export{S as SnackbarController}from"./p-BPa0FHVO.js";export{LmvzAction,defineCustomElement as defineCustomElementLmvzAction}from"./lmvz-action.js";export{LmvzActionList,defineCustomElement as defineCustomElementLmvzActionList}from"./lmvz-action-list.js";export{LmvzButton,defineCustomElement as defineCustomElementLmvzButton}from"./lmvz-button.js";export{LmvzButtonGroup,defineCustomElement as defineCustomElementLmvzButtonGroup}from"./lmvz-button-group.js";export{LmvzCard,defineCustomElement as defineCustomElementLmvzCard}from"./lmvz-card.js";export{LmvzCheckbox,defineCustomElement as defineCustomElementLmvzCheckbox}from"./lmvz-checkbox.js";export{LmvzChip,defineCustomElement as defineCustomElementLmvzChip}from"./lmvz-chip.js";export{LmvzDatepicker,defineCustomElement as defineCustomElementLmvzDatepicker}from"./lmvz-datepicker.js";export{LmvzHeader,defineCustomElement as defineCustomElementLmvzHeader}from"./lmvz-header.js";export{LmvzIcon,defineCustomElement as defineCustomElementLmvzIcon}from"./lmvz-icon.js";export{LmvzInput,defineCustomElement as defineCustomElementLmvzInput}from"./lmvz-input.js";export{LmvzLink,defineCustomElement as defineCustomElementLmvzLink}from"./lmvz-link.js";export{LmvzMenuitem,defineCustomElement as defineCustomElementLmvzMenuitem}from"./lmvz-menuitem.js";export{LmvzMessage,defineCustomElement as defineCustomElementLmvzMessage}from"./lmvz-message.js";export{LmvzModal,defineCustomElement as defineCustomElementLmvzModal}from"./lmvz-modal.js";export{LmvzPopover,defineCustomElement as defineCustomElementLmvzPopover}from"./lmvz-popover.js";export{LmvzRadio,defineCustomElement as defineCustomElementLmvzRadio}from"./lmvz-radio.js";export{LmvzSelect,defineCustomElement as defineCustomElementLmvzSelect}from"./lmvz-select.js";export{LmvzSnackbar,defineCustomElement as defineCustomElementLmvzSnackbar}from"./lmvz-snackbar.js";export{LmvzSpinner,defineCustomElement as defineCustomElementLmvzSpinner}from"./lmvz-spinner.js";export{LmvzTab,defineCustomElement as defineCustomElementLmvzTab}from"./lmvz-tab.js";export{LmvzTabs,defineCustomElement as defineCustomElementLmvzTabs}from"./lmvz-tabs.js";export{LmvzToggle,defineCustomElement as defineCustomElementLmvzToggle}from"./lmvz-toggle.js";export{g as getRegisteredIconProvider,r as registerIconProvider,t as typedIconFromSet}from"./p-CyDgnpOB.js";