@lmvz-ds/components 0.38.0 → 0.40.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 (114) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +12 -20
  3. package/cjs/{directional-focus-controller-8Xd_7MHT.js → directional-focus-controller-DDnhfX5w.js} +15 -5
  4. package/cjs/index.cjs.js +3 -195
  5. package/cjs/lmvz-action-list.cjs.entry.js +2 -2
  6. package/cjs/lmvz-button-group.cjs.entry.js +4 -0
  7. package/cjs/lmvz-button_2.cjs.entry.js +1 -1
  8. package/cjs/lmvz-card.cjs.entry.js +1 -1
  9. package/cjs/lmvz-components.cjs.js +1 -1
  10. package/cjs/lmvz-header_2.cjs.entry.js +3 -3
  11. package/cjs/lmvz-message.cjs.entry.js +2 -0
  12. package/cjs/lmvz-popover.cjs.entry.js +1 -1
  13. package/cjs/lmvz-select.cjs.entry.js +2 -3
  14. package/cjs/lmvz-tab.cjs.entry.js +3 -3
  15. package/cjs/lmvz-tabs.cjs.entry.js +43 -44
  16. package/cjs/loader.cjs.js +1 -1
  17. package/cjs/public-DTgpEs1_.js +206 -0
  18. package/collection/components/lmvz-action-list/lmvz-action-list.css +119 -116
  19. package/collection/components/lmvz-button/lmvz-button.css +109 -106
  20. package/collection/components/lmvz-card/lmvz-card.css +106 -103
  21. package/collection/components/lmvz-header/lmvz-header.js +2 -2
  22. package/collection/components/lmvz-select/lmvz-select.css +58 -43
  23. package/collection/components/lmvz-select/lmvz-select.js +1 -25
  24. package/collection/components/lmvz-snackbar/public.js +3 -0
  25. package/collection/components/lmvz-tab/lmvz-tab.css +0 -13
  26. package/collection/components/lmvz-tab/lmvz-tab.js +10 -14
  27. package/collection/components/lmvz-tabs/lmvz-tabs.css +0 -5
  28. package/collection/components/lmvz-tabs/lmvz-tabs.js +50 -65
  29. package/collection/utils/aria/directional-focus-controller.js +16 -7
  30. package/collection/utils/icons/public.js +3 -0
  31. package/components/index.js +1 -1
  32. package/components/lmvz-action-list.js +1 -1
  33. package/components/lmvz-button-group.js +1 -1
  34. package/components/lmvz-button.js +1 -1
  35. package/components/lmvz-card.js +1 -1
  36. package/components/lmvz-datepicker.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-link.js +1 -1
  41. package/components/lmvz-menuitem.js +1 -1
  42. package/components/lmvz-message.js +1 -1
  43. package/components/lmvz-modal.js +1 -1
  44. package/components/lmvz-popover.js +1 -1
  45. package/components/lmvz-select.js +1 -1
  46. package/components/lmvz-snackbar.js +1 -1
  47. package/components/lmvz-tab.js +1 -1
  48. package/components/lmvz-tabs.js +1 -1
  49. package/components/{p-CcP_sfo8.js → p--mU29mrX.js} +1 -1
  50. package/components/p-BPa0FHVO.js +1 -0
  51. package/components/{p-SnHLBAbf.js → p-Bc5MM0zh.js} +1 -1
  52. package/components/p-CyDgnpOB.js +1 -0
  53. package/components/{p-C-pRMuMh.js → p-DIyiticz.js} +1 -1
  54. package/components/{p-BhALzK62.js → p-DJLdOjL4.js} +1 -1
  55. package/components/{p-B6bUOPCG.js → p-DSDBThqb.js} +1 -1
  56. package/components/p-DXhP6UeF.js +1 -0
  57. package/components/p-DsTgD0_a.js +1 -0
  58. package/components/p-DyQ1GbaN.js +1 -0
  59. package/components/p-niXjuPxe.js +1 -0
  60. package/esm/{directional-focus-controller-QukTTWBE.js → directional-focus-controller-CJ0yNC00.js} +15 -5
  61. package/esm/index.js +1 -197
  62. package/esm/lmvz-action-list.entry.js +2 -2
  63. package/esm/lmvz-button-group.entry.js +4 -0
  64. package/esm/lmvz-button_2.entry.js +1 -1
  65. package/esm/lmvz-card.entry.js +1 -1
  66. package/esm/lmvz-components.js +1 -1
  67. package/esm/lmvz-header_2.entry.js +3 -3
  68. package/esm/lmvz-message.entry.js +2 -0
  69. package/esm/lmvz-popover.entry.js +1 -1
  70. package/esm/lmvz-select.entry.js +2 -3
  71. package/esm/lmvz-tab.entry.js +3 -3
  72. package/esm/lmvz-tabs.entry.js +43 -44
  73. package/esm/loader.js +1 -1
  74. package/esm/public-m6pRVUeP.js +204 -0
  75. package/hydrate/index.js +280 -66
  76. package/hydrate/index.mjs +280 -66
  77. package/lmvz-components/index.esm.js +1 -1
  78. package/lmvz-components/lmvz-components.esm.js +1 -1
  79. package/lmvz-components/p-143e9621.entry.js +1 -0
  80. package/lmvz-components/p-220e455e.entry.js +1 -0
  81. package/lmvz-components/p-304c7554.entry.js +1 -0
  82. package/lmvz-components/p-316dd61a.entry.js +1 -0
  83. package/lmvz-components/{p-1e1dea53.entry.js → p-41286514.entry.js} +1 -1
  84. package/lmvz-components/p-93b781ca.entry.js +1 -0
  85. package/lmvz-components/p-BPa0FHVO.js +1 -0
  86. package/lmvz-components/p-BlkpdeQI.js +1 -0
  87. package/lmvz-components/p-c884c76e.entry.js +1 -0
  88. package/lmvz-components/p-ebad823c.entry.js +1 -0
  89. package/lmvz-components/p-edec4d09.entry.js +1 -0
  90. package/lmvz-components/p-f911691c.entry.js +1 -0
  91. package/manifest.json +38 -98
  92. package/package.json +2 -1
  93. package/types/components/lmvz-select/lmvz-select.d.ts +0 -1
  94. package/types/components/lmvz-snackbar/public.d.ts +6 -0
  95. package/types/components/lmvz-tab/lmvz-tab.d.ts +1 -1
  96. package/types/components/lmvz-tabs/lmvz-tabs.d.ts +8 -8
  97. package/types/components.d.ts +17 -39
  98. package/types/index.d.ts +5 -0
  99. package/types/utils/aria/directional-focus-controller.d.ts +9 -7
  100. package/types/utils/icons/public.d.ts +6 -0
  101. package/components/p-CgGqXTxQ.js +0 -1
  102. package/components/p-D3wobLRi.js +0 -1
  103. package/components/p-DfFdoFeH.js +0 -1
  104. package/components/p-GJaYKpHS.js +0 -1
  105. package/lmvz-components/p-3b7203a3.entry.js +0 -1
  106. package/lmvz-components/p-3fc6c3f6.entry.js +0 -1
  107. package/lmvz-components/p-9813a7d2.entry.js +0 -1
  108. package/lmvz-components/p-CHxiS3ja.js +0 -1
  109. package/lmvz-components/p-b5a5eb9a.entry.js +0 -1
  110. package/lmvz-components/p-cadd88e5.entry.js +0 -1
  111. package/lmvz-components/p-cebaddb0.entry.js +0 -1
  112. package/lmvz-components/p-d53e69de.entry.js +0 -1
  113. package/lmvz-components/p-db75e362.entry.js +0 -1
  114. package/lmvz-components/p-eb741e1f.entry.js +0 -1
