@lmvz-ds/components 0.30.0 → 0.32.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 (208) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/cjs/{ds.constants-D3srqM9m.js → ds.constants-CKeXfK-s.js} +10 -0
  3. package/cjs/{component-C7cavwmZ.js → element.util-Cq4y-_iX.js} +42 -31
  4. package/cjs/index.cjs.js +7 -1
  5. package/cjs/{list-keyboard-controller-CzZdPBeH.js → list-keyboard-controller-StN6Yn8W.js} +13 -8
  6. package/cjs/lmvz-action-list.cjs.entry.js +79 -0
  7. package/cjs/lmvz-button-group.cjs.entry.js +43 -47
  8. package/cjs/lmvz-button_2.cjs.entry.js +10 -8
  9. package/cjs/lmvz-card.cjs.entry.js +2 -2
  10. package/cjs/lmvz-checkbox.cjs.entry.js +1 -1
  11. package/cjs/lmvz-chip.cjs.entry.js +2 -2
  12. package/cjs/lmvz-components.cjs.js +1 -1
  13. package/cjs/lmvz-header_2.cjs.entry.js +3 -3
  14. package/cjs/lmvz-input.cjs.entry.js +5 -5
  15. package/cjs/lmvz-link.cjs.entry.js +2 -2
  16. package/cjs/lmvz-menuitem.cjs.entry.js +1 -1
  17. package/cjs/lmvz-message.cjs.entry.js +1 -1
  18. package/cjs/lmvz-modal.cjs.entry.js +5 -5
  19. package/cjs/lmvz-radio.cjs.entry.js +1 -1
  20. package/cjs/lmvz-select.cjs.entry.js +1 -1
  21. package/cjs/lmvz-snackbar.cjs.entry.js +1 -1
  22. package/cjs/lmvz-spinner.cjs.entry.js +1 -1
  23. package/cjs/lmvz-tab.cjs.entry.js +2 -2
  24. package/cjs/lmvz-tabs.cjs.entry.js +4 -4
  25. package/cjs/lmvz-toggle.cjs.entry.js +3 -3
  26. package/cjs/loader.cjs.js +1 -1
  27. package/cjs/stencil.util-DzvzXSwk.js +25 -0
  28. package/collection/collection-manifest.json +1 -0
  29. package/collection/components/lmvz-action-list/lmvz-action-list.css +93 -0
  30. package/collection/components/lmvz-action-list/lmvz-action-list.js +104 -0
  31. package/collection/components/lmvz-button/lmvz-button.css +65 -45
  32. package/collection/components/lmvz-button/lmvz-button.js +28 -7
  33. package/collection/components/lmvz-button-group/lmvz-button-group.css +33 -2
  34. package/collection/components/lmvz-button-group/lmvz-button-group.js +54 -38
  35. package/collection/components/lmvz-card/lmvz-card.css +58 -45
  36. package/collection/components/lmvz-card/lmvz-card.js +2 -2
  37. package/collection/components/lmvz-checkbox/lmvz-checkbox.js +2 -2
  38. package/collection/components/lmvz-chip/lmvz-chip.js +7 -7
  39. package/collection/components/lmvz-header/lmvz-header.js +2 -2
  40. package/collection/components/lmvz-icon/lmvz-icon.js +2 -2
  41. package/collection/components/lmvz-input/lmvz-input.js +5 -5
  42. package/collection/components/lmvz-link/lmvz-link.js +3 -3
  43. package/collection/components/lmvz-menuitem/lmvz-menuitem.js +2 -2
  44. package/collection/components/lmvz-message/lmvz-message.js +1 -1
  45. package/collection/components/lmvz-modal/lmvz-modal.css +7 -0
  46. package/collection/components/lmvz-modal/lmvz-modal.js +3 -3
  47. package/collection/components/lmvz-radio/lmvz-radio.js +2 -2
  48. package/collection/components/lmvz-select/lmvz-select.js +2 -2
  49. package/collection/components/lmvz-snackbar/lmvz-snackbar.js +1 -1
  50. package/collection/components/lmvz-spinner/lmvz-spinner.js +1 -1
  51. package/collection/components/lmvz-tab/lmvz-tab.css +7 -0
  52. package/collection/components/lmvz-tab/lmvz-tab.js +1 -1
  53. package/collection/components/lmvz-tabs/lmvz-tabs.css +7 -0
  54. package/collection/components/lmvz-tabs/lmvz-tabs.js +2 -2
  55. package/collection/components/lmvz-toggle/lmvz-toggle.js +3 -3
  56. package/collection/index.js +1 -1
  57. package/collection/integration/header-integration/header-integration.js +1 -1
  58. package/collection/utils/aria/aria.constants.js +53 -0
  59. package/collection/utils/aria/list-keyboard-controller.js +12 -7
  60. package/collection/utils/async/async.util.js +62 -0
  61. package/collection/utils/data/event.utilt.js +19 -0
  62. package/collection/utils/data/number.util.js +6 -0
  63. package/collection/utils/data/object.util.js +20 -0
  64. package/collection/utils/data/time.util.js +3 -0
  65. package/collection/utils/element/element.util.js +117 -0
  66. package/collection/utils/{assets.js → stencil/assets.js} +1 -1
  67. package/collection/utils/stencil/stencil.util.js +12 -0
  68. package/components/index.d.ts +2 -0
  69. package/components/index.d.ts.bak +2 -0
  70. package/components/index.js +1 -1
  71. package/components/lmvz-action-list.d.ts +11 -0
  72. package/components/lmvz-action-list.d.ts.bak +11 -0
  73. package/components/lmvz-action-list.js +1 -0
  74. package/components/lmvz-button-group.js +1 -1
  75. package/components/lmvz-button.js +1 -1
  76. package/components/lmvz-card.js +1 -1
  77. package/components/lmvz-checkbox.js +1 -1
  78. package/components/lmvz-chip.js +1 -1
  79. package/components/lmvz-header.js +1 -1
  80. package/components/lmvz-icon.js +1 -1
  81. package/components/lmvz-input.js +1 -1
  82. package/components/lmvz-link.js +1 -1
  83. package/components/lmvz-menuitem.js +1 -1
  84. package/components/lmvz-message.js +1 -1
  85. package/components/lmvz-modal.js +1 -1
  86. package/components/lmvz-radio.js +1 -1
  87. package/components/lmvz-select.js +1 -1
  88. package/components/lmvz-snackbar.js +1 -1
  89. package/components/lmvz-spinner.js +1 -1
  90. package/components/lmvz-tab.js +1 -1
  91. package/components/lmvz-tabs.js +1 -1
  92. package/components/lmvz-toggle.js +1 -1
  93. package/components/p-B0H9qIwE.js +1 -0
  94. package/components/p-B4m1n4et.js +1 -0
  95. package/components/p-CJRqhXjK.js +1 -0
  96. package/components/p-CxfT9IA1.js +1 -0
  97. package/components/{p-CXakymyP.js → p-DJ90327O.js} +1 -1
  98. package/components/p-DeO5Vbxh.js +1 -0
  99. package/components/p-DuEtnKRj.js +1 -0
  100. package/esm/{ds.constants-BLS5MjIu.js → ds.constants-DuEtnKRj.js} +5 -1
  101. package/esm/{component-DOTK1OW3.js → element.util-CxfT9IA1.js} +37 -31
  102. package/esm/index.js +1 -1
  103. package/esm/{list-keyboard-controller-Coi8XfUH.js → list-keyboard-controller-BKa9Kd2t.js} +12 -7
  104. package/esm/lmvz-action-list.entry.js +77 -0
  105. package/esm/lmvz-button-group.entry.js +35 -39
  106. package/esm/lmvz-button_2.entry.js +9 -7
  107. package/esm/lmvz-card.entry.js +2 -2
  108. package/esm/lmvz-checkbox.entry.js +1 -1
  109. package/esm/lmvz-chip.entry.js +2 -2
  110. package/esm/lmvz-components.js +1 -1
  111. package/esm/lmvz-header_2.entry.js +3 -3
  112. package/esm/lmvz-input.entry.js +4 -4
  113. package/esm/lmvz-link.entry.js +2 -2
  114. package/esm/lmvz-menuitem.entry.js +1 -1
  115. package/esm/lmvz-message.entry.js +1 -1
  116. package/esm/lmvz-modal.entry.js +3 -3
  117. package/esm/lmvz-radio.entry.js +1 -1
  118. package/esm/lmvz-select.entry.js +1 -1
  119. package/esm/lmvz-snackbar.entry.js +1 -1
  120. package/esm/lmvz-spinner.entry.js +1 -1
  121. package/esm/lmvz-tab.entry.js +2 -2
  122. package/esm/lmvz-tabs.entry.js +4 -4
  123. package/esm/lmvz-toggle.entry.js +2 -2
  124. package/esm/loader.js +1 -1
  125. package/esm/stencil.util-CJRqhXjK.js +23 -0
  126. package/hydrate/index.js +501 -388
  127. package/hydrate/index.mjs +501 -388
  128. package/lmvz-components/index.esm.js +1 -1
  129. package/lmvz-components/lmvz-components.esm.js +1 -1
  130. package/lmvz-components/{p-f3c44dd4.entry.js → p-1ce90ea7.entry.js} +1 -1
  131. package/lmvz-components/{p-b08db5ad.entry.js → p-24125bcf.entry.js} +1 -1
  132. package/lmvz-components/p-25a78ead.entry.js +1 -0
  133. package/lmvz-components/p-4072b2fb.entry.js +1 -0
  134. package/lmvz-components/p-48109e1d.entry.js +1 -0
  135. package/lmvz-components/{p-3b3e532f.entry.js → p-582f44ff.entry.js} +1 -1
  136. package/lmvz-components/p-592d509b.entry.js +1 -0
  137. package/lmvz-components/{p-d7e99f03.entry.js → p-6f61c24d.entry.js} +1 -1
  138. package/lmvz-components/{p-58498d43.entry.js → p-703b10b5.entry.js} +1 -1
  139. package/lmvz-components/p-74c7521c.entry.js +1 -0
  140. package/lmvz-components/{p-b5254532.entry.js → p-80a26307.entry.js} +1 -1
  141. package/lmvz-components/{p-c60ab9c9.entry.js → p-8e1f66dd.entry.js} +1 -1
  142. package/lmvz-components/p-947e1fe6.entry.js +1 -0
  143. package/lmvz-components/p-B4m1n4et.js +1 -0
  144. package/lmvz-components/p-CJRqhXjK.js +1 -0
  145. package/lmvz-components/p-CxfT9IA1.js +1 -0
  146. package/lmvz-components/p-DuEtnKRj.js +1 -0
  147. package/lmvz-components/{p-230962c8.entry.js → p-b79af711.entry.js} +1 -1
  148. package/lmvz-components/p-c00f0d96.entry.js +1 -0
  149. package/lmvz-components/{p-5c951888.entry.js → p-c0d05a97.entry.js} +1 -1
  150. package/lmvz-components/{p-c0b1d0af.entry.js → p-c3e8092e.entry.js} +1 -1
  151. package/lmvz-components/{p-2ca85b7c.entry.js → p-ed3c2b13.entry.js} +1 -1
  152. package/lmvz-components/{p-35da6bfb.entry.js → p-fa2cd315.entry.js} +1 -1
  153. package/manifest.json +130 -18
  154. package/package.json +5 -1
  155. package/types/api/ds.constants.d.ts +0 -40
  156. package/types/api/ds.types.d.ts +68 -1
  157. package/types/components/lmvz-action-list/lmvz-action-list.d.ts +15 -0
  158. package/types/components/lmvz-button/lmvz-button.d.ts +6 -3
  159. package/types/components/lmvz-button-group/lmvz-button-group.d.ts +2 -0
  160. package/types/components/lmvz-checkbox/lmvz-checkbox.d.ts +1 -1
  161. package/types/components/lmvz-chip/lmvz-chip.d.ts +2 -2
  162. package/types/components/lmvz-header/lmvz-header.d.ts +1 -1
  163. package/types/components/lmvz-icon/lmvz-icon.d.ts +1 -1
  164. package/types/components/lmvz-input/lmvz-input.d.ts +1 -1
  165. package/types/components/lmvz-link/lmvz-link.d.ts +1 -1
  166. package/types/components/lmvz-menuitem/lmvz-menuitem.d.ts +1 -1
  167. package/types/components/lmvz-modal/lmvz-modal.d.ts +1 -1
  168. package/types/components/lmvz-radio/lmvz-radio.d.ts +1 -1
  169. package/types/components/lmvz-select/lmvz-select.d.ts +1 -1
  170. package/types/components/lmvz-tabs/lmvz-tabs.d.ts +1 -1
  171. package/types/components/lmvz-toggle/lmvz-toggle.d.ts +1 -1
  172. package/types/components.d.ts +83 -2
  173. package/types/index.d.ts +1 -1
  174. package/types/utils/aria/aria-validation-controller.d.ts +3 -3
  175. package/types/utils/aria/aria.constants.d.ts +1 -0
  176. package/types/utils/aria/element-activation-controller.d.ts +1 -1
  177. package/types/utils/aria/list-keyboard-controller.d.ts +4 -1
  178. package/types/utils/async/async.util.d.ts +8 -0
  179. package/types/utils/data/event.utilt.d.ts +4 -0
  180. package/types/utils/data/number.util.d.ts +2 -0
  181. package/types/utils/data/object.util.d.ts +5 -0
  182. package/types/utils/data/time.util.d.ts +1 -0
  183. package/types/utils/element/element.util.d.ts +21 -0
  184. package/types/utils/radio/radio-group-controller.d.ts +1 -1
  185. package/types/utils/{reactive-controller-host.d.ts → stencil/reactive-controller-host.d.ts} +1 -1
  186. package/types/utils/stencil/stencil.util.d.ts +6 -0
  187. package/collection/utils/component.js +0 -270
  188. package/collection/utils/http.js +0 -21
  189. package/collection/utils/http.unit.js +0 -47
  190. package/components/p-BLS5MjIu.js +0 -1
  191. package/components/p-C0f2nNPZ.js +0 -1
  192. package/components/p-CtaMrBNE.js +0 -1
  193. package/components/p-DGlgVBPj.js +0 -1
  194. package/components/p-DOTK1OW3.js +0 -1
  195. package/lmvz-components/p-0d435e7b.entry.js +0 -1
  196. package/lmvz-components/p-44fea470.entry.js +0 -1
  197. package/lmvz-components/p-4dc44520.entry.js +0 -1
  198. package/lmvz-components/p-BLS5MjIu.js +0 -1
  199. package/lmvz-components/p-CtaMrBNE.js +0 -1
  200. package/lmvz-components/p-DOTK1OW3.js +0 -1
  201. package/lmvz-components/p-a4077c9f.entry.js +0 -1
  202. package/lmvz-components/p-dce6e41d.entry.js +0 -1
  203. package/lmvz-components/p-e3ce44a3.entry.js +0 -1
  204. package/types/utils/component.d.ts +0 -33
  205. package/types/utils/http.d.ts +0 -26
  206. package/types/utils/http.unit.d.ts +0 -1
  207. /package/collection/utils/{reactive-controller-host.js → stencil/reactive-controller-host.js} +0 -0
  208. /package/types/utils/{assets.d.ts → stencil/assets.d.ts} +0 -0
