@scania/tegel 1.25.0-tooltip-beta.0 → 1.26.0-onTdsChange-gets-triggered-unexpectedly-beta.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 (131) hide show
  1. package/dist/cjs/index-ca8040ad.js +0 -4
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/tds-checkbox.cjs.entry.js +10 -3
  4. package/dist/cjs/tds-chip.cjs.entry.js +7 -2
  5. package/dist/cjs/tds-dropdown_2.cjs.entry.js +23 -16
  6. package/dist/cjs/tds-folder-tab.cjs.entry.js +21 -2
  7. package/dist/cjs/tds-folder-tabs.cjs.entry.js +4 -2
  8. package/dist/cjs/tds-icon.cjs.entry.js +1 -1
  9. package/dist/cjs/tds-inline-tab.cjs.entry.js +21 -2
  10. package/dist/cjs/tds-inline-tabs.cjs.entry.js +4 -2
  11. package/dist/cjs/tds-link.cjs.entry.js +17 -3
  12. package/dist/cjs/tds-navigation-tab.cjs.entry.js +21 -2
  13. package/dist/cjs/tds-navigation-tabs.cjs.entry.js +6 -4
  14. package/dist/cjs/tegel.cjs.js +1 -1
  15. package/dist/collection/collection-manifest.json +1 -2
  16. package/dist/collection/components/banner/banner.js +1 -1
  17. package/dist/collection/components/checkbox/checkbox.js +44 -3
  18. package/dist/collection/components/chip/chip.js +24 -2
  19. package/dist/collection/components/dropdown/dropdown.js +23 -16
  20. package/dist/collection/components/icon/icon.js +1 -1
  21. package/dist/collection/components/icon/iconsArray.js +96 -1
  22. package/dist/collection/components/link/link.js +17 -3
  23. package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js +21 -2
  24. package/dist/collection/components/tabs/folder-tabs/folder-tabs.js +40 -2
  25. package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js +21 -2
  26. package/dist/collection/components/tabs/inline-tabs/inline-tabs.js +40 -2
  27. package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js +21 -2
  28. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +42 -4
  29. package/dist/collection/utils/axeHelpers.js +1 -1
  30. package/dist/components/{p-c65351ab.js → p-14ab9663.js} +12 -3
  31. package/dist/components/{p-4c1e3344.js → p-363184d0.js} +1 -1
  32. package/dist/components/{p-2a43e410.js → p-5028a7ae.js} +2 -2
  33. package/dist/components/p-64019792.js +65 -0
  34. package/dist/components/{p-a64dc22e.js → p-bac1d6b1.js} +24 -17
  35. package/dist/components/tds-accordion-item.js +1 -1
  36. package/dist/components/tds-banner.js +1 -1
  37. package/dist/components/tds-checkbox.js +1 -1
  38. package/dist/components/tds-chip.js +9 -3
  39. package/dist/components/tds-datetime.js +1 -1
  40. package/dist/components/tds-dropdown-option.js +1 -1
  41. package/dist/components/tds-dropdown.js +1 -1
  42. package/dist/components/tds-folder-tab.js +21 -2
  43. package/dist/components/tds-folder-tabs.js +7 -3
  44. package/dist/components/tds-footer-group.js +1 -1
  45. package/dist/components/tds-header-cell.js +1 -1
  46. package/dist/components/tds-header-dropdown.js +1 -1
  47. package/dist/components/tds-header-hamburger.js +1 -1
  48. package/dist/components/tds-header-launcher-button.js +1 -1
  49. package/dist/components/tds-header-launcher.js +2 -2
  50. package/dist/components/tds-icon.js +1 -1
  51. package/dist/components/tds-inline-tab.js +21 -2
  52. package/dist/components/tds-inline-tabs.js +7 -3
  53. package/dist/components/tds-link.js +17 -3
  54. package/dist/components/tds-message.js +1 -1
  55. package/dist/components/tds-modal.js +1 -1
  56. package/dist/components/tds-navigation-tab.js +21 -2
  57. package/dist/components/tds-navigation-tabs.js +9 -5
  58. package/dist/components/tds-side-menu-close-button.js +1 -1
  59. package/dist/components/tds-side-menu-dropdown.js +1 -1
  60. package/dist/components/tds-slider.js +1 -1
  61. package/dist/components/tds-step.js +1 -1
  62. package/dist/components/tds-table-body-input-wrapper.js +1 -1
  63. package/dist/components/tds-table-body-row.js +1 -1
  64. package/dist/components/tds-table-footer.js +4 -4
  65. package/dist/components/tds-table-header-input-wrapper.js +1 -1
  66. package/dist/components/tds-table-header.js +1 -1
  67. package/dist/components/tds-table-toolbar.js +1 -1
  68. package/dist/components/tds-text-field.js +1 -1
  69. package/dist/components/tds-textarea.js +1 -1
  70. package/dist/components/tds-toast.js +1 -1
  71. package/dist/esm/index-51d04e39.js +0 -4
  72. package/dist/esm/loader.js +1 -1
  73. package/dist/esm/tds-checkbox.entry.js +10 -3
  74. package/dist/esm/tds-chip.entry.js +7 -2
  75. package/dist/esm/tds-dropdown_2.entry.js +23 -16
  76. package/dist/esm/tds-folder-tab.entry.js +22 -3
  77. package/dist/esm/tds-folder-tabs.entry.js +4 -2
  78. package/dist/esm/tds-icon.entry.js +1 -1
  79. package/dist/esm/tds-inline-tab.entry.js +22 -3
  80. package/dist/esm/tds-inline-tabs.entry.js +4 -2
  81. package/dist/esm/tds-link.entry.js +17 -3
  82. package/dist/esm/tds-navigation-tab.entry.js +22 -3
  83. package/dist/esm/tds-navigation-tabs.entry.js +6 -4
  84. package/dist/esm/tegel.js +1 -1
  85. package/dist/tegel/p-0f2c9507.entry.js +1 -0
  86. package/dist/tegel/p-668b7662.entry.js +1 -0
  87. package/dist/tegel/p-a21250b8.entry.js +1 -0
  88. package/dist/tegel/p-aadb2553.entry.js +1 -0
  89. package/dist/tegel/p-ab8beb0f.entry.js +1 -0
  90. package/dist/tegel/p-b08886e3.entry.js +1 -0
  91. package/dist/tegel/p-c3607f10.entry.js +1 -0
  92. package/dist/tegel/p-cf302187.entry.js +1 -0
  93. package/dist/tegel/p-ddda64eb.entry.js +1 -0
  94. package/dist/tegel/p-eaa279dd.entry.js +1 -0
  95. package/dist/tegel/p-ee960089.entry.js +1 -0
  96. package/dist/tegel/tegel.esm.js +1 -1
  97. package/dist/types/components/checkbox/checkbox.d.ts +5 -0
  98. package/dist/types/components/chip/chip.d.ts +3 -0
  99. package/dist/types/components/dropdown/dropdown.d.ts +2 -0
  100. package/dist/types/components/tabs/folder-tabs/folder-tab/folder-tab.d.ts +2 -0
  101. package/dist/types/components/tabs/folder-tabs/folder-tabs.d.ts +4 -0
  102. package/dist/types/components/tabs/inline-tabs/inline-tab/inline-tab.d.ts +2 -0
  103. package/dist/types/components/tabs/inline-tabs/inline-tabs.d.ts +4 -0
  104. package/dist/types/components/tabs/navigation-tabs/navigation-tab/navigation-tab.d.ts +2 -0
  105. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +4 -0
  106. package/dist/types/components.d.ts +72 -35
  107. package/dist/types/types/Icons.d.ts +1 -1
  108. package/dist/types/utils/axeHelpers.d.ts +1 -2
  109. package/package.json +1 -1
  110. package/dist/cjs/tds-tooltip-beta.cjs.entry.js +0 -123
  111. package/dist/collection/components/tooltip-beta/tooltip-beta.css +0 -40
  112. package/dist/collection/components/tooltip-beta/tooltip-beta.js +0 -319
  113. package/dist/collection/types/Tooltip.js +0 -1
  114. package/dist/components/p-a2b7bdef.js +0 -65
  115. package/dist/components/tds-tooltip-beta.d.ts +0 -11
  116. package/dist/components/tds-tooltip-beta.js +0 -149
  117. package/dist/esm/tds-tooltip-beta.entry.js +0 -119
  118. package/dist/tegel/p-0c1e632d.entry.js +0 -1
  119. package/dist/tegel/p-19eb4ae1.entry.js +0 -1
  120. package/dist/tegel/p-4e33cbda.entry.js +0 -1
  121. package/dist/tegel/p-4ee344e5.entry.js +0 -1
  122. package/dist/tegel/p-64c80f14.entry.js +0 -1
  123. package/dist/tegel/p-72fd0083.entry.js +0 -1
  124. package/dist/tegel/p-93a4bd11.entry.js +0 -1
  125. package/dist/tegel/p-9e0b31a1.entry.js +0 -1
  126. package/dist/tegel/p-a0fc0cc2.entry.js +0 -1
  127. package/dist/tegel/p-b6526302.entry.js +0 -1
  128. package/dist/tegel/p-dcbc35af.entry.js +0 -1
  129. package/dist/tegel/p-ef3671d8.entry.js +0 -1
  130. package/dist/types/components/tooltip-beta/tooltip-beta.d.ts +0 -28
  131. package/dist/types/types/Tooltip.d.ts +0 -4
