@lmvz-ds/components 0.35.0 → 0.35.1

package/hydrate/index.js

@@ -5418,7 +5418,7 @@ class LmvzAction {
         this.actionClick.emit(event);
     }
     render() {
-        return (hAsync(Host, { key: '15c0f20e08cd5019abfd3bb71ec69d175dc5ba48', onClick: this._onClick.bind(this) }, hAsync("slot", { key: 'f71a7853168d1b66b0a50b0f971d140385530ac3' })));
+        return (hAsync(Host, { key: '4d83f95393704400034fef7313ac52bcc100be95', onClick: this._onClick.bind(this) }, hAsync("slot", { key: 'ffbdeca0877eb9a76bc4ac1b8b77b37b60fdabd5' })));
     }
     static get style() { return lmvzActionCss(); }
     static get cmpMeta() { return {
@@ -5771,13 +5771,17 @@ function findFormByRef(form, el) {
 }
 function isInteractiveElement(el) {
     const tagName = el.tagName.toLowerCase();
-    if (['button', 'input', 'select', 'textarea'].includes(tagName)) {
+    if (['button', 'lmvz-button', 'input', 'lmvz-input', 'select', 'lmvz-select', 'textarea'].includes(tagName)) {
         return true;
     }
-    if (tagName === 'a' && el.hasAttribute('href')) {
+    if (['a', 'lmvz-link'].includes(tagName) && el.hasAttribute('href')) {
         return true;
     }
     if (el.hasAttribute('tabindex')) {
+        const tabindex = parseInt(el.getAttribute('tabindex') ?? '-1');
+        if (isNaN(tabindex) || tabindex < 0) {
+            console.warn('Interactive element is not keyboard accessible due to negative tabindex!', el);
+        }
         return true;
     }
     const role = el.getAttribute('role');
@@ -5789,7 +5793,67 @@ function isInteractiveElement(el) {
     }
     return false;
 }
+function isHtmlElement(element) {
+    return element instanceof HTMLElement;
+}
+
+const META_BASE = '__LMVZ__';
+class ReactiveControllerHost {
+    controllers = new Set();
+    addController(controller) {
+        this.controllers.add(controller);
+    }
+    removeController(controller) {
+        this.controllers.delete(controller);
+    }
+    get activeControllers() {
+        return Array.from(this.controllers).filter((controller) => !controller.disabled);
+    }
+    connectedCallback() {
+        if (!this.controllers.size) {
+            console.warn('ReactiveControllerHost connected with no controllers registered.', this);
+        }
+        this.activeControllers.forEach((controller) => controller.hostConnected?.());
+    }
+    disconnectedCallback() {
+        this.activeControllers.forEach((controller) => controller.hostDisconnected?.());
+    }
+    componentWillLoad() {
+        this.activeControllers.forEach((controller) => controller.hostWillLoad?.());
+    }
+    componentDidLoad() {
+        this.activeControllers.forEach((controller) => controller.hostDidLoad?.());
+    }
+    componentWillRender() {
+        this.activeControllers.forEach((controller) => controller.hostWillRender?.());
+    }
+    componentDidRender() {
+        this.activeControllers.forEach((controller) => controller.hostDidRender?.());
+    }
+    componentWillUpdate() {
+        this.activeControllers.forEach((controller) => controller.hostWillUpdate?.());
+    }
+    componentDidUpdate() {
+        this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
+    }
+}
+function registerLmvzComponentMetaInfo(el, key, info) {
+    if (!el) {
+        console.warn('component is undefined');
+        return;
+    }
+    const cmp = el;
+    if (!cmp[META_BASE])
+        cmp[META_BASE] = {};
+    cmp[META_BASE][key] = info;
+}
+function getLmvzComponentMetaInfo(el, key) {
+    return el?.[META_BASE]?.[key];
+}
 
+function isFocusControllerHost(el) {
+    return Boolean(getLmvzComponentMetaInfo(el, 'isFocusControllerHost'));
+}
 const defaultConfig = {
     orientation: 'both',
     enableHomeAndEnd: false,
@@ -5808,6 +5872,7 @@ class DirectionalFocusController {
         };
     }
     hostConnected() {
+        registerLmvzComponentMetaInfo(this.host.el, 'isFocusControllerHost', true);
         this.host.el.addEventListener('keydown', this.handleKeydown);
         this.syncManagedFocusTarget();
     }
@@ -5824,6 +5889,12 @@ class DirectionalFocusController {
         this.currentElement = element !== null && element !== undefined && 'focus' in element && element.nodeType === 1 ? element : undefined;
         this.syncManagedFocusTarget(previousElement);
     }
+    async initFocus() {
+        const element = this.selectManagedElement();
+        if (!element)
+            return;
+        this.applyFocusTarget(element, true);
+    }
     handleKeydown = (event) => {
         const intent = this.getFocusIntent(event.key);
         if (!intent)
@@ -5963,46 +6034,6 @@ function resolveElement(el) {
     return isDirectionalFocusReceiver(el) ? (el.resolveFocusableElement() ?? el) : el;
 }
 
-class ReactiveControllerHost {
-    controllers = new Set();
-    addController(controller) {
-        this.controllers.add(controller);
-    }
-    removeController(controller) {
-        this.controllers.delete(controller);
-    }
-    get activeControllers() {
-        return Array.from(this.controllers).filter((controller) => !controller.disabled);
-    }
-    connectedCallback() {
-        if (!this.controllers.size) {
-            console.warn('ReactiveControllerHost connected with no controllers registered.', this);
-        }
-        this.activeControllers.forEach((controller) => controller.hostConnected?.());
-    }
-    disconnectedCallback() {
-        this.activeControllers.forEach((controller) => controller.hostDisconnected?.());
-    }
-    componentWillLoad() {
-        this.activeControllers.forEach((controller) => controller.hostWillLoad?.());
-    }
-    componentDidLoad() {
-        this.activeControllers.forEach((controller) => controller.hostDidLoad?.());
-    }
-    componentWillRender() {
-        this.activeControllers.forEach((controller) => controller.hostWillRender?.());
-    }
-    componentDidRender() {
-        this.activeControllers.forEach((controller) => controller.hostDidRender?.());
-    }
-    componentWillUpdate() {
-        this.activeControllers.forEach((controller) => controller.hostWillUpdate?.());
-    }
-    componentDidUpdate() {
-        this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
-    }
-}
-
 const lmvzActionListCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @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); }  } .sc-lmvz-action-list-h {   display: flex;   flex-direction: column;   gap: 0;   min-width: 15vw;          button {         --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-override, center);   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   min-height: var(--lmvz-button-min-height);   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-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-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; }  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-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); }  button.primary {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); }  button.primary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); }  button.primary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); }  button.danger {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.danger:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.danger:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.tertiary {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); }  button.small {   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5     Router)); }  button.large {   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5     Router)); }     lmvz-button,   button {     --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);     --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));     --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));     --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);     --lmvz-button-content-justification-override: normal;      width: 100%;     display: block;   }    button {     --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));      &: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));     }      &: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));     }   } }`;
 
 class LmvzActionList extends ReactiveControllerHost {
@@ -6032,6 +6063,9 @@ class LmvzActionList extends ReactiveControllerHost {
         this.handleSlotChange();
         super.componentDidLoad();
     }
+    async initFocus() {
+        this.focusController.initFocus();
+    }
     handleSlotChange = () => {
         const slot = this.slotEl;
         if (!slot)
@@ -6052,14 +6086,15 @@ class LmvzActionList extends ReactiveControllerHost {
     };
     render() {
         const ariaLabel = this.label || undefined;
-        return (hAsync(Host, { key: '1180ac5cb2ad83db0279a5cd2ce15d9ab75d03ca', role: "menu", "aria-label": ariaLabel }, hAsync("slot", { key: '479179e7ec42780e73936d50703ff46d48a89efb', onSlotchange: this.handleSlotChange, ref: (el) => (this.slotEl = el) })));
+        return (hAsync(Host, { key: '9dee495856e733cb17f30d0d8588362a8dcb28ce', role: "menu", "aria-label": ariaLabel }, hAsync("slot", { key: 'c6454dbbe63eed5be01f3247934245d1cc1ad6e2', onSlotchange: this.handleSlotChange, ref: (el) => (this.slotEl = el) })));
     }
     static get style() { return lmvzActionListCss(); }
     static get cmpMeta() { return {
         "$flags$": 774,
         "$tagName$": "lmvz-action-list",
         "$members$": {
-            "label": [1]
+            "label": [1],
+            "initFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -6180,26 +6215,30 @@ function requireClassnames () {
 var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
+function filterKeysAndCallback(callback, keys = [' ']) {
+    return (event) => {
+        if (!keys.includes(event.key))
+            return;
+        event.preventDefault();
+        callback(event);
+    };
+}
+
 class ElementActivationController {
     host;
     config;
+    handlers = new AbortController();
     constructor(host, config) {
         this.host = host;
         this.config = config;
+        registerLmvzComponentMetaInfo(host.el, 'isLmvzElementActivationHost', true);
     }
     hostDidLoad() {
-        if (!this.host.el.hasAttribute('tabindex')) {
-            console.warn('Interactive element does not have a tabindex attribute!', this.host.el);
-        }
-        this.host.el.addEventListener('keydown', this.handleKeyDown.bind(this));
-        this.host.el.addEventListener('click', this.handleActivation.bind(this));
+        bindHandlers(this.host.el, this.handleActivation.bind(this), this.handlers.signal, this.config?.keys ?? ['Enter', ' ']);
+    }
+    hostDisconnected() {
+        this.handlers.abort();
     }
-    handleKeyDown = (event) => {
-        if ((this.config?.keys ?? ['Enter', ' ']).includes(event.key)) {
-            event.preventDefault();
-            this.handleActivation(event);
-        }
-    };
     handleActivation = (event) => {
         this.host.lmvzActivation.emit();
         if (this.config?.localHandler) {
@@ -6207,6 +6246,24 @@ class ElementActivationController {
         }
     };
 }
+function bindHandlers(target, handler, abortSignal, keys = [' ']) {
+    target.addEventListener('keydown', filterKeysAndCallback(handler, keys), { signal: abortSignal });
+    target.addEventListener('click', handler, { signal: abortSignal });
+}
+function isLmvzElementActivationHost(el) {
+    return getLmvzComponentMetaInfo(el, 'isLmvzElementActivationHost');
+}
+function addElementActivationListener(...[target, handler, abortSignal, keys]) {
+    if (isLmvzElementActivationHost(target)) {
+        target.addEventListener('lmvzActivation', handler, { signal: abortSignal });
+        return;
+    }
+    if (!isInteractiveElement(target)) {
+        console.error('addElementActivationListener called with non-interactive element');
+        return;
+    }
+    bindHandlers(target, handler, abortSignal, keys);
+}
 
 const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('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); }  } :host {         button {         --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-override, center);   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   min-height: var(--lmvz-button-min-height);   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-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-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; }  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-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); }  button.primary {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); }  button.primary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); }  button.primary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); }  button.danger {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));   --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.danger:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.danger:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); }  button.tertiary {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));   --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); }  button.small {   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5     Router)); }  button.large {   --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));   --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));   --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5     Router)); }     display: inline-block;    button {     width: 100%;   } } ::slotted(*) {   --lmvz-component-color: var(--lmvz-button-color); } `;
 
