@scania/tegel 0.0.51 → 0.0.52

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 (560) hide show
  1. package/dist/cjs/index-5ad19933.js +4 -4
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/sdds-accordion-item.cjs.entry.js +18 -18
  4. package/dist/cjs/sdds-accordion.cjs.entry.js +9 -9
  5. package/dist/cjs/sdds-badges.cjs.entry.js +43 -43
  6. package/dist/cjs/sdds-banner.cjs.entry.js +69 -69
  7. package/dist/cjs/sdds-banner.cjs.entry.js.map +1 -1
  8. package/dist/cjs/sdds-block.cjs.entry.js +21 -21
  9. package/dist/cjs/sdds-body-cell_2.cjs.entry.js +158 -158
  10. package/dist/cjs/sdds-body-cell_2.cjs.entry.js.map +1 -1
  11. package/dist/cjs/sdds-breadcrumb-link.cjs.entry.js +14 -14
  12. package/dist/cjs/sdds-breadcrumb-link.cjs.entry.js.map +1 -1
  13. package/dist/cjs/sdds-breadcrumb.cjs.entry.js +12 -12
  14. package/dist/cjs/sdds-button.cjs.entry.js +23 -23
  15. package/dist/cjs/sdds-button.cjs.entry.js.map +1 -1
  16. package/dist/cjs/sdds-card.cjs.entry.js +37 -37
  17. package/dist/cjs/sdds-checkbox.cjs.entry.js +45 -45
  18. package/dist/cjs/sdds-checkbox.cjs.entry.js.map +1 -1
  19. package/dist/cjs/sdds-datetime.cjs.entry.js +84 -84
  20. package/dist/cjs/sdds-divider.cjs.entry.js +9 -9
  21. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +83 -83
  22. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js.map +1 -1
  23. package/dist/cjs/sdds-dropdown_2.cjs.entry.js +317 -317
  24. package/dist/cjs/sdds-dropdown_2.cjs.entry.js.map +1 -1
  25. package/dist/cjs/sdds-folder-tabs-button.cjs.entry.js +15 -15
  26. package/dist/cjs/sdds-folder-tabs-link.cjs.entry.js +18 -18
  27. package/dist/cjs/sdds-folder-tabs.cjs.entry.js +167 -167
  28. package/dist/cjs/sdds-footer-link-group.cjs.entry.js +19 -19
  29. package/dist/cjs/sdds-footer-link.cjs.entry.js +16 -16
  30. package/dist/cjs/sdds-footer-link.cjs.entry.js.map +1 -1
  31. package/dist/cjs/sdds-footer.cjs.entry.js +15 -15
  32. package/dist/cjs/sdds-header-cell.cjs.entry.js +124 -124
  33. package/dist/cjs/sdds-icon.cjs.entry.js +31 -30
  34. package/dist/cjs/sdds-icon.cjs.entry.js.map +1 -1
  35. package/dist/cjs/sdds-inline-tabs-button.cjs.entry.js +11 -11
  36. package/dist/cjs/sdds-inline-tabs-button.cjs.entry.js.map +1 -1
  37. package/dist/cjs/sdds-inline-tabs-link.cjs.entry.js +14 -14
  38. package/dist/cjs/sdds-inline-tabs-link.cjs.entry.js.map +1 -1
  39. package/dist/cjs/sdds-inline-tabs.cjs.entry.js +175 -175
  40. package/dist/cjs/sdds-link.cjs.entry.js +13 -13
  41. package/dist/cjs/sdds-message.cjs.entry.js +27 -27
  42. package/dist/cjs/sdds-modal.cjs.entry.js +85 -85
  43. package/dist/cjs/sdds-navigation-tabs-button.cjs.entry.js +10 -10
  44. package/dist/cjs/sdds-navigation-tabs-link.cjs.entry.js +13 -13
  45. package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +132 -132
  46. package/dist/cjs/sdds-popover-canvas.cjs.entry.js +99 -99
  47. package/dist/cjs/sdds-popover-menu.cjs.entry.js +73 -73
  48. package/dist/cjs/sdds-radio-button.cjs.entry.js +25 -25
  49. package/dist/cjs/sdds-radio-button.cjs.entry.js.map +1 -1
  50. package/dist/cjs/sdds-slider.cjs.entry.js +347 -347
  51. package/dist/cjs/sdds-slider.cjs.entry.js.map +1 -1
  52. package/dist/cjs/sdds-spinner.cjs.entry.js +10 -10
  53. package/dist/cjs/sdds-stepper-item.cjs.entry.js +27 -27
  54. package/dist/cjs/sdds-stepper.cjs.entry.js +32 -32
  55. package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +71 -71
  56. package/dist/cjs/sdds-table-body.cjs.entry.js +233 -233
  57. package/dist/cjs/sdds-table-footer.cjs.entry.js +153 -153
  58. package/dist/cjs/sdds-table-header.cjs.entry.js +89 -89
  59. package/dist/cjs/sdds-table-header.cjs.entry.js.map +1 -1
  60. package/dist/cjs/sdds-table-toolbar.cjs.entry.js +54 -54
  61. package/dist/cjs/sdds-table.cjs.entry.js +57 -57
  62. package/dist/cjs/sdds-textarea.cjs.entry.js +55 -55
  63. package/dist/cjs/sdds-textfield.cjs.entry.js +59 -59
  64. package/dist/cjs/sdds-textfield.cjs.entry.js.map +1 -1
  65. package/dist/cjs/sdds-toast.cjs.entry.js +70 -70
  66. package/dist/cjs/sdds-toggle.cjs.entry.js +32 -32
  67. package/dist/cjs/sdds-tooltip.cjs.entry.js +92 -92
  68. package/dist/cjs/tegel.cjs.js +1 -1
  69. package/dist/collection/components/accordion/accordion-item/accordion-item.js +142 -142
  70. package/dist/collection/components/accordion/accordion.js +44 -44
  71. package/dist/collection/components/accordion/accordion.stories.js +80 -80
  72. package/dist/collection/components/badge/badge.stories.js +65 -65
  73. package/dist/collection/components/badge/badges.js +148 -148
  74. package/dist/collection/components/banner/banner.stories.js +79 -79
  75. package/dist/collection/components/banner/sdds-banner.css +7 -2
  76. package/dist/collection/components/banner/sdds-banner.js +250 -331
  77. package/dist/collection/components/banner/sdds-banner.js.map +1 -1
  78. package/dist/collection/components/banner/sdds-banner.stories.js +90 -113
  79. package/dist/collection/components/banner/sdds-banner.stories.js.map +1 -1
  80. package/dist/collection/components/block/block-native.stories.js +40 -40
  81. package/dist/collection/components/block/sdds-block.js +56 -56
  82. package/dist/collection/components/block/sdds-block.stories.js +40 -40
  83. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +21 -21
  84. package/dist/collection/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.css +2 -2
  85. package/dist/collection/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.js +119 -119
  86. package/dist/collection/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.js.map +1 -1
  87. package/dist/collection/components/breadcrumb/sdds-breadcrumb.js +23 -23
  88. package/dist/collection/components/breadcrumb/sdds-breadcrumb.stories.js +33 -27
  89. package/dist/collection/components/breadcrumb/sdds-breadcrumb.stories.js.map +1 -1
  90. package/dist/collection/components/button/button-component.js +152 -152
  91. package/dist/collection/components/button/button-native.stories.js +175 -175
  92. package/dist/collection/components/button/button-webcomponent.stories.js +172 -172
  93. package/dist/collection/components/button/button.css +28 -59
  94. package/dist/collection/components/card/card.stories.js +137 -137
  95. package/dist/collection/components/card/sdds-card.js +269 -269
  96. package/dist/collection/components/card/sdds-card.stories.js +129 -129
  97. package/dist/collection/components/checkbox/checkbox.stories.js +58 -58
  98. package/dist/collection/components/checkbox/sdds-checkbox.css +5 -4
  99. package/dist/collection/components/checkbox/sdds-checkbox.js +240 -240
  100. package/dist/collection/components/checkbox/sdds-checkbox.stories.js +58 -58
  101. package/dist/collection/components/chips/chips.stories.js +110 -110
  102. package/dist/collection/components/data-table/native-table.stories.js +102 -102
  103. package/dist/collection/components/data-table/table/table.js +257 -257
  104. package/dist/collection/components/data-table/table-body/table-body.js +435 -435
  105. package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +169 -169
  106. package/dist/collection/components/data-table/table-body-row/table-body-row.css +10 -5
  107. package/dist/collection/components/data-table/table-body-row/table-body-row.js +172 -172
  108. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +163 -163
  109. package/dist/collection/components/data-table/table-component-basic.stories.js +133 -133
  110. package/dist/collection/components/data-table/table-component-batch-actions.stories.js +130 -130
  111. package/dist/collection/components/data-table/table-component-bodydata.stories.js +44 -44
  112. package/dist/collection/components/data-table/table-component-custom-width.stories.js +122 -122
  113. package/dist/collection/components/data-table/table-component-event-listeners.stories.js +122 -122
  114. package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +122 -122
  115. package/dist/collection/components/data-table/table-component-filtering.stories.js +137 -137
  116. package/dist/collection/components/data-table/table-component-multiselect.stories.js +133 -133
  117. package/dist/collection/components/data-table/table-component-pagination.stories.js +133 -133
  118. package/dist/collection/components/data-table/table-component-sorting.stories.js +166 -166
  119. package/dist/collection/components/data-table/table-footer/table-footer.js +358 -358
  120. package/dist/collection/components/data-table/table-header/table-header.css +10 -5
  121. package/dist/collection/components/data-table/table-header/table-header.js +156 -156
  122. package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +314 -314
  123. package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +142 -142
  124. package/dist/collection/components/datetime/datetime.js +389 -389
  125. package/dist/collection/components/datetime/datetime.stories.js +170 -170
  126. package/dist/collection/components/divider/divider-webcomponent.stories.js +58 -58
  127. package/dist/collection/components/divider/divider.js +44 -44
  128. package/dist/collection/components/divider/divider.stories.js +92 -92
  129. package/dist/collection/components/divider/divider.stories.js.map +1 -1
  130. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +360 -360
  131. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +144 -144
  132. package/dist/collection/components/dropdown/dropdown-native.stories.js +82 -82
  133. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +191 -191
  134. package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +146 -146
  135. package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +141 -141
  136. package/dist/collection/components/dropdown/dropdown.css +12 -10
  137. package/dist/collection/components/dropdown/dropdown.js +573 -573
  138. package/dist/collection/components/footer/footer.stories.js +53 -53
  139. package/dist/collection/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.js +86 -86
  140. package/dist/collection/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.js.map +1 -1
  141. package/dist/collection/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.js +58 -58
  142. package/dist/collection/components/footer/webcomponent/sdds-footer.js +56 -56
  143. package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js +73 -73
  144. package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js.map +1 -1
  145. package/dist/collection/components/header/header-all.stories.js +41 -41
  146. package/dist/collection/components/header/header-default.stories.js +41 -41
  147. package/dist/collection/components/header/header-inline.stories.js +41 -41
  148. package/dist/collection/components/header/header-search.stories.js +41 -41
  149. package/dist/collection/components/header/header-toolbar.stories.js +41 -41
  150. package/dist/collection/components/icon/icon-font.stories.js +50 -50
  151. package/dist/collection/components/icon/icon-web-component.stories.js +50 -50
  152. package/dist/collection/components/icon/icon.js +90 -90
  153. package/dist/collection/components/icon/iconsArray.js +111 -2
  154. package/dist/collection/components/link/link.stories.js +48 -48
  155. package/dist/collection/components/link/sdds-link.js +118 -118
  156. package/dist/collection/components/link/sdds-link.stories.js +62 -62
  157. package/dist/collection/components/message/message.stories.js +109 -107
  158. package/dist/collection/components/message/message.stories.js.map +1 -1
  159. package/dist/collection/components/message/sdds-message.js +133 -133
  160. package/dist/collection/components/message/sdds-message.stories.js +90 -90
  161. package/dist/collection/components/modal/modal-native.stories.js +83 -83
  162. package/dist/collection/components/modal/modal-webcomponent.stories.js +82 -82
  163. package/dist/collection/components/modal/modal.js +267 -267
  164. package/dist/collection/components/popover-canvas/popover-canvas.js +273 -273
  165. package/dist/collection/components/popover-canvas/popover-canvas.stories.js +59 -59
  166. package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +71 -71
  167. package/dist/collection/components/popover-menu/popover-menu.js +221 -221
  168. package/dist/collection/components/popover-menu/popover-menu.stories.js +71 -71
  169. package/dist/collection/components/radio-button/radio-button-component.stories.js +53 -49
  170. package/dist/collection/components/radio-button/radio-button-component.stories.js.map +1 -1
  171. package/dist/collection/components/radio-button/radio-button.js +165 -165
  172. package/dist/collection/components/radio-button/radio-button.js.map +1 -1
  173. package/dist/collection/components/radio-button/radio-button.stories.js +45 -45
  174. package/dist/collection/components/side-menu/side-menu.stories.js +51 -51
  175. package/dist/collection/components/slider/slider.css +25 -14
  176. package/dist/collection/components/slider/slider.js +722 -722
  177. package/dist/collection/components/slider/slider.js.map +1 -1
  178. package/dist/collection/components/slider/slider.stories.js +205 -205
  179. package/dist/collection/components/spinner/spinner.js +62 -62
  180. package/dist/collection/components/spinner/spinner.stories.js +61 -61
  181. package/dist/collection/components/stepper/sdds-stepper.js +126 -126
  182. package/dist/collection/components/stepper/stepper-item/sdds-stepper-item.js +112 -112
  183. package/dist/collection/components/stepper/stepper.stories.js +88 -88
  184. package/dist/collection/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.js +99 -99
  185. package/dist/collection/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.js +155 -155
  186. package/dist/collection/components/tabs/folder-tabs/folder-tabs.js +256 -256
  187. package/dist/collection/components/tabs/folder-tabs/folder-tabs.stories.js +64 -64
  188. package/dist/collection/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.css +1 -1
  189. package/dist/collection/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.js +63 -63
  190. package/dist/collection/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.css +1 -1
  191. package/dist/collection/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.js +119 -119
  192. package/dist/collection/components/tabs/inline-tabs/inline-tabs.js +261 -261
  193. package/dist/collection/components/tabs/inline-tabs/inline-tabs.stories.js +58 -58
  194. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.js +63 -63
  195. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.js +119 -119
  196. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +217 -217
  197. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +59 -59
  198. package/dist/collection/components/textarea/textarea.js +414 -414
  199. package/dist/collection/components/textarea/textarea.stories.js +148 -148
  200. package/dist/collection/components/textfield/textfield.css +12 -67
  201. package/dist/collection/components/textfield/textfield.js +419 -419
  202. package/dist/collection/components/textfield/textfield.js.map +1 -1
  203. package/dist/collection/components/textfield/textfield.stories.js +209 -208
  204. package/dist/collection/components/textfield/textfield.stories.js.map +1 -1
  205. package/dist/collection/components/toast/sdds-toast.js +252 -252
  206. package/dist/collection/components/toast/sdds-toast.stories.js +70 -70
  207. package/dist/collection/components/toast/toast.stories.js +103 -103
  208. package/dist/collection/components/toggle/sdds-toggle.js +210 -210
  209. package/dist/collection/components/toggle/sdds-toggle.stories.js +78 -78
  210. package/dist/collection/components/toggle/toggle.stories.js +71 -71
  211. package/dist/collection/components/tooltip/tooltip.js +230 -230
  212. package/dist/collection/components/tooltip/tooltip.stories.js +103 -103
  213. package/dist/collection/components/utility/colour/background-color.stories.js +84 -84
  214. package/dist/collection/components/utility/colour/text-color.stories.js +84 -84
  215. package/dist/collection/foundations-stories/colour/colour-brand.stories.js +15 -15
  216. package/dist/collection/foundations-stories/colour/colour-scales.stories.js +54 -54
  217. package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +15 -15
  218. package/dist/collection/foundations-stories/grid/grid.stories.js +53 -53
  219. package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +11 -11
  220. package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +11 -11
  221. package/dist/collection/foundations-stories/typography/typography-body.stories.js +10 -10
  222. package/dist/collection/foundations-stories/typography/typography-detail.stories.js +10 -10
  223. package/dist/collection/foundations-stories/typography/typography-headline.stories.js +23 -23
  224. package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +10 -10
  225. package/dist/collection/index.js +2 -2
  226. package/dist/collection/utils/utils.js +13 -13
  227. package/dist/components/dropdown-option.js +92 -92
  228. package/dist/components/dropdown-option.js.map +1 -1
  229. package/dist/components/dropdown.js +290 -290
  230. package/dist/components/dropdown.js.map +1 -1
  231. package/dist/components/icon.js +51 -50
  232. package/dist/components/icon.js.map +1 -1
  233. package/dist/components/sdds-accordion-item.js +44 -44
  234. package/dist/components/sdds-accordion.js +26 -26
  235. package/dist/components/sdds-badges.js +65 -65
  236. package/dist/components/sdds-banner.js +101 -110
  237. package/dist/components/sdds-banner.js.map +1 -1
  238. package/dist/components/sdds-block.js +38 -38
  239. package/dist/components/sdds-breadcrumb-link.js +35 -35
  240. package/dist/components/sdds-breadcrumb-link.js.map +1 -1
  241. package/dist/components/sdds-breadcrumb.js +27 -27
  242. package/dist/components/sdds-button.js +46 -46
  243. package/dist/components/sdds-button.js.map +1 -1
  244. package/dist/components/sdds-card.js +66 -66
  245. package/dist/components/sdds-checkbox.js +67 -67
  246. package/dist/components/sdds-checkbox.js.map +1 -1
  247. package/dist/components/sdds-datetime.js +118 -118
  248. package/dist/components/sdds-divider.js +26 -26
  249. package/dist/components/sdds-dropdown-filter.js +129 -129
  250. package/dist/components/sdds-dropdown-filter.js.map +1 -1
  251. package/dist/components/sdds-folder-tabs-button.js +35 -35
  252. package/dist/components/sdds-folder-tabs-link.js +41 -41
  253. package/dist/components/sdds-folder-tabs.js +195 -195
  254. package/dist/components/sdds-footer-link-group.js +41 -41
  255. package/dist/components/sdds-footer-link.js +34 -34
  256. package/dist/components/sdds-footer-link.js.map +1 -1
  257. package/dist/components/sdds-footer.js +33 -33
  258. package/dist/components/sdds-header-cell.js +156 -156
  259. package/dist/components/sdds-inline-tabs-button.js +29 -29
  260. package/dist/components/sdds-inline-tabs-button.js.map +1 -1
  261. package/dist/components/sdds-inline-tabs-link.js +35 -35
  262. package/dist/components/sdds-inline-tabs-link.js.map +1 -1
  263. package/dist/components/sdds-inline-tabs.js +202 -202
  264. package/dist/components/sdds-link.js +42 -1
  265. package/dist/components/sdds-link.js.map +1 -1
  266. package/dist/components/sdds-message.js +53 -53
  267. package/dist/components/sdds-modal.js +115 -115
  268. package/dist/components/sdds-navigation-tabs-button.js +28 -28
  269. package/dist/components/sdds-navigation-tabs-link.js +34 -34
  270. package/dist/components/sdds-navigation-tabs.js +158 -158
  271. package/dist/components/sdds-popover-canvas.js +126 -126
  272. package/dist/components/sdds-popover-menu.js +98 -98
  273. package/dist/components/sdds-radio-button.js +46 -46
  274. package/dist/components/sdds-radio-button.js.map +1 -1
  275. package/dist/components/sdds-slider.js +384 -384
  276. package/dist/components/sdds-slider.js.map +1 -1
  277. package/dist/components/sdds-spinner.js +27 -27
  278. package/dist/components/sdds-stepper-item.js +56 -56
  279. package/dist/components/sdds-stepper.js +53 -53
  280. package/dist/components/sdds-table-body-row-expandable.js +95 -95
  281. package/dist/components/sdds-table-body.js +280 -280
  282. package/dist/components/sdds-table-footer.js +185 -185
  283. package/dist/components/sdds-table-header.js +115 -115
  284. package/dist/components/sdds-table-header.js.map +1 -1
  285. package/dist/components/sdds-table-toolbar.js +77 -77
  286. package/dist/components/sdds-table.js +81 -81
  287. package/dist/components/sdds-textarea.js +91 -91
  288. package/dist/components/sdds-textfield.js +95 -95
  289. package/dist/components/sdds-textfield.js.map +1 -1
  290. package/dist/components/sdds-toast.js +101 -101
  291. package/dist/components/sdds-toggle.js +55 -55
  292. package/dist/components/sdds-tooltip.js +116 -116
  293. package/dist/components/table-body-cell.js +94 -94
  294. package/dist/components/table-body-row.js +114 -114
  295. package/dist/components/table-body-row.js.map +1 -1
  296. package/dist/esm/index-fdfb114c.js +4 -4
  297. package/dist/esm/loader.js +1 -1
  298. package/dist/esm/polyfills/core-js.js +0 -0
  299. package/dist/esm/polyfills/dom.js +0 -0
  300. package/dist/esm/polyfills/es5-html-element.js +0 -0
  301. package/dist/esm/polyfills/index.js +0 -0
  302. package/dist/esm/polyfills/system.js +0 -0
  303. package/dist/esm/sdds-accordion-item.entry.js +18 -18
  304. package/dist/esm/sdds-accordion.entry.js +9 -9
  305. package/dist/esm/sdds-badges.entry.js +43 -43
  306. package/dist/esm/sdds-banner.entry.js +69 -69
  307. package/dist/esm/sdds-banner.entry.js.map +1 -1
  308. package/dist/esm/sdds-block.entry.js +21 -21
  309. package/dist/esm/sdds-body-cell_2.entry.js +158 -158
  310. package/dist/esm/sdds-body-cell_2.entry.js.map +1 -1
  311. package/dist/esm/sdds-breadcrumb-link.entry.js +14 -14
  312. package/dist/esm/sdds-breadcrumb-link.entry.js.map +1 -1
  313. package/dist/esm/sdds-breadcrumb.entry.js +12 -12
  314. package/dist/esm/sdds-button.entry.js +23 -23
  315. package/dist/esm/sdds-button.entry.js.map +1 -1
  316. package/dist/esm/sdds-card.entry.js +37 -37
  317. package/dist/esm/sdds-checkbox.entry.js +45 -45
  318. package/dist/esm/sdds-checkbox.entry.js.map +1 -1
  319. package/dist/esm/sdds-datetime.entry.js +84 -84
  320. package/dist/esm/sdds-divider.entry.js +9 -9
  321. package/dist/esm/sdds-dropdown-filter.entry.js +83 -83
  322. package/dist/esm/sdds-dropdown-filter.entry.js.map +1 -1
  323. package/dist/esm/sdds-dropdown_2.entry.js +317 -317
  324. package/dist/esm/sdds-dropdown_2.entry.js.map +1 -1
  325. package/dist/esm/sdds-folder-tabs-button.entry.js +15 -15
  326. package/dist/esm/sdds-folder-tabs-link.entry.js +18 -18
  327. package/dist/esm/sdds-folder-tabs.entry.js +167 -167
  328. package/dist/esm/sdds-footer-link-group.entry.js +19 -19
  329. package/dist/esm/sdds-footer-link.entry.js +16 -16
  330. package/dist/esm/sdds-footer-link.entry.js.map +1 -1
  331. package/dist/esm/sdds-footer.entry.js +15 -15
  332. package/dist/esm/sdds-header-cell.entry.js +124 -124
  333. package/dist/esm/sdds-icon.entry.js +31 -30
  334. package/dist/esm/sdds-icon.entry.js.map +1 -1
  335. package/dist/esm/sdds-inline-tabs-button.entry.js +11 -11
  336. package/dist/esm/sdds-inline-tabs-button.entry.js.map +1 -1
  337. package/dist/esm/sdds-inline-tabs-link.entry.js +14 -14
  338. package/dist/esm/sdds-inline-tabs-link.entry.js.map +1 -1
  339. package/dist/esm/sdds-inline-tabs.entry.js +175 -175
  340. package/dist/esm/sdds-link.entry.js +13 -13
  341. package/dist/esm/sdds-message.entry.js +27 -27
  342. package/dist/esm/sdds-modal.entry.js +85 -85
  343. package/dist/esm/sdds-navigation-tabs-button.entry.js +10 -10
  344. package/dist/esm/sdds-navigation-tabs-link.entry.js +13 -13
  345. package/dist/esm/sdds-navigation-tabs.entry.js +132 -132
  346. package/dist/esm/sdds-popover-canvas.entry.js +99 -99
  347. package/dist/esm/sdds-popover-menu.entry.js +73 -73
  348. package/dist/esm/sdds-radio-button.entry.js +25 -25
  349. package/dist/esm/sdds-radio-button.entry.js.map +1 -1
  350. package/dist/esm/sdds-slider.entry.js +347 -347
  351. package/dist/esm/sdds-slider.entry.js.map +1 -1
  352. package/dist/esm/sdds-spinner.entry.js +10 -10
  353. package/dist/esm/sdds-stepper-item.entry.js +27 -27
  354. package/dist/esm/sdds-stepper.entry.js +32 -32
  355. package/dist/esm/sdds-table-body-row-expandable.entry.js +71 -71
  356. package/dist/esm/sdds-table-body.entry.js +233 -233
  357. package/dist/esm/sdds-table-footer.entry.js +153 -153
  358. package/dist/esm/sdds-table-header.entry.js +89 -89
  359. package/dist/esm/sdds-table-header.entry.js.map +1 -1
  360. package/dist/esm/sdds-table-toolbar.entry.js +54 -54
  361. package/dist/esm/sdds-table.entry.js +57 -57
  362. package/dist/esm/sdds-textarea.entry.js +55 -55
  363. package/dist/esm/sdds-textfield.entry.js +59 -59
  364. package/dist/esm/sdds-textfield.entry.js.map +1 -1
  365. package/dist/esm/sdds-toast.entry.js +70 -70
  366. package/dist/esm/sdds-toggle.entry.js +32 -32
  367. package/dist/esm/sdds-tooltip.entry.js +92 -92
  368. package/dist/esm/tegel.js +1 -1
  369. package/dist/tegel/p-1df2e987.entry.js +2 -0
  370. package/dist/tegel/p-1df2e987.entry.js.map +1 -0
  371. package/dist/tegel/p-1e196fff.entry.js +2 -0
  372. package/dist/tegel/p-1e196fff.entry.js.map +1 -0
  373. package/dist/tegel/p-23998948.entry.js +2 -0
  374. package/dist/tegel/{p-cfacd8e6.entry.js.map → p-23998948.entry.js.map} +1 -1
  375. package/dist/tegel/p-29bcd369.entry.js +2 -0
  376. package/dist/tegel/p-29bcd369.entry.js.map +1 -0
  377. package/dist/tegel/p-3a93619e.entry.js +2 -0
  378. package/dist/tegel/p-3a93619e.entry.js.map +1 -0
  379. package/dist/tegel/p-5812ec42.entry.js +2 -0
  380. package/dist/tegel/p-5812ec42.entry.js.map +1 -0
  381. package/dist/tegel/{p-792e8c5d.entry.js → p-5ca26ce8.entry.js} +2 -2
  382. package/dist/tegel/p-5ca26ce8.entry.js.map +1 -0
  383. package/dist/tegel/p-5cc6d070.entry.js +2 -0
  384. package/dist/tegel/{p-90af19c6.entry.js.map → p-5cc6d070.entry.js.map} +1 -1
  385. package/dist/tegel/p-626434af.entry.js +2 -0
  386. package/dist/tegel/{p-1baafb40.entry.js.map → p-626434af.entry.js.map} +1 -1
  387. package/dist/tegel/p-68e4c190.entry.js +2 -0
  388. package/dist/tegel/{p-872bef70.entry.js.map → p-68e4c190.entry.js.map} +1 -1
  389. package/dist/tegel/{p-d87ce5e9.entry.js → p-88ba44a7.entry.js} +2 -2
  390. package/dist/tegel/p-88ba44a7.entry.js.map +1 -0
  391. package/dist/tegel/p-8b807df5.entry.js +2 -0
  392. package/dist/tegel/p-8b807df5.entry.js.map +1 -0
  393. package/dist/tegel/{p-8ee9e2f5.entry.js → p-ad3439b8.entry.js} +2 -2
  394. package/dist/tegel/{p-8ee9e2f5.entry.js.map → p-ad3439b8.entry.js.map} +1 -1
  395. package/dist/tegel/p-b8d838d1.entry.js +2 -0
  396. package/dist/tegel/p-b8d838d1.entry.js.map +1 -0
  397. package/dist/tegel/p-f23cb0ae.entry.js +2 -0
  398. package/dist/tegel/p-f23cb0ae.entry.js.map +1 -0
  399. package/dist/tegel/tegel.css +4 -4
  400. package/dist/tegel/tegel.esm.js +1 -1
  401. package/dist/tegel/tegel.esm.js.map +1 -1
  402. package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +17 -17
  403. package/dist/types/components/accordion/accordion.d.ts +5 -5
  404. package/dist/types/components/accordion/accordion.stories.d.ts +77 -77
  405. package/dist/types/components/badge/badge.stories.d.ts +61 -61
  406. package/dist/types/components/badge/badges.d.ts +16 -16
  407. package/dist/types/components/banner/banner.stories.d.ts +68 -68
  408. package/dist/types/components/banner/sdds-banner.d.ts +40 -48
  409. package/dist/types/components/banner/sdds-banner.stories.d.ts +82 -104
  410. package/dist/types/components/block/block-native.stories.d.ts +31 -31
  411. package/dist/types/components/block/sdds-block.d.ts +9 -9
  412. package/dist/types/components/block/sdds-block.stories.d.ts +32 -32
  413. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +12 -12
  414. package/dist/types/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.d.ts +13 -13
  415. package/dist/types/components/breadcrumb/sdds-breadcrumb.d.ts +5 -5
  416. package/dist/types/components/breadcrumb/sdds-breadcrumb.stories.d.ts +16 -16
  417. package/dist/types/components/button/button-component.d.ts +18 -18
  418. package/dist/types/components/button/button-native.stories.d.ts +159 -159
  419. package/dist/types/components/button/button-webcomponent.stories.d.ts +151 -151
  420. package/dist/types/components/card/card.stories.d.ts +137 -137
  421. package/dist/types/components/card/sdds-card.d.ts +39 -39
  422. package/dist/types/components/card/sdds-card.stories.d.ts +128 -128
  423. package/dist/types/components/checkbox/checkbox.stories.d.ts +51 -51
  424. package/dist/types/components/checkbox/sdds-checkbox.d.ts +38 -38
  425. package/dist/types/components/checkbox/sdds-checkbox.stories.d.ts +52 -52
  426. package/dist/types/components/chips/chips.stories.d.ts +101 -101
  427. package/dist/types/components/data-table/native-table.stories.d.ts +119 -119
  428. package/dist/types/components/data-table/table/table.d.ts +48 -48
  429. package/dist/types/components/data-table/table-body/table-body.d.ts +54 -54
  430. package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts +24 -24
  431. package/dist/types/components/data-table/table-body-row/table-body-row.d.ts +27 -27
  432. package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts +27 -27
  433. package/dist/types/components/data-table/table-component-basic.stories.d.ts +144 -144
  434. package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +139 -139
  435. package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +33 -33
  436. package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +131 -131
  437. package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +131 -131
  438. package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +131 -131
  439. package/dist/types/components/data-table/table-component-filtering.stories.d.ts +139 -139
  440. package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +144 -144
  441. package/dist/types/components/data-table/table-component-pagination.stories.d.ts +144 -144
  442. package/dist/types/components/data-table/table-component-sorting.stories.d.ts +183 -183
  443. package/dist/types/components/data-table/table-footer/table-footer.d.ts +50 -50
  444. package/dist/types/components/data-table/table-header/table-header.d.ts +27 -27
  445. package/dist/types/components/data-table/table-header-cell/table-header-cell.d.ts +43 -43
  446. package/dist/types/components/data-table/table-toolbar/table-toolbar.d.ts +22 -22
  447. package/dist/types/components/datetime/datetime.d.ts +48 -48
  448. package/dist/types/components/datetime/datetime.stories.d.ts +128 -128
  449. package/dist/types/components/divider/divider-webcomponent.stories.d.ts +58 -58
  450. package/dist/types/components/divider/divider.d.ts +5 -5
  451. package/dist/types/components/divider/divider.stories.d.ts +60 -60
  452. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +44 -44
  453. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +137 -137
  454. package/dist/types/components/dropdown/dropdown-native.stories.d.ts +72 -72
  455. package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +24 -24
  456. package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +144 -144
  457. package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +144 -144
  458. package/dist/types/components/dropdown/dropdown.d.ts +59 -59
  459. package/dist/types/components/footer/footer.stories.d.ts +45 -45
  460. package/dist/types/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.d.ts +13 -13
  461. package/dist/types/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.d.ts +11 -11
  462. package/dist/types/components/footer/webcomponent/sdds-footer.d.ts +9 -9
  463. package/dist/types/components/footer/webcomponent/sdds-footer.stories.d.ts +44 -44
  464. package/dist/types/components/header/header-all.stories.d.ts +31 -31
  465. package/dist/types/components/header/header-default.stories.d.ts +31 -31
  466. package/dist/types/components/header/header-inline.stories.d.ts +31 -31
  467. package/dist/types/components/header/header-search.stories.d.ts +31 -31
  468. package/dist/types/components/header/header-toolbar.stories.d.ts +31 -31
  469. package/dist/types/components/icon/icon-font.stories.d.ts +38 -38
  470. package/dist/types/components/icon/icon-web-component.stories.d.ts +38 -38
  471. package/dist/types/components/icon/icon.d.ts +12 -12
  472. package/dist/types/components/link/link.stories.d.ts +43 -43
  473. package/dist/types/components/link/sdds-link.d.ts +13 -13
  474. package/dist/types/components/link/sdds-link.stories.d.ts +58 -58
  475. package/dist/types/components/message/message.stories.d.ts +89 -89
  476. package/dist/types/components/message/sdds-message.d.ts +14 -14
  477. package/dist/types/components/message/sdds-message.stories.d.ts +88 -88
  478. package/dist/types/components/modal/modal-native.stories.d.ts +74 -74
  479. package/dist/types/components/modal/modal-webcomponent.stories.d.ts +70 -70
  480. package/dist/types/components/modal/modal.d.ts +37 -37
  481. package/dist/types/components/popover-canvas/popover-canvas.d.ts +33 -33
  482. package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +27 -27
  483. package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +32 -32
  484. package/dist/types/components/popover-menu/popover-menu.d.ts +24 -24
  485. package/dist/types/components/popover-menu/popover-menu.stories.d.ts +32 -32
  486. package/dist/types/components/radio-button/radio-button-component.stories.d.ts +39 -39
  487. package/dist/types/components/radio-button/radio-button.d.ts +26 -26
  488. package/dist/types/components/radio-button/radio-button.stories.d.ts +38 -38
  489. package/dist/types/components/side-menu/side-menu.stories.d.ts +42 -42
  490. package/dist/types/components/slider/slider.d.ts +86 -86
  491. package/dist/types/components/slider/slider.stories.d.ts +235 -235
  492. package/dist/types/components/spinner/spinner.d.ts +7 -7
  493. package/dist/types/components/spinner/spinner.stories.d.ts +47 -47
  494. package/dist/types/components/stepper/sdds-stepper.d.ts +17 -17
  495. package/dist/types/components/stepper/stepper-item/sdds-stepper-item.d.ts +17 -17
  496. package/dist/types/components/stepper/stepper.stories.d.ts +72 -72
  497. package/dist/types/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.d.ts +10 -10
  498. package/dist/types/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.d.ts +16 -16
  499. package/dist/types/components/tabs/folder-tabs/folder-tabs.d.ts +38 -38
  500. package/dist/types/components/tabs/folder-tabs/folder-tabs.stories.d.ts +52 -52
  501. package/dist/types/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.d.ts +7 -7
  502. package/dist/types/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.d.ts +13 -13
  503. package/dist/types/components/tabs/inline-tabs/inline-tabs.d.ts +40 -40
  504. package/dist/types/components/tabs/inline-tabs/inline-tabs.stories.d.ts +44 -44
  505. package/dist/types/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.d.ts +7 -7
  506. package/dist/types/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.d.ts +13 -13
  507. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +35 -35
  508. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +44 -44
  509. package/dist/types/components/textarea/textarea.d.ts +50 -50
  510. package/dist/types/components/textarea/textarea.stories.d.ts +139 -139
  511. package/dist/types/components/textfield/textfield.d.ts +52 -52
  512. package/dist/types/components/textfield/textfield.stories.d.ts +201 -201
  513. package/dist/types/components/toast/sdds-toast.d.ts +36 -36
  514. package/dist/types/components/toast/sdds-toast.stories.d.ts +56 -56
  515. package/dist/types/components/toast/toast.stories.d.ts +68 -68
  516. package/dist/types/components/toggle/sdds-toggle.d.ts +31 -31
  517. package/dist/types/components/toggle/sdds-toggle.stories.d.ts +74 -74
  518. package/dist/types/components/toggle/toggle.stories.d.ts +58 -58
  519. package/dist/types/components/tooltip/tooltip.d.ts +24 -24
  520. package/dist/types/components/tooltip/tooltip.stories.d.ts +66 -66
  521. package/dist/types/components/utility/colour/background-color.stories.d.ts +58 -58
  522. package/dist/types/components/utility/colour/text-color.stories.d.ts +58 -58
  523. package/dist/types/components.d.ts +2 -42
  524. package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts +13 -13
  525. package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts +13 -13
  526. package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts +13 -13
  527. package/dist/types/foundations-stories/grid/grid.stories.d.ts +35 -35
  528. package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts +8 -8
  529. package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts +8 -8
  530. package/dist/types/foundations-stories/typography/typography-body.stories.d.ts +8 -8
  531. package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts +8 -8
  532. package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts +21 -21
  533. package/dist/types/foundations-stories/typography/typography-paragraph.stories.d.ts +8 -8
  534. package/dist/types/index.d.ts +1 -1
  535. package/dist/types/utils/utils.d.ts +2 -2
  536. package/package.json +1 -1
  537. package/dist/components/sdds-link2.js +0 -46
  538. package/dist/components/sdds-link2.js.map +0 -1
  539. package/dist/tegel/p-1adb9259.entry.js +0 -2
  540. package/dist/tegel/p-1adb9259.entry.js.map +0 -1
  541. package/dist/tegel/p-1baafb40.entry.js +0 -2
  542. package/dist/tegel/p-2837b06c.entry.js +0 -2
  543. package/dist/tegel/p-2837b06c.entry.js.map +0 -1
  544. package/dist/tegel/p-58bc7a27.entry.js +0 -2
  545. package/dist/tegel/p-58bc7a27.entry.js.map +0 -1
  546. package/dist/tegel/p-70ccf3f7.entry.js +0 -2
  547. package/dist/tegel/p-70ccf3f7.entry.js.map +0 -1
  548. package/dist/tegel/p-792e8c5d.entry.js.map +0 -1
  549. package/dist/tegel/p-81c597fd.entry.js +0 -2
  550. package/dist/tegel/p-81c597fd.entry.js.map +0 -1
  551. package/dist/tegel/p-872bef70.entry.js +0 -2
  552. package/dist/tegel/p-90af19c6.entry.js +0 -2
  553. package/dist/tegel/p-b2269b6b.entry.js +0 -2
  554. package/dist/tegel/p-b2269b6b.entry.js.map +0 -1
  555. package/dist/tegel/p-b6fc0de7.entry.js +0 -2
  556. package/dist/tegel/p-b6fc0de7.entry.js.map +0 -1
  557. package/dist/tegel/p-bd09c184.entry.js +0 -2
  558. package/dist/tegel/p-bd09c184.entry.js.map +0 -1
  559. package/dist/tegel/p-cfacd8e6.entry.js +0 -2
  560. package/dist/tegel/p-d87ce5e9.entry.js.map +0 -1