@@ -9,14 +9,28 @@ export class TdsLink {
9
9
  this.standalone = false;
10
10
  }
11
11
  connectedCallback() {
12
- this.host.children[0].classList.add('tds-link-component');
12
+ const links = this.host.querySelectorAll('a');
13
+ if (links.length > 1) {
14
+ console.warn('tds-link is only intended to wrap one <a> tag');
15
+ }
16
+ const link = links[0];
17
+ if (link) {
18
+ if (this.disabled) {
19
+ link.setAttribute('tabindex', '-1');
20
+ link.setAttribute('aria-disabled', 'true');
21
+ }
22
+ else {
23
+ link.removeAttribute('tabindex');
24
+ link.removeAttribute('aria-disabled');
25
+ }
26
+ }
13
27
  }
14
28
  render() {
15
- return (h("span", { key: '3fa509835f66a3128ee487b34b47c0efb9e73d82', class: {
29
+ return (h("span", { key: '1183de952c2fd6cb1193e9e0dec419f37bf07dee', class: {
16
30
  'disabled': this.disabled,
17
31
  'no-underline': !this.underline,
18
32
  'standalone': this.standalone,
19
- } }, h("slot", { key: 'd83160f7b9b04e0e0cd9bd9184a45ac8ac504744' })));
33
+ } }, h("slot", { key: 'e019a83d2335cd0a7d682e79a6bf0148452c3e71' })));
20
34
  }
