@skf-design-system/ui-components 1.0.0-alpha.34 → 1.0.0-alpha.36

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 (355) hide show
  1. package/README.md +20 -27
  2. package/custom-elements.json +25490 -0
  3. package/dist/components/accordion/accordion-item.component.d.ts +36 -0
  4. package/dist/components/accordion/accordion-item.component.js +98 -0
  5. package/dist/components/accordion/accordion-item.d.ts +3 -3
  6. package/dist/components/accordion/accordion-item.js +4 -5
  7. package/dist/components/accordion/accordion-item.styles.js +77 -0
  8. package/dist/components/accordion/accordion.component.d.ts +10 -14
  9. package/dist/components/accordion/accordion.component.js +10 -11
  10. package/dist/components/accordion/accordion.d.ts +0 -1
  11. package/dist/components/accordion/accordion.js +0 -2
  12. package/dist/components/alert/alert.component.d.ts +12 -12
  13. package/dist/components/alert/alert.component.js +57 -55
  14. package/dist/components/alert/alert.styles.js +50 -51
  15. package/dist/components/breadcrumb/breadcrumb-item.component.js +60 -0
  16. package/dist/components/{breadcrumb-item → breadcrumb}/breadcrumb-item.d.ts +2 -2
  17. package/dist/components/breadcrumb/breadcrumb-item.js +6 -0
  18. package/dist/components/breadcrumb/breadcrumb-item.styles.js +63 -0
  19. package/dist/components/breadcrumb/breadcrumb.component.d.ts +7 -4
  20. package/dist/components/breadcrumb/breadcrumb.component.js +65 -0
  21. package/dist/components/breadcrumb/breadcrumb.d.ts +2 -2
  22. package/dist/components/breadcrumb/breadcrumb.js +6 -0
  23. package/dist/components/breadcrumb/breadcrumb.styles.js +25 -0
  24. package/dist/components/button/button.component.d.ts +17 -14
  25. package/dist/components/button/button.component.js +73 -61
  26. package/dist/components/button/button.styles.d.ts +1 -2
  27. package/dist/components/button/button.styles.js +13 -3
  28. package/dist/components/card/card.component.d.ts +6 -1
  29. package/dist/components/card/card.component.js +46 -36
  30. package/dist/components/card/card.styles.js +37 -23
  31. package/dist/components/checkbox/checkbox.component.d.ts +17 -13
  32. package/dist/components/checkbox/checkbox.component.js +74 -61
  33. package/dist/components/checkbox/checkbox.styles.d.ts +1 -2
  34. package/dist/components/checkbox/checkbox.styles.js +1 -5
  35. package/dist/components/datepicker/datepicker-calendar.component.d.ts +80 -0
  36. package/dist/components/datepicker/datepicker-calendar.component.js +415 -0
  37. package/dist/components/datepicker/datepicker-calendar.d.ts +8 -0
  38. package/dist/components/datepicker/datepicker-calendar.js +6 -0
  39. package/dist/components/datepicker/datepicker-calendar.styles.js +202 -0
  40. package/dist/components/datepicker/datepicker-popup.component.d.ts +64 -0
  41. package/dist/components/datepicker/datepicker-popup.component.js +261 -0
  42. package/dist/components/datepicker/datepicker-popup.d.ts +8 -0
  43. package/dist/components/datepicker/datepicker-popup.helpers.d.ts +41 -0
  44. package/dist/components/datepicker/datepicker-popup.helpers.js +83 -0
  45. package/dist/components/datepicker/datepicker-popup.js +6 -0
  46. package/dist/components/datepicker/datepicker-popup.styles.js +87 -0
  47. package/dist/components/datepicker/datepicker.component.d.ts +121 -0
  48. package/dist/components/datepicker/datepicker.component.js +456 -0
  49. package/dist/components/datepicker/datepicker.d.ts +8 -0
  50. package/dist/components/datepicker/datepicker.helpers.d.ts +38 -0
  51. package/dist/components/datepicker/datepicker.helpers.js +31 -0
  52. package/dist/components/datepicker/datepicker.js +6 -0
  53. package/dist/components/datepicker/datepicker.styles.d.ts +1 -0
  54. package/dist/components/datepicker/datepicker.styles.js +18 -0
  55. package/dist/components/dialog/dialog.component.d.ts +20 -29
  56. package/dist/components/dialog/dialog.component.js +85 -75
  57. package/dist/components/dialog/dialog.d.ts +2 -2
  58. package/dist/components/dialog/dialog.styles.js +4 -4
  59. package/dist/components/divider/divider.component.d.ts +4 -8
  60. package/dist/components/divider/divider.component.js +24 -46
  61. package/dist/components/divider/divider.styles.js +34 -30
  62. package/dist/components/drawer/drawer.component.d.ts +61 -0
  63. package/dist/components/drawer/drawer.component.js +125 -0
  64. package/dist/components/drawer/drawer.d.ts +8 -0
  65. package/dist/components/drawer/drawer.js +6 -0
  66. package/dist/components/drawer/drawer.styles.js +71 -0
  67. package/dist/components/header/header.component.d.ts +46 -0
  68. package/dist/components/header/header.component.js +116 -0
  69. package/dist/components/header/header.d.ts +8 -0
  70. package/dist/components/header/header.js +6 -0
  71. package/dist/components/header/header.styles.js +68 -0
  72. package/dist/components/heading/heading.component.d.ts +8 -12
  73. package/dist/components/heading/heading.component.js +52 -24
  74. package/dist/components/heading/heading.styles.d.ts +1 -2
  75. package/dist/components/heading/heading.styles.js +35 -37
  76. package/dist/components/icon/icon.component.d.ts +15 -17
  77. package/dist/components/icon/icon.component.js +52 -43
  78. package/dist/components/icon/icon.styles.d.ts +1 -2
  79. package/dist/components/icon/icon.styles.js +60 -60
  80. package/dist/components/input/input.component.d.ts +31 -31
  81. package/dist/components/input/input.component.js +167 -146
  82. package/dist/components/input/input.controllers.d.ts +20 -6
  83. package/dist/components/input/input.controllers.js +14 -10
  84. package/dist/components/link/link.component.d.ts +20 -25
  85. package/dist/components/link/link.component.js +99 -107
  86. package/dist/components/link/link.styles.d.ts +1 -2
  87. package/dist/components/link/link.styles.js +47 -43
  88. package/dist/components/loader/loader.component.d.ts +1 -1
  89. package/dist/components/loader/loader.component.js +36 -40
  90. package/dist/components/loader/loader.styles.d.ts +1 -2
  91. package/dist/components/loader/loader.styles.js +40 -32
  92. package/dist/components/logo/logo.component.d.ts +8 -6
  93. package/dist/components/logo/logo.component.js +55 -51
  94. package/dist/components/logo/logo.styles.js +26 -16
  95. package/dist/components/menu/menu-item.component.d.ts +13 -0
  96. package/dist/components/menu/menu-item.component.js +13 -0
  97. package/dist/components/{menu-item → menu}/menu-item.d.ts +2 -2
  98. package/dist/components/{menu-item → menu}/menu-item.styles.js +8 -5
  99. package/dist/components/menu/menu.component.d.ts +10 -8
  100. package/dist/components/menu/menu.component.js +8 -10
  101. package/dist/components/menu/menu.d.ts +2 -2
  102. package/dist/components/nav/nav-item.component.d.ts +22 -0
  103. package/dist/components/nav/nav-item.component.js +57 -0
  104. package/dist/components/nav/nav-item.d.ts +8 -0
  105. package/dist/components/nav/nav-item.js +6 -0
  106. package/dist/components/nav/nav-item.styles.js +43 -0
  107. package/dist/components/nav/nav.component.d.ts +23 -0
  108. package/dist/components/nav/nav.component.js +55 -0
  109. package/dist/components/nav/nav.d.ts +8 -0
  110. package/dist/components/nav/nav.js +6 -0
  111. package/dist/components/nav/nav.styles.js +23 -0
  112. package/dist/components/popover/popover.component.d.ts +15 -8
  113. package/dist/components/popover/popover.component.js +29 -23
  114. package/dist/components/popover/popover.d.ts +2 -2
  115. package/dist/components/progress/progress.component.d.ts +4 -2
  116. package/dist/components/progress/progress.component.js +38 -35
  117. package/dist/components/progress/progress.d.ts +2 -2
  118. package/dist/components/progress/progress.styles.js +40 -33
  119. package/dist/components/radio/radio.component.d.ts +19 -13
  120. package/dist/components/radio/radio.component.js +12 -12
  121. package/dist/components/radio/radio.styles.d.ts +1 -2
  122. package/dist/components/radio/radio.styles.js +1 -1
  123. package/dist/components/segmented-button/segmented-button-item.component.d.ts +36 -0
  124. package/dist/components/segmented-button/segmented-button-item.component.js +56 -0
  125. package/dist/components/segmented-button/segmented-button-item.d.ts +8 -0
  126. package/dist/components/segmented-button/segmented-button-item.js +6 -0
  127. package/dist/components/segmented-button/segmented-button-item.styles.d.ts +1 -0
  128. package/dist/components/segmented-button/segmented-button-item.styles.js +62 -0
  129. package/dist/components/segmented-button/segmented-button.component.d.ts +30 -0
  130. package/dist/components/segmented-button/segmented-button.component.js +73 -0
  131. package/dist/components/segmented-button/segmented-button.d.ts +8 -0
  132. package/dist/components/segmented-button/segmented-button.js +6 -0
  133. package/dist/components/segmented-button/segmented-button.styles.d.ts +1 -0
  134. package/dist/components/segmented-button/segmented-button.styles.js +16 -0
  135. package/dist/components/{select-option-group → select}/select-option-group.component.d.ts +4 -0
  136. package/dist/components/select/select-option-group.component.js +50 -0
  137. package/dist/components/{select-option-group → select}/select-option-group.d.ts +2 -2
  138. package/dist/components/select/select-option-group.style.d.ts +1 -0
  139. package/dist/components/select/select-option-group.style.js +24 -0
  140. package/dist/components/{select-option → select}/select-option.component.d.ts +14 -11
  141. package/dist/components/select/select-option.component.js +140 -0
  142. package/dist/components/select/select-option.controllers.d.ts +15 -0
  143. package/dist/components/select/select-option.styles.d.ts +1 -0
  144. package/dist/components/select/select-option.styles.js +65 -0
  145. package/dist/components/select/select.component.d.ts +22 -17
  146. package/dist/components/select/select.component.js +62 -45
  147. package/dist/components/select/select.controllers.d.ts +21 -10
  148. package/dist/components/select/select.controllers.js +29 -23
  149. package/dist/components/select/stories/select.stories.icons.d.ts +7 -0
  150. package/dist/components/{stepper-item → stepper}/stepper-item.component.js +48 -48
  151. package/dist/components/{stepper-item → stepper}/stepper-item.d.ts +2 -2
  152. package/dist/components/stepper/stepper-item.styles.d.ts +1 -0
  153. package/dist/components/stepper/stepper.component.d.ts +4 -3
  154. package/dist/components/stepper/stepper.component.js +15 -15
  155. package/dist/components/stepper/stepper.d.ts +2 -2
  156. package/dist/components/stepper/stepper.helpers.d.ts +1 -1
  157. package/dist/components/switch/switch.component.d.ts +7 -6
  158. package/dist/components/switch/switch.component.js +21 -21
  159. package/dist/components/switch/switch.d.ts +2 -2
  160. package/dist/components/{tab-panel → tabs}/tab-panel.component.js +1 -1
  161. package/dist/components/{tab-panel → tabs}/tab-panel.d.ts +2 -2
  162. package/dist/components/tabs/tab-panel.styles.d.ts +1 -0
  163. package/dist/components/{tab → tabs}/tab.component.d.ts +2 -2
  164. package/dist/components/{tab → tabs}/tab.component.js +1 -1
  165. package/dist/components/{tab → tabs}/tab.d.ts +2 -2
  166. package/dist/components/tabs/tab.styles.d.ts +1 -0
  167. package/dist/components/{tab-group/tab-group.component.d.ts → tabs/tabs.component.d.ts} +3 -4
  168. package/dist/components/{tab-group/tab-group.component.js → tabs/tabs.component.js} +36 -37
  169. package/dist/components/tabs/tabs.d.ts +8 -0
  170. package/dist/components/tabs/tabs.js +6 -0
  171. package/dist/components/tabs/tabs.styles.d.ts +1 -0
  172. package/dist/components/{tab-group/tab-group.styles.js → tabs/tabs.styles.js} +16 -16
  173. package/dist/components/tag/tag.component.d.ts +20 -17
  174. package/dist/components/tag/tag.component.js +68 -67
  175. package/dist/components/tag/tag.d.ts +2 -2
  176. package/dist/components/tag/tag.styles.js +63 -50
  177. package/dist/components/textarea/textarea.component.d.ts +10 -11
  178. package/dist/components/textarea/textarea.component.js +67 -68
  179. package/dist/components/{toast-item → toast}/toast-item.component.js +15 -15
  180. package/dist/components/{toast-item → toast}/toast-item.d.ts +2 -0
  181. package/dist/components/{toast-item → toast}/toast-item.js +4 -0
  182. package/dist/components/toast/toast-item.styles.js +18 -0
  183. package/dist/components/{toast-wrapper → toast}/toast-wrapper.component.js +1 -1
  184. package/dist/components/toast/toast-wrapper.styles.d.ts +1 -0
  185. package/dist/components/toast/toast.component.d.ts +9 -5
  186. package/dist/components/toast/toast.component.js +31 -27
  187. package/dist/components/toast/toast.singleton.d.ts +7 -12
  188. package/dist/components/toast/toast.singleton.js +26 -26
  189. package/dist/components/tooltip/tooltip.component.d.ts +7 -7
  190. package/dist/components/tooltip/tooltip.component.js +16 -11
  191. package/dist/components/tooltip/tooltip.d.ts +2 -2
  192. package/dist/custom-elements.json +3980 -2348
  193. package/dist/index.d.ts +22 -9
  194. package/dist/index.js +111 -74
  195. package/dist/internal/base-classes/popover/popover.base.d.ts +24 -9
  196. package/dist/internal/base-classes/popover/popover.base.js +140 -79
  197. package/dist/internal/base-classes/popover/popover.styles.js +17 -5
  198. package/dist/internal/components/hint/hint.component.d.ts +6 -2
  199. package/dist/internal/components/hint/hint.component.js +47 -20
  200. package/dist/internal/components/hint/hint.styles.d.ts +1 -2
  201. package/dist/internal/components/hint/hint.styles.js +30 -26
  202. package/dist/internal/components/skf-element.d.ts +1 -3
  203. package/dist/internal/components/skf-element.js +4 -9
  204. package/dist/internal/constants/iconSeverity.d.ts +3 -2
  205. package/dist/internal/constants/iconSeverity.js +2 -3
  206. package/dist/internal/controllers/elementOverflowController.d.ts +13 -0
  207. package/dist/internal/controllers/popover.controller.d.ts +12 -6
  208. package/dist/internal/controllers/popover.controller.js +9 -14
  209. package/dist/internal/helpers/dateFormatter.d.ts +2 -0
  210. package/dist/internal/helpers/hintSeverity.d.ts +2 -2
  211. package/dist/internal/helpers/hintSeverity.js +1 -1
  212. package/dist/internal/helpers/stateMap.d.ts +14 -0
  213. package/dist/internal/helpers/stateMap.js +68 -0
  214. package/dist/internal/helpers/utilityTypes.d.ts +22 -0
  215. package/dist/internal/helpers/uuid.d.ts +15 -0
  216. package/dist/internal/helpers/uuid.js +14 -0
  217. package/dist/internal/helpers/watch.d.ts +1 -1
  218. package/dist/internal/helpers/watch.js +12 -12
  219. package/dist/internal/storybook/styles.d.ts +1 -0
  220. package/dist/internal/types/formField.d.ts +1 -1
  221. package/dist/internal/types.d.ts +18 -0
  222. package/dist/styles/component.styles.d.ts +1 -2
  223. package/dist/styles/component.styles.js +38 -37
  224. package/dist/styles/form-field.styles.js +11 -6
  225. package/dist/styles/global-alt.css +1 -0
  226. package/dist/styles/global.css +1 -1
  227. package/dist/types/jsx/custom-element-jsx.d.ts +871 -1307
  228. package/dist/types/vue/index.d.ts +593 -360
  229. package/dist/vscode.html-custom-data.json +630 -1184
  230. package/dist/web-types.json +1422 -945
  231. package/package.json +47 -63
  232. package/dist/components/accordion/accordion.test.d.ts +0 -1
  233. package/dist/components/checkbox/checkbox.test.d.ts +0 -1
  234. package/dist/components/collapse/collapse.component.d.ts +0 -40
  235. package/dist/components/collapse/collapse.component.js +0 -86
  236. package/dist/components/collapse/collapse.d.ts +0 -8
  237. package/dist/components/collapse/collapse.js +0 -6
  238. package/dist/components/collapse/collapse.styles.d.ts +0 -2
  239. package/dist/components/collapse/collapse.styles.js +0 -77
  240. package/dist/components/collapse/collapse.test.d.ts +0 -1
  241. package/dist/components/input/input.test.d.ts +0 -1
  242. package/dist/components/menu-item/menu-item.component.d.ts +0 -25
  243. package/dist/components/menu-item/menu-item.component.js +0 -13
  244. package/dist/components/radio/radio.test.d.ts +0 -1
  245. package/dist/components/select-option/select-option.component.js +0 -123
  246. package/dist/components/select-option/select-option.controllers.d.ts +0 -9
  247. package/dist/components/select-option/select-option.styles.js +0 -53
  248. package/dist/components/select-option-group/select-option-group.component.js +0 -31
  249. package/dist/components/select-option-group/select-option-group.style.js +0 -18
  250. package/dist/components/switch/switch.test.d.ts +0 -1
  251. package/dist/components/tab-group/tab-group.d.ts +0 -8
  252. package/dist/components/tab-group/tab-group.js +0 -6
  253. package/dist/components/toast-item/toast-item.styles.js +0 -16
  254. package/dist/internal/constants/heading.d.ts +0 -2
  255. package/dist/internal/playwright/index.d.ts +0 -1
  256. package/dist/react/index.d.ts +0 -35
  257. package/dist/react/index.js +0 -35
  258. package/dist/react/skf-accordion/index.d.ts +0 -3
  259. package/dist/react/skf-accordion/index.js +0 -13
  260. package/dist/react/skf-alert/index.d.ts +0 -9
  261. package/dist/react/skf-alert/index.js +0 -17
  262. package/dist/react/skf-breadcrumb/index.d.ts +0 -9
  263. package/dist/react/skf-breadcrumb/index.js +0 -17
  264. package/dist/react/skf-breadcrumb-item/index.d.ts +0 -3
  265. package/dist/react/skf-breadcrumb-item/index.js +0 -13
  266. package/dist/react/skf-button/index.d.ts +0 -9
  267. package/dist/react/skf-button/index.js +0 -17
  268. package/dist/react/skf-card/index.d.ts +0 -3
  269. package/dist/react/skf-card/index.js +0 -13
  270. package/dist/react/skf-checkbox/index.d.ts +0 -9
  271. package/dist/react/skf-checkbox/index.js +0 -17
  272. package/dist/react/skf-collapse/index.d.ts +0 -9
  273. package/dist/react/skf-collapse/index.js +0 -17
  274. package/dist/react/skf-dialog/index.d.ts +0 -15
  275. package/dist/react/skf-dialog/index.js +0 -19
  276. package/dist/react/skf-divider/index.d.ts +0 -3
  277. package/dist/react/skf-divider/index.js +0 -13
  278. package/dist/react/skf-heading/index.d.ts +0 -3
  279. package/dist/react/skf-heading/index.js +0 -13
  280. package/dist/react/skf-icon/index.d.ts +0 -3
  281. package/dist/react/skf-icon/index.js +0 -13
  282. package/dist/react/skf-input/index.d.ts +0 -12
  283. package/dist/react/skf-input/index.js +0 -18
  284. package/dist/react/skf-link/index.d.ts +0 -3
  285. package/dist/react/skf-link/index.js +0 -13
  286. package/dist/react/skf-loader/index.d.ts +0 -3
  287. package/dist/react/skf-loader/index.js +0 -13
  288. package/dist/react/skf-logo/index.d.ts +0 -3
  289. package/dist/react/skf-logo/index.js +0 -13
  290. package/dist/react/skf-menu/index.d.ts +0 -12
  291. package/dist/react/skf-menu/index.js +0 -18
  292. package/dist/react/skf-menu-item/index.d.ts +0 -27
  293. package/dist/react/skf-menu-item/index.js +0 -23
  294. package/dist/react/skf-popover/index.d.ts +0 -12
  295. package/dist/react/skf-popover/index.js +0 -18
  296. package/dist/react/skf-progress/index.d.ts +0 -3
  297. package/dist/react/skf-progress/index.js +0 -13
  298. package/dist/react/skf-radio/index.d.ts +0 -9
  299. package/dist/react/skf-radio/index.js +0 -17
  300. package/dist/react/skf-select/index.d.ts +0 -21
  301. package/dist/react/skf-select/index.js +0 -21
  302. package/dist/react/skf-select-option/index.d.ts +0 -9
  303. package/dist/react/skf-select-option/index.js +0 -17
  304. package/dist/react/skf-select-option-group/index.d.ts +0 -3
  305. package/dist/react/skf-select-option-group/index.js +0 -13
  306. package/dist/react/skf-stepper/index.d.ts +0 -9
  307. package/dist/react/skf-stepper/index.js +0 -17
  308. package/dist/react/skf-stepper-item/index.d.ts +0 -9
  309. package/dist/react/skf-stepper-item/index.js +0 -17
  310. package/dist/react/skf-switch/index.d.ts +0 -3
  311. package/dist/react/skf-switch/index.js +0 -13
  312. package/dist/react/skf-tab/index.d.ts +0 -12
  313. package/dist/react/skf-tab/index.js +0 -18
  314. package/dist/react/skf-tab-group/index.d.ts +0 -3
  315. package/dist/react/skf-tab-group/index.js +0 -13
  316. package/dist/react/skf-tab-panel/index.d.ts +0 -3
  317. package/dist/react/skf-tab-panel/index.js +0 -13
  318. package/dist/react/skf-tag/index.d.ts +0 -3
  319. package/dist/react/skf-tag/index.js +0 -13
  320. package/dist/react/skf-textarea/index.d.ts +0 -12
  321. package/dist/react/skf-textarea/index.js +0 -18
  322. package/dist/react/skf-toast/index.d.ts +0 -3
  323. package/dist/react/skf-toast/index.js +0 -13
  324. package/dist/react/skf-toast-wrapper/index.d.ts +0 -3
  325. package/dist/react/skf-toast-wrapper/index.js +0 -13
  326. package/dist/react/skf-tooltip/index.d.ts +0 -12
  327. package/dist/react/skf-tooltip/index.js +0 -18
  328. /package/dist/components/{breadcrumb-item/breadcrumb-item.styles.d.ts → accordion/accordion-item.styles.d.ts} +0 -0
  329. /package/dist/components/{breadcrumb-item → breadcrumb}/breadcrumb-item.component.d.ts +0 -0
  330. /package/dist/components/{menu-item/menu-item.styles.d.ts → breadcrumb/breadcrumb-item.styles.d.ts} +0 -0
  331. /package/dist/components/{select-option-group/select-option-group.style.d.ts → datepicker/datepicker-calendar.styles.d.ts} +0 -0
  332. /package/dist/components/{select-option/select-option.styles.d.ts → datepicker/datepicker-popup.styles.d.ts} +0 -0
  333. /package/dist/components/{stepper-item/stepper-item.styles.d.ts → drawer/drawer.styles.d.ts} +0 -0
  334. /package/dist/components/{tab-group/tab-group.styles.d.ts → header/header.styles.d.ts} +0 -0
  335. /package/dist/components/{menu-item → menu}/menu-item.js +0 -0
  336. /package/dist/components/{tab-panel/tab-panel.styles.d.ts → menu/menu-item.styles.d.ts} +0 -0
  337. /package/dist/components/{tab/tab.styles.d.ts → nav/nav-item.styles.d.ts} +0 -0
  338. /package/dist/components/{toast-wrapper/toast-wrapper.styles.d.ts → nav/nav.styles.d.ts} +0 -0
  339. /package/dist/components/{select-option-group → select}/select-option-group.js +0 -0
  340. /package/dist/components/{select-option → select}/select-option.d.ts +0 -0
  341. /package/dist/components/{select-option → select}/select-option.js +0 -0
  342. /package/dist/components/{stepper-item → stepper}/stepper-item.component.d.ts +0 -0
  343. /package/dist/components/{stepper-item → stepper}/stepper-item.js +0 -0
  344. /package/dist/components/{stepper-item → stepper}/stepper-item.styles.js +0 -0
  345. /package/dist/components/{tab-panel → tabs}/tab-panel.component.d.ts +0 -0
  346. /package/dist/components/{tab-panel → tabs}/tab-panel.js +0 -0
  347. /package/dist/components/{tab-panel → tabs}/tab-panel.styles.js +0 -0
  348. /package/dist/components/{tab → tabs}/tab.js +0 -0
  349. /package/dist/components/{tab → tabs}/tab.styles.js +0 -0
  350. /package/dist/components/{toast-item → toast}/toast-item.component.d.ts +0 -0
  351. /package/dist/components/{toast-item → toast}/toast-item.styles.d.ts +0 -0
  352. /package/dist/components/{toast-wrapper → toast}/toast-wrapper.component.d.ts +0 -0
  353. /package/dist/components/{toast-wrapper → toast}/toast-wrapper.d.ts +0 -0
  354. /package/dist/components/{toast-wrapper → toast}/toast-wrapper.js +0 -0
  355. /package/dist/components/{toast-wrapper → toast}/toast-wrapper.styles.js +0 -0
