@scania/tegel 1.27.0 → 1.28.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 (205) hide show
  1. package/dist/cjs/index-ca8040ad.js +4 -4
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/tds-dropdown_2.cjs.entry.js +8 -8
  4. package/dist/cjs/tds-footer-group.cjs.entry.js +27 -5
  5. package/dist/cjs/tds-footer-item.cjs.entry.js +2 -2
  6. package/dist/cjs/tds-footer.cjs.entry.js +1 -1
  7. package/dist/cjs/tds-header-brand-symbol.cjs.entry.js +6 -2
  8. package/dist/cjs/tds-header-dropdown.cjs.entry.js +26 -3
  9. package/dist/cjs/tds-header-hamburger.cjs.entry.js +7 -1
  10. package/dist/cjs/tds-header-launcher-button.cjs.entry.js +2 -1
  11. package/dist/cjs/tds-header-launcher.cjs.entry.js +23 -2
  12. package/dist/cjs/tds-icon.cjs.entry.js +3 -2
  13. package/dist/cjs/tds-inline-tabs.cjs.entry.js +1 -1
  14. package/dist/cjs/tds-modal.cjs.entry.js +75 -3
  15. package/dist/cjs/tds-navigation-tabs.cjs.entry.js +1 -1
  16. package/dist/cjs/tds-popover-canvas.cjs.entry.js +3 -2
  17. package/dist/cjs/tds-popover-core.cjs.entry.js +55 -11
  18. package/dist/cjs/tds-popover-menu-item.cjs.entry.js +2 -2
  19. package/dist/cjs/tds-popover-menu.cjs.entry.js +1 -1
  20. package/dist/cjs/tds-radio-button.cjs.entry.js +3 -1
  21. package/dist/cjs/tds-spinner.cjs.entry.js +1 -1
  22. package/dist/cjs/tds-step.cjs.entry.js +2 -1
  23. package/dist/cjs/tds-stepper.cjs.entry.js +2 -1
  24. package/dist/cjs/tds-text-field.cjs.entry.js +31 -16
  25. package/dist/cjs/tds-textarea.cjs.entry.js +27 -9
  26. package/dist/cjs/tds-toast.cjs.entry.js +10 -3
  27. package/dist/cjs/tds-toggle.cjs.entry.js +2 -2
  28. package/dist/cjs/tds-tooltip.cjs.entry.js +2 -2
  29. package/dist/cjs/tegel.cjs.js +1 -1
  30. package/dist/collection/components/dropdown/dropdown.js +8 -8
  31. package/dist/collection/components/footer/footer-group/footer-group.css +23 -21
  32. package/dist/collection/components/footer/footer-group/footer-group.js +55 -5
  33. package/dist/collection/components/footer/footer-item/footer-item.css +17 -17
  34. package/dist/collection/components/footer/footer-item/footer-item.js +2 -2
  35. package/dist/collection/components/footer/footer.css +1 -1
  36. package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.css +1 -1
  37. package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.js +6 -2
  38. package/dist/collection/components/header/header-dropdown/header-dropdown.js +49 -3
  39. package/dist/collection/components/header/header-hamburger/header-hamburger.js +30 -1
  40. package/dist/collection/components/header/header-launcher/header-launcher.js +50 -2
  41. package/dist/collection/components/header/header-launcher-button/header-launcher-button.js +19 -1
  42. package/dist/collection/components/icon/icon.js +21 -2
  43. package/dist/collection/components/modal/modal.css +48 -43
  44. package/dist/collection/components/modal/modal.js +103 -3
  45. package/dist/collection/components/popover-canvas/popover-canvas.js +21 -2
  46. package/dist/collection/components/popover-core/popover-core.js +63 -10
  47. package/dist/collection/components/popover-core/tds-popover-core.css +123 -66
  48. package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.js +2 -2
  49. package/dist/collection/components/popover-menu/popover-menu.js +1 -1
  50. package/dist/collection/components/radio-button/radio-button.js +37 -1
  51. package/dist/collection/components/spinner/spinner.css +62 -39
  52. package/dist/collection/components/stepper/step/step.js +19 -1
  53. package/dist/collection/components/stepper/stepper.js +20 -1
  54. package/dist/collection/components/tabs/inline-tabs/inline-tabs.css +0 -1
  55. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +2 -3
  56. package/dist/collection/components/text-field/text-field.css +21 -9
  57. package/dist/collection/components/text-field/text-field.js +48 -15
  58. package/dist/collection/components/textarea/textarea.css +11 -6
  59. package/dist/collection/components/textarea/textarea.js +61 -8
  60. package/dist/collection/components/toast/toast.js +45 -3
  61. package/dist/collection/components/toggle/toggle.js +2 -2
  62. package/dist/collection/components/tooltip/tooltip.js +2 -2
  63. package/dist/components/{p-2d93a742.js → p-1c606f82.js} +1 -1
  64. package/dist/components/p-252f3d4d.js +2098 -0
  65. package/dist/components/p-3dcfe1f4.js +115 -0
  66. package/dist/components/{p-53e4cdcf.js → p-789bb453.js} +5 -3
  67. package/dist/components/{p-4487c541.js → p-92fb75a7.js} +4 -2
  68. package/dist/components/{p-663b8e51.js → p-c0b84c59.js} +9 -9
  69. package/dist/components/{p-83db8b35.js → p-f8a36676.js} +5 -3
  70. package/dist/components/tds-accordion-item.js +1 -1
  71. package/dist/components/tds-banner.js +1 -1
  72. package/dist/components/tds-datetime.js +1 -1
  73. package/dist/components/tds-dropdown-option.js +1 -1
  74. package/dist/components/tds-dropdown.js +1 -1
  75. package/dist/components/tds-folder-tabs.js +1 -1
  76. package/dist/components/tds-footer-group.js +32 -8
  77. package/dist/components/tds-footer-item.js +3 -3
  78. package/dist/components/tds-footer.js +1 -1
  79. package/dist/components/tds-header-brand-symbol.js +6 -2
  80. package/dist/components/tds-header-cell.js +1 -1
  81. package/dist/components/tds-header-dropdown.js +31 -7
  82. package/dist/components/tds-header-hamburger.js +11 -3
  83. package/dist/components/tds-header-launcher-button.js +1 -1
  84. package/dist/components/tds-header-launcher.js +29 -7
  85. package/dist/components/tds-icon.js +1 -1
  86. package/dist/components/tds-inline-tabs.js +2 -2
  87. package/dist/components/tds-message.js +1 -1
  88. package/dist/components/tds-modal.js +79 -5
  89. package/dist/components/tds-navigation-tabs.js +2 -2
  90. package/dist/components/tds-popover-canvas.js +1 -1
  91. package/dist/components/tds-popover-core.js +1 -1
  92. package/dist/components/tds-popover-menu-item.js +2 -2
  93. package/dist/components/tds-popover-menu.js +2 -2
  94. package/dist/components/tds-radio-button.js +6 -2
  95. package/dist/components/tds-side-menu-close-button.js +1 -1
  96. package/dist/components/tds-side-menu-dropdown.js +1 -1
  97. package/dist/components/tds-slider.js +1 -1
  98. package/dist/components/tds-spinner.js +1 -1
  99. package/dist/components/tds-step.js +4 -2
  100. package/dist/components/tds-stepper.js +4 -2
  101. package/dist/components/tds-table-body-input-wrapper.js +1 -1
  102. package/dist/components/tds-table-footer.js +3 -3
  103. package/dist/components/tds-table-header-input-wrapper.js +1 -1
  104. package/dist/components/tds-table-toolbar.js +1 -1
  105. package/dist/components/tds-text-field.js +33 -17
  106. package/dist/components/tds-textarea.js +43 -11
  107. package/dist/components/tds-toast.js +13 -4
  108. package/dist/components/tds-toggle.js +2 -2
  109. package/dist/components/tds-tooltip.js +1 -113
  110. package/dist/esm/index-51d04e39.js +4 -4
  111. package/dist/esm/loader.js +1 -1
  112. package/dist/esm/tds-dropdown_2.entry.js +8 -8
  113. package/dist/esm/tds-footer-group.entry.js +27 -5
  114. package/dist/esm/tds-footer-item.entry.js +3 -3
  115. package/dist/esm/tds-footer.entry.js +1 -1
  116. package/dist/esm/tds-header-brand-symbol.entry.js +6 -2
  117. package/dist/esm/tds-header-dropdown.entry.js +26 -3
  118. package/dist/esm/tds-header-hamburger.entry.js +7 -1
  119. package/dist/esm/tds-header-launcher-button.entry.js +2 -1
  120. package/dist/esm/tds-header-launcher.entry.js +23 -2
  121. package/dist/esm/tds-icon.entry.js +3 -2
  122. package/dist/esm/tds-inline-tabs.entry.js +1 -1
  123. package/dist/esm/tds-modal.entry.js +75 -3
  124. package/dist/esm/tds-navigation-tabs.entry.js +1 -1
  125. package/dist/esm/tds-popover-canvas.entry.js +3 -2
  126. package/dist/esm/tds-popover-core.entry.js +55 -11
  127. package/dist/esm/tds-popover-menu-item.entry.js +2 -2
  128. package/dist/esm/tds-popover-menu.entry.js +1 -1
  129. package/dist/esm/tds-radio-button.entry.js +3 -1
  130. package/dist/esm/tds-spinner.entry.js +1 -1
  131. package/dist/esm/tds-step.entry.js +2 -1
  132. package/dist/esm/tds-stepper.entry.js +2 -1
  133. package/dist/esm/tds-text-field.entry.js +31 -16
  134. package/dist/esm/tds-textarea.entry.js +27 -9
  135. package/dist/esm/tds-toast.entry.js +10 -3
  136. package/dist/esm/tds-toggle.entry.js +2 -2
  137. package/dist/esm/tds-tooltip.entry.js +2 -2
  138. package/dist/esm/tegel.js +1 -1
  139. package/dist/tegel/p-033d991e.entry.js +1 -0
  140. package/dist/tegel/p-24db6b5b.entry.js +1 -0
  141. package/dist/tegel/p-27a4a7d0.entry.js +1 -0
  142. package/dist/tegel/p-28cf7204.entry.js +1 -0
  143. package/dist/tegel/p-302fea99.entry.js +1 -0
  144. package/dist/tegel/p-31bc440c.entry.js +1 -0
  145. package/dist/tegel/p-3e9ca19a.entry.js +1 -0
  146. package/dist/tegel/p-44ac6a20.entry.js +1 -0
  147. package/dist/tegel/{p-769d0503.entry.js → p-46205cfb.entry.js} +1 -1
  148. package/dist/tegel/p-54a20280.entry.js +1 -0
  149. package/dist/tegel/p-5a3ff0d3.entry.js +1 -0
  150. package/dist/tegel/p-660176d6.entry.js +1 -0
  151. package/dist/tegel/{p-eaa279dd.entry.js → p-81111221.entry.js} +1 -1
  152. package/dist/tegel/{p-668b7662.entry.js → p-8d7bf652.entry.js} +1 -1
  153. package/dist/tegel/p-b58f68f0.entry.js +1 -0
  154. package/dist/tegel/{p-5ba254ee.entry.js → p-c10be10e.entry.js} +1 -1
  155. package/dist/tegel/p-c71acb02.entry.js +1 -0
  156. package/dist/tegel/p-ceab8f75.entry.js +1 -0
  157. package/dist/tegel/p-e1abd593.entry.js +1 -0
  158. package/dist/tegel/p-e3c3bdac.entry.js +1 -0
  159. package/dist/tegel/p-e46744bc.entry.js +1 -0
  160. package/dist/tegel/p-ea9e7345.entry.js +1 -0
  161. package/dist/tegel/{p-97f10223.entry.js → p-eec22b6b.entry.js} +1 -1
  162. package/dist/tegel/p-f034fc0c.entry.js +1 -0
  163. package/dist/tegel/p-fa342278.entry.js +1 -0
  164. package/dist/tegel/{p-b9f81e53.entry.js → p-fc6196c4.entry.js} +1 -1
  165. package/dist/tegel/tegel.css +4 -4
  166. package/dist/tegel/tegel.esm.js +1 -1
  167. package/dist/types/components/footer/footer-group/footer-group.d.ts +7 -0
  168. package/dist/types/components/header/header-brand-symbol/header-brand-symbol.d.ts +1 -1
  169. package/dist/types/components/header/header-dropdown/header-dropdown.d.ts +4 -0
  170. package/dist/types/components/header/header-hamburger/header-hamburger.d.ts +3 -0
  171. package/dist/types/components/header/header-launcher/header-launcher.d.ts +4 -0
  172. package/dist/types/components/header/header-launcher-button/header-launcher-button.d.ts +2 -0
  173. package/dist/types/components/icon/icon.d.ts +2 -0
  174. package/dist/types/components/modal/modal.d.ts +6 -0
  175. package/dist/types/components/popover-canvas/popover-canvas.d.ts +2 -0
  176. package/dist/types/components/popover-core/popover-core.d.ts +4 -0
  177. package/dist/types/components/radio-button/radio-button.d.ts +4 -0
  178. package/dist/types/components/stepper/step/step.d.ts +1 -0
  179. package/dist/types/components/stepper/stepper.d.ts +2 -0
  180. package/dist/types/components/text-field/text-field.d.ts +6 -4
  181. package/dist/types/components/textarea/textarea.d.ts +10 -4
  182. package/dist/types/components/toast/toast.d.ts +5 -0
  183. package/dist/types/components.d.ts +130 -0
  184. package/package.json +1 -1
  185. package/dist/components/p-90dbeab3.js +0 -2052
  186. package/dist/tegel/p-035e58e6.entry.js +0 -1
  187. package/dist/tegel/p-22c592eb.entry.js +0 -1
  188. package/dist/tegel/p-288a09ef.entry.js +0 -1
  189. package/dist/tegel/p-4f5f152a.entry.js +0 -1
  190. package/dist/tegel/p-542d7b3e.entry.js +0 -1
  191. package/dist/tegel/p-5a7110b8.entry.js +0 -1
  192. package/dist/tegel/p-5db5c8f4.entry.js +0 -1
  193. package/dist/tegel/p-654785d2.entry.js +0 -1
  194. package/dist/tegel/p-66f394a2.entry.js +0 -1
  195. package/dist/tegel/p-727f873f.entry.js +0 -1
  196. package/dist/tegel/p-746e2927.entry.js +0 -1
  197. package/dist/tegel/p-754a4921.entry.js +0 -1
  198. package/dist/tegel/p-aef6b130.entry.js +0 -1
  199. package/dist/tegel/p-b114ec3d.entry.js +0 -1
  200. package/dist/tegel/p-b39ffad4.entry.js +0 -1
  201. package/dist/tegel/p-b686f1ad.entry.js +0 -1
  202. package/dist/tegel/p-c56be8d1.entry.js +0 -1
  203. package/dist/tegel/p-dfbbaefd.entry.js +0 -1
  204. package/dist/tegel/p-ea3e071f.entry.js +0 -1
  205. package/dist/tegel/p-ee7f07ae.entry.js +0 -1
