@lmvz-ds/components 0.14.1 → 0.15.2

package/hydrate/index.mjs

@@ -5233,10 +5233,20 @@ function getRuntimeState() {
 const isAriaValidationEnabled = () => getRuntimeState().enabled;
 const useVerboseLogging = () => getRuntimeState().verboseLogging ?? false;
 function queueValidation(...args) {
-    const state = getRuntimeState();
-    if (!state.enabled || !state.runtime)
+    const { enabled, runtime, loadPromise } = getRuntimeState();
+    if (!enabled)
         return;
-    state.runtime.enqueueValidation(...args);
+    if (!runtime) {
+        if (loadPromise) {
+            loadPromise.then((loadedRuntime) => {
+                if (loadedRuntime) {
+                    loadedRuntime.enqueueValidation(...args);
+                }
+            });
+            return;
+        }
+    }
+    runtime.enqueueValidation(...args);
 }
 
 class AriaValidationController {
@@ -5580,7 +5590,7 @@ class ReactiveControllerHost {
     }
 }
 
-const lmvzButtonCss = () => ` @layer           lmvz-ds.reset,           lmvz-ds.theme,           lmvz-ds.components,           lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 {   margin: 0; }  } :host {         button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --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     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   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:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  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); }  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, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    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     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     Router); }     display: contents; } ::slotted(*) {   --lmvz-component-color: var(--lmvz-button-color); } `;
+const lmvzButtonCss = () => ` @layer           lmvz-ds.reset,           lmvz-ds.theme,           lmvz-ds.components,           lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  } :host {         button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --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     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   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:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  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); }  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, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    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     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     Router); }     display: contents; } ::slotted(*) {   --lmvz-component-color: var(--lmvz-button-color); } `;
 
 class LmvzButton extends ReactiveControllerHost {
     get el() { return getElement(this); }
@@ -5678,7 +5688,7 @@ function joinPath(...parts) {
     return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
 }
 
-const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 {   margin: 0; }  } .sc-lmvz-card-h {            button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --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     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   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:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  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); }  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, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    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     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     Router); }     display: flex;   min-width: var(--lmvz-other-component-card-minwidth, 20.4375rem);   max-width: var(--lmvz-other-component-card-maxwidth, 21.6875rem);   flex-direction: column;   align-items: flex-start;    border-radius: var(--lmvz-semantic-border-radius-lg, 14px);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);   background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card {   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .top.sc-lmvz-card {   display: flex;   padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   flex-direction: column;   justify-content: center;   align-items: center;   align-self: stretch; } .bottom.sc-lmvz-card {   display: flex;   min-width: 150px;   padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));   flex-direction: column;   align-items: flex-start;   align-self: stretch; } .title.sc-lmvz-card {   margin: 0;   display: flex;   justify-content: center;   align-items: center;   align-self: stretch;    padding-bottom: var(--lmvz-global-s4, 4px);   overflow-wrap: break-word;   font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.94rem + 0.26vw, 2.25rem) / 1.2     Router); } .description.sc-lmvz-card {   display: flex;   margin: 0;   padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-items: flex-start;   align-self: stretch;   white-space: pre-line;   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .image-wrapper.sc-lmvz-card {   aspect-ratio: 4 / 3;   width: 100%;   background-size: cover;   background-position: center;   flex: 1 0 0;   align-self: stretch;   border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card {   margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem));   display: flex;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card {   display: flex;   justify-content: center;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   flex: 1 0 0; }`;
+const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  } .sc-lmvz-card-h {            button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --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     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   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:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  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); }  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, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    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     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     Router); }     display: flex;   min-width: var(--lmvz-other-component-card-minwidth, 20.4375rem);   max-width: var(--lmvz-other-component-card-maxwidth, 21.6875rem);   flex-direction: column;   align-items: flex-start;    border-radius: var(--lmvz-semantic-border-radius-lg, 14px);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);   background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card {   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .top.sc-lmvz-card {   display: flex;   padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   flex-direction: column;   justify-content: center;   align-items: center;   align-self: stretch; } .bottom.sc-lmvz-card {   display: flex;   min-width: 150px;   padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));   flex-direction: column;   align-items: flex-start;   align-self: stretch; } .title.sc-lmvz-card {   margin: 0;   display: flex;   justify-content: center;   align-items: center;   align-self: stretch;    padding-bottom: var(--lmvz-global-s4, 4px);   overflow-wrap: break-word;   font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.94rem + 0.26vw, 2.25rem) / 1.2     Router); } .description.sc-lmvz-card {   display: flex;   margin: 0;   padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-items: flex-start;   align-self: stretch;   white-space: pre-line;   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .image-wrapper.sc-lmvz-card {   aspect-ratio: 4 / 3;   width: 100%;   background-size: cover;   background-position: center;   flex: 1 0 0;   align-self: stretch;   border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card {   margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem));   display: flex;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card {   display: flex;   justify-content: center;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   flex: 1 0 0; }`;
 
 class LmvzCard {
     constructor(hostRef) {
@@ -5795,7 +5805,9 @@ const lmvzHeaderCss = () => `:host{display:flex;width:100vw;flex-direction:row;a
 
 class LmvzHeader extends ReactiveControllerHost {
     get el() { return getElement(this); }
-    validationEl = this.el;
+    get validationEl() {
+        return this.el;
+    }
     primarySlot;
     secondarySlot;
     secondaryNav;
@@ -5869,7 +5881,7 @@ class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'e5efeeb233de82c44e23302d20ebb488dfc6307b', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: '5e34efe17901ec990d09cd6764c37858ced1f021', class: "brand" }, hAsync("slot", { key: 'd30fa8bf8e77a6f02bad45dbad58fe9bbdc8b3f3', name: "brand" }, hAsync("img", { key: '074192bf3b5b4bcdb19302a954c56c5c61ee4b8f', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '663f04ecb9d6ea026f9476888b532f8e1c4e432c', "aria-label": "Hauptnavigation" }, hAsync("div", { key: 'ed0f492144c2b94822db02733c371329a95d8a1e', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: 'cbcf15f96b5b6c2133506902dc992c962e4873fb', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: '109ca0ea7ee937c9a1a4a510305595486ea48d94', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: 'b88d0da4772cf171854c369fa4e01131377c4f35', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: '4f024b948ea1ebce1ef914b1149420cd9ed817dd', class: "actions" }, hAsync("slot", { key: 'b1f6cff936e2a8fa5c0ff4e3bcc938a5c4f88e0c', name: "actions" }))));
+        return (hAsync(Host, { key: '1ac6c66802a59061742f677e0c3ab2fb1b12363b', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: 'ea534c09323539a0df13cb00d0aec382d3c81dd8', class: "brand" }, hAsync("slot", { key: 'b303a741a7d44869c4e53295ab13d606b5ed1d63', name: "brand" }, hAsync("img", { key: '7fd47fa34f3404016be40c8bd49ea28fddd58a8a', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '8e4f9db8b85f3dbea452bb309ae55bc1fac16dcb', "aria-label": "Hauptnavigation" }, hAsync("div", { key: '681c36337dcb3bc4e1833e602af4c642ab1c6acb', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: '6298235a3421ab083943f25a93c239ae686b8a20', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: '64b02f2562779e5e412e5076c66d9fcd2a0bb6f5', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '6e0589f700073ba93dc15f5873ca61e03eba5975', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: '50a84ddd9ed61f6c2a1fa32a91ccfdcfb1f3ae94', class: "actions" }, hAsync("slot", { key: 'e57d76343a0f21666479e9a1d3ae4e94843b403e', name: "actions" }))));
     }
     static get watchers() { return {
         "lmvzActiveNav": [{
@@ -9719,7 +9731,9 @@ const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.compone
 let inputIdCounter = 0;
 class LmvzInput extends ReactiveControllerHost {
     get el() { return getElement(this); }
-    validationEl = this.el;
+    get validationEl() {
+        return this.el;
+    }
     lmvzInput;
     internals;
     nativeInputElement;
@@ -9866,9 +9880,9 @@ class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (hAsync("div", { key: '79ab97e1e1d0217d5302ca1dea7087292ef19fc7', class: classNames('input-container', {
+        return (hAsync("div", { key: '50e70a8963db11234428d8753b4ac4a22424fe93', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, hAsync("div", { key: '9e59a33c261f610f93e1d6db3a07107f9300bbda', class: 'input-wrapper' }, hAsync("slot", { key: 'fadb3f5e49afa817014cdbd44774462b467827f4', name: 'before-input' }), hAsync("div", { key: '27d592787bb841fbd430c2e8ce0adc10f59b68ec', class: 'label-input-group' }, hAsync("label", { key: 'f83f154f356660ecafde254b5437ce6c42898b54', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: 'b51463179a2099ecd687ccd2480136379b0d0502', class: 'required-indicator', "aria-hidden": 'true' }, ' ', "*"))), hAsync("input", { key: '30d8308f286e82fba5d2ebdad972509c06294543', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hAsync("slot", { key: 'a8448a0827ce24194b21b8281d2b54eb76f24652', name: 'after-input' })), hAsync("div", { key: '79413854b97380812c84f3128d1db053d4154008', id: this.helperId, role: 'status' }, this.helperText || null), hAsync("div", { key: 'd34c6b421688934b69917f6da1f9bb22c220a6f9', id: this.errorId, role: 'alert' }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, hAsync("div", { key: '15fdd5c130ff915830b5a9055743d3493f02baf0', class: "input-wrapper" }, hAsync("slot", { key: '16dd0a7af0ea88b1b4f23e9c62bc20f28425b9ee', name: "before-input" }), hAsync("div", { key: '46afc3affa6fca9049da985fb65a2aab94b0d479', class: "label-input-group" }, hAsync("label", { key: '21c938202cdd21beb284b75d2451247a421a0218', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: '0bbba8b04242a1bee0bf0b5b0bc15c11f616cbac', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: '9af271fb9251e78706190a0e6cb8373ace8a10f7', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hAsync("slot", { key: 'db559809a6a5614b522f362c3cf6e97469fb4da4', name: "after-input" })), hAsync("div", { key: '191b364963a017f6b458c2d33fbc4a1b376b8379', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '058d13a869f6a3c49f94793eeacecb2b2e672e5c', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -9960,6 +9974,86 @@ class LmvzMenuItem extends ReactiveControllerHost {
     }; }
 }
 
+const chevronDownSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjMzMzQgOC42NjY2M0wxMi4wMDAxIDE3TDMuNjY2NzUgOC42NjY2MyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=';
+
+const lmvzSelectCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } .sc-lmvz-select-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);       --lmvz-internal-select-floating-label-top-offset: 0.375rem;    padding-top: var(--lmvz-internal-select-floating-label-top-offset);       --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-select-bg: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-select-bg-hover: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-select-text-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --lmvz-select-padding-x: var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --lmvz-select-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-select-height: 40px;   --lmvz-select-label-font-size: var(--lmvz-component-component-typography-body-sm-font-size, 0.75rem);   --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1);   --lmvz-select-label-minimized-padding-x: 4px;   --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%);   --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-selected, #0e7ab4);   --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); } .select-wrapper.sc-lmvz-select {   position: relative;   height: var(--lmvz-select-height); }  label.sc-lmvz-select {   position: absolute;   top: 50%;   left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-label-color);   line-height: normal;   white-space: nowrap;   pointer-events: none;   z-index: 2;   transform: translateY(-50%);   transform-origin: left top;   transition:     top 0.2s ease-out,     transform 0.2s ease-out,     opacity 0.2s ease-out,     padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select {   opacity: 0;   padding: 0; } label.floating-label.sc-lmvz-select {   top: var(--lmvz-select-label-top-offset);   transform: translateY(0) scale(0.85);   left: calc(var(--lmvz-select-padding-x) - 2px);   background-color: var(--lmvz-select-bg);   padding: 0 var(--lmvz-select-label-minimized-padding-x);   opacity: 1;   font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, div[aria-hidden='true'].sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select {   color: var(--lmvz-select-error-color);   margin-left: 2px;   display: inline-block;   line-height: 0;   vertical-align: middle; }  div[aria-hidden].sc-lmvz-select {   display: flex;   align-items: center;   gap: var(--lmvz-select-gap);   height: 100%;   padding: 0 var(--lmvz-select-padding-x);   border-radius: var(--lmvz-select-radius);   background-color: var(--lmvz-select-bg);   cursor: pointer;   position: relative;   z-index: 1;   transition: background-color 0.15s ease; } .sc-lmvz-select-h:not([disabled]) .select-wrapper.sc-lmvz-select:hover div[aria-hidden].sc-lmvz-select {   background-color: var(--lmvz-select-bg-hover); } .select-wrapper.sc-lmvz-select:focus-within div[aria-hidden].sc-lmvz-select {   outline: 2px solid var(--lmvz-select-focus-color);   outline-offset: 2px; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:first-child {   flex: 1 0 0;   font-size: var(--lmvz-component-component-typography-body-md-font-size, 0.875rem);   font-weight: var(--lmvz-global-font-weight-500, 500);   color: var(--lmvz-select-text-color);   line-height: 1.4;   letter-spacing: var(--lmvz-component-body-md-letter-spacing, 0px);   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; } div[aria-hidden].sc-lmvz-select > span.sc-lmvz-select:last-child {   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center; } img.sc-lmvz-select {   display: block;   width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); }  select.sc-lmvz-select {   appearance: none;   position: absolute;   inset: 0;   width: 100%;   height: 100%;   opacity: 0;   cursor: pointer;   z-index: 2;   border: none;   background: transparent;   margin: 0;   padding: 0; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select {   opacity: var(--lmvz-select-disabled-opacity);   pointer-events: none;   cursor: not-allowed; } [role='status'].sc-lmvz-select {   margin-top: 4px;   padding-left: var(--lmvz-select-padding-x);   font-size: var(--lmvz-select-label-font-size);   color: var(--lmvz-select-helper-color);   line-height: normal; }`;
+
+let selectIdCounter = 0;
+class LmvzSelect extends ReactiveControllerHost {
+    get el() { return getElement(this); }
+    get validationEl() {
+        return this.el;
+    }
+    selectId = `lmvz-select-${selectIdCounter++}`;
+    nativeSelectEl;
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.lmvzChange = createEvent(this, "lmvzChange");
+        this.addController(new AriaValidationController(this));
+    }
+    lmvzChange;
+    value;
+    label;
+    helperText;
+    disabled = false;
+    required = false;
+    name;
+    selectedLabel = '';
+    get hasValue() {
+        return Boolean(this.value);
+    }
+    componentDidLoad() {
+        this.syncSelectedLabel();
+        super.componentDidLoad();
+    }
+    handleValueChange(newValue) {
+        if (this.nativeSelectEl && this.nativeSelectEl.value !== (newValue ?? '')) {
+            this.nativeSelectEl.value = newValue ?? '';
+        }
+        this.syncSelectedLabel();
+    }
+    syncSelectedLabel() {
+        if (!this.nativeSelectEl)
+            return;
+        const idx = this.nativeSelectEl.selectedIndex;
+        this.selectedLabel = idx >= 0 ? (this.nativeSelectEl.options[idx]?.text ?? '') : '';
+    }
+    handleChange = (event) => {
+        const select = event.target;
+        this.value = select.value;
+        this.syncSelectedLabel();
+        this.lmvzChange.emit(select.value);
+    };
+    render() {
+        const hasValue = this.hasValue;
+        const shouldShowLabel = hasValue;
+        return (hAsync(Host, { key: '2e93e1107001237254f4f9d1a0bee5caf1ab2471' }, hAsync("div", { key: 'a5403bf851515d24b9a112661f457b9a6d1bc189', class: "select-wrapper" }, hAsync("label", { key: 'c0821beee587d720ef3bf185094645dd2d22b701', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '3659c7947caa419ccf21954da3efc24e5bac6963', "aria-hidden": "true" }, " *")), hAsync("div", { key: '65db22f89f119cbb96ed9de556fd60d7d1c5cce3', "aria-hidden": "true" }, hAsync("span", { key: 'e0e53b6fe461ab078a6268f2f0050a14722d15a4' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: '2f508f1d94c1437da702e81d2520f9df3f9e96ea', "aria-hidden": "true" }, " *")), hAsync("span", { key: '7bbc03b8f6665341874e6bcc02592bfdc7aa5861' }, hAsync("img", { key: '6453a928e8aa56bfd39b40d11685554bb37c16e4', src: chevronDownSvg, alt: "" }))), hAsync("select", { key: '40170929a774d271c1487e16d15410715471c06b', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && hAsync("option", { key: '5d29283095f87f4d3d38183c4a7e42f5b0e806e4', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: '56bf95ba5ab35768681eac7770e56560f6b57f88' }))), this.helperText && hAsync("div", { key: 'fbe735b28acdd21088d377635804781197c0b1b1', role: "status" }, this.helperText)));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+    static get style() { return lmvzSelectCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 774,
+        "$tagName$": "lmvz-select",
+        "$members$": {
+            "value": [1025],
+            "label": [1],
+            "helperText": [1, "helper-text"],
+            "disabled": [516],
+            "required": [516],
+            "name": [1],
+            "selectedLabel": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["disabled", "disabled"], ["required", "required"]]
+    }; }
+}
+
 registerComponents([
   LmvzAction,
   LmvzButton,
@@ -9969,6 +10063,7 @@ registerComponents([
   LmvzIcon,
   LmvzInput,
   LmvzMenuItem,
+  LmvzSelect,
 ]);
 
 exports.hydrateApp = hydrateApp;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@lmvz-ds/components",
   "private": false,
   "type": "module",
-  "version": "0.14.1",
+  "version": "0.15.2",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
   "volta": {
@@ -92,6 +92,10 @@
     "./lmvz-menuitem": {
       "import": "./dist/components/lmvz-menuitem.js",
       "types": "./dist/components/lmvz-menuitem.d.ts"
+    },
+    "./lmvz-select": {
+      "import": "./dist/components/lmvz-select.js",
+      "types": "./dist/components/lmvz-select.d.ts"
     }
   },
   "main": "dist/index.cjs.js",
@@ -157,14 +161,14 @@
     }
   },
   "dependencies": {
-    "@lmvz-ds/aria-validation": "^0.14.1",
+    "@lmvz-ds/aria-validation": "^0.15.2",
     "classnames": "^2.5.1",
     "effect": "3.19.14"
   },
   "devDependencies": {
-    "@lmvz-ds/design-tokens": "^0.14.1",
-    "@lmvz-ds/lib-styles": "^0.14.1",
-    "@lmvz-ds/styles": "^0.14.1",
+    "@lmvz-ds/design-tokens": "^0.15.2",
+    "@lmvz-ds/lib-styles": "^0.15.2",
+    "@lmvz-ds/styles": "^0.15.2",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "1.3.0",
     "@stencil/core": "4.43.2",
@@ -185,5 +189,5 @@
     "vite": "^7.3.1",
     "vitest": "^4.1.0"
   },
-  "gitHead": "12fadab9cddee154076ca7760e3008c230ac7bd4"
+  "gitHead": "e1ce65110d865c0b8932e3d543be5f2ef448184d"
 }