@@ -4,337 +4,337 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-5ad19933.js');
6
6
 
7
- const dropdownCss$1 = ":root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-mode-light{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-958);--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100);--sdds-dropdown-disabled:var(--sdds-grey-400);--sdds-dropdown-border:var(--sdds-grey-100);--sdds-dropdown-label-inside:var(--sdds-grey-700);--sdds-dropdown-label-outside:var(--sdds-grey-958);--sdds-dropdown-placeholder:var(--sdds-grey-700);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-900);--sdds-dropdown-option-disabled-color:var(--sdds-grey-400)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100);--sdds-dropdown-background-disabled:var(--sdds-grey-50)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-white);--sdds-dropdown-background-hover:var(--sdds-grey-50);--sdds-dropdown-background-disabled:var(--sdds-white)}.sdds-mode-dark{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-400);--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-grey-900);--sdds-dropdown-disabled:var(--sdds-grey-800);--sdds-dropdown-border:var(--sdds-grey-800);--sdds-dropdown-label-inside:var(--sdds-grey-400);--sdds-dropdown-label-outside:var(--sdds-grey-100);--sdds-dropdown-placeholder:var(--sdds-grey-400);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-50);--sdds-dropdown-option-disabled-color:var(--sdds-grey-800)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-grey-868)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-grey-900)}.sdds-dropdown-helper{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);color:var(--sdds-grey-700);margin-top:var(--sdds-spacing-element-4);display:flex}.sdds-dropdown-helper .sdds-dropdown-error-icon{width:16px;height:16px;padding-right:9px;display:none}.sdds-dropdown-label-inside{font:var(--sdds-detail-ex-07);letter-spacing:var(--sdds-detail-ex-07-ls);color:var(--sdds-dropdown-label-inside)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-dropdown-label-outside);margin-bottom:var(--sdds-spacing-element-8)}:root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:white;--sdds-checkbox-background-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){--sdds-dropdown-label-outside:var(--sdds-dropdown-label-outside);--sdds-dropdown-label-outside-text-decoration:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);box-sizing:border-box}:host{position:relative;z-index:auto}:host::part(dropdown-filter-disabled){cursor:not-allowed;caret-color:transparent;pointer-events:none;color:var(--sdds-dropdown-disabled);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-dropdown-disabled)}.sdds-dropdown{position:relative;display:flex;flex-flow:column wrap;width:100%;border:0}.sdds-dropdown,.sdds-dropdown *{box-sizing:border-box}.sdds-dropdown .sdds-dropdown-toggle{font:var(--sdds-detail-ex-02);letter-spacing:var(--sdds-detail-ex-02-ls);color:var(--sdds-dropdown-color);display:flex;align-items:center;background-color:var(--sdds-dropdown-background);cursor:pointer;transition:box-shadow 0.1s ease-in, border-bottom-color 150ms ease;border-radius:4px 4px 0 0;border:none;border-bottom:1px solid var(--sdds-dropdown-border-not-focused);box-shadow:none;width:100%;text-align:left;outline:none;padding:20px 16px;display:flex;align-items:center}.sdds-dropdown .sdds-dropdown-toggle:hover{border-bottom-color:var(--sdds-grey-600)}.sdds-dropdown .sdds-dropdown-toggle:focus::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:2px solid var(--sdds-blue-400)}.sdds-dropdown .sdds-dropdown-toggle:active,.sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected{border-bottom-color:var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-toggle.is-filter{transition:border 0.1s ease-in 0.1s;cursor:text}.sdds-dropdown .sdds-dropdown-toggle-lg{padding:20px 16px}.sdds-dropdown .sdds-dropdown-toggle-md{padding:16px}.sdds-dropdown .sdds-dropdown-toggle-sm{padding:12px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-lg{padding:20px 16px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-md{padding:16px 16px 12px}.sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus){border-bottom:1px solid var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-arrow{width:20px;position:absolute;right:16px;color:inherit;transform:rotate(0);transition:transform ease 250ms}.sdds-dropdown .sdds-dropdown-placeholder{color:var(--sdds-grey-700)}.sdds-dropdown .sdds-dropdown-label{display:grid;width:calc(100% - 25px)}.sdds-dropdown .sdds-dropdown-label-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-dropdown.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-container--label-inside{padding-bottom:12px}.sdds-dropdown .sdds-dropdown-filter{border:0;outline:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-link);width:100%;background:transparent}.sdds-dropdown .sdds-dropdown-filter:focus{outline:none}.sdds-dropdown .sdds-dropdown-filter::placeholder{color:var(--sdds-grey-700);opacity:1}.sdds-dropdown .sdds-dropdown-menu{z-index:100;background-color:var(--sdds-dropdown-background);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--sdds-dropdown-border);border-right-color:var(--sdds-dropdown-border);overflow-x:hidden;overflow-y:auto;transform:scaleY(0);transform-origin:top;transition:transform 250ms ease}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar{width:4px;background-color:inherit}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}.sdds-dropdown .sdds-dropdown-menu ::-webkit-scrollbar-button{height:0;width:0}.sdds-dropdown.sdds-dropdown-lg .sdds-dropdown-toggle{height:56px}.sdds-dropdown.sdds-dropdown-md .sdds-dropdown-toggle{height:48px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-toggle{height:40px}:host(.sdds-dropdown--open-upwards) .sdds-dropdown .sdds-dropdown-menu{top:auto;bottom:100%;box-shadow:0 -1px 3px 0 rgba(0, 0, 0, 0.1);transform-origin:bottom}:host(.sdds-dropdown--open-upwards[label-position=outside]) span.sdds-dropdown-menu{bottom:calc(100% - 24px)}:host([disabled=true]){cursor:not-allowed}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle{pointer-events:none;color:var(--sdds-dropdown-option-disabled-color);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-dropdown-placeholder)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-dropdown-label-inside)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before{content:none}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle:focus::before{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper{color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper .sdds-dropdown-error-icon{display:flex}:host ::slotted(sdds-dropdown-option){display:flex;padding:var(--sdds-spacing-element-16);background-color:var(--sdds-dropdown-background);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-dropdown-border);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box;color:var(--sdds-dropdown-option-color)}:host ::slotted(sdds-dropdown-option:last-child){border-bottom-color:transparent;border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::slotted(sdds-dropdown-option:hover),:host ::slotted(sdds-dropdown-option:focus){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:focus){outline:none}:host ::slotted(sdds-dropdown-option:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host ::slotted(sdds-dropdown-option.sdds-dropdown--selected),:host ::slotted(sdds-dropdown-option.selected),:host ::slotted(sdds-dropdown-option.active),:host ::slotted(sdds-dropdown-option:active){background-color:var(--sdds-dropdown-background-hover);border-top:1px solid var(--sdds-dropdown-border);border-bottom:1px solid var(--sdds-dropdown-border)}:host ::slotted(sdds-dropdown-option.sdds-option--no-result){cursor:not-allowed;pointer-events:none}:host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),:host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled){cursor:not-allowed;color:var(--sdds-dropdown-option-disabled-color);background-color:var(--sdds-dropdown-background-disabled)}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child){border-radius:4px 4px 0 0}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child){border-radius:0;border-bottom:1px solid var(--sdds-dropdown-border)}.sdds-option-label{margin:auto 0;display:flex;align-content:center;text-decoration:none;flex-grow:2}.sdds-option-checkmark{color:inherit;opacity:0;transition:opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);margin-left:var(--sdds-spacing-element-16)}.sdds-option-checkmark path{color:var(--sdds-dropdown-option-color)}:host([size=sm]) ::slotted(sdds-dropdown-option){padding:var(--sdds-spacing-element-12) var(--sdds-spacing-element-16)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle{box-shadow:0 -1px 3px -1px rgba(0, 0, 0, 0.1);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle.is-filter::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:1px solid var(--sdds-blue-400)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-arrow{transform:rotate(180deg)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-menu{transform:scaleY(1)}:host(.sdds-dropdown--open) ::slotted(sdds-dropdown-option){visibility:visible;opacity:1}:host(.selected) .sdds-option-checkmark{opacity:1}.sdds-dropdown-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-label-inside);position:absolute;transition:transform 250ms ease, color 200ms ease;width:calc(100% - 63px);overflow:hidden;text-overflow:ellipsis;transform:translate(0, -10px);font-size:10px}.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside .sdds-dropdown-placeholder{display:block;padding-top:4px}.sdds-dropdown-lg .sdds-dropdown-label-inside{display:block;top:16px}.sdds-dropdown-md .sdds-dropdown-label-inside{display:block;top:12px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-inside{display:none}.sdds-dropdown-multiselect-result{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-option-checkbox{margin-right:8px}.sdds-form-label{display:flex}";
7
+ const dropdownCss$1 = ":root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-mode-light{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-958);--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100);--sdds-dropdown-disabled:var(--sdds-grey-400);--sdds-dropdown-border:var(--sdds-grey-100);--sdds-dropdown-label-inside:var(--sdds-grey-700);--sdds-dropdown-label-outside:var(--sdds-grey-958);--sdds-dropdown-placeholder:var(--sdds-grey-700);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-900);--sdds-dropdown-option-disabled-color:var(--sdds-grey-400);--sdds-dropdown-background-disabled:var(--sdds-dropdown-background)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-white);--sdds-dropdown-background-hover:var(--sdds-grey-50)}.sdds-mode-dark{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-400);--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-disabled:var(--sdds-grey-800);--sdds-dropdown-border:var(--sdds-grey-800);--sdds-dropdown-label-inside:var(--sdds-grey-400);--sdds-dropdown-label-outside:var(--sdds-grey-100);--sdds-dropdown-placeholder:var(--sdds-grey-400);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-50);--sdds-dropdown-option-disabled-color:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-dropdown-background)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.sdds-dropdown-helper{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);color:var(--sdds-grey-700);margin-top:var(--sdds-spacing-element-4);display:flex}.sdds-dropdown-helper .sdds-dropdown-error-icon{width:16px;height:16px;padding-right:9px;display:none}.sdds-dropdown-label-inside{font:var(--sdds-detail-ex-07);letter-spacing:var(--sdds-detail-ex-07-ls);color:var(--sdds-dropdown-label-inside)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-dropdown-label-outside);margin-bottom:var(--sdds-spacing-element-8)}:root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-background-opacity-hover:0.12;--sdds-checkbox-background-opacity-focus:0.24;--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:var(--sdds-grey-600);--sdds-checkbox-background-focus:var(--sdds-grey-600);--sdds-checkbox-background-opacity-hover:0.48;--sdds-checkbox-background-opacity-focus:0.72;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:var(--sdds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){--sdds-dropdown-label-outside:var(--sdds-dropdown-label-outside);--sdds-dropdown-label-outside-text-decoration:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);box-sizing:border-box}:host{position:relative;z-index:auto}:host::part(dropdown-filter-disabled){cursor:not-allowed;caret-color:transparent;pointer-events:none;color:var(--sdds-dropdown-disabled);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-dropdown-disabled)}.sdds-dropdown{position:relative;display:flex;flex-flow:column wrap;width:100%;border:0}.sdds-dropdown,.sdds-dropdown *{box-sizing:border-box}.sdds-dropdown .sdds-dropdown-toggle{font:var(--sdds-detail-ex-02);letter-spacing:var(--sdds-detail-ex-02-ls);color:var(--sdds-dropdown-color);display:flex;align-items:center;background-color:var(--sdds-dropdown-background);cursor:pointer;transition:box-shadow 0.1s ease-in, border-bottom-color 150ms ease;border-radius:4px 4px 0 0;border:none;border-bottom:1px solid var(--sdds-dropdown-border-not-focused);box-shadow:none;width:100%;text-align:left;outline:none;padding:20px 16px;display:flex;align-items:center}.sdds-dropdown .sdds-dropdown-toggle:hover{border-bottom-color:var(--sdds-grey-600)}.sdds-dropdown .sdds-dropdown-toggle:focus::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:2px solid var(--sdds-blue-400)}.sdds-dropdown .sdds-dropdown-toggle:active,.sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected{border-bottom-color:var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-toggle.is-filter{transition:border 0.1s ease-in 0.1s;cursor:text}.sdds-dropdown .sdds-dropdown-toggle-lg{padding:20px 16px}.sdds-dropdown .sdds-dropdown-toggle-md{padding:16px}.sdds-dropdown .sdds-dropdown-toggle-sm{padding:12px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-lg{padding:20px 16px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-md{padding:16px 16px 12px}.sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus){border-bottom:1px solid var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-arrow{width:20px;position:absolute;right:16px;color:inherit;transform:rotate(0);transition:transform ease 250ms}.sdds-dropdown .sdds-dropdown-placeholder{color:var(--sdds-grey-700)}.sdds-dropdown .sdds-dropdown-label{display:grid;width:calc(100% - 25px)}.sdds-dropdown .sdds-dropdown-label-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-dropdown.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-container--label-inside{padding-bottom:12px}.sdds-dropdown .sdds-dropdown-filter{border:0;outline:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-link);width:100%;background:transparent}.sdds-dropdown .sdds-dropdown-filter:focus{outline:none}.sdds-dropdown .sdds-dropdown-filter::placeholder{color:var(--sdds-grey-700);opacity:1}.sdds-dropdown .sdds-dropdown-menu{z-index:100;background-color:var(--sdds-dropdown-background);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--sdds-dropdown-border);border-right-color:var(--sdds-dropdown-border);overflow-x:hidden;overflow-y:auto;transform:scaleY(0);transform-origin:top;transition:transform 250ms ease}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar{width:4px;background-color:inherit}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}.sdds-dropdown .sdds-dropdown-menu ::-webkit-scrollbar-button{height:0;width:0}.sdds-dropdown.sdds-dropdown-lg .sdds-dropdown-toggle{height:56px}.sdds-dropdown.sdds-dropdown-md .sdds-dropdown-toggle{height:48px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-toggle{height:40px}:host(.sdds-dropdown--open-upwards) .sdds-dropdown .sdds-dropdown-menu{top:auto;bottom:100%;box-shadow:0 -1px 3px 0 rgba(0, 0, 0, 0.1);transform-origin:bottom}:host(.sdds-dropdown--open-upwards[label-position=outside]) span.sdds-dropdown-menu{bottom:calc(100% - 24px)}:host([disabled=true]){cursor:not-allowed}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle{pointer-events:none;color:var(--sdds-dropdown-option-disabled-color);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-dropdown-placeholder)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-dropdown-label-inside)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before{content:none}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle:focus::before{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper{color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper .sdds-dropdown-error-icon{display:flex}:host ::slotted(sdds-dropdown-option){display:flex;padding:var(--sdds-spacing-element-16);background-color:var(--sdds-dropdown-background);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-dropdown-border);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box;color:var(--sdds-dropdown-option-color)}:host ::slotted(sdds-dropdown-option:last-child){border-bottom-color:transparent;border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::slotted(sdds-dropdown-option:hover),:host ::slotted(sdds-dropdown-option:focus){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:focus){outline:none}:host ::slotted(sdds-dropdown-option:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host ::slotted(sdds-dropdown-option.sdds-dropdown--selected),:host ::slotted(sdds-dropdown-option.selected),:host ::slotted(sdds-dropdown-option.active),:host ::slotted(sdds-dropdown-option:active){background-color:var(--sdds-dropdown-background-hover);border-top:1px solid var(--sdds-dropdown-border);border-bottom:1px solid var(--sdds-dropdown-border)}:host ::slotted(sdds-dropdown-option.sdds-option--no-result){cursor:not-allowed;pointer-events:none}:host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),:host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled){cursor:not-allowed;color:var(--sdds-dropdown-option-disabled-color);background-color:var(--sdds-dropdown-background-disabled)}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child){border-radius:4px 4px 0 0}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child){border-radius:0;border-bottom:1px solid var(--sdds-dropdown-border)}.sdds-option-label{margin:auto 0;display:flex;align-content:center;text-decoration:none;flex-grow:2}.sdds-option-checkmark{color:inherit;opacity:0;transition:opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);margin-left:var(--sdds-spacing-element-16)}.sdds-option-checkmark path{color:var(--sdds-dropdown-option-color)}:host([size=sm]) ::slotted(sdds-dropdown-option){padding:var(--sdds-spacing-element-12) var(--sdds-spacing-element-16)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle{box-shadow:0 -1px 3px -1px rgba(0, 0, 0, 0.1);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle.is-filter::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:1px solid var(--sdds-blue-400)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-arrow{transform:rotate(180deg)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-menu{transform:scaleY(1)}:host(.sdds-dropdown--open) ::slotted(sdds-dropdown-option){visibility:visible;opacity:1}:host(.selected) .sdds-option-checkmark{opacity:1}.sdds-dropdown-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-label-inside);position:absolute;transition:transform 250ms ease, color 200ms ease;width:calc(100% - 63px);overflow:hidden;text-overflow:ellipsis;transform:translate(0, -10px);font-size:10px}.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside .sdds-dropdown-placeholder{display:block;padding-top:4px}.sdds-dropdown-lg .sdds-dropdown-label-inside{display:block;top:16px}.sdds-dropdown-md .sdds-dropdown-label-inside{display:block;top:12px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-inside{display:none}.sdds-dropdown-multiselect-result{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-option-checkbox{margin-right:8px}.sdds-form-label{display:flex}";
8
8
 
