@lmvz-ds/components 0.26.0 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/cjs/{reactive-controller-host-DrtMkMd7.js → aria-validation-controller-BMV2tv9-.js} +0 -41
  3. package/cjs/list-keyboard-controller-CzZdPBeH.js +173 -0
  4. package/cjs/lmvz-button_2.cjs.entry.js +4 -3
  5. package/cjs/lmvz-checkbox.cjs.entry.js +8 -4
  6. package/cjs/lmvz-chip.cjs.entry.js +3 -2
  7. package/cjs/lmvz-components.cjs.js +1 -1
  8. package/cjs/lmvz-header_2.cjs.entry.js +7 -51
  9. package/cjs/lmvz-input.cjs.entry.js +3 -2
  10. package/cjs/lmvz-menuitem.cjs.entry.js +3 -2
  11. package/cjs/lmvz-modal.cjs.entry.js +3 -2
  12. package/cjs/lmvz-radio.cjs.entry.js +3 -2
  13. package/cjs/lmvz-select.cjs.entry.js +3 -2
  14. package/cjs/lmvz-tab.cjs.entry.js +31 -0
  15. package/cjs/lmvz-tabs.cjs.entry.js +256 -0
  16. package/cjs/lmvz-toggle.cjs.entry.js +4 -3
  17. package/cjs/loader.cjs.js +1 -1
  18. package/cjs/reactive-controller-host-B_lZtcA6.js +43 -0
  19. package/collection/collection-manifest.json +2 -0
  20. package/collection/components/lmvz-checkbox/lmvz-checkbox.css +10 -8
  21. package/collection/components/lmvz-checkbox/lmvz-checkbox.js +4 -1
  22. package/collection/components/lmvz-header/lmvz-header.js +3 -3
  23. package/collection/components/lmvz-tab/lmvz-tab.css +148 -0
  24. package/collection/components/lmvz-tab/lmvz-tab.js +125 -0
  25. package/collection/components/lmvz-tabs/lmvz-tabs.css +58 -0
  26. package/collection/components/lmvz-tabs/lmvz-tabs.js +399 -0
  27. package/collection/components/lmvz-toggle/lmvz-toggle.js +1 -1
  28. package/collection/integration/header-integration/header-integration.js +1 -1
  29. package/collection/utils/aria/list-keyboard-controller.js +151 -28
  30. package/components/index.d.ts +4 -0
  31. package/components/index.d.ts.bak +4 -0
  32. package/components/index.js +1 -1
  33. package/components/lmvz-button-group.js +1 -1
  34. package/components/lmvz-button.js +1 -1
  35. package/components/lmvz-checkbox.js +1 -1
  36. package/components/lmvz-chip.js +1 -1
  37. package/components/lmvz-header.js +1 -1
  38. package/components/lmvz-icon.js +1 -1
  39. package/components/lmvz-input.js +1 -1
  40. package/components/lmvz-menuitem.js +1 -1
  41. package/components/lmvz-modal.js +1 -1
  42. package/components/lmvz-radio.js +1 -1
  43. package/components/lmvz-select.js +1 -1
  44. package/components/lmvz-snackbar.js +1 -1
  45. package/components/lmvz-tab.d.ts +11 -0
  46. package/components/lmvz-tab.d.ts.bak +11 -0
  47. package/components/lmvz-tab.js +1 -0
  48. package/components/lmvz-tabs.d.ts +11 -0
  49. package/components/lmvz-tabs.d.ts.bak +11 -0
  50. package/components/lmvz-tabs.js +1 -0
  51. package/components/lmvz-toggle.js +1 -1
  52. package/components/p-0P2Wb3pE.js +1 -0
  53. package/components/p-2VdcUIrr.js +1 -0
  54. package/components/p-BJEQw1Sz.js +1 -0
  55. package/components/p-Cs7RCOHZ.js +1 -0
  56. package/components/p-CtaMrBNE.js +1 -0
  57. package/components/{p-JAKQdFhF.js → p-DOTK1OW3.js} +1 -1
  58. package/components/p-DjvbwRyl.js +1 -0
  59. package/esm/{reactive-controller-host-ZrGf1F2-.js → aria-validation-controller-D-KO0Asb.js} +1 -41
  60. package/esm/list-keyboard-controller-Coi8XfUH.js +171 -0
  61. package/esm/lmvz-button_2.entry.js +2 -1
  62. package/esm/lmvz-checkbox.entry.js +7 -3
  63. package/esm/lmvz-chip.entry.js +2 -1
  64. package/esm/lmvz-components.js +1 -1
  65. package/esm/lmvz-header_2.entry.js +6 -50
  66. package/esm/lmvz-input.entry.js +2 -1
  67. package/esm/lmvz-menuitem.entry.js +2 -1
  68. package/esm/lmvz-modal.entry.js +2 -1
  69. package/esm/lmvz-radio.entry.js +2 -1
  70. package/esm/lmvz-select.entry.js +2 -1
  71. package/esm/lmvz-tab.entry.js +29 -0
  72. package/esm/lmvz-tabs.entry.js +254 -0
  73. package/esm/lmvz-toggle.entry.js +3 -2
  74. package/esm/loader.js +1 -1
  75. package/esm/reactive-controller-host-FBuCCcFC.js +41 -0
  76. package/hydrate/index.js +461 -32
  77. package/hydrate/index.mjs +461 -32
  78. package/lmvz-components/lmvz-components.esm.js +1 -1
  79. package/lmvz-components/p-43b463bf.entry.js +1 -0
  80. package/lmvz-components/p-4bd71a3c.entry.js +1 -0
  81. package/lmvz-components/p-6484fbc6.entry.js +1 -0
  82. package/lmvz-components/p-6988c3ea.entry.js +1 -0
  83. package/lmvz-components/p-758dbb82.entry.js +1 -0
  84. package/lmvz-components/p-7b15cdce.entry.js +1 -0
  85. package/lmvz-components/p-8874ff19.entry.js +1 -0
  86. package/lmvz-components/p-CtaMrBNE.js +1 -0
  87. package/lmvz-components/p-FBuCCcFC.js +1 -0
  88. package/lmvz-components/p-a5c921dc.entry.js +1 -0
  89. package/lmvz-components/p-bb46a884.entry.js +1 -0
  90. package/lmvz-components/p-bd23eab3.entry.js +1 -0
  91. package/lmvz-components/p-c6228cee.entry.js +1 -0
  92. package/lmvz-components/p-da16ff58.entry.js +1 -0
  93. package/lmvz-components/p-hRb38wX6.js +1 -0
  94. package/manifest.json +394 -1
  95. package/package.json +9 -1
  96. package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +1 -0
  97. package/types/components/lmvz-header/lmvz-header.d.ts +2 -2
  98. package/types/components/lmvz-tab/lmvz-tab.d.ts +11 -0
  99. package/types/components/lmvz-tabs/lmvz-tabs.d.ts +43 -0
  100. package/types/components.d.ts +151 -0
  101. package/types/utils/aria/list-keyboard-controller.d.ts +28 -5
  102. package/components/p-BOzeYzKk.js +0 -1
  103. package/components/p-DYa3zcGE.js +0 -1
  104. package/components/p-WLZ7VWNX.js +0 -1
  105. package/components/p-lsUdmjdw.js +0 -1
  106. package/lmvz-components/p-01aeca60.entry.js +0 -1
  107. package/lmvz-components/p-14c3d837.entry.js +0 -1
  108. package/lmvz-components/p-24e63b0a.entry.js +0 -1
  109. package/lmvz-components/p-3da301a6.entry.js +0 -1
  110. package/lmvz-components/p-40228d48.entry.js +0 -1
  111. package/lmvz-components/p-4da9073a.entry.js +0 -1
  112. package/lmvz-components/p-758078db.entry.js +0 -1
  113. package/lmvz-components/p-8dae99f1.entry.js +0 -1
  114. package/lmvz-components/p-CwX1wKkM.js +0 -1
  115. package/lmvz-components/p-e1eaa7a2.entry.js +0 -1
  116. package/lmvz-components/p-f5cece32.entry.js +0 -1
