@scania/tegel 0.0.1-beta.7 → 0.0.2

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 (491) hide show
  1. package/dist/cjs/{index-e1c79686.js → index-b98965c7.js} +7 -0
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/sdds-accordion-item.cjs.entry.js +21 -21
  4. package/dist/cjs/sdds-accordion.cjs.entry.js +12 -12
  5. package/dist/cjs/sdds-badges.cjs.entry.js +45 -46
  6. package/dist/cjs/sdds-banner.cjs.entry.js +79 -0
  7. package/dist/cjs/sdds-block.cjs.entry.js +32 -0
  8. package/dist/cjs/sdds-body-cell_2.cjs.entry.js +160 -160
  9. package/dist/cjs/sdds-breadcrumb-item.cjs.entry.js +25 -0
  10. package/dist/cjs/sdds-breadcrumb.cjs.entry.js +23 -0
  11. package/dist/cjs/sdds-button.cjs.entry.js +25 -24
  12. package/dist/cjs/sdds-card.cjs.entry.js +56 -0
  13. package/dist/cjs/sdds-checkbox.cjs.entry.js +55 -0
  14. package/dist/cjs/sdds-datetime.cjs.entry.js +78 -49
  15. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +83 -83
  16. package/dist/cjs/sdds-dropdown_2.cjs.entry.js +327 -321
  17. package/dist/cjs/sdds-header-cell.cjs.entry.js +130 -132
  18. package/dist/cjs/sdds-icon.cjs.entry.js +30 -30
  19. package/dist/cjs/sdds-inline-tab.cjs.entry.js +22 -0
  20. package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +89 -87
  21. package/dist/cjs/sdds-inline-tabs.cjs.entry.js +212 -202
  22. package/dist/cjs/sdds-link.cjs.entry.js +28 -0
  23. package/dist/cjs/sdds-message.cjs.entry.js +41 -0
  24. package/dist/cjs/sdds-modal.cjs.entry.js +42 -40
  25. package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +89 -86
  26. package/dist/cjs/sdds-popover-canvas.cjs.entry.js +74 -66
  27. package/dist/cjs/sdds-popover-menu.cjs.entry.js +75 -65
  28. package/dist/cjs/sdds-radio-button.cjs.entry.js +32 -0
  29. package/dist/cjs/sdds-slider.cjs.entry.js +348 -327
  30. package/dist/cjs/sdds-spinner.cjs.entry.js +11 -11
  31. package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +73 -72
  32. package/dist/cjs/sdds-table-body.cjs.entry.js +235 -235
  33. package/dist/cjs/sdds-table-footer.cjs.entry.js +155 -156
  34. package/dist/cjs/sdds-table-header.cjs.entry.js +90 -91
  35. package/dist/cjs/sdds-table-toolbar.cjs.entry.js +56 -57
  36. package/dist/cjs/sdds-table.cjs.entry.js +58 -59
  37. package/dist/cjs/sdds-textarea.cjs.entry.js +57 -44
  38. package/dist/cjs/sdds-textfield.cjs.entry.js +73 -64
  39. package/dist/cjs/sdds-toast.cjs.entry.js +86 -0
  40. package/dist/cjs/sdds-toggle.cjs.entry.js +44 -0
  41. package/dist/cjs/sdds-tooltip.cjs.entry.js +94 -85
  42. package/dist/cjs/tegel.cjs.js +2 -2
  43. package/dist/collection/collection-manifest.json +12 -0
  44. package/dist/collection/components/accordion/accordion-item/accordion-item.css +30 -11
  45. package/dist/collection/components/accordion/accordion-item/accordion-item.js +142 -142
  46. package/dist/collection/components/accordion/accordion.css +2 -16
  47. package/dist/collection/components/accordion/accordion.js +62 -62
  48. package/dist/collection/components/accordion/accordion.stories.js +90 -0
  49. package/dist/collection/components/badge/badge.stories.js +102 -0
  50. package/dist/collection/components/badge/badges.css +2 -2
  51. package/dist/collection/components/badge/badges.js +147 -150
  52. package/dist/collection/components/banner/banner.stories.js +92 -0
  53. package/dist/collection/components/banner/sdds-banner.css +88 -0
  54. package/dist/collection/components/banner/sdds-banner.js +330 -0
  55. package/dist/collection/components/banner/sdds-banner.stories.js +129 -0
  56. package/dist/collection/components/block/block-native.stories.js +48 -0
  57. package/dist/collection/components/block/sdds-block.css +22 -0
  58. package/dist/collection/components/block/sdds-block.js +55 -0
  59. package/dist/collection/components/block/sdds-block.stories.js +48 -0
  60. package/dist/collection/components/breadcrumb/breadcrumb-component.css +30 -0
  61. package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.css +43 -0
  62. package/dist/collection/components/breadcrumb/breadcrumb-item/breadcrumb-item.js +83 -0
  63. package/dist/collection/components/breadcrumb/breadcrumb.js +22 -0
  64. package/dist/collection/components/breadcrumb/breadcrumb.stories.js +26 -0
  65. package/dist/collection/components/button/button-component.js +152 -151
  66. package/dist/collection/components/button/button-native.stories.js +187 -0
  67. package/dist/collection/components/button/button-webcomponent.stories.js +189 -0
  68. package/dist/collection/components/button/button.css +63 -51
  69. package/dist/collection/components/card/card.stories.js +167 -0
  70. package/dist/collection/components/card/sdds-card.css +78 -0
  71. package/dist/collection/components/card/sdds-card.js +276 -0
  72. package/dist/collection/components/card/sdds-card.stories.js +168 -0
  73. package/dist/collection/components/checkbox/checkbox.stories.js +54 -0
  74. package/dist/collection/components/checkbox/sdds-checkbox.css +95 -0
  75. package/dist/collection/components/checkbox/sdds-checkbox.js +239 -0
  76. package/dist/collection/components/checkbox/sdds-checkbox.stories.js +71 -0
  77. package/dist/collection/components/chips/chips.stories.js +106 -0
  78. package/dist/collection/components/data-table/native-table.stories.js +160 -0
  79. package/dist/collection/components/data-table/table/table.js +252 -253
  80. package/dist/collection/components/data-table/table-body/table-body.css +1 -1
  81. package/dist/collection/components/data-table/table-body/table-body.js +425 -425
  82. package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +3 -3
  83. package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +168 -169
  84. package/dist/collection/components/data-table/table-body-row/table-body-row.css +24 -45
  85. package/dist/collection/components/data-table/table-body-row/table-body-row.js +165 -164
  86. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +23 -24
  87. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +156 -155
  88. package/dist/collection/components/data-table/table-component-basic.stories.js +161 -0
  89. package/dist/collection/components/data-table/table-component-batch-actions.stories.js +128 -0
  90. package/dist/collection/components/data-table/table-component-bodydata.stories.js +58 -0
  91. package/dist/collection/components/data-table/table-component-custom-width.stories.js +197 -0
  92. package/dist/collection/components/data-table/table-component-event-listeners.stories.js +151 -0
  93. package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +135 -0
  94. package/dist/collection/components/data-table/table-component-filtering.stories.js +137 -0
  95. package/dist/collection/components/data-table/table-component-multiselect.stories.js +158 -0
  96. package/dist/collection/components/data-table/table-component-pagination.stories.js +127 -0
  97. package/dist/collection/components/data-table/table-component-sorting.stories.js +126 -0
  98. package/dist/collection/components/data-table/table-footer/table-footer.css +9 -5
  99. package/dist/collection/components/data-table/table-footer/table-footer.js +354 -355
  100. package/dist/collection/components/data-table/table-header/table-header.css +22 -36
  101. package/dist/collection/components/data-table/table-header/table-header.js +152 -153
  102. package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +9 -8
  103. package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +317 -320
  104. package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +7 -6
  105. package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +141 -142
  106. package/dist/collection/components/datetime/datetime.css +68 -58
  107. package/dist/collection/components/datetime/datetime.js +344 -243
  108. package/dist/collection/components/datetime/datetime.stories.js +207 -0
  109. package/dist/collection/components/divider/divider.stories.js +133 -0
  110. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +339 -339
  111. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +130 -0
  112. package/dist/collection/components/dropdown/dropdown-native.stories.js +90 -0
  113. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +185 -185
  114. package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +167 -0
  115. package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +146 -0
  116. package/dist/collection/components/dropdown/dropdown.css +146 -86
  117. package/dist/collection/components/dropdown/dropdown.js +576 -553
  118. package/dist/collection/components/footer/footer.stories.js +117 -0
  119. package/dist/collection/components/header/header-all.stories.js +217 -0
  120. package/dist/collection/components/header/header-default.stories.js +47 -0
  121. package/dist/collection/components/header/header-inline.stories.js +113 -0
  122. package/dist/collection/components/header/header-search.stories.js +263 -0
  123. package/dist/collection/components/header/header-toolbar.stories.js +204 -0
  124. package/dist/collection/components/icon/icon-font.stories.js +57 -0
  125. package/dist/collection/components/icon/icon-web-component.stories.js +51 -0
  126. package/dist/collection/components/icon/icon.js +89 -89
  127. package/dist/collection/components/link/link.stories.js +45 -0
  128. package/dist/collection/components/link/sdds-link.css +36 -0
  129. package/dist/collection/components/link/sdds-link.js +121 -0
  130. package/dist/collection/components/link/sdds-link.stories.js +70 -0
  131. package/dist/collection/components/message/message.stories.js +108 -0
  132. package/dist/collection/components/message/sdds-message.css +70 -0
  133. package/dist/collection/components/message/sdds-message.js +135 -0
  134. package/dist/collection/components/message/sdds-message.stories.js +106 -0
  135. package/dist/collection/components/modal/modal-native.stories.js +129 -0
  136. package/dist/collection/components/modal/modal-webcomponent.stories.js +86 -0
  137. package/dist/collection/components/modal/modal.css +63 -37
  138. package/dist/collection/components/modal/modal.js +148 -146
  139. package/dist/collection/components/popover-canvas/popover-canvas.css +3 -3
  140. package/dist/collection/components/popover-canvas/popover-canvas.js +219 -190
  141. package/dist/collection/components/popover-canvas/popover-canvas.stories.js +89 -0
  142. package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +121 -0
  143. package/dist/collection/components/popover-menu/popover-menu.css +2 -2
  144. package/dist/collection/components/popover-menu/popover-menu.js +220 -189
  145. package/dist/collection/components/popover-menu/popover-menu.stories.js +114 -0
  146. package/dist/collection/components/radio-button/radio-button-component.css +123 -0
  147. package/dist/collection/components/radio-button/radio-button-component.stories.js +91 -0
  148. package/dist/collection/components/radio-button/radio-button.js +160 -0
  149. package/dist/collection/components/radio-button/radio-button.stories.js +68 -0
  150. package/dist/collection/components/side-menu/side-menu.stories.js +182 -0
  151. package/dist/collection/components/slider/slider.css +56 -19
  152. package/dist/collection/components/slider/slider.js +721 -682
  153. package/dist/collection/components/slider/slider.stories.js +208 -0
  154. package/dist/collection/components/spinner/spinner.js +61 -61
  155. package/dist/collection/components/spinner/spinner.stories.js +59 -0
  156. package/dist/collection/components/stepper/stepper.stories.js +139 -0
  157. package/dist/collection/components/tabs/inline-tabs-default/inline-tab/inline-tab.css +3 -0
  158. package/dist/collection/components/tabs/inline-tabs-default/inline-tab/inline-tab.js +80 -0
  159. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +21 -24
  160. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +312 -302
  161. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +71 -0
  162. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +36 -67
  163. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +128 -126
  164. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +46 -0
  165. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +22 -18
  166. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +128 -103
  167. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +32 -0
  168. package/dist/collection/components/textarea/textarea.css +60 -45
  169. package/dist/collection/components/textarea/textarea.js +394 -328
  170. package/dist/collection/components/textarea/textarea.stories.js +169 -0
  171. package/dist/collection/components/textfield/textfield.css +92 -84
  172. package/dist/collection/components/textfield/textfield.js +430 -350
  173. package/dist/collection/components/textfield/textfield.stories.js +239 -0
  174. package/dist/collection/components/toast/sdds-toast.css +102 -0
  175. package/dist/collection/components/toast/sdds-toast.js +256 -0
  176. package/dist/collection/components/toast/sdds-toast.stories.js +86 -0
  177. package/dist/collection/components/toast/toast.stories.js +129 -0
  178. package/dist/collection/components/toggle/sdds-toggle.css +104 -0
  179. package/dist/collection/components/toggle/sdds-toggle.js +261 -0
  180. package/dist/collection/components/toggle/sdds-toggle.stories.js +92 -0
  181. package/dist/collection/components/toggle/toggle.stories.js +72 -0
  182. package/dist/collection/components/tooltip/tooltip.css +3 -3
  183. package/dist/collection/components/tooltip/tooltip.js +229 -200
  184. package/dist/collection/components/tooltip/tooltip.stories.js +115 -0
  185. package/dist/collection/components/utility/colour/background-color.stories.js +96 -0
  186. package/dist/collection/components/utility/colour/text-color.stories.js +94 -0
  187. package/dist/collection/foundations-stories/colour/colour-brand.stories.js +38 -0
  188. package/dist/collection/foundations-stories/colour/colour-scales.stories.js +71 -0
  189. package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +40 -0
  190. package/dist/collection/foundations-stories/grid/grid.stories.js +386 -0
  191. package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +100 -0
  192. package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +94 -0
  193. package/dist/collection/foundations-stories/typography/typography-body.stories.js +16 -0
  194. package/dist/collection/foundations-stories/typography/typography-detail.stories.js +17 -0
  195. package/dist/collection/foundations-stories/typography/typography-headline.stories.js +39 -0
  196. package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +12 -0
  197. package/dist/collection/index.js +1 -1
  198. package/dist/collection/utils/utils.js +12 -12
  199. package/dist/components/dropdown-option.js +94 -94
  200. package/dist/components/dropdown.js +296 -289
  201. package/dist/components/icon.js +49 -49
  202. package/dist/components/index.d.ts +12 -0
  203. package/dist/components/index.js +12 -0
  204. package/dist/components/sdds-accordion-item.js +46 -46
  205. package/dist/components/sdds-accordion.js +29 -29
  206. package/dist/components/sdds-badges.js +66 -67
  207. package/dist/components/sdds-banner.d.ts +11 -0
  208. package/dist/components/sdds-banner.js +119 -0
  209. package/dist/components/sdds-block.d.ts +11 -0
  210. package/dist/components/sdds-block.js +48 -0
  211. package/dist/components/sdds-breadcrumb-item.d.ts +11 -0
  212. package/dist/components/sdds-breadcrumb-item.js +43 -0
  213. package/dist/components/sdds-breadcrumb.d.ts +11 -0
  214. package/dist/components/sdds-breadcrumb.js +37 -0
  215. package/dist/components/sdds-button.js +48 -47
  216. package/dist/components/sdds-card.d.ts +11 -0
  217. package/dist/components/sdds-card.js +84 -0
  218. package/dist/components/sdds-checkbox.d.ts +11 -0
  219. package/dist/components/sdds-checkbox.js +76 -0
  220. package/dist/components/sdds-datetime.js +112 -73
  221. package/dist/components/sdds-dropdown-filter.js +127 -127
  222. package/dist/components/sdds-header-cell.js +161 -164
  223. package/dist/components/sdds-inline-tab.d.ts +11 -0
  224. package/dist/components/sdds-inline-tab.js +40 -0
  225. package/dist/components/sdds-inline-tabs-fullbleed.js +108 -106
  226. package/dist/components/sdds-inline-tabs.js +236 -226
  227. package/dist/components/sdds-link.d.ts +11 -0
  228. package/dist/components/sdds-link.js +6 -0
  229. package/dist/components/sdds-link2.js +44 -0
  230. package/dist/components/sdds-message.d.ts +11 -0
  231. package/dist/components/sdds-message.js +67 -0
  232. package/dist/components/sdds-modal.js +68 -60
  233. package/dist/components/sdds-navigation-tabs.js +108 -104
  234. package/dist/components/sdds-popover-canvas.js +98 -87
  235. package/dist/components/sdds-popover-menu.js +99 -86
  236. package/dist/components/sdds-radio-button.d.ts +11 -0
  237. package/dist/components/sdds-radio-button.js +52 -0
  238. package/dist/components/sdds-slider.js +385 -357
  239. package/dist/components/sdds-spinner.js +27 -27
  240. package/dist/components/sdds-table-body-row-expandable.js +96 -95
  241. package/dist/components/sdds-table-body.js +281 -281
  242. package/dist/components/sdds-table-footer.js +186 -187
  243. package/dist/components/sdds-table-header.js +115 -116
  244. package/dist/components/sdds-table-toolbar.js +78 -79
  245. package/dist/components/sdds-table.js +81 -82
  246. package/dist/components/sdds-textarea.js +92 -73
  247. package/dist/components/sdds-textfield.js +109 -93
  248. package/dist/components/sdds-toast.d.ts +11 -0
  249. package/dist/components/sdds-toast.js +117 -0
  250. package/dist/components/sdds-toggle.d.ts +11 -0
  251. package/dist/components/sdds-toggle.js +69 -0
  252. package/dist/components/sdds-tooltip.js +117 -106
  253. package/dist/components/table-body-cell.js +95 -96
  254. package/dist/components/table-body-row.js +114 -113
  255. package/dist/esm/{index-b67b15a6.js → index-32571711.js} +7 -0
  256. package/dist/esm/loader.js +2 -2
  257. package/dist/esm/polyfills/core-js.js +0 -0
  258. package/dist/esm/polyfills/dom.js +0 -0
  259. package/dist/esm/polyfills/es5-html-element.js +0 -0
  260. package/dist/esm/polyfills/index.js +0 -0
  261. package/dist/esm/polyfills/system.js +0 -0
  262. package/dist/esm/sdds-accordion-item.entry.js +21 -21
  263. package/dist/esm/sdds-accordion.entry.js +12 -12
  264. package/dist/esm/sdds-badges.entry.js +45 -46
  265. package/dist/esm/sdds-banner.entry.js +75 -0
  266. package/dist/esm/sdds-block.entry.js +28 -0
  267. package/dist/esm/sdds-body-cell_2.entry.js +160 -160
  268. package/dist/esm/sdds-breadcrumb-item.entry.js +21 -0
  269. package/dist/esm/sdds-breadcrumb.entry.js +19 -0
  270. package/dist/esm/sdds-button.entry.js +25 -24
  271. package/dist/esm/sdds-card.entry.js +52 -0
  272. package/dist/esm/sdds-checkbox.entry.js +51 -0
  273. package/dist/esm/sdds-datetime.entry.js +78 -49
  274. package/dist/esm/sdds-dropdown-filter.entry.js +83 -83
  275. package/dist/esm/sdds-dropdown_2.entry.js +327 -321
  276. package/dist/esm/sdds-header-cell.entry.js +130 -132
  277. package/dist/esm/sdds-icon.entry.js +30 -30
  278. package/dist/esm/sdds-inline-tab.entry.js +18 -0
  279. package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +89 -87
  280. package/dist/esm/sdds-inline-tabs.entry.js +212 -202
  281. package/dist/esm/sdds-link.entry.js +24 -0
  282. package/dist/esm/sdds-message.entry.js +37 -0
  283. package/dist/esm/sdds-modal.entry.js +42 -40
  284. package/dist/esm/sdds-navigation-tabs.entry.js +89 -86
  285. package/dist/esm/sdds-popover-canvas.entry.js +74 -66
  286. package/dist/esm/sdds-popover-menu.entry.js +75 -65
  287. package/dist/esm/sdds-radio-button.entry.js +28 -0
  288. package/dist/esm/sdds-slider.entry.js +348 -327
  289. package/dist/esm/sdds-spinner.entry.js +11 -11
  290. package/dist/esm/sdds-table-body-row-expandable.entry.js +73 -72
  291. package/dist/esm/sdds-table-body.entry.js +235 -235
  292. package/dist/esm/sdds-table-footer.entry.js +155 -156
  293. package/dist/esm/sdds-table-header.entry.js +90 -91
  294. package/dist/esm/sdds-table-toolbar.entry.js +56 -57
  295. package/dist/esm/sdds-table.entry.js +58 -59
  296. package/dist/esm/sdds-textarea.entry.js +57 -44
  297. package/dist/esm/sdds-textfield.entry.js +73 -64
  298. package/dist/esm/sdds-toast.entry.js +82 -0
  299. package/dist/esm/sdds-toggle.entry.js +40 -0
  300. package/dist/esm/sdds-tooltip.entry.js +94 -85
  301. package/dist/esm/tegel.js +2 -2
  302. package/dist/tegel/p-05d3cfc8.entry.js +1 -0
  303. package/dist/tegel/p-13a25c7f.entry.js +1 -0
  304. package/dist/tegel/p-13b783f1.js +2 -0
  305. package/dist/tegel/p-1dda8de9.entry.js +1 -0
  306. package/dist/tegel/p-2248b59e.entry.js +1 -0
  307. package/dist/tegel/p-232e5c9a.entry.js +1 -0
  308. package/dist/tegel/p-2375f0eb.entry.js +1 -0
  309. package/dist/tegel/p-29deedc6.entry.js +1 -0
  310. package/dist/tegel/p-2f52021b.entry.js +1 -0
  311. package/dist/tegel/p-3344582d.entry.js +1 -0
  312. package/dist/tegel/{p-040efb32.entry.js → p-4b14324d.entry.js} +1 -1
  313. package/dist/tegel/p-561fbe77.entry.js +1 -0
  314. package/dist/tegel/p-5a215722.entry.js +1 -0
  315. package/dist/tegel/p-5f7b1539.entry.js +1 -0
  316. package/dist/tegel/p-6f382b38.entry.js +1 -0
  317. package/dist/tegel/p-765e2719.entry.js +1 -0
  318. package/dist/tegel/p-76f60546.entry.js +1 -0
  319. package/dist/tegel/p-7a5244b6.entry.js +1 -0
  320. package/dist/tegel/p-816ff5f7.entry.js +1 -0
  321. package/dist/tegel/p-81d2d57b.entry.js +1 -0
  322. package/dist/tegel/p-87650f36.entry.js +1 -0
  323. package/dist/tegel/p-8e6f885c.entry.js +1 -0
  324. package/dist/tegel/p-8e9dcc20.entry.js +1 -0
  325. package/dist/tegel/p-997fc919.entry.js +1 -0
  326. package/dist/tegel/p-9a057c9a.entry.js +1 -0
  327. package/dist/tegel/p-9a95e92c.entry.js +1 -0
  328. package/dist/tegel/p-a75ff060.entry.js +1 -0
  329. package/dist/tegel/p-bf1216f9.entry.js +1 -0
  330. package/dist/tegel/p-bf597564.entry.js +1 -0
  331. package/dist/tegel/p-d2217bf0.entry.js +1 -0
  332. package/dist/tegel/p-e335137d.entry.js +1 -0
  333. package/dist/tegel/p-e34cce75.entry.js +1 -0
  334. package/dist/tegel/p-e55d09f2.entry.js +1 -0
  335. package/dist/tegel/p-ebbffa8a.entry.js +1 -0
  336. package/dist/tegel/{p-a5919930.entry.js → p-ed076d47.entry.js} +1 -1
  337. package/dist/tegel/p-ef887910.entry.js +1 -0
  338. package/dist/tegel/p-f4b70868.entry.js +1 -0
  339. package/dist/tegel/p-f52a0b63.entry.js +1 -0
  340. package/dist/tegel/p-f5bf214b.entry.js +1 -0
  341. package/dist/tegel/p-fd1b5923.entry.js +1 -0
  342. package/dist/tegel/tegel.css +13 -5
  343. package/dist/tegel/tegel.esm.js +1 -1
  344. package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +17 -17
  345. package/dist/types/components/accordion/accordion.d.ts +7 -7
  346. package/dist/types/components/accordion/accordion.stories.d.ts +77 -0
  347. package/dist/types/components/badge/badge.stories.d.ts +66 -0
  348. package/dist/types/components/badge/badges.d.ts +16 -16
  349. package/dist/types/components/banner/banner.stories.d.ts +68 -0
  350. package/dist/types/components/banner/sdds-banner.d.ts +48 -0
  351. package/dist/types/components/banner/sdds-banner.stories.d.ts +109 -0
  352. package/dist/types/components/block/block-native.stories.d.ts +31 -0
  353. package/dist/types/components/block/sdds-block.d.ts +9 -0
  354. package/dist/types/components/block/sdds-block.stories.d.ts +32 -0
  355. package/dist/types/components/breadcrumb/breadcrumb-item/breadcrumb-item.d.ts +9 -0
  356. package/dist/types/components/breadcrumb/breadcrumb.d.ts +5 -0
  357. package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +12 -0
  358. package/dist/types/components/button/button-component.d.ts +18 -15
  359. package/dist/types/components/button/button-native.stories.d.ts +148 -0
  360. package/dist/types/components/button/button-webcomponent.stories.d.ts +147 -0
  361. package/dist/types/components/card/card.stories.d.ts +138 -0
  362. package/dist/types/components/card/sdds-card.d.ts +39 -0
  363. package/dist/types/components/card/sdds-card.stories.d.ts +139 -0
  364. package/dist/types/components/checkbox/checkbox.stories.d.ts +39 -0
  365. package/dist/types/components/checkbox/sdds-checkbox.d.ts +38 -0
  366. package/dist/types/components/checkbox/sdds-checkbox.stories.d.ts +40 -0
  367. package/dist/types/components/chips/chips.stories.d.ts +77 -0
  368. package/dist/types/components/data-table/native-table.stories.d.ts +133 -0
  369. package/dist/types/components/data-table/table/table.d.ts +47 -47
  370. package/dist/types/components/data-table/table-body/table-body.d.ts +54 -54
  371. package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts +24 -24
  372. package/dist/types/components/data-table/table-body-row/table-body-row.d.ts +27 -27
  373. package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts +27 -27
  374. package/dist/types/components/data-table/table-component-basic.stories.d.ts +101 -0
  375. package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +99 -0
  376. package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +38 -0
  377. package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +148 -0
  378. package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +88 -0
  379. package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +88 -0
  380. package/dist/types/components/data-table/table-component-filtering.stories.d.ts +101 -0
  381. package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +101 -0
  382. package/dist/types/components/data-table/table-component-pagination.stories.d.ts +101 -0
  383. package/dist/types/components/data-table/table-component-sorting.stories.d.ts +100 -0
  384. package/dist/types/components/data-table/table-footer/table-footer.d.ts +50 -50
  385. package/dist/types/components/data-table/table-header/table-header.d.ts +27 -27
  386. package/dist/types/components/data-table/table-header-cell/table-header-cell.d.ts +44 -45
  387. package/dist/types/components/data-table/table-toolbar/table-toolbar.d.ts +22 -22
  388. package/dist/types/components/datetime/datetime.d.ts +42 -32
  389. package/dist/types/components/datetime/datetime.stories.d.ts +127 -0
  390. package/dist/types/components/divider/divider.stories.d.ts +65 -0
  391. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +42 -42
  392. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +73 -0
  393. package/dist/types/components/dropdown/dropdown-native.stories.d.ts +57 -0
  394. package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +19 -19
  395. package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +129 -0
  396. package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +115 -0
  397. package/dist/types/components/dropdown/dropdown.d.ts +58 -56
  398. package/dist/types/components/footer/footer.stories.d.ts +45 -0
  399. package/dist/types/components/header/header-all.stories.d.ts +29 -0
  400. package/dist/types/components/header/header-default.stories.d.ts +29 -0
  401. package/dist/types/components/header/header-inline.stories.d.ts +29 -0
  402. package/dist/types/components/header/header-search.stories.d.ts +29 -0
  403. package/dist/types/components/header/header-toolbar.stories.d.ts +29 -0
  404. package/dist/types/components/icon/icon-font.stories.d.ts +38 -0
  405. package/dist/types/components/icon/icon-web-component.stories.d.ts +38 -0
  406. package/dist/types/components/icon/icon.d.ts +12 -12
  407. package/dist/types/components/link/link.stories.d.ts +33 -0
  408. package/dist/types/components/link/sdds-link.d.ts +13 -0
  409. package/dist/types/components/link/sdds-link.stories.d.ts +58 -0
  410. package/dist/types/components/message/message.stories.d.ts +69 -0
  411. package/dist/types/components/message/sdds-message.d.ts +14 -0
  412. package/dist/types/components/message/sdds-message.stories.d.ts +87 -0
  413. package/dist/types/components/modal/modal-native.stories.d.ts +59 -0
  414. package/dist/types/components/modal/modal-webcomponent.stories.d.ts +52 -0
  415. package/dist/types/components/modal/modal.d.ts +17 -16
  416. package/dist/types/components/popover-canvas/popover-canvas.d.ts +24 -18
  417. package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +25 -0
  418. package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +27 -0
  419. package/dist/types/components/popover-menu/popover-menu.d.ts +24 -18
  420. package/dist/types/components/popover-menu/popover-menu.stories.d.ts +27 -0
  421. package/dist/types/components/radio-button/radio-button-component.stories.d.ts +39 -0
  422. package/dist/types/components/radio-button/radio-button.d.ts +26 -0
  423. package/dist/types/components/radio-button/radio-button.stories.d.ts +33 -0
  424. package/dist/types/components/side-menu/side-menu.stories.d.ts +42 -0
  425. package/dist/types/components/slider/slider.d.ts +86 -82
  426. package/dist/types/components/slider/slider.stories.d.ts +169 -0
  427. package/dist/types/components/spinner/spinner.d.ts +7 -7
  428. package/dist/types/components/spinner/spinner.stories.d.ts +37 -0
  429. package/dist/types/components/stepper/stepper.stories.d.ts +56 -0
  430. package/dist/types/components/tabs/inline-tabs-default/inline-tab/inline-tab.d.ts +6 -0
  431. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.d.ts +40 -41
  432. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.stories.d.ts +49 -0
  433. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.d.ts +20 -20
  434. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts +30 -0
  435. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +20 -18
  436. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +13 -0
  437. package/dist/types/components/textarea/textarea.d.ts +48 -41
  438. package/dist/types/components/textarea/textarea.stories.d.ts +116 -0
  439. package/dist/types/components/textfield/textfield.d.ts +52 -42
  440. package/dist/types/components/textfield/textfield.stories.d.ts +180 -0
  441. package/dist/types/components/toast/sdds-toast.d.ts +36 -0
  442. package/dist/types/components/toast/sdds-toast.stories.d.ts +56 -0
  443. package/dist/types/components/toast/toast.stories.d.ts +69 -0
  444. package/dist/types/components/toggle/sdds-toggle.d.ts +34 -0
  445. package/dist/types/components/toggle/sdds-toggle.stories.d.ts +74 -0
  446. package/dist/types/components/toggle/toggle.stories.d.ts +55 -0
  447. package/dist/types/components/tooltip/tooltip.d.ts +24 -20
  448. package/dist/types/components/tooltip/tooltip.stories.d.ts +54 -0
  449. package/dist/types/components/utility/colour/background-color.stories.d.ts +58 -0
  450. package/dist/types/components/utility/colour/text-color.stories.d.ts +58 -0
  451. package/dist/types/components.d.ts +939 -48
  452. package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts +13 -0
  453. package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts +13 -0
  454. package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts +13 -0
  455. package/dist/types/foundations-stories/grid/grid.stories.d.ts +35 -0
  456. package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts +8 -0
  457. package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts +8 -0
  458. package/dist/types/foundations-stories/typography/typography-body.stories.d.ts +8 -0
  459. package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts +8 -0
  460. package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts +21 -0
  461. package/dist/types/foundations-stories/typography/typography-paragraph.stories.d.ts +8 -0
  462. package/dist/types/index.d.ts +1 -1
  463. package/dist/types/utils/utils.d.ts +2 -2
  464. package/package.json +1 -1
  465. package/readme.md +41 -8
  466. package/dist/tegel/p-12ca5cfa.entry.js +0 -1
  467. package/dist/tegel/p-157e1618.js +0 -2
  468. package/dist/tegel/p-1fe61cf6.entry.js +0 -1
  469. package/dist/tegel/p-2f376504.entry.js +0 -1
  470. package/dist/tegel/p-44ced895.entry.js +0 -1
  471. package/dist/tegel/p-4880f03d.entry.js +0 -1
  472. package/dist/tegel/p-4aba73a3.entry.js +0 -1
  473. package/dist/tegel/p-4b58a02c.entry.js +0 -1
  474. package/dist/tegel/p-4cb85347.entry.js +0 -1
  475. package/dist/tegel/p-52031b5a.entry.js +0 -1
  476. package/dist/tegel/p-677baf7f.entry.js +0 -1
  477. package/dist/tegel/p-71797eaf.entry.js +0 -1
  478. package/dist/tegel/p-7373284c.entry.js +0 -1
  479. package/dist/tegel/p-7451779b.entry.js +0 -1
  480. package/dist/tegel/p-77aeea3b.entry.js +0 -1
  481. package/dist/tegel/p-8582d6a7.entry.js +0 -1
  482. package/dist/tegel/p-96021bd0.entry.js +0 -1
  483. package/dist/tegel/p-9d8caf51.entry.js +0 -1
  484. package/dist/tegel/p-b01cface.entry.js +0 -1
  485. package/dist/tegel/p-bf896643.entry.js +0 -1
  486. package/dist/tegel/p-c311725c.entry.js +0 -1
  487. package/dist/tegel/p-cf72dfd9.entry.js +0 -1
  488. package/dist/tegel/p-d91caec6.entry.js +0 -1
  489. package/dist/tegel/p-e10eec33.entry.js +0 -1
  490. package/dist/tegel/p-f2262a69.entry.js +0 -1
  491. package/dist/tegel/p-f2f7aa45.entry.js +0 -1