21
35
  static get is() { return "tds-link"; }
22
36
  static get encapsulation() { return "shadow"; }
@@ -16,11 +16,29 @@ export class TdsFolderTab {
16
16
  async setSelected(selected) {
17
17
  this.selected = selected;
18
18
  }
19
+ connectedCallback() {
20
+ const elements = this.host.querySelectorAll('button, a');
21
+ for (let index = 0; index < elements.length; index++) {
22
+ const element = elements[index];
23
+ if (!element.getAttribute('aria-controls')) {
24
+ console.warn('Tegel folder-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
25
+ }
26
+ if (element.getAttribute('role') !== 'tab') {
27
+ console.warn('Tegel folder-tab component: Interactive elements should have attribute role="tab"');
28
+ }
29
+ if (this.disabled) {
30
+ element.setAttribute('aria-disabled', 'true');
31
+ }
32
+ else {
33
+ element.removeAttribute('aria-disabled');
34
+ }
35
+ }
36
+ }
19
37
  render() {
20
- return (h(Host, { key: '919cd453da1e3649fb5da8783ab8fabc47322d47', role: "listitem" }, h("div", { key: 'f00bf3eea1ee0d670d8989e23e27d6c54fbe7c17', class: {
38
+ return (h(Host, { key: '9290c4ab2f7d051bba9fec4dad9a7d07790ed5b7', "aria-selected": this.selected }, h("div", { key: '36225101c510f2d77282fd600c4ee00085791109', class: {
21
39
  selected: this.selected,
22
40
  disabled: this.disabled,
23
- }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '3e3bd62fd02c922fa0592dc0f2dae5a8b49d6c4c' }))));
41
+ }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '05954c498b9fbd6a2a1231d84bf2657a0616db36' }))));
24
42
  }