@@ -0,0 +1,29 @@
1
+ import { r as registerInstance, g as getElement, h, H as Host } from './index-CKYszC64.js';
2
+
3
+ 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; } `;
4
+
5
+ const LmvzTab = class {
6
+ constructor(hostRef) {
7
+ registerInstance(this, hostRef);
8
+ }
9
+ get el() { return getElement(this); }
10
+ mediaSlotEl;
11
+ value;
12
+ disabled = false;
13
+ selected = false;
14
+ vertical = false;
15
+ handleMediaSlotChange = () => {
16
+ this.el.toggleAttribute('has-media', (this.mediaSlotEl?.assignedElements() ?? []).length > 0);
17
+ };
18
+ componentDidLoad() {
19
+ this.handleMediaSlotChange();
20
+ this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
21
+ }
22
+ render() {
23
+ return (h(Host, { key: 'f02b0624ac752f25e3996071ab88be1364dd27c3' }, h("button", { key: '1666fea6a68c66d5bf88141660067a66e0164891', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, h("slot", { key: '23d1ef98da2a72efa3a5ec1563298fc4c08da441', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), h("span", { key: 'bd96765d2228817c621a2ad4fd4f3b05fcdb3a21', class: "label" }, h("slot", { key: 'ef51c25169a1d993797a86b89fa296218e264969' })), h("span", { key: '28dda1631d62325a29e285909ee3f1c0ea9da3ad', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
24
+ }
25
+ static get delegatesFocus() { return true; }
26
+ };
27
+ LmvzTab.style = lmvzTabCss();
28
+
29
+ export { LmvzTab as lmvz_tab };
@@ -0,0 +1,254 @@
1
+ import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-CKYszC64.js';
2
+ import { D as DirectionalFocusController } from './list-keyboard-controller-Coi8XfUH.js';
3
+ import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
4
+ import './component-DOTK1OW3.js';
5
+
6
+ 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; } `;
7
+
8
+ let tabsIdCounter = 0;
9
+ const LmvzTabs = class extends ReactiveControllerHost {
10
+ get el() { return getElement(this); }
11
+ instanceId = ++tabsIdCounter;
12
+ tabSlotEl;
13
+ panelSlotEl;
14
+ focusController = new DirectionalFocusController(this, {
15
+ orientation: 'horizontal',
16
+ manageTabIndex: true,
17
+ enableHomeAndEnd: true,
18
+ });
19
+ value;
20
+ orientation = 'horizontal';
21
+ lmvzChange;
22
+ resolvedValue;
23
+ constructor(hostRef) {
24
+ super();
25
+ registerInstance(this, hostRef);
26
+ this.lmvzChange = createEvent(this, "lmvzChange", 7);
27
+ this.addController(this.focusController);
28
+ }
29
+ componentWillLoad() {
30
+ super.componentWillLoad();
31
+ this.syncOrientation();
32
+ }
33
+ componentDidLoad() {
34
+ this.tabSlotEl?.addEventListener('slotchange', this.handleTabSlotChange);
35
+ this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
36
+ this.el.addEventListener('lmvzTabReady', this.handleTabReady);
37
+ this.handleTabSlotChange();
38
+ super.componentDidLoad();
39
+ }
40
+ disconnectedCallback() {
41
+ this.el.removeEventListener('lmvzTabReady', this.handleTabReady);
42
+ super.disconnectedCallback();
43
+ }
44
+ handleValueChange(newValue) {
45
+ this.applySelection(newValue);
46
+ }
47
+ handleOrientationChange() {
48
+ this.syncOrientation();
49
+ this.syncFocusTargets();
50
+ this.syncTabOrientation();
51
+ }
52
+ async activateTab(value) {
53
+ const tab = this.findTabByValue(value);
54
+ if (!tab || this.isTabDisabled(tab))
55
+ return;
56
+ this.selectTab(value);
57
+ }
58
+ async getTabElements() {
59
+ return this.slottedTabs;
60
+ }
61
+ async setTabPanelIds(pairs) {
62
+ const tabs = this.slottedTabs;
63
+ const panels = this.slottedPanels;
64
+ pairs.forEach(([tabId, panelId], index) => {
65
+ const tab = tabs[index];
66
+ const panel = panels[index];
67
+ const btnId = `${tabId}-btn`;
68
+ if (tab) {
69
+ tab.id = tabId;
70
+ const btn = tab.shadowRoot?.querySelector('button');
71
+ if (btn) {
72
+ btn.id = btnId;
73
+ btn.setAttribute('aria-controls', panelId);
74
+ }
75
+ }
76
+ if (panel) {
77
+ panel.id = panelId;
78
+ panel.setAttribute('aria-labelledby', btnId);
79
+ }
80
+ });
81
+ }
82
+ get slottedTabs() {
83
+ return (this.tabSlotEl?.assignedElements({ flatten: false }) ?? []).filter((el) => el.tagName.toLowerCase() === 'lmvz-tab');
84
+ }
85
+ get slottedPanels() {
86
+ return (this.panelSlotEl?.assignedElements({ flatten: false }) ?? []);
87
+ }
88
+ handleTabSlotChange = () => {
89
+ this.syncFocusTargets();
90
+ this.syncTabOrientation();
91
+ this.wireAriaIds();
92
+ this.applySelection(this.value);
93
+ this.updateIconTabsAttr();
94
+ };
95
+ handlePanelSlotChange = () => {
96
+ this.wireAriaIds();
97
+ this.applySelection(this.resolvedValue ?? this.value);
98
+ };
99
+ handleTabReady = () => {
100
+ this.syncFocusTargets();
101
+ this.wireAriaIds();
102
+ this.applySelection(this.resolvedValue ?? this.value);
103
+ this.updateIconTabsAttr();
104
+ };
105
+ updateIconTabsAttr() {
106
+ this.el.toggleAttribute('has-icon-tabs', this.slottedTabs.some((t) => t.hasAttribute('has-media')));
107
+ }
108
+ syncFocusTargets() {
109
+ const buttons = this.slottedTabs.map((tab) => tab.shadowRoot?.querySelector('button')).filter((b) => !!b);
110
+ this.focusController.updateElements(buttons);
111
+ }
112
+ syncOrientation() {
113
+ this.removeController(this.focusController);
114
+ this.focusController.hostDisconnected?.();
115
+ this.focusController = new DirectionalFocusController(this, {
116
+ orientation: this.orientation,
117
+ manageTabIndex: true,
118
+ enableHomeAndEnd: true,
119
+ });
120
+ this.addController(this.focusController);
121
+ if (this.el.isConnected) {
122
+ this.focusController.hostConnected?.();
123
+ }
124
+ }
125
+ syncTabOrientation() {
126
+ const isVertical = this.orientation === 'vertical';
127
+ this.slottedTabs.forEach((tab) => {
128
+ tab.toggleAttribute('vertical', isVertical);
129
+ });
130
+ }
131
+ wireAriaIds() {
132
+ const tabs = this.slottedTabs;
133
+ const panels = this.slottedPanels;
134
+ const prefix = `lmvz-tabs-${this.instanceId}`;
135
+ tabs.forEach((tab, index) => {
136
+ const tabId = tab.id || `${prefix}-tab-${index}`;
137
+ tab.id = tabId;
138
+ const panel = panels[index];
139
+ if (!panel)
140
+ return;
141
+ const panelId = panel.id || `${prefix}-panel-${index}`;
142
+ panel.id = panelId;
143
+ const btn = tab.shadowRoot?.querySelector('button');
144
+ if (btn) {
145
+ btn.setAttribute('aria-controls', panelId);
146
+ btn.setAttribute('id', `${tabId}-btn`);
147
+ }
148
+ panel.setAttribute('role', panel.getAttribute('role') ?? 'tabpanel');
149
+ panel.setAttribute('aria-labelledby', `${tabId}-btn`);
150
+ });
151
+ }
152
+ applySelection(requested) {
153
+ const tabs = this.slottedTabs;
154
+ if (!tabs.length)
155
+ return;
156
+ let target = this.findTabByValue(requested);
157
+ if (!target || this.isTabDisabled(target)) {
158
+ target = this.findNearestEnabled(requested) ?? undefined;
159
+ }
160
+ if (!target)
161
+ return;
162
+ const effectiveValue = target.getAttribute('value') ?? '';
163
+ this.resolvedValue = effectiveValue;
164
+ if (this.value !== effectiveValue) {
165
+ this.value = effectiveValue;
166
+ }
167
+ tabs.forEach((tab) => {
168
+ const isSelected = tab.getAttribute('value') === effectiveValue;
169
+ tab.toggleAttribute('selected', isSelected);
170
+ const btn = tab.shadowRoot?.querySelector('button');
171
+ if (btn)
172
+ btn.setAttribute('aria-selected', String(isSelected));
173
+ });
174
+ this.slottedPanels.forEach((panel, index) => {
175
+ const tab = tabs[index];
176
+ const isActive = tab?.getAttribute('value') === effectiveValue;
177
+ panel.toggleAttribute('hidden', !isActive);
178
+ });
179
+ const selectedBtn = target.shadowRoot?.querySelector('button');
180
+ if (selectedBtn) {
181
+ this.focusController.setCurrentElement(selectedBtn);
182
+ }
183
+ }
184
+ isTabDisabled(tab) {
185
+ return tab.hasAttribute('disabled') || !!tab.disabled;
186
+ }
187
+ findTabByValue(value) {
188
+ return this.slottedTabs.find((tab) => tab.getAttribute('value') === value);
189
+ }
190
+ findNearestEnabled(fromValue) {
191
+ const tabs = this.slottedTabs;
192
+ const fromIndex = tabs.findIndex((t) => t.getAttribute('value') === fromValue);
193
+ for (let offset = 1; offset < tabs.length; offset++) {
194
+ const next = tabs[(fromIndex + offset) % tabs.length];
195
+ if (next && !this.isTabDisabled(next))
196
+ return next;
197
+ const prev = tabs[(fromIndex - offset + tabs.length) % tabs.length];
198
+ if (prev && !this.isTabDisabled(prev))
199
+ return prev;
200
+ }
201
+ return undefined;
202
+ }
203
+ selectTab(value) {
204
+ if (value === this.resolvedValue)
205
+ return;
206
+ this.applySelection(value);
207
+ this.lmvzChange.emit({ value });
208
+ }
209
+ handleTabClick = (event) => {
210
+ const target = event.target;
211
+ const tab = target.closest('lmvz-tab');
212
+ if (!tab)
213
+ return;
214
+ const value = tab.getAttribute('value');
215
+ if (!value || this.isTabDisabled(tab))
216
+ return;
217
+ this.selectTab(value);
218
+ };
219
+ handleKeydown = (event) => {
220
+ if (event.key !== 'Enter' && event.key !== ' ')
221
+ return;
222
+ const active = this.el.ownerDocument.activeElement;
223
+ if (!active)
224
+ return;
225
+ let tab = null;
226
+ for (const t of this.slottedTabs) {
227
+ if (t === active) {
228
+ tab = t;
229
+ break;
230
+ }
231
+ }
232
+ if (!tab)
233
+ return;
234
+ const value = tab.getAttribute('value');
235
+ if (!value || this.isTabDisabled(tab))
236
+ return;
237
+ event.preventDefault();
238
+ this.selectTab(value);
239
+ };
240
+ render() {
241
+ return (h(Host, { key: '3a503531069e0d83be9bde0e9bc2e1747498baf2', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: '25a37d52ba6c8c1b46c1e624da13b918e9bd33d1', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: '00b4ba4cf88081d8cd4ee21976398646e4f19679', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '872aba20a4d26facafc71821f7fc88cf96b05a33', part: "panels-container", class: "panels-container" }, h("slot", { key: '7681c24945e7d50e95f749bd5c056704db120b11', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
242
+ }
243
+ static get watchers() { return {
244
+ "value": [{
245
+ "handleValueChange": 0
246
+ }],
247
+ "orientation": [{
248
+ "handleOrientationChange": 0
249
+ }]
250
+ }; }
251
+ };
252
+ LmvzTabs.style = lmvzTabsCss();
253
+
254
+ export { LmvzTabs as lmvz_tabs };
@@ -1,6 +1,7 @@
1
1
  import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-CKYszC64.js';
2
- import { R as ReactiveControllerHost, A as AriaValidationController } from './reactive-controller-host-ZrGf1F2-.js';
2
+ import { A as AriaValidationController } from './aria-validation-controller-D-KO0Asb.js';
3
3
  import { c as componentOnReady } from './component-DOTK1OW3.js';
4
+ import { R as ReactiveControllerHost } from './reactive-controller-host-FBuCCcFC.js';
4
5
  import './aria-loader-GfsGHZHY.js';
5
6
 
6
7
  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; }`;
@@ -79,7 +80,7 @@ const LmvzToggle = class extends ReactiveControllerHost {
79
80
  this.lmvzChange.emit(newChecked);
80
81
  };
81
82
  render() {
82
- return (h(Host, { key: '202842250b2c22f64b608e4d5a517a045e50a54c' }, h("span", { key: '105869ad771c9146a6a31e767e51807bb7e0b565', class: "track" }, 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 }), h("span", { key: '9d7201d14abdb987b20f52f21a314434051c9f84', class: "thumb", "aria-hidden": "true" })), h("label", { key: '7291494dd6f440099e9cbd04b3cff03a338a0e93', htmlFor: this.toggleId }, this.label)));
83
+ return (h(Host, { key: '452ea30df1191b45c606d7512982a0f743b7bf7a' }, h("span", { key: 'c538806b64de8bce70d0bc55c6a9eb279f4eff4c', class: "track" }, 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 }), h("span", { key: 'e8089a6e8ee084b3f316c837cf3225017c33a15e', class: "thumb", "aria-hidden": "true" })), h("label", { key: '085055f461f4240df2eb2b4ea441a5e782240276', htmlFor: this.toggleId }, this.label)));
83
84
  }
84
85
  static get formAssociated() { return true; }
85
86
  static get watchers() { return {
package/esm/loader.js CHANGED
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
5
5
  const defineCustomElements = async (win, options) => {
6
6
  if (typeof window === 'undefined') return undefined;
7
7
  await globalScripts();
8
- return bootstrapLazy([["lmvz-modal",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-snackbar",[[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",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-card",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox",[[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",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input",[[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",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio",[[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",[[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",[[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",[[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2",[[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);
8
+ return bootstrapLazy([["lmvz-modal",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-snackbar",[[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",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-card",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-checkbox",[[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",[[769,"lmvz-chip",{"type":[1537],"size":[1537]},null,{"type":[{"normalizeType":0}],"size":[{"normalizeSize":0}]}]]],["lmvz-input",[[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",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio",[[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",[[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",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},null,{"value":[{"handleValueChange":0}],"orientation":[{"handleOrientationChange":0}]}]]],["lmvz-toggle",[[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",[[257,"lmvz-button-group",{"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["lmvz-button_2",[[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);
9
9
  };
10
10
 
11
11
  export { defineCustomElements };
@@ -0,0 +1,41 @@
1
+ class ReactiveControllerHost {
2
+ controllers = new Set();
3
+ addController(controller) {
4
+ this.controllers.add(controller);
5
+ }
6
+ removeController(controller) {
7
+ this.controllers.delete(controller);
8
+ }
9
+ get activeControllers() {
10
+ return Array.from(this.controllers).filter((controller) => !controller.disabled);
11
+ }
12
+ connectedCallback() {
13
+ if (!this.controllers.size) {
14
+ console.warn('ReactiveControllerHost connected with no controllers registered.', this);
15
+ }
16
+ this.activeControllers.forEach((controller) => controller.hostConnected?.());
17
+ }
18
+ disconnectedCallback() {
19
+ this.activeControllers.forEach((controller) => controller.hostDisconnected?.());
20
+ }
21
+ componentWillLoad() {
22
+ this.activeControllers.forEach((controller) => controller.hostWillLoad?.());
23
+ }
24
+ componentDidLoad() {
25
+ this.activeControllers.forEach((controller) => controller.hostDidLoad?.());
26
+ }
27
+ componentWillRender() {
28
+ this.activeControllers.forEach((controller) => controller.hostWillRender?.());
29
+ }
30
+ componentDidRender() {
31
+ this.activeControllers.forEach((controller) => controller.hostDidRender?.());
32
+ }
33
+ componentWillUpdate() {
34
+ this.activeControllers.forEach((controller) => controller.hostWillUpdate?.());
35
+ }
36
+ componentDidUpdate() {
37
+ this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
38
+ }
39
+ }
40
+
41
+ export { ReactiveControllerHost as R };