@lmvz-ds/components 0.14.1 → 0.16.0

package/dist/cjs/index.cjs.js

@@ -1,10 +1,8 @@
 'use strict';
 
-var ariaLoader = require('./aria-loader-BBKbBZLq.js');
-var icons = require('./icons-Brr4vqiE.js');
-var Effect = require('./Effect-CpZhfb0D.js');
-require('./assets-BnJmIx_h.js');
-require('./index-9ZJx0550.js');
+var icons = require('./icons-BOM23oli.js');
+require('./assets-XY-cBmal.js');
+require('./index-B1Puzu82.js');
 
 const variants = ['primary', 'secondary', 'tertiary'];
 const scaleValues = ['small', 'default', 'large'];
@@ -81,18 +79,18 @@ const iconNames = [
 ];
 
 function run(effect) {
-    return Effect.runPromise(effect).catch(error => {
+    return icons.runPromise(effect).catch(error => {
         console.error('Unhandled error in Effect:', error);
     });
 }
 
-exports.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT = ariaLoader.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT;
-exports.disableAriaValidation = ariaLoader.disableAriaValidation;
-exports.enableAriaValidation = ariaLoader.enableAriaValidation;
-exports.isAriaValidationEnabled = ariaLoader.isAriaValidationEnabled;
-exports.queueValidation = ariaLoader.queueValidation;
-exports.useVerboseLogging = ariaLoader.useVerboseLogging;
+exports.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT = icons.ARIA_VALIDATION_RUNTIME_CHANGED_EVENT;
 exports.clearIconCache = icons.clearIconCache;
+exports.disableAriaValidation = icons.disableAriaValidation;
+exports.enableAriaValidation = icons.enableAriaValidation;
+exports.isAriaValidationEnabled = icons.isAriaValidationEnabled;
+exports.queueValidation = icons.queueValidation;
+exports.useVerboseLogging = icons.useVerboseLogging;
 exports.iconNames = iconNames;
 exports.iconSizes = iconSizes;
 exports.iconWeights = iconWeights;
@@ -102,3 +100,6 @@ exports.scaleValues = scaleValues;
 exports.sizes = sizes;
 exports.textSizes = textSizes;
 exports.variants = variants;
+//# sourceMappingURL=index.cjs.js.map
+
+//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["src/api/ds.constants.ts","src/utils/effect.ts"],"sourcesContent":["export const variants = ['primary', 'secondary', 'tertiary'] as const;\n\nexport const scaleValues = ['small', 'default', 'large'] as const;\nexport const sizes = ['xs', 'sm', 'md', 'lg'] as const;\nexport const textSizes = [...sizes, 'xl'] as const;\n\nexport const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'] as const;\n\n// TODO: generate from available tokens (component/icon/size)\nexport const iconSizes = [...sizes, 'inherit'] as const;\nexport const iconWeights = ['thin', 'medium', 'bold', 'filled'] as const;\nexport const iconNames = [\n  'Logo',\n  'actions',\n  'adduser',\n  'alert',\n  'apple',\n  'arrow-down',\n  'arrow-left',\n  'arrow-right',\n  'arrow-up',\n  'book',\n  'bookmark',\n  'checkmark',\n  'chevron-down',\n  'chevron-left',\n  'chevron-right',\n  'chevron-up',\n  'close-l',\n  'close-sm',\n  'cog',\n  'computer',\n  'dashboard',\n  'delete',\n  'download',\n  'edit',\n  'external',\n  'facebook',\n  'favorite',\n  'filter',\n  'group',\n  'hide',\n  'home',\n  'info',\n  'instagram',\n  'letter',\n  'linkedin',\n  'logout',\n  'map',\n  'minus',\n  'navigation',\n  'plus',\n  'qr-scan',\n  'question',\n  'reader',\n  'reset',\n  'school',\n  'search',\n  'send',\n  'settings',\n  'share',\n  'shopping-cart',\n  'show',\n  'snapchat',\n  'sort',\n  'speech-bubble',\n  'star',\n  'student',\n  'upload',\n  'user',\n  'warn-circle',\n  'warn-triangle',\n  'whatsapp',\n  'world',\n  'x',\n  'youtube',\n] as const;\n","import { Effect } from 'effect';\n\nexport type UnwrapEffect<T> = T extends Effect.Effect<infer A, infer E, infer R> ? [A, E, R] : never;\n\nexport function run<T extends Effect.Effect<unknown, unknown, never>>(effect: T): T extends Effect.Effect<infer A, infer E, never> ? Promise<A | E> : never {\n  return Effect.runPromise(effect).catch(error => {\n    console.error('Unhandled error in Effect:', error);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  }) as any;\n}\n"],"names":["Effect.runPromise"],"mappings":";;;;;;AAAO,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU;AAEpD,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO;AAChD,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;AACrC,MAAM,SAAS,GAAG,CAAC,GAAG,KAAK,EAAE,IAAI;AAEjC,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ;AAGjF,MAAM,SAAS,GAAG,CAAC,GAAG,KAAK,EAAE,SAAS;AACtC,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ;AACvD,MAAM,SAAS,GAAG;IACvB,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;IACP,OAAO;IACP,YAAY;IACZ,YAAY;IACZ,aAAa;IACb,UAAU;IACV,MAAM;IACN,UAAU;IACV,WAAW;IACX,cAAc;IACd,cAAc;IACd,eAAe;IACf,YAAY;IACZ,SAAS;IACT,UAAU;IACV,KAAK;IACL,UAAU;IACV,WAAW;IACX,QAAQ;IACR,UAAU;IACV,MAAM;IACN,UAAU;IACV,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;IACP,MAAM;IACN,MAAM;IACN,MAAM;IACN,WAAW;IACX,QAAQ;IACR,UAAU;IACV,QAAQ;IACR,KAAK;IACL,OAAO;IACP,YAAY;IACZ,MAAM;IACN,SAAS;IACT,UAAU;IACV,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,MAAM;IACN,UAAU;IACV,OAAO;IACP,eAAe;IACf,MAAM;IACN,UAAU;IACV,MAAM;IACN,eAAe;IACf,MAAM;IACN,SAAS;IACT,QAAQ;IACR,MAAM;IACN,aAAa;IACb,eAAe;IACf,UAAU;IACV,OAAO;IACP,GAAG;IACH,SAAS;;;ACvEL,SAAU,GAAG,CAAmD,MAAS,EAAA;IAC7E,OAAOA,gBAAiB,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,KAAK,IAAG;AAC7C,QAAA,OAAO,CAAC,KAAK,CAAC,4BAA4B,EAAE,KAAK,CAAC;AAEpD,KAAC,CAAQ;AACX;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-9ZJx0550.js');
+var index = require('./index-B1Puzu82.js');
 
 const lmvzActionCss = () => `:host{display:block}`;
 
@@ -14,9 +14,12 @@ const LmvzAction = class {
         this.actionClick.emit(event);
     }
     render() {
-        return (index.h(index.Host, { key: '71303bfe6ac64a96edd21800ae5e8c43a3a38c23', onClick: this._onClick.bind(this) }, index.h("slot", { key: '94922fdfd355e7e4d1b78bedb80ae814c186b199' })));
+        return (index.h(index.Host, { key: '15c0f20e08cd5019abfd3bb71ec69d175dc5ba48', onClick: this._onClick.bind(this) }, index.h("slot", { key: 'f71a7853168d1b66b0a50b0f971d140385530ac3' })));
     }
 };
 LmvzAction.style = lmvzActionCss();
 
 exports.lmvz_action = LmvzAction;
+//# sourceMappingURL=lmvz-action.entry.cjs.js.map
+
+//# sourceMappingURL=lmvz-action.cjs.entry.js.map

package/dist/cjs/lmvz-action.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"lmvz-action.cjs.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,oBAAoB,CAAC;;MCQrC,UAAU,GAAA,MAAA;;;;;AACZ,IAAA,WAAW;AAEZ,IAAA,QAAQ,CAAC,KAAiB,EAAA;AAChC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG9B,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EACrCD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR;;;;;;;","names":["h","Host"],"sources":["src/components/lmvz-action/lmvz-action.css?tag=lmvz-action&encapsulation=shadow","src/components/lmvz-action/lmvz-action.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Event, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'lmvz-action',\n  styleUrl: 'lmvz-action.css',\n  shadow: true,\n})\nexport class LmvzAction {\n  @Event() actionClick!: EventEmitter<MouseEvent>;\n\n  private _onClick(event: MouseEvent) {\n    this.actionClick.emit(event);\n  }\n\n  render() {\n    return (\n      <Host onClick={this._onClick.bind(this)}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-9ZJx0550.js');
-var assets = require('./assets-BnJmIx_h.js');
+var index = require('./index-B1Puzu82.js');
+var assets = require('./assets-XY-cBmal.js');
 
-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; }`;
 
 const LmvzCard = class {
     constructor(hostRef) {
@@ -28,10 +28,13 @@ const LmvzCard = class {
         const imgStyle = {
             backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
         };
-        return (index.h(index.Host, { key: 'ba2e8d9e25428c744da2470cbd677306c56b09ae', role: "article" }, index.h("div", { key: '54ff7545559a4b6fb00c94909717234f4dfedd7c', class: "top" }, index.h("div", { key: '7bff35f247b6e8aca9b6346103139daa65ca16a3', class: "image-wrapper", style: imgStyle }, index.h("div", { key: 'c2c3d21227175b9dc0a55c75294f6c21bc713a26', class: "chip-slot" }, index.h("slot", { key: '1a7002aab5fc3f9f698c3d1678f8819ea36f91d3', name: "chip" })))), index.h("div", { key: 'a313321abe4da83db4b2ba64fdefa28edde93d41', class: "bottom" }, index.h("header", { key: 'f5ba333fcaa59d5b4f61dee94aba4628f49db9d7' }, index.h("h2", { key: 'b7d9ad6944b136476703cde89f885b189583eef1', class: "title" }, this.cardTitle)), index.h("p", { key: '6594626904a4f9fbc53d5956b71bbdefe00add8c', class: "description" }, this.description), index.h("div", { key: 'd8bbfebeb572fcf6990160a0dba7c5ae8a5a7fc7', class: "actions" }, index.h("button", { key: '6311a97a18412f8fbf8eb33e8a0f7a17700e71c6', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), index.h("button", { key: '12033ad5018d100f84f0149d83dc965d8e5b2c66', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, index.h("span", { key: 'e11f8008542b4f7f70d1273bb31200c50d02aabb', class: "icon-placeholder" }, "..."))))));
+        return (index.h(index.Host, { key: '46c2832b4f90b9eb222749632bc7ad59cd645e10', role: "article" }, index.h("div", { key: 'cc387fe96cff2dd04c24f75cf838a2bf6f438279', class: "top" }, index.h("div", { key: 'f9a54a5f81378ef4265e1d74c36c78af002e8874', class: "image-wrapper", style: imgStyle }, index.h("div", { key: '76daed00408f7ae9ee46977637ddcd3d4f846380', class: "chip-slot" }, index.h("slot", { key: '6ad522ef7428166b876d0218ef8d801c4ef337f1', name: "chip" })))), index.h("div", { key: '9c9799668ac199cfecbe10061e271d70d70e2d07', class: "bottom" }, index.h("header", { key: '1bec743235bea5c7ab163225ffbd7bc6cf11f754' }, index.h("h2", { key: '06f8e14153328bc5ca920e71e09d9343047c440c', class: "title" }, this.cardTitle)), index.h("p", { key: '86b95db4e6464ca3236b4a03798013c3580819bf', class: "description" }, this.description), index.h("div", { key: '553dc998d5318a4730196baa0b9baff3a0a3369f', class: "actions" }, index.h("button", { key: '7532d01b46769198c23a1b1015c187fdefce146a', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), index.h("button", { key: '633d679ae59b1896aa2a06e04b4564569cf27a7d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, index.h("span", { key: 'b72c45f93d259502b9d7c5ffb19e292a53c60ec6', class: "icon-placeholder" }, "..."))))));
     }
     static get assetsDirs() { return ["../../assets"]; }
 };
 LmvzCard.style = lmvzCardCss();
 
 exports.lmvz_card = LmvzCard;
+//# sourceMappingURL=lmvz-card.entry.cjs.js.map
+
+//# sourceMappingURL=lmvz-card.cjs.entry.js.map

package/dist/cjs/lmvz-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"lmvz-card.cjs.entry.js","mappings":";;;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,ioPAAioP,CAAC;;MCWhpP,QAAQ,GAAA,MAAA;;;;;AAEX,IAAA,SAAS;AAGT,IAAA,QAAQ;AAGR,IAAA,WAAW;IAGX,kBAAkB,GAAW,EAAE;AAG9B,IAAA,aAAa;AAEtB,IAAA,IAAY,aAAa,GAAA;AACvB,QAAA,OAAOA,2BAAoB,CAAC,sBAAsB,CAAC;;IAG7C,eAAe,GAAA;AACrB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;AAGnB,IAAA,gBAAgB,CAAC,KAAmB,EAAA;AAE1C,QAAA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;;IAGpB,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG;YACf,eAAe,EAAE,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAA,CAAA,CAAG;SAC/D;QACD,QACEC,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,SAAS,EAAA,EAClBD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,KAAK,EAAA,EACdA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,QAAQ,EAAA,EACxCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,CACF,CACF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,SAAS,CAAM,CAChC,EACTA,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAK,EAE7CA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,aAAA,EAAc,SAAS,IACpF,IAAI,CAAC,kBAAkB,CACjB,EAETA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,UAAU,EAAA,YAAA,EAAY,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAC/EA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,kBAAkB,EAAA,EAAA,KAAA,CAAW,CAClC,CAIL,CACF,CACD;;;;;;;;","names":["createAssetUrlSafely","h","Host"],"sources":["src/components/lmvz-card/lmvz-card.css?tag=lmvz-card&encapsulation=scoped","src/components/lmvz-card/lmvz-card.tsx"],"sourcesContent":["@import '~@lmvz-ds/lib-styles/define-layers.css';\n\n@import '~@lmvz-ds/lib-styles/fragments/_routerFont.css' layer(lmvz-ds.theme);\n@import '~@lmvz-ds/lib-styles/fragments/_reset.css' layer(lmvz-ds.reset);\n\n:host {\n  /** component dependencies */\n  /* * the (invalid nested) import will be handled by postcss */\n  /* stylelint-disable no-invalid-position-at-import-rule */\n  @import '~@lmvz-ds/lib-styles/fragments/_buttons.css';\n\n  display: flex;\n  min-width: var(--lmvz-other-component-card-minwidth);\n  max-width: var(--lmvz-other-component-card-maxwidth);\n  flex-direction: column;\n  align-items: flex-start;\n\n  border-radius: var(--lmvz-semantic-border-radius-lg);\n  border: var(--lmvz-semantic-border-width-default) solid var(--lmvz-semantic-color-border-default);\n  background: var(--lmvz-semantic-color-surface-primary);\n}\n\n* {\n  color: var(--lmvz-semantic-color-on-surface-primary);\n  font: var(--lmvz-typography-body-md);\n}\n\n.top {\n  display: flex;\n  padding: var(--lmvz-dimension-8-12);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n}\n\n.bottom {\n  display: flex;\n  min-width: 150px;\n  padding: var(--lmvz-dimension-4-6) var(--lmvz-dimension-10-14) var(--lmvz-dimension-10-14) var(--lmvz-dimension-10-14);\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n}\n\n.title {\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n\n  padding-bottom: var(--lmvz-global-s4);\n  overflow-wrap: break-word;\n  font: var(--lmvz-typography-heading-2xl);\n}\n\n.description {\n  display: flex;\n  margin: 0;\n  padding-bottom: var(--lmvz-component-body-sm-padding-bottom);\n  align-items: flex-start;\n  align-self: stretch;\n  white-space: pre-line;\n  font: var(--lmvz-typography-body-md);\n}\n\n.image-wrapper {\n  aspect-ratio: 4 / 3;\n  width: 100%;\n  background-size: cover;\n  background-position: center;\n  flex: 1 0 0;\n  align-self: stretch;\n  border-radius: var(--lmvz-semantic-border-radius-md);\n}\n\n.actions {\n  margin-top: var(--lmvz-component-form-wrapper-gap-y);\n  display: flex;\n  align-items: center;\n  gap: var(--lmvz-component-input-md-gap-x);\n  align-self: stretch;\n}\n\nbutton.primary,\nlmvz-button.primary {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--lmvz-component-input-md-gap-x);\n  flex: 1 0 0;\n}\n\n/* .overflow-button {\n  anchor-name: --overflow-button;\n} */\n\n/* menu {\n  position: fixed;\n  position-anchor: --overflow-button;\n\n  inset-block-start: anchor(end);\n  inset-inline-end: anchor(self-end);\n  margin: 5px 0 0 5px;\n} */\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Event, h, Host, Prop } from '@stencil/core';\n\nimport { createAssetUrlSafely } from '../../utils/assets';\n\n@Component({\n  tag: 'lmvz-card',\n  styleUrl: 'lmvz-card.css',\n  scoped: true,\n  assetsDirs: ['../../assets'],\n})\nexport class LmvzCard {\n  /** Card title (required) */\n  @Prop() cardTitle!: string;\n\n  /** Optional image URL; placeholder used if omitted */\n  @Prop() imageUrl?: string;\n\n  /** Optional description */\n  @Prop() description?: string;\n\n  /** Primary action button label */\n  @Prop() primaryActionLabel: string = '';\n\n  /** Event emitted when primary button is clicked */\n  @Event() primaryAction!: EventEmitter<PointerEvent>;\n\n  private get fallbackImage() {\n    return createAssetUrlSafely('card-placeholder.svg');\n  }\n\n  private _onPrimaryClick() {\n    this.primaryAction.emit();\n  }\n\n  private _onOverflowClick(event: PointerEvent) {\n    // TODO: show menu\n    console.log(event);\n  }\n\n  render() {\n    const imgStyle = {\n      backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,\n    };\n    return (\n      <Host role=\"article\">\n        <div class=\"top\">\n          <div class=\"image-wrapper\" style={imgStyle}>\n            <div class=\"chip-slot\">\n              <slot name=\"chip\"></slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"bottom\">\n          <header>\n            <h2 class=\"title\">{this.cardTitle}</h2>\n          </header>\n          <p class=\"description\">{this.description}</p>\n          {/* TODO: hide unless actions are available https://stackoverflow.com/questions/53796599/how-to-determine-number-of-children-in-a-slot */}\n          <div class=\"actions\">\n            <button class=\"primary\" onClick={this._onPrimaryClick.bind(this)} data-testid=\"primary\">\n              {this.primaryActionLabel}\n            </button>\n            {/* popoverTarget=\"mypopover\"  */}\n            <button class=\"tertiary\" aria-label=\"More actions\" onClick={this._onOverflowClick}>\n              <span class=\"icon-placeholder\">...</span>\n            </button>\n            {/* <menu id=\"mypopover\" popover=\"manual\">\n              <li>TEST</li>\n            </menu> */}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-9ZJx0550.js');
+var index = require('./index-B1Puzu82.js');
 
 const lmvzChipCss = () => `:host{display:block}`;
 
@@ -10,9 +10,12 @@ const LmvzChip = class {
     }
     text;
     render() {
-        return index.h(index.Host, { key: 'b247f41d22bcf77998bf5a49669f1aa8d7fd3a63' }, this.text);
+        return index.h(index.Host, { key: 'd128e24bb90891ebd13d13a8e27c06782363cace' }, this.text);
     }
 };
 LmvzChip.style = lmvzChipCss();
 
 exports.lmvz_chip = LmvzChip;
+//# sourceMappingURL=lmvz-chip.entry.cjs.js.map
+
+//# sourceMappingURL=lmvz-chip.cjs.entry.js.map

package/dist/cjs/lmvz-chip.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"lmvz-chip.cjs.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,oBAAoB,CAAC;;MCOnC,QAAQ,GAAA,MAAA;;;;AACX,IAAA,IAAI;IAEZ,MAAM,GAAA;AACJ,QAAA,OAAOA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ;;;;;;;","names":["h","Host"],"sources":["src/components/lmvz-chip/lmvz-chip.css?tag=lmvz-chip&encapsulation=shadow","src/components/lmvz-chip/lmvz-chip.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'lmvz-chip',\n  styleUrl: 'lmvz-chip.css',\n  shadow: true,\n})\nexport class LmvzChip {\n  @Prop() text!: string;\n\n  render() {\n    return <Host>{this.text}</Host>;\n  }\n}\n"],"version":3}

package/dist/cjs/lmvz-components.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-9ZJx0550.js');
+var index = require('./index-B1Puzu82.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.43.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -19,7 +19,10 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-chip.cjs",[[513,"lmvz-chip",{"text":[1]}]]],["lmvz-header.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}]]],["lmvz-icon.cjs",[[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]]], options);
+  return index.bootstrapLazy([["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-chip.cjs",[[513,"lmvz-chip",{"text":[1]}]]],["header-integration_7.cjs",[[513,"header-integration",{"activeNav":[1025,"active-nav"]}],[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}],[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}],[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}],[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;
+//# sourceMappingURL=lmvz-components.cjs.js.map
+
+//# sourceMappingURL=lmvz-components.cjs.js.map

package/dist/cjs/lmvz-components.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lmvz-components.cjs.js","sources":["../../node_modules/.pnpm/@stencil+core@4.43.3/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,wQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/cjs/loader.cjs.js

@@ -1,13 +1,16 @@
 'use strict';
 
-var index = require('./index-9ZJx0550.js');
+var index = require('./index-B1Puzu82.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-button.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-chip.cjs",[[513,"lmvz-chip",{"text":[1]}]]],["lmvz-header.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}]]],["lmvz-icon.cjs",[[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]]], options);
+  return index.bootstrapLazy([["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-chip.cjs",[[513,"lmvz-chip",{"text":[1]}]]],["header-integration_7.cjs",[[513,"header-integration",{"activeNav":[1025,"active-nav"]}],[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}],[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}],[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}],[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;
+//# sourceMappingURL=loader.cjs.js.map
+
+//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/loader.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,wBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}

package/dist/collection/api/ds.constants.js

@@ -71,3 +71,4 @@ export const iconNames = [
     'x',
     'youtube',
 ];
+//# sourceMappingURL=ds.constants.js.map

package/dist/collection/api/ds.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds.constants.js","sourceRoot":"","sources":["../../../src/api/ds.constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAU,CAAC;AAEtE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAU,CAAC;AAClE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AACvD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,KAAK,EAAE,IAAI,CAAU,CAAC;AAEnD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAGnG,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,KAAK,EAAE,SAAS,CAAU,CAAC;AACxD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAU,CAAC;AACzE,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM;IACN,SAAS;IACT,SAAS;IACT,OAAO;IACP,OAAO;IACP,YAAY;IACZ,YAAY;IACZ,aAAa;IACb,UAAU;IACV,MAAM;IACN,UAAU;IACV,WAAW;IACX,cAAc;IACd,cAAc;IACd,eAAe;IACf,YAAY;IACZ,SAAS;IACT,UAAU;IACV,KAAK;IACL,UAAU;IACV,WAAW;IACX,QAAQ;IACR,UAAU;IACV,MAAM;IACN,UAAU;IACV,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;IACP,MAAM;IACN,MAAM;IACN,MAAM;IACN,WAAW;IACX,QAAQ;IACR,UAAU;IACV,QAAQ;IACR,KAAK;IACL,OAAO;IACP,YAAY;IACZ,MAAM;IACN,SAAS;IACT,UAAU;IACV,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,MAAM;IACN,UAAU;IACV,OAAO;IACP,eAAe;IACf,MAAM;IACN,UAAU;IACV,MAAM;IACN,eAAe;IACf,MAAM;IACN,SAAS;IACT,QAAQ;IACR,MAAM;IACN,aAAa;IACb,eAAe;IACf,UAAU;IACV,OAAO;IACP,GAAG;IACH,SAAS;CACD,CAAC","sourcesContent":["export const variants = ['primary', 'secondary', 'tertiary'] as const;\n\nexport const scaleValues = ['small', 'default', 'large'] as const;\nexport const sizes = ['xs', 'sm', 'md', 'lg'] as const;\nexport const textSizes = [...sizes, 'xl'] as const;\n\nexport const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'] as const;\n\n// TODO: generate from available tokens (component/icon/size)\nexport const iconSizes = [...sizes, 'inherit'] as const;\nexport const iconWeights = ['thin', 'medium', 'bold', 'filled'] as const;\nexport const iconNames = [\n  'Logo',\n  'actions',\n  'adduser',\n  'alert',\n  'apple',\n  'arrow-down',\n  'arrow-left',\n  'arrow-right',\n  'arrow-up',\n  'book',\n  'bookmark',\n  'checkmark',\n  'chevron-down',\n  'chevron-left',\n  'chevron-right',\n  'chevron-up',\n  'close-l',\n  'close-sm',\n  'cog',\n  'computer',\n  'dashboard',\n  'delete',\n  'download',\n  'edit',\n  'external',\n  'facebook',\n  'favorite',\n  'filter',\n  'group',\n  'hide',\n  'home',\n  'info',\n  'instagram',\n  'letter',\n  'linkedin',\n  'logout',\n  'map',\n  'minus',\n  'navigation',\n  'plus',\n  'qr-scan',\n  'question',\n  'reader',\n  'reset',\n  'school',\n  'search',\n  'send',\n  'settings',\n  'share',\n  'shopping-cart',\n  'show',\n  'snapchat',\n  'sort',\n  'speech-bubble',\n  'star',\n  'student',\n  'upload',\n  'user',\n  'warn-circle',\n  'warn-triangle',\n  'whatsapp',\n  'world',\n  'x',\n  'youtube',\n] as const;\n"]}

package/dist/collection/api/index.js

@@ -1 +1,2 @@
 export * from './ds.constants';
+//# sourceMappingURL=index.js.map

package/dist/collection/api/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/api/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC","sourcesContent":["export type * from './aria-types';\nexport * from './ds.constants';\nexport type * from './ds.types';\n"]}

package/dist/collection/collection-manifest.json

@@ -8,12 +8,13 @@
     "components/lmvz-icon/lmvz-icon.js",
     "components/lmvz-input/lmvz-input.js",
     "components/lmvz-menuitem/lmvz-menuitem.js",
+    "components/lmvz-select/lmvz-select.js",
     "integration/header-integration.js"
   ],
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.2",
+    "version": "4.43.3",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/lmvz-action/lmvz-action.js

@@ -5,7 +5,7 @@ export class LmvzAction {
         this.actionClick.emit(event);
     }
     render() {
-        return (h(Host, { key: '71303bfe6ac64a96edd21800ae5e8c43a3a38c23', onClick: this._onClick.bind(this) }, h("slot", { key: '94922fdfd355e7e4d1b78bedb80ae814c186b199' })));
+        return (h(Host, { key: '15c0f20e08cd5019abfd3bb71ec69d175dc5ba48', onClick: this._onClick.bind(this) }, h("slot", { key: 'f71a7853168d1b66b0a50b0f971d140385530ac3' })));
     }
     static get is() { return "lmvz-action"; }
     static get encapsulation() { return "shadow"; }
@@ -43,3 +43,4 @@ export class LmvzAction {
             }];
     }
 }
+//# sourceMappingURL=lmvz-action.js.map

package/dist/collection/components/lmvz-action/lmvz-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lmvz-action.js","sourceRoot":"","sources":["../../../../src/components/lmvz-action/lmvz-action.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,UAAU;IACZ,WAAW,CAA4B;IAExC,QAAQ,CAAC,KAAiB;QAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;YACrC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Component, Event, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'lmvz-action',\n  styleUrl: 'lmvz-action.css',\n  shadow: true,\n})\nexport class LmvzAction {\n  @Event() actionClick!: EventEmitter<MouseEvent>;\n\n  private _onClick(event: MouseEvent) {\n    this.actionClick.emit(event);\n  }\n\n  render() {\n    return (\n      <Host onClick={this._onClick.bind(this)}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -56,6 +56,10 @@
 
 }
 @layer lmvz-ds.reset {
+body {
+  margin: 0;
+}
+
 h1,
 h2,
 h3,

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

@@ -57,7 +57,7 @@ export class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (h(Host, { key: '3f3eda78349322ce5160d7aac1290a73f0adcd4a', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: 'b132404d8d5f5bf0fa7e845b562c953c5ceec36c', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: 'ce63f7f1061ec9c3f10cbcfc67998ddbf3e04c3d' }))));
+        return (h(Host, { key: 'c6f44d3765d579e04ab91272747035d8589e2ff2', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '9d48dfc7a6a23df1eda46e9c9035520789a08d4c', ref: (e) => (this.validationEl = e), disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: '95e9fb932e477c7d6e933d2c00e6a3728e55c256' }))));
     }
     static get is() { return "lmvz-button"; }
     static get encapsulation() { return "shadow"; }
@@ -202,7 +202,7 @@ export class LmvzButton extends ReactiveControllerHost {
                 "mutable": false,
                 "complexType": {
                     "original": "FormRef",
-                    "resolved": "HTMLFormElement | string",
+                    "resolved": "HTMLFormElement | string | undefined",
                     "references": {
                         "FormRef": {
                             "location": "import",
@@ -245,3 +245,4 @@ export class LmvzButton extends ReactiveControllerHost {
     }
     static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=lmvz-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lmvz-button.js","sourceRoot":"","sources":["../../../../src/components/lmvz-button/lmvz-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, Host, Prop, h, type EventEmitter } from '@stencil/core';\nimport classNames from 'classnames';\nimport type { Button } from '../../api';\nimport { AriaValidationController, type AriaValidationHost } from '../../utils/aria/aria-validation-controller';\nimport { ElementActivationController, type ElementActivationHost } from '../../utils/aria/element-activation-controller';\nimport { findFormByRef, inheritAriaAttributes, type Attributes, type FormRef } from '../../utils/component';\nimport { ReactiveControllerHost } from '../../utils/reactive-controller-host';\n\n/**\n * @slot default - Slot for the content of the button\n */\n@Component({\n  tag: 'lmvz-button',\n  styleUrl: './lmvz-button.css',\n  shadow: { delegatesFocus: true },\n})\nexport class LmvzButton extends ReactiveControllerHost implements AriaValidationHost, ElementActivationHost {\n  @Element() el!: HTMLLmvzButtonElement;\n\n  validationEl: HTMLButtonElement | undefined;\n\n  private inheritedAttributes: Attributes = {};\n  private formEl: HTMLFormElement | null = null;\n  private formButtonEl: HTMLButtonElement | null = null;\n\n  /**\n   * Event emitted when the button is activated, either by a click or by pressing \"Enter\" when the button is focused.\n   */\n  @Event() lmvzActivation!: EventEmitter<void>;\n\n  @Prop({ reflect: true, attribute: 'tabindex' }) get ti() {\n    return 0;\n  }\n\n  /**\n   * Scale of the button\n   * @default 'default'\n   */\n  @Prop({ reflect: true }) scale: Button.Scale = 'default';\n\n  /**\n   * Variant of the button\n   * @default 'secondary', since the primary button should be marked as such in context\n   */\n  @Prop({ reflect: true }) variant: Button.Variant = 'secondary';\n\n  /**\n   * Whether the button is disabled\n   * @default false\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  @Prop() type: 'submit' | 'button' = 'button';\n\n  /**\n   * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.\n   */\n  @Prop() form?: FormRef;\n\n  constructor() {\n    super();\n    this.addController(new AriaValidationController(this));\n    this.addController(\n      new ElementActivationController(this, {\n        localHandler: this.handleClick.bind(this),\n        keys: ['Enter'],\n      }),\n    );\n  }\n\n  override connectedCallback() {\n    this.inheritedAttributes = inheritAriaAttributes(this.el);\n    super.connectedCallback();\n  }\n\n  /**\n   * This renders a hidden native button element inside the associated form.\n   * This allows users to submit a form by pressing \"Enter\" when a text\n   * field inside of the form is focused, even though our native button is in the Shadow DOM.\n   */\n  private renderHiddenButton() {\n    const formEl = (this.formEl = findFormByRef(this.form, this.el));\n    if (!formEl) return;\n\n    const { formButtonEl } = this;\n\n    // append only once\n    if (formButtonEl !== null && formEl.contains(formButtonEl)) return;\n\n    const newFormButtonEl = (this.formButtonEl = document.createElement('button'));\n    newFormButtonEl.type = 'submit';\n    newFormButtonEl.style.display = 'none';\n    newFormButtonEl.disabled = this.disabled;\n\n    formEl.appendChild(newFormButtonEl);\n  }\n\n  private submitForm(ev: Event) {\n    if (this.formEl && this.formButtonEl) {\n      ev.preventDefault();\n      this.formButtonEl.click();\n    }\n  }\n\n  private handleClick = (ev: Event) => {\n    if (this.type === 'submit') {\n      this.submitForm(ev);\n    }\n  };\n\n  render() {\n    this.renderHiddenButton();\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null}>\n        <button\n          ref={(e) => (this.validationEl = e)}\n          disabled={this.disabled}\n          class={classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled })}\n          {...this.inheritedAttributes}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -56,6 +56,10 @@
 
 }
 @layer lmvz-ds.reset {
+body {
+  margin: 0;
+}
+
 h1,
 h2,
 h3,

package/dist/collection/components/lmvz-card/lmvz-card.js

@@ -19,7 +19,7 @@ export class LmvzCard {
         const imgStyle = {
             backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
         };
-        return (h(Host, { key: 'ba2e8d9e25428c744da2470cbd677306c56b09ae', role: "article" }, h("div", { key: '54ff7545559a4b6fb00c94909717234f4dfedd7c', class: "top" }, h("div", { key: '7bff35f247b6e8aca9b6346103139daa65ca16a3', class: "image-wrapper", style: imgStyle }, h("div", { key: 'c2c3d21227175b9dc0a55c75294f6c21bc713a26', class: "chip-slot" }, h("slot", { key: '1a7002aab5fc3f9f698c3d1678f8819ea36f91d3', name: "chip" })))), h("div", { key: 'a313321abe4da83db4b2ba64fdefa28edde93d41', class: "bottom" }, h("header", { key: 'f5ba333fcaa59d5b4f61dee94aba4628f49db9d7' }, h("h2", { key: 'b7d9ad6944b136476703cde89f885b189583eef1', class: "title" }, this.cardTitle)), h("p", { key: '6594626904a4f9fbc53d5956b71bbdefe00add8c', class: "description" }, this.description), h("div", { key: 'd8bbfebeb572fcf6990160a0dba7c5ae8a5a7fc7', class: "actions" }, h("button", { key: '6311a97a18412f8fbf8eb33e8a0f7a17700e71c6', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '12033ad5018d100f84f0149d83dc965d8e5b2c66', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: 'e11f8008542b4f7f70d1273bb31200c50d02aabb', class: "icon-placeholder" }, "..."))))));
+        return (h(Host, { key: '46c2832b4f90b9eb222749632bc7ad59cd645e10', role: "article" }, h("div", { key: 'cc387fe96cff2dd04c24f75cf838a2bf6f438279', class: "top" }, h("div", { key: 'f9a54a5f81378ef4265e1d74c36c78af002e8874', class: "image-wrapper", style: imgStyle }, h("div", { key: '76daed00408f7ae9ee46977637ddcd3d4f846380', class: "chip-slot" }, h("slot", { key: '6ad522ef7428166b876d0218ef8d801c4ef337f1', name: "chip" })))), h("div", { key: '9c9799668ac199cfecbe10061e271d70d70e2d07', class: "bottom" }, h("header", { key: '1bec743235bea5c7ab163225ffbd7bc6cf11f754' }, h("h2", { key: '06f8e14153328bc5ca920e71e09d9343047c440c', class: "title" }, this.cardTitle)), h("p", { key: '86b95db4e6464ca3236b4a03798013c3580819bf', class: "description" }, this.description), h("div", { key: '553dc998d5318a4730196baa0b9baff3a0a3369f', class: "actions" }, h("button", { key: '7532d01b46769198c23a1b1015c187fdefce146a', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '633d679ae59b1896aa2a06e04b4564569cf27a7d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: 'b72c45f93d259502b9d7c5ffb19e292a53c60ec6', class: "icon-placeholder" }, "..."))))));
     }
     static get is() { return "lmvz-card"; }
     static get encapsulation() { return "scoped"; }
@@ -60,7 +60,7 @@ export class LmvzCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -79,7 +79,7 @@ export class LmvzCard {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -139,3 +139,4 @@ export class LmvzCard {
             }];
     }
 }
+//# sourceMappingURL=lmvz-card.js.map

package/dist/collection/components/lmvz-card/lmvz-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lmvz-card.js","sourceRoot":"","sources":["../../../../src/components/lmvz-card/lmvz-card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAQ1D,MAAM,OAAO,QAAQ;IAEX,SAAS,CAAU;IAGnB,QAAQ,CAAU;IAGlB,WAAW,CAAU;IAGrB,kBAAkB,GAAW,EAAE,CAAC;IAG/B,aAAa,CAA8B;IAEpD,IAAY,aAAa;QACvB,OAAO,oBAAoB,CAAC,sBAAsB,CAAC,CAAC;IACtD,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAEO,gBAAgB,CAAC,KAAmB;QAE1C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG;YACf,eAAe,EAAE,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,GAAG;SAC/D,CAAC;QACF,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS;YAClB,4DAAK,KAAK,EAAC,KAAK;gBACd,4DAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,QAAQ;oBACxC,4DAAK,KAAK,EAAC,WAAW;wBACpB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACF;YACN,4DAAK,KAAK,EAAC,QAAQ;gBACjB;oBACE,2DAAI,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,SAAS,CAAM,CAChC;gBACT,0DAAG,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAK;gBAE7C,4DAAK,KAAK,EAAC,SAAS;oBAClB,+DAAQ,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAc,SAAS,IACpF,IAAI,CAAC,kBAAkB,CACjB;oBAET,+DAAQ,KAAK,EAAC,UAAU,gBAAY,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB;wBAC/E,6DAAM,KAAK,EAAC,kBAAkB,UAAW,CAClC,CAIL,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Component, Event, h, Host, Prop } from '@stencil/core';\n\nimport { createAssetUrlSafely } from '../../utils/assets';\n\n@Component({\n  tag: 'lmvz-card',\n  styleUrl: 'lmvz-card.css',\n  scoped: true,\n  assetsDirs: ['../../assets'],\n})\nexport class LmvzCard {\n  /** Card title (required) */\n  @Prop() cardTitle!: string;\n\n  /** Optional image URL; placeholder used if omitted */\n  @Prop() imageUrl?: string;\n\n  /** Optional description */\n  @Prop() description?: string;\n\n  /** Primary action button label */\n  @Prop() primaryActionLabel: string = '';\n\n  /** Event emitted when primary button is clicked */\n  @Event() primaryAction!: EventEmitter<PointerEvent>;\n\n  private get fallbackImage() {\n    return createAssetUrlSafely('card-placeholder.svg');\n  }\n\n  private _onPrimaryClick() {\n    this.primaryAction.emit();\n  }\n\n  private _onOverflowClick(event: PointerEvent) {\n    // TODO: show menu\n    console.log(event);\n  }\n\n  render() {\n    const imgStyle = {\n      backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,\n    };\n    return (\n      <Host role=\"article\">\n        <div class=\"top\">\n          <div class=\"image-wrapper\" style={imgStyle}>\n            <div class=\"chip-slot\">\n              <slot name=\"chip\"></slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"bottom\">\n          <header>\n            <h2 class=\"title\">{this.cardTitle}</h2>\n          </header>\n          <p class=\"description\">{this.description}</p>\n          {/* TODO: hide unless actions are available https://stackoverflow.com/questions/53796599/how-to-determine-number-of-children-in-a-slot */}\n          <div class=\"actions\">\n            <button class=\"primary\" onClick={this._onPrimaryClick.bind(this)} data-testid=\"primary\">\n              {this.primaryActionLabel}\n            </button>\n            {/* popoverTarget=\"mypopover\"  */}\n            <button class=\"tertiary\" aria-label=\"More actions\" onClick={this._onOverflowClick}>\n              <span class=\"icon-placeholder\">...</span>\n            </button>\n            {/* <menu id=\"mypopover\" popover=\"manual\">\n              <li>TEST</li>\n            </menu> */}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/lmvz-chip/lmvz-chip.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class LmvzChip {
     text;
     render() {
-        return h(Host, { key: 'b247f41d22bcf77998bf5a49669f1aa8d7fd3a63' }, this.text);
+        return h(Host, { key: 'd128e24bb90891ebd13d13a8e27c06782363cace' }, this.text);
     }
     static get is() { return "lmvz-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -26,7 +26,7 @@ export class LmvzChip {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -40,3 +40,4 @@ export class LmvzChip {
         };
     }
 }
+//# sourceMappingURL=lmvz-chip.js.map

package/dist/collection/components/lmvz-chip/lmvz-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lmvz-chip.js","sourceRoot":"","sources":["../../../../src/components/lmvz-chip/lmvz-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;IACX,IAAI,CAAU;IAEtB,MAAM;QACJ,OAAO,EAAC,IAAI,uDAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;IAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'lmvz-chip',\n  styleUrl: 'lmvz-chip.css',\n  shadow: true,\n})\nexport class LmvzChip {\n  @Prop() text!: string;\n\n  render() {\n    return <Host>{this.text}</Host>;\n  }\n}\n"]}

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

@@ -1,20 +1,22 @@
 import { h, Host } from "@stencil/core";
-import logo from "../../../assets/icons/Logo.svg";
+import logo from "../../assets/icons/Logo.svg";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { ListKeyboardNavigationController } from "../../utils/aria/list-keyboard-controller";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
 export class LmvzHeader extends ReactiveControllerHost {
     el;
-    validationEl = this.el;
+    get validationEl() {
+        return this.el;
+    }
     primarySlot;
     secondarySlot;
     secondaryNav;
     keyboardNavigationController = new ListKeyboardNavigationController(this);
     get primaryMenuitems() {
-        return this.primarySlot.assignedElements({ flatten: false });
+        return this.primarySlot?.assignedElements({ flatten: false }) || [];
     }
     get secondaryMenuitems() {
-        return this.secondarySlot.assignedElements({ flatten: true });
+        return this.secondarySlot?.assignedElements({ flatten: true }) || [];
     }
     get role() {
         return 'banner';
@@ -32,9 +34,9 @@ export class LmvzHeader extends ReactiveControllerHost {
         this.updateElementsActive();
     }
     componentDidLoad() {
-        this.primarySlot.addEventListener('slotchange', this.handlePrimaryNavItemsChange.bind(this));
+        this.primarySlot?.addEventListener('slotchange', this.handlePrimaryNavItemsChange.bind(this));
         this.handlePrimaryNavItemsChange();
-        this.secondarySlot.addEventListener('slotchange', this.handleSecondaryNavItemsChange.bind(this));
+        this.secondarySlot?.addEventListener('slotchange', this.handleSecondaryNavItemsChange.bind(this));
         super.componentDidLoad();
     }
     handlePrimaryNavItemsChange() {
@@ -62,14 +64,18 @@ export class LmvzHeader extends ReactiveControllerHost {
     }
     updateElementsActive() {
         const items = this.primaryMenuitems;
-        let label;
+        if (!items.length)
+            return;
+        let label = '';
         items.forEach((el) => {
             const isActive = el.id === this.lmvzActiveNav;
             if (isActive)
                 label = el.textContent || el.id;
             el.setAttribute('aria-expanded', isActive ? 'true' : 'false');
         });
-        this.secondaryNav.setAttribute('aria-label', `Untermenü für ${label}`);
+        if (!label)
+            return;
+        this.secondaryNav?.setAttribute('aria-label', `Untermenü für ${label}`);
     }
     delegateFocus() {
         const firstFocusable = this.primaryMenuitems[0];
@@ -78,7 +84,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: 'e5efeeb233de82c44e23302d20ebb488dfc6307b', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '5e34efe17901ec990d09cd6764c37858ced1f021', class: "brand" }, h("slot", { key: 'd30fa8bf8e77a6f02bad45dbad58fe9bbdc8b3f3', name: "brand" }, h("img", { key: '074192bf3b5b4bcdb19302a954c56c5c61ee4b8f', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '663f04ecb9d6ea026f9476888b532f8e1c4e432c', "aria-label": "Hauptnavigation" }, h("div", { key: 'ed0f492144c2b94822db02733c371329a95d8a1e', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'cbcf15f96b5b6c2133506902dc992c962e4873fb', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '109ca0ea7ee937c9a1a4a510305595486ea48d94', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'b88d0da4772cf171854c369fa4e01131377c4f35', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '4f024b948ea1ebce1ef914b1149420cd9ed817dd', class: "actions" }, h("slot", { key: 'b1f6cff936e2a8fa5c0ff4e3bcc938a5c4f88e0c', name: "actions" }))));
+        return (h(Host, { key: '35883b5d4a92d10b5b010d822fb2233604464f9b', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '6fdec3af75bab2b076651b8cfef4aec8e23326a6', class: "brand" }, h("slot", { key: '3127b4223b8bebfe425efc7ce45626f37fbf76b9', name: "brand" }, h("img", { key: '20b3dd598e320c6950fb08bbd55dd80c47552eaf', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'c3bf07f78930085c1a7b89421506bcd41d139911', "aria-label": "Hauptnavigation" }, h("div", { key: 'fbc5199080f52da4f10c8c14fbbc0877ecc5f31c', role: "menubar", class: "primary-menubar" }, h("slot", { key: '4210d213dcf7a1a27a73f2a9cf7ff97fec62f0db', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '7b91c269f75e1245f75d471ec5bb7eeabfe1094d', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'e23eb0f222b49d912bb45870df6d9b0d01f43788', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '4b19026d5b2e54aa7aed072ce57de4acaa75cb4f', class: "actions" }, h("slot", { key: '8f02d5d178bb60b40604fcd1be74d373d89c911f', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }
@@ -119,7 +125,7 @@ export class LmvzHeader extends ReactiveControllerHost {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -143,3 +149,4 @@ export class LmvzHeader extends ReactiveControllerHost {
             }];
     }
 }
+//# sourceMappingURL=lmvz-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lmvz-header.js","sourceRoot":"","sources":["../../../../src/components/lmvz-header/lmvz-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport logo from '../../assets/icons/Logo.svg';\nimport { AriaValidationController, type AriaValidationHost } from '../../utils/aria/aria-validation-controller';\nimport { ListKeyboardNavigationController, type ListKeyboardNavigationHost } from '../../utils/aria/list-keyboard-controller';\nimport { ReactiveControllerHost } from '../../utils/reactive-controller-host';\n\n/**\n * An accessible, application-style navigation header component, that renders two connected levels of navigation.\n *\n * @slot brand - The branding area, typically containing a logo and/or site title.\n *\n * @slot nav-primary - The first level of the navigation.\n * This is required and must only contain <lmvz-menuitem> elements.\n * Each menuitem should have an id, which will be used to link it to the corresponding secondary nav items.\n *\n * @slot connect-nav-`lmvzActiveNav` - The second level of the navigation. This is optional and must also contain <lmvz-menuitem> elements.\n * Only if the secondary nav items' `slot=\"${name}\"` matches \"connect-nav-`lmvzActiveNav`\"\n * (including lmvzActiveNav from the component's props),\n * then these secondary items will be displayed in the second level navigation.\n *\n * @slot actions - An optional slot for actions, such as user profile, settings, logout, etc. This content is aligned to the right side of the header.\n */\n@Component({\n  tag: 'lmvz-header',\n  styleUrl: './lmvz-header.css',\n  shadow: true,\n})\nexport class LmvzHeader extends ReactiveControllerHost implements AriaValidationHost, ListKeyboardNavigationHost {\n  @Element() readonly el!: HTMLElement;\n  get validationEl() {\n    return this.el;\n  }\n\n  private primarySlot?: HTMLSlotElement;\n  private secondarySlot?: HTMLSlotElement;\n  private secondaryNav?: HTMLElement;\n\n  private keyboardNavigationController = new ListKeyboardNavigationController(this);\n\n  private get primaryMenuitems() {\n    return this.primarySlot?.assignedElements({ flatten: false }) || [];\n  }\n\n  private get secondaryMenuitems() {\n    return this.secondarySlot?.assignedElements({ flatten: true }) || [];\n  }\n\n  @Prop({ reflect: true }) get role() {\n    return 'banner';\n  }\n\n  @Prop() lmvzActiveNav?: string;\n\n  get secondarySlotName() {\n    return `connect-nav-${this.lmvzActiveNav}`;\n  }\n\n  constructor() {\n    super();\n    this.addController(new AriaValidationController(this, { reValidateOnPropChanges: true }));\n    this.addController(this.keyboardNavigationController);\n  }\n\n  @Watch('lmvzActiveNav')\n  handleActiveNavChange() {\n    this.updateElementsActive();\n  }\n\n  override componentDidLoad() {\n    this.primarySlot?.addEventListener('slotchange', this.handlePrimaryNavItemsChange.bind(this));\n    this.handlePrimaryNavItemsChange(); // initial check for already assigned elements\n    this.secondarySlot?.addEventListener('slotchange', this.handleSecondaryNavItemsChange.bind(this));\n    super.componentDidLoad();\n  }\n\n  private handlePrimaryNavItemsChange() {\n    const items = this.primaryMenuitems;\n    if (!items.length) {\n      console.warn('Primary slot has no assigned elements. Please add navigation items to the primary slot.');\n      return;\n    }\n\n    items.forEach((el) => {\n      el.setAttribute('aria-haspopup', 'true');\n      el.setAttribute('aria-controls', `nav-secondary`);\n    });\n    this.updateElementsActive();\n    this.updateKeyboardNavSubjects();\n  }\n\n  private handleSecondaryNavItemsChange() {\n    const items = this.secondaryMenuitems;\n    if (!items.length) {\n      // It's valid to have no secondary items for a given primary item, so we just return early without warning\n      return;\n    }\n    this.updateKeyboardNavSubjects();\n  }\n\n  private updateKeyboardNavSubjects() {\n    this.keyboardNavigationController.updateElements([...this.primaryMenuitems, ...this.secondaryMenuitems]);\n  }\n\n  private updateElementsActive() {\n    const items = this.primaryMenuitems;\n    if (!items.length) return;\n\n    let label = '';\n    items.forEach((el) => {\n      const isActive = el.id === this.lmvzActiveNav;\n      if (isActive) label = el.textContent || el.id;\n      el.setAttribute('aria-expanded', isActive ? 'true' : 'false');\n    });\n    if (!label) return;\n\n    this.secondaryNav?.setAttribute('aria-label', `Untermenü für ${label}`);\n  }\n\n  private delegateFocus() {\n    // If the header itself receives focus, delegate it to the first focusable element in the primary nav\n    const firstFocusable = this.primaryMenuitems[0] as HTMLElement | undefined;\n    if (firstFocusable) {\n      firstFocusable.focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onFocus={this.delegateFocus.bind(this)}>\n        <div class=\"brand\">\n          <slot name=\"brand\">\n            <img id=\"fallback-logo-lmvz\" src={logo} alt=\"Lehrmittelverlag Zürich\" />\n          </slot>\n          {/* brand image, title, etc. */}\n        </div>\n\n        <nav aria-label=\"Hauptnavigation\">\n          <div role=\"menubar\" class=\"primary-menubar\">\n            <slot name=\"nav-primary\" ref={(el) => (this.primarySlot = el)}></slot>\n\n            <div role=\"menu\" id=\"nav-secondary\" class=\"secondary-menubar\" hidden={!this.lmvzActiveNav} ref={(el) => (this.secondaryNav = el)}>\n              <slot name={this.secondarySlotName} ref={(el) => (this.secondarySlot = el)}></slot>\n            </div>\n          </div>\n        </nav>\n\n        <div class=\"actions\">\n          <slot name=\"actions\"></slot>\n          {/* user avatar, name, settings, etc. */}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}