25
43
  static get is() { return "tds-folder-tab"; }
26
44
  static get encapsulation() { return "shadow"; }
@@ -114,4 +132,5 @@ export class TdsFolderTab {
114
132
  }
115
133
  };
116
134
  }
135
+ static get elementRef() { return "host"; }
117
136
  }
@@ -60,6 +60,8 @@ export class TdsFolderTabs {
60
60
  this.modeVariant = null;
61
61
  this.defaultSelectedIndex = 0;
62
62
  this.selectedIndex = undefined;
63
+ this.tdsScrollLeftAriaLabel = 'Scroll left';
64
+ this.tdsScrollRightAriaLabel = 'Scroll right';
63
65
  this.buttonWidth = 0;
64
66
  this.showLeftScroll = false;
65
67
  this.showRightScroll = false;
@@ -160,9 +162,9 @@ export class TdsFolderTabs {
160
162
  this.removeEventListenerFromTabs();
161
163
  }
162
164
  render() {
163
- return (h(Host, { key: '19b773750f13304194341caf79242c7be95b41be', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '915b525f1d8fc67f3edf82f0841ea89cfd8424bc', class: "wrapper", ref: (el) => {
165
+ return (h(Host, { key: '54a3cceed49387a8f0dbe74eecb96ae284882ff9', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '170e5256bde8efdce412bbab1a674b23159d02d1', class: "wrapper", ref: (el) => {
164
166
  this.navWrapperElement = el;
165
- } }, h("button", { key: '806f5ce973b4b9bf842ae4c3fdf42c6160255db4', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '4762c8fcfb5f7bb9a67ce2515fc3cab557180ca8', name: "chevron_left", size: "20px" })), h("slot", { key: '498f04374cb1ad240df2a6e02830eba9bc6c3c8d', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '47f114815e98c22f26b021df2b5f53f4498ba24b', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'b4f3a0e137c84b996bdf7eb7e497e788637ac401', name: "chevron_right", size: "20px" })))));
167
+ } }, h("button", { key: '1c74ef8c81361bfa6ff5d227c145a3371fb2f66f', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '94ddd85d4107c89487db727f13a9c443fd160fc6', name: "chevron_left", size: "20px" })), h("slot", { key: '63978c3c62482bc0a251377756630f555f10dfef', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'aeb86fbdb365e62df37b72daa0b53f51486834a9', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '2cc4d301a4490d6b8d8f2373fc2450c93922a814', name: "chevron_right", size: "20px" })))));
166
168
  }
167
169
  static get is() { return "tds-folder-tabs"; }
168
170
  static get encapsulation() { return "shadow"; }
@@ -230,6 +232,42 @@ export class TdsFolderTabs {
230
232
  },
231
233
  "attribute": "selected-index",
232
234
  "reflect": true
