@nldd/design-system 0.8.94 → 0.8.96

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 (380) hide show
  1. package/README.md +114 -21
  2. package/custom-elements.json +295 -311
  3. package/dist/assets/styles/shadow-resets.d.ts +1 -1
  4. package/dist/assets/styles/shadow-resets.js +1 -1
  5. package/dist/components/actions/button/button.js +3 -3
  6. package/dist/components/actions/button/button.js.map +1 -1
  7. package/dist/components/actions/button/button.styles.js +273 -273
  8. package/dist/components/actions/button-bar/button-bar.styles.js +34 -34
  9. package/dist/components/actions/button-group/button-group.styles.js +11 -11
  10. package/dist/components/actions/icon-button/icon-button.js +3 -3
  11. package/dist/components/actions/icon-button/icon-button.js.map +1 -1
  12. package/dist/components/actions/icon-button/icon-button.styles.js +203 -203
  13. package/dist/components/actions/menu/menu.d.ts +3 -3
  14. package/dist/components/actions/menu/menu.js +15 -15
  15. package/dist/components/actions/menu/menu.js.map +1 -1
  16. package/dist/components/actions/menu/menu.styles.d.ts.map +1 -1
  17. package/dist/components/actions/menu/menu.styles.js +46 -41
  18. package/dist/components/actions/menu/menu.styles.js.map +1 -1
  19. package/dist/components/actions/split-button/split-button.js +3 -3
  20. package/dist/components/actions/split-button/split-button.js.map +1 -1
  21. package/dist/components/actions/split-button/split-button.styles.js +30 -30
  22. package/dist/components/actions/toolbar/toolbar.d.ts +8 -1
  23. package/dist/components/actions/toolbar/toolbar.d.ts.map +1 -1
  24. package/dist/components/actions/toolbar/toolbar.js +46 -26
  25. package/dist/components/actions/toolbar/toolbar.js.map +1 -1
  26. package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
  27. package/dist/components/actions/toolbar/toolbar.styles.js +57 -56
  28. package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
  29. package/dist/components/components.js +4405 -4267
  30. package/dist/components/content/avatar/avatar.d.ts +1 -1
  31. package/dist/components/content/avatar/avatar.js +3 -3
  32. package/dist/components/content/avatar/avatar.js.map +1 -1
  33. package/dist/components/content/avatar/avatar.styles.js +39 -39
  34. package/dist/components/content/avatar-group/avatar-group.styles.js +36 -36
  35. package/dist/components/content/blockquote/blockquote.styles.d.ts.map +1 -1
  36. package/dist/components/content/blockquote/blockquote.styles.js +15 -14
  37. package/dist/components/content/blockquote/blockquote.styles.js.map +1 -1
  38. package/dist/components/content/code-viewer/code-viewer.js +1 -1
  39. package/dist/components/content/code-viewer/code-viewer.styles.js +36 -36
  40. package/dist/components/content/icon/icon-aliases.d.ts.map +1 -1
  41. package/dist/components/content/icon/icon-aliases.js +16 -0
  42. package/dist/components/content/icon/icon-aliases.js.map +1 -1
  43. package/dist/components/content/icon/icon-gallery-status.d.ts.map +1 -1
  44. package/dist/components/content/icon/icon-gallery-status.js +14 -42
  45. package/dist/components/content/icon/icon-gallery-status.js.map +1 -1
  46. package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
  47. package/dist/components/content/icon/icon-registry.js +12 -0
  48. package/dist/components/content/icon/icon-registry.js.map +1 -1
  49. package/dist/components/content/icon/icon.js +2 -2
  50. package/dist/components/content/icon/icon.js.map +1 -1
  51. package/dist/components/content/icon/icon.styles.js +48 -48
  52. package/dist/components/content/identity/identity.styles.js +17 -17
  53. package/dist/components/content/image/image.js +3 -3
  54. package/dist/components/content/image/image.js.map +1 -1
  55. package/dist/components/content/image/image.styles.js +153 -153
  56. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map +1 -1
  57. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js +42 -40
  58. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js.map +1 -1
  59. package/dist/components/content/tag/tag.styles.js +95 -95
  60. package/dist/components/content/text/text.styles.js +23 -23
  61. package/dist/components/content/title/title.styles.js +38 -38
  62. package/dist/components/content/token/token.styles.js +4 -4
  63. package/dist/components/content/tooltip/tooltip.js +5 -5
  64. package/dist/components/content/tooltip/tooltip.js.map +1 -1
  65. package/dist/components/content/tooltip/tooltip.styles.d.ts.map +1 -1
  66. package/dist/components/content/tooltip/tooltip.styles.js +21 -18
  67. package/dist/components/content/tooltip/tooltip.styles.js.map +1 -1
  68. package/dist/components/{decorate-lwt_OrAG.js → decorate-CO88j7Lc.js} +1 -1
  69. package/dist/components/{dist-M6GKopqu.js → dist-BWEAw34D.js} +1 -1
  70. package/dist/components/{dist-OlffRM7-.js → dist-BWRYv3Mp.js} +1 -1
  71. package/dist/components/{dist-CSYXsT7W.js → dist-Bi4EHsFY.js} +2 -2
  72. package/dist/components/{dist-B5ie2Bo9.js → dist-C3uWRipu.js} +1 -1
  73. package/dist/components/{dist-CoUVHSu-.js → dist-CH9m014O.js} +1 -1
  74. package/dist/components/{dist-Dn3c5gfb.js → dist-CpW8MF-L.js} +42 -27
  75. package/dist/components/{dist-RPaf2J9c.js → dist-CvL6_ezZ.js} +2 -2
  76. package/dist/components/{dist-CGOykrJw.js → dist-DMHTTJRJ.js} +2 -2
  77. package/dist/components/{dist-BUu-NW5O.js → dist-DTOshgo1.js} +1 -1
  78. package/dist/components/{dist-Dxn9Up8K.js → dist-DV6Mp5N1.js} +3 -3
  79. package/dist/components/{dist-CQzaKTa8.js → dist-PlhQXXtE.js} +1 -1
  80. package/dist/components/forms/form-field/form-field.styles.js +5 -5
  81. package/dist/components/forms/validation-list/validation-list.styles.js +7 -7
  82. package/dist/components/{icon-DWNVcttg.js → icon-DQHT2C7z.js} +71 -51
  83. package/dist/components/{icon-button-DHzLMmj0.js → icon-button-mevRsl4C.js} +283 -280
  84. package/dist/components/index.d.ts +2 -2
  85. package/dist/components/index.d.ts.map +1 -1
  86. package/dist/components/index.js +2 -2
  87. package/dist/components/index.js.map +1 -1
  88. package/dist/components/inputs/checkbox/checkbox.styles.d.ts.map +1 -1
  89. package/dist/components/inputs/checkbox/checkbox.styles.js +31 -16
  90. package/dist/components/inputs/checkbox/checkbox.styles.js.map +1 -1
  91. package/dist/components/inputs/code-editor/code-editor.js +2 -2
  92. package/dist/components/inputs/code-editor/code-editor.js.map +1 -1
  93. package/dist/components/inputs/code-editor/code-editor.styles.js +30 -30
  94. package/dist/components/inputs/combo-box/combo-box.js +2 -2
  95. package/dist/components/inputs/combo-box/combo-box.js.map +1 -1
  96. package/dist/components/inputs/combo-box/combo-box.styles.js +30 -30
  97. package/dist/components/inputs/date-field/date-field.js +4 -4
  98. package/dist/components/inputs/date-field/date-field.js.map +1 -1
  99. package/dist/components/inputs/date-field/date-field.styles.js +46 -46
  100. package/dist/components/inputs/date-picker/date-picker.js +3 -3
  101. package/dist/components/inputs/date-picker/date-picker.js.map +1 -1
  102. package/dist/components/inputs/date-picker/date-picker.styles.js +65 -65
  103. package/dist/components/inputs/dropdown/dropdown.js +2 -2
  104. package/dist/components/inputs/dropdown/dropdown.js.map +1 -1
  105. package/dist/components/inputs/dropdown/dropdown.styles.js +66 -66
  106. package/dist/components/inputs/file-field/file-field.styles.d.ts.map +1 -1
  107. package/dist/components/inputs/file-field/file-field.styles.js +33 -30
  108. package/dist/components/inputs/file-field/file-field.styles.js.map +1 -1
  109. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js +3 -3
  110. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js.map +1 -1
  111. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +30 -30
  112. package/dist/components/inputs/number-field/number-field.js +3 -3
  113. package/dist/components/inputs/number-field/number-field.js.map +1 -1
  114. package/dist/components/inputs/number-field/number-field.styles.js +18 -18
  115. package/dist/components/inputs/password-field/password-field.js +2 -2
  116. package/dist/components/inputs/password-field/password-field.js.map +1 -1
  117. package/dist/components/inputs/password-field/password-field.styles.js +37 -37
  118. package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map +1 -1
  119. package/dist/components/inputs/radio-button/radio-button.styles.js +29 -13
  120. package/dist/components/inputs/radio-button/radio-button.styles.js.map +1 -1
  121. package/dist/components/inputs/search-field/search-field.js +2 -2
  122. package/dist/components/inputs/search-field/search-field.js.map +1 -1
  123. package/dist/components/inputs/search-field/search-field.styles.js +30 -30
  124. package/dist/components/inputs/segmented-control/segmented-control.js +4 -4
  125. package/dist/components/inputs/segmented-control/segmented-control.js.map +1 -1
  126. package/dist/components/inputs/segmented-control/segmented-control.styles.js +108 -108
  127. package/dist/components/inputs/stepper/stepper.styles.js +10 -10
  128. package/dist/components/inputs/switch/switch.styles.d.ts.map +1 -1
  129. package/dist/components/inputs/switch/switch.styles.js +39 -31
  130. package/dist/components/inputs/switch/switch.styles.js.map +1 -1
  131. package/dist/components/inputs/text-editor/text-editor.js +2 -2
  132. package/dist/components/inputs/text-editor/text-editor.js.map +1 -1
  133. package/dist/components/inputs/text-editor/text-editor.markdown.js +2 -2
  134. package/dist/components/inputs/text-editor/text-editor.markdown.js.map +1 -1
  135. package/dist/components/inputs/text-editor/text-editor.mentions.js +7 -7
  136. package/dist/components/inputs/text-editor/text-editor.mentions.js.map +1 -1
  137. package/dist/components/inputs/text-editor/text-editor.styles.js +138 -138
  138. package/dist/components/inputs/text-field/text-field.js +2 -2
  139. package/dist/components/inputs/text-field/text-field.js.map +1 -1
  140. package/dist/components/inputs/text-field/text-field.styles.js +27 -27
  141. package/dist/components/inputs/time-field/time-field.js +4 -4
  142. package/dist/components/inputs/time-field/time-field.js.map +1 -1
  143. package/dist/components/inputs/time-field/time-field.styles.js +40 -40
  144. package/dist/components/inputs/time-picker/time-picker.js +4 -4
  145. package/dist/components/inputs/time-picker/time-picker.js.map +1 -1
  146. package/dist/components/inputs/time-picker/time-picker.styles.js +30 -30
  147. package/dist/components/inputs/toggle-button/toggle-button.d.ts +1 -1
  148. package/dist/components/inputs/toggle-button/toggle-button.js +1 -1
  149. package/dist/components/inputs/toggle-button/toggle-button.styles.js +145 -145
  150. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.d.ts.map +1 -1
  151. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js +7 -3
  152. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js.map +1 -1
  153. package/dist/components/inputs/token-field/token-field.styles.js +28 -28
  154. package/dist/components/layout/app-view/app-view.d.ts +1 -1
  155. package/dist/components/layout/app-view/app-view.js +1 -1
  156. package/dist/components/layout/app-view/app-view.styles.js +3 -3
  157. package/dist/components/layout/box/box.styles.js +13 -13
  158. package/dist/components/layout/card/card.styles.d.ts.map +1 -1
  159. package/dist/components/layout/card/card.styles.js +24 -21
  160. package/dist/components/layout/card/card.styles.js.map +1 -1
  161. package/dist/components/layout/collection/collection.js +6 -6
  162. package/dist/components/layout/collection/collection.js.map +1 -1
  163. package/dist/components/layout/collection/collection.styles.js +19 -19
  164. package/dist/components/layout/container/container.d.ts +2 -2
  165. package/dist/components/layout/container/container.js +30 -30
  166. package/dist/components/layout/container/container.js.map +1 -1
  167. package/dist/components/layout/container/container.styles.js +125 -125
  168. package/dist/components/layout/page/page.js +5 -5
  169. package/dist/components/layout/page/page.js.map +1 -1
  170. package/dist/components/layout/page/page.styles.js +20 -20
  171. package/dist/components/layout/page-footer/page-footer.js +4 -4
  172. package/dist/components/layout/page-footer/page-footer.js.map +1 -1
  173. package/dist/components/layout/page-footer/page-footer.styles.d.ts.map +1 -1
  174. package/dist/components/layout/page-footer/page-footer.styles.js +26 -26
  175. package/dist/components/layout/page-footer/page-footer.styles.js.map +1 -1
  176. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js +3 -3
  177. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js.map +1 -1
  178. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js +17 -17
  179. package/dist/components/layout/page-sections/hero/hero.js +6 -6
  180. package/dist/components/layout/page-sections/hero/hero.js.map +1 -1
  181. package/dist/components/layout/page-sections/hero/hero.styles.js +74 -74
  182. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.js +3 -3
  183. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.js.map +1 -1
  184. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js +17 -17
  185. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.js +3 -3
  186. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.js.map +1 -1
  187. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js +17 -17
  188. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js +5 -5
  189. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js.map +1 -1
  190. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts.map +1 -1
  191. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js +29 -27
  192. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js.map +1 -1
  193. package/dist/components/layout/page-sections/simple-section/simple-section.js +3 -3
  194. package/dist/components/layout/page-sections/simple-section/simple-section.js.map +1 -1
  195. package/dist/components/layout/page-sections/simple-section/simple-section.styles.js +17 -17
  196. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.js +3 -3
  197. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.js.map +1 -1
  198. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js +17 -17
  199. package/dist/components/layout/popover/popover.d.ts +1 -1
  200. package/dist/components/layout/popover/popover.js +5 -5
  201. package/dist/components/layout/popover/popover.js.map +1 -1
  202. package/dist/components/layout/popover/popover.styles.d.ts.map +1 -1
  203. package/dist/components/layout/popover/popover.styles.js +4 -3
  204. package/dist/components/layout/popover/popover.styles.js.map +1 -1
  205. package/dist/components/layout/sheet/sheet.js +4 -4
  206. package/dist/components/layout/sheet/sheet.js.map +1 -1
  207. package/dist/components/layout/sheet/sheet.styles.js +8 -8
  208. package/dist/components/layout/spacer/spacer.styles.js +76 -76
  209. package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js +5 -5
  210. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js +4 -4
  211. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js.map +1 -1
  212. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js +12 -12
  213. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.js +1 -1
  214. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.js.map +1 -1
  215. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js +6 -6
  216. package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js +4 -4
  217. package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js +4 -4
  218. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.js +1 -1
  219. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.js.map +1 -1
  220. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js +6 -6
  221. package/dist/components/layout/window/window.d.ts +1 -1
  222. package/dist/components/layout/window/window.js +1 -1
  223. package/dist/components/layout/window/window.styles.d.ts.map +1 -1
  224. package/dist/components/layout/window/window.styles.js +3 -1
  225. package/dist/components/layout/window/window.styles.js.map +1 -1
  226. package/dist/components/lists-and-tables/cells/cell/cell.js +8 -8
  227. package/dist/components/lists-and-tables/cells/cell/cell.js.map +1 -1
  228. package/dist/components/lists-and-tables/cells/cell/cell.styles.js +9 -9
  229. package/dist/components/lists-and-tables/cells/description-cell/description-cell.js +8 -8
  230. package/dist/components/lists-and-tables/cells/description-cell/description-cell.js.map +1 -1
  231. package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js +10 -10
  232. package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.js +9 -9
  233. package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.js +14 -14
  234. package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.js +20 -20
  235. package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.d.ts → step-cell/step-cell.d.ts} +19 -18
  236. package/dist/components/lists-and-tables/cells/step-cell/step-cell.d.ts.map +1 -0
  237. package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.js → step-cell/step-cell.js} +34 -33
  238. package/dist/components/lists-and-tables/cells/step-cell/step-cell.js.map +1 -0
  239. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.d.ts +2 -0
  240. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.d.ts.map +1 -0
  241. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.js +184 -0
  242. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.js.map +1 -0
  243. package/dist/components/lists-and-tables/cells/step-cell/step-cell.template.d.ts +4 -0
  244. package/dist/components/lists-and-tables/cells/step-cell/step-cell.template.d.ts.map +1 -0
  245. package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.template.js → step-cell/step-cell.template.js} +10 -10
  246. package/dist/components/lists-and-tables/cells/step-cell/step-cell.template.js.map +1 -0
  247. package/dist/components/lists-and-tables/cells/text-cell/text-cell.js +9 -9
  248. package/dist/components/lists-and-tables/cells/text-cell/text-cell.js.map +1 -1
  249. package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js +37 -37
  250. package/dist/components/lists-and-tables/cells/title-cell/title-cell.js +8 -8
  251. package/dist/components/lists-and-tables/cells/title-cell/title-cell.js.map +1 -1
  252. package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js +37 -37
  253. package/dist/components/lists-and-tables/list/list.js +7 -7
  254. package/dist/components/lists-and-tables/list/list.js.map +1 -1
  255. package/dist/components/lists-and-tables/list/list.styles.d.ts.map +1 -1
  256. package/dist/components/lists-and-tables/list/list.styles.js +49 -48
  257. package/dist/components/lists-and-tables/list/list.styles.js.map +1 -1
  258. package/dist/components/lists-and-tables/list-item/list-item.d.ts +1 -1
  259. package/dist/components/lists-and-tables/list-item/list-item.js +9 -9
  260. package/dist/components/lists-and-tables/list-item/list-item.js.map +1 -1
  261. package/dist/components/lists-and-tables/list-item/list-item.styles.d.ts.map +1 -1
  262. package/dist/components/lists-and-tables/list-item/list-item.styles.js +69 -67
  263. package/dist/components/lists-and-tables/list-item/list-item.styles.js.map +1 -1
  264. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.styles.js +30 -30
  265. package/dist/components/lists-and-tables/table/table.js +2 -2
  266. package/dist/components/lists-and-tables/table/table.js.map +1 -1
  267. package/dist/components/lists-and-tables/table/table.styles.js +21 -21
  268. package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +3 -3
  269. package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js.map +1 -1
  270. package/dist/components/navigation/document-tab-bar/document-tab-bar.d.ts +1 -1
  271. package/dist/components/navigation/document-tab-bar/document-tab-bar.js +12 -12
  272. package/dist/components/navigation/document-tab-bar/document-tab-bar.js.map +1 -1
  273. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map +1 -1
  274. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +51 -49
  275. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
  276. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map +1 -1
  277. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +23 -17
  278. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map +1 -1
  279. package/dist/components/navigation/pagination/pagination.styles.js +29 -29
  280. package/dist/components/navigation/skip-link/skip-link.styles.js +8 -8
  281. package/dist/components/navigation/tab-bar/tab-bar.styles.js +53 -53
  282. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js +3 -3
  283. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js.map +1 -1
  284. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
  285. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +50 -33
  286. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
  287. package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map +1 -1
  288. package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +3 -1
  289. package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map +1 -1
  290. package/dist/components/{shadow-resets-aG-rgyNQ.js → shadow-resets-CPa58rmc.js} +1 -1
  291. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js +46 -46
  292. package/dist/components/status-and-feedback/badge/badge.js +2 -2
  293. package/dist/components/status-and-feedback/badge/badge.js.map +1 -1
  294. package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
  295. package/dist/components/status-and-feedback/badge/badge.styles.js +120 -119
  296. package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
  297. package/dist/components/status-and-feedback/banner/banner.styles.js +49 -49
  298. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +19 -19
  299. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js +12 -12
  300. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js.map +1 -1
  301. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js +58 -58
  302. package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +6 -6
  303. package/dist/components/status-and-feedback/notification/notification.styles.d.ts.map +1 -1
  304. package/dist/components/status-and-feedback/notification/notification.styles.js +45 -39
  305. package/dist/components/status-and-feedback/notification/notification.styles.js.map +1 -1
  306. package/dist/components/status-and-feedback/notification/notifications-area.js +2 -2
  307. package/dist/components/status-and-feedback/notification/notifications-area.js.map +1 -1
  308. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.d.ts.map +1 -1
  309. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js +121 -119
  310. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map +1 -1
  311. package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js +58 -58
  312. package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js +1 -1
  313. package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js.map +1 -1
  314. package/dist/components/status-and-feedback/status-bar/status-bar.styles.js +36 -36
  315. package/dist/components/status-and-feedback/step-bar/step-bar.d.ts +142 -0
  316. package/dist/components/status-and-feedback/step-bar/step-bar.d.ts.map +1 -0
  317. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.d.ts +9 -0
  318. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.d.ts.map +1 -0
  319. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.js +8 -0
  320. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.js.map +1 -0
  321. package/dist/components/status-and-feedback/step-bar/step-bar.js +248 -0
  322. package/dist/components/status-and-feedback/step-bar/step-bar.js.map +1 -0
  323. package/dist/components/status-and-feedback/step-bar/step-bar.styles.d.ts +3 -0
  324. package/dist/components/status-and-feedback/step-bar/step-bar.styles.d.ts.map +1 -0
  325. package/dist/components/status-and-feedback/step-bar/step-bar.styles.js +294 -0
  326. package/dist/components/status-and-feedback/step-bar/step-bar.styles.js.map +1 -0
  327. package/dist/components/status-and-feedback/step-bar/step-bar.template.d.ts +5 -0
  328. package/dist/components/status-and-feedback/step-bar/step-bar.template.d.ts.map +1 -0
  329. package/dist/components/status-and-feedback/step-bar/step-bar.template.js +69 -0
  330. package/dist/components/status-and-feedback/step-bar/step-bar.template.js.map +1 -0
  331. package/dist/components/{visibility-mixin-BU1vIMW7.js → visibility-mixin-Crbt8PFP.js} +1 -1
  332. package/dist/components/{with-translations-Dt2DTXJF.js → with-translations-C8_0-9y8.js} +1 -1
  333. package/dist/css/document-reset.css +7 -0
  334. package/dist/css/rich-text.css +35 -34
  335. package/dist/css/variables.css +54 -410
  336. package/dist/nldd.min.js +4367 -4232
  337. package/dist/translations/en-US.js +5 -5
  338. package/dist/translations/en-US.js.map +1 -1
  339. package/dist/translations/fy.js +5 -5
  340. package/dist/translations/fy.js.map +1 -1
  341. package/dist/translations/nl.generated.d.ts +5 -5
  342. package/dist/translations/nl.generated.js +2 -2
  343. package/dist/translations/nl.generated.js.map +1 -1
  344. package/dist/translations/pap-AW.js +5 -5
  345. package/dist/translations/pap-AW.js.map +1 -1
  346. package/dist/translations/pap-CW.js +5 -5
  347. package/dist/translations/pap-CW.js.map +1 -1
  348. package/dist/types/vue.d.ts +64 -65
  349. package/dist/utilities/codemirror/theme.js +17 -17
  350. package/dist/utilities/codemirror/theme.js.map +1 -1
  351. package/dist/utilities/page-section-mixin.js +3 -3
  352. package/dist/utilities/page-section-mixin.js.map +1 -1
  353. package/dist/utilities/spacing-scale.d.ts +1 -1
  354. package/dist/utilities/spacing-scale.js +1 -1
  355. package/package.json +13 -11
  356. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.d.ts.map +0 -1
  357. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.js.map +0 -1
  358. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts +0 -2
  359. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts.map +0 -1
  360. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js +0 -184
  361. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js.map +0 -1
  362. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.d.ts +0 -4
  363. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.d.ts.map +0 -1
  364. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.js.map +0 -1
  365. package/dist/components/status-and-feedback/step-indicator/step-indicator.d.ts +0 -127
  366. package/dist/components/status-and-feedback/step-indicator/step-indicator.d.ts.map +0 -1
  367. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.d.ts +0 -9
  368. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.d.ts.map +0 -1
  369. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.js +0 -8
  370. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.js.map +0 -1
  371. package/dist/components/status-and-feedback/step-indicator/step-indicator.js +0 -216
  372. package/dist/components/status-and-feedback/step-indicator/step-indicator.js.map +0 -1
  373. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.d.ts +0 -3
  374. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.d.ts.map +0 -1
  375. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js +0 -294
  376. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js.map +0 -1
  377. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.d.ts +0 -5
  378. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.d.ts.map +0 -1
  379. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js +0 -69
  380. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js.map +0 -1