package/dist/styles/component.styles.js CHANGED
@@ -1,52 +1,53 @@
1
1
  import { css as e } from "lit";
2
2
  const t = e`
3
- @layer reset, globals, components, overrides;
4
-
5
- @layer reset {
6
- :host {
7
- box-sizing: border-box;
8
- contain: content;
9
- display: block;
10
-
11
- *,
12
- *::before,
13
- *::after {
14
- box-sizing: inherit;
15
- margin: 0;
16
- padding: 0;
3
+ @layer base, components, overrides;
4
+
5
+ @layer base {
6
+ @layer props {
7
+ :host {
8
+ --skf-is-tablet: false;
9
+ --skf-box-spacing: var(--skf-spacing-100);
10
+
11
+ /* mq-token needed here */
12
+ @media screen and (width >= 768px) {
13
+ --skf-is-tablet: true;
14
+ --skf-box-spacing: var(--skf-spacing-150);
15
+ }
17
16
  }
18
17
  }
19
18
 
20
- :is(button, input, select, textarea) {
21
- all: unset;
22
- font: inherit;
23
- }
24
- }
25
-
26
- @layer globals {
27
- :host {
28
- --skf-is-tablet: false;
29
- --skf-box-spacing: var(--skf-spacing-100);
30
-
31
- /* mq-token needed here */
32
- @media screen and (width >= 768px) {
33
- --skf-is-tablet: true;
34
- --skf-box-spacing: var(--skf-spacing-150);
19
+ @layer normalize {
20
+ :host {
21
+ box-sizing: border-box;
22
+ color: var(--skf-text-color-primary);
23
+ contain: content;
24
+ display: block;
25
+
26
+ *,
27
+ *::before,
28
+ *::after {
29
+ box-sizing: inherit;
30
+ margin: 0;
31
+ padding: 0;
32
+ }
35
33
  }
36
34
 
37
- color: var(--skf-text-color-primary);
38
- }
35
+ :is(button, input, select, textarea) {
36
+ all: unset;
37
+ font: inherit;
38
+ }
39
39
 
40
- :is(button, input, label, select) {
41
- cursor: pointer;
40
+ :is(button, input, label, select) {
41
+ cursor: pointer;
42
42
 
43
- &:disabled,
44
- &:has(:disabled) {
45
- cursor: not-allowed;
43
+ &:disabled,
44
+ &:has(:disabled) {
45
+ cursor: not-allowed;
46
+ }
46
47
  }
47
48
  }
48
49
  }
49
50
  `;
