@lmvz-ds/components 0.26.0 → 0.27.0

package/cjs/lmvz-tab.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-BCFBLj0e.js');
+
+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; } `;
+
+const LmvzTab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.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 (index.h(index.Host, { key: 'f02b0624ac752f25e3996071ab88be1364dd27c3' }, index.h("button", { key: '1666fea6a68c66d5bf88141660067a66e0164891', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, index.h("slot", { key: '23d1ef98da2a72efa3a5ec1563298fc4c08da441', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), index.h("span", { key: 'bd96765d2228817c621a2ad4fd4f3b05fcdb3a21', class: "label" }, index.h("slot", { key: 'ef51c25169a1d993797a86b89fa296218e264969' })), index.h("span", { key: '28dda1631d62325a29e285909ee3f1c0ea9da3ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+LmvzTab.style = lmvzTabCss();
+
+exports.lmvz_tab = LmvzTab;

package/cjs/lmvz-tabs.cjs.entry.js

@@ -0,0 +1,256 @@
+'use strict';
+
+var index = require('./index-BCFBLj0e.js');
+var listKeyboardController = require('./list-keyboard-controller-CzZdPBeH.js');
+var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
+require('./component-C7cavwmZ.js');
+
+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;
+const LmvzTabs = class extends reactiveControllerHost.ReactiveControllerHost {
+    get el() { return index.getElement(this); }
+    instanceId = ++tabsIdCounter;
+    tabSlotEl;
+    panelSlotEl;
+    focusController = new listKeyboardController.DirectionalFocusController(this, {
+        orientation: 'horizontal',
+        manageTabIndex: true,
+        enableHomeAndEnd: true,
+    });
+    value;
+    orientation = 'horizontal';
+    lmvzChange;
+    resolvedValue;
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.lmvzChange = index.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 listKeyboardController.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 (index.h(index.Host, { key: '3a503531069e0d83be9bde0e9bc2e1747498baf2', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, index.h("div", { key: '25a37d52ba6c8c1b46c1e624da13b918e9bd33d1', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, index.h("slot", { key: '00b4ba4cf88081d8cd4ee21976398646e4f19679', ref: (el) => (this.tabSlotEl = el) })), index.h("div", { key: '872aba20a4d26facafc71821f7fc88cf96b05a33', part: "panels-container", class: "panels-container" }, index.h("slot", { key: '7681c24945e7d50e95f749bd5c056704db120b11', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }],
+        "orientation": [{
+                "handleOrientationChange": 0
+            }]
+    }; }
+};
+LmvzTabs.style = lmvzTabsCss();
+
+exports.lmvz_tabs = LmvzTabs;

package/cjs/lmvz-toggle.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var index = require('./index-BCFBLj0e.js');
-var reactiveControllerHost = require('./reactive-controller-host-DrtMkMd7.js');
+var ariaValidationController = require('./aria-validation-controller-BMV2tv9-.js');
 var component = require('./component-C7cavwmZ.js');
+var reactiveControllerHost = require('./reactive-controller-host-B_lZtcA6.js');
 require('./aria-loader-BRo2FTGh.js');
 
 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; }`;