package/esm/index.js CHANGED
@@ -1,202 +1,6 @@
1
1
  export { A as ARIA_VALIDATION_RUNTIME_CHANGED_EVENT, d as disableAriaValidation, e as enableAriaValidation, i as isAriaValidationEnabled, q as queueValidation, u as useVerboseLogging } from './aria-loader-BfH06m7H.js';
2
2
  export { g as chipSizes, f as chipTypes, d as iconSizes, e as iconWeights, b as inputSizes, i as inputTypes, l as linkTypes, m as messageTypes, p as popoverPlacements, n as popoverSizes, s as scaleValues, c as selectSizes, a as sizes, k as snackbarDismissReasons, j as snackbarPriorities, h as snackbarStatuses, t as textSizes, v as variants } from './ds.constants-0ctLESas.js';
3
+ export { S as SnackbarController } from './public-m6pRVUeP.js';
3
4
  export { g as getRegisteredIconProvider, r as registerIconProvider, t as typedIconFromSet } from './icons-DQOFaux5.js';
4
5
  import './svg-Dz3GD0LB.js';
5
6
  import './logger-D06Ds9Dh.js';
6
-
7
- const PRIORITY_MAP = {
8
- low: 0,
9
- normal: 1,
10
- high: 2,
11
- };
12
- const STATUS_DURATION = {
13
- success: 5000,
14
- warning: 5000,
15
- error: 8000,
16
- };
17
- let idCounter = 0;
18
- function nextId() {
19
- idCounter += 1;
20
- return `snackbar-${idCounter}`;
21
- }
22
- function resolveHostElement() {
23
- if (typeof document === 'undefined') {
24
- return undefined;
25
- }
26
- const existing = document.querySelector('[data-snackbar-host]');
27
- if (existing) {
28
- return existing;
29
- }
30
- const el = document.createElement('lmvz-snackbar');
31
- el.setAttribute('data-snackbar-host', '');
32
- document.body.appendChild(el);
33
- return el;
34
- }
35
- class SnackbarController {
36
- hostEl = undefined;
37
- active = undefined;
38
- getHost() {
39
- if (this.hostEl !== undefined && !this.hostEl.isConnected) {
40
- this.hostEl = undefined;
41
- }
42
- if (this.hostEl === undefined) {
43
- this.hostEl = resolveHostElement();
44
- }
45
- return this.hostEl;
46
- }
47
- clearTimer(entry) {
48
- if (entry.timerId !== undefined) {
49
- clearTimeout(entry.timerId);
50
- entry.timerId = undefined;
51
- }
52
- }
53
- scheduleTimer(entry, delayMs) {
54
- if (delayMs <= 0) {
55
- return;
56
- }
57
- entry.timerStartedAt = Date.now();
58
- entry.timerId = setTimeout(() => {
59
- if (this.active !== undefined && this.active.id === entry.id) {
60
- this.dismissActive(entry, 'timeout');
61
- }
62
- }, delayMs);
63
- }
64
- dismissActive(entry, reason) {
65
- this.clearTimer(entry);
66
- const host = entry.hostEl;
67
- host.removeEventListener('pointerenter', entry.onPointerEnter);
68
- host.removeEventListener('pointerleave', entry.onPointerLeave);
69
- host.removeEventListener('focusin', entry.onFocusIn);
70
- host.removeEventListener('focusout', entry.onFocusOut);
71
- if (entry.onActionListener) {
72
- host.removeEventListener('lmvzAction', entry.onActionListener);
73
- }
74
- host.hide?.();
75
- if (this.active?.id === entry.id) {
76
- this.active = undefined;
77
- }
78
- if (reason !== 'action') {
79
- host.dispatchEvent(new CustomEvent('lmvzClose', { detail: { reason }, bubbles: true, composed: true }));
80
- }
81
- entry.resolve({ reason });
82
- }
83
- pauseTimer(entry) {
84
- entry.pauseCount += 1;
85
- if (entry.pauseCount > 1 || entry.timerId === undefined) {
86
- return;
87
- }
88
- const elapsed = entry.timerStartedAt !== undefined ? Date.now() - entry.timerStartedAt : 0;
89
- entry.remaining = Math.max(0, entry.remaining - elapsed);
90
- entry.timerStartedAt = undefined;
91
- this.clearTimer(entry);
92
- }
93
- resumeTimer(entry) {
94
- if (entry.pauseCount > 0) {
95
- entry.pauseCount -= 1;
96
- }
97
- if (entry.pauseCount > 0) {
98
- return;
99
- }
100
- if (entry.remaining > 0) {
101
- this.scheduleTimer(entry, entry.remaining);
102
- }
103
- }
104
- applyToHost(host, options) {
105
- host.setAttribute('status', options.status ?? 'success');
106
- if (options.actionLabel !== undefined) {
107
- host.setAttribute('action-label', options.actionLabel);
108
- }
109
- else {
110
- host.removeAttribute('action-label');
111
- }
112
- }
113
- open(options) {
114
- const incomingPriority = PRIORITY_MAP[options.priority ?? 'normal'];
115
- if (this.active !== undefined && incomingPriority < this.active.priority) {
116
- let swallowResolve;
117
- const closed = new Promise((resolve) => {
118
- swallowResolve = resolve;
119
- });
120
- swallowResolve({ reason: 'swallowed' });
121
- const id = nextId();
122
- return {
123
- id,
124
- closed,
125
- dismiss() {
126
- },
127
- };
128
- }
129
- if (this.active !== undefined) {
130
- this.dismissActive(this.active, 'overridden');
131
- }
132
- const host = this.getHost();
133
- if (host === undefined) {
134
- const id = nextId();
135
- let ssrResolve;
136
- const closed = new Promise((resolve) => {
137
- ssrResolve = resolve;
138
- });
139
- ssrResolve({ reason: 'swallowed' });
140
- return { id, closed, dismiss() { } };
141
- }
142
- const id = nextId();
143
- const status = options.status ?? 'success';
144
- const durationMs = options.duration === 0 ? 0 : (options.duration ?? STATUS_DURATION[status]);
145
- let entryResolve;
146
- const closed = new Promise((resolve) => {
147
- entryResolve = resolve;
148
- });
149
- const entry = {
150
- id,
151
- priority: incomingPriority,
152
- resolve: entryResolve,
153
- timerId: undefined,
154
- remaining: durationMs,
155
- timerStartedAt: undefined,
156
- pauseCount: 0,
157
- hostEl: host,
158
- onPointerEnter: () => this.pauseTimer(entry),
159
- onPointerLeave: () => this.resumeTimer(entry),
160
- onFocusIn: () => this.pauseTimer(entry),
161
- onFocusOut: () => this.resumeTimer(entry),
162
- };
163
- this.active = entry;
164
- host.addEventListener('pointerenter', entry.onPointerEnter);
165
- host.addEventListener('pointerleave', entry.onPointerLeave);
166
- host.addEventListener('focusin', entry.onFocusIn);
167
- host.addEventListener('focusout', entry.onFocusOut);
168
- this.applyToHost(host, options);
169
- const onAction = () => {
170
- if (this.active !== undefined && this.active.id === id) {
171
- options.onAction?.();
172
- this.dismissActive(entry, 'action');
173
- }
174
- };
175
- entry.onActionListener = onAction;
176
- host.addEventListener('lmvzAction', onAction, { once: true });
177
- host.show?.();
178
- queueMicrotask(() => host.setAttribute('message', options.message));
179
- if (durationMs > 0) {
180
- this.scheduleTimer(entry, durationMs);
181
- }
182
- return {
183
- id,
184
- closed,
185
- dismiss: () => {
186
- if (this.active?.id === id) {
187
- this.dismissActive(entry, 'manual');
188
- }
189
- },
190
- };
191
- }
192
- dismiss(id) {
193
- if (!this.active) {
194
- return;
195
- }
196
- if (!id || this.active.id === id) {
197
- this.dismissActive(this.active, 'manual');
198
- }
199
- }
200
- }
201
-
202
- export { SnackbarController };
@@ -1,12 +1,12 @@
1
1
  import { g as getElement, r as registerInstance, h, H as Host } from './index-DVab4vzV.js';