package/dist/cjs/index-Bp6Dd2i1.js

@@ -1,94 +0,0 @@
-'use strict';
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-var hasRequiredClassnames;
-
-function requireClassnames () {
-	if (hasRequiredClassnames) return classnames.exports;
-	hasRequiredClassnames = 1;
-	(function (module) {
-		/* global define */
-
-		(function () {
-
-			var hasOwn = {}.hasOwnProperty;
-
-			function classNames () {
-				var classes = '';
-
-				for (var i = 0; i < arguments.length; i++) {
-					var arg = arguments[i];
-					if (arg) {
-						classes = appendClass(classes, parseValue(arg));
-					}
-				}
-
-				return classes;
-			}
-
-			function parseValue (arg) {
-				if (typeof arg === 'string' || typeof arg === 'number') {
-					return arg;
-				}
-
-				if (typeof arg !== 'object') {
-					return '';
-				}
-
-				if (Array.isArray(arg)) {
-					return classNames.apply(null, arg);
-				}
-
-				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-					return arg.toString();
-				}
-
-				var classes = '';
-
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes = appendClass(classes, key);
-					}
-				}
-
-				return classes;
-			}
-
-			function appendClass (value, newClass) {
-				if (!newClass) {
-					return value;
-				}
-			
-				if (value) {
-					return value + ' ' + newClass;
-				}
-			
-				return value + newClass;
-			}
-
-			if (module.exports) {
-				classNames.default = classNames;
-				module.exports = classNames;
-			} else {
-				window.classNames = classNames;
-			}
-		}()); 
-	} (classnames));
-	return classnames.exports;
-}
-
-var classnamesExports = requireClassnames();
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
-
-exports.classNames = classNames;