9
- const Dropdown = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.inputSearch = index.createEvent(this, "inputSearch", 7);
13
- this.modeVariant = null;
14
- this.placeholder = undefined;
15
- this.defaultOption = undefined;
16
- this.selectedOption = undefined;
17
- this.disabled = false;
18
- this.type = 'default';
19
- this.size = 'lg';
20
- this.inline = false;
21
- this.labelPosition = 'no-label';
22
- this.label = undefined;
23
- this.state = false;
24
- this.helper = '';
25
- this.openDirection = 'auto';
26
- this.optionValues = [];
27
- this.optionLabels = [];
28
- this.open = false;
29
- this.node = undefined;
30
- this.selectedLabel = '';
31
- this.selectedValue = '';
32
- this.selectedValuesArray = [];
33
- this.selectedLabelsArray = [];
34
- this.dropdownUniqueClass = '';
35
- this.openUpwards = false;
36
- this.dropdownMenuHeight = 0;
37
- this.dropdownMenuSelector = undefined;
38
- this.listItemIndex = -1;
39
- this.listItemArray = undefined;
40
- this.listItemObject = undefined;
41
- }
42
- componentWillLoad() {
43
- // If default option is set, update the default selectedLabel value
44
- // this.host.children is a HTMLCollection type, cannot use forEach
45
- this.listItemObject = this.host.children;
46
- this.listItemArray = Array.from(this.listItemObject);
47
- this.listItemArray.map((listItem) => {
48
- this.optionValues.push(listItem.value);
49
- this.optionLabels.push(listItem.innerText.trim());
50
- });
51
- this.setOptionFromOutside(this.defaultOption);
52
- if (this.size === 'small') {
53
- this.size = 'sm';
54
- console.warn('size="small" is deprecated, use size="sm" instead');
55
- }
56
- if (this.size === 'medium') {
57
- this.size = 'md';
58
- console.warn('size="medium" is deprecated, use size="md" instead');
59
- }
60
- if (this.size === 'large') {
61
- this.size = 'lg';
62
- console.warn('size="large" is deprecated, use size="lg" instead');
63
- }
64
- }
65
- setOptionFromOutside(optionValue) {
66
- if (optionValue) {
67
- this.deselectAll();
68
- // TODO
69
- // eslint-disable-next-line no-param-reassign
70
- optionValue = optionValue.split(',');
71
- for (let i = 0; i < this.host.children.length; i++) {
72
- // Todo - specify type
73
- const el = this.host.children[i];
74
- if (optionValue.includes(el.value.trim())) {
75
- this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];
76
- this.selectedValuesArray = [...this.selectedValuesArray, el.value];
77
- this.selectedLabel = el.textContent;
78
- this.selectedValue = el.value;
79
- el.setAttribute('selectedLabel', 'true');
80
- el.setAttribute('selected', 'true');
81
- }
82
- else {
83
- el.setAttribute('selectedLabel', 'false');
84
- el.setAttribute('selected', 'false');
85
- }
86
- }
87
- }
88
- }
89
- changeSelectedOption() {
90
- if (this.selectedValuesArray.includes(this.selectedOption)) {
91
- this.resetOption();
92
- }
93
- this.setOptionFromOutside(this.selectedOption);
94
- this.host.setAttribute('selected-option', '');
95
- }
96
- handleDocClick(ev) {
97
- // To stop bubble click
98
- ev.stopPropagation();
99
- const target = ev ? ev.composedPath()[0] : window.event.target[0];
100
- if (this.node !== undefined && this.node.contains(target)) {
101
- if (typeof this.textInput !== 'undefined' || this.textInput === null) {
102
- this.textInput.focus();
103
- }
104
- }
105
- else {
106
- this.tabbingLabelReset();
107
- this.open = false;
108
- }
109
- }
110
- keyListener(ev) {
111
- if (!this.disabled) {
112
- switch (ev.key) {
113
- case 'ArrowDown':
114
- if (this.open) {
115
- ev.preventDefault();
116
- if (this.listItemIndex < this.listItemArray.length - 1) {
117
- this.listItemIndex++;
118
- }
119
- else {
120
- this.listItemIndex = 0;
121
- }
122
- this.listItemObject[this.listItemIndex].focus();
123
- }
124
- break;
125
- case 'ArrowUp':
126
- if (this.open) {
127
- ev.preventDefault();
128
- if (this.listItemIndex > 0) {
129
- this.listItemIndex--;
130
- }
131
- else {
132
- this.listItemIndex = this.listItemArray.length - 1;
133
- }
134
- this.listItemObject[this.listItemIndex].focus();
135
- }
136
- break;
137
- case 'Tab':
138
- this.open = false;
139
- break;
140
- case 'Escape':
141
- this.open = false;
142
- this.node.focus();
143
- break;
144
- }
145
- }
146
- }
147
- handleClick() {
148
- this.open = this.open === false;
149
- if (this.openDirection === 'auto') {
150
- this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;
151
- const distanceToBottom = this.host.getBoundingClientRect().top;
152
- const viewportHeight = window.innerHeight;
153
- this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;
154
- // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
155
- // Additional 57px is added as compensation for dropdown element own input/button height
156
- // It is added on handleClick due to possible dynamic injection of data when component is already rendered
157
- }
158
- else {
159
- this.openUpwards = this.openDirection === 'up';
160
- }
161
- }
162
- tabbingLabelReset() {
163
- if (typeof this.textInput !== 'undefined' || this.textInput === null) {
164
- if (!this.selectedLabel && this.selectedLabel.length <= 0) {
165
- this.textInput.value = '';
166
- this.inputSearch.emit('');
167
- }
168
- if (this.selectedLabel !== this.textInput.value) {
169
- this.textInput.value = this.selectedLabel;
170
- }
171
- }
172
- }
173
- selectOptionHandler(event) {
174
- this.open = this.type === 'multiselect';
175
- if (this.type !== 'multiselect') {
176
- this.selectedLabel = event.detail.label;
177
- this.selectedValue = event.detail.value;
178
- this.tabbingLabelReset();
179
- }
180
- else {
181
- if (this.selectedValuesArray.includes(event.detail.value)) {
182
- const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);
183
- this.selectedValuesArray = this.selectedValuesArray.filter((_value, index) => index !== itemIndex);
184
- this.selectedLabelsArray = this.selectedLabelsArray.filter((_value, index) => index !== itemIndex);
185
- }
186
- else {
187
- this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];
188
- this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];
189
- }
190
- }
191
- }
192
- handleSearch(ev) {
193
- const searchTerm = ev.target.value;
194
- this.inputSearch.emit(searchTerm);
195
- this.open = true;
196
- }
197
- deselectAll() {
198
- this.selectedLabel = '';
199
- this.selectedValue = '';
200
- this.selectedLabelsArray = [];
201
- this.selectedValuesArray = [];
202
- this.listItemArray = this.listItemArray.map((optionItem) => (Object.assign(Object.assign({}, optionItem), { selected: false })));
203
- }
204
- async resetOption() {
205
- this.deselectAll();
206
- this.open = false;
207
- if (this.defaultOption) {
208
- this.setOptionFromOutside(this.defaultOption);
209
- }
210
- }
211
- render() {
9
+ const Dropdown = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ this.inputSearch = index.createEvent(this, "inputSearch", 7);
13
+ this.modeVariant = null;
14
+ this.placeholder = undefined;
15
+ this.defaultOption = undefined;
16
+ this.selectedOption = undefined;
17
+ this.disabled = false;
18
+ this.type = 'default';
19
+ this.size = 'lg';
20
+ this.inline = false;
21
+ this.labelPosition = 'no-label';
22
+ this.label = undefined;
23
+ this.state = false;
24
+ this.helper = '';
25
+ this.openDirection = 'auto';
26
+ this.optionValues = [];
27
+ this.optionLabels = [];
28
+ this.open = false;
29
+ this.node = undefined;
30
+ this.selectedLabel = '';
31
+ this.selectedValue = '';
32
+ this.selectedValuesArray = [];
33
+ this.selectedLabelsArray = [];
34
+ this.dropdownUniqueClass = '';
35
+ this.openUpwards = false;
36
+ this.dropdownMenuHeight = 0;
37
+ this.dropdownMenuSelector = undefined;
38
+ this.listItemIndex = -1;
39
+ this.listItemArray = undefined;
40
+ this.listItemObject = undefined;
41
+ }
42
+ componentWillLoad() {
43
+ // If default option is set, update the default selectedLabel value
44
+ // this.host.children is a HTMLCollection type, cannot use forEach
45
+ this.listItemObject = this.host.children;
46
+ this.listItemArray = Array.from(this.listItemObject);
47
+ this.listItemArray.map((listItem) => {
48
+ this.optionValues.push(listItem.value);
49
+ this.optionLabels.push(listItem.innerText.trim());
50
+ });
51
+ this.setOptionFromOutside(this.defaultOption);
52
+ if (this.size === 'small') {
53
+ this.size = 'sm';
54
+ console.warn('size="small" is deprecated, use size="sm" instead');
55
+ }
56
+ if (this.size === 'medium') {
57
+ this.size = 'md';
58
+ console.warn('size="medium" is deprecated, use size="md" instead');
59
+ }
60
+ if (this.size === 'large') {
61
+ this.size = 'lg';
62
+ console.warn('size="large" is deprecated, use size="lg" instead');
63
+ }
64
+ }
65
+ setOptionFromOutside(optionValue) {
66
+ if (optionValue) {
67
+ this.deselectAll();
68
+ // TODO
69
+ // eslint-disable-next-line no-param-reassign
70
+ optionValue = optionValue.split(',');
71
+ for (let i = 0; i < this.host.children.length; i++) {
72
+ // Todo - specify type
73
+ const el = this.host.children[i];
74
+ if (optionValue.includes(el.value.trim())) {
75
+ this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];
76
+ this.selectedValuesArray = [...this.selectedValuesArray, el.value];
77
+ this.selectedLabel = el.textContent;
78
+ this.selectedValue = el.value;
79
+ el.setAttribute('selectedLabel', 'true');
80
+ el.setAttribute('selected', 'true');
81
+ }
82
+ else {
83
+ el.setAttribute('selectedLabel', 'false');
84
+ el.setAttribute('selected', 'false');
85
+ }
86
+ }
87
+ }
88
+ }
89
+ changeSelectedOption() {
90
+ if (this.selectedValuesArray.includes(this.selectedOption)) {
91
+ this.resetOption();
92
+ }
93
+ this.setOptionFromOutside(this.selectedOption);
94
+ this.host.setAttribute('selected-option', '');
95
+ }
96
+ handleDocClick(ev) {
97
+ // To stop bubble click
98
+ ev.stopPropagation();
99
+ const target = ev ? ev.composedPath()[0] : window.event.target[0];
100
+ if (this.node !== undefined && this.node.contains(target)) {
101
+ if (typeof this.textInput !== 'undefined' || this.textInput === null) {
102
+ this.textInput.focus();
103
+ }
104
+ }
105
+ else {
106
+ this.tabbingLabelReset();
107
+ this.open = false;
108
+ }
109
+ }
110
+ keyListener(ev) {
111
+ if (!this.disabled) {
112
+ switch (ev.key) {
113
+ case 'ArrowDown':
114
+ if (this.open) {
115
+ ev.preventDefault();
116
+ if (this.listItemIndex < this.listItemArray.length - 1) {
117
+ this.listItemIndex++;
118
+ }
119
+ else {
120
+ this.listItemIndex = 0;
121
+ }
122
+ this.listItemObject[this.listItemIndex].focus();
123
+ }
124
+ break;
125
+ case 'ArrowUp':
126
+ if (this.open) {
127
+ ev.preventDefault();
128
+ if (this.listItemIndex > 0) {
129
+ this.listItemIndex--;
130
+ }
131
+ else {
132
+ this.listItemIndex = this.listItemArray.length - 1;
133
+ }
134
+ this.listItemObject[this.listItemIndex].focus();
135
+ }
136
+ break;
137
+ case 'Tab':
138
+ this.open = false;
139
+ break;
140
+ case 'Escape':
141
+ this.open = false;
142
+ this.node.focus();
143
+ break;
144
+ }
145
+ }
146
+ }
147
+ handleClick() {
148
+ this.open = this.open === false;
149
+ if (this.openDirection === 'auto') {
150
+ this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;
151
+ const distanceToBottom = this.host.getBoundingClientRect().top;
152
+ const viewportHeight = window.innerHeight;
153
+ this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;
154
+ // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
155
+ // Additional 57px is added as compensation for dropdown element own input/button height
156
+ // It is added on handleClick due to possible dynamic injection of data when component is already rendered
157
+ }
158
+ else {
159
+ this.openUpwards = this.openDirection === 'up';
160
+ }
161
+ }
162
+ tabbingLabelReset() {
163
+ if (typeof this.textInput !== 'undefined' || this.textInput === null) {
164
+ if (!this.selectedLabel && this.selectedLabel.length <= 0) {
165
+ this.textInput.value = '';
166
+ this.inputSearch.emit('');
167
+ }
168
+ if (this.selectedLabel !== this.textInput.value) {
169
+ this.textInput.value = this.selectedLabel;
170
+ }
171
+ }
172
+ }
173
+ selectOptionHandler(event) {
174
+ this.open = this.type === 'multiselect';
175
+ if (this.type !== 'multiselect') {
176
+ this.selectedLabel = event.detail.label;
177
+ this.selectedValue = event.detail.value;
178
+ this.tabbingLabelReset();
179
+ }
180
+ else {
181
+ if (this.selectedValuesArray.includes(event.detail.value)) {
182
+ const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);
183
+ this.selectedValuesArray = this.selectedValuesArray.filter((_value, index) => index !== itemIndex);
184
+ this.selectedLabelsArray = this.selectedLabelsArray.filter((_value, index) => index !== itemIndex);
185
+ }
186
+ else {
187
+ this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];
188
+ this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];
189
+ }
190
+ }
191
+ }
192
+ handleSearch(ev) {
193
+ const searchTerm = ev.target.value;
194
+ this.inputSearch.emit(searchTerm);
195
+ this.open = true;
196
+ }
197
+ deselectAll() {
198
+ this.selectedLabel = '';
199
+ this.selectedValue = '';
200
+ this.selectedLabelsArray = [];
201
+ this.selectedValuesArray = [];
202
+ this.listItemArray = this.listItemArray.map((optionItem) => (Object.assign(Object.assign({}, optionItem), { selected: false })));
203
+ }
204
+ async resetOption() {
205
+ this.deselectAll();
206
+ this.open = false;
207
+ if (this.defaultOption) {
208
+ this.setOptionFromOutside(this.defaultOption);
209
+ }
210
+ }
211
+ render() {
212
212
  return (index.h(index.Host, { class: `
213
213
  ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
214
214
  ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}
215
215
  ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}
216
216
  ${this.inline ? 'sdds-dropdown-inline' : ''}
217
- ${this.selectedLabel.length > 0 || this.selectedLabel === ''
218
- ? 'sdds-dropdown--selected'
217
+ ${this.selectedLabel.length > 0 || this.selectedLabel === ''
218
+ ? 'sdds-dropdown--selected'
219
219
  : ''}
220
220
  ${this.state ? 'sdds-dropdown--error' : ''}
221
221
  ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}
222
- ${this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0
223
- ? 'sdds-dropdown--label-inside-position'
222
+ ${this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0
223
+ ? 'sdds-dropdown--label-inside-position'
224
224
  : ''}
225
- `, "selected-value": this.selectedValue, "selected-text": this.selectedLabel, "multi-selected-values": JSON.stringify(this.selectedValuesArray), "multi-selected-labels": JSON.stringify(this.selectedLabelsArray) }, index.h("span", { class: `sdds-dropdown sdds-dropdown-${this.size}` }, this.labelPosition === 'outside' && this.label.length > 0 ? (index.h("span", { class: "sdds-dropdown-label-outside" }, this.label)) : (''), index.h("button", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: this.disabled ? '-1' : null, class: `sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${this.selectedValue !== '' || this.selectedLabelsArray.length > 0
226
- ? 'sdds-dropdown-toggle--selected'
225
+ `, "selected-value": this.selectedValue, "selected-text": this.selectedLabel, "multi-selected-values": JSON.stringify(this.selectedValuesArray), "multi-selected-labels": JSON.stringify(this.selectedLabelsArray) }, index.h("span", { class: `sdds-dropdown sdds-dropdown-${this.size}` }, this.labelPosition === 'outside' && this.label.length > 0 ? (index.h("span", { class: "sdds-dropdown-label-outside" }, this.label)) : (''), index.h("button", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: this.disabled ? '-1' : null, class: `sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${this.selectedValue !== '' || this.selectedLabelsArray.length > 0
226
+ ? 'sdds-dropdown-toggle--selected'
227
227
  : ''}
228
- ${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
229
- ? `sdds-dropdown-toggle-label-inside-${this.size}`
230
- : `sdds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, index.h("span", { class: "sdds-dropdown-label" }, this.type === 'filter' ? (index.h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "sdds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, onInput: (event) => this.handleSearch(event), autoComplete: "off" })) : (index.h("span", { class: {
231
- 'sdds-dropdown-label-container': true,
232
- 'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
233
- this.size !== 'sm' &&
234
- (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),
235
- } }, this.size !== 'sm' &&
236
- (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&
237
- this.labelPosition === 'inside' &&
238
- this.label.length > 0 && (index.h("span", { class: "sdds-dropdown-label-inside" }, this.label)), index.h("span", { class: `sdds-dropdown-label-main ${(this.selectedLabel.length === 0 ||
239
- (this.labelPosition === 'inside' && this.label.length < 0)) &&
240
- 'sdds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
241
- this.type !== 'multiselect' &&
242
- this.selectedLabel, this.type === 'multiselect' && (index.h("span", { class: "sdds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
243
- this.selectedLabelsArray.toString().length < 1 &&
244
- this.placeholder, this.selectedLabelsArray.toString().length > 0 &&
245
- this.selectedLabelsArray.toString().split(',').join(', '))), !this.selectedLabel &&
246
- this.labelPosition === 'inside' &&
247
- this.size !== 'sm' &&
248
- this.label, !this.selectedLabel &&
249
- this.type !== 'multiselect' &&
250
- this.labelPosition !== 'inside' &&
251
- this.placeholder, !this.selectedLabel &&
252
- this.size === 'sm' &&
253
- this.labelPosition === 'inside' &&
254
- this.placeholder)))), index.h("svg", { class: "sdds-dropdown-arrow", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("span", { class: "sdds-dropdown-menu",
255
- // Need to have reference in order to calc height and distance from bottom
256
- ref: (dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu) }, index.h("slot", null))), index.h("p", { class: "sdds-dropdown-helper" }, index.h("svg", { class: "sdds-dropdown-error-icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z", fill: "currentColor" }), index.h("path", { d: "M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z", fill: "currentColor" })), index.h("span", null, this.helper))));
257
- }
258
- get host() { return index.getElement(this); }
259
- static get watchers() { return {
260
- "selectedOption": ["changeSelectedOption"]
261
- }; }
262
- };
228
+ ${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
229
+ ? `sdds-dropdown-toggle-label-inside-${this.size}`
230
+ : `sdds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, index.h("span", { class: "sdds-dropdown-label" }, this.type === 'filter' ? (index.h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "sdds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, onInput: (event) => this.handleSearch(event), autoComplete: "off" })) : (index.h("span", { class: {
231
+ 'sdds-dropdown-label-container': true,
232
+ 'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
233
+ this.size !== 'sm' &&
234
+ (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),
235
+ } }, this.size !== 'sm' &&
236
+ (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&
237
+ this.labelPosition === 'inside' &&
238
+ this.label.length > 0 && (index.h("span", { class: "sdds-dropdown-label-inside" }, this.label)), index.h("span", { class: `sdds-dropdown-label-main ${(this.selectedLabel.length === 0 ||
239
+ (this.labelPosition === 'inside' && this.label.length < 0)) &&
240
+ 'sdds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
241
+ this.type !== 'multiselect' &&
242
+ this.selectedLabel, this.type === 'multiselect' && (index.h("span", { class: "sdds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
243
+ this.selectedLabelsArray.toString().length < 1 &&
244
+ this.placeholder, this.selectedLabelsArray.toString().length > 0 &&
245
+ this.selectedLabelsArray.toString().split(',').join(', '))), !this.selectedLabel &&
246
+ this.labelPosition === 'inside' &&
247
+ this.size !== 'sm' &&
248
+ this.label, !this.selectedLabel &&
249
+ this.type !== 'multiselect' &&
250
+ this.labelPosition !== 'inside' &&
251
+ this.placeholder, !this.selectedLabel &&
252
+ this.size === 'sm' &&
253
+ this.labelPosition === 'inside' &&
254
+ this.placeholder)))), index.h("svg", { class: "sdds-dropdown-arrow", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("span", { class: "sdds-dropdown-menu",
255
+ // Need to have reference in order to calc height and distance from bottom
256
+ ref: (dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu) }, index.h("slot", null))), index.h("p", { class: "sdds-dropdown-helper" }, index.h("svg", { class: "sdds-dropdown-error-icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z", fill: "currentColor" }), index.h("path", { d: "M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z", fill: "currentColor" })), index.h("span", null, this.helper))));
257
+ }
258
+ get host() { return index.getElement(this); }
259
+ static get watchers() { return {
260
+ "selectedOption": ["changeSelectedOption"]
261
+ }; }
262
+ };
263
263
  Dropdown.style = dropdownCss$1;
264
264
 
265
- const dropdownCss = ":root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-mode-light{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-958);--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100);--sdds-dropdown-disabled:var(--sdds-grey-400);--sdds-dropdown-border:var(--sdds-grey-100);--sdds-dropdown-label-inside:var(--sdds-grey-700);--sdds-dropdown-label-outside:var(--sdds-grey-958);--sdds-dropdown-placeholder:var(--sdds-grey-700);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-900);--sdds-dropdown-option-disabled-color:var(--sdds-grey-400)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100);--sdds-dropdown-background-disabled:var(--sdds-grey-50)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-white);--sdds-dropdown-background-hover:var(--sdds-grey-50);--sdds-dropdown-background-disabled:var(--sdds-white)}.sdds-mode-dark{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-400);--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-grey-900);--sdds-dropdown-disabled:var(--sdds-grey-800);--sdds-dropdown-border:var(--sdds-grey-800);--sdds-dropdown-label-inside:var(--sdds-grey-400);--sdds-dropdown-label-outside:var(--sdds-grey-100);--sdds-dropdown-placeholder:var(--sdds-grey-400);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-50);--sdds-dropdown-option-disabled-color:var(--sdds-grey-800)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-grey-868)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-grey-900)}.sdds-dropdown-helper{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);color:var(--sdds-grey-700);margin-top:var(--sdds-spacing-element-4);display:flex}.sdds-dropdown-helper .sdds-dropdown-error-icon{width:16px;height:16px;padding-right:9px;display:none}.sdds-dropdown-label-inside{font:var(--sdds-detail-ex-07);letter-spacing:var(--sdds-detail-ex-07-ls);color:var(--sdds-dropdown-label-inside)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-dropdown-label-outside);margin-bottom:var(--sdds-spacing-element-8)}:root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:white;--sdds-checkbox-background-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){--sdds-dropdown-label-outside:var(--sdds-dropdown-label-outside);--sdds-dropdown-label-outside-text-decoration:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);box-sizing:border-box}:host{position:relative;z-index:auto}:host::part(dropdown-filter-disabled){cursor:not-allowed;caret-color:transparent;pointer-events:none;color:var(--sdds-dropdown-disabled);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-dropdown-disabled)}.sdds-dropdown{position:relative;display:flex;flex-flow:column wrap;width:100%;border:0}.sdds-dropdown,.sdds-dropdown *{box-sizing:border-box}.sdds-dropdown .sdds-dropdown-toggle{font:var(--sdds-detail-ex-02);letter-spacing:var(--sdds-detail-ex-02-ls);color:var(--sdds-dropdown-color);display:flex;align-items:center;background-color:var(--sdds-dropdown-background);cursor:pointer;transition:box-shadow 0.1s ease-in, border-bottom-color 150ms ease;border-radius:4px 4px 0 0;border:none;border-bottom:1px solid var(--sdds-dropdown-border-not-focused);box-shadow:none;width:100%;text-align:left;outline:none;padding:20px 16px;display:flex;align-items:center}.sdds-dropdown .sdds-dropdown-toggle:hover{border-bottom-color:var(--sdds-grey-600)}.sdds-dropdown .sdds-dropdown-toggle:focus::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:2px solid var(--sdds-blue-400)}.sdds-dropdown .sdds-dropdown-toggle:active,.sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected{border-bottom-color:var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-toggle.is-filter{transition:border 0.1s ease-in 0.1s;cursor:text}.sdds-dropdown .sdds-dropdown-toggle-lg{padding:20px 16px}.sdds-dropdown .sdds-dropdown-toggle-md{padding:16px}.sdds-dropdown .sdds-dropdown-toggle-sm{padding:12px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-lg{padding:20px 16px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-md{padding:16px 16px 12px}.sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus){border-bottom:1px solid var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-arrow{width:20px;position:absolute;right:16px;color:inherit;transform:rotate(0);transition:transform ease 250ms}.sdds-dropdown .sdds-dropdown-placeholder{color:var(--sdds-grey-700)}.sdds-dropdown .sdds-dropdown-label{display:grid;width:calc(100% - 25px)}.sdds-dropdown .sdds-dropdown-label-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-dropdown.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-container--label-inside{padding-bottom:12px}.sdds-dropdown .sdds-dropdown-filter{border:0;outline:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-link);width:100%;background:transparent}.sdds-dropdown .sdds-dropdown-filter:focus{outline:none}.sdds-dropdown .sdds-dropdown-filter::placeholder{color:var(--sdds-grey-700);opacity:1}.sdds-dropdown .sdds-dropdown-menu{z-index:100;background-color:var(--sdds-dropdown-background);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--sdds-dropdown-border);border-right-color:var(--sdds-dropdown-border);overflow-x:hidden;overflow-y:auto;transform:scaleY(0);transform-origin:top;transition:transform 250ms ease}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar{width:4px;background-color:inherit}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}.sdds-dropdown .sdds-dropdown-menu ::-webkit-scrollbar-button{height:0;width:0}.sdds-dropdown.sdds-dropdown-lg .sdds-dropdown-toggle{height:56px}.sdds-dropdown.sdds-dropdown-md .sdds-dropdown-toggle{height:48px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-toggle{height:40px}:host(.sdds-dropdown--open-upwards) .sdds-dropdown .sdds-dropdown-menu{top:auto;bottom:100%;box-shadow:0 -1px 3px 0 rgba(0, 0, 0, 0.1);transform-origin:bottom}:host(.sdds-dropdown--open-upwards[label-position=outside]) span.sdds-dropdown-menu{bottom:calc(100% - 24px)}:host([disabled=true]){cursor:not-allowed}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle{pointer-events:none;color:var(--sdds-dropdown-option-disabled-color);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-dropdown-placeholder)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-dropdown-label-inside)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before{content:none}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle:focus::before{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper{color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper .sdds-dropdown-error-icon{display:flex}:host ::slotted(sdds-dropdown-option){display:flex;padding:var(--sdds-spacing-element-16);background-color:var(--sdds-dropdown-background);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-dropdown-border);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box;color:var(--sdds-dropdown-option-color)}:host ::slotted(sdds-dropdown-option:last-child){border-bottom-color:transparent;border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::slotted(sdds-dropdown-option:hover),:host ::slotted(sdds-dropdown-option:focus){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:focus){outline:none}:host ::slotted(sdds-dropdown-option:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host ::slotted(sdds-dropdown-option.sdds-dropdown--selected),:host ::slotted(sdds-dropdown-option.selected),:host ::slotted(sdds-dropdown-option.active),:host ::slotted(sdds-dropdown-option:active){background-color:var(--sdds-dropdown-background-hover);border-top:1px solid var(--sdds-dropdown-border);border-bottom:1px solid var(--sdds-dropdown-border)}:host ::slotted(sdds-dropdown-option.sdds-option--no-result){cursor:not-allowed;pointer-events:none}:host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),:host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled){cursor:not-allowed;color:var(--sdds-dropdown-option-disabled-color);background-color:var(--sdds-dropdown-background-disabled)}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child){border-radius:4px 4px 0 0}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child){border-radius:0;border-bottom:1px solid var(--sdds-dropdown-border)}.sdds-option-label{margin:auto 0;display:flex;align-content:center;text-decoration:none;flex-grow:2}.sdds-option-checkmark{color:inherit;opacity:0;transition:opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);margin-left:var(--sdds-spacing-element-16)}.sdds-option-checkmark path{color:var(--sdds-dropdown-option-color)}:host([size=sm]) ::slotted(sdds-dropdown-option){padding:var(--sdds-spacing-element-12) var(--sdds-spacing-element-16)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle{box-shadow:0 -1px 3px -1px rgba(0, 0, 0, 0.1);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle.is-filter::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:1px solid var(--sdds-blue-400)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-arrow{transform:rotate(180deg)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-menu{transform:scaleY(1)}:host(.sdds-dropdown--open) ::slotted(sdds-dropdown-option){visibility:visible;opacity:1}:host(.selected) .sdds-option-checkmark{opacity:1}.sdds-dropdown-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-label-inside);position:absolute;transition:transform 250ms ease, color 200ms ease;width:calc(100% - 63px);overflow:hidden;text-overflow:ellipsis;transform:translate(0, -10px);font-size:10px}.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside .sdds-dropdown-placeholder{display:block;padding-top:4px}.sdds-dropdown-lg .sdds-dropdown-label-inside{display:block;top:16px}.sdds-dropdown-md .sdds-dropdown-label-inside{display:block;top:12px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-inside{display:none}.sdds-dropdown-multiselect-result{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-option-checkbox{margin-right:8px}.sdds-form-label{display:flex}";
265
+ const dropdownCss = ":root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-mode-light{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-958);--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100);--sdds-dropdown-disabled:var(--sdds-grey-400);--sdds-dropdown-border:var(--sdds-grey-100);--sdds-dropdown-label-inside:var(--sdds-grey-700);--sdds-dropdown-label-outside:var(--sdds-grey-958);--sdds-dropdown-placeholder:var(--sdds-grey-700);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-900);--sdds-dropdown-option-disabled-color:var(--sdds-grey-400);--sdds-dropdown-background-disabled:var(--sdds-dropdown-background)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-white);--sdds-dropdown-background-hover:var(--sdds-grey-50)}.sdds-mode-dark{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-400);--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-disabled:var(--sdds-grey-800);--sdds-dropdown-border:var(--sdds-grey-800);--sdds-dropdown-label-inside:var(--sdds-grey-400);--sdds-dropdown-label-outside:var(--sdds-grey-100);--sdds-dropdown-placeholder:var(--sdds-grey-400);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-50);--sdds-dropdown-option-disabled-color:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-dropdown-background)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.sdds-dropdown-helper{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);color:var(--sdds-grey-700);margin-top:var(--sdds-spacing-element-4);display:flex}.sdds-dropdown-helper .sdds-dropdown-error-icon{width:16px;height:16px;padding-right:9px;display:none}.sdds-dropdown-label-inside{font:var(--sdds-detail-ex-07);letter-spacing:var(--sdds-detail-ex-07-ls);color:var(--sdds-dropdown-label-inside)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-dropdown-label-outside);margin-bottom:var(--sdds-spacing-element-8)}:root{--sdds-headline-01:normal normal bold 40px/40px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px \"Scania Sans Headline\", arial,\n helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px \"Scania Sans Headline\", arial, helvetica,\n sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px \"Scania Sans Semi Condensed\", arial, helvetica,\n sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px \"Scania Sans\", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px \"Scania Sans Semi Condensed\",\n \"Scania Sans Condensed\", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-background-opacity-hover:0.12;--sdds-checkbox-background-opacity-focus:0.24;--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:var(--sdds-grey-600);--sdds-checkbox-background-focus:var(--sdds-grey-600);--sdds-checkbox-background-opacity-hover:0.48;--sdds-checkbox-background-opacity-focus:0.72;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:var(--sdds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){--sdds-dropdown-label-outside:var(--sdds-dropdown-label-outside);--sdds-dropdown-label-outside-text-decoration:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);box-sizing:border-box}:host{position:relative;z-index:auto}:host::part(dropdown-filter-disabled){cursor:not-allowed;caret-color:transparent;pointer-events:none;color:var(--sdds-dropdown-disabled);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-dropdown-disabled)}.sdds-dropdown{position:relative;display:flex;flex-flow:column wrap;width:100%;border:0}.sdds-dropdown,.sdds-dropdown *{box-sizing:border-box}.sdds-dropdown .sdds-dropdown-toggle{font:var(--sdds-detail-ex-02);letter-spacing:var(--sdds-detail-ex-02-ls);color:var(--sdds-dropdown-color);display:flex;align-items:center;background-color:var(--sdds-dropdown-background);cursor:pointer;transition:box-shadow 0.1s ease-in, border-bottom-color 150ms ease;border-radius:4px 4px 0 0;border:none;border-bottom:1px solid var(--sdds-dropdown-border-not-focused);box-shadow:none;width:100%;text-align:left;outline:none;padding:20px 16px;display:flex;align-items:center}.sdds-dropdown .sdds-dropdown-toggle:hover{border-bottom-color:var(--sdds-grey-600)}.sdds-dropdown .sdds-dropdown-toggle:focus::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:2px solid var(--sdds-blue-400)}.sdds-dropdown .sdds-dropdown-toggle:active,.sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected{border-bottom-color:var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-toggle.is-filter{transition:border 0.1s ease-in 0.1s;cursor:text}.sdds-dropdown .sdds-dropdown-toggle-lg{padding:20px 16px}.sdds-dropdown .sdds-dropdown-toggle-md{padding:16px}.sdds-dropdown .sdds-dropdown-toggle-sm{padding:12px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-lg{padding:20px 16px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-md{padding:16px 16px 12px}.sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus){border-bottom:1px solid var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-arrow{width:20px;position:absolute;right:16px;color:inherit;transform:rotate(0);transition:transform ease 250ms}.sdds-dropdown .sdds-dropdown-placeholder{color:var(--sdds-grey-700)}.sdds-dropdown .sdds-dropdown-label{display:grid;width:calc(100% - 25px)}.sdds-dropdown .sdds-dropdown-label-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-dropdown.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-container--label-inside{padding-bottom:12px}.sdds-dropdown .sdds-dropdown-filter{border:0;outline:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-link);width:100%;background:transparent}.sdds-dropdown .sdds-dropdown-filter:focus{outline:none}.sdds-dropdown .sdds-dropdown-filter::placeholder{color:var(--sdds-grey-700);opacity:1}.sdds-dropdown .sdds-dropdown-menu{z-index:100;background-color:var(--sdds-dropdown-background);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--sdds-dropdown-border);border-right-color:var(--sdds-dropdown-border);overflow-x:hidden;overflow-y:auto;transform:scaleY(0);transform-origin:top;transition:transform 250ms ease}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar{width:4px;background-color:inherit}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}.sdds-dropdown .sdds-dropdown-menu ::-webkit-scrollbar-button{height:0;width:0}.sdds-dropdown.sdds-dropdown-lg .sdds-dropdown-toggle{height:56px}.sdds-dropdown.sdds-dropdown-md .sdds-dropdown-toggle{height:48px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-toggle{height:40px}:host(.sdds-dropdown--open-upwards) .sdds-dropdown .sdds-dropdown-menu{top:auto;bottom:100%;box-shadow:0 -1px 3px 0 rgba(0, 0, 0, 0.1);transform-origin:bottom}:host(.sdds-dropdown--open-upwards[label-position=outside]) span.sdds-dropdown-menu{bottom:calc(100% - 24px)}:host([disabled=true]){cursor:not-allowed}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle{pointer-events:none;color:var(--sdds-dropdown-option-disabled-color);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-dropdown-placeholder)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-dropdown-label-inside)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before{content:none}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle:focus::before{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper{color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper .sdds-dropdown-error-icon{display:flex}:host ::slotted(sdds-dropdown-option){display:flex;padding:var(--sdds-spacing-element-16);background-color:var(--sdds-dropdown-background);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-dropdown-border);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box;color:var(--sdds-dropdown-option-color)}:host ::slotted(sdds-dropdown-option:last-child){border-bottom-color:transparent;border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::slotted(sdds-dropdown-option:hover),:host ::slotted(sdds-dropdown-option:focus){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:focus){outline:none}:host ::slotted(sdds-dropdown-option:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host ::slotted(sdds-dropdown-option.sdds-dropdown--selected),:host ::slotted(sdds-dropdown-option.selected),:host ::slotted(sdds-dropdown-option.active),:host ::slotted(sdds-dropdown-option:active){background-color:var(--sdds-dropdown-background-hover);border-top:1px solid var(--sdds-dropdown-border);border-bottom:1px solid var(--sdds-dropdown-border)}:host ::slotted(sdds-dropdown-option.sdds-option--no-result){cursor:not-allowed;pointer-events:none}:host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),:host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled){cursor:not-allowed;color:var(--sdds-dropdown-option-disabled-color);background-color:var(--sdds-dropdown-background-disabled)}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child){border-radius:4px 4px 0 0}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child){border-radius:0;border-bottom:1px solid var(--sdds-dropdown-border)}.sdds-option-label{margin:auto 0;display:flex;align-content:center;text-decoration:none;flex-grow:2}.sdds-option-checkmark{color:inherit;opacity:0;transition:opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);margin-left:var(--sdds-spacing-element-16)}.sdds-option-checkmark path{color:var(--sdds-dropdown-option-color)}:host([size=sm]) ::slotted(sdds-dropdown-option){padding:var(--sdds-spacing-element-12) var(--sdds-spacing-element-16)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle{box-shadow:0 -1px 3px -1px rgba(0, 0, 0, 0.1);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle.is-filter::before{content:\" \";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:1px solid var(--sdds-blue-400)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-arrow{transform:rotate(180deg)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-menu{transform:scaleY(1)}:host(.sdds-dropdown--open) ::slotted(sdds-dropdown-option){visibility:visible;opacity:1}:host(.selected) .sdds-option-checkmark{opacity:1}.sdds-dropdown-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-label-inside);position:absolute;transition:transform 250ms ease, color 200ms ease;width:calc(100% - 63px);overflow:hidden;text-overflow:ellipsis;transform:translate(0, -10px);font-size:10px}.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside .sdds-dropdown-placeholder{display:block;padding-top:4px}.sdds-dropdown-lg .sdds-dropdown-label-inside{display:block;top:16px}.sdds-dropdown-md .sdds-dropdown-label-inside{display:block;top:12px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-inside{display:none}.sdds-dropdown-multiselect-result{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-option-checkbox{margin-right:8px}.sdds-form-label{display:flex}";
266
266
 
267
- const DropdownOption = class {
268
- constructor(hostRef) {
269
- index.registerInstance(this, hostRef);
270
- this.internalSddsSelect = index.createEvent(this, "internalSddsSelect", 6);
271
- this.innerValue = undefined;
272
- this.selected = false;
273
- this.disabled = false;
274
- this.value = undefined;
275
- }
276
- changeFocusHandler() {
277
- this.host.focus();
278
- }
279
- removeFocusHandler() {
280
- this.host.blur();
281
- }
282
- onKeyDown(event) {
283
- if (event.code === 'Enter') {
284
- this.handleClick({
285
- value: this.value,
286
- label: this.host.innerText,
287
- parent: this.host.parentNode,
288
- });
289
- }
290
- }
291
- componentWillLoad() {
292
- this.innerValue = this.value;
293
- this.isMultiSelectOption = this.host
294
- .closest('sdds-dropdown')
295
- .classList.contains('sdds-dropdown-multiselect');
296
- }
297
- handleClick(value) {
298
- if (!this.disabled) {
299
- const listOptions = value.parent.childNodes;
300
- this.internalSddsSelect.emit(value);
301
- if (!this.isMultiSelectOption) {
302
- listOptions.forEach((optionEl) => {
303
- optionEl.selected = false;
304
- });
305
- }
306
- const optionCheckbox = this.host.shadowRoot.querySelector('input');
307
- if (this.selected) {
308
- this.selected = false;
309
- if (optionCheckbox) {
310
- optionCheckbox.checked = false;
311
- }
312
- }
313
- else {
314
- this.selected = true;
315
- if (optionCheckbox) {
316
- optionCheckbox.checked = true;
317
- }
318
- }
319
- }
320
- }
321
- render() {
322
- return (index.h(index.Host, { onClick: (event) => {
323
- if (this.isMultiSelectOption) {
324
- event.stopPropagation();
325
- }
326
- return this.handleClick({
327
- value: this.value,
328
- label: this.host.innerText,
329
- parent: event.target.parentNode,
330
- });
331
- }, class: {
332
- 'selected': this.selected,
333
- 'sdds-dropdown-option-disabled': this.disabled,
334
- }, tabindex: "-1", "aria-disabled": this.disabled }, this.isMultiSelectOption && (index.h("div", { class: "sdds-checkbox-item sdds-option-checkbox" }, index.h("label", { class: "sdds-form-label" }, index.h("input", { class: "sdds-form-input", type: "checkbox", checked: this.selected, disabled: this.disabled })))), index.h("span", { class: "sdds-option-label" }, index.h("slot", null)), !this.isMultiSelectOption && (index.h("span", { class: "sdds-option-checkmark" }, index.h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 3L4 6L9 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
335
- }
336
- get host() { return index.getElement(this); }
337
- };
267
+ const DropdownOption = class {
268
+ constructor(hostRef) {
269
+ index.registerInstance(this, hostRef);
270
+ this.internalSddsSelect = index.createEvent(this, "internalSddsSelect", 6);
271
+ this.innerValue = undefined;
272
+ this.selected = false;
273
+ this.disabled = false;
274
+ this.value = undefined;
275
+ }
276
+ changeFocusHandler() {
277
+ this.host.focus();
278
+ }
279
+ removeFocusHandler() {
280
+ this.host.blur();
281
+ }
282
+ onKeyDown(event) {
283
+ if (event.code === 'Enter') {
284
+ this.handleClick({
285
+ value: this.value,
286
+ label: this.host.innerText,
287
+ parent: this.host.parentNode,
288
+ });
289
+ }
290
+ }
291
+ componentWillLoad() {
292
+ this.innerValue = this.value;
293
+ this.isMultiSelectOption = this.host
294
+ .closest('sdds-dropdown')
295
+ .classList.contains('sdds-dropdown-multiselect');
296
+ }
297
+ handleClick(value) {
298
+ if (!this.disabled) {
299
+ const listOptions = value.parent.childNodes;
300
+ this.internalSddsSelect.emit(value);
301
+ if (!this.isMultiSelectOption) {
302
+ listOptions.forEach((optionEl) => {
303
+ optionEl.selected = false;
304
+ });
305
+ }
306
+ const optionCheckbox = this.host.shadowRoot.querySelector('input');
307
+ if (this.selected) {
308
+ this.selected = false;
309
+ if (optionCheckbox) {
310
+ optionCheckbox.checked = false;
311
+ }
312
+ }
313
+ else {
314
+ this.selected = true;
315
+ if (optionCheckbox) {
316
+ optionCheckbox.checked = true;
317
+ }
318
+ }
319
+ }
320
+ }
321
+ render() {
322
+ return (index.h(index.Host, { onClick: (event) => {
323
+ if (this.isMultiSelectOption) {
324
+ event.stopPropagation();
325
+ }
326
+ return this.handleClick({
327
+ value: this.value,
328
+ label: this.host.innerText,
329
+ parent: event.target.parentNode,
330
+ });
331
+ }, class: {
332
+ 'selected': this.selected,
333
+ 'sdds-dropdown-option-disabled': this.disabled,
334
+ }, tabindex: "-1", "aria-disabled": this.disabled }, this.isMultiSelectOption && (index.h("div", { class: "sdds-checkbox-item sdds-option-checkbox" }, index.h("label", { class: "sdds-form-label" }, index.h("input", { class: "sdds-form-input", type: "checkbox", checked: this.selected, disabled: this.disabled })))), index.h("span", { class: "sdds-option-label" }, index.h("slot", null)), !this.isMultiSelectOption && (index.h("span", { class: "sdds-option-checkmark" }, index.h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 3L4 6L9 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
335
+ }
336
+ get host() { return index.getElement(this); }
337
+ };
338
338
  DropdownOption.style = dropdownCss;
339
339
 
340
340
  exports.sdds_dropdown = Dropdown;