@@ -1,10 +1,11 @@
1
1
  import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
2
2
  import { g as generateUniqueId } from './p-11648030.js';
3
+ import { h as hasSlot } from './p-ae110fc2.js';
3
4
  import { d as defineCustomElement$6 } from './p-e49a0ceb.js';
4
5
  import { d as defineCustomElement$5 } from './p-d61bd22e.js';
5
- import { d as defineCustomElement$4 } from './p-4487c541.js';
6
- import { d as defineCustomElement$3 } from './p-53e4cdcf.js';
7
- import { d as defineCustomElement$2 } from './p-90dbeab3.js';
6
+ import { d as defineCustomElement$4 } from './p-92fb75a7.js';
7
+ import { d as defineCustomElement$3 } from './p-789bb453.js';
8
+ import { d as defineCustomElement$2 } from './p-252f3d4d.js';
8
9
 
9
10
  const headerDropdownCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .state-open .dropdown-icon{transform:rotate(180deg)}:host .state-open .button{position:relative;z-index:901}";
10
11
  const TdsHeaderDropdownStyle0 = headerDropdownCss;
@@ -24,6 +25,7 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
24
25
  this.label = undefined;
25
26
  this.noDropdownIcon = false;
26
27
  this.selected = false;
28
+ this.tdsAriaLabel = undefined;
27
29
  this.open = false;