235
+ },
236
+ "tdsScrollLeftAriaLabel": {
237
+ "type": "string",
238
+ "mutable": false,
239
+ "complexType": {
240
+ "original": "string",
241
+ "resolved": "string",
242
+ "references": {}
243
+ },
244
+ "required": false,
245
+ "optional": false,
246
+ "docs": {
247
+ "tags": [],
248
+ "text": "Defines aria-label on left scroll button"
249
+ },
250
+ "attribute": "tds-scroll-left-aria-label",
251
+ "reflect": false,
252
+ "defaultValue": "'Scroll left'"
253
+ },
254
+ "tdsScrollRightAriaLabel": {
255
+ "type": "string",
256
+ "mutable": false,
257
+ "complexType": {
258
+ "original": "string",
259
+ "resolved": "string",
260
+ "references": {}
261
+ },
262
+ "required": false,
263
+ "optional": false,
264
+ "docs": {
265
+ "tags": [],
266
+ "text": "Defines aria-label on right scroll button"
267
+ },
268
+ "attribute": "tds-scroll-right-aria-label",
269
+ "reflect": false,
270
+ "defaultValue": "'Scroll right'"
233
271
  }
234
272
  };
235
273
  }
@@ -11,12 +11,30 @@ export class TdsInlineTab {
11
11
  async setSelected(selected) {
12
12
  this.selected = selected;
13
13
  }
14
+ connectedCallback() {
15
+ const elements = this.host.querySelectorAll('button, a');
16
+ for (let index = 0; index < elements.length; index++) {
17
+ const element = elements[index];
18
+ if (!element.getAttribute('aria-controls')) {
19
+ console.warn('Tegel inline-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
20
+ }
21
+ if (element.getAttribute('role') !== 'tab') {
22
+ console.warn('Tegel inline-tab component: Interactive elements should have attribute role="tab"');
23
+ }
24
+ if (this.disabled) {
25
+ element.setAttribute('aria-disabled', 'true');
26
+ }
27
+ else {
28
+ element.removeAttribute('aria-disabled');
29
+ }
30
+ }
31
+ }
14
32
  render() {
15
- return (h(Host, { key: '4bb1d313b0d2b7e3bc612474201b0a3e06dd6555', role: "listitem" }, h("div", { key: 'c49a2745c5c6de9276807e670c9886130f5e5dbd', class: {
33
+ return (h(Host, { key: '4c9f91014f30c1e7db52778dc4cf8800aa62050d', "aria-selected": this.selected }, h("div", { key: '860cfdd9338915275262875fc79588b58bebf447', class: {
16
34
  'inline-tab-item': true,
17
35
  'selected': this.selected,
18
36
  'disabled': this.disabled,
19
- } }, h("slot", { key: 'caa1851fd0a992f38e04fb4872e52c90a3731e6a' }))));
37
+ } }, h("slot", { key: 'eeccc1bdc172fab4d7ad96143b01f17982266f4d' }))));
20
38
  }
21
39
  static get is() { return "tds-inline-tab"; }
22
40
  static get encapsulation() { return "shadow"; }
@@ -85,4 +103,5 @@ export class TdsInlineTab {
85
103
  }
86
104
  };
87
105
  }
106
+ static get elementRef() { return "host"; }
88
107
  }
@@ -60,6 +60,8 @@ export class TdsInlineTabs {
60
60
  this.modeVariant = 'primary';
61
61
  this.defaultSelectedIndex = 0;
62
62
  this.selectedIndex = undefined;
63
+ this.tdsScrollLeftAriaLabel = 'Scroll left';
64
+ this.tdsScrollRightAriaLabel = 'Scroll right';
63
65
  this.leftPadding = 32;
64
66
  this.showLeftScroll = false;
65
67
  this.showRightScroll = false;
@@ -167,9 +169,9 @@ export class TdsInlineTabs {
167
169
  this.removeEventListenerFromTabs();
168
170
  }
169
171
  render() {
170
- return (h(Host, { key: 'cd482509c07b6074d81a35eb9447ef561ce7c84a', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '63590b1fec8637f1000897f62962dae2efdcc05d', class: "wrapper", ref: (el) => {
172
+ return (h(Host, { key: '47fd4d494254749aa276d4f046ded68fe472b062', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'f5c42677bafef38db784c517714ac8a4e0149862', class: "wrapper", ref: (el) => {
171
173
  this.navWrapperElement = el;
172
- }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '349a8cc729442d4307f800c69abe36adeb7f7e0c', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'feacf20411c38c0b9d80b25a1a19ef89e812b81d', name: "chevron_left", size: "20px" })), h("slot", { key: '78727b46e6adc0c516cbbfb4dc072f59330c8635', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '580d1416f7329133c58f5bfaaa7169623e1dd001', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'f9d1c4f717303f0c1c2eb4b33b361be8fa2f15ab', name: "chevron_right", size: "20px" })))));
174
+ }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '5955dc1657efcfec14393987f6ebfaea4c90615d', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '3c3c7d93197f40b0cbb67d20cd5c32b827a29430', name: "chevron_left", size: "20px" })), h("slot", { key: '335ec61f80defb892c229901165809487950dc03', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'cc22a000e41efa472638da3c480b5cf1094aaec2', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '9ca29d2d1cb3df19993723a2eb0716d36c0f20ea', name: "chevron_right", size: "20px" })))));
173
175
  }