package/hydrate/index.js CHANGED
@@ -5431,97 +5431,6 @@ class LmvzAction {
5431
5431
  }; }
5432
5432
  }
5433
5433
 
5434
- function getDefaultExportFromCjs (x) {
5435
- return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
5436
- }
5437
-
5438
- var classnames = {exports: {}};
5439
-
5440
- /*!
5441
- Copyright (c) 2018 Jed Watson.
5442
- Licensed under the MIT License (MIT), see
5443
- http://jedwatson.github.io/classnames
5444
- */
5445
-
5446
- var hasRequiredClassnames;
5447
-
5448
- function requireClassnames () {
5449
- if (hasRequiredClassnames) return classnames.exports;
5450
- hasRequiredClassnames = 1;
5451
- (function (module) {
5452
- /* global define */
5453
-
5454
- (function () {
5455
-
5456
- var hasOwn = {}.hasOwnProperty;
5457
-
5458
- function classNames () {
5459
- var classes = '';
5460
-
5461
- for (var i = 0; i < arguments.length; i++) {
5462
- var arg = arguments[i];
5463
- if (arg) {
5464
- classes = appendClass(classes, parseValue(arg));
5465
- }
5466
- }
5467
-
5468
- return classes;
5469
- }
5470
-
5471
- function parseValue (arg) {
5472
- if (typeof arg === 'string' || typeof arg === 'number') {
5473
- return arg;
5474
- }
5475
-
5476
- if (typeof arg !== 'object') {
5477
- return '';
5478
- }
5479
-
5480
- if (Array.isArray(arg)) {
5481
- return classNames.apply(null, arg);
5482
- }
5483
-
5484
- if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
5485
- return arg.toString();
5486
- }
5487
-
5488
- var classes = '';
5489
-
5490
- for (var key in arg) {
5491
- if (hasOwn.call(arg, key) && arg[key]) {
5492
- classes = appendClass(classes, key);
5493
- }
5494
- }
5495
-
5496
- return classes;
5497
- }
5498
-
5499
- function appendClass (value, newClass) {
5500
- if (!newClass) {
5501
- return value;
5502
- }
5503
-
5504
- if (value) {
5505
- return value + ' ' + newClass;
5506
- }
5507
-
5508
- return value + newClass;
5509
- }
5510
-
5511
- if (module.exports) {
5512
- classNames.default = classNames;
5513
- module.exports = classNames;
5514
- } else {
5515
- window.classNames = classNames;
5516
- }
5517
- }());
5518
- } (classnames));
5519
- return classnames.exports;
5520
- }
5521
-
5522
- var classnamesExports = requireClassnames();
5523
- var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
5524
-
5525
5434
  /**
5526
5435
  * Verify whether a value is a Promise by duck-testing for a 'then' function
5527
5436
  */
@@ -5706,55 +5615,6 @@ class AriaValidationController {
5706
5615
  }
5707
5616
  }
5708
5617
 