28
30
  this.buttonEl = undefined;
29
31
  }
@@ -34,17 +36,38 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
34
36
  this.open = false;
35
37
  }
36
38
  }
39
+ handleKeyDown(event) {
40
+ if (event.key === 'Escape' && this.open) {
41
+ this.open = false;
42
+ this.buttonEl.focus();
43
+ }
44
+ }
37
45
  toggleDropdown() {
38
46
  this.open = !this.open;
47
+ if (this.open) {
48
+ requestAnimationFrame(() => {
49
+ const selectors = "a, [tabindex='0']";
50
+ const firstFocusableElement = this.host.shadowRoot.querySelector(selectors) || this.host.querySelector(selectors);
51
+ if (firstFocusableElement instanceof H) {
52
+ firstFocusableElement.focus();
53
+ }
54
+ });
55
+ }
56
+ }
57
+ connectedCallback() {
58
+ const hasLabelSlot = hasSlot('label', this.host);
59
+ if (!this.tdsAriaLabel && !hasLabelSlot) {
60
+ console.warn('Tegel Header Dropdown component: use label slot or specify tdsAriaLabel prop');
61
+ }
39
62
  }
40
63
  render() {
41
- return (h(Host, { key: '1b3cd2ffee7d6543e98bab5cc3d1953770110ce8' }, h("div", { key: '23f60d4d56e08725985f71f5952b324f5044f53b', class: {
64
+ return (h(Host, { key: '1bbf8ce73b5f0067b2ffe8d634ba0a3efd6f4fdb' }, h("div", { key: 'd2c548b3989a81a74c2b2985bae4a0afb10bbe06', class: {
42
65
  'state-open': this.open,
43
- } }, h("tds-header-item", { key: '0297ccda2dbf13709443e4b548687e2f648f0bcf', class: "button", active: this.open, selected: this.selected }, h("button", { key: '6f9ea91a3270ea6eeb29a79571567ae8abef001d', ref: (el) => {
66
+ } }, h("tds-header-item", { key: '2300d57edbebbc66ed1b27a60a9fcb235ddb4b88', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'da6f8271968491b092b18bc835b815e1796af935', ref: (el) => {
44
67
  this.buttonEl = el;
45
68
  }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
46
69
  this.toggleDropdown();
47
- } }, h("slot", { key: 'dcc2a8a717706ee3287499805bc32c98b0b29770', name: "icon" }), this.label, h("slot", { key: 'bad14e728dfe465e59a8e98a4ea5a858fc066bb3', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '9963966ab41666db7ba8b75089a46b132b8db6dd', class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { key: 'cb7b4fb085a94e6243ad6c70144e5b3c6460d27e', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
70
+ }, "aria-label": this.tdsAriaLabel }, h("slot", { key: 'a9c1c657944cdbd826672e53ffce819df1b261de', name: "icon" }), this.label, h("slot", { key: 'a47173535a91f2a5b94060b6745b7ff60e380b19', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '4e2d7e29d2775ef65b636faf0eb16739575f0bed', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '67ec32703a4fe306ac8b1a5b3e7ed4d48c257161', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
48
71
  {
49
72
  name: 'flip',
50
73
  options: {
@@ -59,9 +82,10 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
59
82
  "label": [1],
60
83
  "noDropdownIcon": [4, "no-dropdown-icon"],
61
84
  "selected": [4],
85
+ "tdsAriaLabel": [1, "tds-aria-label"],
62
86
  "open": [32],
63
87
  "buttonEl": [32]
64
- }, [[4, "click", "onAnyClick"]]]);
88
+ }, [[4, "click", "onAnyClick"], [8, "keydown", "handleKeyDown"]]]);
65
89
  function defineCustomElement$1() {
66
90
  if (typeof customElements === "undefined") {
67
91
  return;
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
2
2
  import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
3
3
  import { d as defineCustomElement$4 } from './p-e49a0ceb.js';
4
4
  import { d as defineCustomElement$3 } from './p-d61bd22e.js';
5
- import { d as defineCustomElement$2 } from './p-4487c541.js';
5
+ import { d as defineCustomElement$2 } from './p-92fb75a7.js';
6
6
 
7
7
  const headerHamburgerCss = ":host{color:var(--tds-white)}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:background 0.2s ease-in-out, color 0.2s ease-in-out}@media screen and (min-width: 992px){:host tds-header-item{display:none}:host([persistent]) tds-header-item{display:block}}";
8
8
  const TdsHeaderHamburgerStyle0 = headerHamburgerCss;
@@ -12,14 +12,22 @@ const TdsHeaderHamburger$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderHam
12
12
  super();
13
13
  this.__registerHost();
14
14
  this.__attachShadow();
15
+ this.tdsAriaLabel = undefined;
16
+ }
17
+ connectedCallback() {
18
+ if (!this.tdsAriaLabel) {
19
+ console.warn('Tegel Header Hamburger component: missing tdsAriaLabel prop');
20
+ }
15
21
  }
16
22
  render() {
17
23
  const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
18
- return (h(Host, { key: 'f2f230c8349ca3b5fdcfd7de67555b12888bd9d9' }, h("tds-header-item", { key: '7db87ae4ad59bea1040399a33fdf77aa490ae1ca' }, h("button", Object.assign({ key: 'bf5e3103c23c02e42db7e99a423348efb4488ed7' }, inheritedButtonProps), h("tds-icon", { key: '306b78525304ac2f30a4bcb0be37c0ed7998b01f', class: "icon", name: "burger", size: "20px" })))));
24
+ return (h(Host, { key: '774d1727624bfe4f8606d2efea75236532f2e9b2' }, h("tds-header-item", { key: '70cbf14a6b7ea638465d56780780ef3e9b5e0f4e' }, h("button", Object.assign({ key: 'af50f354dca1b518b13216ae0ce6cc85488f7df3' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '7978cd71ad41001dee4dbdb12894e22e716f3164', class: "icon", name: "burger", size: "20px" })))));
19
25
  }
20
26
  get host() { return this; }
21
27
  static get style() { return TdsHeaderHamburgerStyle0; }
22
- }, [1, "tds-header-hamburger"]);
28
+ }, [1, "tds-header-hamburger", {
29
+ "tdsAriaLabel": [1, "tds-aria-label"]
30
+ }]);
23
31
  function defineCustomElement$1() {
24
32
  if (typeof customElements === "undefined") {
25
33
  return;
@@ -1,4 +1,4 @@
1
- import { T as TdsHeaderLauncherButton$1, d as defineCustomElement$1 } from './p-83db8b35.js';
1
+ import { T as TdsHeaderLauncherButton$1, d as defineCustomElement$1 } from './p-f8a36676.js';
2
2
 
3
3
  const TdsHeaderLauncherButton = TdsHeaderLauncherButton$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -3,10 +3,10 @@ import { g as generateUniqueId } from './p-11648030.js';
3
3
  import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
4
4
  import { d as defineCustomElement$7 } from './p-e49a0ceb.js';
5
5
  import { d as defineCustomElement$6 } from './p-d61bd22e.js';
6
- import { d as defineCustomElement$5 } from './p-83db8b35.js';
7
- import { d as defineCustomElement$4 } from './p-4487c541.js';
8
- import { d as defineCustomElement$3 } from './p-53e4cdcf.js';
9
- import { d as defineCustomElement$2 } from './p-90dbeab3.js';
6
+ import { d as defineCustomElement$5 } from './p-f8a36676.js';
7
+ import { d as defineCustomElement$4 } from './p-92fb75a7.js';
8
+ import { d as defineCustomElement$3 } from './p-789bb453.js';
9
+ import { d as defineCustomElement$2 } from './p-252f3d4d.js';
10
10
 
11
11
  const headerLauncherCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-radius:0}:host .wrapper .menu:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .wrapper .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .wrapper .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:901}";
12
12
  const TdsHeaderLauncherStyle0 = headerLauncherCss;
@@ -20,6 +20,7 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
20
20
  this.open = false;
21
21
  this.buttonEl = undefined;
22
22
  this.hasListTypeMenu = false;
23
+ this.tdsAriaLabel = undefined;
23
24
  }
24
25
  onAnyClick(event) {
25
26
  // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -28,12 +29,32 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
28
29
  this.open = false;
29
30
  }
30
31
  }
32
+ handleKeyDown(event) {
33
+ if (event.key === 'Escape' && this.open) {
34
+ this.open = false;
35
+ this.buttonEl.shadowRoot.querySelector('button').focus();
36
+ }
37
+ }
31
38
  componentDidLoad() {
32
39
  const hasListTypeMenu = !!this.host.querySelector('tds-header-launcher-list');
33
40
  this.hasListTypeMenu = hasListTypeMenu;
34
41
  }
35
42
  toggleLauncher() {
36
43
  this.open = !this.open;
44
+ if (this.open) {
45
+ requestAnimationFrame(() => {
46
+ const selectors = "a, [tabindex='0']";
47
+ const firstFocusableElement = this.host.shadowRoot.querySelector(selectors) || this.host.querySelector(selectors);
48
+ if (firstFocusableElement instanceof H) {
49
+ firstFocusableElement.focus();
50
+ }
51
+ });
52
+ }
53
+ }
54
+ connectedCallback() {
55
+ if (!this.tdsAriaLabel) {
56
+ console.warn('Tegel Header Launcher component: missing tdsAriaLabel prop');
57
+ }
37
58
  }
38
59
  render() {
39
60
  this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host, ['role']));
@@ -42,11 +63,11 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
42
63
  }, 'ref': (el) => {
43
64
  this.buttonEl = el;
44
65
  } });
45
- return (h(Host, { key: 'd886168b8834ced8a2705b30b9982726dc72f8b6' }, h("div", { key: '0c4b9b27e82cf91c000619ef8d0593f8b664b605', class: {
66
+ return (h(Host, { key: '3a0100f1429a1e09a5745c6b74835bddb6ba5157' }, h("div", { key: '50220e92372ac5496a4b589441e4920375169e79', class: {
46
67
  'wrapper': true,
47
68
  'state-open': this.open,
48
69
  'state-list-type-menu': this.hasListTypeMenu,
49
- } }, h("tds-header-launcher-button", Object.assign({ key: 'd0ff7205bf79ef4744d65dcf98734aff5520b004' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { key: 'c337c31282b08c5add95b16271bdfc147fd16c5c', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
70
+ } }, h("tds-header-launcher-button", Object.assign({ key: 'd58c3ba5f08809487eeca1e6ce8a31879f0c52d9' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: '4806b02e07aef32a640eedc1f0f76285950ec384', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
50
71
  {
51
72
  name: 'flip',
52
73
  options: {
@@ -58,10 +79,11 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
58
79
  get host() { return this; }
59
80
  static get style() { return TdsHeaderLauncherStyle0; }
60
81
  }, [1, "tds-header-launcher", {
82
+ "tdsAriaLabel": [1, "tds-aria-label"],
61
83
  "open": [32],
62
84
  "buttonEl": [32],
63
85
  "hasListTypeMenu": [32]
64
- }, [[8, "click", "onAnyClick"]]]);
86
+ }, [[8, "click", "onAnyClick"], [8, "keydown", "handleKeyDown"]]]);
65
87
  function defineCustomElement$1() {
66
88
  if (typeof customElements === "undefined") {
67
89
  return;
@@ -1,4 +1,4 @@
1
- import { I as Icon, d as defineCustomElement$1 } from './p-4487c541.js';
1
+ import { I as Icon, d as defineCustomElement$1 } from './p-92fb75a7.js';
2
2
 
3
3
  const TdsIcon = Icon;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,7 +1,7 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
2
- import { d as defineCustomElement$2 } from './p-4487c541.js';
2
+ import { d as defineCustomElement$2 } from './p-92fb75a7.js';
3
3
 
4
- const inlineTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);opacity:var(--tds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
4
+ const inlineTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
5
5
  const TdsInlineTabsStyle0 = inlineTabsCss;
6
6
 
7
7
  const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs extends H {
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
2
2
  import { g as generateUniqueId } from './p-11648030.js';
3
- import { d as defineCustomElement$2 } from './p-4487c541.js';
3
+ import { d as defineCustomElement$2 } from './p-92fb75a7.js';
4
4
 
5
5
  const messageCss = ":host{--tds-message-background:var(--background-elevation-layer-03);}:host .tds-mode-variant-primary{--tds-message-background:var(--background-elevation-layer-03)}:host .tds-mode-variant-secondary{--tds-message-background:var(--background-elevation-layer-02)}:host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--system-info-default)}:host .wrapper.information tds-icon{color:var(--system-info-default)}:host .wrapper.success{border-left:4px solid var(--system-success-default)}:host .wrapper.success tds-icon{color:var(--system-success-default)}:host .wrapper.error{background-color:var(--system-danger-subtle);border-left:4px solid var(--system-danger-default)}:host .wrapper.error tds-icon{color:var(--system-danger-default)}:host .wrapper.warning{border-left:4px solid var(--system-warning-default)}:host .wrapper.warning tds-icon{color:var(--system-warning-default)}:host .wrapper.minimal{border:none;padding:0;background-color:transparent}:host .wrapper.minimal .header{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}:host .wrapper.minimal.error .header{color:var(--system-danger-default)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--foreground-text-strong);padding:2px 0}:host .content .header{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform)}:host .content .extended-message{color:var(--foreground-text-strong);font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform)}";
6
6
  const TdsMessageStyle0 = messageCss;
@@ -1,8 +1,9 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
2
2
  import { h as hasSlot } from './p-ae110fc2.js';
3
- import { d as defineCustomElement$2 } from './p-4487c541.js';
3
+ import { g as generateUniqueId } from './p-11648030.js';
4
+ import { d as defineCustomElement$2 } from './p-92fb75a7.js';
4
5
 
5
- const modalCss = ".tds-modal{box-sizing:border-box;background-color:var(--tds-modal-background);margin:auto;position:relative;border-radius:4px;max-height:85vh;overflow-y:auto;pointer-events:auto;}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-track{background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500);border-radius:0 1em 1em 0}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--tds-modal-background);padding:var(--tds-spacing-element-24) var(--tds-spacing-element-16) var(--tds-spacing-element-16);display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--tds-modal-background);display:flex;gap:16px;padding:24px 16px 16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding:var(--tds-spacing-element-16);position:sticky;top:0;background-color:var(--tds-modal-background);z-index:1}.header,slot[name=header]::slotted(*){color:var(--tds-modal-text);font:var(--tds-headline-05) !important;letter-spacing:var(--tds-headline-05-ls) !important;margin:0;flex:1}.body{color:var(--tds-modal-text);font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);overflow-y:visible;padding:0 var(--tds-spacing-element-16) var(--tds-spacing-element-16);}.body::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-track{background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500)}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--tds-modal-icon);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn svg{fill:var(--tds-modal-icon)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
6
+ const modalCss = ".tds-modal{box-sizing:border-box;background-color:var(--background-elevation-layer-02);margin:auto;position:relative;border-radius:var(--radius-narrow);max-height:85vh;overflow-y:auto;pointer-events:auto}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:6px;background-color:transparent}.tds-modal::-webkit-scrollbar-track{background-color:transparent}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--foreground-elements-transparparent-discrete);border-radius:3px}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--background-elevation-layer-02);padding:24px 16px 16px;display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--background-elevation-layer-02);display:flex;gap:16px;padding:24px 16px 16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding:16px;position:sticky;top:0;background-color:var(--background-elevation-layer-02);z-index:1}.header,slot[name=header]::slotted(*){font-family:var(--headline-05-font-family);font-size:var(--headline-05-font-size);line-height:var(--headline-05-line-height);font-weight:var(--headline-05-font-weight);letter-spacing:var(--headline-05-letter-spacing);text-transform:var(--headline-05-text-transform);color:var(--foreground-text-strong);margin:0;flex:1}.body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);color:var(--foreground-text-strong);overflow-y:visible;padding:0 16px 16px}.body::-webkit-scrollbar{width:6px;background-color:transparent}.body::-webkit-scrollbar-track{background-color:transparent}.body::-webkit-scrollbar-thumb{background-color:var(--foreground-elements-transparparent-discrete);border-radius:3px}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--background-elevation-scrim);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--foreground-text-strong);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close{margin-left:48px}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:48px}}.tds-modal-close-btn svg{fill:var(--foreground-text-strong)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
6
7
  const TdsModalStyle0 = modalCss;
7
8
 
8
9
  const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
@@ -13,6 +14,7 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
13
14
  this.tdsClose = createEvent(this, "tdsClose", 7);
14
15
  this.handleClose = (event) => {
15
16
  const closeEvent = this.tdsClose.emit(event);
17
+ this.returnFocusOnClose();
16
18
  if (!closeEvent.defaultPrevented) {
17
19
  this.isShown = false;
18
20
  }
@@ -61,15 +63,26 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
61
63
  this.referenceEl = undefined;
62
64
  this.show = undefined;
63
65
  this.closable = true;
66
+ this.tdsAlertDialog = 'dialog';
64
67
  this.isShown = false;
68
+ this.activeElementIndex = 0;
65
69
  }
66
70
  /** Shows the Modal. */
67
71
  async showModal() {
68
72
  this.isShown = true;
73
+ // Set focus on first element when opened
74
+ requestAnimationFrame(() => {
75
+ const focusableElements = this.getFocusableElements();
76
+ if (focusableElements.length > 0) {
77
+ focusableElements[0].focus();
78
+ this.activeElementIndex = 0;
79
+ }
80
+ });
69
81
  }
70
82
  /** Closes the Modal. */
71
83
  async closeModal() {
72
84
  this.isShown = false;
85
+ this.returnFocusOnClose();
73
86
  }
74
87
  connectedCallback() {
75
88
  if (this.closable === undefined) {
@@ -107,6 +120,63 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
107
120
  dismissButton.removeEventListener('click', this.handleClose);
108
121
  });
109
122
  }
123
+ returnFocusOnClose() {
124
+ var _a;
125
+ let referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
126
+ const potentialReferenceElements = ['BUTTON', 'A', 'INPUT'];
127
+ // If referenced element is a custom element eg: tds-button we find the interactive element inside
128
+ if (potentialReferenceElements.indexOf(referenceEl.tagName) < 0) {
129
+ referenceEl = referenceEl.querySelectorAll(potentialReferenceElements.join(','))[0];
130
+ }
131
+ referenceEl.focus();
132
+ }
133
+ getFocusableElements() {
134
+ const focusableSelectors = [
135
+ 'a[href]',
136
+ 'button:not([disabled])',
137
+ 'textarea:not([disabled])',
138
+ 'input:not([disabled])',
139
+ 'select:not([disabled])',
140
+ '[tabindex]:not([tabindex="-1"])',
141
+ ].join(',');
142
+ const focusableInShadowRoot = Array.from(this.host.shadowRoot.querySelectorAll(focusableSelectors));
143
+ const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
144
+ /** Focusable elements */
145
+ return [...focusableInShadowRoot, ...focusableInSlots];
146
+ }
147
+ handleFocusTrap(event) {
148
+ if (event.key === 'Escape' && this.isShown && !this.prevent) {
149
+ this.handleClose(event);
150
+ return;
151
+ }
152
+ // Only trap focus if the modal is open
153
+ if (!this.isShown)
154
+ return;
155
+ // We care only about the Tab key
156
+ if (event.key !== 'Tab')
157
+ return;
158
+ const focusableElements = this.getFocusableElements();
159
+ // If there are no focusable elements
160
+ if (focusableElements.length === 0)
161
+ return;
162
+ event.preventDefault();
163
+ // Going backwards (Shift + Tab) on the first element => move to last
164
+ if (event.shiftKey) {
165
+ this.activeElementIndex -= 1;
166
+ if (this.activeElementIndex === -1) {
167
+ this.activeElementIndex = focusableElements.length - 1;
168
+ }
169
+ }
170
+ // // Going forwards (Tab) on the last element => move to first
171
+ if (!event.shiftKey) {
172
+ this.activeElementIndex += 1;
173
+ if (this.activeElementIndex === focusableElements.length) {
174
+ this.activeElementIndex = 0;
175
+ }
176
+ }
177
+ const nextElement = focusableElements[this.activeElementIndex];
178
+ nextElement.focus();
179
+ }
110
180
  /** Adds an event listener to the dismiss buttons that closes the Modal. */
111
181
  setDismissButtons() {
112
182
  this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
@@ -116,10 +186,12 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
116
186
  render() {
117
187
  const usesHeaderSlot = hasSlot('header', this.host);
118
188
  const usesActionsSlot = hasSlot('actions', this.host);
119
- return (h(Host, { key: '3b815395be0ccab91eebda3ca785528de624d17e', class: {
189
+ const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
190
+ const bodyId = `tds-modal-body-${generateUniqueId()}`;
191
+ return (h(Host, { key: '398809ea45126dd70b95422f2f7a08a481a22d53', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
120
192
  show: this.isShown,
121
193
  hide: !this.isShown,
122
- }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '84c9952f862e5defe06c04040e7031e08c5caca3', class: "tds-modal-backdrop" }), h("div", { key: '42b3ea985203a582b3a3dee5250b4a4468a23d6f', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '06e005618aeab759c01f7d556cc4357f0aed0e1d', class: "header" }, this.header && h("div", { key: 'bff8080a479c4ecef96eae35dc0f33cc3fadaa8c', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: 'dbec4b999fcda87c5c751a8cf3eb7b9f66e1ec43', name: "header" }), this.closable && (h("button", { key: 'bfbfe0d3419aa5e2a5fcbab7691560ed5619dd05', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '3bcd38d4234a689acd63bb82e21b270c2b0825f9', name: "cross", size: "20px" })))), h("div", { key: '2fc5756d3261dfa354ce3025dc9d8ff213c49ba1', class: "body" }, h("slot", { key: '389ac6e307873c9de7c36c0960ce578cdfaf88e4', name: "body" })), usesActionsSlot && h("slot", { key: 'c964f9d3999f26995543187c553adcc9ac392f2a', name: "actions" }))));
194
+ }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '96e964cc4f3c6d9613fb53e340e0aa5dcd8b6d81', class: "tds-modal-backdrop" }), h("div", { key: 'af7ddc896ef35b6116ae70524d10c4b7b952e20a', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '9dfcf95fcc8925cd5c97f10f29edc6cef183a0ca', id: headerId, class: "header" }, this.header && h("div", { key: '42533c25b07e696a0c61504556150018f8d3583a', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: 'd9855a20e1763ad17d6c8b80df85796d8f6027a8', name: "header" }), this.closable && (h("button", { key: '3e99b76da7bcf39eaecbe2906e0674fd20ebe9a6', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'f6463437fb98ae280afe358d50a2f960914014ea', name: "cross", size: "20px" })))), h("div", { key: 'ba8ca2e65f5eac8103e6f3c431e3ae9aab2b5f72', id: bodyId, class: "body" }, h("slot", { key: '9e08cbdd00e1a60826588b15cb6ed23fc4b5b0d7', name: "body" })), usesActionsSlot && h("slot", { key: 'aeb50dfcbf6c12e80a8904d149bb15892c691d88', name: "actions" }))));
123
195
  }
124
196
  get host() { return this; }
125
197
  static get style() { return TdsModalStyle0; }
@@ -132,12 +204,14 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
132
204
  "referenceEl": [16],
133
205
  "show": [4],
134
206
  "closable": [4],
207
+ "tdsAlertDialog": [1, "tds-alert-dialog"],
135
208
  "isShown": [32],
209
+ "activeElementIndex": [32],
136
210
  "showModal": [64],
137
211
  "closeModal": [64],
138
212
  "initializeModal": [64],
139
213
  "cleanupModal": [64]
140
- }]);
214
+ }, [[10, "keydown", "handleFocusTrap"]]]);
141
215
  function defineCustomElement$1() {
142
216
  if (typeof customElements === "undefined") {
143
217
  return;
@@ -1,7 +1,7 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
2
- import { d as defineCustomElement$2 } from './p-4487c541.js';
2
+ import { d as defineCustomElement$2 } from './p-92fb75a7.js';
3
3
 
4
- const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);opacity:var(--tds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
4
+ const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
5
5
  const TdsNavigationTabsStyle0 = navigationTabsCss;
6
6
 
7
7
  const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTabs extends H {
@@ -1,4 +1,4 @@
1
- import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-53e4cdcf.js';
1
+ import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-789bb453.js';
2
2
 
3
3
  const TdsPopoverCanvas = TdsPopoverCanvas$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,4 +1,4 @@
1
- import { T as TdsPopoverCore$1, d as defineCustomElement$1 } from './p-90dbeab3.js';
1
+ import { T as TdsPopoverCore$1, d as defineCustomElement$1 } from './p-252f3d4d.js';
2
2
 
3
3
  const TdsPopoverCore = TdsPopoverCore$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -11,10 +11,10 @@ const TdsPopoverMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMe
11
11
  this.disabled = false;
12
12
  }
13
13
  render() {
14
- return (h(Host, { key: '8abb30dc62eb52649840254acfbd5d8949f7bd46', role: "listitem" }, h("div", { key: '5b5fb01be3000dde8d01a5fa58105915f0c462f8', class: {
14
+ return (h(Host, { key: 'e8b4cebbe7ddcda36aab323b783e506b9e3b0e68', role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'e963177a2784af572bdeaf6e1ac8e889e51a82ae', class: {
15
15
  wrapper: true,
16
16
  disabled: this.disabled,
17
- } }, h("slot", { key: '669fd451472aaa8d07027cc990f1d8c5ae7071fc' }))));
17
+ } }, h("slot", { key: 'f56208065089cbc0d33ad101e760b2c4c51c2368' }))));
18
18
  }
19
19
  static get style() { return TdsPopoverMenuItemStyle0; }
20
20
  }, [1, "tds-popover-menu-item", {
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
2
2
  import { i as inheritAttributes } from './p-3fe9cbbf.js';
3
- import { d as defineCustomElement$2 } from './p-90dbeab3.js';
3
+ import { d as defineCustomElement$2 } from './p-252f3d4d.js';
4
4
 
5
5
  const popoverMenuCss = ".tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px 6px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}tds-popover-core.sc-tds-popover-menu{padding:6px 0 !important}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}";
6
6
  const TdsPopoverMenuStyle0 = popoverMenuCss;
@@ -37,7 +37,7 @@ const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu e
37
37
  'fluid-width': this.fluidWidth,
38
38
  }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
39
39
  this.childRef = el;
40
- }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '454814b16f594bec72be5cdc608c00109c71b0d1', role: "list" }, h("slot", { key: 'c07aec34795f83fa2d0d18b63bac458ed7044f9a' })))));
40
+ }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '454814b16f594bec72be5cdc608c00109c71b0d1', role: "menu" }, h("slot", { key: 'c07aec34795f83fa2d0d18b63bac458ed7044f9a' })))));
41
41
  }