174
176
  static get is() { return "tds-inline-tabs"; }
175
177
  static get encapsulation() { return "shadow"; }
@@ -238,6 +240,42 @@ export class TdsInlineTabs {
238
240
  "attribute": "selected-index",
239
241
  "reflect": true
240
242
  },
243
+ "tdsScrollLeftAriaLabel": {
244
+ "type": "string",
245
+ "mutable": false,
246
+ "complexType": {
247
+ "original": "string",
248
+ "resolved": "string",
249
+ "references": {}
250
+ },
251
+ "required": false,
252
+ "optional": false,
253
+ "docs": {
254
+ "tags": [],
255
+ "text": "Defines aria-label on left scroll button"
256
+ },
257
+ "attribute": "tds-scroll-left-aria-label",
258
+ "reflect": false,
259
+ "defaultValue": "'Scroll left'"
260
+ },
261
+ "tdsScrollRightAriaLabel": {
262
+ "type": "string",
263
+ "mutable": false,
264
+ "complexType": {
265
+ "original": "string",
266
+ "resolved": "string",
267
+ "references": {}
268
+ },
269
+ "required": false,
270
+ "optional": false,
271
+ "docs": {
272
+ "tags": [],
273
+ "text": "Defines aria-label on right scroll button"
274
+ },
275
+ "attribute": "tds-scroll-right-aria-label",
276
+ "reflect": false,
277
+ "defaultValue": "'Scroll right'"
278
+ },
241
279
  "leftPadding": {
242
280
  "type": "number",
243
281
  "mutable": false,
@@ -11,9 +11,27 @@ export class TdsNavigationTab {
11
11
  async setSelected(selected) {
12
12
  this.selected = selected;
13
13
  }
14
+ connectedCallback() {
15
+ const elements = this.host.querySelectorAll('button, a');
16
+ for (let index = 0; index < elements.length; index++) {
17
+ const element = elements[index];
18
+ if (!element.getAttribute('aria-controls')) {
19
+ console.warn('Tegel navigation-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
20
+ }
21
+ if (element.getAttribute('role') !== 'tab') {
22
+ console.warn('Tegel navigation-tab component: Interactive elements should have attribute role="tab"');
23
+ }
24
+ if (this.disabled) {
25
+ element.setAttribute('aria-disabled', 'true');
26
+ }
27
+ else {
28
+ element.removeAttribute('aria-disabled');
29
+ }
30
+ }
31
+ }
14
32
  render() {
15
- return (h(Host, { key: '58749f71c75a0026b58645df3ccaa6ebd5e5dc9f', role: "listitem" }, h("div", { key: 'ed4cc04c74a69470c95f9ec3ba034c7ad6b9f2d3', class: `navigation-tab-item ${this.selected ? 'selected' : ''}
16
- ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'ee7c740413087d0da51bdfc8da4509d482f1faeb' }))));
33
+ return (h(Host, { key: '51152bf313a84cb937e7f49e87cc8dcd74ab0612' }, h("div", { key: '5d55db68f75e042dafe40da1b9e84d74f1cd8849', class: `navigation-tab-item ${this.selected ? 'selected' : ''}
34
+ ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '174108daa16d6fa68c04244af1843771a4df91f5' }))));
17
35
  }
18
36
  static get is() { return "tds-navigation-tab"; }
19
37
  static get encapsulation() { return "shadow"; }
@@ -82,4 +100,5 @@ export class TdsNavigationTab {
82
100
  }
83
101
  };
84
102
  }