@@ -2,333 +2,339 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-e1c79686.js');
5
+ const index = require('./index-b98965c7.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,:host,::slotted(*),.sdds-theme-light{--sdds-link:var(--sdds-grey-958);--sdds-link-text-decoration:none;--sdds-dropdown-bg:var(--sdds-white);--sdds-dropdown-bg-hover:var(--sdds-grey-50)}:root .sdds-on-white-bg,:host .sdds-on-white-bg,::slotted(*) .sdds-on-white-bg,.sdds-theme-light .sdds-on-white-bg{--sdds-dropdown-bg:var(--sdds-grey-50);--sdds-dropdown-bg-hover:var(--sdds-grey-100)}.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-grey-700)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-grey-958);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,:host,::slotted(*),.sdds-theme-light{--sdds-link:var(--sdds-grey-958);--sdds-link-text-decoration:none;--sdds-dropdown-bg:var(--sdds-white);--sdds-dropdown-bg-hover:var(--sdds-grey-50)}:root .sdds-on-white-bg,:host .sdds-on-white-bg,::slotted(*) .sdds-on-white-bg,.sdds-theme-light .sdds-on-white-bg{--sdds-dropdown-bg:var(--sdds-grey-50);--sdds-dropdown-bg-hover:var(--sdds-grey-100)}: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-theme-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-bg-hover:var(--sdds-blue-800);--sdds-checkbox-bg-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-bg-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-bg-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-theme-dark,.sdds-theme-light .sdds-theme-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-bg-hover:white;--sdds-checkbox-bg-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-bg-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-bg-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-8);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-bg-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-bg-focus);opacity:0.24;animation:cb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.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-bg-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-bg-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}@keyframes cb-focus{0%{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){--sdds-link:var(--sdds-grey-958);--sdds-link-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-grey-400);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-grey-400)}.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-grey-958);display:flex;align-items:center;background-color:var(--sdds-dropdown-bg);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-grey-400);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-grey-800)}.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-grey-800)}.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-grey-958);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:10000;background-color:var(--sdds-white);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--sdds-grey-100);border-right-color:var(--sdds-grey-100);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-grey-400);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-grey-400)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-grey-400)}: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-white);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-grey-100);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box}: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-bg-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-bg-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-grey-300);border-top:1px solid var(--sdds-grey-300);border-bottom:1px solid var(--sdds-grey-300)}: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-grey-400);background-color:var(--sdds-white)}: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-grey-300)}.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)}: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-grey-700);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-background-disabled:var(--sdds-white);--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)}: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-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-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-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-background-disabled:var(--sdds-white);--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)}: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-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-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800)}: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-grey-400);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-grey-400)}.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.placeholder = undefined;
14
- this.defaultOption = undefined;
15
- this.selectedOption = undefined;
16
- this.disabled = undefined;
17
- this.type = 'default';
18
- this.size = 'lg';
19
- this.inline = false;
20
- this.labelPosition = 'no-label';
21
- this.label = undefined;
22
- this.state = 'default';
23
- this.helper = '';
24
- this.openDirection = 'auto';
25
- this.optionValues = [];
26
- this.optionLabels = [];
27
- this.open = false;
28
- this.node = undefined;
29
- this.selectedLabel = '';
30
- this.selectedValue = '';
31
- this.selectedValuesArray = [];
32
- this.selectedLabelsArray = [];
33
- this.dropdownUniqueClass = '';
34
- this.openUpwards = false;
35
- this.dropdownMenuHeight = 0;
36
- this.dropdownMenuSelector = undefined;
37
- this.listItemIndex = -1;
38
- this.listItemArray = undefined;
39
- }
40
- componentWillLoad() {
41
- // If default option is set, update the default selectedLabel value
42
- // this.host.children is a HTMLCollection type, cannot use forEach
43
- this.listItemArray = Array.from(this.host.children);
44
- this.listItemArray.map((listItem) => {
45
- this.optionValues.push(listItem.value);
46
- this.optionLabels.push(listItem.innerText.trim());
47
- });
48
- this.setOptionFromOutside(this.defaultOption);
49
- if (this.size === 'small') {
50
- this.size = 'sm';
51
- console.warn('size="small" is deprecated, use size="sm" instead');
52
- }
53
- if (this.size === 'medium') {
54
- this.size = 'md';
55
- console.warn('size="medium" is deprecated, use size="md" instead');
56
- }
57
- if (this.size === 'large') {
58
- this.size = 'lg';
59
- console.warn('size="large" is deprecated, use size="lg" instead');
60
- }
61
- }
62
- setOptionFromOutside(optionValue) {
63
- if (optionValue) {
64
- this.deselectAll();
65
- // TODO
66
- // eslint-disable-next-line no-param-reassign
67
- optionValue = optionValue.split(',');
68
- for (let i = 0; i < this.host.children.length; i++) {
69
- // Todo - specify type
70
- const el = this.host.children[i];
71
- if (optionValue.includes(el.value.trim())) {
72
- this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];
73
- this.selectedValuesArray = [...this.selectedValuesArray, el.value];
74
- this.selectedLabel = el.textContent;
75
- this.selectedValue = el.value;
76
- el.setAttribute('selectedLabel', 'true');
77
- el.setAttribute('selected', 'true');
78
- }
79
- else {
80
- el.setAttribute('selectedLabel', 'false');
81
- el.setAttribute('selected', 'false');
82
- }
83
- }
84
- }
85
- }
86
- changeSelectedOption() {
87
- if (this.selectedValuesArray.includes(this.selectedOption)) {
88
- this.resetOption();
89
- }
90
- this.setOptionFromOutside(this.selectedOption);
91
- this.host.setAttribute('selected-option', '');
92
- }
93
- handleDocClick(ev) {
94
- // To stop bubble click
95
- ev.stopPropagation();
96
- const target = ev ? ev.composedPath()[0] : window.event.target[0];
97
- if (this.node !== undefined && this.node.contains(target)) {
98
- if (typeof this.textInput !== 'undefined' || this.textInput === null) {
99
- this.textInput.focus();
100
- }
101
- }
102
- else {
103
- this.tabbingLabelReset();
104
- this.open = false;
105
- }
106
- }
107
- keyListener(ev) {
108
- if (!this.disabled) {
109
- switch (ev.key) {
110
- case 'ArrowDown':
111
- if (this.open) {
112
- ev.preventDefault();
113
- if (this.listItemIndex < this.listItemArray.length - 1) {
114
- this.listItemIndex++;
115
- }
116
- else {
117
- this.listItemIndex = 0;
118
- }
119
- this.listItemArray[this.listItemIndex].focus();
120
- }
121
- break;
122
- case 'ArrowUp':
123
- if (this.open) {
124
- ev.preventDefault();
125
- if (this.listItemIndex > 0) {
126
- this.listItemIndex--;
127
- }
128
- else {
129
- this.listItemIndex = this.listItemArray.length - 1;
130
- }
131
- this.listItemArray[this.listItemIndex].focus();
132
- }
133
- break;
134
- case 'Tab':
135
- this.open = false;
136
- break;
137
- case 'Escape':
138
- this.open = false;
139
- this.node.focus();
140
- break;
141
- }
142
- }
143
- }
144
- handleClick() {
145
- this.open = this.open === false;
146
- if (this.openDirection === 'auto') {
147
- this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;
148
- const distanceToBottom = this.host.getBoundingClientRect().top;
149
- const viewportHeight = window.innerHeight;
150
- this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;
151
- // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
152
- // Additional 57px is added as compensation for dropdown element own input/button height
153
- // It is added on handleClick due to possible dynamic injection of data when component is already rendered
154
- }
155
- else {
156
- this.openUpwards = this.openDirection === 'up';
157
- }
158
- }
159
- tabbingLabelReset() {
160
- if (typeof this.textInput !== 'undefined' || this.textInput === null) {
161
- if (!this.selectedLabel && this.selectedLabel.length <= 0) {
162
- this.textInput.value = '';
163
- this.inputSearch.emit('');
164
- }
165
- if (this.selectedLabel !== this.textInput.value) {
166
- this.textInput.value = this.selectedLabel;
167
- }
168
- }
169
- }
170
- selectOptionHandler(event) {
171
- this.open = this.type === 'multiselect';
172
- if (this.type !== 'multiselect') {
173
- this.selectedLabel = event.detail.label;
174
- this.selectedValue = event.detail.value;
175
- this.tabbingLabelReset();
176
- }
177
- else {
178
- if (this.selectedValuesArray.includes(event.detail.value)) {
179
- const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);
180
- this.selectedValuesArray = this.selectedValuesArray.filter((_value, index) => index !== itemIndex);
181
- this.selectedLabelsArray = this.selectedLabelsArray.filter((_value, index) => index !== itemIndex);
182
- }
183
- else {
184
- this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];
185
- this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];
186
- }
187
- }
188
- }
189
- handleSearch(ev) {
190
- const searchTerm = ev.target.value;
191
- this.inputSearch.emit(searchTerm);
192
- this.open = true;
193
- }
194
- deselectAll() {
195
- this.selectedLabel = '';
196
- this.selectedValue = '';
197
- this.selectedLabelsArray = [];
198
- this.selectedValuesArray = [];
199
- this.listItemArray = this.listItemArray.map((optionItem) => (Object.assign(Object.assign({}, optionItem), { selected: false })));
200
- }
201
- async resetOption() {
202
- this.deselectAll();
203
- this.open = false;
204
- if (this.defaultOption) {
205
- this.setOptionFromOutside(this.defaultOption);
206
- }
207
- }
208
- render() {
209
- return (index.h(index.Host, { class: {
210
- 'sdds-dropdown--open': this.open && !this.disabled,
211
- 'sdds-dropdown-multiselect': this.type === 'multiselect',
212
- 'sdds-dropdown-inline': this.inline,
213
- 'sdds-dropdown--selected': this.selectedLabel.length > 0 || this.selectedLabel === '',
214
- 'sdds-dropdown--error': this.state === 'error',
215
- 'sdds-dropdown--open-upwards': this.openUpwards,
216
- 'sdds-dropdown--label-inside-position': this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0,
217
- }, "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
218
- ? 'sdds-dropdown-toggle--selected'
9
+ const Dropdown = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ this.inputSearch = index.createEvent(this, "inputSearch", 7);
13
+ this.modeVariant = undefined;
14
+ this.placeholder = undefined;
15
+ this.defaultOption = undefined;
16
+ this.selectedOption = undefined;
17
+ this.disabled = undefined;
18
+ this.type = 'default';
19
+ this.size = 'lg';
20
+ this.inline = false;
21
+ this.labelPosition = 'no-label';
22
+ this.label = undefined;
23
+ this.state = 'default';
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
+ }
41
+ componentWillLoad() {
42
+ // If default option is set, update the default selectedLabel value
43
+ // this.host.children is a HTMLCollection type, cannot use forEach
44
+ this.listItemArray = Array.from(this.host.children);
45
+ this.listItemArray.map((listItem) => {
46
+ this.optionValues.push(listItem.value);
47
+ this.optionLabels.push(listItem.innerText.trim());
48
+ });
49
+ this.setOptionFromOutside(this.defaultOption);
50
+ if (this.size === 'small') {
51
+ this.size = 'sm';
52
+ console.warn('size="small" is deprecated, use size="sm" instead');
53
+ }
54
+ if (this.size === 'medium') {
55
+ this.size = 'md';
56
+ console.warn('size="medium" is deprecated, use size="md" instead');
57
+ }
58
+ if (this.size === 'large') {
59
+ this.size = 'lg';
60
+ console.warn('size="large" is deprecated, use size="lg" instead');
61
+ }
62
+ }
63
+ setOptionFromOutside(optionValue) {
64
+ if (optionValue) {
65
+ this.deselectAll();
66
+ // TODO
67
+ // eslint-disable-next-line no-param-reassign
68
+ optionValue = optionValue.split(',');
69
+ for (let i = 0; i < this.host.children.length; i++) {
70
+ // Todo - specify type
71
+ const el = this.host.children[i];
72
+ if (optionValue.includes(el.value.trim())) {
73
+ this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];
74
+ this.selectedValuesArray = [...this.selectedValuesArray, el.value];
75
+ this.selectedLabel = el.textContent;
76
+ this.selectedValue = el.value;
77
+ el.setAttribute('selectedLabel', 'true');
78
+ el.setAttribute('selected', 'true');
79
+ }
80
+ else {
81
+ el.setAttribute('selectedLabel', 'false');
82
+ el.setAttribute('selected', 'false');
83
+ }
84
+ }
85
+ }
86
+ }
87
+ changeSelectedOption() {
88
+ if (this.selectedValuesArray.includes(this.selectedOption)) {
89
+ this.resetOption();
90
+ }
91
+ this.setOptionFromOutside(this.selectedOption);
92
+ this.host.setAttribute('selected-option', '');
93
+ }
94
+ handleDocClick(ev) {
95
+ // To stop bubble click
96
+ ev.stopPropagation();
97
+ const target = ev ? ev.composedPath()[0] : window.event.target[0];
98
+ if (this.node !== undefined && this.node.contains(target)) {
99
+ if (typeof this.textInput !== 'undefined' || this.textInput === null) {
100
+ this.textInput.focus();
101
+ }
102
+ }
103
+ else {
104
+ this.tabbingLabelReset();
105
+ this.open = false;
106
+ }
107
+ }
108
+ keyListener(ev) {
109
+ if (!this.disabled) {
110
+ switch (ev.key) {
111
+ case 'ArrowDown':
112
+ if (this.open) {
113
+ ev.preventDefault();
114
+ if (this.listItemIndex < this.listItemArray.length - 1) {
115
+ this.listItemIndex++;
116
+ }
117
+ else {
118
+ this.listItemIndex = 0;
119
+ }
120
+ this.listItemArray[this.listItemIndex].focus();
121
+ }
122
+ break;
123
+ case 'ArrowUp':
124
+ if (this.open) {
125
+ ev.preventDefault();
126
+ if (this.listItemIndex > 0) {
127
+ this.listItemIndex--;
128
+ }
129
+ else {
130
+ this.listItemIndex = this.listItemArray.length - 1;
131
+ }
132
+ this.listItemArray[this.listItemIndex].focus();
133
+ }
134
+ break;
135
+ case 'Tab':
136
+ this.open = false;
137
+ break;
138
+ case 'Escape':
139
+ this.open = false;
140
+ this.node.focus();
141
+ break;
142
+ }
143
+ }
144
+ }
145
+ handleClick() {
146
+ this.open = this.open === false;
147
+ if (this.openDirection === 'auto') {
148
+ this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;
149
+ const distanceToBottom = this.host.getBoundingClientRect().top;
150
+ const viewportHeight = window.innerHeight;
151
+ this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;
152
+ // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
153
+ // Additional 57px is added as compensation for dropdown element own input/button height
154
+ // It is added on handleClick due to possible dynamic injection of data when component is already rendered
155
+ }
156
+ else {
157
+ this.openUpwards = this.openDirection === 'up';
158
+ }
159
+ }
160
+ tabbingLabelReset() {
161
+ if (typeof this.textInput !== 'undefined' || this.textInput === null) {
162
+ if (!this.selectedLabel && this.selectedLabel.length <= 0) {
163
+ this.textInput.value = '';
164
+ this.inputSearch.emit('');
165
+ }
166
+ if (this.selectedLabel !== this.textInput.value) {
167
+ this.textInput.value = this.selectedLabel;
168
+ }
169
+ }
170
+ }
171
+ selectOptionHandler(event) {
172
+ this.open = this.type === 'multiselect';
173
+ if (this.type !== 'multiselect') {
174
+ this.selectedLabel = event.detail.label;
175
+ this.selectedValue = event.detail.value;
176
+ this.tabbingLabelReset();
177
+ }
178
+ else {
179
+ if (this.selectedValuesArray.includes(event.detail.value)) {
180
+ const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);
181
+ this.selectedValuesArray = this.selectedValuesArray.filter((_value, index) => index !== itemIndex);
182
+ this.selectedLabelsArray = this.selectedLabelsArray.filter((_value, index) => index !== itemIndex);
183
+ }
184
+ else {
185
+ this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];
186
+ this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];
187
+ }
188
+ }
189
+ }
190
+ handleSearch(ev) {
191
+ const searchTerm = ev.target.value;
192
+ this.inputSearch.emit(searchTerm);
193
+ this.open = true;
194
+ }
195
+ deselectAll() {
196
+ this.selectedLabel = '';
197
+ this.selectedValue = '';
198
+ this.selectedLabelsArray = [];
199
+ this.selectedValuesArray = [];
200
+ this.listItemArray = this.listItemArray.map((optionItem) => (Object.assign(Object.assign({}, optionItem), { selected: false })));
201
+ }
202
+ async resetOption() {
203
+ this.deselectAll();
204
+ this.open = false;
205
+ if (this.defaultOption) {
206
+ this.setOptionFromOutside(this.defaultOption);
207
+ }
208
+ }
209
+ render() {
210
+ return (index.h(index.Host, { class: `
211
+ ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
212
+ ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}
213
+ ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}
214
+ ${this.inline ? 'sdds-dropdown-inline' : ''}
215
+ ${this.selectedLabel.length > 0 || this.selectedLabel === ''
216
+ ? 'sdds-dropdown--selected'
219
217
  : ''}
220
- ${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
221
- ? `sdds-dropdown-toggle-label-inside-${this.size}`
222
- : `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: {
223
- 'sdds-dropdown-label-container': true,
224
- 'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
225
- this.size !== 'sm' &&
226
- (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),
227
- } }, this.size !== 'sm' &&
228
- (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&
229
- this.labelPosition === 'inside' &&
230
- 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 ||
231
- (this.labelPosition === 'inside' && this.label.length < 0)) &&
232
- 'sdds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
233
- this.type !== 'multiselect' &&
234
- this.selectedLabel, this.type === 'multiselect' && (index.h("span", { class: "sdds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
235
- this.selectedLabelsArray.toString().length < 1 &&
236
- this.placeholder, this.selectedLabelsArray.toString().length > 0 &&
237
- this.selectedLabelsArray.toString().split(',').join(', '))), !this.selectedLabel &&
238
- this.labelPosition === 'inside' &&
239
- this.size !== 'sm' &&
240
- this.label, !this.selectedLabel &&
241
- this.type !== 'multiselect' &&
242
- this.labelPosition !== 'inside' &&
243
- this.placeholder, !this.selectedLabel &&
244
- this.size === 'sm' &&
245
- this.labelPosition === 'inside' &&
246
- 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",
247
- // Need to have reference in order to calc height and distance from bottom
248
- 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))));
249
- }
250
- get host() { return index.getElement(this); }
251
- static get watchers() { return {
252
- "selectedOption": ["changeSelectedOption"]
253
- }; }
254
- };
218
+ ${this.state === 'error' ? 'sdds-dropdown--error' : ''}
219
+ ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}
220
+ ${this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0
221
+ ? 'sdds-dropdown--label-inside-position'
222
+ : ''}
223
+ `, "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
224
+ ? 'sdds-dropdown-toggle--selected'
225
+ : ''}
226
+ ${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
227
+ ? `sdds-dropdown-toggle-label-inside-${this.size}`
228
+ : `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: {
229
+ 'sdds-dropdown-label-container': true,
230
+ 'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
231
+ this.size !== 'sm' &&
232
+ (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),
233
+ } }, this.size !== 'sm' &&
234
+ (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&
235
+ this.labelPosition === 'inside' &&
236
+ 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 ||
237
+ (this.labelPosition === 'inside' && this.label.length < 0)) &&
238
+ 'sdds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
239
+ this.type !== 'multiselect' &&
240
+ this.selectedLabel, this.type === 'multiselect' && (index.h("span", { class: "sdds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
241
+ this.selectedLabelsArray.toString().length < 1 &&
242
+ this.placeholder, this.selectedLabelsArray.toString().length > 0 &&
243
+ this.selectedLabelsArray.toString().split(',').join(', '))), !this.selectedLabel &&
244
+ this.labelPosition === 'inside' &&
245
+ this.size !== 'sm' &&
246
+ this.label, !this.selectedLabel &&
247
+ this.type !== 'multiselect' &&
248
+ this.labelPosition !== 'inside' &&
249
+ this.placeholder, !this.selectedLabel &&
250
+ this.size === 'sm' &&
251
+ this.labelPosition === 'inside' &&
252
+ 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",
253
+ // Need to have reference in order to calc height and distance from bottom
254
+ 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))));
255
+ }
256
+ get host() { return index.getElement(this); }
257
+ static get watchers() { return {
258
+ "selectedOption": ["changeSelectedOption"]
259
+ }; }
260
+ };
255
261
  Dropdown.style = dropdownCss$1;