50
51
  export {
51
- t as default
52
+ t as componentStyles
52
53
  };
package/dist/styles/form-field.styles.js CHANGED
@@ -51,6 +51,14 @@ const i = e`
51
51
  --_skf-field-input-padding-inline-end: 0;
52
52
  }
53
53
 
54
+ &:has(input) {
55
+ block-size: var(--_skf-field-input-height, var(--skf-size-44));
56
+
57
+ :host([size='sm']) & {
58
+ --_skf-field-input-height: var(--skf-size-32);
59
+ }
60
+ }
61
+
54
62
  &:has(textarea) {
55
63
  padding-block: var(--_skf-field-input-padding-block, var(--skf-spacing-75));
56
64
 
@@ -131,7 +139,7 @@ const i = e`
131
139
  }
132
140
 
133
141
  input {
134
- height: var(--_skf-field-input-height, var(--skf-size-44));
142
+ block-size: 100%;
135
143
 
136
144
  &[type='number'] {
137
145
  appearance: textfield;
@@ -141,10 +149,6 @@ const i = e`
141
149
  &[type='search']::-webkit-search-cancel-button {
142
150
  display: none;
143
151
  }
144
-
145
- :host([size='sm']) & {
146
- --_skf-field-input-height: var(--skf-size-32);
147
- }
148
152
  }
149
153
 
150
154
  /**
@@ -163,7 +167,7 @@ const i = e`
163
167
  border-left: var(--skf-border-width-sm) solid var(--skf-border-color-secondary);
164
168
  display: grid;
165
169
  height: 50%;
166
- place-items: center;
170
+ place-content: center;
167
171
  width: 3rem;
168
172
 
169
173
  &:last-of-type {
@@ -198,6 +202,7 @@ const i = e`
198
202
  skf-icon {
199
203
  pointer-events: none;
200
204
 
205
+ &[name='arrowRight'],
201
206
  &[name='search'] {
202
207
  align-self: center;
203
208
  }
package/dist/styles/global-alt.css ADDED
@@ -0,0 +1 @@
1
+ @charset "UTF-8";:host,:where(:root){--skf-color-green-lightest: #e5f3ecff;--skf-color-green-base: #048942ff;--skf-color-green-dark: #097c42ff;--skf-color-green-darker: #106b41ff;--skf-color-blue-lighest: #e7eefbff;--skf-color-blue-base: #4f84e0ff;--skf-color-blue-dark: #4978c8ff;--skf-color-blue-darker: #4167a8ff;--skf-color-yellow-lightest: #fff9e7ff;--skf-color-yellow-base: #ffca15ff;--skf-color-yellow-darker: #dfb31bff;--skf-color-yellow-darkest: #b49524ff;--skf-color-orange-lightest: #fff2e5ff;--skf-color-orange-base: #ff8004ff;--skf-color-orange-darker: #df740dff;--skf-color-orange-darkest: #b46518ff;--skf-color-red-lightest: #f9e5e5ff;--skf-color-red-base: #cc0000ff;--skf-color-red-darker: #b3080aff;--skf-color-red-darkest: #921217ff;--skf-color-neutral-lightest: #f6f6f6ff;--skf-color-neutral-lighter: #ebeceeff;--skf-color-neutral-light: #d5d8dcff;--skf-color-neutral-base: #c7cad0ff;--skf-color-neutral-dark: #aaafb8ff;--skf-color-neutral-darker: #808895ff;--skf-color-neutral-darkest: #676f7cff;--skf-color-neutral-black: #273342ff;--skf-color-neutral-white: #ffffffff;--skf-color-brand-base: #0f58d6ff;--skf-color-brand-lightest: #d9e4f8ff;--skf-color-brand-lighter: #c5d7f5ff;--skf-color-brand-dark: #084abdff;--skf-color-neutral-transparent: #ffffff00;--skf-color-neutral-opacity: #12111199;--skf-color-brand-darker: #0b3e96ff}:host,:where(:root){--skf-size-1: .0625rem;--skf-size-2: .125rem;--skf-size-4: .25rem;--skf-size-8: .5rem;--skf-size-12: .75rem;--skf-size-16: 1rem;--skf-size-20: 1.25rem;--skf-size-24: 1.5rem;--skf-size-32: 2rem;--skf-size-44: 2.75rem;--skf-size-48: 3rem;--skf-size-56: 3.5rem}:host,:where(:root){--skf-type-scale-10: .625rem;--skf-type-scale-12: .75rem;--skf-type-scale-14: .875rem;--skf-type-scale-16: 1rem;--skf-type-scale-18: 1.125rem;--skf-type-scale-20: 1.25rem;--skf-type-scale-22: 1.375rem;--skf-type-scale-24: 1.5rem;--skf-type-scale-28: 1.75rem;--skf-type-scale-32: 2rem;--skf-type-scale-36: 2.25rem;--skf-type-scale-40: 2.5rem;--skf-type-scale-46: 2.875rem;--skf-type-scale-50: 3.125rem;--skf-type-scale-56: 3.5rem;--skf-type-scale-64: 4rem;--skf-type-scale-72: 4.5rem;--skf-type-scale-90: 5.625rem;--skf-type-scale-124: 7.75rem}:host,:where(:root){--skf-bg-color-neutral-1: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-light) );--skf-bg-color-neutral-2: var(--skf-color-neutral-lighter);--skf-bg-color-neutral-3: var(--skf-color-neutral-light);--skf-bg-color-neutral-4: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-base) );--skf-bg-color-neutral-5: var(--skf-color-neutral-dark);--skf-bg-color-neutral-6: var(--skf-color-neutral-darker);--skf-bg-color-neutral-7: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-white) );--skf-bg-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base))}:host,:where(:root){--skf-text-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-lightest) );--skf-text-color-secondary: var(--skf-color-neutral-darkest);--skf-text-color-tertiary: var(--skf-color-neutral-dark);--skf-text-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-text-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base))}:host,:where(:root){--skf-icon-size-xs: var(--skf-size-16);--skf-icon-size-sm: var(--skf-size-20);--skf-icon-size-md: var(--skf-size-24);--skf-icon-size-lg: var(--skf-size-32)}:host,:where(:root){--skf-icon-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-black) );--skf-icon-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-icon-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base));--skf-icon-color-secondary: var(--skf-color-neutral-darkest)}:host,:where(:root){--skf-border-color-emphasised: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-border-color-primary: var(--skf-color-neutral-dark);--skf-border-color-secondary: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-base) );--skf-border-color-tertiary: var(--skf-color-neutral-light);--skf-border-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) )}:host,:where(:root){--skf-border-width-md: var(--skf-size-2);--skf-border-width-lg: var(--skf-size-4);--skf-border-width-sm: var(--skf-size-1)}:host,:where(:root){--skf-border-radius-md: var(--skf-size-8);--skf-border-radius-lg: var(--skf-size-16);--skf-border-radius-sm: var(--skf-size-2)}:host,:where(:root){--skf-interactive-bg-color-primary: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-lightest) );--skf-interactive-bg-color-primary-hover: var(--skf-color-brand-dark);--skf-interactive-bg-color-primary-active: var(--skf-color-brand-darker);--skf-interactive-bg-color-secondary: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-bg-color-secondary-hover: var(--skf-color-brand-lightest);--skf-interactive-bg-color-secondary-active: var(--skf-color-brand-lighter);--skf-interactive-bg-color-tertiary: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-lightest) );--skf-interactive-bg-color-destructive: light-dark( var(--skf-color-red-base), var(--skf-color-red-base) );--skf-interactive-bg-color-destructive-hover: var(--skf-color-red-darker);--skf-interactive-bg-color-destructive-active: var(--skf-color-red-darkest);--skf-interactive-bg-color-disabled: var(--skf-color-neutral-lighter);--skf-interactive-bg-color-tertiary-hover: var(--skf-color-neutral-lighter);--skf-interactive-bg-color-tertiary-active: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-lightest) );--skf-interactive-text-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-text-color-primary: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-text-color-primary-hover: var(--skf-color-brand-dark);--skf-interactive-text-color-primary-active: var(--skf-color-brand-dark);--skf-interactive-text-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-text-color-inverse-hover: var(--skf-color-neutral-lightest);--skf-interactive-text-color-inverse-active: var(--skf-color-neutral-lightest);--skf-interactive-border-color-focus: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-border-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-border-color-primary-hover: var(--skf-color-neutral-darkest);--skf-interactive-border-color-primary: var(--skf-color-neutral-dark);--skf-interactive-border-color-primary-active: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-icon-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-black) );--skf-interactive-icon-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-icon-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-icon-color-primary-hover: var(--skf-color-neutral-darkest);--skf-interactive-icon-color-inverse-hover: var(--skf-color-neutral-lightest)}:host,:where(:root){--skf-severity-bg-color-success: var(--skf-color-green-lightest);--skf-severity-bg-color-info: light-dark( var(--skf-color-blue-lighest), var(--skf-color-blue-lighest) );--skf-severity-bg-color-warning: var(--skf-color-orange-lightest);--skf-severity-bg-color-alert: var(--skf-color-yellow-lightest);--skf-severity-bg-color-error: var(--skf-color-red-lightest)}:host,:where(:root){--skf-severity-fg-color-success: light-dark( var(--skf-color-green-base), var(--skf-color-green-base) );--skf-severity-fg-color-info: light-dark(var(--skf-color-blue-base), var(--skf-color-blue-base));--skf-severity-fg-color-warning: light-dark( var(--skf-color-orange-base), var(--skf-color-orange-base) );--skf-severity-fg-color-error: light-dark(var(--skf-color-red-base), var(--skf-color-red-base));--skf-severity-fg-color-alert: light-dark( var(--skf-color-yellow-base), var(--skf-color-yellow-base) )}:host,:where(:root){--skf-spacing-25: var(--skf-size-4);--skf-spacing-50: var(--skf-size-8);--skf-spacing-75: var(--skf-size-12);--skf-spacing-100: var(--skf-size-16);--skf-spacing-125: var(--skf-size-20);--skf-spacing-150: var(--skf-size-24);--skf-spacing-200: var(--skf-size-32);--skf-spacing-250: var(--skf-size-44);--skf-spacing-300: var(--skf-size-48);--skf-spacing-400: var(--skf-size-56)}:host,:where(:root){--skf-font-size-25: var(--skf-type-scale-10);--skf-font-size-50: var(--skf-type-scale-12);--skf-font-size-75: var(--skf-type-scale-14);--skf-font-size-100: var(--skf-type-scale-16);--skf-font-size-200: var(--skf-type-scale-18);--skf-font-size-300: var(--skf-type-scale-20);--skf-font-size-400: var(--skf-type-scale-22);--skf-font-size-500: var(--skf-type-scale-24);--skf-font-size-600: var(--skf-type-scale-28);--skf-font-size-700: var(--skf-type-scale-32);--skf-font-size-800: var(--skf-type-scale-36);--skf-font-size-900: var(--skf-type-scale-40);--skf-font-size-1000: var(--skf-type-scale-46);--skf-font-size-1100: var(--skf-type-scale-50);--skf-font-size-1200: var(--skf-type-scale-56);--skf-font-size-1300: var(--skf-type-scale-64);--skf-font-size-1400: var(--skf-type-scale-72);--skf-font-size-1500: var(--skf-type-scale-90);--skf-font-size-1600: var(--skf-type-scale-124)}:host,:where(:root){--skf-font-weight-light: 100;--skf-font-weight-regular: 400;--skf-font-weight-medium: 500;--skf-font-weight-bold: 700}:host,:where(:root){--skf-font-family-sans: SKFSans}:host,:where(:root){--skf-line-height-25: var(--skf-type-scale-10);--skf-line-height-50: var(--skf-type-scale-12);--skf-line-height-75: var(--skf-type-scale-14);--skf-line-height-100: var(--skf-type-scale-16);--skf-line-height-200: var(--skf-type-scale-18);--skf-line-height-300: var(--skf-type-scale-20);--skf-line-height-400: var(--skf-type-scale-22);--skf-line-height-500: var(--skf-type-scale-24);--skf-line-height-600: var(--skf-type-scale-28);--skf-line-height-700: var(--skf-type-scale-32);--skf-line-height-800: var(--skf-type-scale-36);--skf-line-height-900: var(--skf-type-scale-40);--skf-line-height-1000: var(--skf-type-scale-46);--skf-line-height-1100: var(--skf-type-scale-50);--skf-line-height-1200: var(--skf-type-scale-56);--skf-line-height-1300: var(--skf-type-scale-64);--skf-line-height-1400: var(--skf-type-scale-72);--skf-line-height-1500: var(--skf-type-scale-90);--skf-line-height-size-1600: var(--skf-type-scale-124)}:host,:where(:root){--skf-motion-duration-fast: 200;--skf-motion-duration-normal: 300;--skf-motion-duration-slow: 400}:host,:where(:root){--skf-motion-easing-ease-in: ease-in;--skf-motion-easing-ease-out: ease-out}:host,:where(:root){--skf-shadow-xl: 0 10px 15px -3px #0000001a;--skf-shadow-md: 0 1px 3px 0 #0000001a;--skf-shadow-sm: 0 1px 2px 0 #0000000d;--skf-shadow-lg: 0 4px 6px -1px #0000001a}:host,:where(:root){--skf-logo-primary: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base));--skf-logo-secondary: light-dark(var(--skf-color-neutral-black), var(--skf-color-neutral-black));--skf-logo-inverse: light-dark(var(--skf-color-neutral-white), var(--skf-color-neutral-white))}body{color:var(--skf-text-color-primary);font:var(--skf-font-size-100) / var(--skf-line-height-300) var(--skf-font-family-sans);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}body:has(skf-dialog[open]){overflow:hidden}
package/dist/styles/global.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";:host,:where(:root){--skf-color-green-lightest: #e5f3ecff;--skf-color-green-base: #048942ff;--skf-color-green-dark: #097c42ff;--skf-color-green-darker: #106b41ff;--skf-color-blue-lighest: #e7eefbff;--skf-color-blue-base: #4f84e0ff;--skf-color-blue-dark: #4978c8ff;--skf-color-blue-darker: #4167a8ff;--skf-color-yellow-lightest: #fff9e7ff;--skf-color-yellow-base: #ffca15ff;--skf-color-yellow-darker: #dfb31bff;--skf-color-yellow-darkest: #b49524ff;--skf-color-orange-lightest: #fff2e5ff;--skf-color-orange-base: #ff8004ff;--skf-color-orange-darker: #df740dff;--skf-color-orange-darkest: #b46518ff;--skf-color-red-lightest: #f9e5e5ff;--skf-color-red-base: #cc0000ff;--skf-color-red-darker: #b3080aff;--skf-color-red-darkest: #921217ff;--skf-color-neutral-lightest: #f6f6f6ff;--skf-color-neutral-lighter: #ebeceeff;--skf-color-neutral-light: #d5d8dcff;--skf-color-neutral-base: #c7cad0ff;--skf-color-neutral-dark: #aaafb8ff;--skf-color-neutral-darker: #808895ff;--skf-color-neutral-darkest: #676f7cff;--skf-color-neutral-black: #273342ff;--skf-color-neutral-white: #ffffffff;--skf-color-brand-base: #0f58d6ff;--skf-color-brand-lightest: #d9e4f8ff;--skf-color-brand-lighter: #c5d7f5ff;--skf-color-brand-dark: #084abdff;--skf-color-neutral-transparent: #ffffff00;--skf-color-neutral-opacity: #12111199;--skf-color-brand-darker: #0b3e96ff}:host,:where(:root){--skf-size-1: .0625rem;--skf-size-2: .125rem;--skf-size-4: .25rem;--skf-size-8: .5rem;--skf-size-12: .75rem;--skf-size-16: 1rem;--skf-size-20: 1.25rem;--skf-size-24: 1.5rem;--skf-size-32: 2rem;--skf-size-44: 2.75rem;--skf-size-48: 3rem;--skf-size-56: 3.5rem}:host,:where(:root){--skf-type-scale-10: .625rem;--skf-type-scale-12: .75rem;--skf-type-scale-14: .875rem;--skf-type-scale-16: 1rem;--skf-type-scale-18: 1.125rem;--skf-type-scale-20: 1.25rem;--skf-type-scale-22: 1.375rem;--skf-type-scale-24: 1.5rem;--skf-type-scale-28: 1.75rem;--skf-type-scale-32: 2rem;--skf-type-scale-36: 2.25rem;--skf-type-scale-40: 2.5rem;--skf-type-scale-46: 2.875rem;--skf-type-scale-50: 3.125rem;--skf-type-scale-56: 3.5rem;--skf-type-scale-64: 4rem;--skf-type-scale-72: 4.5rem;--skf-type-scale-90: 5.625rem;--skf-type-scale-124: 7.75rem}:host,:where(:root){--skf-bg-color-neutral-1: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-light) );--skf-bg-color-neutral-2: var(--skf-color-neutral-lighter);--skf-bg-color-neutral-3: var(--skf-color-neutral-light);--skf-bg-color-neutral-4: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-base) );--skf-bg-color-neutral-5: var(--skf-color-neutral-dark);--skf-bg-color-neutral-6: var(--skf-color-neutral-darker);--skf-bg-color-neutral-7: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-white) );--skf-bg-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base))}:host,:where(:root){--skf-text-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-lightest) );--skf-text-color-secondary: var(--skf-color-neutral-darkest);--skf-text-color-tertiary: var(--skf-color-neutral-dark);--skf-text-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-text-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base))}:host,:where(:root){--skf-icon-size-xs: var(--skf-size-16);--skf-icon-size-sm: var(--skf-size-20);--skf-icon-size-md: var(--skf-size-24);--skf-icon-size-lg: var(--skf-size-32)}:host,:where(:root){--skf-icon-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-black) );--skf-icon-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-icon-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base));--skf-icon-color-secondary: var(--skf-color-neutral-darkest)}:host,:where(:root){--skf-border-color-emphasised: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-border-color-primary: var(--skf-color-neutral-dark);--skf-border-color-secondary: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-base) );--skf-border-color-tertiary: var(--skf-color-neutral-light);--skf-border-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) )}:host,:where(:root){--skf-border-width-md: var(--skf-size-2);--skf-border-width-lg: var(--skf-size-4);--skf-border-width-sm: var(--skf-size-1)}:host,:where(:root){--skf-border-radius-md: var(--skf-size-8);--skf-border-radius-lg: var(--skf-size-16);--skf-border-radius-sm: var(--skf-size-2)}:host,:where(:root){--skf-interactive-bg-color-primary: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-lightest) );--skf-interactive-bg-color-primary-hover: var(--skf-color-brand-dark);--skf-interactive-bg-color-primary-active: var(--skf-color-brand-darker);--skf-interactive-bg-color-secondary: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-bg-color-secondary-hover: var(--skf-color-brand-lightest);--skf-interactive-bg-color-secondary-active: var(--skf-color-brand-lighter);--skf-interactive-bg-color-tertiary: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-lightest) );--skf-interactive-bg-color-destructive: light-dark( var(--skf-color-red-base), var(--skf-color-red-base) );--skf-interactive-bg-color-destructive-hover: var(--skf-color-red-darker);--skf-interactive-bg-color-destructive-active: var(--skf-color-red-darkest);--skf-interactive-bg-color-disabled: var(--skf-color-neutral-lighter);--skf-interactive-bg-color-tertiary-hover: var(--skf-color-neutral-lighter);--skf-interactive-bg-color-tertiary-active: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-lightest) );--skf-interactive-text-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-text-color-primary: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-text-color-primary-hover: var(--skf-color-brand-dark);--skf-interactive-text-color-primary-active: var(--skf-color-brand-dark);--skf-interactive-text-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-text-color-inverse-hover: var(--skf-color-neutral-lightest);--skf-interactive-text-color-inverse-active: var(--skf-color-neutral-lightest);--skf-interactive-border-color-focus: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-border-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-border-color-primary-hover: var(--skf-color-neutral-darkest);--skf-interactive-border-color-primary: var(--skf-color-neutral-dark);--skf-interactive-border-color-primary-active: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-icon-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-black) );--skf-interactive-icon-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-icon-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-icon-color-primary-hover: var(--skf-color-neutral-darkest);--skf-interactive-icon-color-inverse-hover: var(--skf-color-neutral-lightest)}:host,:where(:root){--skf-severity-bg-color-success: var(--skf-color-green-lightest);--skf-severity-bg-color-info: light-dark( var(--skf-color-blue-lighest), var(--skf-color-blue-lighest) );--skf-severity-bg-color-warning: var(--skf-color-orange-lightest);--skf-severity-bg-color-alert: var(--skf-color-yellow-lightest);--skf-severity-bg-color-error: var(--skf-color-red-lightest)}:host,:where(:root){--skf-severity-fg-color-success: light-dark( var(--skf-color-green-base), var(--skf-color-green-base) );--skf-severity-fg-color-info: light-dark(var(--skf-color-blue-base), var(--skf-color-blue-base));--skf-severity-fg-color-warning: light-dark( var(--skf-color-orange-base), var(--skf-color-orange-base) );--skf-severity-fg-color-error: light-dark(var(--skf-color-red-base), var(--skf-color-red-base));--skf-severity-fg-color-alert: light-dark( var(--skf-color-yellow-base), var(--skf-color-yellow-base) )}:host,:where(:root){--skf-spacing-25: var(--skf-size-4);--skf-spacing-50: var(--skf-size-8);--skf-spacing-75: var(--skf-size-12);--skf-spacing-100: var(--skf-size-16);--skf-spacing-125: var(--skf-size-20);--skf-spacing-150: var(--skf-size-24);--skf-spacing-200: var(--skf-size-32);--skf-spacing-250: var(--skf-size-44);--skf-spacing-300: var(--skf-size-48);--skf-spacing-400: var(--skf-size-56)}:host,:where(:root){--skf-font-size-25: var(--skf-type-scale-10);--skf-font-size-50: var(--skf-type-scale-12);--skf-font-size-75: var(--skf-type-scale-14);--skf-font-size-100: var(--skf-type-scale-16);--skf-font-size-200: var(--skf-type-scale-18);--skf-font-size-300: var(--skf-type-scale-20);--skf-font-size-400: var(--skf-type-scale-22);--skf-font-size-500: var(--skf-type-scale-24);--skf-font-size-600: var(--skf-type-scale-28);--skf-font-size-700: var(--skf-type-scale-32);--skf-font-size-800: var(--skf-type-scale-36);--skf-font-size-900: var(--skf-type-scale-40);--skf-font-size-1000: var(--skf-type-scale-46);--skf-font-size-1100: var(--skf-type-scale-50);--skf-font-size-1200: var(--skf-type-scale-56);--skf-font-size-1300: var(--skf-type-scale-64);--skf-font-size-1400: var(--skf-type-scale-72);--skf-font-size-1500: var(--skf-type-scale-90);--skf-font-size-1600: var(--skf-type-scale-124)}:host,:where(:root){--skf-font-weight-light: 100;--skf-font-weight-regular: 400;--skf-font-weight-medium: 500;--skf-font-weight-bold: 700}:host,:where(:root){--skf-font-family-sans: SKFSans}:host,:where(:root){--skf-line-height-25: var(--skf-type-scale-10);--skf-line-height-50: var(--skf-type-scale-12);--skf-line-height-75: var(--skf-type-scale-14);--skf-line-height-100: var(--skf-type-scale-16);--skf-line-height-200: var(--skf-type-scale-18);--skf-line-height-300: var(--skf-type-scale-20);--skf-line-height-400: var(--skf-type-scale-22);--skf-line-height-500: var(--skf-type-scale-24);--skf-line-height-600: var(--skf-type-scale-28);--skf-line-height-700: var(--skf-type-scale-32);--skf-line-height-800: var(--skf-type-scale-36);--skf-line-height-900: var(--skf-type-scale-40);--skf-line-height-1000: var(--skf-type-scale-46);--skf-line-height-1100: var(--skf-type-scale-50);--skf-line-height-1200: var(--skf-type-scale-56);--skf-line-height-1300: var(--skf-type-scale-64);--skf-line-height-1400: var(--skf-type-scale-72);--skf-line-height-1500: var(--skf-type-scale-90);--skf-line-height-size-1600: var(--skf-type-scale-124)}:host,:where(:root){--skf-motion-duration-fast: 200;--skf-motion-duration-normal: 300;--skf-motion-duration-slow: 400}:host,:where(:root){--skf-motion-easing-ease-in: ease-in;--skf-motion-easing-ease-out: ease-out}:host,:where(:root){--skf-shadow-xl: 0 10px 15px -3px #0000001a;--skf-shadow-md: 0 1px 3px 0 #0000001a;--skf-shadow-sm: 0 1px 2px 0 #0000000d;--skf-shadow-lg: 0 4px 6px -1px #0000001a}:host,:where(:root){--skf-logo-primary: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base));--skf-logo-secondary: light-dark(var(--skf-color-neutral-black), var(--skf-color-neutral-black));--skf-logo-inverse: light-dark(var(--skf-color-neutral-white), var(--skf-color-neutral-white))}@font-face{font-family:SKFSans;src:url(https://fonts.skf.com/SKFSans-Regular.woff)}@font-face{font-family:SKFSans;font-style:italic;src:url(https://fonts.skf.com/SKFSans-Italic.woff)}@font-face{font-family:SKFSans;font-weight:100;src:url(https://fonts.skf.com/SKFSans-Light.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:100;src:url(https://fonts.skf.com/SKFSans-LightItalic.woff)}@font-face{font-family:SKFSans;font-weight:500;src:url(https://fonts.skf.com/SKFSans-Medium.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:500;src:url(https://fonts.skf.com/SKFSans-MediumItalic.woff)}@font-face{font-family:SKFSans;font-weight:700;src:url(https://fonts.skf.com/SKFSans-Bold.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:700;src:url(https://fonts.skf.com/SKFSans-BoldItalic.woff)}body{color:var(--skf-text-color-primary);font:var(--skf-font-size-100) / var(--skf-line-height-300) var(--skf-font-family-sans);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
1
+ @charset "UTF-8";@font-face{font-family:SKFSans;src:url(https://fonts.skf.com/SKFSans-Regular.woff)}@font-face{font-family:SKFSans;font-style:italic;src:url(https://fonts.skf.com/SKFSans-Italic.woff)}@font-face{font-family:SKFSans;font-weight:100;src:url(https://fonts.skf.com/SKFSans-Light.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:100;src:url(https://fonts.skf.com/SKFSans-LightItalic.woff)}@font-face{font-family:SKFSans;font-weight:500;src:url(https://fonts.skf.com/SKFSans-Medium.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:500;src:url(https://fonts.skf.com/SKFSans-MediumItalic.woff)}@font-face{font-family:SKFSans;font-weight:700;src:url(https://fonts.skf.com/SKFSans-Bold.woff)}@font-face{font-family:SKFSans;font-style:italic;font-weight:700;src:url(https://fonts.skf.com/SKFSans-BoldItalic.woff)}:host,:where(:root){--skf-color-green-lightest: #e5f3ecff;--skf-color-green-base: #048942ff;--skf-color-green-dark: #097c42ff;--skf-color-green-darker: #106b41ff;--skf-color-blue-lighest: #e7eefbff;--skf-color-blue-base: #4f84e0ff;--skf-color-blue-dark: #4978c8ff;--skf-color-blue-darker: #4167a8ff;--skf-color-yellow-lightest: #fff9e7ff;--skf-color-yellow-base: #ffca15ff;--skf-color-yellow-darker: #dfb31bff;--skf-color-yellow-darkest: #b49524ff;--skf-color-orange-lightest: #fff2e5ff;--skf-color-orange-base: #ff8004ff;--skf-color-orange-darker: #df740dff;--skf-color-orange-darkest: #b46518ff;--skf-color-red-lightest: #f9e5e5ff;--skf-color-red-base: #cc0000ff;--skf-color-red-darker: #b3080aff;--skf-color-red-darkest: #921217ff;--skf-color-neutral-lightest: #f6f6f6ff;--skf-color-neutral-lighter: #ebeceeff;--skf-color-neutral-light: #d5d8dcff;--skf-color-neutral-base: #c7cad0ff;--skf-color-neutral-dark: #aaafb8ff;--skf-color-neutral-darker: #808895ff;--skf-color-neutral-darkest: #676f7cff;--skf-color-neutral-black: #273342ff;--skf-color-neutral-white: #ffffffff;--skf-color-brand-base: #0f58d6ff;--skf-color-brand-lightest: #d9e4f8ff;--skf-color-brand-lighter: #c5d7f5ff;--skf-color-brand-dark: #084abdff;--skf-color-neutral-transparent: #ffffff00;--skf-color-neutral-opacity: #12111199;--skf-color-brand-darker: #0b3e96ff}:host,:where(:root){--skf-size-1: .0625rem;--skf-size-2: .125rem;--skf-size-4: .25rem;--skf-size-8: .5rem;--skf-size-12: .75rem;--skf-size-16: 1rem;--skf-size-20: 1.25rem;--skf-size-24: 1.5rem;--skf-size-32: 2rem;--skf-size-44: 2.75rem;--skf-size-48: 3rem;--skf-size-56: 3.5rem}:host,:where(:root){--skf-type-scale-10: .625rem;--skf-type-scale-12: .75rem;--skf-type-scale-14: .875rem;--skf-type-scale-16: 1rem;--skf-type-scale-18: 1.125rem;--skf-type-scale-20: 1.25rem;--skf-type-scale-22: 1.375rem;--skf-type-scale-24: 1.5rem;--skf-type-scale-28: 1.75rem;--skf-type-scale-32: 2rem;--skf-type-scale-36: 2.25rem;--skf-type-scale-40: 2.5rem;--skf-type-scale-46: 2.875rem;--skf-type-scale-50: 3.125rem;--skf-type-scale-56: 3.5rem;--skf-type-scale-64: 4rem;--skf-type-scale-72: 4.5rem;--skf-type-scale-90: 5.625rem;--skf-type-scale-124: 7.75rem}:host,:where(:root){--skf-bg-color-neutral-1: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-light) );--skf-bg-color-neutral-2: var(--skf-color-neutral-lighter);--skf-bg-color-neutral-3: var(--skf-color-neutral-light);--skf-bg-color-neutral-4: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-base) );--skf-bg-color-neutral-5: var(--skf-color-neutral-dark);--skf-bg-color-neutral-6: var(--skf-color-neutral-darker);--skf-bg-color-neutral-7: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-white) );--skf-bg-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base))}:host,:where(:root){--skf-text-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-lightest) );--skf-text-color-secondary: var(--skf-color-neutral-darkest);--skf-text-color-tertiary: var(--skf-color-neutral-dark);--skf-text-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-text-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base))}:host,:where(:root){--skf-icon-size-xs: var(--skf-size-16);--skf-icon-size-sm: var(--skf-size-20);--skf-icon-size-md: var(--skf-size-24);--skf-icon-size-lg: var(--skf-size-32)}:host,:where(:root){--skf-icon-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-black) );--skf-icon-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-icon-color-emphasised: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base));--skf-icon-color-secondary: var(--skf-color-neutral-darkest)}:host,:where(:root){--skf-border-color-emphasised: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-border-color-primary: var(--skf-color-neutral-dark);--skf-border-color-secondary: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-base) );--skf-border-color-tertiary: var(--skf-color-neutral-light);--skf-border-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) )}:host,:where(:root){--skf-border-width-md: var(--skf-size-2);--skf-border-width-lg: var(--skf-size-4);--skf-border-width-sm: var(--skf-size-1)}:host,:where(:root){--skf-border-radius-md: var(--skf-size-8);--skf-border-radius-lg: var(--skf-size-16);--skf-border-radius-sm: var(--skf-size-2)}:host,:where(:root){--skf-interactive-bg-color-primary: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-lightest) );--skf-interactive-bg-color-primary-hover: var(--skf-color-brand-dark);--skf-interactive-bg-color-primary-active: var(--skf-color-brand-darker);--skf-interactive-bg-color-secondary: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-bg-color-secondary-hover: var(--skf-color-brand-lightest);--skf-interactive-bg-color-secondary-active: var(--skf-color-brand-lighter);--skf-interactive-bg-color-tertiary: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-lightest) );--skf-interactive-bg-color-destructive: light-dark( var(--skf-color-red-base), var(--skf-color-red-base) );--skf-interactive-bg-color-destructive-hover: var(--skf-color-red-darker);--skf-interactive-bg-color-destructive-active: var(--skf-color-red-darkest);--skf-interactive-bg-color-disabled: var(--skf-color-neutral-lighter);--skf-interactive-bg-color-tertiary-hover: var(--skf-color-neutral-lighter);--skf-interactive-bg-color-tertiary-active: light-dark( var(--skf-color-neutral-base), var(--skf-color-neutral-lightest) );--skf-interactive-text-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-text-color-primary: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-text-color-primary-hover: var(--skf-color-brand-dark);--skf-interactive-text-color-primary-active: var(--skf-color-brand-dark);--skf-interactive-text-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-text-color-inverse-hover: var(--skf-color-neutral-lightest);--skf-interactive-text-color-inverse-active: var(--skf-color-neutral-lightest);--skf-interactive-border-color-focus: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-border-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-border-color-primary-hover: var(--skf-color-neutral-darkest);--skf-interactive-border-color-primary: var(--skf-color-neutral-dark);--skf-interactive-border-color-primary-active: light-dark( var(--skf-color-brand-base), var(--skf-color-brand-base) );--skf-interactive-icon-color-primary: light-dark( var(--skf-color-neutral-black), var(--skf-color-neutral-black) );--skf-interactive-icon-color-inverse: light-dark( var(--skf-color-neutral-white), var(--skf-color-neutral-white) );--skf-interactive-icon-color-disabled: var(--skf-color-neutral-darker);--skf-interactive-icon-color-primary-hover: var(--skf-color-neutral-darkest);--skf-interactive-icon-color-inverse-hover: var(--skf-color-neutral-lightest)}:host,:where(:root){--skf-severity-bg-color-success: var(--skf-color-green-lightest);--skf-severity-bg-color-info: light-dark( var(--skf-color-blue-lighest), var(--skf-color-blue-lighest) );--skf-severity-bg-color-warning: var(--skf-color-orange-lightest);--skf-severity-bg-color-alert: var(--skf-color-yellow-lightest);--skf-severity-bg-color-error: var(--skf-color-red-lightest)}:host,:where(:root){--skf-severity-fg-color-success: light-dark( var(--skf-color-green-base), var(--skf-color-green-base) );--skf-severity-fg-color-info: light-dark(var(--skf-color-blue-base), var(--skf-color-blue-base));--skf-severity-fg-color-warning: light-dark( var(--skf-color-orange-base), var(--skf-color-orange-base) );--skf-severity-fg-color-error: light-dark(var(--skf-color-red-base), var(--skf-color-red-base));--skf-severity-fg-color-alert: light-dark( var(--skf-color-yellow-base), var(--skf-color-yellow-base) )}:host,:where(:root){--skf-spacing-25: var(--skf-size-4);--skf-spacing-50: var(--skf-size-8);--skf-spacing-75: var(--skf-size-12);--skf-spacing-100: var(--skf-size-16);--skf-spacing-125: var(--skf-size-20);--skf-spacing-150: var(--skf-size-24);--skf-spacing-200: var(--skf-size-32);--skf-spacing-250: var(--skf-size-44);--skf-spacing-300: var(--skf-size-48);--skf-spacing-400: var(--skf-size-56)}:host,:where(:root){--skf-font-size-25: var(--skf-type-scale-10);--skf-font-size-50: var(--skf-type-scale-12);--skf-font-size-75: var(--skf-type-scale-14);--skf-font-size-100: var(--skf-type-scale-16);--skf-font-size-200: var(--skf-type-scale-18);--skf-font-size-300: var(--skf-type-scale-20);--skf-font-size-400: var(--skf-type-scale-22);--skf-font-size-500: var(--skf-type-scale-24);--skf-font-size-600: var(--skf-type-scale-28);--skf-font-size-700: var(--skf-type-scale-32);--skf-font-size-800: var(--skf-type-scale-36);--skf-font-size-900: var(--skf-type-scale-40);--skf-font-size-1000: var(--skf-type-scale-46);--skf-font-size-1100: var(--skf-type-scale-50);--skf-font-size-1200: var(--skf-type-scale-56);--skf-font-size-1300: var(--skf-type-scale-64);--skf-font-size-1400: var(--skf-type-scale-72);--skf-font-size-1500: var(--skf-type-scale-90);--skf-font-size-1600: var(--skf-type-scale-124)}:host,:where(:root){--skf-font-weight-light: 100;--skf-font-weight-regular: 400;--skf-font-weight-medium: 500;--skf-font-weight-bold: 700}:host,:where(:root){--skf-font-family-sans: SKFSans}:host,:where(:root){--skf-line-height-25: var(--skf-type-scale-10);--skf-line-height-50: var(--skf-type-scale-12);--skf-line-height-75: var(--skf-type-scale-14);--skf-line-height-100: var(--skf-type-scale-16);--skf-line-height-200: var(--skf-type-scale-18);--skf-line-height-300: var(--skf-type-scale-20);--skf-line-height-400: var(--skf-type-scale-22);--skf-line-height-500: var(--skf-type-scale-24);--skf-line-height-600: var(--skf-type-scale-28);--skf-line-height-700: var(--skf-type-scale-32);--skf-line-height-800: var(--skf-type-scale-36);--skf-line-height-900: var(--skf-type-scale-40);--skf-line-height-1000: var(--skf-type-scale-46);--skf-line-height-1100: var(--skf-type-scale-50);--skf-line-height-1200: var(--skf-type-scale-56);--skf-line-height-1300: var(--skf-type-scale-64);--skf-line-height-1400: var(--skf-type-scale-72);--skf-line-height-1500: var(--skf-type-scale-90);--skf-line-height-size-1600: var(--skf-type-scale-124)}:host,:where(:root){--skf-motion-duration-fast: 200;--skf-motion-duration-normal: 300;--skf-motion-duration-slow: 400}:host,:where(:root){--skf-motion-easing-ease-in: ease-in;--skf-motion-easing-ease-out: ease-out}:host,:where(:root){--skf-shadow-xl: 0 10px 15px -3px #0000001a;--skf-shadow-md: 0 1px 3px 0 #0000001a;--skf-shadow-sm: 0 1px 2px 0 #0000000d;--skf-shadow-lg: 0 4px 6px -1px #0000001a}:host,:where(:root){--skf-logo-primary: light-dark(var(--skf-color-brand-base), var(--skf-color-brand-base));--skf-logo-secondary: light-dark(var(--skf-color-neutral-black), var(--skf-color-neutral-black));--skf-logo-inverse: light-dark(var(--skf-color-neutral-white), var(--skf-color-neutral-white))}body{color:var(--skf-text-color-primary);font:var(--skf-font-size-100) / var(--skf-line-height-300) var(--skf-font-family-sans);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}body:has(skf-dialog[open]){overflow:hidden}