103
+ static get elementRef() { return "host"; }
85
104
  }
@@ -61,6 +61,8 @@ export class TdsNavigationTabs {
61
61
  this.defaultSelectedIndex = 0;
62
62
  this.selectedIndex = undefined;
63
63
  this.leftPadding = 32;
64
+ this.tdsScrollLeftAriaLabel = 'Scroll left';
65
+ this.tdsScrollRightAriaLabel = 'Scroll right';
64
66
  this.showLeftScroll = false;
65
67
  this.showRightScroll = false;
66
68
  }
@@ -167,15 +169,15 @@ export class TdsNavigationTabs {
167
169
  this.removeEventListenerFromTabs();
168
170
  }
169
171
  render() {
170
- return (h(Host, { key: '0ca3544da4ef897b44bd2f55b0dc03edf7921818', role: "list", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '3eff9e0fc6b416171d0928e3e1933fed626fb3ec', class: "wrapper", ref: (el) => {
172
+ return (h(Host, { key: '809fe9d34b03949edae1708b6dea7f0406afee80', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '866605f8695441d7817c07895bdffd5e3e7ba5ac', class: "wrapper", ref: (el) => {
171
173
  this.navWrapperElement = el;
172
- }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '730023259356eec4ec037e56a495dfea4f8d469c', class: {
174
+ }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '2d394ecb940cee024174932676c2a6c22622c853', "aria-label": this.tdsScrollLeftAriaLabel, class: {
173
175
  'scroll-left-button': true,
174
176
  'show': this.showLeftScroll,
175
- }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '5e601f5e4a3aa308e5a5a636fc08c7b32387dbd9', name: "chevron_left", size: "20px" })), h("slot", { key: '43c9228e6c328b4cc651a9ffbd7dd8dbbfd592fe', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '7eca0796fed3a98043abbbe306c29eed10cd8c5d', class: {
177
+ }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '09386162127467a545e00f44130352afb9cfed03', name: "chevron_left", size: "20px" })), h("slot", { key: '3b3cd70ed645318d0661a3acbee3d2bc748314cf', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '1afb2dc9b261626db800593548d7e023e14cd39b', "aria-label": this.tdsScrollRightAriaLabel, class: {
176
178
  'scroll-right-button': true,
177
179
  'show': this.showRightScroll,
178
- }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '9b84ae33c083f41ce6d8a83da1f1edb37c95de55', name: "chevron_right", size: "20px" })))));
180
+ }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '451a8ddc680799fd86e390d8aeab5c22c73f31ee', name: "chevron_right", size: "20px" })))));
179
181
  }
180
182
  static get is() { return "tds-navigation-tabs"; }
181
183
  static get encapsulation() { return "shadow"; }
@@ -261,6 +263,42 @@ export class TdsNavigationTabs {
261
263
  "attribute": "left-padding",
262
264
  "reflect": true,
263
265
  "defaultValue": "32"
266
+ },
267
+ "tdsScrollLeftAriaLabel": {
268
+ "type": "string",
269
+ "mutable": false,
270
+ "complexType": {
271
+ "original": "string",
272
+ "resolved": "string",
273
+ "references": {}
274
+ },
275
+ "required": false,
276
+ "optional": false,
277
+ "docs": {
278
+ "tags": [],
279
+ "text": "Defines aria-label on left scroll button"
280
+ },
281
+ "attribute": "tds-scroll-left-aria-label",
282
+ "reflect": false,
283
+ "defaultValue": "'Scroll left'"
284
+ },
285
+ "tdsScrollRightAriaLabel": {
286
+ "type": "string",
287
+ "mutable": false,
288
+ "complexType": {
289
+ "original": "string",
290
+ "resolved": "string",
291
+ "references": {}
292
+ },
293
+ "required": false,
294
+ "optional": false,
295
+ "docs": {
296
+ "tags": [],
297
+ "text": "Defines aria-label on right scroll button"
298
+ },
299
+ "attribute": "tds-scroll-right-aria-label",
300
+ "reflect": false,
301
+ "defaultValue": "'Scroll right'"
264
302
  }