@@ -6237,7 +6294,6 @@ class LmvzButton extends ReactiveControllerHost {
         this.addController(new AriaValidationController(this));
         this.addController(new ElementActivationController(this, {
             localHandler: this.handleClick.bind(this),
-            keys: ['Enter'],
         }));
     }
     connectedCallback() {
@@ -6298,7 +6354,7 @@ class LmvzButton extends ReactiveControllerHost {
     };
     render() {
         this.renderHiddenButton();
-        return (hAsync(Host, { key: 'f3e619dca398c3a8a78e9d2f8c3df4178b2531b2', role: "presentation" }, hAsync("button", { key: 'eb1aac6756a70968d3a72cb40c1d52d96340423e', ref: (e) => (this.validationEl = e), part: "button", role: this.buttonRole, disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, hAsync("slot", { key: '786ff1c10ae05eda646c77ac8779813be6e51949' }))));
+        return (hAsync(Host, { key: 'eb0ee982f50f1e41b2aa72a0598d739b972cbcdf', role: "presentation" }, hAsync("button", { key: 'aed6f44f51222e31d5f1deec952c0d81b8f1200a', ref: (e) => (this.validationEl = e), part: "button", role: this.buttonRole, disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, hAsync("slot", { key: '2aaedfde3c0d6ebf426f20a8489b22c2a356767e' }))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return lmvzButtonCss(); }
@@ -8976,6 +9032,9 @@ class LmvzHeader extends ReactiveControllerHost {
     handleActiveNavChange() {
         this.updateElementsActive();
     }
+    async initFocus() {
+        this.keyboardNavigationController.initFocus();
+    }
     componentDidLoad() {
         this.primarySlot?.addEventListener('slotchange', this.handlePrimaryNavItemsChange.bind(this));
         this.handlePrimaryNavItemsChange();
@@ -9027,7 +9086,7 @@ class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (hAsync(Host, { key: '5730219e990fc0f131ffacc7c88e6a5311553399', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: '7285f2dcac7d60c5d93328aa0e2fe8aa6b7b379c', class: "brand" }, hAsync("slot", { key: 'd06d953ee82eab20da3f383c15032bcbe8803ff9', name: "brand" }, hAsync("img", { key: 'd2441ce0efbf99c05f6344051703a96ffb376450', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '7f092938728af5cb6568383a6622df49f222dc93', "aria-label": "Hauptnavigation" }, hAsync("div", { key: 'caa56893d6185aebb89661e62a555407675ccc2a', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: '90684f49cd3d53e20a63d4ebc37ec24e630bc313', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: 'ead46c08c6833565a55cd7af27fbece4e4468a03', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '3f2ba617d9ed78abb9ab94b9515b02bb6836385a', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: '6fc79122baa3fd95992cbf30a465c3b40438a18f', class: "actions" }, hAsync("slot", { key: 'c427f5a3ad693169e267060b9076086fd0e37670', name: "actions" }))));
+        return (hAsync(Host, { key: 'ce4b8cf9f7687e4af97d45908e2f0e484b90684f', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: 'a2213d8038d126e47262c4ec18071dd4302152db', class: "brand" }, hAsync("slot", { key: '68a0a1e2b21859d78d2f9a7d3f5c86020c52c225', name: "brand" }, hAsync("img", { key: 'd0a878bc4c9f7a3460e857fb5aa52f1d942a0423', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '687791624d6ced477bc0cce73ce97b26c7d03af0', "aria-label": "Hauptnavigation" }, hAsync("div", { key: 'a9e8fa4a57e619a3d3b1056bfc0d5df74e89f630', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: 'f75f0a3bed2267aff902490f1905c67ad1b7e6be', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: '3cf2d099bed99e4ba7b32a2f3171c69663785012', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '85dbe77ea8ab62aa400640495e11e2d174ca5210', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: 'cf5d135a5b969af6a2bbb5432a10f8e1b9af1dca', class: "actions" }, hAsync("slot", { key: '1a0323668942151c071a24238039c7a216358363', name: "actions" }))));
     }
     static get watchers() { return {
         "lmvzActiveNav": [{
@@ -9040,7 +9099,8 @@ class LmvzHeader extends ReactiveControllerHost {
         "$tagName$": "lmvz-header",
         "$members$": {
             "role": [2561],
-            "lmvzActiveNav": [1, "lmvz-active-nav"]
+            "lmvzActiveNav": [1, "lmvz-active-nav"],
+            "initFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9505,14 +9565,47 @@ const TYPE_SVG = {
     warning: WARNING_SVG,
 };
 const BLOCK_TAGS = new Set([
-    'ADDRESS', 'ARTICLE', 'ASIDE', 'BLOCKQUOTE',
-    'CAPTION', 'COLGROUP',
-    'DD', 'DETAILS', 'DIALOG', 'DIV', 'DL', 'DT',
-    'FIELDSET', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'FORM',
-    'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEADER', 'HGROUP', 'HR',
-    'LI', 'MAIN', 'MENU', 'NAV',
-    'OL', 'P', 'PRE',
-    'SECTION', 'TABLE', 'TBODY', 'TD', 'TH', 'THEAD', 'TFOOT', 'TR',
+    'ADDRESS',
+    'ARTICLE',
+    'ASIDE',
+    'BLOCKQUOTE',
+    'CAPTION',
+    'COLGROUP',
+    'DD',
+    'DETAILS',
+    'DIALOG',
+    'DIV',
+    'DL',
+    'DT',
+    'FIELDSET',
+    'FIGCAPTION',
+    'FIGURE',
+    'FOOTER',
+    'FORM',
+    'H1',
+    'H2',
+    'H3',
+    'H4',
+    'H5',
+    'H6',
+    'HEADER',
+    'HGROUP',
+    'HR',
+    'LI',
+    'MAIN',
+    'MENU',
+    'NAV',
+    'OL',
+    'P',
+    'PRE',
+    'SECTION',
+    'TABLE',
+    'TBODY',
+    'TD',
+    'TH',
+    'THEAD',
+    'TFOOT',
+    'TR',
     'UL',
 ]);
 class LmvzMessage {
@@ -9558,7 +9651,7 @@ class LmvzMessage {
     }
     render() {
         const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
-        return (hAsync(Host, { key: 'f422e8ee4bb4466757c081bc6b33761db15cb02d', role: role }, this.leadingIcon && hAsync("span", { key: 'c4077083db459a65cacce2cbb8e8dbb477572d95', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), hAsync("span", { key: '77c3af94194adc2b663c6d6626951e5789e17686', class: "message" }, hAsync("slot", { key: '8db714f6bd0ac80a3c77a2768431baa37a63b3d1', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (hAsync("lmvz-button", { key: 'f75e835f39e97ea217727b55dc842ceda004834b', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (hAsync("lmvz-button", { key: '51b04ad48a68e0843445104e303eae5bb4cdd351', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, hAsync("lmvz-icon", { key: '5949210f479a6a19f1c4bb9d3c91a77a1c0ad8a6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
+        return (hAsync(Host, { key: '99dad82a6300fb8d089f1ea688186d4b4316a058', role: role }, this.leadingIcon && hAsync("span", { key: '2adf33102f7075a83ebf29d9b6e0d433a17beb68', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), hAsync("span", { key: '286d3d0ea065534b84be18c927b2fcd7f30f34bd', class: "message" }, hAsync("slot", { key: '261e865980515a816382b2c7c6b3a52b500308bf', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (hAsync("lmvz-button", { key: '46d964c0490bbdd47426fc228db0e3ccb108b416', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (hAsync("lmvz-button", { key: 'ce1ec8beb756c2e11c948e227f94f81bd5568c88', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, hAsync("lmvz-icon", { key: '5361c424e77ffea7984c2fd42357666cd86ba1d6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
     }
     static get style() { return lmvzMessageCss(); }
     static get cmpMeta() { return {
@@ -9802,7 +9895,7 @@ class LmvzModal extends ReactiveControllerHost {
         this.hasHeader = this.hasAssignedContent(this.headerSlot);
     };
     render() {
-        return (hAsync(Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, hAsync("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, hAsync("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: 'dcebb06482cdef7423c6b62ef877ca9aaabf55a4', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '0db22c68fe164ed2a33bfaeacf9eac619424f464', icon: closeIconSvg }))), hAsync("div", { key: 'ef402c343f2c68210351f7556eec08f2e9be851b', class: "body" }, hAsync("slot", { key: '3fe86dc88c88c2cf7bfe3429c62cb2047b64611a' })), hAsync("footer", { key: '92b7bdab1ffe700749fc029723f70913f436397d', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, hAsync("lmvz-button-group", { key: '7e1b310fb1b20449ead14d0702af4977c74198dd', ref: (element) => (this.buttonGroupEl = element) }, hAsync("slot", { key: 'cb2187ab2758c61e80b65f9fc55c6be5f9fd0458', name: "actions" })))))));
+        return (hAsync(Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, hAsync("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, hAsync("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: '72e17391097dfa756e572764f40080b6eec222b2', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onLmvzActivation: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '7bbae1aefa9ccc6646d5861683e3476339a545e4', icon: closeIconSvg }))), hAsync("div", { key: '9f22628448e9af527eb10ef2602c498afc55c029', class: "body" }, hAsync("slot", { key: '413e72707749b3abc987ef47a81cccda4b874c84' })), hAsync("footer", { key: 'a1a8f648e88d1f9045e9cf866d332aac69e033df', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, hAsync("lmvz-button-group", { key: '7d7eeee7a2551a09bfb4fc513bde48828be5ee8b', ref: (element) => (this.buttonGroupEl = element) }, hAsync("slot", { key: '76b00523167c5fa08f11fc351a37638227401711', name: "actions" })))))));
     }
     static get watchers() { return {
         "open": [{
@@ -11191,10 +11284,12 @@ class LmvzPopover {
         this.lmvzCancel = createEvent(this, "lmvzCancel", 7);
     }
     get el() { return getElement(this); }
-    closureController = new AbortController();
+    extEventController = new AbortController();
+    closureController;
     containerEl;
     slotEl;
     previouslyFocusedElement = null;
+    anchorEl;
     open = false;
     anchor;
     placement = 'bottom-start';
@@ -11220,7 +11315,6 @@ class LmvzPopover {
     }
     componentDidLoad() {
         autoAssignId(this.el);
-        validatePopoverAria(this.el, this.label, this.anchor, this.resolveAnchor());
     }
     handleOpenChange(isOpen) {
         if (isOpen) {
@@ -11230,24 +11324,40 @@ class LmvzPopover {
             this.onClose();
         }
     }
-    handleAnchorChange() {
-        if (this.open) {
-            this.updatePosition();
+    async handleAnchorChange(anchor) {
+        if (!anchor) {
+            console.warn('anchor property missing for popover', this.el?.id);
+            this.anchor = undefined;
+            return;
         }
+        await wait();
+        this.anchorEl = typeof anchor === 'string' ? document.getElementById(anchor) : anchor;
+        this.setupAnchorEl();
+        if (!this.open)
+            return;
+        this.updatePosition();
     }
     disconnectedCallback() {
         this.removeCloseHandlers();
+        this.extEventController.abort();
     }
-    resolveAnchor() {
-        if (!this.anchor)
-            return null;
-        if (typeof this.anchor === 'string') {
-            return document.getElementById(this.anchor);
+    setupAnchorEl() {
+        const { anchorEl } = this;
+        if (!anchorEl) {
+            console.warn('no anchor element set for', this);
+            return;
+        }
+        if (!anchorEl.hasAttribute('aria-haspopup')) {
+            anchorEl.setAttribute('aria-haspopup', 'dialog');
+        }
+        anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
+        if (isActionButton(anchorEl)) {
+            addElementActivationListener(anchorEl, this.toggle.bind(this), this.extEventController.signal);
         }
-        return this.anchor;
+        validatePopoverAria(this.el, this.label, this.anchor, anchorEl);
     }
     async updatePosition() {
-        const anchorEl = this.resolveAnchor();
+        const { anchorEl } = this;
         const container = this.containerEl;
         if (!anchorEl || !container)
             return;
@@ -11262,7 +11372,6 @@ class LmvzPopover {
     async onOpen() {
         this.previouslyFocusedElement = getDeepActiveElement(document);
         this.setupCloseHandlers();
-        console.log('onOpen');
         await waitFrame();
         await this.updatePosition();
         autoAssignId(this.el);
@@ -11280,20 +11389,14 @@ class LmvzPopover {
         this.lmvzClose.emit();
     }
     applyAnchorAriaOpen() {
-        const anchorEl = this.resolveAnchor();
-        if (!anchorEl)
+        if (!this.anchorEl)
             return;
-        if (!anchorEl.hasAttribute('aria-haspopup')) {
-            anchorEl.setAttribute('aria-haspopup', 'dialog');
-        }
-        anchorEl.setAttribute('aria-expanded', 'true');
-        anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
+        this.anchorEl.setAttribute('aria-expanded', 'true');
     }
     applyAnchorAriaClose() {
-        const anchorEl = this.resolveAnchor();
-        if (!anchorEl)
+        if (!this.anchorEl)
             return;
-        anchorEl.setAttribute('aria-expanded', 'false');
+        this.anchorEl.setAttribute('aria-expanded', 'false');
     }
     focusFirst() {
         const { slotEl } = this;
@@ -11301,6 +11404,12 @@ class LmvzPopover {
             return;
         const assigned = slotEl.assignedElements({ flatten: true });
         for (const el of assigned) {
+            if (!isHtmlElement(el))
+                continue;
+            if (isFocusControllerHost(el)) {
+                el.initFocus();
+                return;
+            }
             const focusable = walkShadowDOMUntil(el, canReceiveFocus);
             if (focusable) {
                 focusable.focus();
@@ -11322,6 +11431,7 @@ class LmvzPopover {
         }
     }
     setupCloseHandlers() {
+        this.closureController = new AbortController();
         const options = { signal: this.closureController.signal };
         document.addEventListener('mousedown', (event) => {
             if (!this.open)
@@ -11339,17 +11449,17 @@ class LmvzPopover {
         }, options);
     }
     removeCloseHandlers() {
-        this.closureController.abort();
+        this.closureController?.abort();
     }
     render() {
-        return (hAsync(Host, { key: '3dd462a66f17c1617e44787107379d9e4d8ca321' }, hAsync("div", { key: '27106bc8f3169eb07e0d671635074ddb53feb652', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, hAsync("slot", { key: '3401e621d999a225aeb7cb23fa4f5412544a6dab', ref: (el) => (this.slotEl = el) }))));
+        return (hAsync(Host, { key: '744dae23d80c1e81a0b8bd2e9fcb02c6669d54cd' }, hAsync("div", { key: '7f40e25f1e05738b2bbf900b90613004eb188395', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, hAsync("slot", { key: '5a400fd9e697254007973f2dce172588fe3760ee', ref: (el) => (this.slotEl = el) }))));
     }
     static get watchers() { return {
         "open": [{
                 "handleOpenChange": 0
             }],
         "anchor": [{
-                "handleAnchorChange": 0
+                "handleAnchorChange": 1
             }]
     }; }
     static get style() { return lmvzPopoverCss(); }
@@ -11363,6 +11473,7 @@ class LmvzPopover {
             "size": [1],
             "autoFocus": [4, "auto-focus"],
             "label": [1],
+            "anchorEl": [32],
             "show": [64],
             "hide": [64],
             "toggle": [64]
@@ -12037,6 +12148,9 @@ class LmvzTabs extends ReactiveControllerHost {
         this.syncFocusTargets();
         this.syncTabOrientation();
     }
+    async initFocus() {
+        this.focusController.initFocus();
+    }
     async activateTab(value) {
         const tab = this.findTabByValue(value);
         if (!tab || this.isTabDisabled(tab))
@@ -12226,7 +12340,7 @@ class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (hAsync(Host, { key: '2f681e7bfc21bd513bcb994f92c893bbc03ff713', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: '456ce3d11ccacd3e79995ffa643bb164127344b3', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, hAsync("slot", { key: 'e4e4c698dde6416e0ba4d319e64d9ba3a2f79a19', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '3b90c8e7006dbf75e22b8377a18ac47488b1184f', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: '4cb4a9b04ab529a1bc7744a1893acf9a71c5c65e', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (hAsync(Host, { key: '98df29f336a3ea47efa6c76a773de28c5174c718', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: '7e35ae180c4ebf2f5a82e0fad0977cd3c38ac659', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, hAsync("slot", { key: '2520bc8b8988a60b37a067828ad237bf8dcfcc59', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: 'bd4a954b6caca2d9f2eb588f58590821ec4af888', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: 'b4dffff530328e6e4c8d305895ef4dd2d5952757', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get watchers() { return {
         "value": [{
@@ -12244,6 +12358,7 @@ class LmvzTabs extends ReactiveControllerHost {
             "value": [1537],
             "orientation": [1537],
             "resolvedValue": [32],
+            "initFocus": [64],
             "activateTab": [64],
             "getTabElements": [64],
             "setTabPanelIds": [64]