5709
- class ElementActivationController {
5710
- host;
5711
- config;
5712
- constructor(host, config) {
5713
- this.host = host;
5714
- this.config = config;
5715
- }
5716
- hostDidLoad() {
5717
- if (!this.host.el.hasAttribute('tabindex')) {
5718
- console.warn('Interactive element does not have a tabindex attribute!', this.host.el);
5719
- }
5720
- this.host.el.addEventListener('keydown', this.handleKeyDown.bind(this));
5721
- this.host.el.addEventListener('click', this.handleActivation.bind(this));
5722
- }
5723
- handleKeyDown = (event) => {
5724
- if ((this.config?.keys ?? ['Enter', ' ']).includes(event.key)) {
5725
- event.preventDefault();
5726
- this.handleActivation(event);
5727
- }
5728
- };
5729
- handleActivation = (event) => {
5730
- this.host.lmvzActivation.emit();
5731
- if (this.config?.localHandler) {
5732
- this.config.localHandler(event);
5733
- }
5734
- };
5735
- }
5736
-
5737
- const componentOnReady = (el, callback) => {
5738
- if (el.componentOnReady) {
5739
- el.componentOnReady().then((resolvedEl) => callback(resolvedEl));
5740
- }
5741
- else {
5742
- raf(() => callback(el));
5743
- }
5744
- };
5745
- const inheritAttributes = (el, attributes = []) => {
5746
- const attributeObject = {};
5747
- attributes.forEach((attr) => {
5748
- if (el.hasAttribute(attr)) {
5749
- const value = el.getAttribute(attr);
5750
- if (value !== null) {
5751
- attributeObject[attr] = el.getAttribute(attr);
5752
- }
5753
- el.removeAttribute(attr);
5754
- }
5755
- });
5756
- return attributeObject;
5757
- };
5758
5618
  const ariaAttributes = [
5759
5619
  'role',
5760
5620
  'aria-activedescendant',
@@ -5808,6 +5668,42 @@ const ariaAttributes = [
5808
5668
  'aria-valuenow',
5809
5669
  'aria-valuetext',
5810
5670
  ];
5671
+
5672
+ function isActionButton(element) {
5673
+ return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
5674
+ }
5675
+ function isLmvzButton(element) {
5676
+ return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
5677
+ }
5678
+ function isDisabledButton(element) {
5679
+ return element.hasAttribute('disabled') || element.disabled === true;
5680
+ }
5681
+ function isVisible(element) {
5682
+ return !element.hasAttribute('hidden');
5683
+ }
5684
+ function getActionVariant(element) {
5685
+ const variant = element.getAttribute('variant') ?? element.variant;
5686
+ return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
5687
+ }
5688
+ function isPrimaryAction(element) {
5689
+ return getActionVariant(element) === 'primary';
5690
+ }
5691
+ function isSecondaryAction(element) {
5692
+ return getActionVariant(element) === 'secondary';
5693
+ }
5694
+ const inheritAttributes = (el, attributes = []) => {
5695
+ const attributeObject = {};
5696
+ attributes.forEach((attr) => {
5697
+ if (el.hasAttribute(attr)) {
5698
+ const value = el.getAttribute(attr);
5699
+ if (value !== null) {
5700
+ attributeObject[attr] = el.getAttribute(attr);
5701
+ }
5702
+ el.removeAttribute(attr);
5703
+ }
5704
+ });
5705
+ return attributeObject;
5706
+ };
5811
5707
  const inheritAriaAttributes = (el, ignoreList) => {
5812
5708
  let attributesToInherit = ariaAttributes;
5813
5709
  if (ignoreList && ignoreList.length > 0) {
@@ -5815,15 +5711,6 @@ const inheritAriaAttributes = (el, ignoreList) => {
5815
5711
  }
5816
5712
  return inheritAttributes(el, attributesToInherit);
5817
5713
  };
5818
- const raf = (h) => {
5819
- if (typeof __zone_symbol__requestAnimationFrame === 'function') {
5820
- return __zone_symbol__requestAnimationFrame(h);
5821
- }
5822
- if (typeof requestAnimationFrame === 'function') {
5823
- return requestAnimationFrame(h);
5824
- }
5825
- return setTimeout(h);
5826
- };
5827
5714
  function getDeepActiveElement(root = document) {
5828
5715
  let activeElement = root.activeElement;
5829
5716
  if (!activeElement) {
@@ -5870,6 +5757,179 @@ function findFormByRef(form, el) {
5870
5757
  return el.closest('form');
5871
5758
  }
5872
5759
 
5760
+ const defaultConfig = {
5761
+ orientation: 'both',
5762
+ enableHomeAndEnd: false,
5763
+ manageTabIndex: false,
5764
+ };
5765
+ class DirectionalFocusController {
5766
+ host;
5767
+ elements = [];
5768
+ currentElement;
5769
+ config;
5770
+ constructor(host, config = {}) {
5771
+ this.host = host;
5772
+ this.config = {
5773
+ ...defaultConfig,
5774
+ ...config,
5775
+ };
5776
+ }
5777
+ hostConnected() {
5778
+ this.host.el.addEventListener('keydown', this.handleKeydown);
5779
+ this.syncManagedFocusTarget();
5780
+ }
5781
+ hostDisconnected() {
5782
+ this.host.el.removeEventListener('keydown', this.handleKeydown);
5783
+ }
5784
+ updateElements(elements) {
5785
+ const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
5786
+ this.elements = elements.filter((element) => 'focus' in element && element.nodeType === 1);
5787
+ this.syncManagedFocusTarget(previousElement);
5788
+ }
5789
+ setCurrentElement(element) {
5790
+ const previousElement = this.currentElement;
5791
+ this.currentElement = element !== null && element !== undefined && 'focus' in element && element.nodeType === 1 ? element : undefined;
5792
+ this.syncManagedFocusTarget(previousElement);
5793
+ }
5794
+ handleKeydown = (event) => {
5795
+ const intent = this.getFocusIntent(event.key);
5796
+ if (!intent)
5797
+ return;
5798
+ const activeElement = this.getManagedActiveElement();
5799
+ const nextElement = this.getTargetElement(activeElement, intent);
5800
+ if (!nextElement)
5801
+ return;
5802
+ event.preventDefault();
5803
+ this.applyFocusTarget(nextElement, true);
5804
+ };
5805
+ getFocusIntent(key) {
5806
+ if (this.config.enableHomeAndEnd && key === 'Home')
5807
+ return 'first';
5808
+ if (this.config.enableHomeAndEnd && key === 'End')
5809
+ return 'last';
5810
+ if (this.config.orientation === 'horizontal') {
5811
+ if (key === 'ArrowRight')
5812
+ return 'next';
5813
+ if (key === 'ArrowLeft')
5814
+ return 'previous';
5815
+ return undefined;
5816
+ }
5817
+ if (this.config.orientation === 'vertical') {
5818
+ if (key === 'ArrowDown')
5819
+ return 'next';
5820
+ if (key === 'ArrowUp')
5821
+ return 'previous';
5822
+ return undefined;
5823
+ }
5824
+ if (key === 'ArrowDown' || key === 'ArrowRight')
5825
+ return 'next';
5826
+ if (key === 'ArrowUp' || key === 'ArrowLeft')
5827
+ return 'previous';
5828
+ return undefined;
5829
+ }
5830
+ getManagedActiveElement() {
5831
+ const activeElement = getDeepActiveElement(this.host.el.ownerDocument ?? document);
5832
+ if (activeElement instanceof HTMLElement) {
5833
+ const match = this.elements.find((el) => resolveElement(el) === activeElement);
5834
+ if (match && this.canMoveFocusTo(match))
5835
+ return match;
5836
+ }
5837
+ if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
5838
+ return this.currentElement;
5839
+ }
5840
+ return undefined;
5841
+ }
5842
+ getTargetElement(current, intent) {
5843
+ if (!this.elements.length)
5844
+ return undefined;
5845
+ if (intent === 'first')
5846
+ return this.findFocusableFromIndex(-1, 'next');
5847
+ if (intent === 'last')
5848
+ return this.findFocusableFromIndex(this.elements.length, 'previous');
5849
+ const currentIndex = current ? this.elements.indexOf(current) : -1;
5850
+ if (currentIndex === -1) {
5851
+ return intent === 'next' ? this.findFocusableFromIndex(-1, 'next') : this.findFocusableFromIndex(this.elements.length, 'previous');
5852
+ }
5853
+ return this.findFocusableFromIndex(currentIndex, intent);
5854
+ }
5855
+ findFocusableFromIndex(startIndex, intent) {
5856
+ if (!this.elements.length)
5857
+ return undefined;
5858
+ const step = intent === 'next' ? 1 : -1;
5859
+ for (let offset = 1; offset <= this.elements.length; offset++) {
5860
+ const index = (startIndex + step * offset + this.elements.length) % this.elements.length;
5861
+ const candidate = this.elements[index];
5862
+ if (this.canMoveFocusTo(candidate))
5863
+ return candidate;
5864
+ }
5865
+ return undefined;
5866
+ }
5867
+ syncManagedFocusTarget(previousElement) {
5868
+ const nextElement = this.selectManagedElement(previousElement);
5869
+ const didChange = nextElement !== this.currentElement;
5870
+ this.currentElement = nextElement;
5871
+ if (this.config.manageTabIndex) {
5872
+ this.updateTabIndexes(nextElement);
5873
+ }
5874
+ if (didChange && nextElement) {
5875
+ this.config.onFocusTargetChange?.(nextElement);
5876
+ }
5877
+ }
5878
+ selectManagedElement(previousElement) {
5879
+ const activeElement = this.getManagedActiveElement();
5880
+ if (activeElement)
5881
+ return activeElement;
5882
+ if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
5883
+ return this.currentElement;
5884
+ }
5885
+ if (previousElement && this.elements.includes(previousElement)) {
5886
+ return this.findFocusableFromIndex(this.elements.indexOf(previousElement), 'next') ?? this.findFocusableFromIndex(-1, 'next');
5887
+ }
5888
+ const currentRovingTarget = this.elements.find((element) => element.tabIndex === 0 && this.canMoveFocusTo(element));
5889
+ if (currentRovingTarget)
5890
+ return currentRovingTarget;
5891
+ return this.findFocusableFromIndex(-1, 'next');
5892
+ }
5893
+ updateTabIndexes(activeElement) {
5894
+ this.elements.forEach((element) => {
5895
+ element.tabIndex = activeElement && element === activeElement ? 0 : -1;
5896
+ });
5897
+ }
5898
+ applyFocusTarget(element, shouldFocus) {
5899
+ const didChange = element !== this.currentElement;
5900
+ this.currentElement = element;
5901
+ if (this.config.manageTabIndex) {
5902
+ this.updateTabIndexes(element);
5903
+ }
5904
+ if (shouldFocus) {
5905
+ element.focus();
5906
+ }
5907
+ if (didChange) {
5908
+ this.config.onFocusTargetChange?.(element);
5909
+ }
5910
+ }
5911
+ canMoveFocusTo(element) {
5912
+ if (!element)
5913
+ return false;
5914
+ if (element.hasAttribute('disabled'))
5915
+ return false;
5916
+ if ('disabled' in element && Boolean(element.disabled))
5917
+ return false;
5918
+ if (element.getAttribute('aria-disabled') === 'true')
5919
+ return false;
5920
+ if (this.config.isFocusableElement)
5921
+ return this.config.isFocusableElement(element);
5922
+ const isTabOrderable = this.config.manageTabIndex || element.tabIndex >= 0;
5923
+ return isTabOrderable && element.getAttribute('aria-hidden') !== 'true' && (element.checkVisibility?.() ?? true) && element.offsetParent !== null;
5924
+ }
5925
+ }
5926
+ function isDirectionalFocusReceiver(el) {
5927
+ return typeof el.resolveFocusableElement === 'function';
5928
+ }
5929
+ function resolveElement(el) {
5930
+ return isDirectionalFocusReceiver(el) ? (el.resolveFocusableElement() ?? el) : el;
5931
+ }
5932
+
5873
5933
  class ReactiveControllerHost {
5874
5934
  controllers = new Set();
5875
5935
  addController(controller) {
@@ -5905,12 +5965,210 @@ class ReactiveControllerHost {
5905
5965
  componentWillUpdate() {
5906
5966
  this.activeControllers.forEach((controller) => controller.hostWillUpdate?.());
5907
5967
  }
5908
- componentDidUpdate() {
5909
- this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
5968
+ componentDidUpdate() {
5969
+ this.activeControllers.forEach((controller) => controller.hostDidUpdate?.());
5970
+ }
5971
+ }
5972
+
5973
+ 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-4-8, 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); } } @layer lmvz-ds.components { .lmvz-wrapper-card-sm, .lmvz-wrapper-card-md, .lmvz-wrapper-card-lg { background: var(--lmvz-semantic-color-surface-primary, #ffffff); box-shadow: var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11)); } .lmvz-wrapper-card-sm { padding: var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); border-radius: var(--lmvz-component-wrapper-sm-border-radius, 14px); } .lmvz-wrapper-card-md { padding: var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border-radius: var(--lmvz-component-wrapper-md-border-radius, 18px); } .lmvz-wrapper-card-lg { padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); } } .sc-lmvz-action-list-h { display: flex; flex-direction: column; gap: 0; lmvz-button, button { --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary, #000000); --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)); width: 100%; display: block; &:hover { --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } &:active { --lmvz-button-background-override: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color-override: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } } .lmvz-action-list-item--danger { --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31); &:hover { --lmvz-button-background-override: var(--lmvz-semantic-color-status-danger, #fdf1f2); --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31); } &:active { --lmvz-button-background-override: var(--lmvz-semantic-color-status-on-danger-subtle, #f7bfc2); --lmvz-button-color-override: var(--lmvz-semantic-color-status-on-danger, #e52a31); } } }`;
5974
+
5975
+ class LmvzActionList extends ReactiveControllerHost {
5976
+ get el() { return getElement(this); }
5977
+ slotEl;
5978
+ get validationEl() {
5979
+ return this.el;
5980
+ }
5981
+ get validationSlot() {
5982
+ return this.slotEl;
5983
+ }
5984
+ focusController = new DirectionalFocusController(this, {
5985
+ orientation: 'vertical',
5986
+ manageTabIndex: true,
5987
+ enableHomeAndEnd: true,
5988
+ });
5989
+ label;
5990
+ constructor(hostRef) {
5991
+ super();
5992
+ registerInstance(this, hostRef);
5993
+ this.addController(this.focusController);
5994
+ this.addController(new AriaValidationController(this, {
5995
+ validationTiming: 'slot',
5996
+ }));
5997
+ }
5998
+ componentDidLoad() {
5999
+ this.handleSlotChange();
6000
+ super.componentDidLoad();
6001
+ }
6002
+ handleSlotChange = () => {
6003
+ const slot = this.slotEl;
6004
+ if (!slot)
6005
+ return;
6006
+ const assigned = slot.assignedElements();
6007
+ const interactive = [];
6008
+ for (const el of assigned) {
6009
+ collectInteractiveButtonsRecursively(el, interactive);
6010
+ }
6011
+ this.focusController.updateElements(interactive);
6012
+ };
6013
+ render() {
6014
+ const ariaLabel = this.label || undefined;
6015
+ return (hAsync(Host, { key: '79e2d77c9aca02fb3ef2e58d241664598253334b', role: "menu", "aria-label": ariaLabel, class: "lmvz-wrapper-card-sm" }, hAsync("slot", { key: '941b875a5be536c3d0e2ff9287da5af1a416d356', onSlotchange: this.handleSlotChange, ref: (el) => (this.slotEl = el) })));
6016
+ }
6017
+ static get style() { return lmvzActionListCss(); }
6018
+ static get cmpMeta() { return {
6019
+ "$flags$": 774,
6020
+ "$tagName$": "lmvz-action-list",
6021
+ "$members$": {
6022
+ "label": [1]
6023
+ },
6024
+ "$listeners$": undefined,
6025
+ "$lazyBundleId$": "-",
6026
+ "$attrsToReflect$": []
6027
+ }; }
6028
+ }
6029
+ function collectInteractiveButtonsRecursively(el, collection) {
6030
+ const tag = el.tagName.toLowerCase();
6031
+ if (tag === 'lmvz-button') {
6032
+ el.buttonRole = 'menuitem';
6033
+ collection.push(el);
6034
+ return;
6035
+ }
6036
+ if (tag === 'button') {
6037
+ el.setAttribute('role', 'menuitem');
6038
+ collection.push(el);
6039
+ return;
6040
+ }
6041
+ if (tag === 'hr') {
6042
+ return;
6043
+ }
6044
+ if (el.getAttribute('role') === 'group') {
6045
+ const children = el.querySelectorAll('lmvz-button, button');
6046
+ children.forEach((child) => collectInteractiveButtonsRecursively(child, collection));
6047
+ return;
6048
+ }
6049
+ console.warn('Unexpected element encountered in ActionList:', tag);
6050
+ }
6051
+
6052
+ function getDefaultExportFromCjs (x) {
6053
+ return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
6054
+ }
6055
+
6056
+ var classnames = {exports: {}};
6057
+
6058
+ /*!
6059
+ Copyright (c) 2018 Jed Watson.
6060
+ Licensed under the MIT License (MIT), see
6061
+ http://jedwatson.github.io/classnames
6062
+ */
6063
+
6064
+ var hasRequiredClassnames;
6065
+
6066
+ function requireClassnames () {
6067
+ if (hasRequiredClassnames) return classnames.exports;
6068
+ hasRequiredClassnames = 1;
6069
+ (function (module) {
6070
+ /* global define */
6071
+
6072
+ (function () {
6073
+
6074
+ var hasOwn = {}.hasOwnProperty;
6075
+
6076
+ function classNames () {
6077
+ var classes = '';
6078
+
6079
+ for (var i = 0; i < arguments.length; i++) {
6080
+ var arg = arguments[i];
6081
+ if (arg) {
6082
+ classes = appendClass(classes, parseValue(arg));
6083
+ }
6084
+ }
6085
+
6086
+ return classes;
6087
+ }
6088
+
6089
+ function parseValue (arg) {
6090
+ if (typeof arg === 'string' || typeof arg === 'number') {
6091
+ return arg;
6092
+ }
6093
+
6094
+ if (typeof arg !== 'object') {
6095
+ return '';
6096
+ }
6097
+
6098
+ if (Array.isArray(arg)) {
6099
+ return classNames.apply(null, arg);
6100
+ }
6101
+
6102
+ if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
6103
+ return arg.toString();
6104
+ }
6105
+
6106
+ var classes = '';
6107
+
6108
+ for (var key in arg) {
6109
+ if (hasOwn.call(arg, key) && arg[key]) {
6110
+ classes = appendClass(classes, key);
6111
+ }
6112
+ }
6113
+
6114
+ return classes;
6115
+ }
6116
+
6117
+ function appendClass (value, newClass) {
6118
+ if (!newClass) {
6119
+ return value;
6120
+ }
6121
+
6122
+ if (value) {
6123
+ return value + ' ' + newClass;
6124
+ }
6125
+
6126
+ return value + newClass;
6127
+ }
6128
+
6129
+ if (module.exports) {
6130
+ classNames.default = classNames;
6131
+ module.exports = classNames;
6132
+ } else {
6133
+ window.classNames = classNames;
6134
+ }
6135
+ }());
6136
+ } (classnames));
6137
+ return classnames.exports;
6138
+ }
6139
+
6140
+ var classnamesExports = requireClassnames();
6141
+ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
6142
+
6143
+ class ElementActivationController {
6144
+ host;
6145
+ config;
6146
+ constructor(host, config) {
6147
+ this.host = host;
6148
+ this.config = config;
6149
+ }
6150
+ hostDidLoad() {
6151
+ if (!this.host.el.hasAttribute('tabindex')) {
6152
+ console.warn('Interactive element does not have a tabindex attribute!', this.host.el);
6153
+ }
6154
+ this.host.el.addEventListener('keydown', this.handleKeyDown.bind(this));
6155
+ this.host.el.addEventListener('click', this.handleActivation.bind(this));
5910
6156
  }
6157
+ handleKeyDown = (event) => {
6158
+ if ((this.config?.keys ?? ['Enter', ' ']).includes(event.key)) {
6159
+ event.preventDefault();
6160
+ this.handleActivation(event);
6161
+ }
6162
+ };
6163
+ handleActivation = (event) => {
6164
+ this.host.lmvzActivation.emit();
6165
+ if (this.config?.localHandler) {
6166
+ this.config.localHandler(event);
6167
+ }
6168
+ };
5911
6169
  }
5912
6170
 
5913
- 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; } } :host { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; 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)); } 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-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router); } display: inline-block; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
6171
+ 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-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { button { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px)); --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)))); --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem))); --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem))); --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-body-md-strong, 500 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: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; 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.secondary { --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-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000)); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000)); } 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-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 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-body-lg-strong, 500 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5 Router)); } display: inline-block; button { width: 100%; } } button { width: 100%; } ::slotted(*) { --lmvz-component-color: var(--lmvz-button-color); } `;
5914
6172
 
5915
6173
  class LmvzButton extends ReactiveControllerHost {
5916
6174
  get el() { return getElement(this); }
@@ -5919,8 +6177,9 @@ class LmvzButton extends ReactiveControllerHost {
5919
6177
  formEl = null;
5920
6178
  formButtonEl = null;
5921
6179
  lmvzActivation;
5922
- get ti() {
5923
- return 0;
6180
+ ti = 0;
6181
+ resolveFocusableElement() {
6182
+ return this.validationEl;
5924
6183
  }
5925
6184
  scale = 'default';
5926
6185
  variant;
@@ -5930,6 +6189,7 @@ class LmvzButton extends ReactiveControllerHost {
5930
6189
  formMethod;
5931
6190
  name;
5932
6191
  value;
6192
+ buttonRole;
5933
6193
  constructor(hostRef) {
5934
6194
  super();
5935
6195
  registerInstance(this, hostRef);
@@ -5941,7 +6201,7 @@ class LmvzButton extends ReactiveControllerHost {
5941
6201
  }));
5942
6202
  }
5943
6203
  connectedCallback() {
5944
- this.inheritedAttributes = inheritAriaAttributes(this.el);
6204
+ this.inheritedAttributes = inheritAriaAttributes(this.el, ['role']);
5945
6205
  super.connectedCallback();
5946
6206
  }
5947
6207
  disconnectedCallback() {
@@ -5998,7 +6258,7 @@ class LmvzButton extends ReactiveControllerHost {
5998
6258
  };
5999
6259
  render() {
6000
6260
  this.renderHiddenButton();
6001
- return (hAsync(Host, { key: '8196de85afc3878c6f38e582d7c031f5d19bcd36', "aria-disabled": this.disabled ? 'true' : null }, hAsync("button", { key: '8d73f979fa227de22a03403a2a3938684911060a', ref: (e) => (this.validationEl = e), part: "button", disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, hAsync("slot", { key: '18e91a2f94ba0d7e5cf13150191003e2f0b2a03a' }))));
6261
+ return (hAsync(Host, { key: 'f3e619dca398c3a8a78e9d2f8c3df4178b2531b2', role: "presentation" }, hAsync("button", { key: 'eb1aac6756a70968d3a72cb40c1d52d96340423e', ref: (e) => (this.validationEl = e), part: "button", role: this.buttonRole, disabled: this.disabled, type: this.type, class: classNames(this.variant ?? 'secondary', { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, hAsync("slot", { key: '786ff1c10ae05eda646c77ac8779813be6e51949' }))));
6002
6262
  }
6003
6263
  static get delegatesFocus() { return true; }
6004
6264
  static get style() { return lmvzButtonCss(); }
@@ -6006,7 +6266,7 @@ class LmvzButton extends ReactiveControllerHost {
6006
6266
  "$flags$": 793,
6007
6267
  "$tagName$": "lmvz-button",
6008
6268
  "$members$": {
6009
- "ti": [2562, "tabindex"],
6269
+ "ti": [514, "tabindex"],
6010
6270
  "scale": [513],
6011
6271
  "variant": [513],
6012
6272
  "disabled": [516],
@@ -6014,7 +6274,8 @@ class LmvzButton extends ReactiveControllerHost {
6014
6274
  "form": [1],
6015
6275
  "formMethod": [1, "form-method"],
6016
6276
  "name": [1],
6017
- "value": [1]
6277
+ "value": [1],
6278
+ "buttonRole": [1, "button-role"]
6018
6279
  },
6019
6280
  "$listeners$": undefined,
6020
6281
  "$lazyBundleId$": "-",
@@ -6036,6 +6297,7 @@ function negate(delegate) {
6036
6297
  };
6037
6298
  }
6038
6299
 
6300
+ const variants = ['primary', 'secondary', 'tertiary'];
6039
6301
  const chipTypes = ['active', 'warning', 'success', 'error', 'neutral'];
6040
6302
  const chipSizes = ['default', 'small'];
6041
6303
  const linkTypes = ['internal', 'external'];
@@ -8190,15 +8452,17 @@ function toValidSvgStringWithFallback(value) {
8190
8452
  }
8191
8453
  }
8192
8454
 
8193
- const lmvzButtonGroupCss = () => `:host{display:flex;justify-content:flex-end;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);flex-wrap:wrap}::slotted([hidden]){display:none !important}`;
8455
+ const lmvzButtonGroupCss = () => `:host{display:flex;flex-flow:row-reverse wrap;gap:var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));font:var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);}:host([stacked]){flex-flow:column nowrap;align-items:stretch;padding:0}:host([stacked]) ::slotted(*){display:block;width:100%}::slotted([hidden]){display:none !important}:host(:not([data-only-tertiary],[stacked])) ::slotted([data-first-tertiary]){margin-inline-end:auto}:host([data-only-tertiary]:not([stacked])){justify-content:flex-end}`;
8194
8456
 
8195
8457
  class LmvzButtonGroup {
8196
8458
  constructor(hostRef) {
8197
8459
  registerInstance(this, hostRef);
8198
8460
  }
8461
+ get el() { return getElement(this); }
8199
8462
  actionsSlot;
8200
8463
  validationMessageCache = [];
8201
8464
  actionsStateObserver;
8465
+ stacked = false;
8202
8466
  get primaryEnabledAction() {
8203
8467
  return this.enabledButtons.find(isPrimaryAction) ?? this.enabledButtons[0];
8204
8468
  }
@@ -8230,23 +8494,23 @@ class LmvzButtonGroup {
8230
8494
  const primaryActions = this.visibleButtons.filter(isPrimaryAction);
8231
8495
  const secondaryActions = this.visibleButtons.filter(isSecondaryAction);
8232
8496
  const issues = [];
8233
- const order = this.visibleButtons.toReversed();
8497
+ const order = this.visibleButtons;
8234
8498
  if (primaryActions.length !== 1)
8235
- issues.push('LmvzModal actions slot must contain exactly one primary action.');
8499
+ issues.push('LmvzButtonGroup actions slot should contain exactly one primary action.');
8236
8500
  if (secondaryActions.length > 1)
8237
- issues.push(`LmvzModal actions slot must contain at most one secondary action (received ${secondaryActions.length})`);
8501
+ issues.push(`LmvzButtonGroup actions slot should contain at most one secondary action (received ${secondaryActions.length})`);
8238
8502
  if (primaryActions.length) {
8239
8503
  const primaryAction = primaryActions[0];
8240
8504
  const secondaryAction = secondaryActions[0];
8241
8505
  if (order.indexOf(primaryAction) !== 0)
8242
- issues.push('Primary action must be the last focusable element in the actions slot (i.e. rightmost button).');
8506
+ issues.push('Primary action should be the first focusable element in the actions slot (i.e. first child of the actions slot).');
8243
8507
  if (secondaryAction && order.indexOf(secondaryAction) !== 1)
8244
- issues.push('Secondary action must be the second-to-last focusable element in the actions slot (i.e. left of primary button).');
8508
+ issues.push('Secondary action should be the second focusable element in the actions slot (i.e. immediately after the primary button).');
8245
8509
  }
8246
8510
  else if (secondaryActions.length) {
8247
8511
  const secondaryAction = secondaryActions[0];
8248
8512
  if (order.indexOf(secondaryAction) !== 0)
8249
- issues.push('Secondary action must be the last focusable element in the actions slot when no primary action is present (i.e. rightmost button).');
8513
+ issues.push('Secondary action should be the first focusable element in the actions slot when no primary action is present (i.e. first child of the actions slot).');
8250
8514
  }
8251
8515
  return issues;
8252
8516
  }
@@ -8284,20 +8548,35 @@ class LmvzButtonGroup {
8284
8548
  }
8285
8549
  });
8286
8550
  this.checkActions();
8287
- const length = this.visibleButtons.length;
8288
- for (let i = 0; i < length; i++) {
8289
- const variant = i === length - 1 ? 'primary' : i === length - 2 ? 'secondary' : 'tertiary';
8290
- const element = this.visibleButtons.at(i);
8551
+ const visibleButtons = this.visibleButtons;
8552
+ const hasNonTertiary = visibleButtons.length > 0 && visibleButtons.some((btn) => isPrimaryAction(btn) || isSecondaryAction(btn));
8553
+ if (visibleButtons.length > 0 && !hasNonTertiary) {
8554
+ this.el.setAttribute('data-only-tertiary', '');
8555
+ }
8556
+ else {
8557
+ this.el.removeAttribute('data-only-tertiary');
8558
+ }
8559
+ this.visibleButtons.forEach((element, i) => {
8560
+ const variant = variants[i] ?? 'tertiary';
8291
8561
  if (!element)
8292
- continue;
8562
+ return;
8293
8563
  if (isLmvzButton(element)) {
8294
- if (!element.getAttribute('variant'))
8564
+ if (!element.getAttribute('variant') && !element.variant)
8295
8565
  element.setAttribute('variant', variant);
8296
8566
  }
8297
8567
  else {
8298
8568
  element.classList.add(variant);
8299
8569
  }
8300
- }
8570
+ });
8571
+ const firstTertiary = this.visibleButtons.find((btn) => btn.getAttribute('variant') === 'tertiary');
8572
+ this.visibleButtons.forEach((btn) => {
8573
+ if (btn === firstTertiary) {
8574
+ btn.setAttribute('data-first-tertiary', '');
8575
+ }
8576
+ else {
8577
+ btn.removeAttribute('data-first-tertiary');
8578
+ }
8579
+ });
8301
8580
  this.focusPrimaryAction();
8302
8581
  }
8303
8582
  focusPrimaryAction() {
@@ -8325,43 +8604,22 @@ class LmvzButtonGroup {
8325
8604
  });
8326
8605
  }
8327
8606
  render() {
8328
- return (hAsync(Host, { key: '56b60821ecaa2301d13e78d621e873aa74cd170e' }, hAsync("slot", { key: 'e6a1422950fa5b0026356b7788a607a690116186', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
8607
+ return (hAsync(Host, { key: '3e8ce38f7e83e201e47d31579f22161ff36247b1' }, hAsync("slot", { key: 'bc953d19b333f51c5f5c5ba86be3a85d155a29d1', ref: (element) => (this.actionsSlot = element), onSlotchange: this.handleActionsSlotChange })));
8329
8608
  }
8330
8609
  static get style() { return lmvzButtonGroupCss(); }
8331
8610
  static get cmpMeta() { return {
8332
- "$flags$": 265,
8611
+ "$flags$": 777,
8333
8612
  "$tagName$": "lmvz-button-group",
8334
8613
  "$members$": {
8614
+ "stacked": [516],
8335
8615
  "primaryEnabledAction": [2064],
8336
8616
  "hasActions": [2052, "has-actions"]
8337
8617
  },
8338
8618
  "$listeners$": undefined,
8339
8619
  "$lazyBundleId$": "-",
8340
- "$attrsToReflect$": []
8620
+ "$attrsToReflect$": [["stacked", "stacked"]]
8341
8621
  }; }
8342
8622
  }
8343
- function isActionButton(element) {
8344
- return ['LMVZ-BUTTON', 'BUTTON'].includes(element.tagName.toUpperCase());
8345
- }
8346
- function isLmvzButton(element) {
8347
- return element?.tagName.toUpperCase() === 'LMVZ-BUTTON';
8348
- }
8349
- function isDisabledButton(element) {
8350
- return element.hasAttribute('disabled') || element.disabled === true;
8351
- }
8352
- function isVisible(element) {
8353
- return !element.hasAttribute('hidden');
8354
- }
8355
- function getActionVariant(element) {
8356
- const variant = element.getAttribute('variant') ?? element.variant;
8357
- return variant === 'primary' || variant === 'secondary' || variant === 'tertiary' ? variant : 'secondary';
8358
- }
8359
- function isPrimaryAction(element) {
8360
- return getActionVariant(element) === 'primary';
8361
- }
8362
- function isSecondaryAction(element) {
8363
- return getActionVariant(element) === 'secondary';
8364
- }
8365
8623
 
8366
8624
  function getLocationBase() {
8367
8625
  return (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('@app-factory-entry.js', document.baseURI).href)) ?? window?.location?.origin ?? '';
@@ -8383,7 +8641,7 @@ function joinPath(...parts) {
8383
8641
  return parts.filter(Boolean).join('/').replace('//', '/').replace('/./', '/');
8384
8642
  }
8385
8643
 
8386
- 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; } } .sc-lmvz-card-h { button { --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-secondary, #000000)); --lmvz-button-padding-inline: 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, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))); --lmvz-button-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --lmvz-button-font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); display: inline-flex; align-items: center; justify-content: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; 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)); } 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-semantic-color-int-secondary-hover, #e0e0e0); } button:not([disabled]):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); } button.primary { --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000); --lmvz-button-color: var(--lmvz-semantic-color-int-on-primary, #ffffff); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.primary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); } button.primary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); } button.secondary { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-button-border-width: 0; --lmvz-button-border-color: transparent; } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4); --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } button.tertiary { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); } button.tertiary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } button.tertiary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } button.small { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --lmvz-button-font: var(--lmvz-typography-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 1.5 Router); } button.large { --lmvz-button-padding-inline: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-padding-block: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --lmvz-button-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --lmvz-button-min-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --lmvz-button-font: var(--lmvz-typography-body-lg-strong, 500 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-8-12, 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-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, 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(2.25rem, 2.13rem + 0.52vw, 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; }`;
8644
+ 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-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } .sc-lmvz-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-body-md-strong, 500 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: center; gap: var(--lmvz-button-gap); padding-block: var(--lmvz-button-padding-block); padding-inline: var(--lmvz-button-padding-inline); min-height: var(--lmvz-button-min-height); border-radius: var(--lmvz-button-radius); border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color); background-color: var(--lmvz-button-background); color: var(--lmvz-button-color); cursor: pointer; font: var(--lmvz-button-font); text-align: center; 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.secondary { --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-border-width: var(--lmvz-button-border-width-override, 0); --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent); } button.secondary:not([disabled], .disabled):hover { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-hover, #000000)); } button.secondary:not([disabled], .disabled):active { --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4)); --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary-active, #000000)); } 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-body-sm-strong, 500 clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem) / 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-body-lg-strong, 500 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-8-12, 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-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, 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(2.25rem, 2.13rem + 0.52vw, 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; }`;
8387
8645
 
8388
8646
  class LmvzCard {
8389
8647
  constructor(hostRef) {
@@ -8408,7 +8666,7 @@ class LmvzCard {
8408
8666
  const imgStyle = {
8409
8667
  backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
8410
8668
  };
8411
- return (hAsync(Host, { key: '2d9ecdeed986f142fb7ff477b56dece59549bbc7', role: "article" }, hAsync("div", { key: '34fc9c3a1338b31ce73424e8c07c79a291ead85c', class: "top" }, hAsync("div", { key: '1756e6b26d7f42499753c36ed0fc13755fe32bfe', class: "image-wrapper", style: imgStyle }, hAsync("div", { key: 'cd8be8acc9e949092b6363024316d12d445a9fbc', class: "chip-slot" }, hAsync("slot", { key: '26389ab3b7031b948ff1701857e6028446662cf5', name: "chip" })))), hAsync("div", { key: '2fa61cd7bef437f15929ae39be7fa294e8778321', class: "bottom" }, hAsync("header", { key: 'b237ca025e42a29f528f827dc3c83b3b0f9267c0' }, hAsync("h2", { key: 'ffd0a509ba97acb75d4c15d0fd01eef08689a2a7', class: "title" }, this.cardTitle)), hAsync("p", { key: 'c40bd5d5f7e41a0cebc2f7f9e572ba98cc892cc1', class: "description" }, this.description), hAsync("div", { key: '7663f93b41ef1e798b464bd6ad75ca8a53c0667b', class: "actions" }, hAsync("button", { key: '3348e6700aa1571183558ab8fe4f73393c1cc943', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), hAsync("button", { key: 'd3a12cdabbdd68c3b04e06984db44abd3bbd22ea', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, hAsync("span", { key: '80e31e6b691e18d1b42a2b4831349c3abf8e02b0', class: "icon-placeholder" }, "..."))))));
8669
+ return (hAsync(Host, { key: '1dd819fd7c752af8d15001c08f7f60c6ea7278b9', role: "article" }, hAsync("div", { key: 'e0cc822e627b6bbe665e4faa705cc46a09bac7c6', class: "top" }, hAsync("div", { key: 'db79cb5a67ebdd6097f985e4b4bd27665b6329ef', class: "image-wrapper", style: imgStyle }, hAsync("div", { key: '90facc8595ddbbf31e3768faa8254a82ab8d3e65', class: "chip-slot" }, hAsync("slot", { key: 'cb2e6a1053aae2b2ca90c52c175e3c4174c89d23', name: "chip" })))), hAsync("div", { key: 'cb11069a329385178677e92d08044e0fe8e5b982', class: "bottom" }, hAsync("header", { key: '1e6076352124ca03de2fb13c17a565b4f492567e' }, hAsync("h2", { key: '73f11099fb751bd4f967dbe49b79763b6a8268f3', class: "title" }, this.cardTitle)), hAsync("p", { key: '36cf87b4c2004bff1e65feedd13e137d67115de3', class: "description" }, this.description), hAsync("div", { key: '6c1d82f4968ce8252307858e6ad0681274f06397', class: "actions" }, hAsync("button", { key: '0366e0caaf9235a3eaf7bfcab116e6a828fb248d', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), hAsync("button", { key: '4f435e79d75a621d6fe065471a915b55308ad15d', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, hAsync("span", { key: '7dec97e0b0ca58c40fc5308cc7863acafa8c5147', class: "icon-placeholder" }, "..."))))));
8412
8670
  }
8413
8671
  static get assetsDirs() { return ["../../assets"]; }
8414
8672
  static get style() { return lmvzCardCss(); }
@@ -8523,7 +8781,7 @@ class LmvzCheckbox extends ReactiveControllerHost {
8523
8781
  this.nativeInput?.click();
8524
8782
  }
8525
8783
  render() {
8526
- return (hAsync(Host, { key: 'cea4a962a76cab10c27adc6742fe0686b2ce6dbe' }, hAsync("div", { key: '1addfd795587de85ecbc632fbeb45026a4e46050', class: "pill" }, hAsync("input", { key: '8957359d0cc3f2c315badee7e20fcc81e85e0f00', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), hAsync("span", { key: '400dbe9379ceb4aceeb431fe6060c82b41009cda', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: '9612093e65346b419ec8e4469fea7f00fe4c3ff4', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: 'fd1136ea0726941bc400b8970f7cae4bb3b59363', class: "content" }, hAsync("label", { key: 'a06deb2d4bc76efb884701a17e4a28420a99965c', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: '2bd33f14062bedbb0609dff3ac7fbcee6fa16f21', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: 'ac4fcb6f0a2de16a17f0287e42b70b6339a50acc', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
8784
+ return (hAsync(Host, { key: 'b6b4153dbf80af15cb15799889ca23b621b4ef73' }, hAsync("div", { key: 'f11d6baaa4b04ee74b201be8c4e125ccd5c366aa', class: "pill" }, hAsync("input", { key: 'd61dccfa163ecf4fffa95a5d44be35adbb8ee8ff', type: "checkbox", id: this.checkboxId, checked: this.checkedState, disabled: this.disabled, required: this.required, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.ariaDescribedBy, "aria-errormessage": this.error && this.errorId ? this.errorId : undefined, ref: (el) => (this.nativeInput = el), onChange: this.handleChange, autoFocus: this.autofocus }), hAsync("span", { key: '87d62f1e0572e174e6d15f30ff59e37f6a5333cb', class: "box", "aria-hidden": "true" }, this.checkedState && hAsync("span", { key: '74d29a32599f6c1ee8bde0cb6f27e384de7fcc2d', class: "indicator", innerHTML: CHECKMARK_SVG })), hAsync("span", { key: '544990c81b3f7f90b53902d580d2eb2197edfa8b', class: "content" }, hAsync("label", { key: '1884744656a280f85bec91b27315d3a6b70e8238', htmlFor: this.checkboxId }, this.label), this.helperText && (hAsync("span", { key: '6783ff413a884c78dbd52e07cc7b433f5a9dcf29', onClick: this.retargetInnerClicks.bind(this), class: "helper-text", id: this.helperId, role: "status" }, this.helperText)))), this.errorMessage && (hAsync("span", { key: '7c19fe406223a11e25df54cdfa304bc000eb421f', class: "error-text", id: this.errorId, role: "alert" }, this.errorMessage))));
8527
8785
  }
8528
8786
  static get formAssociated() { return true; }
8529
8787
  static get watchers() { return {
@@ -8619,7 +8877,7 @@ class LmvzChip extends ReactiveControllerHost {
8619
8877
  }
8620
8878
  }, 500);
8621
8879
  render() {
8622
- return (hAsync(Host, { key: '70654d69189e77f9356853a921366083b2c4b969', type: this.type, size: this.size }, hAsync("slot", { key: 'c7e667b93166286fe68a812dd8eec82885e3fc5e', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: 'af38dd0429b42685a114e26175ce42d09f5fdcc1', class: "content-overflow-wrapper" }, hAsync("slot", { key: '924158498d65b9ac7c912b6b1a479016176e0b78', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: '9ff0394dbfb2131fafe513d0f2d8ce26c7781f20', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
8880
+ return (hAsync(Host, { key: 'f326ca8e4dba40941db6b9a711ba46989c4cf1b3', type: this.type, size: this.size }, hAsync("slot", { key: 'f9925e107c2e474ecbaca756451dc4249000b0db', name: "before-text", ref: (el) => (this.beforeSlot = el), onSlotchange: () => this.checkContent() }), hAsync("span", { key: '0b6ea980e0b0500d2955a03088d08eb2ca67f64f', class: "content-overflow-wrapper" }, hAsync("slot", { key: '2b7f5c02e9a09128e0a404c7fe35f6278ce1fa61', ref: (el) => (this.defaultSlot = el), onSlotchange: () => this.checkContent() })), hAsync("slot", { key: '929291cdaccf26d332823f9a100c6b6a84dc04f2', name: "after-text", ref: (el) => (this.afterSlot = el), onSlotchange: () => this.checkContent() })));
8623
8881
  }
8624
8882
  static get watchers() { return {
8625
8883
  "type": [{
@@ -8643,174 +8901,6 @@ class LmvzChip extends ReactiveControllerHost {
8643
8901
  }; }
8644
8902
  }
8645
8903
 
8646
- const defaultConfig = {
8647
- orientation: 'both',
8648
- enableHomeAndEnd: false,
8649
- manageTabIndex: false,
8650
- };
8651
- class DirectionalFocusController {
8652
- host;
8653
- elements = [];
8654
- currentElement;
8655
- config;
8656
- constructor(host, config = {}) {
8657
- this.host = host;
8658
- this.config = {
8659
- ...defaultConfig,
8660
- ...config,
8661
- };
8662
- }
8663
- hostConnected() {
8664
- this.host.el.addEventListener('keydown', this.handleKeydown);
8665
- this.syncManagedFocusTarget();
8666
- }
8667
- hostDisconnected() {
8668
- this.host.el.removeEventListener('keydown', this.handleKeydown);
8669
- }
8670
- updateElements(elements) {
8671
- const previousElement = this.currentElement ?? this.getManagedActiveElement() ?? undefined;
8672
- this.elements = elements.filter((element) => 'focus' in element && element.nodeType === 1);
8673
- this.syncManagedFocusTarget(previousElement);
8674
- }
8675
- setCurrentElement(element) {
8676
- const previousElement = this.currentElement;
8677
- this.currentElement = element !== null && element !== undefined && 'focus' in element && element.nodeType === 1 ? element : undefined;
8678
- this.syncManagedFocusTarget(previousElement);
8679
- }
8680
- handleKeydown = (event) => {
8681
- const intent = this.getFocusIntent(event.key);
8682
- if (!intent)
8683
- return;
8684
- const activeElement = this.getManagedActiveElement();
8685
- const nextElement = this.getTargetElement(activeElement, intent);
8686
- if (!nextElement)
8687
- return;
8688
- event.preventDefault();
8689
- this.applyFocusTarget(nextElement, true);
8690
- };
8691
- getFocusIntent(key) {
8692
- if (this.config.enableHomeAndEnd && key === 'Home')
8693
- return 'first';
8694
- if (this.config.enableHomeAndEnd && key === 'End')
8695
- return 'last';
8696
- if (this.config.orientation === 'horizontal') {
8697
- if (key === 'ArrowRight')
8698
- return 'next';
8699
- if (key === 'ArrowLeft')
8700
- return 'previous';
8701
- return undefined;
8702
- }
8703
- if (this.config.orientation === 'vertical') {
8704
- if (key === 'ArrowDown')
8705
- return 'next';
8706
- if (key === 'ArrowUp')
8707
- return 'previous';
8708
- return undefined;
8709
- }
8710
- if (key === 'ArrowDown' || key === 'ArrowRight')
8711
- return 'next';
8712
- if (key === 'ArrowUp' || key === 'ArrowLeft')
8713
- return 'previous';
8714
- return undefined;
8715
- }
8716
- getManagedActiveElement() {
8717
- const activeElement = getDeepActiveElement(this.host.el.ownerDocument ?? document);
8718
- if (activeElement instanceof HTMLElement && this.elements.includes(activeElement) && this.canMoveFocusTo(activeElement)) {
8719
- return activeElement;
8720
- }
8721
- if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
8722
- return this.currentElement;
8723
- }
8724
- return undefined;
8725
- }
8726
- getTargetElement(current, intent) {
8727
- if (!this.elements.length)
8728
- return undefined;
8729
- if (intent === 'first')
8730
- return this.findFocusableFromIndex(-1, 'next');
8731
- if (intent === 'last')
8732
- return this.findFocusableFromIndex(this.elements.length, 'previous');
8733
- const currentIndex = current ? this.elements.indexOf(current) : -1;
8734
- if (currentIndex === -1) {
8735
- return intent === 'next' ? this.findFocusableFromIndex(-1, 'next') : this.findFocusableFromIndex(this.elements.length, 'previous');
8736
- }
8737
- return this.findFocusableFromIndex(currentIndex, intent);
8738
- }
8739
- findFocusableFromIndex(startIndex, intent) {
8740
- if (!this.elements.length)
8741
- return undefined;
8742
- const step = intent === 'next' ? 1 : -1;
8743
- for (let offset = 1; offset <= this.elements.length; offset++) {
8744
- const index = (startIndex + step * offset + this.elements.length) % this.elements.length;
8745
- const candidate = this.elements[index];
8746
- if (this.canMoveFocusTo(candidate))
8747
- return candidate;
8748
- }
8749
- return undefined;
8750
- }
8751
- syncManagedFocusTarget(previousElement) {
8752
- const nextElement = this.selectManagedElement(previousElement);
8753
- const didChange = nextElement !== this.currentElement;
8754
- this.currentElement = nextElement;
8755
- if (this.config.manageTabIndex) {
8756
- this.updateTabIndexes(nextElement);
8757
- }
8758
- if (didChange && nextElement) {
8759
- this.config.onFocusTargetChange?.(nextElement);
8760
- }
8761
- }
8762
- selectManagedElement(previousElement) {
8763
- const activeElement = this.getManagedActiveElement();
8764
- if (activeElement)
8765
- return activeElement;
8766
- if (this.currentElement && this.elements.includes(this.currentElement) && this.canMoveFocusTo(this.currentElement)) {
8767
- return this.currentElement;
8768
- }
8769
- if (previousElement && this.elements.includes(previousElement)) {
8770
- return this.findFocusableFromIndex(this.elements.indexOf(previousElement), 'next') ?? this.findFocusableFromIndex(-1, 'next');
8771
- }
8772
- const currentRovingTarget = this.elements.find((element) => element.tabIndex === 0 && this.canMoveFocusTo(element));
8773
- if (currentRovingTarget)
8774
- return currentRovingTarget;
8775
- return this.findFocusableFromIndex(-1, 'next');
8776
- }
8777
- updateTabIndexes(activeElement) {
8778
- this.elements.forEach((element) => {
8779
- element.tabIndex = activeElement && element === activeElement ? 0 : -1;
8780
- });
8781
- }
8782
- applyFocusTarget(element, shouldFocus) {
8783
- const didChange = element !== this.currentElement;
8784
- this.currentElement = element;
8785
- if (this.config.manageTabIndex) {
8786
- this.updateTabIndexes(element);
8787
- }
8788
- if (shouldFocus) {
8789
- element.focus();
8790
- }
8791
- if (didChange) {
8792
- this.config.onFocusTargetChange?.(element);
8793
- }
8794
- }
8795
- canMoveFocusTo(element) {
8796
- if (!element)
8797
- return false;
8798
- if (element.hasAttribute('disabled'))
8799
- return false;
8800
- if ('disabled' in element && Boolean(element.disabled))
8801
- return false;
8802
- if (element.getAttribute('aria-disabled') === 'true')
8803
- return false;
8804
- if (this.config.isFocusableElement)
8805
- return this.config.isFocusableElement(element);
8806
- const isTabOrderable = this.config.manageTabIndex || element.tabIndex >= 0;
8807
- return (isTabOrderable &&
8808
- element.getAttribute('aria-hidden') !== 'true' &&
8809
- (element.checkVisibility?.() ?? true) &&
8810
- element.offsetParent !== null);
8811
- }
8812
- }
8813
-
8814
8904
  const logoSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDYiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA0NiA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI3Ml80MDUpIj4KPHBhdGggZD0iTTEyLjUgMjAuNjVDMTMuMSAyMC42NSAxNC4yIDIwLjM1IDE0LjcgMjAuMzVDMTYuMSAyMC4zNSAxNy4yIDIxLjQ1IDE3LjIgMjIuODVDMTcuMiAyNC4yNSAxNi4xIDI1LjM1IDE0LjcgMjUuMzVIMi44QzEuMiAyNS4zNSAwIDI0LjE1IDAgMjIuNTVDMCAyMS45NSAwLjIgMjAuNjUgMC4yIDIwLjA1VjUuODQ5OTlDMC4yIDUuMTQ5OTkgMCAzLjk0OTk5IDAgMy4zNDk5OUMwIDEuNzQ5OTkgMS4yIDAuNTQ5OTg4IDIuOCAwLjU0OTk4OEM0LjMgMC41NDk5ODggNS42IDEuNzQ5OTkgNS42IDMuMzQ5OTlDNS42IDMuOTQ5OTkgNS40IDUuMTQ5OTkgNS40IDUuODQ5OTlWMjAuNTVIMTIuNVYyMC42NVpNMjIuMSAyMi43NUMyMi4xIDIyLjE1IDIyLjMgMjAuOTUgMjIuMyAyMC4yNVY1Ljg0OTk5QzIyLjMgNS4xNDk5OSAyMi4xIDMuOTQ5OTkgMjIuMSAzLjQ0OTk5QzIyLjEgMS45NDk5OSAyMy4yIDAuNzQ5OTg4IDI0LjYgMC43NDk5ODhIMjUuMkMyNi40IDAuNzQ5OTg4IDI3LjIgMS41NDk5OSAyNy42IDIuNjQ5OTlMMjggMy40NDk5OUwzMi45IDE0LjA1QzMzLjMgMTQuOTUgMzMuNyAxNi4wNSAzNCAxNi43NUMzNC4zIDE2LjA1IDM0LjcgMTQuOTUgMzUuMSAxNC4wNUw0MCAzLjU0OTk5TDQwLjMgMi41NDk5OUM0MC43IDEuNTQ5OTkgNDEuNSAwLjY0OTk4OCA0Mi42IDAuNjQ5OTg4SDQzLjJDNDQuNyAwLjY0OTk4OCA0NS43IDEuODQ5OTkgNDUuNyAzLjM0OTk5QzQ1LjcgMy45NDk5OSA0NS41IDUuMTQ5OTkgNDUuNSA1Ljc0OTk5VjIwLjE1QzQ1LjUgMjAuODUgNDUuNyAyMi4wNSA0NS43IDIyLjY1QzQ1LjcgMjQuMjUgNDQuNSAyNS40NSA0MyAyNS40NUM0MS40IDI1LjQ1IDQwLjMgMjQuMjUgNDAuMyAyMi42NUM0MC4zIDIxLjk1IDQwLjQgMjAuNzUgNDAuNCAyMC4xNUw0MC42IDE0LjA1QzQwLjYgMTMuMTUgNDAuNyAxMS43NSA0MC43IDEwLjY1TDM3IDE5LjA1QzM2LjcgMTkuNzUgMzYuNiAxOS45NSAzNi40IDIwLjM1QzM2IDIxLjI1IDM1LjMgMjEuODUgMzMuOSAyMS44NUMzMi41IDIxLjg1IDMxLjggMjEuMjUgMzEuNCAyMC40NUMzMS4yIDIwLjA1IDMxLjIgMTkuNzUgMzAuOCAxOS4wNUwyNyAxMC43NUMyNyAxMC43NSAyNy4xIDEzLjE1IDI3LjIgMTQuMDVMMjcuNCAyMC4xNUMyNy40IDIwLjg1IDI3LjUgMjEuOTUgMjcuNSAyMi42NUMyNy41IDI0LjI1IDI2LjQgMjUuNDUgMjQuOCAyNS40NUMyMy4zIDI1LjU1IDIyLjEgMjQuMjUgMjIuMSAyMi43NVpNMjguNyAzMi45NUMyOS4xIDMyLjk1IDMwLjIgMzMuMTUgMzAuNyAzMy4xNUg0MS44QzQyLjMgMzMuMTUgNDMuMiAzMi45NSA0My43IDMyLjk1QzQ0LjkgMzIuOTUgNDUuOCAzMy44NSA0NS44IDM1LjA1QzQ1LjggMzYuMTUgNDQuOSAzNy4xNSA0My43IDM3LjE1QzQzLjMgMzcuMTUgNDIuMyAzNi45NSA0MS44IDM2Ljk1SDMwLjhDMzAuMyAzNi45NSAyOS4yIDM3LjE1IDI4LjggMzcuMTVDMjcuNiAzNy4xNSAyNi43IDM2LjI1IDI2LjcgMzUuMDVDMjYuNiAzMy45NSAyNy41IDMyLjk1IDI4LjcgMzIuOTVaTTIuMSA2Ny4yNUMyLjUgNjcuMjUgMy42IDY3LjQ1IDQuMSA2Ny40NUgxOC41QzE5IDY3LjQ1IDE5LjkgNjcuMjUgMjAuNCA2Ny4yNUMyMS42IDY3LjI1IDIyLjUgNjguMTUgMjIuNSA2OS4zNUMyMi41IDcwLjQ1IDIxLjYgNzEuNDUgMjAuNCA3MS40NUMyMCA3MS40NSAxOSA3MS4yNSAxOC41IDcxLjI1SDQuMUMzLjYgNzEuMjUgMi41IDcxLjQ1IDIuMSA3MS40NUMwLjkgNzEuNDUgMCA3MC41NSAwIDY5LjM1QzAgNjguMjUgMC45IDY3LjI1IDIuMSA2Ny4yNVpNMjEuOSAzNS42NUMyMS45IDM1Ljk1IDIxLjggMzYuMzUgMjEuNiAzNi43NUMyMS4zIDM3LjQ1IDIwLjkgMzguMzUgMjAuNyAzOC44NUwxNC43IDU0LjY1QzE0LjUgNTUuMDUgMTQuNCA1NS41NSAxNC4yIDU2LjM1QzEzLjggNTcuNjUgMTIuNiA1OC4yNSAxMS4yIDU4LjI1SDEwLjhDOS40IDU4LjI1IDguMiA1Ny43NSA3LjggNTYuMzVDNy42IDU1LjU1IDcuNCA1NS4xNSA3LjIgNTQuNjVMMS4yIDM4Ljg1QzEgMzguMzUgMC42IDM3LjU1IDAuMiAzNi44NUMwLjEgMzYuNDUgMCAzNS45NSAwIDM1LjY1QzAgMzQuMTUgMS4yIDMyLjg1IDIuOCAzMi44NUMzLjkgMzIuODUgNSAzMy41NSA1LjMgMzQuNzVDNS41IDM1LjU1IDUuNSAzNi4xNSA2IDM3LjU1TDEwLjIgNDkuNDVDMTAuNSA1MC4zNSAxMC45IDUxLjQ1IDExLjEgNTIuMzVDMTEuMyA1MS40NSAxMS42IDUwLjQ1IDExLjkgNDkuNTVMMTYgMzcuNTVDMTYuNSAzNi4wNSAxNi40IDM1LjY1IDE2LjcgMzQuODVDMTcuMSAzMy42NSAxOC4xIDMyLjg1IDE5LjMgMzIuODVDMjAuOSAzMi44NSAyMS45IDM0LjE1IDIxLjkgMzUuNjVaTTI5LjcgNzEuNDVDMjguMiA3MS40NSAyNy4yIDcwLjQ1IDI3LjIgNjkuMTVDMjcuMiA2OC43NSAyNy4yIDY4LjI1IDI3LjggNjcuNDVMMzcuNCA1My40NUMzNy45IDUyLjc1IDM4LjUgNTIuMDUgMzkuMSA1MS4zNUgzMi4yQzMxLjUgNTEuMzUgMzAuNyA1MS42NSAzMC4xIDUxLjY1QzI4LjcgNTEuNjUgMjcuNiA1MC43NSAyNy42IDQ5LjM1QzI3LjYgNDcuOTUgMjguNyA0Ni45NSAzMC4xIDQ2Ljk1SDQyLjdDNDQuMiA0Ni45NSA0NS4yIDQ3Ljg1IDQ1LjIgNDkuMjVDNDUuMiA0OS42NSA0NSA1MC4zNSA0NC41IDUxLjA1TDM1LjIgNjQuODVDMzQuNyA2NS42NSAzNC4xIDY2LjQ1IDMzLjUgNjcuMDVINDEuMUM0MS45IDY3LjA1IDQyLjcgNjYuNzUgNDMuMyA2Ni43NUM0NC43IDY2Ljc1IDQ1LjcgNjcuNzUgNDUuNyA2OS4wNUM0NS43IDcwLjU1IDQ0LjUgNzEuNTUgNDMuMiA3MS41NUgyOS43VjcxLjQ1WiIgZmlsbD0iYmxhY2siLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNzJfNDA1Ij4KPHJlY3Qgd2lkdGg9IjQ2IiBoZWlnaHQ9IjcyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=';
8815
8905
 
8816
8906
  const lmvzHeaderCss = () => `:host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-8-28, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));--lmvz-header-x-spacing-level-2:var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));padding:var(--lmvz-dimension-8-16, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);gap:var(--lmvz-header-x-spacing-level-1);.brand{display:inline-flex;justify-content:center;align-items:center}#fallback-logo-lmvz{height:34px;width:auto}nav{flex-grow:1}.primary-menubar{display:flex;flex-direction:row;align-items:center}.secondary-menubar{display:flex;flex-direction:row;align-items:center;margin-left:var(--lmvz-header-x-spacing-level-2);padding-left:var(--lmvz-header-x-spacing-level-2);border-left:1px solid var(--lmvz-semantic-color-border-default, #e0e0e0)}}`;
@@ -8897,7 +8987,7 @@ class LmvzHeader extends ReactiveControllerHost {
8897
8987
  }
8898
8988
  }
8899
8989
  render() {
8900
- return (hAsync(Host, { key: '0152283363802ea854334e0349e145e7d6219e09', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: 'cdc1d52dbfb658f99bffa2df2353b6a1ad232f97', class: "brand" }, hAsync("slot", { key: '25a039ea2224058f97f8ec1cb1aa310b388f2b2e', name: "brand" }, hAsync("img", { key: '9ca6f39b6e41382a438b3afd36348ee17b36d346', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: 'a6b7c1e7baca1ef2075d38cfaf631a277d2bb7ac', "aria-label": "Hauptnavigation" }, hAsync("div", { key: 'eb8c2db72d86cf3c4e2b0d94271bf73882c3bd96', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: 'b8a2b3c031158ce73ada65995b0d4e6e0e4eac72', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: '87dabdc52e40163b35e8c7681d3e4aa3a17d6d82', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '6cb38c14357ef682f1c804ab77cd70514308b6d4', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: '9e46e6e484556c5fbe0f2c573188e845fbca801b', class: "actions" }, hAsync("slot", { key: '4c1ea348528ccc3722c2dbbe0795e9f61d67edee', name: "actions" }))));
8990
+ return (hAsync(Host, { key: '5730219e990fc0f131ffacc7c88e6a5311553399', onFocus: this.delegateFocus.bind(this) }, hAsync("div", { key: '7285f2dcac7d60c5d93328aa0e2fe8aa6b7b379c', class: "brand" }, hAsync("slot", { key: 'd06d953ee82eab20da3f383c15032bcbe8803ff9', name: "brand" }, hAsync("img", { key: 'd2441ce0efbf99c05f6344051703a96ffb376450', id: "fallback-logo-lmvz", src: logoSvg, alt: "Lehrmittelverlag Z\u00FCrich" }))), hAsync("nav", { key: '7f092938728af5cb6568383a6622df49f222dc93', "aria-label": "Hauptnavigation" }, hAsync("div", { key: 'caa56893d6185aebb89661e62a555407675ccc2a', role: "menubar", class: "primary-menubar" }, hAsync("slot", { key: '90684f49cd3d53e20a63d4ebc37ec24e630bc313', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), hAsync("div", { key: 'ead46c08c6833565a55cd7af27fbece4e4468a03', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, hAsync("slot", { key: '3f2ba617d9ed78abb9ab94b9515b02bb6836385a', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), hAsync("div", { key: '6fc79122baa3fd95992cbf30a465c3b40438a18f', class: "actions" }, hAsync("slot", { key: 'c427f5a3ad693169e267060b9076086fd0e37670', name: "actions" }))));
8901
8991
  }
8902
8992
  static get watchers() { return {
8903
8993
  "lmvzActiveNav": [{
@@ -8965,7 +9055,7 @@ class LmvzIcon extends ReactiveControllerHost {
8965
9055
  super.componentDidRender();
8966
9056
  }
8967
9057
  render() {
8968
- return hAsync(Host, { key: '03b4391d02a77409257bcda51c2b65ad9a9e0a0c', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
9058
+ return hAsync(Host, { key: '4fba217d573d968951819f12af24d775c8ac62dc', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
8969
9059
  }
8970
9060
  waitUntilVisible(callback, rootMargin = 50) {
8971
9061
  {
@@ -9000,6 +9090,28 @@ class LmvzIcon extends ReactiveControllerHost {
9000
9090
  }; }
9001
9091
  }
9002
9092
 
9093
+ const raf = (h) => {
9094
+ if (typeof __zone_symbol__requestAnimationFrame === 'function') {
9095
+ return __zone_symbol__requestAnimationFrame(h);
9096
+ }
9097
+ if (typeof requestAnimationFrame === 'function') {
9098
+ return requestAnimationFrame(h);
9099
+ }
9100
+ return setTimeout(h);
9101
+ };
9102
+
9103
+ const componentOnReady = (stencilEl, callback) => {
9104
+ if (hasLazyBuild(stencilEl)) {
9105
+ stencilEl.componentOnReady().then((resolvedEl) => callback(resolvedEl));
9106
+ }
9107
+ else {
9108
+ raf(() => callback(stencilEl));
9109
+ }
9110
+ };
9111
+ const hasLazyBuild = (stencilEl) => {
9112
+ return stencilEl.componentOnReady !== undefined;
9113
+ };
9114
+
9003
9115
  const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.theme { @font-face { font-family: Router; src: local('RouterBook-Regular'), local('Router-Book'), url('/assets/fonts/Router-Book.woff') format('woff'); font-weight: 400; } @font-face { font-family: Router; src: local('RouterMedium-Regular'), local('Router-Medium'), url('/assets/fonts/Router-Medium.woff') format('woff'); font-weight: 500; } @font-face { font-family: Router; src: local('RouterBold-Regular'), local('Router-Bold'), url('/assets/fonts/Router-Bold.woff') format('woff'); font-weight: 700; } } .sc-lmvz-input-h { display: block; font-family: var(--lmvz-global-font-family-default, Router); --input-radius: var(--lmvz-component-input-radius-default, 999px); --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff); --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7); --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc); --input-border-width: var(--lmvz-semantic-border-width-default, 1px); --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000); --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454); --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31); --label-minimized-bg: var(--input-bg); --label-minimized-padding-x: 4px; --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } [size='sm'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)); --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.69rem, 0.67rem + 0.06vw, 0.75rem)); } [size='md'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)); --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h { --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)); --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)); --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input { display: flex; flex-direction: column; position: relative; width: 100%; } .input-wrapper.sc-lmvz-input { background-color: var(--input-bg); border: var(--input-border-width) solid var(--input-border-color); border-radius: var(--input-radius); display: flex; align-items: center; height: var(--input-height); padding: 0 var(--input-padding-x); position: relative; transition: border-color 0.2s ease; gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { opacity: var(--input-disabled-opacity); cursor: not-allowed; pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input { border-color: var(--input-border-color-focus); outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); } [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input { border-color: var(--error-text-color); } .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover { border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; } label.sc-lmvz-input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--label-color); font-size: var(--input-font-size); font-weight: 400; pointer-events: none; transition: all 0.2s ease-out; background-color: transparent; padding: 0; margin: 0; line-height: 1.5; white-space: nowrap; } label.floating.sc-lmvz-input { top: 0.5em; transform: translateY(-100%); transform-origin: left top; font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem)); background-color: var(--label-minimized-bg); padding: 0 var(--label-minimized-padding-x); left: -2px; color: var(--input-text-color); font-weight: 400; } .required-indicator.sc-lmvz-input { color: var(--error-text-color); margin-left: 2px; } input.sc-lmvz-input { border: none; background: transparent; width: 100%; height: 100%; color: var(--input-text-color); font-family: inherit; font-size: var(--input-font-size); outline: none; padding: 0; margin: 0; font-weight: 400; } input.sc-lmvz-input::placeholder { color: var(--label-color); } div.sc-lmvz-input:empty { display: none; } [role='status'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--helper-text-color); font-weight: 400; } [role='alert'].sc-lmvz-input { padding-top: 8px; padding-left: var(--input-padding-x); font-size: 12px; color: var(--error-text-color); font-weight: 400; } .sc-lmvz-input-s > lmvz-button { --lmvz-button-padding: 4px; }`;
9004
9116
 
9005
9117
  let inputIdCounter = 0;
@@ -9148,7 +9260,7 @@ class LmvzInput extends ReactiveControllerHost {
9148
9260
  handleFocus = () => { };
9149
9261
  handleBlur = (event) => {
9150
9262
  const input = event.target;
9151
- input.reportValidity?.();
9263
+ input.checkValidity?.();
9152
9264
  };
9153
9265
  updateNativeError(fromEvent) {
9154
9266
  const input = fromEvent ?? this.nativeInputElement;
@@ -9159,9 +9271,9 @@ class LmvzInput extends ReactiveControllerHost {
9159
9271
  render() {
9160
9272
  const hasValue = Boolean(this.value);
9161
9273
  const shouldFloatLabel = hasValue || Boolean(this.placeholder);
9162
- return (hAsync("div", { key: '4be6846147fec950acad0c0cb8643bfa69233935', class: classNames('input-container', {
9274
+ return (hAsync("div", { key: '693614c334a94373dcef56b461455bf872249a69', class: classNames('input-container', {
9163
9275
  'interaction-filled': hasValue,
9164
- }) }, hAsync("div", { key: 'ae9bf8ffd91b73a86c2ebd21af051efe26a1d5fd', class: "input-wrapper" }, hAsync("slot", { key: '36b3f7d97a11296aeead44c4d8ab4f0f8edf62d1', name: "before-input" }), hAsync("div", { key: '4320f461ffa908730cd898863f43644aa3677081', class: "label-input-group" }, hAsync("label", { key: '1dd51cf16f064303fd9c5249cbe3a357c7515ddc', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: '74bb8124b1126501201eb7c3361c6cf7f17dda5c', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: '9cff77bea65c50331a6804d7039672bbe01e710c', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hAsync("slot", { key: '689a3aa53e22f89173893adbc72eaf4953a2c7f6', name: "after-input" })), hAsync("div", { key: 'd29b9ea209c138d0de09f71042f539a56ed4f9fa', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '8be227367abadb0e001d9475f0793aed31dbb64a', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
9276
+ }) }, hAsync("div", { key: '0eb36d76661d70bea71027ca7b30763d89bd6cb6', class: "input-wrapper" }, hAsync("slot", { key: '03adf18ebe01fe70dc821dcea2bb2963df40f8b4', name: "before-input" }), hAsync("div", { key: 'f1254561b53e321d0f2e4cf4ac93936119083f3f', class: "label-input-group" }, hAsync("label", { key: 'e17cdec368fd36a041d9d8853f4a82249f1b5d8c', htmlFor: this.inputId, class: classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (hAsync("span", { key: 'b3e003bf972c3ad5b6c5b25f8ee509bd5d8df758', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), hAsync("input", { key: '75f192118b7a4c3e507172e13d0ae7e32118aad3', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hAsync("slot", { key: '58a9701259ca92fd7441c1480de741d92bc47bc9', name: "after-input" })), hAsync("div", { key: '396b719d080c781f38d736e28e9c048f629d6ffe', id: this.helperId, role: "status" }, this.helperText || null), hAsync("div", { key: '9e5c86e6098f58d95c0984348d3da07b9e34e1fb', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
9165
9277
  }
9166
9278
  static get formAssociated() { return true; }
9167
9279
  static get watchers() { return {
@@ -9267,7 +9379,7 @@ class LmvzLink {
9267
9379
  const rel = this.computeRel();
9268
9380
  const iconSvg = this.type === 'external' ? EXTERNAL_SVG : ARROW_RIGHT_SVG;
9269
9381
  const isBlank = this.target === '_blank';
9270
- return (hAsync(Host, { key: 'c80daca5bef1fd7a9753a075d6bf795f11b5fc1b' }, hAsync("a", { key: '06dd1183936e57c00ba4cf028bf186e964ad0ff8', href: this.computeHref(), target: this.target, rel: rel }, hAsync("slot", { key: '03cd7fe4bab8a9d6d8f1e7278ee6d0d24650fbda' }), hAsync("lmvz-icon", { key: 'c8a31a8937bc59b98bf1dce9bb127f423ac0cb4d', "aria-hidden": "true", icon: iconSvg }), isBlank && hAsync("span", { key: '9217e2d0b1b904492598bd0e638cbcb29d4ff212', class: "sr-only" }, this.externalLabel))));
9382
+ return (hAsync(Host, { key: '338116d5af3112ec2a4a09b652048b733565a7d4' }, hAsync("a", { key: 'ae70aa2320ea2eeca56a14714de4dcfb06b8c94c', href: this.computeHref(), target: this.target, rel: rel }, hAsync("slot", { key: '4852b3336a94a46f363a83fb2c4f6d267f680d3d' }), hAsync("lmvz-icon", { key: 'e7f72016611a7d741eef7c81a047e026c699bdef', "aria-hidden": "true", icon: iconSvg }), isBlank && hAsync("span", { key: 'b4138b479b7c36c3b16c8e96fc6e39736222b26f', class: "sr-only" }, this.externalLabel))));
9271
9383
  }
9272
9384
  static get delegatesFocus() { return true; }
9273
9385
  static get watchers() { return {
@@ -9315,7 +9427,7 @@ class LmvzMenuItem extends ReactiveControllerHost {
9315
9427
  this.addController(new ElementActivationController(this));
9316
9428
  }
9317
9429
  render() {
9318
- return (hAsync(Host, { key: '3bc38647d755df012ea744775fe856798e677d0f' }, hAsync("slot", { key: '67145418bc36b0ede915d170dca9ce84a27567c8', ref: (e) => (this.validationSlot = e) })));
9430
+ return (hAsync(Host, { key: '9c86e99a0427a5d11925a30bcdb9f88124006413' }, hAsync("slot", { key: '9a578cdf49bd1edd981d68d7b28c39b784980345', ref: (e) => (this.validationSlot = e) })));
9319
9431
  }
9320
9432
  static get style() { return lmvzMenuitemCss(); }
9321
9433
  static get cmpMeta() { return {
@@ -9400,7 +9512,7 @@ class LmvzMessage {
9400
9512
  }
9401
9513
  render() {
9402
9514
  const role = this.live === 'assertive' ? 'alert' : this.live === 'polite' ? 'status' : 'note';
9403
- return (hAsync(Host, { key: '4e29d3edf1043cd85245942135d689c3b65e49e7', role: role }, this.leadingIcon && hAsync("span", { key: 'd927bbefca6152bc40c3a7edf9554ea97231b3a7', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), hAsync("span", { key: 'd321b275006a25be9f03be81ff085e9776e45bfd', class: "message" }, hAsync("slot", { key: 'a511d00a5c668e48844b717c69be759e046da25d', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (hAsync("lmvz-button", { key: 'e09cbc8381b9b96c7fb95d6f18886df55e53c074', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (hAsync("lmvz-button", { key: 'c34d4684cdc63e5269dd3c98d8e2466ba586c3e3', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, hAsync("lmvz-icon", { key: '1341db9c89a9d708b03807d7cfda949e300deef4', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
9515
+ return (hAsync(Host, { key: 'f422e8ee4bb4466757c081bc6b33761db15cb02d', role: role }, this.leadingIcon && hAsync("span", { key: 'c4077083db459a65cacce2cbb8e8dbb477572d95', class: "leading-icon", "aria-hidden": "true", innerHTML: TYPE_SVG[this.type] }), hAsync("span", { key: '77c3af94194adc2b663c6d6626951e5789e17686', class: "message" }, hAsync("slot", { key: '8db714f6bd0ac80a3c77a2768431baa37a63b3d1', ref: (el) => (this.messageSlot = el), onSlotchange: this.handleSlotChange })), this.actionLabel && (hAsync("lmvz-button", { key: 'f75e835f39e97ea217727b55dc842ceda004834b', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel)), this.dismissible && (hAsync("lmvz-button", { key: '51b04ad48a68e0843445104e303eae5bb4cdd351', variant: "tertiary", scale: "small", "aria-label": this.closeLabel, onClick: this.handleDismissClick }, hAsync("lmvz-icon", { key: '5949210f479a6a19f1c4bb9d3c91a77a1c0ad8a6', "aria-hidden": "true", icon: CLOSE_SM_SVG })))));
9404
9516
  }
9405
9517
  static get style() { return lmvzMessageCss(); }
9406
9518
  static get cmpMeta() { return {
@@ -9420,7 +9532,7 @@ class LmvzMessage {
9420
9532
  }; }
9421
9533
  }
9422
9534
 
9423
- const lmvzModalCss = () => ` @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; } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
9535
+ const lmvzModalCss = () => ` @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-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: contents; --lmvz-modal-shell-gap: var(--lmvz-dimension-16-20, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)); } dialog { border: none; padding: 0; background: transparent; height: 100vh; width: 100vw; contain: layout size; } dialog::backdrop { background: rgba(0, 0, 0, 0.19); background: rgb(from var(--lmvz-semantic-color-int-primary, #000000) r g b / 0.29); } .modal-shell { margin-inline: auto; top: 50%; transform: translateY(-50%); box-sizing: border-box; width: fit-content; max-height: 100%; max-width: clamp(20rem, 100%, 90vw); display: flex; flex-direction: column; gap: var(--lmvz-modal-shell-gap); padding: var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem)); border-radius: var(--lmvz-component-wrapper-lg-border-radius, 18px); background: var(--lmvz-semantic-color-surface-primary, #ffffff); position: relative; .close-button { position: absolute; top: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); right: var(--lmvz-dimension-10-12, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem)); } } .header { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--lmvz-modal-shell-gap); } .title { min-inline-size: 0; font: var(--lmvz-typography-heading-lg, 500 clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem) / 1.5 Router); } .has-title .title { flex: 1 1 auto; } .body { font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); flex: 1; overflow: scroll; } `;
9424
9536
 
9425
9537
  const closeIconSvg = toValidSvgStringWithFallback(closeSmSvg);
9426
9538
  let modalIdCounter = 0;
@@ -9644,7 +9756,7 @@ class LmvzModal extends ReactiveControllerHost {
9644
9756
  this.hasHeader = this.hasAssignedContent(this.headerSlot);
9645
9757
  };
9646
9758
  render() {
9647
- return (hAsync(Host, { key: 'd73eaf12bf6b229785cdec9ce2156cf5510c51ca' }, hAsync("dialog", { key: '51e36002cf4a49963abe1e6e541b2e19274347b5', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: '5415ca10fabe4bf828f59059b03eb06e2c965d92', class: "modal-shell" }, hAsync("header", { key: 'be3c707da5ffda470f51425cb09550b0ab749f0f', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: '7221eb87a8d132436043ec74e5b0b3622faa57bc', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: 'a410b4185f0ed52f17dd92d765318d8ce3421bea', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: 'b87688d68b01c51274455a4e1977f2cccbf22690', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '3ba11132a9779c971458151aca5a0ba4a09bbf28', icon: closeIconSvg }))), hAsync("div", { key: '00b59e67efc8470bff3a7270bdde4221b8a8ffb4', class: "body" }, hAsync("slot", { key: 'e51eb9f2c17e2eb76d1013d585e8dfcd54a8f0d2' })), hAsync("footer", { key: '0972331ef6843b0f401bac6bde4d8dc78a81fb5c', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, hAsync("lmvz-button-group", { key: '81c19d896200e84dd91878d2902410b9838d6c8c', ref: (element) => (this.buttonGroupEl = element) }, hAsync("slot", { key: '0ed4a2ba74e5bee597e61329afe422b3bf3c3907', name: "actions" })))))));
9759
+ return (hAsync(Host, { key: '8b5f506cdac223a440309d472639fe965b94f8c2' }, hAsync("dialog", { key: '0b70ac4d9590266271052c4d7fdef03c684d9b72', ref: (element) => (this.dialogEl = element), onCancel: this.handleDialogCancel, onClose: this.handleDialogClose, ...this.dialogAccessibilityAttributes }, hAsync("div", { key: '25b529bec1905408c2041b7370ab37586eade47d', class: "modal-shell" }, hAsync("header", { key: 'd86ae4a6f4ac7f6efd38385f1407d1f6bfbb1abb', class: { header: true, 'has-title': this.hasHeader } }, hAsync("div", { key: '7fd7059bfb0b90834895a87c2f2598e2e8c2ba80', class: "title", id: this.dialogTitleId, hidden: !this.hasHeader }, hAsync("slot", { key: 'b6eb7885e220e5def4c3c8420d5b83f4a7e30907', name: "header", ref: (element) => (this.headerSlot = element), onSlotchange: this.handleHeaderSlotChange })), hAsync("lmvz-button", { key: 'dcebb06482cdef7423c6b62ef877ca9aaabf55a4', ref: (element) => (this.closeButtonEl = element), type: "button", class: "close-button", "aria-label": this.closeLabel, onClick: this.handleCloseButtonClick, variant: "tertiary" }, hAsync("lmvz-icon", { key: '0db22c68fe164ed2a33bfaeacf9eac619424f464', icon: closeIconSvg }))), hAsync("div", { key: 'ef402c343f2c68210351f7556eec08f2e9be851b', class: "body" }, hAsync("slot", { key: '3fe86dc88c88c2cf7bfe3429c62cb2047b64611a' })), hAsync("footer", { key: '92b7bdab1ffe700749fc029723f70913f436397d', class: "actions", hidden: !this.buttonGroupEl?.hasActions }, hAsync("lmvz-button-group", { key: '7e1b310fb1b20449ead14d0702af4977c74198dd', ref: (element) => (this.buttonGroupEl = element) }, hAsync("slot", { key: 'cb2187ab2758c61e80b65f9fc55c6be5f9fd0458', name: "actions" })))))));
9648
9760
  }
9649
9761
  static get watchers() { return {
9650
9762
  "open": [{
@@ -9976,7 +10088,7 @@ class LmvzRadio extends ReactiveControllerHost {
9976
10088
  this.radioGroupController.setFocused(target);
9977
10089
  }
9978
10090
  render() {
9979
- return (hAsync(Host, { key: '084706ba35f3ecc647653896cf50e1dfdb0eabe4' }, hAsync("input", { key: 'c68a13d6f424c251b93ff3bb5648d64ef4645a5a', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), hAsync("span", { key: '07500032fe1cdebe544d3ed6890d66fe84c43e07', class: "circle", "aria-hidden": "true" }, this.checked && hAsync("span", { key: '0b6f8c99270cbadea320cae867bfef9fd4a70312', class: "dot" })), hAsync("span", { key: '60c9720a1e029e99d2304a5579a20942f03778aa', class: "content" }, hAsync("label", { key: '13eb208e8bd0f4c5a56955cd4f4e9813cc715425', htmlFor: this.radioId }, this.label), hAsync("span", { key: '771e582752972a8e58a0e85408cfefeef57e257b', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
10091
+ return (hAsync(Host, { key: '9b8fbfe18376f9411f792630065dfd219f9ddb32' }, hAsync("input", { key: '24a0675eff854bbd751c07905db4be11e5353d11', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), hAsync("span", { key: 'f888c1f76f6f929609584d378dbe0974fd980f68', class: "circle", "aria-hidden": "true" }, this.checked && hAsync("span", { key: '57fbb1e7abdca10861cf8709d4300459e1f62e5c', class: "dot" })), hAsync("span", { key: '1c845611162be86500e8475ac37412e2d3f2fd99', class: "content" }, hAsync("label", { key: '1399f4d34ff0e6d369cefc9f5d08208a4dee593f', htmlFor: this.radioId }, this.label), hAsync("span", { key: '1345435ff2f4773260ea3f73e943f043c2b88bdb', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
9980
10092
  }
9981
10093
  static get formAssociated() { return true; }
9982
10094
  static get watchers() { return {
@@ -10069,7 +10181,7 @@ class LmvzSelect extends ReactiveControllerHost {
10069
10181
  render() {
10070
10182
  const hasValue = this.hasValue;
10071
10183
  const shouldShowLabel = hasValue;
10072
- return (hAsync(Host, { key: '292678c0d3c000624ca6b0cb76c05a0c27ad3494', "data-highlighted": String(this.highlighted) }, hAsync("div", { key: '83d269c626a21af74dca8d89d5b0a1a95494a70d', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, hAsync("label", { key: 'e5d3b30349ab8438bc02d18c93760d52b979d24e', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '2f26cf5991b76a5d740f0e61c2ecf9d9a44436b8', "aria-hidden": "true" }, " *")), hAsync("div", { key: '30087b0b2d3f4768b02470209c6d14a46c362334', "aria-hidden": "true" }, hAsync("span", { key: '67888d3a89f8cbdf332696d827e72a2cce519438' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: 'e1b28fe2c2865ed1fba181e60a8682095c5123fc', "aria-hidden": "true" }, " *")), hAsync("span", { key: '7479df9bf0e995b92ba9f11f1271f71892c52ac8' }, hAsync("svg", { key: '5a76ba91f6b2d29dafd56b6c4abe1b5f93ece926', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, hAsync("path", { key: '06c62b38ef2cc0ae3119d2dba0f2015e26e84393', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), hAsync("select", { key: 'f1fb834cc74ae70e21ea3fd0ec4f653689cfbfa1', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && hAsync("option", { key: 'b6240b308c06b01a3a00104941a77090d243548b', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: 'b1128685fc5365be2561bbeef627f2d409f631c9' }))), this.helperText && hAsync("div", { key: 'b856e0b6f8e6f1c62de5d0ef59ad7d623c28b5ae', role: "status" }, this.helperText)));
10184
+ return (hAsync(Host, { key: 'c753006bdabf1723fa9ff61eb35f58d5bef3157b', "data-highlighted": String(this.highlighted) }, hAsync("div", { key: '6b06056fd48ef4f837cbe17383756e3726c68f90', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, hAsync("label", { key: '819901582fc449566a112cd4544fa0af903a7011', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && hAsync("span", { key: '14ad70c1cf1a96c7398698fa86baeadd5fe4257b', "aria-hidden": "true" }, " *")), hAsync("div", { key: '589c6946bee6e320a36dfa0ed765ff9e02af4c2f', "aria-hidden": "true" }, hAsync("span", { key: '04444223ed66a5ddff3eb7bd581cf5a7e615cf6b' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && hAsync("span", { key: '9631d4a655514957a4564be939d8bd16c3a036f0', "aria-hidden": "true" }, " *")), hAsync("span", { key: '3950abf6ee9528adb5895fe6bc88be67b39d458e' }, hAsync("svg", { key: '98a0a380e9ca5044ca1fefb03b74bfc178974a60', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, hAsync("path", { key: '19fe8b40e315fabee982ba37fe2d397493429519', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), hAsync("select", { key: '7480ff36ef3acfe10fb0122bfdf7feb5af406c67', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && hAsync("option", { key: '5d00f696c2c4d7c35c180018a4c487cbb0229d37', value: "", disabled: true, selected: true, hidden: true }), hAsync("slot", { key: '218fe11d224d7ca72c8555301d41d8878b6b34b4' }))), this.helperText && hAsync("div", { key: 'edbb738590305f6724a590a3532fd9284a187866', role: "status" }, this.helperText)));
10073
10185
  }
10074
10186
  static get watchers() { return {
10075
10187
  "value": [{
@@ -10161,7 +10273,7 @@ class LmvzSnackbar {
10161
10273
  this.el.dispatchEvent(new CustomEvent('lmvzAction', { bubbles: false, composed: false }));
10162
10274
  };
10163
10275
  render() {
10164
- return (hAsync(Host, { key: '034265e91b852042148789191923cd905750353f', class: this.animationClass }, hAsync("lmvz-icon", { key: 'ee0d34690e65bd1e6df60e241b40361794c79e5b', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), hAsync("span", { key: 'd42c28c2b921058f4a8864ae13b58b6d7f76abd2', class: "message" }, this.message), this.actionLabel && (hAsync("lmvz-button", { key: 'b73c572c9156f7ee91d00e24200b9640cfc2f79c', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
10276
+ return (hAsync(Host, { key: 'f207854371f8423ff8dc9b732d1dabe1ab06e0b1', class: this.animationClass }, hAsync("lmvz-icon", { key: 'e0ffdd4c51d11f94aa33c5a9678a15e4162d4bdd', icon: STATUS_SVG[this.status], size: "md", weight: "bold" }), hAsync("span", { key: 'fcce1cbef0597af7e86de7b33a4f8a40c09f0cc8', class: "message" }, this.message), this.actionLabel && (hAsync("lmvz-button", { key: '3cdbd81ba0c9102d0539c913f530e2abfbed0fb6', variant: "tertiary", scale: "small", onLmvzActivation: this.handleActionClick }, this.actionLabel))));
10165
10277
  }
10166
10278
  static get watchers() { return {
10167
10279
  "status": [{
@@ -10198,7 +10310,7 @@ class LmvzSpinner {
10198
10310
  ariaLabel;
10199
10311
  render() {
10200
10312
  const hasLabel = !!this.ariaLabel?.trim();
10201
- return (hAsync(Host, { key: '4afbe68fd14346a506e3ef7748141e580882d867', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, hAsync("svg", { key: 'a30c1de9096bf0364ef76b685ad82b6ec21a6841', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, hAsync("circle", { key: 'e2f9507b582dc591053f2e0543eb701aa701702c', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
10313
+ return (hAsync(Host, { key: '1953e9328170f6203b0936fd051fcaae44cba1d6', role: hasLabel ? 'status' : undefined, "aria-label": hasLabel ? this.ariaLabel : undefined, "aria-hidden": hasLabel ? undefined : 'true' }, hAsync("svg", { key: '4393e17fe0b2e899cdd84f0bfba2047d3a08bac1', part: "indicator", viewBox: "0 0 16 16", "aria-hidden": "true" }, hAsync("circle", { key: 'a321ad329e7a94680b37f2e11bb0ab3ef6344708', pathLength: "100", cx: "8", cy: "8", r: "6" }))));
10202
10314
  }
10203
10315
  static get style() { return lmvzSpinnerCss(); }
10204
10316
  static get cmpMeta() { return {
@@ -10214,7 +10326,7 @@ class LmvzSpinner {
10214
10326
  }; }
10215
10327
  }
10216
10328
 
10217
- const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { display: inline-block; flex: none; } :host([disabled]) { cursor: not-allowed; pointer-events: none; } button { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lmvz-component-component-spacing-0-default, 4px); padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border: none; border-radius: var(--lmvz-semantic-border-radius-round, 999px); background: var(--lmvz-tab-background); color: var(--lmvz-tab-color); font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); z-index: 1; } button:disabled { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } button:hover { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button { padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator { --lmvz-tab-indicator-size: 4px; position: absolute; background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); opacity: 0; transition: opacity 0.15s ease; inset-block-end: 0; inset-inline: 0; block-size: var(--lmvz-tab-indicator-size); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--lmvz-tab-indicator-size); border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator { opacity: 1; } :host([vertical]) button { border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator { inset-block: 0; inset-inline: 0 auto; inline-size: var(--lmvz-tab-indicator-size); block-size: auto; border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0; background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) { --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label { display: contents; } `;
10329
+ const lmvzTabCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: inline-block; flex: none; } :host([disabled]) { cursor: not-allowed; pointer-events: none; } button { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lmvz-component-component-spacing-0-default, 4px); padding-top: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); padding-bottom: var(--lmvz-dimension-8-14, clamp(0.5rem, 0.41rem + 0.39vw, 0.88rem)); padding-inline: var(--lmvz-dimension-16-24, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)); border: none; border-radius: var(--lmvz-semantic-border-radius-round, 999px); background: var(--lmvz-tab-background); color: var(--lmvz-tab-color); font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router); cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } button:focus-visible { outline: var(--lmvz-ds-outline, 1px solid #0e7ab4); outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); z-index: 1; } button:disabled { opacity: var(--lmvz-component-input-disabled-opacity, 40%); pointer-events: none; cursor: not-allowed; } button:hover { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-hover, #000000); } button:active { --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); --lmvz-tab-color: var(--lmvz-semantic-color-int-on-secondary-active, #000000); } :host([has-media]) { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary, #000000); --lmvz-tab-background: var(--lmvz-semantic-color-int-tertiary, #ffffff); } :host([has-media]) button { padding-top: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); padding-bottom: var(--lmvz-dimension-12-14, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); padding-inline: var(--lmvz-dimension-40-48, clamp(2.5rem, 2.38rem + 0.52vw, 3rem)); border-radius: var(--lmvz-semantic-border-radius-lg, 14px); } :host([has-media]) button:hover { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000); } :host([has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000); } :host([selected]) button { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); --lmvz-tab-background: var(--lmvz-semantic-color-status-active, #f6fbfe); } :host([selected][has-media]) button:hover, :host([selected][has-media]) button:active { --lmvz-tab-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4); } .indicator { --lmvz-tab-indicator-size: 4px; position: absolute; background: linear-gradient(to right, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); opacity: 0; transition: opacity 0.15s ease; inset-block-end: 0; inset-inline: 0; block-size: var(--lmvz-tab-indicator-size); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: var(--lmvz-tab-indicator-size); border-end-end-radius: var(--lmvz-tab-indicator-size); } :host([selected][has-media]) .indicator { opacity: 1; } :host([vertical]) button { border-radius: var(--lmvz-semantic-border-radius-round, 999px); } :host([vertical]) .indicator { inset-block: 0; inset-inline: 0 auto; inline-size: var(--lmvz-tab-indicator-size); block-size: auto; border-radius: 0 var(--lmvz-tab-indicator-size) var(--lmvz-tab-indicator-size) 0; background: linear-gradient(to bottom, var(--lmvz-semantic-color-gradient-main-1, #0e7ab4), var(--lmvz-semantic-color-gradient-main-2, #0e7ab4)); } ::slotted(*) { --lmvz-component-color: var(--lmvz-tab-color); } ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-dimension-16-18, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } :host([has-media]) ::slotted(lmvz-icon) { --lmvz-component-size: var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.44rem + 0.26vw, 1.75rem)); } .label { display: contents; } `;
10218
10330
 
10219
10331
  class LmvzTab {
10220
10332
  constructor(hostRef) {
@@ -10234,7 +10346,7 @@ class LmvzTab {
10234
10346
  this.el.dispatchEvent(new CustomEvent('lmvzTabReady', { bubbles: true, composed: false }));
10235
10347
  }
10236
10348
  render() {
10237
- return (hAsync(Host, { key: '029e9118ac6a5c886b4385684e6a499510821963' }, hAsync("button", { key: '4c4534d098e56a3576ffcecd4b5d84245ee561ae', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: '9975229f818c544a5d682773459e9c507911efd2', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: 'ec1543971f4be58200aec0109cbbc2942b18291f', class: "label" }, hAsync("slot", { key: '9a83be2812e15201b2bb6b1adc0c71de4df5c3be' })), hAsync("span", { key: '575f44d75a032bc66be87999e47e2897898b6bce', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
10349
+ return (hAsync(Host, { key: '642a74020dfe8e3f96ebbdf8067b1eba5c07bd15' }, hAsync("button", { key: 'b786b259aed2f2e1f61f3ef14959f564841b3761', part: "button", role: "tab", disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: 0 }, hAsync("slot", { key: 'e29265a24673c39397266ef21419cebdf9a05a2c', name: "media", ref: (el) => (this.mediaSlotEl = el), onSlotchange: this.handleMediaSlotChange }), hAsync("span", { key: 'c74ae843e36f85291e404955056ba1f34d0393e7', class: "label" }, hAsync("slot", { key: '0f13548f3ec10a126016bfc92aa93a4c21b86e0f' })), hAsync("span", { key: '2f969a70550975bffd1884a55b12fec733331b01', "aria-hidden": "true", part: "indicator", class: "indicator" }))));
10238
10350
  }
10239
10351
  static get delegatesFocus() { return true; }
10240
10352
  static get style() { return lmvzTabCss(); }
@@ -10253,7 +10365,7 @@ class LmvzTab {
10253
10365
  }; }
10254
10366
  }
10255
10367
 
10256
- const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } } :host { display: inline-block; } .tablist { display: inline-flex; flex-direction: row; background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: auto hidden; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } :host([has-icon-tabs]) .tablist { gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); background: none; border-radius: 0; } :host([orientation='vertical']) .tablist { flex-direction: column; overflow: visible auto; } ::slotted([role='tabpanel']) { display: block; } ::slotted([role='tabpanel'][hidden]) { display: none; } `;
10368
+ const lmvzTabsCss = () => ` @layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides; @layer lmvz-ds.reset { body { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } *[hidden] { display: none !important; } hr { height: 0; border: none; margin: var(--lmvz-dimension-4-8, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)) 0; border-top: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-subtle, #f0f0f0); } } :host { display: inline-block; } .tablist { display: inline-flex; flex-direction: row; background: var(--lmvz-semantic-color-int-secondary, #f0f0f0); border-radius: var(--lmvz-semantic-border-radius-round, 999px); overflow: auto hidden; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } :host([has-icon-tabs]) .tablist { gap: var(--lmvz-dimension-6-8, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem)); background: none; border-radius: 0; } :host([orientation='vertical']) .tablist { flex-direction: column; overflow: visible auto; } ::slotted([role='tabpanel']) { display: block; } ::slotted([role='tabpanel'][hidden]) { display: none; } `;
10257
10369
 
10258
10370
  let tabsIdCounter = 0;
10259
10371
  class LmvzTabs extends ReactiveControllerHost {
@@ -10488,7 +10600,7 @@ class LmvzTabs extends ReactiveControllerHost {
10488
10600
  this.selectTab(value);
10489
10601
  };
10490
10602
  render() {
10491
- return (hAsync(Host, { key: '80f6d4afd1263097082045b76cd408550b75342b', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: '01c3a160ef58be9b3db2bece29aadd68b482cf7d', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, hAsync("slot", { key: 'e685b913198f0649b3d2d33002f143ee133bff26', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '44543341ad8a536572f96d35f02f0455f8ca92dd', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: '6eaf6cd054947050b8f6d8ae8adbab9bd09a0e2f', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
10603
+ return (hAsync(Host, { key: '0247aeab4ec148274ab25c78a5444d14c1b70d89', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, hAsync("div", { key: 'aa8baa8e55f84ee0fa75ce02a172adebfe4fefcd', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, hAsync("slot", { key: 'b626f8dc73503c5013fa2e0a7623752eeb6f733f', ref: (el) => (this.tabSlotEl = el) })), hAsync("div", { key: '230e7cc4686d643e8562aa93db6b2a3e94fccb5f', part: "panels-container", class: "panels-container" }, hAsync("slot", { key: '713f88911b7cb14d3487d0945aac818b6727dee7', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
10492
10604
  }
10493
10605
  static get watchers() { return {
10494
10606
  "value": [{
@@ -10592,7 +10704,7 @@ class LmvzToggle extends ReactiveControllerHost {
10592
10704
  this.lmvzChange.emit(newChecked);
10593
10705
  };
10594
10706
  render() {
10595
- return (hAsync(Host, { key: '9d746374179fbaed3d3321c4c522574b7ff31eb3' }, hAsync("span", { key: 'bd5abbf7d15ab6588858a97b20daa9bad4d9fe1b', class: "track" }, hAsync("input", { key: 'c008a5f3642bdcf809c3d750e6333d0910804328', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: '2e48780cb75db4a244c08afacdfc07cd70a4da04', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '285570e98d7b8b3efc01e531ea015dc3563b0b28', htmlFor: this.toggleId }, this.label)));
10707
+ return (hAsync(Host, { key: '56c73859d7eeb40842744a29392598678268d7e8' }, hAsync("span", { key: '145915fb9d77976328c39c00e7ef73426220b3ca', class: "track" }, hAsync("input", { key: '4363e8e3a614ce18da19abc70257b82363b291da', type: "checkbox", role: "switch", id: this.toggleId, checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, form: this.form, ref: (el) => (this.nativeInputElement = el), onChange: this.handleChange }), hAsync("span", { key: '794ef6a50e8442dd1c460df7c42ffcf3009aab15', class: "thumb", "aria-hidden": "true" })), hAsync("label", { key: '9432dc73d637ea8dbeb5c3b3ff8d0941c662f707', htmlFor: this.toggleId }, this.label)));
10596
10708
  }
10597
10709
  static get formAssociated() { return true; }
10598
10710
  static get watchers() { return {
@@ -10629,6 +10741,7 @@ class LmvzToggle extends ReactiveControllerHost {
10629
10741
 
10630
10742
  registerComponents([
10631
10743
  LmvzAction,
10744
+ LmvzActionList,
10632
10745
  LmvzButton,
10633
10746
  LmvzButtonGroup,
10634
10747
  LmvzCard,