package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js CHANGED
@@ -9,87 +9,87 @@ export const progressBarStyles = css `
9
9
  /* # Host */
10
10
 
11
11
  :host {
12
- --_height: var(--components-progress-bar-md-height);
13
- --_track-background-color: var(--components-progress-bar-track-background-color);
14
- --_track-border-color: var(--components-progress-bar-track-border-color);
15
- --_track-border-width: var(--components-progress-bar-track-border-width);
16
- --_corner-radius: var(--components-progress-bar-corner-radius);
17
- --_segment-indicator-gap: var(--components-progress-bar-progress-segment-indicator-gap);
18
- --_caption-gap: var(--components-progress-bar-caption-gap);
19
- --_text-color: var(--components-progress-bar-text-color);
20
- --_supporting-text-color: var(--components-progress-bar-supporting-text-color);
21
- --_text-font: var(--components-progress-bar-text-font);
22
- --_supporting-text-font: var(--components-progress-bar-supporting-text-font);
23
- --_indeterminate-background-color: var(--semantics-categories-accent-filled-background-color);
24
- --_indeterminate-border-color: var(--semantics-categories-accent-filled-highlight-border-color);
25
- --_indeterminate-border-width: var(--components-progress-bar-segment-indicator-border-width);
26
- --_indeterminate-bar-width: 20%;
27
- --_indeterminate-duration: 800ms;
12
+ --_progress-bar-height: var(--primitives-space-8);
13
+ --_progress-bar-track-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
14
+ --_progress-bar-track-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
15
+ --_progress-bar-track-border-width: var(--primitives-border-width-thin);
16
+ --_progress-bar-corner-radius: var(--primitives-corner-radius-full);
17
+ --_progress-bar-segment-indicator-gap: var(--primitives-space-1);
18
+ --_progress-bar-caption-gap: var(--primitives-space-6);
19
+ --_progress-bar-text-color: var(--semantics-content-color);
20
+ --_progress-bar-supporting-text-color: var(--semantics-content-secondary-color);
21
+ --_progress-bar-text-font: var(--primitives-font-body-md-regular-tight);
22
+ --_progress-bar-supporting-text-font: var(--primitives-font-body-md-regular-tight);
23
+ --_progress-bar-indeterminate-background-color: var(--semantics-categories-accent-filled-background-color);
24
+ --_progress-bar-indeterminate-border-color: var(--semantics-categories-accent-filled-highlight-border-color);
25
+ --_progress-bar-indeterminate-border-width: var(--primitives-border-width-thin);
26
+ --_progress-bar-indeterminate-bar-width: 20%;
27
+ --_progress-bar-indeterminate-duration: 800ms;
28
28
 
29
29
  ${inheritedTextReset}
30
30
  box-sizing: border-box;
31
31
  display: flex;
32
32
  width: 100%;
33
33
  flex-direction: column;
34
- gap: var(--_caption-gap);
34
+ gap: var(--_progress-bar-caption-gap);
35
35
  }
36
36
 
37
37
  :host([hidden]) {
38
38
  display: none;
39
39
  }
40
40
 
41
- :host([size="sm"]) { --_height: var(--components-progress-bar-sm-height); }
42
- :host([size="lg"]) { --_height: var(--components-progress-bar-lg-height); }
41
+ :host([size="sm"]) { --_progress-bar-height: var(--primitives-space-4); }
42
+ :host([size="lg"]) { --_progress-bar-height: var(--primitives-space-16); }
43
43
 
44
44
  :host([variant="distribution"]) {
45
- --_segment-indicator-gap: var(--components-progress-bar-distribution-segment-indicator-gap);
46
- --_corner-radius: var(--components-progress-bar-distribution-corner-radius);
45
+ --_progress-bar-segment-indicator-gap: var(--primitives-space-2);
46
+ --_progress-bar-corner-radius: var(--primitives-corner-radius-xxs);
47
47
  }
48
48
 
49
49
 
50
50
  /* ## Indeterminate fill + border color follow the variant; default is accent (blue) */
51
51
 
52
- :host([color="neutral"]) { --_indeterminate-background-color: var(--semantics-categories-neutral-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-neutral-filled-highlight-border-color); }
53
- :host([color="success"]) { --_indeterminate-background-color: var(--semantics-categories-success-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-success-filled-highlight-border-color); }
54
- :host([color="warning"]) { --_indeterminate-background-color: var(--semantics-categories-warning-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-warning-filled-highlight-border-color); }
55
- :host([color="critical"]) { --_indeterminate-background-color: var(--semantics-categories-critical-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-critical-filled-highlight-border-color); }
56
- :host([color="lintblauw"]) { --_indeterminate-background-color: var(--semantics-categories-lintblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color); }
57
- :host([color="donkerblauw"]) { --_indeterminate-background-color: var(--semantics-categories-donkerblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color); }
58
- :host([color="hemelblauw"]) { --_indeterminate-background-color: var(--semantics-categories-hemelblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color); }
59
- :host([color="lichtblauw"]) { --_indeterminate-background-color: var(--semantics-categories-lichtblauw-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color); }
60
- :host([color="paars"]) { --_indeterminate-background-color: var(--semantics-categories-paars-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-paars-filled-highlight-border-color); }
61
- :host([color="violet"]) { --_indeterminate-background-color: var(--semantics-categories-violet-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-violet-filled-highlight-border-color); }
62
- :host([color="robijnrood"]) { --_indeterminate-background-color: var(--semantics-categories-robijnrood-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color); }
63
- :host([color="roze"]) { --_indeterminate-background-color: var(--semantics-categories-roze-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-roze-filled-highlight-border-color); }
64
- :host([color="rood"]) { --_indeterminate-background-color: var(--semantics-categories-rood-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-rood-filled-highlight-border-color); }
65
- :host([color="oranje"]) { --_indeterminate-background-color: var(--semantics-categories-oranje-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-oranje-filled-highlight-border-color); }
66
- :host([color="donkergeel"]) { --_indeterminate-background-color: var(--semantics-categories-donkergeel-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color); }
67
- :host([color="geel"]) { --_indeterminate-background-color: var(--semantics-categories-geel-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-geel-filled-highlight-border-color); }
68
- :host([color="donkerbruin"]) { --_indeterminate-background-color: var(--semantics-categories-donkerbruin-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color); }
69
- :host([color="bruin"]) { --_indeterminate-background-color: var(--semantics-categories-bruin-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-bruin-filled-highlight-border-color); }
70
- :host([color="donkergroen"]) { --_indeterminate-background-color: var(--semantics-categories-donkergroen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color); }
71
- :host([color="groen"]) { --_indeterminate-background-color: var(--semantics-categories-groen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-groen-filled-highlight-border-color); }
72
- :host([color="mosgroen"]) { --_indeterminate-background-color: var(--semantics-categories-mosgroen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color); }
73
- :host([color="mintgroen"]) { --_indeterminate-background-color: var(--semantics-categories-mintgroen-filled-background-color); --_indeterminate-border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color); }
52
+ :host([color="neutral"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-neutral-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-neutral-filled-highlight-border-color); }
53
+ :host([color="success"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-success-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-success-filled-highlight-border-color); }
54
+ :host([color="warning"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-warning-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-warning-filled-highlight-border-color); }
55
+ :host([color="critical"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-critical-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-critical-filled-highlight-border-color); }
56
+ :host([color="lintblauw"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-lintblauw-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color); }
57
+ :host([color="donkerblauw"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-donkerblauw-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color); }
58
+ :host([color="hemelblauw"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-hemelblauw-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color); }
59
+ :host([color="lichtblauw"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-lichtblauw-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color); }
60
+ :host([color="paars"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-paars-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-paars-filled-highlight-border-color); }
61
+ :host([color="violet"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-violet-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-violet-filled-highlight-border-color); }
62
+ :host([color="robijnrood"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-robijnrood-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color); }
63
+ :host([color="roze"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-roze-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-roze-filled-highlight-border-color); }
64
+ :host([color="rood"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-rood-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-rood-filled-highlight-border-color); }
65
+ :host([color="oranje"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-oranje-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-oranje-filled-highlight-border-color); }
66
+ :host([color="donkergeel"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-donkergeel-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color); }
67
+ :host([color="geel"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-geel-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-geel-filled-highlight-border-color); }
68
+ :host([color="donkerbruin"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-donkerbruin-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color); }
69
+ :host([color="bruin"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-bruin-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-bruin-filled-highlight-border-color); }
70
+ :host([color="donkergroen"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-donkergroen-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color); }
71
+ :host([color="groen"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-groen-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-groen-filled-highlight-border-color); }
72
+ :host([color="mosgroen"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-mosgroen-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color); }
73
+ :host([color="mintgroen"]) { --_progress-bar-indeterminate-background-color: var(--semantics-categories-mintgroen-filled-background-color); --_progress-bar-indeterminate-border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color); }
74
74
 
75
75
 
76
76
  /* # Caption */
77
77
 
78
78
  .progress-bar__caption {
79
79
  display: flex;
80
- gap: var(--_caption-gap);
80
+ gap: var(--_progress-bar-caption-gap);
81
81
  justify-content: space-between;
82
82
  align-items: baseline;
83
- color: var(--_text-color);
83
+ color: var(--_progress-bar-text-color);
84
84
  }
85
85
 
86
86
  .progress-bar__text {
87
- font: var(--_text-font);
87
+ font: var(--_progress-bar-text-font);
88
88
  }
89
89
 
90
90
  .progress-bar__supporting-text {
91
- color: var(--_supporting-text-color);
92
- font: var(--_supporting-text-font);
91
+ color: var(--_progress-bar-supporting-text-color);
92
+ font: var(--_progress-bar-supporting-text-font);
93
93
  font-variant-numeric: tabular-nums;
94
94
  text-align: right;
95
95
  }
@@ -101,13 +101,13 @@ export const progressBarStyles = css `
101
101
  box-sizing: border-box;