@@ -37,7 +38,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
-        this.addController(new reactiveControllerHost.AriaValidationController(this));
+        this.addController(new ariaValidationController.AriaValidationController(this));
     }
     formAssociatedCallback(_form) {
         this.internals.setFormValue?.(this.checked ? this.value : null);
@@ -81,7 +82,7 @@ const LmvzToggle = class extends reactiveControllerHost.ReactiveControllerHost {
         this.lmvzChange.emit(newChecked);
     };
     render() {
-        return (index.h(index.Host, { key: '202842250b2c22f64b608e4d5a517a045e50a54c' }, index.h("span", { key: '105869ad771c9146a6a31e767e51807bb7e0b565', class: "track" }, index.h("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 }), index.h("span", { key: '9d7201d14abdb987b20f52f21a314434051c9f84', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '7291494dd6f440099e9cbd04b3cff03a338a0e93', htmlFor: this.toggleId }, this.label)));
+        return (index.h(index.Host, { key: '452ea30df1191b45c606d7512982a0f743b7bf7a' }, index.h("span", { key: 'c538806b64de8bce70d0bc55c6a9eb279f4eff4c', class: "track" }, index.h("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 }), index.h("span", { key: 'e8089a6e8ee084b3f316c837cf3225017c33a15e', class: "thumb", "aria-hidden": "true" })), index.h("label", { key: '085055f461f4240df2eb2b4ea441a5e782240276', htmlFor: this.toggleId }, this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
+  return index.bootstrapLazy([["lmvz-modal.cjs",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-snackbar.cjs",[[513,"lmvz-snackbar",{"status":[1537],"message":[1025],"duration":[1026],"priority":[1025],"actionLabel":[1025,"action-label"],"animationClass":[32],"show":[64],"hide":[64]},null,{"status":[{"onStatusChange":0}]}]]],["lmvz-header_2.cjs",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action.cjs",[[257,"lmvz-action"]]],["lmvz-card.cjs",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox.cjs",[[578,"lmvz-checkbox",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},null,{"checked":[{"handleCheckedChange":0}]}]]],["lmvz-chip.cjs",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input.cjs",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem.cjs",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio.cjs",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[1],"disabled":[516],"required":[516],"error":[516],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"focusInput":[64],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-select.cjs",[[774,"lmvz-select",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"disabled":[516],"required":[516],"name":[1],"selectedLabel":[32]},null,{"value":[{"handleValueChange":0}]}]]],["lmvz-tab.cjs",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs.cjs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle.cjs",[[578,"lmvz-toggle",{"label":[1],"checked":[1540],"disabled":[516],"required":[516],"name":[1],"value":[1],"form":[1],"focusToggle":[64],"blurToggle":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group.cjs",[[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2.cjs",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1]}],[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"iconset":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}],"iconset":[{"loadIconPathData":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/cjs/reactive-controller-host-B_lZtcA6.js

@@ -0,0 +1,43 @@
+'use strict';
+
+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?.());
+    }
+}
+
+exports.ReactiveControllerHost = ReactiveControllerHost;

package/collection/collection-manifest.json

@@ -14,6 +14,8 @@
     "components/lmvz-radio/lmvz-radio.js",
     "components/lmvz-select/lmvz-select.js",
     "components/lmvz-snackbar/lmvz-snackbar.js",
+    "components/lmvz-tab/lmvz-tab.js",
+    "components/lmvz-tabs/lmvz-tabs.js",
     "components/lmvz-toggle/lmvz-toggle.js",
     "integration/header-integration/header-integration.js"
   ],

package/collection/components/lmvz-checkbox/lmvz-checkbox.css

@@ -72,7 +72,6 @@
   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;
   /* WCAG 2.5.5 AAA: 44px minimum touch target */
   /* min-block-size: 44px;  */
   text-decoration: none;
@@ -98,6 +97,7 @@ input {
   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);
@@ -115,12 +115,14 @@ input {
   flex-direction: column;
   overflow-wrap: break-word;
   min-width: 0;
+  cursor: pointer;
 }
 label {
   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 {
   font: var(--lmvz-typography-body-sm, 400 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5
@@ -165,16 +167,16 @@ label {
 :host([error]) .helper-text {
   color: var(--checkbox-error-color);
 }
-/* Disabled state */
 :host([disabled]) {
   opacity: var(--lmvz-component-input-disabled-opacity, 40%);
   pointer-events: none;
-}
-:host([disabled]) .pill {
-  cursor: not-allowed;
-}
-:host([disabled]) input {
-  cursor: not-allowed;
+
+  input,
+  label,
+  .box,
+  .content {
+    cursor: not-allowed;
+  }
 }
 :host(:focus-within) .pill {
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);

package/collection/components/lmvz-checkbox/lmvz-checkbox.js

@@ -82,8 +82,11 @@ export class LmvzCheckbox extends ReactiveControllerHost {
         this.checked = input.checked;
         this.lmvzChange.emit(this.checked);
     };
+    retargetInnerClicks() {
+        this.nativeInput?.click();
+    }
     render() {
-        return (h(Host, { key: '158efacac5c28a18003149d4acb0d1cf5385cef4' }, h("div", { key: '5deaf853f9c465b70b7e5472579c5d5212105c34', class: "pill" }, h("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 }), h("span", { key: 'd1ee72be8e3fc2b4e70ff64b70bfcec93f08f063', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '73e123aa8c91e9098b4d8bbd48bbc7bae6c12383', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: '2a161e6db9e792dca1fa24c1562bd0b79d62235b', class: "content" }, h("label", { key: 'fb38792095bf6da433867472d866d6700db45dac', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: 'b8c16fc4782f67e1dca82329d081943a7d75a524', class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: '87d6940217d379777e26c578cff761dcfd96e79a', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
+        return (h(Host, { key: 'cea4a962a76cab10c27adc6742fe0686b2ce6dbe' }, h("div", { key: '1addfd795587de85ecbc632fbeb45026a4e46050', class: "pill" }, h("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 }), h("span", { key: '400dbe9379ceb4aceeb431fe6060c82b41009cda', class: "box", "aria-hidden": "true" }, this.checkedState && h("span", { key: '9612093e65346b419ec8e4469fea7f00fe4c3ff4', class: "indicator", innerHTML: CHECKMARK_SVG })), h("span", { key: 'fd1136ea0726941bc400b8970f7cae4bb3b59363', class: "content" }, h("label", { key: 'a06deb2d4bc76efb884701a17e4a28420a99965c', htmlFor: this.checkboxId }, this.label), this.helperText && (h("span", { key: '2bd33f14062bedbb0609dff3ac7fbcee6fa16f21', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (h("span", { key: 'ac4fcb6f0a2de16a17f0287e42b70b6339a50acc', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get is() { return "lmvz-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
-import { ListKeyboardNavigationController } from "../../utils/aria/list-keyboard-controller";
+import { DirectionalFocusController } from "../../utils/aria/list-keyboard-controller";
 import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
 import logo from "../../assets/icons/Logo.svg";
 export class LmvzHeader extends ReactiveControllerHost {
@@ -11,7 +11,7 @@ export 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 }) || [];
     }
@@ -84,7 +84,7 @@ export class LmvzHeader extends ReactiveControllerHost {
         }
     }
     render() {
-        return (h(Host, { key: '323b7b13ef147f48e5f06537c7f27ab6e8a649ca', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '518434d55b7bfc5c1a8988f707984b8e2a41163c', class: "brand" }, h("slot", { key: '1829a1ba10ba3a4e1a0e32564c534e960dc652d1', name: "brand" }, h("img", { key: '485c217a7fc920646ec531cac9744a10f29dab4e', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'df2cea9f42427c0bb51a498cc2627f0113a608a0', "aria-label": "Hauptnavigation" }, h("div", { key: '93d6e0edc45c0032c5d3c93ea5f22e204fb0617e', role: "menubar", class: "primary-menubar" }, h("slot", { key: '1b0238ca89023cc9a0ec4453e79a4597aaa92f2a', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'd7576b23a5f9268a106c98052a869825493e0485', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'ada5f271c58350c44bb55c3bd976450214795f2b', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'db47039ebf932942210fd3f0920f9f86f9d2b09b', class: "actions" }, h("slot", { key: '2d220a2946f26e69052d20dd4524e60fafbfe137', name: "actions" }))));
+        return (h(Host, { key: '0152283363802ea854334e0349e145e7d6219e09', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'cdc1d52dbfb658f99bffa2df2353b6a1ad232f97', class: "brand" }, h("slot", { key: '25a039ea2224058f97f8ec1cb1aa310b388f2b2e', name: "brand" }, h("img", { key: '9ca6f39b6e41382a438b3afd36348ee17b36d346', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: 'a6b7c1e7baca1ef2075d38cfaf631a277d2bb7ac', "aria-label": "Hauptnavigation" }, h("div", { key: 'eb8c2db72d86cf3c4e2b0d94271bf73882c3bd96', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'b8a2b3c031158ce73ada65995b0d4e6e0e4eac72', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '87dabdc52e40163b35e8c7681d3e4aa3a17d6d82', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '6cb38c14357ef682f1c804ab77cd70514308b6d4', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '9e46e6e484556c5fbe0f2c573188e845fbca801b', class: "actions" }, h("slot", { key: '4c1ea348528ccc3722c2dbbe0795e9f61d67edee', name: "actions" }))));
     }
     static get is() { return "lmvz-header"; }
     static get encapsulation() { return "shadow"; }