256
262
 
257
- 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,:host,::slotted(*),.sdds-theme-light{--sdds-link:var(--sdds-grey-958);--sdds-link-text-decoration:none;--sdds-dropdown-bg:var(--sdds-white);--sdds-dropdown-bg-hover:var(--sdds-grey-50)}:root .sdds-on-white-bg,:host .sdds-on-white-bg,::slotted(*) .sdds-on-white-bg,.sdds-theme-light .sdds-on-white-bg{--sdds-dropdown-bg:var(--sdds-grey-50);--sdds-dropdown-bg-hover:var(--sdds-grey-100)}.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-grey-700)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-grey-958);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,:host,::slotted(*),.sdds-theme-light{--sdds-link:var(--sdds-grey-958);--sdds-link-text-decoration:none;--sdds-dropdown-bg:var(--sdds-white);--sdds-dropdown-bg-hover:var(--sdds-grey-50)}:root .sdds-on-white-bg,:host .sdds-on-white-bg,::slotted(*) .sdds-on-white-bg,.sdds-theme-light .sdds-on-white-bg{--sdds-dropdown-bg:var(--sdds-grey-50);--sdds-dropdown-bg-hover:var(--sdds-grey-100)}: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-theme-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-bg-hover:var(--sdds-blue-800);--sdds-checkbox-bg-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-bg-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-bg-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-theme-dark,.sdds-theme-light .sdds-theme-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-bg-hover:white;--sdds-checkbox-bg-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-bg-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-bg-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-8);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-bg-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-bg-focus);opacity:0.24;animation:cb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.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-bg-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-bg-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}@keyframes cb-focus{0%{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){--sdds-link:var(--sdds-grey-958);--sdds-link-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-grey-400);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-grey-400)}.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-grey-958);display:flex;align-items:center;background-color:var(--sdds-dropdown-bg);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-grey-400);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-grey-800)}.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-grey-800)}.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-grey-958);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:10000;background-color:var(--sdds-white);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--sdds-grey-100);border-right-color:var(--sdds-grey-100);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-grey-400);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-grey-400)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-grey-400)}: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-white);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-grey-100);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box}: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-bg-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-bg-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-grey-300);border-top:1px solid var(--sdds-grey-300);border-bottom:1px solid var(--sdds-grey-300)}: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-grey-400);background-color:var(--sdds-white)}: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-grey-300)}.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)}: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-grey-700);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}";
263
+ 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-background-disabled:var(--sdds-white);--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)}: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-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-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-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-background-disabled:var(--sdds-white);--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)}: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-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-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800)}: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-grey-400);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-grey-400)}.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}";
258
264
 