102
102
  display: flex;
103
103
  position: relative;
104
- border-radius: var(--_corner-radius);
105
- box-shadow: inset 0 0 0 var(--_track-border-width) var(--_track-border-color);
106
- background-color: var(--_track-background-color);
104
+ border-radius: var(--_progress-bar-corner-radius);
105
+ box-shadow: inset 0 0 0 var(--_progress-bar-track-border-width) var(--_progress-bar-track-border-color);
106
+ background-color: var(--_progress-bar-track-background-color);
107
107
  width: 100%;
108
- height: var(--_height);
108
+ height: var(--_progress-bar-height);
109
109
  overflow: hidden;
110
- gap: var(--_segment-indicator-gap);
110
+ gap: var(--_progress-bar-segment-indicator-gap);
111
111
  container-type: inline-size;
112
112
  }
113
113
 
@@ -153,27 +153,27 @@ export const progressBarStyles = css `
153
153
  position: absolute;
154
154
  inset-block: 0;
155
155
  left: 0;
156
- border-radius: var(--_corner-radius);
157
- background: var(--_indeterminate-background-color);
158
- box-shadow: inset 0 0 0 var(--_indeterminate-border-width) var(--_indeterminate-border-color);
159
- width: var(--_indeterminate-bar-width);
156
+ border-radius: var(--_progress-bar-corner-radius);
157
+ background: var(--_progress-bar-indeterminate-background-color);
158
+ box-shadow: inset 0 0 0 var(--_progress-bar-indeterminate-border-width) var(--_progress-bar-indeterminate-border-color);
159
+ width: var(--_progress-bar-indeterminate-bar-width);
160
160
  transform: translateX(0);
161
161
  /* Duration scales with track width via the container queries below.
162
162
  Wider tracks need longer sweeps so the perceived velocity feels
163
163
  constant — a fast 800 ms cycle reads as frantic on a 1000 px bar
164
164
  and as too slow on a 200 px bar at the same wall-clock time. */
165
- animation: progress-bar-indeterminate var(--_indeterminate-duration) ease-in-out infinite alternate;
165
+ animation: progress-bar-indeterminate var(--_progress-bar-indeterminate-duration) ease-in-out infinite alternate;
166
166
  }
167
167
 
168
168
  @container (min-width: 401px) and (max-width: 720px) {
169
169
  .progress-bar__indeterminate-indicator::before {
170
- --_indeterminate-duration: 1000ms;
170
+ --_progress-bar-indeterminate-duration: 1000ms;
171
171
  }
172
172
  }
173
173
 
174
174
  @container (min-width: 721px) {
175
175
  .progress-bar__indeterminate-indicator::before {
176
- --_indeterminate-duration: 1200ms;
176
+ --_progress-bar-indeterminate-duration: 1200ms;
177
177
  }
178
178
  }
179
179
 
@@ -195,8 +195,8 @@ export const progressBarStyles = css `
195
195
  }