2
2
  import { A as AriaValidationController } from './aria-validation-controller-Dwv7n0rk.js';
3
- import { D as DirectionalFocusController } from './directional-focus-controller-QukTTWBE.js';
3
+ import { D as DirectionalFocusController } from './directional-focus-controller-CJ0yNC00.js';
4
4
  import { a as isLmvzButton } from './element.util-3ydVsxUW.js';
5
5
  import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
6
6
  import './aria-loader-BfH06m7H.js';
7
7
  import './aria.constants-DIyiticz.js';
8
8
 
9
- const lmvzActionListCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-action-list-h { display: flex; flex-direction: column; gap: 0; min-width: 15vw; button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification-override, center); gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); min-width: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } lmvz-button, button { --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px); --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-content-justification-override: normal; width: 100%; display: block; } button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); &:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } } }`;
9
+ const lmvzActionListCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-action-list-h { display: flex; flex-direction: column; gap: 0; min-width: 15vw; button { & { & { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } & > * { font: inherit; color: inherit; } &:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } &:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } &:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } &:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } &.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } &.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } &.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } &.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } &.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } &.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } &.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } } --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); &:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } } lmvz-button, button { --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px); --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-content-justification: normal; width: 100%; } }`;
10
10
 
11
11
  const LmvzActionList = class extends ReactiveControllerHost {
12
12
  get el() { return getElement(this); }
@@ -1,7 +1,11 @@
1
1
  import { r as registerInstance, g as getElement, h, H as Host } from './index-DVab4vzV.js';
2
2
  import { a as isPromise, i as isAriaValidationEnabled } from './aria-loader-BfH06m7H.js';
3
3
  import { v as variants } from './ds.constants-0ctLESas.js';
4
+ import './public-m6pRVUeP.js';
4
5
  import { d as isPrimaryAction, e as isVisible, f as isActionButton, h as isDisabledButton, j as isSecondaryAction, a as isLmvzButton, k as canReceiveFocus } from './element.util-3ydVsxUW.js';
6
+ import './icons-DQOFaux5.js';
7
+ import './svg-Dz3GD0LB.js';
8
+ import './logger-D06Ds9Dh.js';
5
9
  import './aria.constants-DIyiticz.js';
6
10
 
7
11
  /**
@@ -10,7 +10,7 @@ import './aria-loader-BfH06m7H.js';
10
10
  import './aria.constants-DIyiticz.js';
11
11
  import './logger-D06Ds9Dh.js';
12
12
 
13
- const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :host { button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification-override, center); gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); min-width: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } display: inline-block; button { width: 100%; } } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
13
+ const lmvzButtonCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } :host { display: inline-block; button { & { & { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } & > * { font: inherit; color: inherit; } &:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } &:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } &:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } &:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } &.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } &.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } &.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } &.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } &.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } &.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } &.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } } width: 100%; } } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
14
14
 
15
15
  const LmvzButton = class extends ReactiveControllerHost {
16
16
  get el() { return getElement(this); }
@@ -20,7 +20,7 @@ function joinPath(...parts) {
20
20
  return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
21
21
  }
22
22
 
23
- const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-card-h { button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification-override, center); gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); min-width: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } button > * { font: inherit; color: inherit; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } button:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } button:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } button.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } button.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } button.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } button.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } button.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }`;
23
+ const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-8-4, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } fieldset { border: none; margin: 0; padding: 0; } legend { padding: 0; display: block; } } .sc-lmvz-card-h { & { & { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } & > * { font: inherit; color: inherit; } &:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } &:is([disabled], .disabled) { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } &:not([disabled]):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); } &:not([disabled]):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); } &.primary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } &.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e)); } &.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454)); } &.danger { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.danger:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419)); } &.tertiary { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000)); } &.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000)); } &.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000)); } &.small { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router)); } &.large { --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } } display: flex; min-width: var(--lmvz-card-component-card-minwidth, 20.4375rem); max-width: var(--lmvz-card-component-card-maxwidth, 21.6875rem); flex-direction: column; align-items: flex-start; border-radius: var(--lmvz-semantic-border-radius-lg, 14px); border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0); background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card { color: var(--lmvz-semantic-color-on-surface-primary, #000000); font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .top.sc-lmvz-card { display: flex; padding: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); flex-direction: column; justify-content: center; align-items: center; align-self: stretch; } .bottom.sc-lmvz-card { display: flex; min-width: 150px; padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-14-10, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)); flex-direction: column; align-items: flex-start; align-self: stretch; } .title.sc-lmvz-card { margin: 0; display: flex; justify-content: center; align-items: center; align-self: stretch; padding-bottom: var(--lmvz-global-s4, 4px); overflow-wrap: break-word; font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.82rem + 0.78vw, 2.75rem) / 1.4 Router); } .description.sc-lmvz-card { display: flex; margin: 0; padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-items: flex-start; align-self: stretch; white-space: pre-line; font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); } .image-wrapper.sc-lmvz-card { aspect-ratio: 4 / 3; width: 100%; background-size: cover; background-position: center; flex: 1 0 0; align-self: stretch; border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card { margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem)); display: flex; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card { display: flex; justify-content: center; align-items: center; gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem)); flex: 1 0 0; }`;
24
24
 
25
25
  const LmvzCard = class {
26
26
  constructor(hostRef) {
@@ -17,5 +17,5 @@ var patchBrowser = () => {
17
17
 
18
18
  patchBrowser().then(async (options) => {
19
19
  await globalScripts();
20
- return bootstrapLazy([["lmvz-datepicker",[[593,"lmvz-datepicker",{"value":[6145],"visibleMonth":[6145,"visible-month"],"min":[1],"max":[1],"locale":[1],"firstDayOfWeek":[2,"first-day-of-week"],"disabled":[516],"readonly":[516],"required":[516],"name":[513],"label":[1],"placeholder":[1],"helperText":[1,"helper-text"],"errorMessage":[1,"error-message"],"open":[1540],"displayFormat":[1,"display-format"],"focusedDate":[32],"valueDate":[32],"visibleMonthDate":[32],"inputText":[32],"hasUnparseableInput":[32],"isInvalid":[32],"nativeError":[32],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{"required":[{"handleValidityRelevantPropChange":0}],"min":[{"handleValidityRelevantPropChange":0}],"max":[{"handleValidityRelevantPropChange":0}],"locale":[{"handleDisplayFormatChange":0}],"displayFormat":[{"handleDisplayFormatChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-modal",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-select",[[838,"lmvz-select",{"value":[1025],"multiple":[516],"values":[1040],"label":[1],"helperText":[1,"helper-text"],"error":[6660],"errorMessage":[1,"error-message"],"disabled":[516],"required":[516],"name":[513],"size":[513],"highlighted":[516],"nativeError":[32],"selectedLabel":[32],"selectedId":[32],"activeId":[32],"isOpen":[32],"optionGroups":[32],"focusTrigger":[64],"blurTrigger":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"value":[{"handleValueChange":0}],"values":[{"handleValuesChange":0}],"required":[{"handleRequiredChange":0}],"disabled":[{"handleDisabledChange":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-link",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"],"initFocus":[64]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-action-list",[[774,"lmvz-action-list",{"label":[1],"initFocus":[64]}]]],["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":[513],"disabled":[516],"required":[516],"error":[6660],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"nativeError":[32],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}]}]]],["lmvz-menuitem",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"nativeError":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"],[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-spinner",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"vertical":[516]}]]],["lmvz-tabs",[[769,"lmvz-tabs",{"value":[1537],"orientation":[1537],"resolvedValue":[32],"initFocus":[64],"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],"getValidationMessage":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["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],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-popover",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"containerRole":[1,"container-role"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["lmvz-button_2",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[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);
20
+ return bootstrapLazy([["lmvz-datepicker",[[593,"lmvz-datepicker",{"value":[6145],"visibleMonth":[6145,"visible-month"],"min":[1],"max":[1],"locale":[1],"firstDayOfWeek":[2,"first-day-of-week"],"disabled":[516],"readonly":[516],"required":[516],"name":[513],"label":[1],"placeholder":[1],"helperText":[1,"helper-text"],"errorMessage":[1,"error-message"],"open":[1540],"displayFormat":[1,"display-format"],"focusedDate":[32],"valueDate":[32],"visibleMonthDate":[32],"inputText":[32],"hasUnparseableInput":[32],"isInvalid":[32],"nativeError":[32],"checkValidity":[64],"reportValidity":[64]},[[0,"keydown","handleKeydown"],[0,"focusin","handleInputFocus"],[0,"click","handleInputFocus"],[0,"invalid","handleInvalid"]],{"required":[{"handleValidityRelevantPropChange":0}],"min":[{"handleValidityRelevantPropChange":0}],"max":[{"handleValidityRelevantPropChange":0}],"locale":[{"handleDisplayFormatChange":0}],"displayFormat":[{"handleDisplayFormatChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-modal",[[769,"lmvz-modal",{"open":[1540],"closeLabel":[1,"close-label"],"hasHeader":[32]},[[0,"submit","handleFormDialogSubmit"]],{"open":[{"handleOpenChange":0}]}]]],["lmvz-message",[[769,"lmvz-message",{"type":[513],"live":[1],"leadingIcon":[4,"leading-icon"],"dismissible":[4],"closeLabel":[1,"close-label"],"actionLabel":[1,"action-label"]}]]],["lmvz-select",[[838,"lmvz-select",{"value":[1025],"multiple":[516],"values":[1040],"label":[1],"helperText":[1,"helper-text"],"error":[6660],"errorMessage":[1,"error-message"],"disabled":[516],"required":[516],"name":[513],"size":[513],"nativeError":[32],"selectedLabel":[32],"selectedId":[32],"activeId":[32],"isOpen":[32],"optionGroups":[32],"focusTrigger":[64],"blurTrigger":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"value":[{"handleValueChange":0}],"values":[{"handleValuesChange":0}],"required":[{"handleRequiredChange":0}],"disabled":[{"handleDisabledChange":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-link",[[785,"lmvz-link",{"href":[513],"target":[513],"rel":[1],"type":[1537],"externalLabel":[1,"external-label"]},null,{"type":[{"normalizeType":0}]}]]],["lmvz-header_2",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"],"initFocus":[64]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}],[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-action-list",[[774,"lmvz-action-list",{"label":[1],"initFocus":[64]}]]],["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":[513],"disabled":[516],"required":[516],"error":[6660],"errorMessage":[1,"error-message"],"helperText":[1,"helper-text"],"form":[1],"autofocus":[4],"nativeError":[32],"checkedState":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}]}]]],["lmvz-menuitem",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-radio",[[578,"lmvz-radio",{"label":[1],"checked":[1540],"value":[1],"name":[513],"disabled":[516],"required":[516],"error":[6660],"helperText":[1,"helper-text"],"form":[513],"autofocus":[4],"nativeError":[32],"focusInput":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64]},[[0,"invalid","handleInvalid"],[0,"keydown","handleKeydown"]],{"checked":[{"handleCheckedChange":0}],"required":[{"handleRequiredChange":0}],"value":[{"handleValueChange":0}],"label":[{"handleLabelChange":0}]}]]],["lmvz-spinner",[[513,"lmvz-spinner",{"size":[513],"ariaLabel":[513,"aria-label"]}]]],["lmvz-tab",[[785,"lmvz-tab",{"value":[513],"disabled":[516],"selected":[516],"panel":[513]}]]],["lmvz-tabs",[[769,"lmvz-tabs",{"value":[1537],"resolvedValue":[32],"initFocus":[64],"activateTab":[64],"getTabElements":[64],"setTabPanelIds":[64]},[[0,"slotchange","handleSlotChangeEvent"]],{"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],"getValidationMessage":[64],"getInputElement":[64]},null,{"checked":[{"handleCheckedChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-button-group",[[769,"lmvz-button-group",{"stacked":[516],"primaryEnabledAction":[2064],"hasActions":[2052,"has-actions"]}]]],["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],"size":[513],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getValidationMessage":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-popover",[[769,"lmvz-popover",{"open":[1540],"anchor":[1],"placement":[1],"size":[1],"autoFocus":[4,"auto-focus"],"containerRole":[1,"container-role"],"label":[1],"anchorEl":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"open":[{"handleOpenChange":0}],"anchor":[{"handleAnchorChange":1}]}]]],["lmvz-button_2",[[785,"lmvz-button",{"ti":[514,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1],"formMethod":[1,"form-method"],"name":[1],"value":[1],"buttonRole":[1,"button-role"]}],[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);
21
21
  });
@@ -1,6 +1,6 @@
1
1
  import { g as getElement, r as registerInstance, h, H as Host } from './index-DVab4vzV.js';
2
2
  import { A as AriaValidationController } from './aria-validation-controller-Dwv7n0rk.js';
3
- import { D as DirectionalFocusController } from './directional-focus-controller-QukTTWBE.js';
3
+ import { D as DirectionalFocusController } from './directional-focus-controller-CJ0yNC00.js';
4
4
  import { R as ReactiveControllerHost } from './reactive-controller-host-CICeIanv.js';
5
5
  export { lmvz_menuitem } from './lmvz-menuitem.entry.js';
6
6
  import './aria-loader-BfH06m7H.js';
@@ -20,7 +20,7 @@ const LmvzHeader = class extends ReactiveControllerHost {
20
20
  primarySlot;
21
21
  secondarySlot;
22
22
  secondaryNav;
23
- keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both' });
23
+ keyboardNavigationController = new DirectionalFocusController(this, { orientation: 'both', manageTabIndex: false, enableHomeAndEnd: false });
24
24
  get primaryMenuitems() {
25
25
  return this.primarySlot?.assignedElements({ flatten: false }) || [];
26
26
  }
@@ -97,7 +97,7 @@ const LmvzHeader = class extends ReactiveControllerHost {
97
97
  }
98
98
  }
99
99
  render() {
100
- return (h(Host, { key: '77744fd74160551232eb0347e9ebb01eb3b9bec0', onFocus: this.delegateFocus.bind(this) }, h("div", { key: 'dfd78b2a2ab06b010d9f29dd61f57aced82243fe', class: "brand" }, h("slot", { key: 'c6d29bbdbcbe581a8a170fbeb3d6ab1e31d27dcd', name: "brand" }, h("img", { key: '80cea3b254d153411864d52c2ba300e0eb3c57a7', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '71c53ae0300b61291d0763cdb23f1f645a83928a', "aria-label": "Hauptnavigation" }, h("div", { key: '09949b77a66c54a10c4c141de846fd5697b9d445', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'acec0cf7e13325c49d1e0929b90b056ad1cbbe64', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: 'd35860c71ad5e28ee2e3aaafb157acbeff41d83e', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: 'a4c3a1ad1b1de5bd903b54ed6bd1616ce6517bbb', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'ff50045d9ab28bf66a619a48d9ea1f0ed2f5f952', class: "actions" }, h("slot", { key: '6ead0b7a54bf93bb06f0eab2aa8159bd6e96e8f5', name: "actions" }))));
100
+ return (h(Host, { key: 'a72c860d7f67c9631c462c0abcc798bb142dfc55', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '4ed87264d201c513bce284536793692424ed864b', class: "brand" }, h("slot", { key: '9291d81d7f8a630007b8ad827a16ebea7222b9d2', name: "brand" }, h("img", { key: '77da99409f40d93e4a2d190cbb2a8857f1e81c36', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '3c40c04bb23524ae58e391a54b044e225a25ad07', "aria-label": "Hauptnavigation" }, h("div", { key: '207b8032d3d11b4bfacb6e7fcffb683ad5da8ccc', role: "menubar", class: "primary-menubar" }, h("slot", { key: '8ae67a57ac7b6bb6083c469a857542e31b0c2294', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '86b9696c95e9ae0e3843fa1607f268dcae8cb279', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '67966de33555dc26ac2dc51fc8a85d456a2e8e85', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: 'bfb2831144cee723c3182d96d64f44be1cc5a78b', class: "actions" }, h("slot", { key: '6956b81fa8ed6c446edc5f7d9708462b39bc8cbb', name: "actions" }))));
101
101
  }
102
102
  static get watchers() { return {
103
103
  "lmvzActiveNav": [{
@@ -1,9 +1,11 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host } from './index-DVab4vzV.js';
2
2
  import { t as toValidSvgStringWithFallback } from './svg-Dz3GD0LB.js';
3
3
  import { i as isAriaValidationEnabled } from './aria-loader-BfH06m7H.js';
4
+ import './public-m6pRVUeP.js';
4
5
  import { c as closeSmSvg } from './close-sm-BSV3KDWl.js';
5
6
  import { i as infoSvg, w as warningSvg } from './warning-DsT_K3_I.js';
6
7
  import './logger-D06Ds9Dh.js';
8
+ import './icons-DQOFaux5.js';
7
9
 
8
10
  const lmvzMessageCss = () => `:host{display:flex;flex-direction:row;align-items:flex-start;width:100%;padding:var(--lmvz-dimension-12-10, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)) var(--lmvz-dimension-14-12, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));gap:var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));border:var(--lmvz-semantic-border-width-default, 1px) solid;border-radius:var(--lmvz-semantic-border-radius-md, 6px);font:var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)}:host([type='neutral']){background-color:var(--lmvz-semantic-color-status-active, #f6fbfe);border-color:var(--lmvz-semantic-color-status-on-active-subtle, #7fccf5);color:var(--lmvz-semantic-color-status-on-active, #0e7ab4)}:host([type='warning']){background-color:var(--lmvz-semantic-color-status-warning, #ffeeb8);border-color:var(--lmvz-semantic-color-status-on-warning-subtle, #e6b000);color:var(--lmvz-semantic-color-status-on-warning, #614a00)}.leading-icon{flex-shrink:0;display:flex;align-items:flex-start;padding-top:2px;width:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));height:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}.leading-icon svg{width:100%;height:100%}.message{flex:1}`;
9
11
 
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-DVab4vzV.js';
2
2
  import { i as isAriaValidationEnabled } from './aria-loader-BfH06m7H.js';
3
- import { i as isFocusControllerHost } from './directional-focus-controller-QukTTWBE.js';
3
+ import { i as isFocusControllerHost } from './directional-focus-controller-CJ0yNC00.js';
4
4
  import { a as addElementActivationListener } from './element-activation-controller-dxJZKMag.js';
5
5
  import { w as wait, a as waitFrame } from './async.util-DZj20TV1.js';
6
6
  import { f as isActionButton, g as getDeepActiveElement, m as isHtmlElement, w as walkShadowDOMUntil, c as isInteractiveElement, k as canReceiveFocus } from './element.util-3ydVsxUW.js';
@@ -161,7 +161,7 @@ class ListboxController {
161
161
  }
162
162
  }
163
163
 
164
- const lmvzSelectCss = () => `@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-select-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --lmvz-internal-select-floating-label-top-offset: 0.375rem; --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --lmvz-select-border-color: var(--lmvz-semantic-color-border-alternate, #c7c7c7); --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1); --lmvz-select-label-minimized-padding-x: 4px; --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); padding-top: var(--lmvz-internal-select-floating-label-top-offset); } .select-wrapper.sc-lmvz-select { position: relative; height: var(--lmvz-select-height); } label.sc-lmvz-select { position: absolute; top: 50%; left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-label-color); line-height: normal; white-space: nowrap; pointer-events: none; z-index: 2; transform: translateY(-50%); transform-origin: left top; transition: top 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select { opacity: 0; padding: 0; } label.floating-label.sc-lmvz-select { top: var(--lmvz-select-label-top-offset); transform: translateY(0) scale(0.85); left: calc(var(--lmvz-select-padding-x) - 2px); background-color: var(--lmvz-select-bg); padding: 0 var(--lmvz-select-label-minimized-padding-x); opacity: 1; font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select { color: var(--lmvz-select-error-color); margin-left: 2px; display: inline-block; line-height: 0; vertical-align: middle; } .select-trigger.sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; width: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color); box-sizing: border-box; cursor: pointer; position: relative; z-index: 1; transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select, [highlighted].sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select, [error]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select { border-color: var(--lmvz-select-border-color-hover); } [error].sc-lmvz-select-h .select-trigger.sc-lmvz-select { border-color: var(--lmvz-select-error-color); } [highlighted].sc-lmvz-select-h .select-trigger.sc-lmvz-select { background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); border-color: var(--lmvz-semantic-color-border-active, #0f8acc); color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } [highlighted].sc-lmvz-select-h label.floating-label.sc-lmvz-select { background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .sc-lmvz-select-h:has(:focus-visible) .select-trigger.sc-lmvz-select { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-select-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .sc-lmvz-select-h:not([highlighted]) .select-wrapper.has-value.sc-lmvz-select .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child + span.sc-lmvz-select { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .select-trigger.sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-select-chevron-size); height: var(--lmvz-select-chevron-size); flex-shrink: 0; } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child lmvz-chip.sc-lmvz-select { vertical-align: middle; } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child lmvz-chip.sc-lmvz-select + lmvz-chip.sc-lmvz-select { margin-inline-start: var(--lmvz-select-gap); } .lmvz-select-native-options.sc-lmvz-select { display: none; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select { opacity: var(--lmvz-select-disabled-opacity); pointer-events: none; cursor: not-allowed; } [role='status'].sc-lmvz-select { padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-helper-color); line-height: normal; } [role='alert'].sc-lmvz-select { padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); color: var(--lmvz-select-error-color); line-height: normal; } [size='small'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .lmvz-select-option.sc-lmvz-select { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); display: flex; align-items: center; gap: var(--lmvz-select-gap); padding: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); border-radius: var(--lmvz-semantic-border-radius-md, 6px); background-color: var(--lmvz-select-option-background); color: var(--lmvz-select-option-color); cursor: pointer; font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); transition: background-color 0.15s ease, color 0.15s ease; } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):hover { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):active { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } .lmvz-select-option.sc-lmvz-select:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } .lmvz-select-option[data-active='true'].sc-lmvz-select:not([aria-disabled='true']) { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .sc-lmvz-select-h:not([multiple]) .lmvz-select-option[aria-selected='true'].sc-lmvz-select { --lmvz-select-option-background: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); --lmvz-select-option-color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .lmvz-select-option[aria-disabled='true'].sc-lmvz-select { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .lmvz-select-option-checkbox.sc-lmvz-select { display: flex; align-items: center; justify-content: center; width: var(--lmvz-global-s18, 18px); height: var(--lmvz-global-s18, 18px); border: var(--lmvz-semantic-border-width-default, 1px) solid currentcolor; border-radius: var(--lmvz-global-s4, 4px); flex-shrink: 0; } .lmvz-select-option-checkbox-indicator.sc-lmvz-select { display: flex; align-items: center; justify-content: center; line-height: 0; } .lmvz-select-option-checkbox-indicator.sc-lmvz-select svg.sc-lmvz-select { width: 100%; height: 100%; }`;
164
+ const lmvzSelectCss = () => `@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-select-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --lmvz-internal-select-floating-label-top-offset: 0.375rem; --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --lmvz-select-border-color: var(--lmvz-semantic-color-border-alternate, #c7c7c7); --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1); --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px); --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-label-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --lmvz-select-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-select-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-xs-font-size, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); --lmvz-select-label-top-offset: calc(var(--lmvz-internal-select-floating-label-top-offset) * -1); --lmvz-select-label-minimized-padding-x: 4px; --lmvz-select-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); padding-top: var(--lmvz-internal-select-floating-label-top-offset); } .select-wrapper.sc-lmvz-select { position: relative; height: var(--lmvz-select-height); } label.sc-lmvz-select { position: absolute; top: 50%; left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-label-color); line-height: normal; white-space: nowrap; pointer-events: none; z-index: 2; transform: translateY(-50%); transform-origin: left top; transition: top 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out; } label.assistive-label.sc-lmvz-select { opacity: 0; padding: 0; } label.floating-label.sc-lmvz-select { top: var(--lmvz-select-label-top-offset); transform: translateY(0) scale(0.85); left: calc(var(--lmvz-select-padding-x) - 2px); background-color: var(--lmvz-select-bg); padding: 0 var(--lmvz-select-label-minimized-padding-x); opacity: 1; font-weight: 500; } label.sc-lmvz-select > span[aria-hidden='true'].sc-lmvz-select, .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child > span[aria-hidden='true'].sc-lmvz-select { color: var(--lmvz-select-error-color); margin-left: 2px; display: inline-block; line-height: 0; vertical-align: middle; } .select-trigger.sc-lmvz-select { display: flex; align-items: center; gap: var(--lmvz-select-gap); height: 100%; width: 100%; padding: 0 var(--lmvz-select-padding-x); border-radius: var(--lmvz-select-radius); background-color: var(--lmvz-select-bg); border: var(--lmvz-select-border-width) solid var(--lmvz-select-border-color); box-sizing: border-box; cursor: pointer; position: relative; z-index: 1; transition: border-color 0.15s ease; } .sc-lmvz-select-h:not([disabled] .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select, [error]).sc-lmvz-select-h .select-wrapper.sc-lmvz-select:hover .select-trigger.sc-lmvz-select { border-color: var(--lmvz-select-border-color-hover); } [error].sc-lmvz-select-h .select-trigger.sc-lmvz-select { border-color: var(--lmvz-select-error-color); } .sc-lmvz-select-h:has(:focus-visible) .select-trigger.sc-lmvz-select { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { flex: 1 0 0; font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); color: var(--lmvz-select-text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .select-wrapper.has-value.sc-lmvz-select .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child + span.sc-lmvz-select { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .select-trigger.sc-lmvz-select svg.sc-lmvz-select { width: var(--lmvz-select-chevron-size); height: var(--lmvz-select-chevron-size); flex-shrink: 0; } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child lmvz-chip.sc-lmvz-select { vertical-align: middle; } .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child lmvz-chip.sc-lmvz-select + lmvz-chip.sc-lmvz-select { margin-inline-start: var(--lmvz-select-gap); } .lmvz-select-native-options.sc-lmvz-select { display: none; } [disabled].sc-lmvz-select-h .select-wrapper.sc-lmvz-select { opacity: var(--lmvz-select-disabled-opacity); pointer-events: none; cursor: not-allowed; } [role='status'].sc-lmvz-select { padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-select-label-font-size); color: var(--lmvz-select-helper-color); line-height: normal; } [role='alert'].sc-lmvz-select { padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); padding-left: var(--lmvz-select-padding-x); font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); color: var(--lmvz-select-error-color); line-height: normal; } [size='small'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); } [size='small'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h { --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-select-chevron-size: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='large'].sc-lmvz-select-h .select-trigger.sc-lmvz-select > span.sc-lmvz-select:first-child { font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .lmvz-select-option.sc-lmvz-select { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-button-background-override: var(--lmvz-select-option-background); --lmvz-button-color-override: var(--lmvz-select-option-color); --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px); --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-content-justification: normal; --lmvz-button-font-override: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); & { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router)); --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); display: inline-flex; align-items: center; justify-content: var(--lmvz-button-content-justification, center); gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); box-sizing: border-box; padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent); border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px)); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } display: flex; } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):hover { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .lmvz-select-option.sc-lmvz-select:not([aria-disabled='true']):active { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } .lmvz-select-option.sc-lmvz-select:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); position: relative; z-index: 1; } .lmvz-select-option[data-active='true'].sc-lmvz-select:not([aria-disabled='true']) { --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } .sc-lmvz-select-h:not([multiple]) .lmvz-select-option[aria-selected='true'].sc-lmvz-select { --lmvz-select-option-background: var(--lmvz-semantic-color-status-active-alternate, #0f8acc); --lmvz-select-option-color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff); } .lmvz-select-option[aria-disabled='true'].sc-lmvz-select { cursor: not-allowed; pointer-events: none; opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .lmvz-select-option-checkbox.sc-lmvz-select { display: flex; align-items: center; justify-content: center; width: var(--lmvz-global-s18, 18px); height: var(--lmvz-global-s18, 18px); border: var(--lmvz-semantic-border-width-default, 1px) solid currentcolor; border-radius: var(--lmvz-global-s4, 4px); flex-shrink: 0; } .lmvz-select-option-checkbox-indicator.sc-lmvz-select { display: flex; align-items: center; justify-content: center; line-height: 0; } .lmvz-select-option-checkbox-indicator.sc-lmvz-select svg.sc-lmvz-select { width: 100%; height: 100%; }`;
165
165
 
166
166
  let selectIdCounter = 0;
167
167
  const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmarkSvg);
@@ -240,7 +240,6 @@ const LmvzSelect = class extends ReactiveControllerHost {
240
240
  required = false;
241
241
  name;
242
242
  size = 'default';
243
- highlighted = false;
244
243
  selectedLabel = '';
245
244
  selectedId;
246
245
  activeId;
@@ -514,7 +513,7 @@ const LmvzSelect = class extends ReactiveControllerHost {
514
513
  const hasValue = this.hasValue;
515
514
  const shouldShowLabel = hasValue;
516
515
  const showChips = this.multiple && hasValue;
517
- return (h(Host, { key: 'aece4095568891e34afc978c6a0aa9e638e7e207', "data-highlighted": String(this.highlighted) }, h("div", { key: '7c0e2a71a2b3b0bee46009c3498062b86f6eca72', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: 'f473d3a012cbd43c691de1782ead4a5d5e59cd32', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && h("span", { key: '50a2d3999af0310fcf1af62fdf72109fc25f76ee', "aria-hidden": "true" }, " *")), h("div", { key: 'd09b26c4e8d9e4ae8ab503c4abb2b22f7e0d905c', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": this.triggerAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, h("span", { key: '99fbb4a7a2ce16e63bf30b2c25a0c413533d60f5' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '3f6473f7f064e98bcdf936e2b9a5978f20e00772', "aria-hidden": "true" }, " *")), h("span", { key: 'cfb75d279c2c101d7724c596a4f2cd34ce13d7c0', "aria-hidden": "true" }, h("svg", { key: '51e30ae88d4355e0513cce076c97dd335b6a1d7e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0b1fb9c3d6809daa93abc404fbb82469d9f4a1cc', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("lmvz-popover", { key: '02b3524eed3eb4da9899f2acb85eba2cc3f09d78', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, "aria-multiselectable": this.multiple ? 'true' : undefined, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), h("div", { key: '84cbf09b5d47eeebba9ed55f21aa715257faf1f1', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, h("slot", { key: '928aa417eca972d4d85592f569c3fc95419dd9b3', onSlotchange: this.handleSlotChange }))), this.helperText && (h("div", { key: '5c0dac612458ba3564c3ac445f396c9e95832fe6', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (h("div", { key: '4c5c0a3826239fd2d5b52ad9118937dc5494c632', id: this.errorId, role: "alert" }, this.errorMessage))));
516
+ return (h(Host, { key: '77cb72cdce635eae0f9a29cb9121dd7d16955219' }, h("div", { key: 'cc6c04090457df17c6a9e74354fc21875d378642', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '8dc52469a7b3333578494b2f7bdb4e870044ac6c', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && h("span", { key: 'c198fb4944e46c5219a42e16ae24dc3c414b1b00', "aria-hidden": "true" }, " *")), h("div", { key: '034cc67405aac73a6557036dea90e4644c1578ed', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": this.triggerAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, h("span", { key: 'c61c136bfaab211572a988d3b16c2746f80b1ac6' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '24201baae63a4f6fdaef2441d304cd8f69430fb5', "aria-hidden": "true" }, " *")), h("span", { key: '547c61dfdc83f89cf7cd0582c785b9552190e533', "aria-hidden": "true" }, h("svg", { key: 'f6a0cb7c77682aec03cd146e84712c17df5ff910', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '35a8a50e27f18e54003974ae5b5ed578602664d3', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("lmvz-popover", { key: '0d5b94659c23763d59638046a397963d79a5e588', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, "aria-multiselectable": this.multiple ? 'true' : undefined, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), h("div", { key: 'c4a313fe4b6c53678a4f3dafced210f00e3c93d5', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, h("slot", { key: '1fb311e6938812e68ae5155184af2e2ba7c19861', onSlotchange: this.handleSlotChange }))), this.helperText && (h("div", { key: 'accade9aae4cb2e23fa1d8f62dd9b6efdf3ddfb5', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (h("div", { key: 'faa5eba225adda67b44b8a63ae98a678fddf49ad', id: this.errorId, role: "alert" }, this.errorMessage))));
518
517
  }
519
518
  static get formAssociated() { return true; }
520
519
  static get watchers() { return {