42
42
  get host() { return this; }
43
43
  static get style() { return TdsPopoverMenuStyle0; }
@@ -21,9 +21,11 @@ const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton e
21
21
  this.checked = false;
22
22
  this.required = false;
23
23
  this.disabled = false;
24
+ this.tdsAriaLabel = undefined;
25
+ this.tdsTabIndex = undefined;
24
26
  }
25
27
  render() {
26
- return (h("div", { key: '6beb0c5754035e201cc35cabf68f21dbf9725cf8', class: "tds-radio-button" }, h("input", { key: 'f396d559dcb5a9c86a0f199bcafcc753340571c8', class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { key: 'c036866c8cb8f02de53de6d2ec95ed7238a3f37e', htmlFor: this.radioId }, h("slot", { key: '962e47b9f92477ebfad294198ab844c37d914d3d', name: "label" }))));
28
+ return (h("div", { key: '4fbbd82a09e16551774b0b81eefa4f8e54ea3650', class: "tds-radio-button" }, h("input", { key: 'c7da40a753c5c7116810918e6349076bd9fdbb53', "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '869ccd92f5b77a5475d409ae6b2f6d20df37c72d', htmlFor: this.radioId }, h("slot", { key: 'bdeabd6fe808498a0b2b08edb4a7ec33e6953ffe', name: "label" }))));
27
29
  }
28
30
  get host() { return this; }
29
31
  static get style() { return TdsRadioButtonStyle0; }
@@ -33,7 +35,9 @@ const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton e
33
35
  "radioId": [1, "radio-id"],
34
36
  "checked": [516],
35
37
  "required": [4],
36
- "disabled": [4]
38
+ "disabled": [4],
39
+ "tdsAriaLabel": [1, "tds-aria-label"],
40
+ "tdsTabIndex": [2, "tds-tab-index"]
37
41
  }]);
38
42
  function defineCustomElement$1() {
39
43
  if (typeof customElements === "undefined") {
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
2
2
  import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
3
- import { d as defineCustomElement$2 } from './p-4487c541.js';
3
+ import { d as defineCustomElement$2 } from './p-92fb75a7.js';
4
4
 
5
5
  const sideMenuCloseButtonCss = ":host button{height:64px;width:100%;text-align:left;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--tds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}";
6
6
  const TdsSideMenuCloseButtonStyle0 = sideMenuCloseButtonCss;
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h, F as Fragment, c as Host } from './p-28ef5186.js';
2
- import { d as defineCustomElement$3 } from './p-4487c541.js';
2
+ import { d as defineCustomElement$3 } from './p-92fb75a7.js';
3
3
  import { d as defineCustomElement$2 } from './p-0e6efec9.js';
4
4
 
5
5
  const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:69px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-sidebar-side-menu-subnav-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
2
2
  import { g as generateUniqueId } from './p-11648030.js';
3
- import { d as defineCustomElement$2 } from './p-4487c541.js';
3
+ import { d as defineCustomElement$2 } from './p-92fb75a7.js';
4
4
 
5
5
  const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track::after{content:\"\";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-disabled)}";
6
6
  const TdsSliderStyle0 = sliderCss;
@@ -1,6 +1,6 @@
1
1
  import { p as proxyCustomElement, H, h } from './p-28ef5186.js';
2
2
 
3
- const spinnerCss = ":root{--tds-spinner-background:var(--tds-blue-400);--tds-spinner-background-inverted:var(--tds-white);--tds-spinner-speed:1.8s;--tds-spinner-speed-lg:2s;--tds-spinner-radius-xs:8px;--tds-spinner-radius-sm:12px;--tds-spinner-radius-md:26px;--tds-spinner-radius-lg:42px;--tds-spinner-radius:var(--tds-spinner-radius-lg);--tds-spinner-stroke-width-xs:3px;--tds-spinner-stroke-width-sm:4px;--tds-spinner-stroke-width-md:6px;--tds-spinner-stroke-width-lg:8px;--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-spinner-svg{width:calc(var(--tds-spinner-radius) * 2);height:calc(var(--tds-spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.tds-spinner-svg-xs{--tds-spinner-radius:var(--tds-spinner-radius-xs);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-xs);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-sm{--tds-spinner-radius:var(--tds-spinner-radius-sm);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-sm);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-md{--tds-spinner-radius:var(--tds-spinner-radius-md);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-md);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-lg{--tds-spinner-radius:var(--tds-spinner-radius-lg);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-lg);--tds-spinner-animation-speed:var(--tds-spinner-speed-lg)}.tds-spinner-circle{cx:var(--tds-spinner-radius);cy:var(--tds-spinner-radius);r:calc(var(--tds-spinner-radius) - var(--tds-spinner-stroke-width) / 2);fill:none;--tds-spinner-stroke-dash:calc((2 * var(--PI)) * var(--tds-spinner-radius));stroke-dasharray:var(--tds-spinner-stroke-dash);stroke-width:var(--tds-spinner-stroke-width);animation:dash var(--tds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.tds-spinner-circle-standard{stroke:var(--tds-spinner-background)}.tds-spinner-circle-inverted{stroke:var(--tds-spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--tds-spinner-stroke-dash))}to{stroke-dashoffset:var(--tds-spinner-stroke-dash)}}";
3
+ const spinnerCss = ":root{--spinner-background-inverted:rgba(255, 255, 255, 1)}:root,.scania,.scania .tds-mode-light{--spinner-background:rgba(43, 112, 211, 1)}.scania .tds-mode-dark{--spinner-background:rgba(74, 137, 243, 1)}.traton,.traton .tds-mode-light{--spinner-background:rgba(0, 72, 82, 1)}.traton .tds-mode-dark{--spinner-background:rgba(194, 191, 182, 1)}:root{--spinner-speed:1.8s;--spinner-speed-lg:2s;--spinner-radius-xs:8px;--spinner-radius-sm:12px;--spinner-radius-md:26px;--spinner-radius-lg:42px;--spinner-radius:var(--spinner-radius-lg);--spinner-stroke-width-xs:3px;--spinner-stroke-width-sm:4px;--spinner-stroke-width-md:6px;--spinner-stroke-width-lg:8px;--spinner-stroke-width:var(--spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-spinner-svg{width:calc(var(--spinner-radius) * 2);height:calc(var(--spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.tds-spinner-svg-xs{--spinner-radius:var(--spinner-radius-xs);--spinner-stroke-width:var(--spinner-stroke-width-xs);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-sm{--spinner-radius:var(--spinner-radius-sm);--spinner-stroke-width:var(--spinner-stroke-width-sm);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-md{--spinner-radius:var(--spinner-radius-md);--spinner-stroke-width:var(--spinner-stroke-width-md);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-lg{--spinner-radius:var(--spinner-radius-lg);--spinner-stroke-width:var(--spinner-stroke-width-lg);--spinner-animation-speed:var(--spinner-speed-lg)}.tds-spinner-circle{cx:var(--spinner-radius);cy:var(--spinner-radius);r:calc(var(--spinner-radius) - var(--spinner-stroke-width) / 2);fill:none;--spinner-stroke-dash:calc((2 * var(--PI)) * var(--spinner-radius));stroke-dasharray:var(--spinner-stroke-dash);stroke-width:var(--spinner-stroke-width);animation:dash var(--spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.tds-spinner-circle-standard{stroke:var(--spinner-background)}.tds-spinner-circle-inverted{stroke:var(--spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--spinner-stroke-dash))}to{stroke-dashoffset:var(--spinner-stroke-dash)}}";
4
4
  const TdsSpinnerStyle0 = spinnerCss;
5
5
 
6
6
  const TdsSpinner$1 = /*@__PURE__*/ proxyCustomElement(class TdsSpinner extends H {
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
2
- import { d as defineCustomElement$2 } from './p-4487c541.js';
2
+ import { d as defineCustomElement$2 } from './p-92fb75a7.js';
3
3
 
4
4
  const stepCss = ":host{position:relative;display:table-cell}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg .content-container tds-icon{vertical-align:bottom}:host [role=listitem].lg .content-container .index-container{vertical-align:sub}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
5
5
  const TdsStepStyle0 = stepCss;
@@ -17,6 +17,7 @@ const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends H {
17
17
  this.__attachShadow();
18
18
  this.index = undefined;
19
19
  this.state = 'upcoming';
20
+ this.tdsAriaCurrent = undefined;
20
21
  this.hideLabels = undefined;
21
22
  this.size = undefined;
22
23
  this.orientation = undefined;
@@ -44,13 +45,14 @@ const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends H {
44
45
  }
45
46
  }
46
47
  render() {
47
- return (h(Host, { key: '7797a3c6062a198dd291bd7fe30af307561c0cf2' }, h("div", { key: '5607a73ab02896e18005862029d868cc3e933c76', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: '443a1126ec4c8bf978c5d498cb044b5f551a53d1', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: 'd3d5aaed1f221bbdc6e90cbbbd89415e0ec83233', class: `label ${this.size} ${this.state}` }, h("slot", { key: 'b27f1910deacb6070c3702033351240762111235', name: "label" }))))));
48
+ return (h(Host, { key: '52d3dba71d4c2168b01ded26bcee31f8f80ffa16' }, h("div", { key: 'da5bc2ef45609d027885a03a3d34e21ee1eed015', role: "listitem", "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'a0f65e54f04848d7440c7427ac42e820c51ae609', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '51011c20479712a9caa7719975032482c2191977', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '5556c301e1119a09e0e8c63ac46af11d88f98c23', name: "label" }))))));
48
49
  }
49
50
  get el() { return this; }
50
51
  static get style() { return TdsStepStyle0; }
51
52
  }, [1, "tds-step", {
52
53
  "index": [1],
53
54
  "state": [1],
55
+ "tdsAriaCurrent": [1, "tds-aria-current"],
54
56
  "hideLabels": [32],
55
57
  "size": [32],
56
58
  "orientation": [32],