@lmvz-ds/components 0.26.0 → 0.27.1

package/hydrate/index.js

@@ -8404,7 +8404,7 @@ class LmvzCard {
 
 const checkmarkSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzUgMTIuNTYyNUw4LjgzMDc5IDE3LjYyNUwyMC40Mzc1IDYuMzc1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
 
-const lmvzCheckboxCss = () => `@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; }  } .sc-lmvz-checkbox-h {   display: inline-block;    --checkbox-box-size: var(--lmvz-global-s18, 18px);    --checkbox-border-radius: var(--lmvz-global-s4, 4px);     --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);    --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe);    --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);    --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);   --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);   --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);   --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);    --checkbox-easing: var(--lmvz-global-easing-default, ease);   --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox {   display: flex;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   cursor: pointer;         text-decoration: none;   background-color: transparent;   transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox {   position: absolute;   opacity: 0;   width: var(--checkbox-box-size);   height: var(--checkbox-box-size);   margin: 0;   cursor: pointer;   z-index: 1; } .box.sc-lmvz-checkbox {   display: flex;   align-items: center;   justify-content: center;   width: var(--checkbox-box-size);   height: var(--checkbox-box-size);   background-color: var(--checkbox-bg);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color);   border-radius: var(--checkbox-border-radius);   color: var(--checkbox-checkmark-color);   transition:     border-color var(--checkbox-duration) var(--checkbox-easing),     background-color var(--checkbox-duration) var(--checkbox-easing);   pointer-events: none;   flex-shrink: 0; } .indicator.sc-lmvz-checkbox {   display: flex;   align-items: center;   justify-content: center;   line-height: 0; } .content.sc-lmvz-checkbox {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0; } label.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--checkbox-label-color);   transition: color var(--checkbox-duration) var(--checkbox-easing); } .helper-text.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5     Router);      color: var(--checkbox-helper-color);   margin-block-start: 2px; } .error-text.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5     Router);   color: var(--checkbox-error-color);   display: block;   margin-block-start: 4px;   padding-inline: 10px; }  @media (hover: hover) {   .pill.sc-lmvz-checkbox:hover {     background-color: var(--checkbox-wrapper-bg-hover);   }    .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox {     border-color: var(--checkbox-border-color-hover);   } }  [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox {   background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {   border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox {   color: var(--checkbox-label-color-checked);    }  [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {   border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox {   color: var(--checkbox-error-color); }  [disabled].sc-lmvz-checkbox-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none; } [disabled].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox {   cursor: not-allowed; } [disabled].sc-lmvz-checkbox-h input.sc-lmvz-checkbox {   cursor: not-allowed; } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); }  @media (forced-colors: active) {   .box.sc-lmvz-checkbox {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {     border-color: Highlight;     background-color: Field;   }    .indicator.sc-lmvz-checkbox {     color: ButtonText;   }    [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox {     color: HighlightText;   }    .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox {     outline-color: Highlight;     box-shadow: none;   } }`;
+const lmvzCheckboxCss = () => `@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; }  } .sc-lmvz-checkbox-h {   display: inline-block;    --checkbox-box-size: var(--lmvz-global-s18, 18px);    --checkbox-border-radius: var(--lmvz-global-s4, 4px);     --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #e52a31);    --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe);    --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);    --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);   --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #7a7a7a);   --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);   --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);    --checkbox-easing: var(--lmvz-global-easing-default, ease);   --checkbox-duration: 0.2s; } .pill.sc-lmvz-checkbox {   display: flex;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);         text-decoration: none;   background-color: transparent;   transition: background-color var(--checkbox-duration) var(--checkbox-easing); } input.sc-lmvz-checkbox {   position: absolute;   opacity: 0;   width: var(--checkbox-box-size);   height: var(--checkbox-box-size);   margin: 0;   cursor: pointer;   z-index: 1; } .box.sc-lmvz-checkbox {   display: flex;   align-items: center;   justify-content: center;   width: var(--checkbox-box-size);   height: var(--checkbox-box-size);   background-color: var(--checkbox-bg);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color);   border-radius: var(--checkbox-border-radius);   color: var(--checkbox-checkmark-color);   cursor: pointer;   transition:     border-color var(--checkbox-duration) var(--checkbox-easing),     background-color var(--checkbox-duration) var(--checkbox-easing);   pointer-events: none;   flex-shrink: 0; } .indicator.sc-lmvz-checkbox {   display: flex;   align-items: center;   justify-content: center;   line-height: 0; } .content.sc-lmvz-checkbox {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0;   cursor: pointer; } label.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--checkbox-label-color);   transition: color var(--checkbox-duration) var(--checkbox-easing);   cursor: pointer; } .helper-text.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5     Router);      color: var(--checkbox-helper-color);   margin-block-start: 2px; } .error-text.sc-lmvz-checkbox {   font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5     Router);   color: var(--checkbox-error-color);   display: block;   margin-block-start: 4px;   padding-inline: 10px; }  @media (hover: hover) {   .pill.sc-lmvz-checkbox:hover {     background-color: var(--checkbox-wrapper-bg-hover);   }    .pill.sc-lmvz-checkbox:hover .box.sc-lmvz-checkbox {     border-color: var(--checkbox-border-color-hover);   } }  [checked].sc-lmvz-checkbox-h .pill.sc-lmvz-checkbox {   background-color: var(--checkbox-wrapper-bg-checked); } [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {   border-color: var(--checkbox-border-color-checked); } [checked].sc-lmvz-checkbox-h label.sc-lmvz-checkbox {   color: var(--checkbox-label-color-checked);    }  [error].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {   border-color: var(--checkbox-border-color-error); } [error].sc-lmvz-checkbox-h .helper-text.sc-lmvz-checkbox {   color: var(--checkbox-error-color); } [disabled].sc-lmvz-checkbox-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;    input,   label,   .box,   .content {     cursor: not-allowed;   } } .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox {   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); }  @media (forced-colors: active) {   .box.sc-lmvz-checkbox {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-checkbox-h .box.sc-lmvz-checkbox {     border-color: Highlight;     background-color: Field;   }    .indicator.sc-lmvz-checkbox {     color: ButtonText;   }    [checked].sc-lmvz-checkbox-h .indicator.sc-lmvz-checkbox {     color: HighlightText;   }    .sc-lmvz-checkbox-h:focus-within .pill.sc-lmvz-checkbox {     outline-color: Highlight;     box-shadow: none;   } }`;
 
 const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
 let checkboxIdCounter = 0;
@@ -8494,8 +8494,11 @@ class LmvzCheckbox extends ReactiveControllerHost {
         this.checked = input.checked;
         this.lmvzChange.emit(this.checked);
     };
+    retargetInnerClicks() {
+        this.nativeInput?.click();
+    }
     render() {
-        return (hAsync(Host, { key: '158efacac5c28a18003149d4acb0d1cf5385cef4' }, hAsync("div", { key: '5deaf853f9c465b70b7e5472579c5d5212105c34', class: "pill" }, hAsync("input", { key: '7e8da452d41cd48293569ec60dad0585ff3290f1', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), hAsync("span", { key: 'd1ee72be8e3fc2b4e70ff64b70bfcec93f08f063', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: '73e123aa8c91e9098b4d8bbd48bbc7bae6c12383', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: '2a161e6db9e792dca1fa24c1562bd0b79d62235b', class: "content" }, hAsync("label", { key: 'fb38792095bf6da433867472d866d6700db45dac', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: 'b8c16fc4782f67e1dca82329d081943a7d75a524', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: '87d6940217d379777e26c578cff761dcfd96e79a', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (hAsync(Host, { key: 'cea4a962a76cab10c27adc6742fe0686b2ce6dbe' }, hAsync("div", { key: '1addfd795587de85ecbc632fbeb45026a4e46050', class: "pill" }, hAsync("input", { key: '8957359d0cc3f2c315badee7e20fcc81e85e0f00', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), hAsync("span", { key: '400dbe9379ceb4aceeb431fe6060c82b41009cda', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: '9612093e65346b419ec8e4469fea7f00fe4c3ff4', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: 'fd1136ea0726941bc400b8970f7cae4bb3b59363', class: "content" }, hAsync("label", { key: 'a06deb2d4bc76efb884701a17e4a28420a99965c', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: '2bd33f14062bedbb0609dff3ac7fbcee6fa16f21', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: 'ac4fcb6f0a2de16a17f0287e42b70b6339a50acc', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -8615,49 +8618,171 @@ class LmvzChip extends ReactiveControllerHost {
     }; }
 }
 
-class ListKeyboardNavigationController {
+const defaultConfig = {
+    orientation: 'both',
+    enableHomeAndEnd: false,
+    manageTabIndex: false,
+};
+class DirectionalFocusController {
     host;
     elements = [];
-    constructor(host) {
+    currentElement;
+    config;
+    constructor(host, config = {}) {
         this.host = host;
+        this.config = {
+            ...defaultConfig,
+            ...config,
+        };
     }
-    hostDidRender() {
+    hostConnected() {
         this.host.el.addEventListener('keydown', this.handleKeydown);
+        this.syncManagedFocusTarget();
+    }
+    hostDisconnected() {
+        this.host.el.removeEventListener('keydown', this.handleKeydown);
     }
     updateElements(elements) {
-        this.elements = elements;
+        const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
+        this.elements = elements.filter((element) => 'focus' in element && element.nodeType === 1);
+        this.syncManagedFocusTarget(previousElement);
+    }
+    setCurrentElement(element) {
+        const previousElement = this.currentElement;
+        this.currentElement = element !== null && element !== undefined && 'focus' in element && element.nodeType === 1 ? element : undefined;
+        this.syncManagedFocusTarget(previousElement);
     }
     handleKeydown = (event) => {
-        const { key } = event;
-        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(key))
+        const intent = this.getFocusIntent(event.key);
+        if (!intent)
             return;
-        const activeElement = getDeepActiveElement(document);
-        const nextElement = this.getNextFocusableElement(activeElement, ['ArrowDown', 'ArrowRight'].includes(key) ? 'down' : 'up');
-        if (nextElement) {
-            event.preventDefault();
-            nextElement.focus?.();
-        }
+        const activeElement = this.getManagedActiveElement();
+        const nextElement = this.getTargetElement(activeElement, intent);
+        if (!nextElement)
+            return;
+        event.preventDefault();
+        this.applyFocusTarget(nextElement, true);
     };
-    getNextFocusableElement(current, direction) {
-        if (!current)
+    getFocusIntent(key) {
+        if (this.config.enableHomeAndEnd && key === 'Home')
+            return 'first';
+        if (this.config.enableHomeAndEnd && key === 'End')
+            return 'last';
+        if (this.config.orientation === 'horizontal') {
+            if (key === 'ArrowRight')
+                return 'next';
+            if (key === 'ArrowLeft')
+                return 'previous';
             return undefined;
-        const { elements } = this;
-        const currentIndex = elements.indexOf(current);
-        if (currentIndex === -1)
+        }
+        if (this.config.orientation === 'vertical') {
+            if (key === 'ArrowDown')
+                return 'next';
+            if (key === 'ArrowUp')
+                return 'previous';
             return undefined;
-        let nextIndex = undefined;
-        if (direction === 'down') {
-            nextIndex = (currentIndex + 1) % elements.length;
         }
-        else if (direction === 'up') {
-            nextIndex = (currentIndex - 1 + elements.length) % elements.length;
+        if (key === 'ArrowDown' || key === 'ArrowRight')
+            return 'next';
+        if (key === 'ArrowUp' || key === 'ArrowLeft')
+            return 'previous';
+        return undefined;
+    }
+    getManagedActiveElement() {
+        const activeElement = getDeepActiveElement(this.host.el.ownerDocument ?? document);
+        if (activeElement instanceof HTMLElement && this.elements.includes(activeElement) && this.canMoveFocusTo(activeElement)) {
+            return activeElement;
+        }
+        if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
+            return this.currentElement;
         }
-        if (nextIndex == undefined)
+        return undefined;
+    }
+    getTargetElement(current, intent) {
+        if (!this.elements.length)
             return undefined;
-        const candidate = elements[nextIndex];
-        if (!canReceiveFocus(candidate))
-            return this.getNextFocusableElement(candidate, direction);
-        return candidate;
+        if (intent === 'first')
+            return this.findFocusableFromIndex(-1, 'next');
+        if (intent === 'last')
+            return this.findFocusableFromIndex(this.elements.length, 'previous');
+        const currentIndex = current ? this.elements.indexOf(current) : -1;
+        if (currentIndex === -1) {
+            return intent === 'next' ? this.findFocusableFromIndex(-1, 'next') : this.findFocusableFromIndex(this.elements.length, 'previous');
+        }
+        return this.findFocusableFromIndex(currentIndex, intent);
+    }
+    findFocusableFromIndex(startIndex, intent) {
+        if (!this.elements.length)
+            return undefined;
+        const step = intent === 'next' ? 1 : -1;
+        for (let offset = 1; offset <= this.elements.length; offset++) {
+            const index = (startIndex + step * offset + this.elements.length) % this.elements.length;
+            const candidate = this.elements[index];
+            if (this.canMoveFocusTo(candidate))
+                return candidate;
+        }
+        return undefined;
+    }
+    syncManagedFocusTarget(previousElement) {
+        const nextElement = this.selectManagedElement(previousElement);
+        const didChange = nextElement !== this.currentElement;
+        this.currentElement = nextElement;
+        if (this.config.manageTabIndex) {
+            this.updateTabIndexes(nextElement);
+        }
+        if (didChange && nextElement) {
+            this.config.onFocusTargetChange?.(nextElement);
+        }
+    }
+    selectManagedElement(previousElement) {
+        const activeElement = this.getManagedActiveElement();
+        if (activeElement)
+            return activeElement;
+        if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
+            return this.currentElement;
+        }
+        if (previousElement && this.elements.includes(previousElement)) {
+            return this.findFocusableFromIndex(this.elements.indexOf(previousElement), 'next') ?? this.findFocusableFromIndex(-1, 'next');
+        }
+        const currentRovingTarget = this.elements.find((element) => element.tabIndex === 0 && this.canMoveFocusTo(element));
+        if (currentRovingTarget)
+            return currentRovingTarget;
+        return this.findFocusableFromIndex(-1, 'next');
+    }
+    updateTabIndexes(activeElement) {
+        this.elements.forEach((element) => {
+            element.tabIndex = activeElement && element === activeElement ? 0 : -1;
+        });
+    }
+    applyFocusTarget(element, shouldFocus) {
+        const didChange = element !== this.currentElement;
+        this.currentElement = element;
+        if (this.config.manageTabIndex) {
+            this.updateTabIndexes(element);
+        }
+        if (shouldFocus) {
+            element.focus();
+        }
+        if (didChange) {
+            this.config.onFocusTargetChange?.(element);
+        }
+    }
+    canMoveFocusTo(element) {
+        if (!element)
+            return false;
+        if (element.hasAttribute('disabled'))
+            return false;
+        if ('disabled' in element && Boolean(element.disabled))
+            return false;
+        if (element.getAttribute('aria-disabled') === 'true')
+            return false;
+        if (this.config.isFocusableElement)
+            return this.config.isFocusableElement(element);
+        const isTabOrderable = this.config.manageTabIndex || element.tabIndex >= 0;
+        return (isTabOrderable &&
+            element.getAttribute('aria-hidden') !== 'true' &&
+            (element.checkVisibility?.() ?? true) &&
+            element.offsetParent !== null);
     }
 }
 
@@ -8673,7 +8798,7 @@ class LmvzHeader extends ReactiveControllerHost {
     primarySlot;
     secondarySlot;
     secondaryNav;
-    keyboardNavigationController = new ListKeyboardNavigationController(this);
+    keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both' });
     get primaryMenuitems() {
         return this.primarySlot?.assignedElements({ flatten: false }) || [];
     }
@@ -8747,7 +8872,7 @@ class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (hAsync(Host, { key: '323b7b13ef147f48e5f06537c7f27ab6e8a649ca', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: '518434d55b7bfc5c1a8988f707984b8e2a41163c', class: "brand" }, hAsync("slot", { key: '1829a1ba10ba3a4e1a0e32564c534e960dc652d1', name: "brand" }, hAsync("img", { key: '485c217a7fc920646ec531cac9744a10f29dab4e', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: 'df2cea9f42427c0bb51a498cc2627f0113a608a0', "aria-label": "Hauptnavigation" }, hAsync("div", { key: '93d6e0edc45c0032c5d3c93ea5f22e204fb0617e', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: '1b0238ca89023cc9a0ec4453e79a4597aaa92f2a', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: 'd7576b23a5f9268a106c98052a869825493e0485', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: 'ada5f271c58350c44bb55c3bd976450214795f2b', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: 'db47039ebf932942210fd3f0920f9f86f9d2b09b', class: "actions" }, hAsync("slot", { key: '2d220a2946f26e69052d20dd4524e60fafbfe137', name: "actions" }))));
+        return (hAsync(Host, { key: '0152283363802ea854334e0349e145e7d6219e09', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: 'cdc1d52dbfb658f99bffa2df2353b6a1ad232f97', class: "brand" }, hAsync("slot", { key: '25a039ea2224058f97f8ec1cb1aa310b388f2b2e', name: "brand" }, hAsync("img", { key: '9ca6f39b6e41382a438b3afd36348ee17b36d346', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: 'a6b7c1e7baca1ef2075d38cfaf631a277d2bb7ac', "aria-label": "Hauptnavigation" }, hAsync("div", { key: 'eb8c2db72d86cf3c4e2b0d94271bf73882c3bd96', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: 'b8a2b3c031158ce73ada65995b0d4e6e0e4eac72', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: '87dabdc52e40163b35e8c7681d3e4aa3a17d6d82', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '6cb38c14357ef682f1c804ab77cd70514308b6d4', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: '9e46e6e484556c5fbe0f2c573188e845fbca801b', class: "actions" }, hAsync("slot", { key: '4c1ea348528ccc3722c2dbbe0795e9f61d67edee', name: "actions" }))));
     }
     static get watchers() { return {
         "lmvzActiveNav": [{
@@ -8850,7 +8975,7 @@ class LmvzIcon extends ReactiveControllerHost {
     }; }
 }
 
-const lmvzInputCss = () => `@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; }  } .sc-lmvz-input-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);      --input-radius: var(--lmvz-component-input-radius-default, 999px);   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --input-border-color-focus: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);   --input-height: 48px;    --input-padding-x: 16px;    --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);    --label-floating-scale: 0.85;    --label-minimized-top: -6px;   --label-minimized-bg: var(--input-bg);   --label-minimized-padding-x: 4px;       --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .input-container.sc-lmvz-input {   display: flex;   flex-direction: column;   position: relative;   width: 100%; } .input-wrapper.sc-lmvz-input {   background-color: var(--input-bg);   border: var(--input-border-width) solid var(--input-border-color);   border-radius: var(--input-radius);   display: flex;   align-items: center;   height: var(--input-height);   padding: 0 var(--input-padding-x);   position: relative;   transition: border-color 0.2s ease;   gap: 8px;  } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   opacity: var(--input-disabled-opacity);   cursor: not-allowed;   pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input {      outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); }  [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color); } [error].sc-lmvz-input-h:focus-within .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color);   outline-color: var(--error-text-color); }  .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover {   border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input {   position: relative;   flex-grow: 1;   display: flex;   align-items: center;   height: 100%; } label.sc-lmvz-input {   position: absolute;   left: 0;   top: 50%;   transform: translateY(-50%);   color: var(--label-color);   font-size: 14px;    font-family: Router, sans-serif;   font-weight: 400;   pointer-events: none;   transition: all 0.2s ease-out;   background-color: transparent;   padding: 0;   margin: 0;   line-height: normal;   white-space: nowrap; } label.floating.sc-lmvz-input {   top: 0;    transform: translateY(-50%) scale(0.85);    transform-origin: left top;   background-color: var(--label-minimized-bg);   padding: 0 var(--label-minimized-padding-x);   left: -2px;    color: var(--input-text-color);    font-weight: 500;  } .required-indicator.sc-lmvz-input {   color: var(--error-text-color);   margin-left: 2px; } input.sc-lmvz-input {   border: none;   background: transparent;   width: 100%;   height: 100%;   color: var(--input-text-color);   font-family: inherit;   font-size: 14px;   outline: none;   padding: 0;   margin: 0;   font-weight: 400;  } input.sc-lmvz-input::placeholder {   color: var(--label-color); } div.sc-lmvz-input:empty {   display: none; } [role='status'].sc-lmvz-input {   padding-top: 8px;    padding-left: 12px;    font-size: 12px;   color: var(--helper-text-color);   font-family: Router, sans-serif;   font-weight: 500;  } [role='alert'].sc-lmvz-input {   padding-top: 8px;   padding-left: 12px;   font-size: 12px;   color: var(--error-text-color);   font-family: Router, sans-serif;   font-weight: 500; } .sc-lmvz-input-s > lmvz-button {      --lmvz-button-padding: 4px; }`;
+const lmvzInputCss = () => `@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; }  } .sc-lmvz-input-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);      --input-radius: var(--lmvz-component-input-radius-default, 999px);   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc);   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);       --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));   --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));    --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);    --label-minimized-bg: var(--input-bg);   --label-minimized-padding-x: 4px;       --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  [size='sm'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));   --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));   --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem)); } [size='md'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));   --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));   --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));   --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input {   display: flex;   flex-direction: column;   position: relative;   width: 100%; } .input-wrapper.sc-lmvz-input {   background-color: var(--input-bg);   border: var(--input-border-width) solid var(--input-border-color);   border-radius: var(--input-radius);   display: flex;   align-items: center;   height: var(--input-height);   padding: 0 var(--input-padding-x);   position: relative;   transition: border-color 0.2s ease;   gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   opacity: var(--input-disabled-opacity);   cursor: not-allowed;   pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input {   border-color: var(--input-border-color-focus);   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); }  [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color); }  .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover {   border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input {   position: relative;   flex-grow: 1;   display: flex;   align-items: center;   height: 100%; } label.sc-lmvz-input {   position: absolute;   left: 0;   top: 50%;   transform: translateY(-50%);   color: var(--label-color);   font-size: var(--input-font-size);   font-weight: 400;   pointer-events: none;   transition: all 0.2s ease-out;   background-color: transparent;   padding: 0;   margin: 0;   line-height: 1.5;   white-space: nowrap; } label.floating.sc-lmvz-input {   top: 0.5em;   transform: translateY(-100%);   transform-origin: left top;   font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));   background-color: var(--label-minimized-bg);   padding: 0 var(--label-minimized-padding-x);   left: -2px;    color: var(--input-text-color);    font-weight: 400; } .required-indicator.sc-lmvz-input {   color: var(--error-text-color);   margin-left: 2px; } input.sc-lmvz-input {   border: none;   background: transparent;   width: 100%;   height: 100%;   color: var(--input-text-color);   font-family: inherit;   font-size: var(--input-font-size);   outline: none;   padding: 0;   margin: 0;   font-weight: 400; } input.sc-lmvz-input::placeholder {   color: var(--label-color); } div.sc-lmvz-input:empty {   display: none; } [role='status'].sc-lmvz-input {   padding-top: 8px;    padding-left: var(--input-padding-x);   font-size: 12px;   color: var(--helper-text-color);   font-weight: 400; } [role='alert'].sc-lmvz-input {   padding-top: 8px;   padding-left: var(--input-padding-x);   font-size: 12px;   color: var(--error-text-color);   font-weight: 400; } .sc-lmvz-input-s > lmvz-button {      --lmvz-button-padding: 4px; }`;
 
 let inputIdCounter = 0;
 class LmvzInput extends ReactiveControllerHost {
@@ -8905,6 +9030,7 @@ class LmvzInput extends ReactiveControllerHost {
     max;
     step;
     form;
+    size = 'md';
     get error() {
         return this.errorFromProp || this.nativeError;
     }
@@ -9008,9 +9134,9 @@ class LmvzInput extends ReactiveControllerHost {
     render() {
         const hasValue = Boolean(this.value);
         const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (hAsync("div", { key: 'b8c3aaccafb89725aaa157a72633c67ae8b4d58c', class: classNames('input-container', {
+        return (hAsync("div", { key: '4be6846147fec950acad0c0cb8643bfa69233935', class: classNames('input-container', {
                 'interaction-filled': hasValue,
-            }) }, hAsync("div", { key: '80261c486d3bfe61aa060d50e9a6774c961339a1', class: "input-wrapper" }, hAsync("slot", { key: '6856dd64991251adc63d8064ed63e9cf7b1773a2', name: "before-input" }), hAsync("div", { key: 'c975357079efef465c56fb50cbb404bd1cbe3fb1', class: "label-input-group" }, hAsync("label", { key: '798417172f8411be97866edbffbd2bb98c308c69', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: '9fd59f3d93c984304e6c8ae6531df82bc0057243', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: 'a4e1133b4891c01044365eb3c97ee234c84c9bac', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hAsync("slot", { key: 'c774f03e704889b524f305c00d60c0902abdff5f', name: "after-input" })), hAsync("div", { key: 'f513746541c71ce0d67c26eb220b54408fc3f136', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '197683e55807bf100ca1543f5b84b14e910e721f', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
+            }) }, hAsync("div", { key: 'ae9bf8ffd91b73a86c2ebd21af051efe26a1d5fd', class: "input-wrapper" }, hAsync("slot", { key: '36b3f7d97a11296aeead44c4d8ab4f0f8edf62d1', name: "before-input" }), hAsync("div", { key: '4320f461ffa908730cd898863f43644aa3677081', class: "label-input-group" }, hAsync("label", { key: '1dd51cf16f064303fd9c5249cbe3a357c7515ddc', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: '74bb8124b1126501201eb7c3361c6cf7f17dda5c', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: '9cff77bea65c50331a6804d7039672bbe01e710c', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hAsync("slot", { key: '689a3aa53e22f89173893adbc72eaf4953a2c7f6', name: "after-input" })), hAsync("div", { key: 'd29b9ea209c138d0de09f71042f539a56ed4f9fa', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '8be227367abadb0e001d9475f0793aed31dbb64a', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -9049,6 +9175,7 @@ class LmvzInput extends ReactiveControllerHost {
             "max": [8],
             "step": [8],
             "form": [1],
+            "size": [513],
             "error": [6660],
             "nativeError": [32],
             "setValue": [64],
@@ -9061,7 +9188,7 @@ class LmvzInput extends ReactiveControllerHost {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"], ["error", "error"]]
+        "$attrsToReflect$": [["disabled", "disabled"], ["readonly", "readonly"], ["required", "required"], ["size", "size"], ["error", "error"]]
     }; }
 }
 
@@ -9876,6 +10003,308 @@ class LmvzSnackbar {
     }; }
 }
 
+const lmvzTabCss = () => ` @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; }  } :host {   display: inline-block;   flex: none; } :host([disabled]) {   cursor: not-allowed;   pointer-events: none; } button {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);    position: relative;   display: inline-flex;   flex-direction: column;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-component-spacing-0-default, 4px);    padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem));   padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));    border: none;   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background: var(--lmvz-tab-background);   color: var(--lmvz-tab-color);    font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   cursor: pointer;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease; } 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));   z-index: 1; } button:disabled {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; } button:hover {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active {   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);   --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button {   padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));   padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active {   --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator {      --lmvz-tab-indicator-size: 4px;    position: absolute;   background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4));   opacity: 0;   transition: opacity 0.15s ease;       inset-block-end: 0;   inset-inline: 0;   block-size: var(--lmvz-tab-indicator-size);   border-start-start-radius: 0;   border-start-end-radius: 0;   border-end-start-radius: var(--lmvz-tab-indicator-size);   border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator {   opacity: 1; } :host([vertical]) button {   border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator {      inset-block: 0;   inset-inline: 0 auto;   inline-size: var(--lmvz-tab-indicator-size);   block-size: auto;   border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0;   background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) {   --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) {   --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label {   display: contents; } `;
+
+class LmvzTab {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    mediaSlotEl;
+    value;
+    disabled = false;
+    selected = false;
+    vertical = false;
+    handleMediaSlotChange = () => {
+        this.el.toggleAttribute('has-media', (this.mediaSlotEl?.assignedElements() ?? []).length > 0);
+    };
+    componentDidLoad() {
+        this.handleMediaSlotChange();
+        this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
+    }
+    render() {
+        return (hAsync(Host, { key: 'f02b0624ac752f25e3996071ab88be1364dd27c3' }, hAsync("button", { key: '1666fea6a68c66d5bf88141660067a66e0164891', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: '23d1ef98da2a72efa3a5ec1563298fc4c08da441', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: 'bd96765d2228817c621a2ad4fd4f3b05fcdb3a21', class: "label" }, hAsync("slot", { key: 'ef51c25169a1d993797a86b89fa296218e264969' })), hAsync("span", { key: '28dda1631d62325a29e285909ee3f1c0ea9da3ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+    }
+    static get delegatesFocus() { return true; }
+    static get style() { return lmvzTabCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 793,
+        "$tagName$": "lmvz-tab",
+        "$members$": {
+            "value": [513],
+            "disabled": [516],
+            "selected": [516],
+            "vertical": [516]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["value", "value"], ["disabled", "disabled"], ["selected", "selected"], ["vertical", "vertical"]]
+    }; }
+}
+
+const lmvzTabsCss = () => ` @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; }  } :host {   display: inline-block; } .tablist {   display: inline-flex;   flex-direction: row;   background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);      overflow: auto hidden;      scrollbar-width: none;  } .tablist::-webkit-scrollbar {   display: none;  } :host([has-icon-tabs]) .tablist {   gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));   background: none;   border-radius: 0; }  :host([orientation='vertical']) .tablist {   flex-direction: column;   overflow: visible auto; }  ::slotted([role='tabpanel']) {   display: block; } ::slotted([role='tabpanel'][hidden]) {   display: none; } `;
+
+let tabsIdCounter = 0;
+class LmvzTabs extends ReactiveControllerHost {
+    get el() { return getElement(this); }
+    instanceId = ++tabsIdCounter;
+    tabSlotEl;
+    panelSlotEl;
+    focusController = new DirectionalFocusController(this, {
+        orientation: 'horizontal',
+        manageTabIndex: true,
+        enableHomeAndEnd: true,
+    });
+    value;
+    orientation = 'horizontal';
+    lmvzChange;
+    resolvedValue;
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.lmvzChange = createEvent(this, "lmvzChange", 7);
+        this.addController(this.focusController);
+    }
+    componentWillLoad() {
+        super.componentWillLoad();
+        this.syncOrientation();
+    }
+    componentDidLoad() {
+        this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange);
+        this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
+        this.el.addEventListener('lmvzTabReady', this.handleTabReady);
+        this.handleTabSlotChange();
+        super.componentDidLoad();
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('lmvzTabReady', this.handleTabReady);
+        super.disconnectedCallback();
+    }
+    handleValueChange(newValue) {
+        this.applySelection(newValue);
+    }
+    handleOrientationChange() {
+        this.syncOrientation();
+        this.syncFocusTargets();
+        this.syncTabOrientation();
+    }
+    async activateTab(value) {
+        const tab = this.findTabByValue(value);
+        if (!tab || this.isTabDisabled(tab))
+            return;
+        this.selectTab(value);
+    }
+    async getTabElements() {
+        return this.slottedTabs;
+    }
+    async setTabPanelIds(pairs) {
+        const tabs = this.slottedTabs;
+        const panels = this.slottedPanels;
+        pairs.forEach(([tabId, panelId], index) => {
+            const tab = tabs[index];
+            const panel = panels[index];
+            const btnId = `${tabId}-btn`;
+            if (tab) {
+                tab.id = tabId;
+                const btn = tab.shadowRoot?.querySelector('button');
+                if (btn) {
+                    btn.id = btnId;
+                    btn.setAttribute('aria-controls', panelId);
+                }
+            }
+            if (panel) {
+                panel.id = panelId;
+                panel.setAttribute('aria-labelledby', btnId);
+            }
+        });
+    }
+    get slottedTabs() {
+        return (this.tabSlotEl?.assignedElements({ flatten: false }) ?? []).filter((el) => el.tagName.toLowerCase() === 'lmvz-tab');
+    }
+    get slottedPanels() {
+        return (this.panelSlotEl?.assignedElements({ flatten: false }) ?? []);
+    }
+    handleTabSlotChange = () => {
+        this.syncFocusTargets();
+        this.syncTabOrientation();
+        this.wireAriaIds();
+        this.applySelection(this.value);
+        this.updateIconTabsAttr();
+    };
+    handlePanelSlotChange = () => {
+        this.wireAriaIds();
+        this.applySelection(this.resolvedValue ?? this.value);
+    };
+    handleTabReady = () => {
+        this.syncFocusTargets();
+        this.wireAriaIds();
+        this.applySelection(this.resolvedValue ?? this.value);
+        this.updateIconTabsAttr();
+    };
+    updateIconTabsAttr() {
+        this.el.toggleAttribute('has-icon-tabs', this.slottedTabs.some((t) => t.hasAttribute('has-media')));
+    }
+    syncFocusTargets() {
+        const buttons = this.slottedTabs.map((tab) => tab.shadowRoot?.querySelector('button')).filter((b) => !!b);
+        this.focusController.updateElements(buttons);
+    }
+    syncOrientation() {
+        this.removeController(this.focusController);
+        this.focusController.hostDisconnected?.();
+        this.focusController = new DirectionalFocusController(this, {
+            orientation: this.orientation,
+            manageTabIndex: true,
+            enableHomeAndEnd: true,
+        });
+        this.addController(this.focusController);
+        if (this.el.isConnected) {
+            this.focusController.hostConnected?.();
+        }
+    }
+    syncTabOrientation() {
+        const isVertical = this.orientation === 'vertical';
+        this.slottedTabs.forEach((tab) => {
+            tab.toggleAttribute('vertical', isVertical);
+        });
+    }
+    wireAriaIds() {
+        const tabs = this.slottedTabs;
+        const panels = this.slottedPanels;
+        const prefix = `lmvz-tabs-${this.instanceId}`;
+        tabs.forEach((tab, index) => {
+            const tabId = tab.id || `${prefix}-tab-${index}`;
+            tab.id = tabId;
+            const panel = panels[index];
+            if (!panel)
+                return;
+            const panelId = panel.id || `${prefix}-panel-${index}`;
+            panel.id = panelId;
+            const btn = tab.shadowRoot?.querySelector('button');
+            if (btn) {
+                btn.setAttribute('aria-controls', panelId);
+                btn.setAttribute('id', `${tabId}-btn`);
+            }
+            panel.setAttribute('role', panel.getAttribute('role') ?? 'tabpanel');
+            panel.setAttribute('aria-labelledby', `${tabId}-btn`);
+        });
+    }
+    applySelection(requested) {
+        const tabs = this.slottedTabs;
+        if (!tabs.length)
+            return;
+        let target = this.findTabByValue(requested);
+        if (!target || this.isTabDisabled(target)) {
+            target = this.findNearestEnabled(requested) ?? undefined;
+        }
+        if (!target)
+            return;
+        const effectiveValue = target.getAttribute('value') ?? '';
+        this.resolvedValue = effectiveValue;
+        if (this.value !== effectiveValue) {
+            this.value = effectiveValue;
+        }
+        tabs.forEach((tab) => {
+            const isSelected = tab.getAttribute('value') === effectiveValue;
+            tab.toggleAttribute('selected', isSelected);
+            const btn = tab.shadowRoot?.querySelector('button');
+            if (btn)
+                btn.setAttribute('aria-selected', String(isSelected));
+        });
+        this.slottedPanels.forEach((panel, index) => {
+            const tab = tabs[index];
+            const isActive = tab?.getAttribute('value') === effectiveValue;
+            panel.toggleAttribute('hidden', !isActive);
+        });
+        const selectedBtn = target.shadowRoot?.querySelector('button');
+        if (selectedBtn) {
+            this.focusController.setCurrentElement(selectedBtn);
+        }
+    }
+    isTabDisabled(tab) {
+        return tab.hasAttribute('disabled') || !!tab.disabled;
+    }
+    findTabByValue(value) {
+        return this.slottedTabs.find((tab) => tab.getAttribute('value') === value);
+    }
+    findNearestEnabled(fromValue) {
+        const tabs = this.slottedTabs;
+        const fromIndex = tabs.findIndex((t) => t.getAttribute('value') === fromValue);
+        for (let offset = 1; offset < tabs.length; offset++) {
+            const next = tabs[(fromIndex + offset) % tabs.length];
+            if (next && !this.isTabDisabled(next))
+                return next;
+            const prev = tabs[(fromIndex - offset + tabs.length) % tabs.length];
+            if (prev && !this.isTabDisabled(prev))
+                return prev;
+        }
+        return undefined;
+    }
+    selectTab(value) {
+        if (value === this.resolvedValue)
+            return;
+        this.applySelection(value);
+        this.lmvzChange.emit({ value });
+    }
+    handleTabClick = (event) => {
+        const target = event.target;
+        const tab = target.closest('lmvz-tab');
+        if (!tab)
+            return;
+        const value = tab.getAttribute('value');
+        if (!value || this.isTabDisabled(tab))
+            return;
+        this.selectTab(value);
+    };
+    handleKeydown = (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        const active = this.el.ownerDocument.activeElement;
+        if (!active)
+            return;
+        let tab = null;
+        for (const t of this.slottedTabs) {
+            if (t === active) {
+                tab = t;
+                break;
+            }
+        }
+        if (!tab)
+            return;
+        const value = tab.getAttribute('value');
+        if (!value || this.isTabDisabled(tab))
+            return;
+        event.preventDefault();
+        this.selectTab(value);
+    };
+    render() {
+        return (hAsync(Host, { key: '3a503531069e0d83be9bde0e9bc2e1747498baf2', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: '25a37d52ba6c8c1b46c1e624da13b918e9bd33d1', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, hAsync("slot", { key: '00b4ba4cf88081d8cd4ee21976398646e4f19679', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '872aba20a4d26facafc71821f7fc88cf96b05a33', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: '7681c24945e7d50e95f749bd5c056704db120b11', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }],
+        "orientation": [{
+                "handleOrientationChange": 0
+            }]
+    }; }
+    static get style() { return lmvzTabsCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 777,
+        "$tagName$": "lmvz-tabs",
+        "$members$": {
+            "value": [1537],
+            "orientation": [1537],
+            "resolvedValue": [32],
+            "activateTab": [64],
+            "getTabElements": [64],
+            "setTabPanelIds": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["value", "value"], ["orientation", "orientation"]]
+    }; }
+}
+
 const lmvzToggleCss = () => `@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; }  } .sc-lmvz-toggle-h {   display: inline-flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-2-8, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-4-10, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));         border-radius: var(--lmvz-semantic-border-radius-round, 999px);   cursor: pointer;   background-color: transparent;   user-select: none; } .sc-lmvz-toggle-h:not([disabled]):hover {   background-color: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } [checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled][checked].sc-lmvz-toggle-h {   background-color: var(--lmvz-semantic-color-status-active, #f6fbfe); } [disabled].sc-lmvz-toggle-h {   cursor: not-allowed;   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none; } .track.sc-lmvz-toggle {   position: relative;   flex-shrink: 0;   width: var(--lmvz-global-s32, 32px);   height: var(--lmvz-global-s20, 20px);   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   background-color: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); } .sc-lmvz-toggle-h:not([disabled]):hover .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); } [checked].sc-lmvz-toggle-h .track.sc-lmvz-toggle {   border-color: var(--lmvz-semantic-color-border-active, #0f8acc); } input.sc-lmvz-toggle {      position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   opacity: 0;   margin: 0;   cursor: inherit; } .thumb.sc-lmvz-toggle {   position: absolute;   width: var(--lmvz-global-s13, 13px);   height: var(--lmvz-global-s13, 13px);   border-radius: 50%;   background-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   top: 50%;   transform: translateY(-50%);   left: var(--lmvz-global-s4, 4px);      transition:     left 0.2s ease,     background-color 0.2s ease;   pointer-events: none; } [checked].sc-lmvz-toggle-h .thumb.sc-lmvz-toggle {   left: calc(var(--lmvz-global-s4, 4px) + var(--lmvz-global-s11, 11px));   background-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } label.sc-lmvz-toggle {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5     Router);   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   cursor: pointer; }`;
 
 const focusWithinCss = () => `.sc-lmvz-toggle-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-toggle-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
@@ -9952,7 +10381,7 @@ class LmvzToggle extends ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (hAsync(Host, { key: '202842250b2c22f64b608e4d5a517a045e50a54c' }, hAsync("span", { key: '105869ad771c9146a6a31e767e51807bb7e0b565', class: "track" }, hAsync("input", { key: '8113919f2c474b61a2745a000fd4995f81b58c1e', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: '9d7201d14abdb987b20f52f21a314434051c9f84', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '7291494dd6f440099e9cbd04b3cff03a338a0e93', htmlFor: this.toggleId }, this.label)));
+        return (hAsync(Host, { key: '452ea30df1191b45c606d7512982a0f743b7bf7a' }, hAsync("span", { key: 'c538806b64de8bce70d0bc55c6a9eb279f4eff4c', class: "track" }, hAsync("input", { key: 'afe04f4305744b3110092f9bfcbe8b4ee6f21c37', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: 'e8089a6e8ee084b3f316c837cf3225017c33a15e', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '085055f461f4240df2eb2b4ea441a5e782240276', htmlFor: this.toggleId }, this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -10002,6 +10431,8 @@ registerComponents([
   LmvzRadio,
   LmvzSelect,
   LmvzSnackbar,
+  LmvzTab,
+  LmvzTabs,
   LmvzToggle,
 ]);