259
- const DropdownOption = class {
260
- constructor(hostRef) {
261
- index.registerInstance(this, hostRef);
262
- this.selectOption = index.createEvent(this, "selectOption", 7);
263
- this.innerValue = undefined;
264
- this.selected = false;
265
- this.disabled = false;
266
- this.value = undefined;
267
- }
268
- changeFocusHandler() {
269
- this.host.focus();
270
- }
271
- removeFocusHandler() {
272
- this.host.blur();
273
- }
274
- onKeyDown(event) {
275
- if (event.code === 'Enter') {
276
- this.selectOptionHandler({
277
- value: this.value,
278
- label: this.host.innerText,
279
- parent: this.host.parentNode,
280
- });
281
- }
282
- }
283
- componentWillLoad() {
284
- this.innerValue = this.value;
285
- this.isMultiSelectOption = this.host
286
- .closest('sdds-dropdown')
287
- .classList.contains('sdds-dropdown-multiselect');
288
- }
289
- selectOptionHandler(value) {
290
- if (!this.disabled) {
291
- const listOptions = value.parent.childNodes;
292
- this.selectOption.emit(value);
293
- if (!this.isMultiSelectOption) {
294
- listOptions.forEach((optionEl) => {
295
- // TODO: fix and enable rule
296
- // eslint-disable-next-line no-param-reassign
297
- optionEl.selected = false;
298
- });
299
- }
300
- const optionCheckbox = this.host.shadowRoot.querySelector('input');
301
- if (this.selected) {
302
- this.selected = false;
303
- if (optionCheckbox) {
304
- optionCheckbox.checked = false;
305
- }
306
- }
307
- else {
308
- this.selected = true;
309
- if (optionCheckbox) {
310
- optionCheckbox.checked = true;
311
- }
312
- }
313
- }
314
- }
315
- render() {
316
- return (index.h(index.Host, { onClick: (ev) => {
317
- if (this.isMultiSelectOption) {
318
- ev.stopPropagation();
319
- }
320
- return this.selectOptionHandler({
321
- value: this.value,
322
- label: this.host.innerText,
323
- parent: ev.target.parentNode,
324
- });
325
- }, class: {
326
- 'selected': this.selected,
327
- 'sdds-dropdown-option-disabled': this.disabled,
328
- }, 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" }))))));
329
- }
330
- get host() { return index.getElement(this); }
331
- };
265
+ const DropdownOption = class {
266
+ constructor(hostRef) {
267
+ index.registerInstance(this, hostRef);
268
+ this.selectOption = index.createEvent(this, "selectOption", 7);
269
+ this.innerValue = undefined;
270
+ this.selected = false;
271
+ this.disabled = false;
272
+ this.value = undefined;
273
+ }
274
+ changeFocusHandler() {
275
+ this.host.focus();
276
+ }
277
+ removeFocusHandler() {
278
+ this.host.blur();
279
+ }
280
+ onKeyDown(event) {
281
+ if (event.code === 'Enter') {
282
+ this.selectOptionHandler({
283
+ value: this.value,
284
+ label: this.host.innerText,
285
+ parent: this.host.parentNode,
286
+ });
287
+ }
288
+ }
289
+ componentWillLoad() {
290
+ this.innerValue = this.value;
291
+ this.isMultiSelectOption = this.host
292
+ .closest('sdds-dropdown')
293
+ .classList.contains('sdds-dropdown-multiselect');
294
+ }
295
+ selectOptionHandler(value) {
296
+ if (!this.disabled) {
297
+ const listOptions = value.parent.childNodes;
298
+ this.selectOption.emit(value);
299
+ if (!this.isMultiSelectOption) {
300
+ listOptions.forEach((optionEl) => {
301
+ // TODO: fix and enable rule
302
+ // eslint-disable-next-line no-param-reassign
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: (ev) => {
323
+ if (this.isMultiSelectOption) {
324
+ ev.stopPropagation();
325
+ }
326
+ return this.selectOptionHandler({
327
+ value: this.value,
328
+ label: this.host.innerText,
329
+ parent: ev.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
+ };
332
338
  DropdownOption.style = dropdownCss;
333
339
 
334
340
  exports.sdds_dropdown = Dropdown;