196
196
 
197
197
  @keyframes progress-bar-indeterminate-pulse {
198
- 0%, 100% { background-color: color-mix(in srgb, var(--_indeterminate-background-color) 20%, transparent); }
199
- 50% { background-color: color-mix(in srgb, var(--_indeterminate-background-color) 50%, transparent); }
198
+ 0%, 100% { background-color: color-mix(in srgb, var(--_progress-bar-indeterminate-background-color) 20%, transparent); }
199
+ 50% { background-color: color-mix(in srgb, var(--_progress-bar-indeterminate-background-color) 50%, transparent); }
200
200
  }
201
201
  }
202
202
 
@@ -215,19 +215,21 @@ export const progressBarSegmentIndicatorStyles = css `
215
215
  /* # Host */
216
216
 
217
217
  :host {
218
- --_width: var(--context-progress-bar-segment-indicator-width, 0%);
219
- --_min-width: var(--components-progress-bar-segment-indicator-min-width);
220
- --_background-color: var(--semantics-categories-accent-filled-background-color);
221
- --_border-color: var(--semantics-categories-accent-filled-highlight-border-color);
222
- --_border-width: var(--components-progress-bar-segment-indicator-border-width);
218
+ --_progress-bar-segment-indicator-width: var(--context-progress-bar-segment-indicator-width, 0%);
219
+ --_progress-bar-segment-indicator-min-width: var(--primitives-space-2);
220
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-accent-filled-background-color);
221
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-accent-filled-highlight-border-color);
222
+ --_progress-bar-segment-indicator-border-width: var(--primitives-border-width-thin);
223
+ --_progress-bar-segment-indicator-corner-radius: var(--primitives-corner-radius-full);
224
+ --_progress-bar-segment-indicator-distribution-corner-radius: var(--primitives-corner-radius-xxs);
223
225
 
224
226
  box-sizing: border-box;
225
227
  display: block;
226
228
  position: relative;
227
- box-shadow: inset 0 0 0 var(--_border-width) var(--_border-color);
228
- background-color: var(--_background-color);
229
- width: var(--_width);
230
- min-width: var(--_min-width);
229
+ box-shadow: inset 0 0 0 var(--_progress-bar-segment-indicator-border-width) var(--_progress-bar-segment-indicator-border-color);
230
+ background-color: var(--_progress-bar-segment-indicator-background-color);
231
+ width: var(--_progress-bar-segment-indicator-width);
232
+ min-width: var(--_progress-bar-segment-indicator-min-width);
231
233
  height: 100%;
232
234
  overflow: hidden;
233
235
  transition: width var(--primitives-transition-duration-medium) ease-out;
@@ -257,11 +259,11 @@ export const progressBarSegmentIndicatorStyles = css `
257
259
 