package/dist/cjs/lmvz-button.cjs.entry.js

@@ -1,73 +0,0 @@
-'use strict';
-
-var index = require('./index-9ZJx0550.js');
-var index$1 = require('./index-Bp6Dd2i1.js');
-var reactiveControllerHost = require('./reactive-controller-host-DWpVosFu.js');
-var elementActivationController = require('./element-activation-controller-DC_6T0Rt.js');
-var component = require('./component-CRc6eHcV.js');
-require('./aria-loader-BBKbBZLq.js');
-
-const lmvzButtonCss = () => ` @layer           lmvz-ds.reset,           lmvz-ds.theme,           lmvz-ds.components,           lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 {   margin: 0; }  } :host {         button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --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     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   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:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  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); }  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, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    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     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     Router); }     display: contents; } ::slotted(*) {   --lmvz-component-color: var(--lmvz-button-color); } `;
-
-const LmvzButton = class extends reactiveControllerHost.ReactiveControllerHost {
-    get el() { return index.getElement(this); }
-    validationEl;
-    inheritedAttributes = {};
-    formEl = null;
-    formButtonEl = null;
-    lmvzActivation;
-    get ti() {
-        return 0;
-    }
-    scale = 'default';
-    variant = 'secondary';
-    disabled = false;
-    type = 'button';
-    form;
-    constructor(hostRef) {
-        super();
-        index.registerInstance(this, hostRef);
-        this.lmvzActivation = index.createEvent(this, "lmvzActivation");
-        this.addController(new reactiveControllerHost.AriaValidationController(this));
-        this.addController(new elementActivationController.ElementActivationController(this, {
-            localHandler: this.handleClick.bind(this),
-            keys: ['Enter'],
-        }));
-    }
-    connectedCallback() {
-        this.inheritedAttributes = component.inheritAriaAttributes(this.el);
-        super.connectedCallback();
-    }
-    renderHiddenButton() {
-        const formEl = (this.formEl = component.findFormByRef(this.form, this.el));
-        if (!formEl)
-            return;
-        const { formButtonEl } = this;
-        if (formButtonEl !== null && formEl.contains(formButtonEl))
-            return;
-        const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
-        newFormButtonEl.type = 'submit';
-        newFormButtonEl.style.display = 'none';
-        newFormButtonEl.disabled = this.disabled;
-        formEl.appendChild(newFormButtonEl);
-    }
-    submitForm(ev) {
-        if (this.formEl && this.formButtonEl) {
-            ev.preventDefault();
-            this.formButtonEl.click();
-        }
-    }
-    handleClick = (ev) => {
-        if (this.type === 'submit') {
-            this.submitForm(ev);
-        }
-    };
-    render() {
-        this.renderHiddenButton();
-        return (index.h(index.Host, { key: '3f3eda78349322ce5160d7aac1290a73f0adcd4a', "aria-disabled": this.disabled ? 'true' : null }, index.h("button", { key: 'b132404d8d5f5bf0fa7e845b562c953c5ceec36c', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: index$1.classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, index.h("slot", { key: 'ce63f7f1061ec9c3f10cbcfc67998ddbf3e04c3d' }))));
-    }
-    static get delegatesFocus() { return true; }
-};
-LmvzButton.style = lmvzButtonCss();
-
-exports.lmvz_button = LmvzButton;