265
303
  };
266
304
  }
@@ -1,3 +1,3 @@
1
1
  import AxeBuilder from "@axe-core/playwright";
2
- const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region'];
2
+ const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region', 'color-contrast'];
3
3
  export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).analyze();
@@ -28,6 +28,8 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
28
28
  this.checked = false;
29
29
  this.indeterminate = false;
30
30
  this.value = undefined;
31
+ this.tdsAriaLabel = undefined;
32
+ this.tdsAriaDescribedby = undefined;
31
33
  }
32
34
  /** Toggles the checked value of the component. */
33
35
  async toggleCheckbox() {
@@ -56,12 +58,17 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
56
58
  this.indeterminate = false;
57
59
  }
58
60
  }
61
+ connectedCallback() {
62
+ if (!this.tdsAriaLabel) {
63
+ console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
64
+ }
65
+ }
59
66
  render() {
60
- return (h("div", { key: '7362e4e69df24e5615f9f23fe8bc9b72b29cf525', class: "tds-checkbox" }, h("input", { key: '43f2b6070677645ad7bc9c47e2bd65df43735eff',
67
+ return (h("div", { key: '26c1c30edd11f3d1dc76beffa496b93841a7dac5', class: "tds-checkbox" }, h("input", { key: 'ebb9d474d9f726248f7a0c9079c5474431d18104',
61
68
  // eslint-disable-next-line no-return-assign
62
- ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
69
+ ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
63
70
  this.handleChange();
64
- } }), h("label", { key: 'caaa642c85a0d2913441c0e7baa3ca28e9b3a7a8', htmlFor: this.checkboxId }, h("slot", { key: '12d411bbcd3baa9ed43cec5d4d25a1ad4c982ce5', name: "label" }))));
71
+ } }), h("label", { key: '68e89bdc35cc5f37756cdbde5f563bf64e334310', htmlFor: this.checkboxId }, h("slot", { key: 'f5122194e84705f82c8f148feadfc2787577c346', name: "label" }))));
65
72
  }
66
73
  get host() { return this; }
67
74
  static get watchers() { return {
@@ -76,6 +83,8 @@ const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends H
76
83
  "checked": [1540],
77
84
  "indeterminate": [1028],
78
85
  "value": [1],
86
+ "tdsAriaLabel": [1, "tds-aria-label"],
87
+ "tdsAriaDescribedby": [1, "tds-aria-describedby"],
79
88
  "toggleCheckbox": [64]
80
89
  }, [[4, "reset", "handleFormReset"]], {
81
90
  "indeterminate": ["handleIndeterminateState"]
@@ -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$3 } from './p-e49a0ceb.js';
4
4
  import { d as defineCustomElement$2 } from './p-d61bd22e.js';
5
- import { d as defineCustomElement$1 } from './p-a2b7bdef.js';
5
+ import { d as defineCustomElement$1 } from './p-64019792.js';
6
6
 
7
7
  const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
8
8
  const TdsHeaderLauncherButtonStyle0 = headerLauncherButtonCss;
@@ -1,7 +1,7 @@
1
1
  import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
2
2
  import { a as convertToString } from './p-b1d21573.js';
3
- import { d as defineCustomElement$2 } from './p-c65351ab.js';
4
- import { d as defineCustomElement$1 } from './p-a2b7bdef.js';
3
+ import { d as defineCustomElement$2 } from './p-14ab9663.js';
4
+ import { d as defineCustomElement$1 } from './p-64019792.js';
5
5
 
6
6
  const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";
7
7
  const TdsDropdownOptionStyle0 = dropdownOptionCss;