258
260
  @keyframes progress-bar-segment-indicator-grow {
259
261
  from { width: 0%; }
260
- to { width: var(--_width); }
262
+ to { width: var(--_progress-bar-segment-indicator-width); }
261
263
  }
262
264
 
263
265
  @keyframes progress-bar-segment-indicator-shrink {
264
- from { width: var(--_width); opacity: 1; }
266
+ from { width: var(--_progress-bar-segment-indicator-width); opacity: 1; }
265
267
  to { width: 0%; opacity: 0; }
266
268
  }
267
269
 
@@ -272,106 +274,106 @@ export const progressBarSegmentIndicatorStyles = css `
272
274
  data-variant is set by the parent. */
273
275
 
274
276
  :host([data-variant="progress"]) {
275
- border-radius: var(--components-progress-bar-corner-radius);
277
+ border-radius: var(--_progress-bar-segment-indicator-corner-radius);
276
278
  }
277
279
 
278
280
  :host([data-variant="distribution"]) {
279
- border-radius: var(--components-progress-bar-distribution-corner-radius);
281
+ border-radius: var(--_progress-bar-segment-indicator-distribution-corner-radius);
280
282
  }
281
283
 
282
284
 
283
285
  /* ## Variants — semantic */
284
286
 
285
287
  :host([color="neutral"]) {
286
- --_background-color: var(--semantics-categories-neutral-filled-background-color);
287
- --_border-color: var(--semantics-categories-neutral-filled-highlight-border-color);
288
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-neutral-filled-background-color);
289
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-neutral-filled-highlight-border-color);
288
290
  }
289
291
  :host([color="success"]) {
290
- --_background-color: var(--semantics-categories-success-filled-background-color);
291
- --_border-color: var(--semantics-categories-success-filled-highlight-border-color);
292
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-success-filled-background-color);
293
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-success-filled-highlight-border-color);
292
294
  }
293
295
  :host([color="warning"]) {
294
- --_background-color: var(--semantics-categories-warning-filled-background-color);
295
- --_border-color: var(--semantics-categories-warning-filled-highlight-border-color);
296
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-warning-filled-background-color);
297
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-warning-filled-highlight-border-color);
296
298
  }
297
299
  :host([color="critical"]) {
298
- --_background-color: var(--semantics-categories-critical-filled-background-color);
299
- --_border-color: var(--semantics-categories-critical-filled-highlight-border-color);
300
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-critical-filled-background-color);
301
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-critical-filled-highlight-border-color);
300
302
  }
301
303
 
302
304
 
303
305
  /* ## Variants — Rijkskleuren */
304
306
  :host([color="lintblauw"]) {
305
- --_background-color: var(--semantics-categories-lintblauw-filled-background-color);
306
- --_border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color);
307
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-lintblauw-filled-background-color);
308
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color);
307
309
  }
308
310
  :host([color="donkerblauw"]) {
309
- --_background-color: var(--semantics-categories-donkerblauw-filled-background-color);
310
- --_border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color);
311
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-donkerblauw-filled-background-color);
312
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color);
311
313
  }
312
314
  :host([color="hemelblauw"]) {
313
- --_background-color: var(--semantics-categories-hemelblauw-filled-background-color);
314
- --_border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color);
315
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-hemelblauw-filled-background-color);
316
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color);
315
317
  }
316
318
  :host([color="lichtblauw"]) {
317
- --_background-color: var(--semantics-categories-lichtblauw-filled-background-color);
318
- --_border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color);
319
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-lichtblauw-filled-background-color);
320
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color);
319
321
  }
320
322
  :host([color="paars"]) {
321
- --_background-color: var(--semantics-categories-paars-filled-background-color);
322
- --_border-color: var(--semantics-categories-paars-filled-highlight-border-color);
323
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-paars-filled-background-color);
324
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-paars-filled-highlight-border-color);
323
325
  }
324
326
  :host([color="violet"]) {
325
- --_background-color: var(--semantics-categories-violet-filled-background-color);
326
- --_border-color: var(--semantics-categories-violet-filled-highlight-border-color);
327
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-violet-filled-background-color);
328
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-violet-filled-highlight-border-color);
327
329
  }
328
330
  :host([color="robijnrood"]) {
329
- --_background-color: var(--semantics-categories-robijnrood-filled-background-color);
330
- --_border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color);
331
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-robijnrood-filled-background-color);
332
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color);
331
333
  }
332
334
  :host([color="roze"]) {
333
- --_background-color: var(--semantics-categories-roze-filled-background-color);
334
- --_border-color: var(--semantics-categories-roze-filled-highlight-border-color);
335
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-roze-filled-background-color);
336
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-roze-filled-highlight-border-color);
335
337
  }
336
338
  :host([color="rood"]) {
337
- --_background-color: var(--semantics-categories-rood-filled-background-color);
338
- --_border-color: var(--semantics-categories-rood-filled-highlight-border-color);
339
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-rood-filled-background-color);
340
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-rood-filled-highlight-border-color);
339
341
  }
340
342
  :host([color="oranje"]) {
341
- --_background-color: var(--semantics-categories-oranje-filled-background-color);
342
- --_border-color: var(--semantics-categories-oranje-filled-highlight-border-color);
343
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-oranje-filled-background-color);
344
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-oranje-filled-highlight-border-color);
343
345
  }
344
346
  :host([color="donkergeel"]) {
345
- --_background-color: var(--semantics-categories-donkergeel-filled-background-color);
346
- --_border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color);
347
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-donkergeel-filled-background-color);
348
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color);
347
349
  }
348
350
  :host([color="geel"]) {
349
- --_background-color: var(--semantics-categories-geel-filled-background-color);
350
- --_border-color: var(--semantics-categories-geel-filled-highlight-border-color);
351
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-geel-filled-background-color);
352
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-geel-filled-highlight-border-color);
351
353
  }
352
354
  :host([color="donkerbruin"]) {
353
- --_background-color: var(--semantics-categories-donkerbruin-filled-background-color);
354
- --_border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color);
355
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-donkerbruin-filled-background-color);
356
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color);
355
357
  }
356
358
  :host([color="bruin"]) {
357
- --_background-color: var(--semantics-categories-bruin-filled-background-color);
358
- --_border-color: var(--semantics-categories-bruin-filled-highlight-border-color);
359
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-bruin-filled-background-color);
360
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-bruin-filled-highlight-border-color);
359
361
  }
360
362
  :host([color="donkergroen"]) {
361
- --_background-color: var(--semantics-categories-donkergroen-filled-background-color);
362
- --_border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color);
363
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-donkergroen-filled-background-color);
364
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color);
363
365
  }
364
366
  :host([color="groen"]) {
365
- --_background-color: var(--semantics-categories-groen-filled-background-color);
366
- --_border-color: var(--semantics-categories-groen-filled-highlight-border-color);
367
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-groen-filled-background-color);
368
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-groen-filled-highlight-border-color);
367
369
  }
368
370
  :host([color="mosgroen"]) {
369
- --_background-color: var(--semantics-categories-mosgroen-filled-background-color);
370
- --_border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color);
371
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-mosgroen-filled-background-color);
372
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color);
371
373
  }
372
374
  :host([color="mintgroen"]) {
373
- --_background-color: var(--semantics-categories-mintgroen-filled-background-color);
374
- --_border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color);
375
+ --_progress-bar-segment-indicator-background-color: var(--semantics-categories-mintgroen-filled-background-color);
376
+ --_progress-bar-segment-indicator-border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color);
375
377
  }
376
378
 
377
379
 
package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BhC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsLrB,CAAC;AAGF,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkNnD,CAAC"}
1
+ {"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BhC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsLrB,CAAC;AAGF,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoNnD,CAAC"}