@lmvz-ds/components 0.40.0 → 0.41.0

package/hydrate/index.js

@@ -6460,6 +6460,7 @@ function negate(delegate) {
 const variants = ['primary', 'secondary', 'tertiary', 'danger'];
 const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
 const chipSizes = ['default', 'small'];
+const cardSizes = ['large', 'small'];
 const linkTypes = ['internal', 'external'];
 
 const PRIORITY_MAP = {
@@ -9009,47 +9010,91 @@ 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('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } .sc-lmvz-card-h {               & {          & {           --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;   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;    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-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; }     & > * {     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;                               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));   }        &.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));   }   &.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));   } }     display: flex;   min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem);   max-width: var(--lmvz-card-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.5 Router); } .top.sc-lmvz-card {   display: flex;   padding: var(--lmvz-dimension-12-8, 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-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, 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.82rem + 0.78vw, 2.75rem) / 1.4     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.5 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('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } @layer lmvz-ds.reset { body {   margin: 0; }  h1, h2, h3, h4, h5, h6 {   margin: 0; }  *[hidden] {   display: none !important; }  hr {   height: 0;   border: none;   margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0;   border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); }  fieldset {   border: none;   margin: 0;   padding: 0; }  legend {   padding: 0;   display: block; }  } :host {         --lmvz-card-local-min-width: 320px;   --lmvz-card-local-max-width: 360px;      --lmvz-card-local-sm-width: 232px;    display: flex;   flex-direction: column;   align-items: flex-start;   min-width: var(--lmvz-card-local-min-width);   max-width: var(--lmvz-card-local-max-width);    border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0);   background: var(--lmvz-semantic-color-surface-primary, #ffffff);   box-shadow: 0 var(--lmvz-semantic-shadow-l1-1-position-y, 2px) var(--lmvz-semantic-shadow-l1-1-blur, 4px) 0 var(--lmvz-semantic-color-shadow-l1-default, rgba(120, 120, 128, 0.08));   margin-bottom: var(--lmvz-component-card-lg-margin-bottom, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); } :host([size='small']) {   width: var(--lmvz-card-local-sm-width);   min-width: 0;   max-width: none;   border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);   margin-bottom: var(--lmvz-component-card-sm-margin-bottom, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); } * {   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.5 Router); } .image {   width: 100%;   aspect-ratio: 4 / 3;   object-fit: cover;   align-self: stretch;   border-top-left-radius: var(--lmvz-component-wrapper-md-border-radius, 18px);   border-top-right-radius: var(--lmvz-component-wrapper-md-border-radius, 18px); } :host([size='small']) .image {   border-top-left-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px);   border-top-right-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px); } .content {   display: flex;   flex-direction: column;   align-items: flex-start;   align-self: stretch;   gap: var(--lmvz-component-spacing-xs, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));    padding: var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); } :host([size='small']) .content {   gap: var(--lmvz-component-spacing-2xs, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem));   padding: var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); } .title-block {   display: flex;   flex-direction: column;   align-items: flex-start;   align-self: stretch;   gap: var(--lmvz-component-spacing-2xs, clamp(0.13rem, 0.09rem + 0.13vw, 0.25rem)); }  .card-default-title {   margin: 0;   overflow-wrap: break-word;   font: var(--lmvz-typography-heading-lg, 500 clamp(1.13rem, 1.03rem + 0.39vw, 1.5rem) / 1.5     Router); } :host([size='small']) .card-default-title {   font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5     Router); }  ::slotted([slot='card-title']) {   margin: 0;   overflow-wrap: break-word; }  :host([size='small']) ::slotted([slot='card-title']) {   font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5     Router); } .description {   margin: 0;   align-self: stretch;   white-space: pre-line;   font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } :host([size='small']) .description {   font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router); }  slot[name='chip'] {   display: contents; } .actions {   display: flex;   align-items: center;   align-self: stretch;      padding-top: var(--lmvz-component-spacing-md, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); }  lmvz-button.action {   flex: 1 0 0; } `;
 
+const HEADING_TAGS = new Set(['HEADER', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
 class LmvzCard {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.primaryAction = createEvent(this, "primaryAction", 7);
+        this.lmvzCardAction = createEvent(this, "lmvzCardAction", 7);
     }
+    get el() { return getElement(this); }
+    titleSlotElement;
+    warnedCases = new Set();
+    size = 'large';
     cardTitle;
-    imageUrl;
     description;
-    primaryActionLabel = '';
-    primaryAction;
+    imageUrl;
+    imageAlt = '';
+    actionLabel;
+    lmvzCardAction;
+    normalizeSize(value) {
+        const normalizedSize = cardSizes.includes(value) ? value : 'large';
+        if (normalizedSize !== this.size) {
+            this.size = normalizedSize;
+        }
+    }
+    componentWillLoad() {
+        this.normalizeSize(this.size);
+    }
+    componentDidLoad() {
+        const titleSlot = this.el.shadowRoot?.querySelector('slot[name="card-title"]');
+        titleSlot?.addEventListener('slotchange', () => this.checkTitleContent());
+        this.checkTitleContent();
+    }
     get fallbackImage() {
-        return createAssetUrlSafely('card-placeholder.svg');
+        return String(createAssetUrlSafely('card-placeholder.svg'));
     }
-    _onPrimaryClick() {
-        this.primaryAction.emit();
+    handleActionClick = () => {
+        this.lmvzCardAction.emit();
+    };
+    get slottedTitleElement() {
+        return this.titleSlotElement?.assignedElements()?.at(0);
     }
-    _onOverflowClick(event) {
-        console.log(event);
+    checkTitleContent() {
+        if (!isAriaValidationEnabled())
+            return;
+        const slotted = this.slottedTitleElement;
+        if (slotted) {
+            const tag = slotted.tagName;
+            if (!HEADING_TAGS.has(tag)) {
+                this.warnOnce(`non-heading:${tag}`, `[lmvz-card] Element <${tag.toLowerCase()}> slotted into "card-title" is not a heading. Slot a heading element (h2-h5) instead.`);
+            }
+        }
+        else if (!this.cardTitle) {
+            this.warnOnce('missing-title', '[lmvz-card] Neither a "card-title" slotted heading nor a non-empty "cardTitle" prop was supplied.');
+        }
+    }
+    warnOnce(key, message) {
+        if (this.warnedCases.has(key))
+            return;
+        this.warnedCases.add(key);
+        console.warn(message);
     }
     render() {
-        const imgStyle = {
-            backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
-        };
-        return (hAsync(Host, { key: '1dd819fd7c752af8d15001c08f7f60c6ea7278b9', role: "article" }, hAsync("div", { key: 'e0cc822e627b6bbe665e4faa705cc46a09bac7c6', class: "top" }, hAsync("div", { key: 'db79cb5a67ebdd6097f985e4b4bd27665b6329ef', class: "image-wrapper", style: imgStyle }, hAsync("div", { key: '90facc8595ddbbf31e3768faa8254a82ab8d3e65', class: "chip-slot" }, hAsync("slot", { key: 'cb2e6a1053aae2b2ca90c52c175e3c4174c89d23', name: "chip" })))), hAsync("div", { key: 'cb11069a329385178677e92d08044e0fe8e5b982', class: "bottom" }, hAsync("header", { key: '1e6076352124ca03de2fb13c17a565b4f492567e' }, hAsync("h2", { key: '73f11099fb751bd4f967dbe49b79763b6a8268f3', class: "title" }, this.cardTitle)), hAsync("p", { key: '36cf87b4c2004bff1e65feedd13e137d67115de3', class: "description" }, this.description), hAsync("div", { key: '6c1d82f4968ce8252307858e6ad0681274f06397', class: "actions" }, hAsync("button", { key: '0366e0caaf9235a3eaf7bfcab116e6a828fb248d', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), hAsync("button", { key: '4f435e79d75a621d6fe065471a915b55308ad15d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, hAsync("span", { key: '7dec97e0b0ca58c40fc5308cc7863acafa8c5147', class: "icon-placeholder" }, "..."))))));
+        return (hAsync(Host, { key: '21ac0a567bb88d05d247cc3150bf2e7ce26972c5', role: "article" }, hAsync("img", { key: '6cea11ee015059d5537ab64c7cbb1655ac984cb1', class: "image", src: this.imageUrl ?? this.fallbackImage, alt: this.imageAlt, loading: "lazy", decoding: "async" }), hAsync("div", { key: 'cd29132d8268fb5a025cde5c33a858982c8eaaed', class: "content" }, hAsync("div", { key: '0d353a46cae60d81417e5280b39020b2234ad304', class: "title-block" }, hAsync("slot", { key: '4f2734a257ef877d258a717e23855f521c5132a6', name: "card-title", ref: (el) => (this.titleSlotElement = el) }, this.cardTitle && (hAsync("header", { key: '7d526caba45dde6b13bee023e60943711347258a', role: "heading", class: "card-default-title" }, this.cardTitle))), this.description && hAsync("p", { key: '18c3eac26562a592baa29d75674737d11f57beac', class: "description" }, this.description)), hAsync("slot", { key: 'd0d9c40ca8501b0fdfa9d589eeb05692892316a2', name: "chip" }), this.actionLabel && (hAsync("div", { key: '4bd5d9233c0ba1dcda6bebdeff89adbbfe37e4b1', class: "actions" }, hAsync("lmvz-button", { key: '6cefc7ad2859d457ad11b3f4edb1300ba664ef63', class: "action", variant: "secondary", scale: this.size === 'small' ? 'small' : 'default', onLmvzActivation: this.handleActionClick }, this.actionLabel))))));
     }
     static get assetsDirs() { return ["../../assets"]; }
+    static get watchers() { return {
+        "size": [{
+                "normalizeSize": 0
+            }]
+    }; }
     static get style() { return lmvzCardCss(); }
     static get cmpMeta() { return {
-        "$flags$": 774,
+        "$flags$": 777,
         "$tagName$": "lmvz-card",
         "$members$": {
+            "size": [1537],
             "cardTitle": [1, "card-title"],
-            "imageUrl": [1, "image-url"],
             "description": [1],
-            "primaryActionLabel": [1, "primary-action-label"]
+            "imageUrl": [1, "image-url"],
+            "imageAlt": [1, "image-alt"],
+            "actionLabel": [1, "action-label"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["size", "size"]]
     }; }
 }
 
@@ -9180,7 +9225,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
         this.nativeError = true;
     }
     render() {
-        return (hAsync(Host, { key: '089b23f8034fa089f358cc37923182c34f528cd2' }, hAsync("div", { key: '0af011ebf062332c330b49fa3076828204433ac4', class: "pill" }, hAsync("input", { key: 'a483a8c5bbe1d6da3cfab63ce32ad2e6392911ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), hAsync("span", { key: 'f21d34ab625c7eef23bd2761b399e8770cd62275', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: 'de2680ea17f34ab0124c529d88d4191c97d0a4c5', class: "indicator", innerHTML: CHECKMARK_SVG$1 })), hAsync("span", { key: '1b2d24e43603033a5a77340164e002de326db11a', class: "content" }, hAsync("label", { key: 'b18f17abb4459b3783dc41d0031f4b26795fdcf5', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: 'f32591c55fcc88d130815780a9999fcb235afd88', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: '076489f5baadab07d95fc787e9ac71bae0a6ab68', onClick: this.retargetInnerClicks.bind(this), class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (hAsync(Host, { key: 'df48e8af0b992d4f2c564aae67dbd42b6454f2c1' }, hAsync("div", { key: 'fe1256e373ee98cc26ca9031654d4d01f10b96e7', class: "pill" }, hAsync("input", { key: '580af189cb0069dd057464efd8c876c1a2dd3826', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), hAsync("span", { key: '4a6b3522aa1a43f3c0a7ff203fb5791876555954', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: '3a857015118d911832cdaa1287cee4c63f84afb2', class: "indicator", innerHTML: CHECKMARK_SVG$1 })), hAsync("span", { key: 'aa543c4c37cf220084b3cce423e1d0e48b5c344f', class: "content" }, hAsync("label", { key: '26c8551de719bdd99cce39b9129b59643f2aa44e', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: '004ead4527953b10b4ab6d89366159d7727320b2', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: '0fa0dcfdf2fe61d510bfe9f0c4f8d16a341f97d7', onClick: this.retargetInnerClicks.bind(this), class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -9281,7 +9326,7 @@ class LmvzChip extends ReactiveControllerHost {
         }
     }, 500);
     render() {
-        return (hAsync(Host, { key: '63581b0c567d208b200464e9985ac32d97c1ad43', type: this.type, size: this.size }, hAsync("slot", { key: '7aa740cc80b400893dcbe7021d5513d3f1ca476b', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: 'da5b9e272becef812b4914bf25b451da16bb9012', class: "content-overflow-wrapper" }, hAsync("slot", { key: 'a925dcd383c86dbea63790b5623d159472b6684c', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: 'e018eafb75b85068c992e9f91c4fac89a4c95153', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
+        return (hAsync(Host, { key: '2dcc9ccddd24f1db7ec65aeed24a1646cee80c76', type: this.type, size: this.size }, hAsync("slot", { key: '756d785d9bdfdaba8c35641afee0743ff343a184', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: '3df490bd3149acca605da7d7910be11b80585adf', class: "content-overflow-wrapper" }, hAsync("slot", { key: '5c252427faffaea5a95618df4afced110ff15703', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: '493c1ecd319d9afe0896339320cad67aa37289ab', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
     }
     static get watchers() { return {
         "type": [{
@@ -12036,9 +12081,9 @@ class LmvzDatepicker {
     render() {
         const validationLabels = getValidationLabels(this.locale);
         const popoverLabel = this.label ? `${this.label} ${validationLabels.popoverSuffix}` : undefined;
-        return (hAsync(Host, { key: 'af9d7f075bf97d7eb58c6557f43cf8a245d5f712' }, hAsync("lmvz-input", { key: 'eef4be58281b8356d443c65c5cf6451192e70f75', ref: (el) => {
+        return (hAsync(Host, { key: '55c1293d79c3c9a1ca591e81c693797194498967' }, hAsync("lmvz-input", { key: '054528d324a2fd99802659a41796da362412bcd9', ref: (el) => {
                 this.inputEl = el;
-            }, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.nativeError, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, hAsync("lmvz-icon", { key: 'fc39ef14720522a8089d33321b918e5577a36cc2', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), hAsync("lmvz-popover", { key: '0076c57da02c7c9d0fcb53584f9dc4127317d6a5', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, hAsync("div", { key: '4c1e716e52a5d9ed75155dded3c2c39649e1e844', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
+            }, label: this.label ?? '', placeholder: this.effectivePlaceholder, helperText: this.helperText, errorMessage: this.errorMessage, error: this.nativeError, disabled: this.disabled, readonly: this.readonly, required: this.required, value: this.inputText, autocomplete: "off", onLmvzInput: this.handleInputTextChange, onKeyDown: this.handleInputKeydown }, hAsync("lmvz-icon", { key: 'e109a59ba562ff0db88442119725cb38cc01ed6f', slot: "after-input", icon: CALENDAR_ICON, "aria-hidden": "true" })), hAsync("lmvz-popover", { key: 'df9046ff443232be3036fbb9ad2646681e7be697', anchor: this.inputEl, open: this.open && !this.disabled, autoFocus: false, size: "md", label: popoverLabel, onLmvzOpen: this.handlePopoverOpen, onLmvzClose: this.handlePopoverClose }, hAsync("div", { key: 'eea613edc10157650e2e11698afdcc85353bff49', part: "panel", class: "datepicker-panel" }, this.renderHeader(), this.renderGrid()))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -12188,7 +12233,7 @@ class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'a72c860d7f67c9631c462c0abcc798bb142dfc55', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: '4ed87264d201c513bce284536793692424ed864b', class: "brand" }, hAsync("slot", { key: '9291d81d7f8a630007b8ad827a16ebea7222b9d2', name: "brand" }, hAsync("img", { key: '77da99409f40d93e4a2d190cbb2a8857f1e81c36', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '3c40c04bb23524ae58e391a54b044e225a25ad07', "aria-label": "Hauptnavigation" }, hAsync("div", { key: '207b8032d3d11b4bfacb6e7fcffb683ad5da8ccc', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: '8ae67a57ac7b6bb6083c469a857542e31b0c2294', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: '86b9696c95e9ae0e3843fa1607f268dcae8cb279', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '67966de33555dc26ac2dc51fc8a85d456a2e8e85', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: 'bfb2831144cee723c3182d96d64f44be1cc5a78b', class: "actions" }, hAsync("slot", { key: '6956b81fa8ed6c446edc5f7d9708462b39bc8cbb', name: "actions" }))));
+        return (hAsync(Host, { key: '427f1fe61ea8809a17dc08518c3dca7218cd2c9b', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: 'b95c5d269c18001592b4ea853b9c945eeedfda07', class: "brand" }, hAsync("slot", { key: 'd856c174220f6e17b1aa977745bd057f7ca12625', name: "brand" }, hAsync("img", { key: '554896aadccb818f06d01ad88f9be96a1afa615a', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '414d208fe60eb4dd0c1400727b4198b81fc4a041', "aria-label": "Hauptnavigation" }, hAsync("div", { key: '608ea0c8ddcfef024505505ae7f91f644bfc1298', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: 'b5de644c07b4ef809c7afa377bed5e48356fc93a', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: 'a6e308da89df8b705a0d03218778bc36fb0cbaf2', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: 'cf78a68329eadb96ad656ed81d8b3c72db582fc9', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: 'f7a00431635969cd0f3b29e52d002ec67c8dae04', class: "actions" }, hAsync("slot", { key: '6ed3b3d6ef85646742f0a2cf5267464f06e20a05', name: "actions" }))));
     }
     static get watchers() { return {
         "lmvzActiveNav": [{
@@ -12257,7 +12302,7 @@ class LmvzIcon extends ReactiveControllerHost {
         super.componentDidRender();
     }
     render() {
-        return hAsync(Host, { key: 'be6032d11399289c3baddd63ebc7d9e1fb98b773', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+        return hAsync(Host, { key: '0dd3824c964cb73ba4758afbb8768535b7bf0820', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
     }
     waitUntilVisible(callback, rootMargin = 50) {
         {
@@ -12531,9 +12576,9 @@ class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (hAsync("div", { key: '85f498773efdad53d309e8b1eb5b85ea0601277e', class: classNames('input-container', {
+        return (hAsync("div", { key: '34535f927cceb5d28107f71a995b92f357f68df0', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, hAsync("div", { key: 'eb74bdd8170014c2a17c6046878b0f4d61fece25', class: "input-wrapper" }, hAsync("slot", { key: 'ceb3acb5dcb641900caf9a22f43295d1c407ad2e', name: "before-input" }), hAsync("div", { key: 'a7f626addd83cbf79b435989bec94f777818794e', class: "label-input-group" }, hAsync("label", { key: '391e2d1f873f9aef9bd9e7f14b006d898a699abe', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: '691251a0efb1a60fd5e53447a6204c13008545a1', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: 'f37d3d7d5076636638b2da59cca91c1cedc7504a', 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, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), hAsync("slot", { key: '22b2be3072fc274bbeff4d92f25dccc5ea50c4d0', name: "after-input" })), hAsync("div", { key: '95f28aad61a5d7ea45fb4479801097036652b08f', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '9ea8420b336b33a0fd3b7e53cc4efa44983cbdc3', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, hAsync("div", { key: 'a1e6ef88163bb7c081b295f11194ffc10a0754c4', class: "input-wrapper" }, hAsync("slot", { key: '6634e9671691bd2a18513571706028994fe27efe', name: "before-input" }), hAsync("div", { key: 'e5299fed299b5b5a29ae9f1da71c5294f264da05', class: "label-input-group" }, hAsync("label", { key: '21cf26ec1ef8af81f22b0333299b21268063cda4', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: '2f8ab042d8a89bbfdd37c8083d83a4b5298aa447', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: '35551a0a618eb2b553449e7e59b0190ff026cdb4', 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, onBlur: this.handleBlur, onInvalid: this.handleInvalid })), hAsync("slot", { key: '7c8e459eefd966d4b1227e233a6c599907240545', name: "after-input" })), hAsync("div", { key: '66a53450185cb93f3c6c98a222b1e201aa5a6d03', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '587940e277570a5cc9bba9cfbbd1c42daa512ad1', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -12640,7 +12685,7 @@ class LmvzLink {
         const rel = this.computeRel();
         const iconSvg = this.type === 'external' ? EXTERNAL_SVG : ARROW_RIGHT_SVG;
         const isBlank = this.target === '_blank';
-        return (hAsync(Host, { key: 'ee4f5c107243ff858f9189840e56a0525fdac782' }, hAsync("a", { key: '28229373bec276579c2bb7b9fcf254872baae9e8', href: this.computeHref(), target: this.target, rel: rel }, hAsync("slot", { key: '7c58f3f7501e457ee4a35d2a9f2bf80ed0c33fb0' }), hAsync("lmvz-icon", { key: '14784743d148d57e7c83da0f92ba96e4bb3a30a1', "aria-hidden": "true", icon: iconSvg }), isBlank && hAsync("span", { key: 'f72adde57b462282d1a8313e2eb06cf6b68c2697', class: "sr-only" }, this.externalLabel))));
+        return (hAsync(Host, { key: 'af31a58caac2d4ccb4c2a72d356e85bda7c61b86' }, hAsync("a", { key: 'c677c43497f214259863cf8306fa2d838bcd9bef', href: this.computeHref(), target: this.target, rel: rel }, hAsync("slot", { key: '63f18a9089a6864c513c3ef01c68268a6b0dbd60' }), hAsync("lmvz-icon", { key: '115472b9eda8f55c27bc551a9b1988e9086b501a', "aria-hidden": "true", icon: iconSvg }), isBlank && hAsync("span", { key: 'cf1d70fcb80fe0e61eeceeb41b43ab0f7211ea02', class: "sr-only" }, this.externalLabel))));
     }
     static get delegatesFocus() { return true; }
     static get watchers() { return {
@@ -12688,7 +12733,7 @@ class LmvzMenuItem extends ReactiveControllerHost {
         this.addController(new ElementActivationController(this));
     }
     render() {
-        return (hAsync(Host, { key: 'cd5814d6bcfa9b0f5b1b2f5108ce0fc65722b909' }, hAsync("slot", { key: 'b503b252c95bc09ca4b888d4576badd3976292e9', ref: (e) => (this.validationSlot = e) })));
+        return (hAsync(Host, { key: '555ab8db190d0b80b47d903966e880aed51c31d4' }, hAsync("slot", { key: '3987fb4644d8d2c47e936c0413e058a9221a2ad7', ref: (e) => (this.validationSlot = e) })));
     }
     static get style() { return lmvzMenuitemCss(); }
     static get cmpMeta() { return {
@@ -12806,7 +12851,7 @@ class LmvzMessage {
     }
     render() {
         const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
-        return (hAsync(Host, { key: '1c45cf27f057535ffff047548a3d6681dd487d3c', role: role }, this.leadingIcon && hAsync("span", { key: '8efab69f677dfaa06d333aa304479e17e6d60ad6', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), hAsync("span", { key: '2e88e9053444e2aae23341b7cba923c7c440ff64', class: "message" }, hAsync("slot", { key: 'd6b0ee6c95846a1de97e0e6ed707001c29c78c92', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (hAsync("lmvz-button", { key: 'c55e38e274e98c8ac584ae16520fb0cab5e11d17', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (hAsync("lmvz-button", { key: '1ae69fefbb23cd8a219aee1d624e9d7779ae0c08', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, hAsync("lmvz-icon", { key: '572c5b3309a1b1b9798dc6fc3f4ad11d0a354ebc', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
+        return (hAsync(Host, { key: '45bba3aa5050fcc993414c5d25b436c9a78b1b67', role: role }, this.leadingIcon && hAsync("span", { key: '936327839c37f2aac83cca9db780dda0e47c2a42', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), hAsync("span", { key: 'e05203642419ad734285495205625567e5110c5f', class: "message" }, hAsync("slot", { key: '7ced34a5a75a83707cee108ce0e964f815feaa61', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (hAsync("lmvz-button", { key: '705cd8ff5171d05f459ce09aaa10548de8362710', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (hAsync("lmvz-button", { key: '90377bfb5e8fb69ad5dff323ca88d2ba9d0c444c', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, hAsync("lmvz-icon", { key: '0064004bcb5ef5d9a3bf784f110b3cf0d267017d', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
     }
     static get style() { return lmvzMessageCss(); }
     static get cmpMeta() { return {
@@ -13050,7 +13095,7 @@ class LmvzModal extends ReactiveControllerHost {
         this.hasHeader = this.hasAssignedContent(this.headerSlot);
     };
     render() {
-        return (hAsync(Host, { key: '9eb1aa89e4c682586d10291e2a8a2523b8fd17f7' }, hAsync("dialog", { key: '477c537328622f85759dc72a0c499d56e3d5e345', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: 'b9fe9cb306938a117002e5213740ea20269080b8', class: "modal-shell" }, hAsync("header", { key: '34d0cd8078d55d98ec526843f02710044663de70', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: '1408f0e0875f5e0508ad0f5682f4879a93df65df', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: '735c1757962e4f3804700a4669d0b49f2d11fb16', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: 'b0eb76cde508fb434023abdc0f764e1b809b6447', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onLmvzActivation: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '9f978d3117a4046202c3ba1df39aa0c7afc7ee28', icon: closeIconSvg }))), hAsync("div", { key: '46ffd7e7315099189c0a2499d17bdeabeb0e46e5', class: "body" }, hAsync("slot", { key: '095c3353f2ea00f6fa765ac0972ee0123f8e4154' })), hAsync("footer", { key: '5b092b00f10acede66d0fac53f01584ecf528418', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, hAsync("lmvz-button-group", { key: 'ce312e1b1c3407838b8704f20393e7120d6338f9', ref: (element) => (this.buttonGroupEl = element) }, hAsync("slot", { key: '6246782cbee1cc440cfdaf45dac36655f19c972e', name: "actions" })))))));
+        return (hAsync(Host, { key: 'eaae4e7e1ecf8fb11db7582ffa3d1461a718a8d0' }, hAsync("dialog", { key: '11d1bdd9cd94afd82a13f5328234ad8877e9d28b', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: '1c21a9266be21246ba8cbc55ac4559f7511294ff', class: "modal-shell" }, hAsync("header", { key: '4077ec5bd9e434d954982884ab3306fc9db6d043', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: '82476490860365ba5ed3e8f47af7a85084e01693', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: '59dd145e07c6f310e8490ac7fa0e3d7577929a5d', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: '66e53dca4eab1503f53e4d069d1e115a77d3672e', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onLmvzActivation: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '23579ef59870459b523e4adc20df3954567b31a5', icon: closeIconSvg }))), hAsync("div", { key: '62d2d2288ac84c945b5f0c070b3c553815572e69', class: "body" }, hAsync("slot", { key: 'e511ff34da74c38981ee54d0e8a5019adfda2a7e' })), hAsync("footer", { key: '1a921cf63e446f434a6686de39e8e653eb1c30c1', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, hAsync("lmvz-button-group", { key: '4280d47bb1f9bcc390253ff4286f25c4117612a2', ref: (element) => (this.buttonGroupEl = element) }, hAsync("slot", { key: 'a4a228ee4dbb1064cc4d7d005f202d69c66b8505', name: "actions" })))))));
     }
     static get watchers() { return {
         "open": [{
@@ -14612,7 +14657,7 @@ class LmvzPopover {
         this.closureController?.abort();
     }
     render() {
-        return (hAsync(Host, { key: '83529aeac05cdc706193fa8bbbcc8f8672756111', role: this.containerRole, "aria-label": this.label || undefined }, hAsync("div", { key: '97c255e788806c0dec2f4ed04c6fc815150912a2', part: "container", class: `container lmvz-wrapper-card-${this.size}`, ref: (el) => (this.containerEl = el) }, hAsync("slot", { key: 'e4ea69d179557e7d34f1475c07c9284ea8d10a67', ref: (el) => (this.slotEl = el) }))));
+        return (hAsync(Host, { key: '559167785de0a69c12e436740b6b17a206f6155c', role: this.containerRole, "aria-label": this.label || undefined }, hAsync("div", { key: 'deaeb8ac94edd8eac38748cbc01e8f335a8fe7a1', part: "container", class: `container lmvz-wrapper-card-${this.size}`, ref: (el) => (this.containerEl = el) }, hAsync("slot", { key: '87dd843041852b3d5b8b85497c0f4e4eb6791a45', ref: (el) => (this.slotEl = el) }))));
     }
     static get watchers() { return {
         "open": [{
@@ -15041,7 +15086,7 @@ class LmvzRadio extends ReactiveControllerHost {
         this.nativeInput?.click();
     }
     render() {
-        return (hAsync(Host, { key: 'f1fdc1167c4e59c2524e1e545c3382ca32853788' }, hAsync("input", { key: 'c1b711444475ed401766cc5827eeaec0c46b62cf', type: "radio", id: this.radioId, value: this.value, checked: this.checked, disabled: this.disabled, autoFocus: this.autofocus, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), hAsync("span", { key: 'b25e623269df05bdf8159e72da4df2e0bfb5d7bc', class: "circle", "aria-hidden": "true" }, this.checked && hAsync("span", { key: '93d12890c7ba0abe203c63953ea1115aee37d7a0', class: "dot" })), hAsync("span", { key: '44dcfdc4e7ee3820624b0d02a438139f45bb8733', class: "content" }, hAsync("label", { key: 'd0547cd5e79642b298da155c9937715224b52cae', htmlFor: this.radioId }, this.label), hAsync("span", { key: 'a9df5dd8a775a2f7422d5bac296869f88553e33f', onClick: this.retargetInnerClicks.bind(this), "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+        return (hAsync(Host, { key: '0a3f2ee5c2aa0c27e2fc6c6482f463915a8475d1' }, hAsync("input", { key: '707ee1a470c2a8b90dff54400490ae9366ab97ac', type: "radio", id: this.radioId, value: this.value, checked: this.checked, disabled: this.disabled, autoFocus: this.autofocus, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), hAsync("span", { key: '772a52ff4817b2332312bc597feee0de4fb3be4e', class: "circle", "aria-hidden": "true" }, this.checked && hAsync("span", { key: '600e398709956b6cb3e95b2119268f805771f71e', class: "dot" })), hAsync("span", { key: '446ee6d901dcbc2143f9772736746255ef2885db', class: "content" }, hAsync("label", { key: '4ec55b6be95c847d564ec8dfff3486068f44580c', htmlFor: this.radioId }, this.label), hAsync("span", { key: '678dcd677d22fb2c6c8983be8cb69100fc396378', onClick: this.retargetInnerClicks.bind(this), "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -15592,7 +15637,7 @@ class LmvzSelect extends ReactiveControllerHost {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
         const showChips = this.multiple && hasValue;
-        return (hAsync(Host, { key: '77cb72cdce635eae0f9a29cb9121dd7d16955219' }, hAsync("div", { key: 'cc6c04090457df17c6a9e74354fc21875d378642', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, hAsync("label", { key: '8dc52469a7b3333578494b2f7bdb4e870044ac6c', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && hAsync("span", { key: 'c198fb4944e46c5219a42e16ae24dc3c414b1b00', "aria-hidden": "true" }, " *")), hAsync("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 }, hAsync("span", { key: 'c61c136bfaab211572a988d3b16c2746f80b1ac6' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: '24201baae63a4f6fdaef2441d304cd8f69430fb5', "aria-hidden": "true" }, " *")), hAsync("span", { key: '547c61dfdc83f89cf7cd0582c785b9552190e533', "aria-hidden": "true" }, hAsync("svg", { key: 'f6a0cb7c77682aec03cd146e84712c17df5ff910', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("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" })))), hAsync("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()), hAsync("div", { key: 'c4a313fe4b6c53678a4f3dafced210f00e3c93d5', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, hAsync("slot", { key: '1fb311e6938812e68ae5155184af2e2ba7c19861', onSlotchange: this.handleSlotChange }))), this.helperText && (hAsync("div", { key: 'accade9aae4cb2e23fa1d8f62dd9b6efdf3ddfb5', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (hAsync("div", { key: 'faa5eba225adda67b44b8a63ae98a678fddf49ad', id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (hAsync(Host, { key: 'bcb5531eeb0c12cfebb0aacf01837004d95ab651' }, hAsync("div", { key: '0df56d60126a321bc3e5070ecbacd29ef0653cea', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, hAsync("label", { key: '9e0dcdb5134b85b38ec41c2c83a70e8f4aea9429', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '1c4a3499ef403cfff96ffd391255a3c1c175a80b', "aria-hidden": "true" }, " *")), hAsync("div", { key: 'fe9f97ec6c476525e98efb9c2a0838697d7f2193', 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 }, hAsync("span", { key: 'e769fcba8c5e31289f333dc53dcbc3a7bdce44e7' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: 'b5e0cd9a9ad4506f058508f6ee9957debe9e1bd2', "aria-hidden": "true" }, " *")), hAsync("span", { key: 'e07c1ba4a99b1b72144a17bff940e08f2d93db2f', "aria-hidden": "true" }, hAsync("svg", { key: 'eaa136b668baacb7bb6a4ad2e46a0f694a5b54b9', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '70744054f8ec445361551899ad637b54ace6322f', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), hAsync("lmvz-popover", { key: '330d09ff1d7160c1f7471b208acb8005e7ea60c7', 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()), hAsync("div", { key: '88e327fdb04ae5ca89ba2a4254f9807a8a051051', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, hAsync("slot", { key: '3988124d6358464ba531d498f2e486117fe4c3ad', onSlotchange: this.handleSlotChange }))), this.helperText && (hAsync("div", { key: 'ffd36af1cf02a807262ff7b7df6fe4be0cb82ed9', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (hAsync("div", { key: '52d7f19bb6c7618d1ad7cd24c3c73487484d4542', id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -15742,7 +15787,7 @@ class LmvzSnackbar {
         this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
     };
     render() {
-        return (hAsync(Host, { key: 'f58c7657bf5511c72930dfc54ace4af1ff7f3554', class: this.animationClass }, hAsync("lmvz-icon", { key: '8632b42b9b246bf58480fb17ca336ce5f0883845', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), hAsync("span", { key: '4ca56d2cdf29415c6d21cc50399dc28aebb8de99', class: "message" }, this.message), this.actionLabel && (hAsync("lmvz-button", { key: 'd09043056b968421143aa180f464effcd7b781fe', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
+        return (hAsync(Host, { key: '153859f89cb76e7119db0315208b7382ebe2ad9e', class: this.animationClass }, hAsync("lmvz-icon", { key: 'f6a59adba28f3d0d0e50717f1d1010d7c5b391fa', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), hAsync("span", { key: 'f0b60bd0787add320b3086841ea9c5b542c05f04', class: "message" }, this.message), this.actionLabel && (hAsync("lmvz-button", { key: 'acb89693f29db072e98401fdb2007e149aeba044', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
     }
     static get watchers() { return {
         "status": [{
@@ -15779,7 +15824,7 @@ class LmvzSpinner {
     ariaLabel;
     render() {
         const hasLabel = !!this.ariaLabel?.trim();
-        return (hAsync(Host, { key: 'cf60fcf652f377a66596cc51138bb73f7465a4e7', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, hAsync("svg", { key: '121ab46a591242fbc0f1c3540e8f2a7b72c9582a', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, hAsync("circle", { key: 'fe649394c9bd6e7a06113e9a50b595bb890a6fac', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
+        return (hAsync(Host, { key: '53d1363cc2ec0219468d7a04e7f2cfc952a85fd6', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, hAsync("svg", { key: '2401cb663473e2bbce0491718ad71c2600154cd0', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, hAsync("circle", { key: '61cbad421651f8dc7f684745a75b3249f251c8a6', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
     }
     static get style() { return lmvzSpinnerCss(); }
     static get cmpMeta() { return {
@@ -15815,7 +15860,7 @@ class LmvzTab {
         this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
     }
     render() {
-        return (hAsync(Host, { key: '8fb0ddc827d31fa1669a7fdaef288be5002a7c53' }, hAsync("button", { key: '72b8f8be2f7ec7d0d2840148d48188382699d9b9', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: 'c951ae74e7b15feff7f32bc87b2e3fd46221b6b4', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: '8a06f3a9598bbf90819ff3644874f53b1ed9f840', class: "label" }, hAsync("slot", { key: '98217fca2371ad7b0ded79628895337603a54c2f' })), hAsync("span", { key: '68a11cf2f3d51aa6f4b9a7d2efcce1a1bb0c7640', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+        return (hAsync(Host, { key: 'ff3fc4218e3da14cb2caaa3bbe8cb73be8ac0c3d' }, hAsync("button", { key: '999ad84e8d27e787ba0f6ba1146b461b9e7b6ca9', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: '876a7431706f385f1ed7f542182f92dd386bc6f5', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: 'a0b0a0f22344678a2a6ee82dd997f24036f22ba5', class: "label" }, hAsync("slot", { key: 'df4d11555f351a759ef69ba907d8d1b00d95a826' })), hAsync("span", { key: '70830219e6dfa656a5ded8332f9171ad389c4ef8', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return lmvzTabCss(); }
@@ -16074,7 +16119,7 @@ class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (hAsync(Host, { key: 'ba02ac9a48c62590b8c986670336b04f82030ad2', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'c5c123997d154d676947c8a4f49149ff9e209750', role: "tablist", "aria-orientation": "horizontal", class: "tablist", ref: (el) => (this.tablistEl = el) }, hAsync("slot", { key: '7e58d17a4ec8e8300b5dfb745cb36154adc9dbcb', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '5e3e44442e0ffb1a51fd325d545fd799d7a9d119', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: 'a6208761b4422a297a58b863fff22843221644bd', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (hAsync(Host, { key: 'd6308c13b7e185fa4d1ff8a33c03f2e0e54f55b0', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: '319741b6ce2276d9092b22b67dabc2f1f28366c4', role: "tablist", "aria-orientation": "horizontal", class: "tablist", ref: (el) => (this.tablistEl = el) }, hAsync("slot", { key: 'bf76b7b1bdce93f47ddbf45309408b1e33a086f6', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '6793f685d90ea8cb4b9862db6a93d7067fcb1d53', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: '2af78356ab2727bcd044e827238b0f5a8a30f1b0', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get watchers() { return {
         "value": [{
@@ -16178,7 +16223,7 @@ class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (hAsync(Host, { key: 'a0e0272a8457ee6b07a102aa10e5a7c0292a55d9' }, hAsync("span", { key: '5d14029bee4b66f5ed2ee1eb189a1d80a68abe3e', class: "track" }, hAsync("input", { key: '926b1ca6065750717577ece30e8e78b9004ec0e8', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: 'bdee06bab6acba72d019134828f7415d7b347c49', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: 'b8eaa9305352f7146bf95bb517766310517d60e6', htmlFor: this.toggleId }, this.label)));
+        return (hAsync(Host, { key: '897eea43e268eca68b5955ba823caa49508789be' }, hAsync("span", { key: '731c08e74242b06458fdfeba69d4e4aa4ae76cd1', class: "track" }, hAsync("input", { key: '3e8ee9f23bc78f2c8110c5057854d199e13755cf', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: '8d3ec0a9bc6af91b2536865f54a1616ef8753db6', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '121837baf11f9d086e5750b6249264888a3ced7a', htmlFor: this.toggleId }, this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {