@nldd/design-system 0.8.95 → 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 (359) hide show
  1. package/README.md +6 -9
  2. package/custom-elements.json +288 -288
  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 +5 -0
  23. package/dist/components/actions/toolbar/toolbar.d.ts.map +1 -1
  24. package/dist/components/actions/toolbar/toolbar.js +28 -18
  25. package/dist/components/actions/toolbar/toolbar.js.map +1 -1
  26. package/dist/components/actions/toolbar/toolbar.styles.js +55 -55
  27. package/dist/components/components.js +4095 -4003
  28. package/dist/components/content/avatar/avatar.d.ts +1 -1
  29. package/dist/components/content/avatar/avatar.js +3 -3
  30. package/dist/components/content/avatar/avatar.js.map +1 -1
  31. package/dist/components/content/avatar/avatar.styles.js +39 -39
  32. package/dist/components/content/avatar-group/avatar-group.styles.js +36 -36
  33. package/dist/components/content/blockquote/blockquote.styles.js +14 -14
  34. package/dist/components/content/code-viewer/code-viewer.js +1 -1
  35. package/dist/components/content/code-viewer/code-viewer.styles.js +36 -36
  36. package/dist/components/content/icon/icon-aliases.d.ts.map +1 -1
  37. package/dist/components/content/icon/icon-aliases.js +16 -0
  38. package/dist/components/content/icon/icon-aliases.js.map +1 -1
  39. package/dist/components/content/icon/icon-gallery-status.d.ts.map +1 -1
  40. package/dist/components/content/icon/icon-gallery-status.js +14 -42
  41. package/dist/components/content/icon/icon-gallery-status.js.map +1 -1
  42. package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
  43. package/dist/components/content/icon/icon-registry.js +12 -0
  44. package/dist/components/content/icon/icon-registry.js.map +1 -1
  45. package/dist/components/content/icon/icon.js +2 -2
  46. package/dist/components/content/icon/icon.js.map +1 -1
  47. package/dist/components/content/icon/icon.styles.js +48 -48
  48. package/dist/components/content/identity/identity.styles.js +17 -17
  49. package/dist/components/content/image/image.js +3 -3
  50. package/dist/components/content/image/image.js.map +1 -1
  51. package/dist/components/content/image/image.styles.js +153 -153
  52. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map +1 -1
  53. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js +42 -40
  54. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js.map +1 -1
  55. package/dist/components/content/tag/tag.styles.js +95 -95
  56. package/dist/components/content/text/text.styles.js +23 -23
  57. package/dist/components/content/title/title.styles.js +38 -38
  58. package/dist/components/content/token/token.styles.js +4 -4
  59. package/dist/components/content/tooltip/tooltip.js +5 -5
  60. package/dist/components/content/tooltip/tooltip.js.map +1 -1
  61. package/dist/components/content/tooltip/tooltip.styles.d.ts.map +1 -1
  62. package/dist/components/content/tooltip/tooltip.styles.js +21 -18
  63. package/dist/components/content/tooltip/tooltip.styles.js.map +1 -1
  64. package/dist/components/forms/form-field/form-field.styles.js +5 -5
  65. package/dist/components/forms/validation-list/validation-list.styles.js +7 -7
  66. package/dist/components/{icon-Typdp4av.js → icon-DQHT2C7z.js} +70 -50
  67. package/dist/components/{icon-button-9mo3oIyL.js → icon-button-mevRsl4C.js} +278 -275
  68. package/dist/components/index.d.ts +2 -2
  69. package/dist/components/index.d.ts.map +1 -1
  70. package/dist/components/index.js +2 -2
  71. package/dist/components/index.js.map +1 -1
  72. package/dist/components/inputs/checkbox/checkbox.styles.d.ts.map +1 -1
  73. package/dist/components/inputs/checkbox/checkbox.styles.js +31 -16
  74. package/dist/components/inputs/checkbox/checkbox.styles.js.map +1 -1
  75. package/dist/components/inputs/code-editor/code-editor.js +2 -2
  76. package/dist/components/inputs/code-editor/code-editor.js.map +1 -1
  77. package/dist/components/inputs/code-editor/code-editor.styles.js +30 -30
  78. package/dist/components/inputs/combo-box/combo-box.js +2 -2
  79. package/dist/components/inputs/combo-box/combo-box.js.map +1 -1
  80. package/dist/components/inputs/combo-box/combo-box.styles.js +30 -30
  81. package/dist/components/inputs/date-field/date-field.js +4 -4
  82. package/dist/components/inputs/date-field/date-field.js.map +1 -1
  83. package/dist/components/inputs/date-field/date-field.styles.js +46 -46
  84. package/dist/components/inputs/date-picker/date-picker.js +3 -3
  85. package/dist/components/inputs/date-picker/date-picker.js.map +1 -1
  86. package/dist/components/inputs/date-picker/date-picker.styles.js +65 -65
  87. package/dist/components/inputs/dropdown/dropdown.js +2 -2
  88. package/dist/components/inputs/dropdown/dropdown.js.map +1 -1
  89. package/dist/components/inputs/dropdown/dropdown.styles.js +66 -66
  90. package/dist/components/inputs/file-field/file-field.styles.d.ts.map +1 -1
  91. package/dist/components/inputs/file-field/file-field.styles.js +33 -30
  92. package/dist/components/inputs/file-field/file-field.styles.js.map +1 -1
  93. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js +3 -3
  94. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js.map +1 -1
  95. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +30 -30
  96. package/dist/components/inputs/number-field/number-field.js +3 -3
  97. package/dist/components/inputs/number-field/number-field.js.map +1 -1
  98. package/dist/components/inputs/number-field/number-field.styles.js +18 -18
  99. package/dist/components/inputs/password-field/password-field.js +2 -2
  100. package/dist/components/inputs/password-field/password-field.js.map +1 -1
  101. package/dist/components/inputs/password-field/password-field.styles.js +37 -37
  102. package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map +1 -1
  103. package/dist/components/inputs/radio-button/radio-button.styles.js +29 -13
  104. package/dist/components/inputs/radio-button/radio-button.styles.js.map +1 -1
  105. package/dist/components/inputs/search-field/search-field.js +2 -2
  106. package/dist/components/inputs/search-field/search-field.js.map +1 -1
  107. package/dist/components/inputs/search-field/search-field.styles.js +30 -30
  108. package/dist/components/inputs/segmented-control/segmented-control.js +4 -4
  109. package/dist/components/inputs/segmented-control/segmented-control.js.map +1 -1
  110. package/dist/components/inputs/segmented-control/segmented-control.styles.js +108 -108
  111. package/dist/components/inputs/stepper/stepper.styles.js +10 -10
  112. package/dist/components/inputs/switch/switch.styles.d.ts.map +1 -1
  113. package/dist/components/inputs/switch/switch.styles.js +39 -31
  114. package/dist/components/inputs/switch/switch.styles.js.map +1 -1
  115. package/dist/components/inputs/text-editor/text-editor.js +2 -2
  116. package/dist/components/inputs/text-editor/text-editor.js.map +1 -1
  117. package/dist/components/inputs/text-editor/text-editor.markdown.js +2 -2
  118. package/dist/components/inputs/text-editor/text-editor.markdown.js.map +1 -1
  119. package/dist/components/inputs/text-editor/text-editor.mentions.js +7 -7
  120. package/dist/components/inputs/text-editor/text-editor.mentions.js.map +1 -1
  121. package/dist/components/inputs/text-editor/text-editor.styles.js +138 -138
  122. package/dist/components/inputs/text-field/text-field.js +2 -2
  123. package/dist/components/inputs/text-field/text-field.js.map +1 -1
  124. package/dist/components/inputs/text-field/text-field.styles.js +27 -27
  125. package/dist/components/inputs/time-field/time-field.js +4 -4
  126. package/dist/components/inputs/time-field/time-field.js.map +1 -1
  127. package/dist/components/inputs/time-field/time-field.styles.js +40 -40
  128. package/dist/components/inputs/time-picker/time-picker.js +4 -4
  129. package/dist/components/inputs/time-picker/time-picker.js.map +1 -1
  130. package/dist/components/inputs/time-picker/time-picker.styles.js +30 -30
  131. package/dist/components/inputs/toggle-button/toggle-button.d.ts +1 -1
  132. package/dist/components/inputs/toggle-button/toggle-button.js +1 -1
  133. package/dist/components/inputs/toggle-button/toggle-button.styles.js +145 -145
  134. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.d.ts.map +1 -1
  135. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js +7 -3
  136. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js.map +1 -1
  137. package/dist/components/inputs/token-field/token-field.styles.js +28 -28
  138. package/dist/components/layout/app-view/app-view.d.ts +1 -1
  139. package/dist/components/layout/app-view/app-view.js +1 -1
  140. package/dist/components/layout/app-view/app-view.styles.js +3 -3
  141. package/dist/components/layout/box/box.styles.js +13 -13
  142. package/dist/components/layout/card/card.styles.d.ts.map +1 -1
  143. package/dist/components/layout/card/card.styles.js +24 -21
  144. package/dist/components/layout/card/card.styles.js.map +1 -1
  145. package/dist/components/layout/collection/collection.js +6 -6
  146. package/dist/components/layout/collection/collection.js.map +1 -1
  147. package/dist/components/layout/collection/collection.styles.js +19 -19
  148. package/dist/components/layout/container/container.d.ts +2 -2
  149. package/dist/components/layout/container/container.js +30 -30
  150. package/dist/components/layout/container/container.js.map +1 -1
  151. package/dist/components/layout/container/container.styles.js +125 -125
  152. package/dist/components/layout/page/page.js +5 -5
  153. package/dist/components/layout/page/page.js.map +1 -1
  154. package/dist/components/layout/page/page.styles.js +20 -20
  155. package/dist/components/layout/page-footer/page-footer.js +4 -4
  156. package/dist/components/layout/page-footer/page-footer.js.map +1 -1
  157. package/dist/components/layout/page-footer/page-footer.styles.d.ts.map +1 -1
  158. package/dist/components/layout/page-footer/page-footer.styles.js +26 -26
  159. package/dist/components/layout/page-footer/page-footer.styles.js.map +1 -1
  160. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js +3 -3
  161. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js.map +1 -1
  162. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js +17 -17
  163. package/dist/components/layout/page-sections/hero/hero.js +6 -6
  164. package/dist/components/layout/page-sections/hero/hero.js.map +1 -1
  165. package/dist/components/layout/page-sections/hero/hero.styles.js +74 -74
  166. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.js +3 -3
  167. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.js.map +1 -1
  168. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js +17 -17
  169. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.js +3 -3
  170. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.js.map +1 -1
  171. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js +17 -17
  172. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js +5 -5
  173. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js.map +1 -1
  174. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts.map +1 -1
  175. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js +29 -27
  176. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js.map +1 -1
  177. package/dist/components/layout/page-sections/simple-section/simple-section.js +3 -3
  178. package/dist/components/layout/page-sections/simple-section/simple-section.js.map +1 -1
  179. package/dist/components/layout/page-sections/simple-section/simple-section.styles.js +17 -17
  180. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.js +3 -3
  181. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.js.map +1 -1
  182. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js +17 -17
  183. package/dist/components/layout/popover/popover.d.ts +1 -1
  184. package/dist/components/layout/popover/popover.js +5 -5
  185. package/dist/components/layout/popover/popover.js.map +1 -1
  186. package/dist/components/layout/popover/popover.styles.d.ts.map +1 -1
  187. package/dist/components/layout/popover/popover.styles.js +4 -3
  188. package/dist/components/layout/popover/popover.styles.js.map +1 -1
  189. package/dist/components/layout/sheet/sheet.js +4 -4
  190. package/dist/components/layout/sheet/sheet.js.map +1 -1
  191. package/dist/components/layout/sheet/sheet.styles.js +8 -8
  192. package/dist/components/layout/spacer/spacer.styles.js +76 -76
  193. package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js +5 -5
  194. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js +4 -4
  195. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js.map +1 -1
  196. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js +12 -12
  197. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.js +1 -1
  198. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.js.map +1 -1
  199. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js +6 -6
  200. package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js +4 -4
  201. package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js +4 -4
  202. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.js +1 -1
  203. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.js.map +1 -1
  204. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js +6 -6
  205. package/dist/components/layout/window/window.d.ts +1 -1
  206. package/dist/components/layout/window/window.js +1 -1
  207. package/dist/components/layout/window/window.styles.d.ts.map +1 -1
  208. package/dist/components/layout/window/window.styles.js +3 -1
  209. package/dist/components/layout/window/window.styles.js.map +1 -1
  210. package/dist/components/lists-and-tables/cells/cell/cell.js +8 -8
  211. package/dist/components/lists-and-tables/cells/cell/cell.js.map +1 -1
  212. package/dist/components/lists-and-tables/cells/cell/cell.styles.js +9 -9
  213. package/dist/components/lists-and-tables/cells/description-cell/description-cell.js +8 -8
  214. package/dist/components/lists-and-tables/cells/description-cell/description-cell.js.map +1 -1
  215. package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js +10 -10
  216. package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.js +9 -9
  217. package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.js +14 -14
  218. package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.js +20 -20
  219. package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.d.ts → step-cell/step-cell.d.ts} +18 -17
  220. package/dist/components/lists-and-tables/cells/step-cell/step-cell.d.ts.map +1 -0
  221. package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.js → step-cell/step-cell.js} +33 -32
  222. package/dist/components/lists-and-tables/cells/step-cell/step-cell.js.map +1 -0
  223. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.d.ts +2 -0
  224. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.d.ts.map +1 -0
  225. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.js +184 -0
  226. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.js.map +1 -0
  227. package/dist/components/lists-and-tables/cells/step-cell/step-cell.template.d.ts +4 -0
  228. package/dist/components/lists-and-tables/cells/step-cell/step-cell.template.d.ts.map +1 -0
  229. package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.template.js → step-cell/step-cell.template.js} +10 -10
  230. package/dist/components/lists-and-tables/cells/step-cell/step-cell.template.js.map +1 -0
  231. package/dist/components/lists-and-tables/cells/text-cell/text-cell.js +9 -9
  232. package/dist/components/lists-and-tables/cells/text-cell/text-cell.js.map +1 -1
  233. package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js +37 -37
  234. package/dist/components/lists-and-tables/cells/title-cell/title-cell.js +8 -8
  235. package/dist/components/lists-and-tables/cells/title-cell/title-cell.js.map +1 -1
  236. package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js +37 -37
  237. package/dist/components/lists-and-tables/list/list.js +7 -7
  238. package/dist/components/lists-and-tables/list/list.js.map +1 -1
  239. package/dist/components/lists-and-tables/list/list.styles.d.ts.map +1 -1
  240. package/dist/components/lists-and-tables/list/list.styles.js +49 -48
  241. package/dist/components/lists-and-tables/list/list.styles.js.map +1 -1
  242. package/dist/components/lists-and-tables/list-item/list-item.d.ts +1 -1
  243. package/dist/components/lists-and-tables/list-item/list-item.js +9 -9
  244. package/dist/components/lists-and-tables/list-item/list-item.js.map +1 -1
  245. package/dist/components/lists-and-tables/list-item/list-item.styles.d.ts.map +1 -1
  246. package/dist/components/lists-and-tables/list-item/list-item.styles.js +69 -67
  247. package/dist/components/lists-and-tables/list-item/list-item.styles.js.map +1 -1
  248. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.styles.js +30 -30
  249. package/dist/components/lists-and-tables/table/table.js +2 -2
  250. package/dist/components/lists-and-tables/table/table.js.map +1 -1
  251. package/dist/components/lists-and-tables/table/table.styles.js +21 -21
  252. package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +3 -3
  253. package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js.map +1 -1
  254. package/dist/components/navigation/document-tab-bar/document-tab-bar.d.ts +1 -1
  255. package/dist/components/navigation/document-tab-bar/document-tab-bar.js +12 -12
  256. package/dist/components/navigation/document-tab-bar/document-tab-bar.js.map +1 -1
  257. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map +1 -1
  258. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +51 -49
  259. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
  260. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map +1 -1
  261. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +23 -17
  262. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map +1 -1
  263. package/dist/components/navigation/pagination/pagination.styles.js +29 -29
  264. package/dist/components/navigation/skip-link/skip-link.styles.js +8 -8
  265. package/dist/components/navigation/tab-bar/tab-bar.styles.js +53 -53
  266. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js +3 -3
  267. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js.map +1 -1
  268. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
  269. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +35 -32
  270. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
  271. package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map +1 -1
  272. package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +3 -1
  273. package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map +1 -1
  274. package/dist/components/{shadow-resets-aG-rgyNQ.js → shadow-resets-CPa58rmc.js} +1 -1
  275. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js +46 -46
  276. package/dist/components/status-and-feedback/badge/badge.js +2 -2
  277. package/dist/components/status-and-feedback/badge/badge.js.map +1 -1
  278. package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
  279. package/dist/components/status-and-feedback/badge/badge.styles.js +120 -119
  280. package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
  281. package/dist/components/status-and-feedback/banner/banner.styles.js +49 -49
  282. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +19 -19
  283. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js +12 -12
  284. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js.map +1 -1
  285. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js +58 -58
  286. package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +6 -6
  287. package/dist/components/status-and-feedback/notification/notification.styles.d.ts.map +1 -1
  288. package/dist/components/status-and-feedback/notification/notification.styles.js +45 -39
  289. package/dist/components/status-and-feedback/notification/notification.styles.js.map +1 -1
  290. package/dist/components/status-and-feedback/notification/notifications-area.js +2 -2
  291. package/dist/components/status-and-feedback/notification/notifications-area.js.map +1 -1
  292. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.d.ts.map +1 -1
  293. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js +121 -119
  294. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map +1 -1
  295. package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js +58 -58
  296. package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js +1 -1
  297. package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js.map +1 -1
  298. package/dist/components/status-and-feedback/status-bar/status-bar.styles.js +36 -36
  299. package/dist/components/status-and-feedback/{step-indicator/step-indicator.d.ts → step-bar/step-bar.d.ts} +32 -32
  300. package/dist/components/status-and-feedback/step-bar/step-bar.d.ts.map +1 -0
  301. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.d.ts +9 -0
  302. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.d.ts.map +1 -0
  303. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.js +8 -0
  304. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.js.map +1 -0
  305. package/dist/components/status-and-feedback/{step-indicator/step-indicator.js → step-bar/step-bar.js} +46 -46
  306. package/dist/components/status-and-feedback/step-bar/step-bar.js.map +1 -0
  307. package/dist/components/status-and-feedback/step-bar/step-bar.styles.d.ts +3 -0
  308. package/dist/components/status-and-feedback/step-bar/step-bar.styles.d.ts.map +1 -0
  309. package/dist/components/status-and-feedback/step-bar/step-bar.styles.js +294 -0
  310. package/dist/components/status-and-feedback/step-bar/step-bar.styles.js.map +1 -0
  311. package/dist/components/status-and-feedback/step-bar/step-bar.template.d.ts +5 -0
  312. package/dist/components/status-and-feedback/step-bar/step-bar.template.d.ts.map +1 -0
  313. package/dist/components/status-and-feedback/step-bar/step-bar.template.js +69 -0
  314. package/dist/components/status-and-feedback/step-bar/step-bar.template.js.map +1 -0
  315. package/dist/css/rich-text.css +35 -32
  316. package/dist/css/variables.css +54 -410
  317. package/dist/nldd.min.js +4154 -4035
  318. package/dist/translations/en-US.js +5 -5
  319. package/dist/translations/en-US.js.map +1 -1
  320. package/dist/translations/fy.js +5 -5
  321. package/dist/translations/fy.js.map +1 -1
  322. package/dist/translations/nl.generated.d.ts +5 -5
  323. package/dist/translations/nl.generated.js +2 -2
  324. package/dist/translations/nl.generated.js.map +1 -1
  325. package/dist/translations/pap-AW.js +5 -5
  326. package/dist/translations/pap-AW.js.map +1 -1
  327. package/dist/translations/pap-CW.js +5 -5
  328. package/dist/translations/pap-CW.js.map +1 -1
  329. package/dist/types/vue.d.ts +59 -59
  330. package/dist/utilities/codemirror/theme.js +17 -17
  331. package/dist/utilities/codemirror/theme.js.map +1 -1
  332. package/dist/utilities/page-section-mixin.js +3 -3
  333. package/dist/utilities/page-section-mixin.js.map +1 -1
  334. package/dist/utilities/spacing-scale.d.ts +1 -1
  335. package/dist/utilities/spacing-scale.js +1 -1
  336. package/package.json +10 -8
  337. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.d.ts.map +0 -1
  338. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.js.map +0 -1
  339. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts +0 -2
  340. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts.map +0 -1
  341. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js +0 -184
  342. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js.map +0 -1
  343. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.d.ts +0 -4
  344. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.d.ts.map +0 -1
  345. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.js.map +0 -1
  346. package/dist/components/status-and-feedback/step-indicator/step-indicator.d.ts.map +0 -1
  347. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.d.ts +0 -9
  348. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.d.ts.map +0 -1
  349. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.js +0 -8
  350. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.js.map +0 -1
  351. package/dist/components/status-and-feedback/step-indicator/step-indicator.js.map +0 -1
  352. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.d.ts +0 -3
  353. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.d.ts.map +0 -1
  354. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js +0 -294
  355. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js.map +0 -1
  356. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.d.ts +0 -5
  357. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.d.ts.map +0 -1
  358. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js +0 -69
  359. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js.map +0 -1
package/dist/css/variables.css CHANGED
@@ -939,6 +939,7 @@
939
939
  --semantics-brand-ribbon-sm-width: var(--primitives-space-40);
940
940
  --semantics-brand-ribbon-md-width: var(--primitives-space-44);
941
941
  --semantics-brand-ribbon-lg-width: var(--primitives-space-48);
942
+ --semantics-brand-ribbon-color: var(--primitives-color-reference-lintblauw);
942
943
 
943
944
  /* ## Dividers */
944
945
 
@@ -1705,416 +1706,59 @@
1705
1706
  --semantics-focus-ring-outline-offset: var(--primitives-border-width-regular);
1706
1707
  --semantics-focus-ring-box-shadow: 0 0 0 calc(var(--primitives-border-width-regular) * 3) var(--semantics-surfaces-base-background-color);
1707
1708
 
1708
- /* # Components */
1709
-
1710
- /* ## Avatar */
1711
-
1712
- --components-avatar-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-300));
1713
- --components-avatar-content-color: var(--primitives-color-neutral-800);
1714
- --components-avatar-corner-radius: var(--primitives-corner-radius-full);
1715
- --components-avatar-organization-corner-radius: var(--primitives-corner-radius-md);
1716
-
1717
- /* ## Badge */
1718
-
1719
- --components-badge-corner-radius: var(--primitives-corner-radius-full);
1720
- --components-badge-border-width: var(--primitives-border-width-thin);
1721
-
1722
- /* ## Banner */
1723
-
1724
- --components-banner-corner-radius: var(--semantics-surfaces-corner-radius);
1725
- --components-banner-md-padding: var(--primitives-space-12);
1726
- --components-banner-md-icon-size: var(--primitives-space-32);
1727
- --components-banner-sm-padding: var(--primitives-space-8);
1728
- --components-banner-sm-icon-size: var(--primitives-space-24);
1729
- --components-banner-content-color: var(--semantics-content-color);
1730
-
1731
- /* ## Box */
1732
-
1733
- --components-box-background-color: var(--semantics-surfaces-tinted-background-color);
1734
- --components-box-base-background-color: var(--semantics-surfaces-base-background-color);
1735
- --components-box-border-width: var(--semantics-surfaces-border-width);
1736
- --components-box-border-color: var(--semantics-surfaces-tinted-border-color);
1737
- --components-box-base-border-color: var(--semantics-surfaces-base-border-color);
1738
- --components-box-critical-background-color: var(--semantics-categories-critical-tinted-background-color);
1739
- --components-box-critical-border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
1740
- --components-box-padding: var(--primitives-space-16);
1741
-
1742
- /* ## Button group */
1743
-
1744
- --components-button-group-sm-gap: var(--primitives-space-6);
1745
- --components-button-group-md-gap: var(--primitives-space-8);
1746
-
1747
- /* ## Card */
1748
-
1749
- --components-card-background-color: var(--semantics-surfaces-base-background-color);
1750
- --components-card-tinted-background-color: var(--semantics-surfaces-tinted-background-color);
1751
- --components-card-corner-radius: var(--semantics-surfaces-corner-radius);
1752
- --components-card-box-shadow: none;
1753
- --components-card-highlight-border-width: var(--semantics-surfaces-border-width);
1754
- --components-card-highlight-border-color: var(--semantics-surfaces-base-border-color);
1755
- --components-card-tinted-highlight-border-color: var(--semantics-surfaces-tinted-border-color);
1756
- --components-card-is-hovered-background-color: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-150));
1757
- --components-card-is-hovered-highlight-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
1758
- --components-card-is-active-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
1759
- --components-card-is-active-highlight-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
1760
- --components-card-tinted-is-hovered-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-100));
1761
- --components-card-tinted-is-hovered-highlight-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
1762
- --components-card-tinted-is-active-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-150));
1763
- --components-card-tinted-is-active-highlight-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
1764
-
1765
- /* ## Checkbox */
1766
-
1767
- --components-checkbox-border-width: var(--primitives-border-width-regular);
1768
- --components-checkbox-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
1769
- --components-checkbox-background-color: var(--semantics-surfaces-base-background-color);
1770
- --components-checkbox-is-hovered-border-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-700));
1771
- --components-checkbox-is-active-border-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-750));
1772
- --components-checkbox-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
1773
- --components-checkbox-is-selected-border-color: var(--semantics-controls-is-highlighted-indicator-color);
1774
- --components-checkbox-is-selected-icon-color: var(--semantics-controls-is-highlighted-contrast-color);
1775
- --components-checkbox-is-selected-is-hovered-background-color: var(--semantics-controls-is-highlighted-is-hovered-indicator-color);
1776
- --components-checkbox-is-selected-is-hovered-border-color: var(--semantics-controls-is-highlighted-is-hovered-indicator-color);
1777
- --components-checkbox-is-selected-is-hovered-icon-color: var(--semantics-controls-is-highlighted-is-hovered-contrast-color);
1778
- --components-checkbox-is-selected-is-active-background-color: var(--semantics-controls-is-highlighted-is-active-indicator-color);
1779
- --components-checkbox-is-selected-is-active-border-color: var(--semantics-controls-is-highlighted-is-active-indicator-color);
1780
- --components-checkbox-is-selected-is-active-icon-color: var(--semantics-controls-is-highlighted-is-active-contrast-color);
1781
-
1782
- /* ## Collection */
1783
-
1784
- --components-collection-sm-gap: var(--primitives-space-16);
1785
- --components-collection-md-gap: var(--primitives-space-24);
1786
- --components-collection-lg-gap: var(--primitives-space-24);
1787
-
1788
- /* ## Document tab bar */
1789
-
1790
- --components-document-tab-bar-tab-title-font: var(--primitives-font-body-sm-medium-flat);
1791
-
1792
- /* ## File field */
1793
-
1794
- --components-file-field-background-color: var(--semantics-surfaces-tinted-background-color);
1795
- --components-file-field-highlight-border-width: var(--semantics-surfaces-border-width);
1796
- --components-file-field-highlight-border-color: var(--semantics-surfaces-tinted-border-color);
1797
- --components-file-field-value-color: var(--semantics-content-color);
1798
- --components-file-field-is-empty-value-color: var(--semantics-content-secondary-color);
1799
-
1800
- /* ## Icon — rijkskleuren
1801
-
1802
- Shade per rijkskleur picked to keep ≥400 shade distance from the
1803
- surface it's painted on (default = neutral-0 / dark mode = neutral-100;
1804
- tinted = neutral-25 / neutral-75). Within that contrast budget the
1805
- shade closest to --primitives-color-reference-X is preferred. Middle
1806
- shades (500) are self-mirroring so a single ref is used. */
1807
-
1808
- --components-icon-color-lintblauw-color: light-dark(var(--primitives-color-lintblauw-750), var(--primitives-color-lintblauw-500));
1809
- --components-icon-color-donkerblauw-color: light-dark(var(--primitives-color-donkerblauw-600), var(--primitives-color-donkerblauw-500));
1810
- --components-icon-color-hemelblauw-color: var(--primitives-color-hemelblauw-500);
1811
- --components-icon-color-lichtblauw-color: light-dark(var(--primitives-color-lichtblauw-450), var(--primitives-color-lichtblauw-800));
1812
- --components-icon-color-paars-color: light-dark(var(--primitives-color-paars-850), var(--primitives-color-paars-500));
1813
- --components-icon-color-violet-color: light-dark(var(--primitives-color-violet-650), var(--primitives-color-violet-500));
1814
- --components-icon-color-robijnrood-color: light-dark(var(--primitives-color-robijnrood-550), var(--primitives-color-robijnrood-500));
1815
- --components-icon-color-roze-color: light-dark(var(--primitives-color-roze-450), var(--primitives-color-roze-750));
1816
- --components-icon-color-rood-color: light-dark(var(--primitives-color-rood-550), var(--primitives-color-rood-500));
1817
- --components-icon-color-oranje-color: light-dark(var(--primitives-color-oranje-450), var(--primitives-color-oranje-600));
1818
- --components-icon-color-donkergeel-color: light-dark(var(--primitives-color-donkergeel-450), var(--primitives-color-donkergeel-800));
1819
- --components-icon-color-geel-color: light-dark(var(--primitives-color-geel-450), var(--primitives-color-geel-900));
1820
- --components-icon-color-donkerbruin-color: light-dark(var(--primitives-color-donkerbruin-750), var(--primitives-color-donkerbruin-500));
1821
- --components-icon-color-bruin-color: var(--primitives-color-bruin-500);
1822
- --components-icon-color-donkergroen-color: light-dark(var(--primitives-color-donkergroen-700), var(--primitives-color-donkergroen-500));
1823
- --components-icon-color-groen-color: var(--primitives-color-groen-500);
1824
- --components-icon-color-mosgroen-color: var(--primitives-color-mosgroen-500);
1825
- --components-icon-color-mintgroen-color: light-dark(var(--primitives-color-mintgroen-450), var(--primitives-color-mintgroen-800));
1826
-
1827
- /* ## Image */
1828
-
1829
- --components-image-corner-radius: var(--primitives-corner-radius-none);
1830
- --components-image-rounded-corner-radius: var(--semantics-controls-md-corner-radius);
1831
- --components-image-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-50));
1832
- --components-image-error-text-color: var(--semantics-content-color);
1833
- --components-image-error-font: var(--primitives-font-body-sm-regular-snug);
1834
- --components-image-caption-gap: var(--primitives-space-4);
1835
- --components-image-caption-color: var(--semantics-content-color);
1836
- --components-image-caption-font: var(--primitives-font-body-sm-regular-tight);
1837
- --components-image-credit-color: var(--semantics-content-secondary-color);
1838
- --components-image-credit-font: var(--primitives-font-body-sm-regular-tight);
1839
-
1840
- /* ## Inline dialog */
1841
-
1842
- --components-inline-dialog-icon-color: var(--semantics-content-color);
1843
- --components-inline-dialog-icon-secondary-color: var(--semantics-content-secondary-color);
1844
- --components-inline-dialog-icon-accent-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
1845
- --components-inline-dialog-icon-critical-color: var(--primitives-color-critical-500);
1846
- --components-inline-dialog-icon-warning-color: light-dark(var(--primitives-color-warning-350), var(--primitives-color-warning-650));
1847
- --components-inline-dialog-icon-success-color: var(--primitives-color-success-500);
1848
-
1849
- /* ## Notification */
1850
-
1851
- --components-notification-background-color: var(--semantics-surfaces-base-background-color);
1852
- --components-notification-corner-radius: var(--semantics-overlays-corner-radius);
1853
- --components-notification-box-shadow: var(--semantics-overlays-box-shadow);
1854
- --components-notification-icon-success-color: var(--primitives-color-success-500);
1855
- --components-notification-icon-neutral-color: var(--semantics-content-secondary-color);
1856
- --components-notification-icon-accent-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-350));
1857
- --components-notification-icon-warning-color: light-dark(var(--primitives-color-warning-350), var(--primitives-color-warning-250));
1858
- --components-notification-icon-critical-color: var(--primitives-color-critical-500);
1859
- --components-notification-text-font: var(--primitives-font-body-md-bold-tight);
1860
- --components-notification-supporting-text-font: var(--primitives-font-body-sm-regular-tight);
1861
- --components-notification-supporting-text-color: var(--semantics-content-secondary-color);
1862
-
1863
- /* ## Keyboard shortcut */
1864
-
1865
- --components-keyboard-shortcut-sm-size: var(--primitives-space-20);
1866
- --components-keyboard-shortcut-md-size: var(--primitives-space-24);
1867
- --components-keyboard-shortcut-background-color: var(--semantics-surfaces-tinted-background-color);
1868
- --components-keyboard-shortcut-content-color: var(--semantics-content-color);
1869
- --components-keyboard-shortcut-border-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-250));
1870
- --components-keyboard-shortcut-border-width: var(--primitives-border-width-thin);
1871
- --components-keyboard-shortcut-corner-radius: var(--primitives-corner-radius-xs);
1872
- --components-keyboard-shortcut-separator-color: var(--semantics-content-secondary-color);
1873
-
1874
- /* ## Code
1875
-
1876
- Token colors used by nldd-code's Prism syntax highlighting.
1877
- Solarized-inspired, mapped to descriptive DS palettes. Consumers
1878
- can override per-instance on `nldd-code` to swap the theme. */
1879
-
1880
- --components-code-viewer-token-comment-color: var(--semantics-content-secondary-color);
1881
- --components-code-viewer-token-punctuation-color: var(--semantics-content-color);
1882
- --components-code-viewer-token-keyword-color: var(--primitives-color-donkergeel-650);
1883
- --components-code-viewer-token-string-color: var(--primitives-color-groen-650);
1884
- --components-code-viewer-token-number-color: var(--primitives-color-oranje-650);
1885
- --components-code-viewer-token-boolean-color: var(--primitives-color-oranje-650);
1886
- --components-code-viewer-token-null-color: var(--primitives-color-oranje-650);
1887
- --components-code-viewer-token-function-color: var(--primitives-color-lintblauw-650);
1888
- --components-code-viewer-token-class-color: var(--primitives-color-donkergeel-650);
1889
- --components-code-viewer-token-builtin-color: var(--primitives-color-donkergeel-650);
1890
- --components-code-viewer-token-tag-color: var(--primitives-color-groen-650);
1891
- --components-code-viewer-token-attr-name-color: var(--primitives-color-lintblauw-650);
1892
- --components-code-viewer-token-attr-value-color: var(--primitives-color-mintgroen-650);
1893
- --components-code-viewer-token-property-color: var(--primitives-color-lintblauw-650);
1894
- --components-code-viewer-token-selector-color: var(--primitives-color-donkergeel-650);
1895
- --components-code-viewer-token-atrule-color: var(--primitives-color-groen-650);
1896
- --components-code-viewer-token-regex-color: var(--primitives-color-rood-650);
1897
- --components-code-viewer-token-url-color: var(--primitives-color-mintgroen-650);
1898
- --components-code-viewer-token-operator-color: var(--primitives-color-groen-650);
1899
- --components-code-viewer-token-constant-color: var(--primitives-color-oranje-650);
1900
- --components-code-viewer-token-deleted-color: var(--primitives-color-rood-650);
1901
- --components-code-viewer-token-inserted-color: var(--primitives-color-groen-650);
1902
- --components-code-viewer-token-important-color: var(--primitives-color-rood-650);
1903
- --components-code-viewer-token-symbol-color: var(--primitives-color-violet-650);
1904
- --components-code-viewer-token-entity-color: var(--primitives-color-paars-650);
1905
- --components-code-viewer-token-variable-color: var(--primitives-color-lintblauw-650);
1906
-
1907
- /* ## List */
1908
-
1909
- --components-list-drag-placeholder-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
1910
-
1911
- --components-list-item-sm-padding-block: var(--primitives-space-6);
1912
- --components-list-item-md-padding-block: var(--primitives-space-10);
1913
- --components-list-item-indicator-corner-radius: var(--primitives-corner-radius-sm);
1914
- --components-list-item-indicator-inline-inset: var(--primitives-space-8);
1915
- --components-list-item-is-hovered-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
1916
- --components-list-item-is-hovered-content-color: var(--primitives-color-neutral-1000);
1917
- --components-list-item-is-active-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
1918
- --components-list-item-is-active-content-color: var(--primitives-color-neutral-1000);
1919
- --components-list-item-is-expanded-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
1920
- --components-list-item-is-expanded-content-color: var(--primitives-color-neutral-1000);
1921
- --components-list-item-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
1922
- --components-list-item-is-expanded-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
1923
- --components-list-item-is-selected-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
1924
- --components-list-item-is-selected-content-color: var(--primitives-color-neutral-1000);
1925
- --components-list-item-is-selected-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
1926
- --components-list-item-is-selected-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
1927
- --components-list-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
1928
- --components-list-item-is-highlighted-is-hovered-background-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
1929
- --components-list-item-is-highlighted-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
1930
- --components-list-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
1931
-
1932
- /* ## Menu */
1933
-
1934
- --components-menu-box-shadow: var(--primitives-box-shadows-level-5);
1935
- --components-menu-item-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
1936
- --components-menu-item-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
1937
- --components-menu-item-is-expanded-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
1938
- --components-menu-item-is-expanded-content-color: var(--primitives-color-neutral-1000);
1939
- --components-menu-item-is-destructive-content-color: var(--semantics-content-critical-color);
1940
- --components-menu-item-is-destructive-is-highlighted-background-color: light-dark(var(--primitives-color-critical-600), var(--primitives-color-critical-650));
1941
- --components-menu-item-is-destructive-is-highlighted-content-color: var(--primitives-color-neutral-0);
1942
-
1943
- /* ## Menu bar */
1944
-
1945
- --components-menu-bar-item-font: var(--primitives-font-body-md-medium-flat);
1946
- --components-menu-bar-item-inline-padding: var(--primitives-space-8);
1947
- --components-menu-bar-item-content-color: var(--primitives-color-accent-750);
1948
- --components-menu-bar-item-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-200));
1949
- --components-menu-bar-item-is-expanded-indicator-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-250));
1950
- --components-menu-bar-item-is-expanded-is-hovered-indicator-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-300));
1951
- --components-menu-bar-item-is-current-indicator-background-color: var(--semantics-controls-is-highlighted-indicator-color);
1952
- --components-menu-bar-item-is-current-indicator-height: var(--primitives-space-4);
1953
-
1954
- /* ## Page footer */
1955
-
1956
- --components-page-footer-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-50));
1957
- --components-page-footer-divider-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-150));
1958
- --components-page-footer-legal-bar-item-color: var(--semantics-content-secondary-color);
1959
-
1960
- /* ## Popover */
1961
-
1962
- --components-popover-default-width: var(--primitives-area-320);
1963
-
1964
- /* ## Progress bar */
1965
-
1966
- --components-progress-bar-corner-radius: var(--primitives-corner-radius-full);
1967
- --components-progress-bar-distribution-corner-radius: var(--primitives-corner-radius-xxs);
1968
- --components-progress-bar-track-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
1969
- --components-progress-bar-track-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
1970
- --components-progress-bar-track-border-width: var(--primitives-border-width-thin);
1971
- --components-progress-bar-progress-segment-indicator-gap: var(--primitives-space-1);
1972
- --components-progress-bar-distribution-segment-indicator-gap: var(--primitives-space-2);
1973
- --components-progress-bar-segment-indicator-min-width: var(--primitives-space-2);
1974
- --components-progress-bar-sm-height: var(--primitives-space-4);
1975
- --components-progress-bar-md-height: var(--primitives-space-8);
1976
- --components-progress-bar-lg-height: var(--primitives-space-16);
1977
- --components-progress-bar-caption-gap: var(--primitives-space-6);
1978
- --components-progress-bar-text-color: var(--semantics-content-color);
1979
- --components-progress-bar-supporting-text-color: var(--semantics-content-secondary-color);
1980
- --components-progress-bar-text-font: var(--primitives-font-body-md-regular-tight);
1981
- --components-progress-bar-supporting-text-font: var(--primitives-font-body-md-regular-tight);
1982
-
1983
- --components-progress-bar-segment-indicator-border-width: var(--primitives-border-width-thin);
1984
-
1985
- /* ## Progress circle */
1986
-
1987
- --components-progress-circle-track-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
1988
- --components-progress-circle-track-border-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
1989
- --components-progress-circle-caption-gap: var(--primitives-space-8);
1990
- --components-progress-circle-text-color: var(--semantics-content-color);
1991
- --components-progress-circle-text-font: var(--primitives-font-body-md-regular-tight);
1992
- --components-progress-circle-supporting-text-color: var(--semantics-content-secondary-color);
1993
- --components-progress-circle-supporting-text-font: var(--primitives-font-body-sm-regular-tight);
1994
- /* Segment gap is intentionally hard-coded in progress-circle.ts as 1px /
1995
- 2px (visual gap) and scaled per render into SVG user units, so that the
1996
- gap stays a consistent pixel width across every host size. Exposing it
1997
- as a degree-based token (as it used to be) made the gap drift visually
1998
- on small / large rings; the constants moved into TS and the tokens
1999
- were dropped. */
2000
-
2001
- /* ## Radio button */
2002
-
2003
- --components-radio-button-border-width: var(--primitives-border-width-regular);
2004
- --components-radio-button-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
2005
- --components-radio-button-background-color: var(--semantics-surfaces-base-background-color);
2006
- --components-radio-button-is-hovered-border-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-700));
2007
- --components-radio-button-is-active-border-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-750));
2008
- --components-radio-button-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
2009
- --components-radio-button-is-selected-border-color: var(--semantics-controls-is-highlighted-indicator-color);
2010
- --components-radio-button-is-selected-inner-shape-border-width: var(--primitives-border-width-regular);
2011
- --components-radio-button-is-selected-inner-shape-border-color: var(--semantics-controls-is-highlighted-contrast-color);
2012
- --components-radio-button-is-selected-is-hovered-background-color: var(--semantics-controls-is-highlighted-is-hovered-indicator-color);
2013
- --components-radio-button-is-selected-is-hovered-border-color: var(--semantics-controls-is-highlighted-is-hovered-indicator-color);
2014
- --components-radio-button-is-selected-is-hovered-inner-shape-border-color: var(--semantics-controls-is-highlighted-is-hovered-contrast-color);
2015
- --components-radio-button-is-selected-is-active-background-color: var(--semantics-controls-is-highlighted-is-active-indicator-color);
2016
- --components-radio-button-is-selected-is-active-border-color: var(--semantics-controls-is-highlighted-is-active-indicator-color);
2017
- --components-radio-button-is-selected-is-active-inner-shape-border-color: var(--semantics-controls-is-highlighted-is-active-contrast-color);
2018
-
2019
- /* ## Rich text */
2020
-
2021
- --components-rich-text-grid-size: calc(var(--primitives-font-size-100) * var(--primitives-line-height-snug));
2022
- --components-rich-text-main-max-width: var(--primitives-area-720);
2023
- --components-rich-text-wide-max-width: var(--primitives-area-800);
2024
- --components-rich-text-centered-wide-max-width: var(--primitives-area-960);
2025
- --components-rich-text-spacing-flat: var(--primitives-space-0);
2026
- --components-rich-text-spacing-tight: calc(var(--components-rich-text-grid-size) / 4);
2027
- --components-rich-text-spacing-snug: calc(var(--components-rich-text-grid-size) / 2);
2028
- --components-rich-text-spacing-loose: var(--components-rich-text-grid-size);
2029
-
2030
- /* ## Sidebar Section */
2031
-
2032
- --components-sidebar-section-sidebar-box-background-color: var(--semantics-surfaces-tinted-background-color);
2033
- --components-sidebar-section-sidebar-box-highlight-border-color: var(--semantics-surfaces-tinted-border-color);
2034
-
2035
- /* ## Status bar */
2036
-
2037
- --components-status-bar-height: var(--semantics-controls-xs-min-size);
2038
-
2039
- /* Interaction states darken the filled background by one palette step on
2040
- hover and two on active, in both light and dark mode — so every variant
2041
- deepens consistently instead of borrowing the decorative highlight-border
2042
- color (which is not always darker than its own fill). */
2043
- --components-status-bar-neutral-background-color: var(--semantics-categories-neutral-filled-background-color);
2044
- --components-status-bar-neutral-is-hovered-background-color: light-dark(var(--primitives-color-neutral-650), var(--primitives-color-neutral-500));
2045
- --components-status-bar-neutral-is-active-background-color: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-550));
2046
- --components-status-bar-neutral-content-color: var(--semantics-categories-neutral-filled-content-color);
2047
- --components-status-bar-accent-background-color: var(--semantics-categories-accent-filled-background-color);
2048
- --components-status-bar-accent-is-hovered-background-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-450));
2049
- --components-status-bar-accent-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-500));
2050
- --components-status-bar-accent-content-color: var(--semantics-categories-accent-filled-content-color);
2051
- --components-status-bar-success-background-color: var(--semantics-categories-success-filled-background-color);
2052
- --components-status-bar-success-is-hovered-background-color: var(--primitives-color-success-550);
2053
- --components-status-bar-success-is-active-background-color: var(--primitives-color-success-600);
2054
- --components-status-bar-success-content-color: var(--semantics-categories-success-filled-content-color);
2055
- --components-status-bar-warning-background-color: var(--semantics-categories-warning-filled-background-color);
2056
- --components-status-bar-warning-is-hovered-background-color: light-dark(var(--primitives-color-warning-450), var(--primitives-color-warning-650));
2057
- --components-status-bar-warning-is-active-background-color: light-dark(var(--primitives-color-warning-500), var(--primitives-color-warning-700));
2058
- --components-status-bar-warning-content-color: var(--semantics-categories-warning-filled-content-color);
2059
- --components-status-bar-critical-background-color: var(--semantics-categories-critical-filled-background-color);
2060
- --components-status-bar-critical-is-hovered-background-color: light-dark(var(--primitives-color-critical-700), var(--primitives-color-critical-500));
2061
- --components-status-bar-critical-is-active-background-color: light-dark(var(--primitives-color-critical-750), var(--primitives-color-critical-550));
2062
- --components-status-bar-critical-content-color: var(--semantics-categories-critical-filled-content-color);
2063
-
2064
- /* ## Switch */
2065
-
2066
- --components-switch-border-width: var(--primitives-border-width-regular);
2067
- --components-switch-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
2068
- --components-switch-background-color: var(--semantics-surfaces-base-background-color);
2069
- --components-switch-thumb-border-width: var(--primitives-border-width-regular);
2070
- --components-switch-thumb-border-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
2071
- --components-switch-thumb-background-color: var(--semantics-surfaces-base-background-color);
2072
- --components-switch-icon-color: light-dark(var(--primitives-color-neutral-550), var(--primitives-color-neutral-650));
2073
- --components-switch-is-selected-background-color: var(--semantics-controls-is-highlighted-indicator-color);
2074
- --components-switch-is-selected-thumb-background-color: var(--semantics-controls-is-highlighted-contrast-color);
2075
- --components-switch-is-selected-icon-color: var(--semantics-controls-is-highlighted-indicator-color);
2076
-
2077
- /* ## Tag */
2078
-
2079
- --components-tag-sm-corner-radius: var(--primitives-corner-radius-xxs);
2080
- --components-tag-md-corner-radius: var(--primitives-corner-radius-xs);
2081
-
2082
- /* ## Timeline track cell */
2083
-
2084
- --components-timeline-track-cell-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
2085
- --components-timeline-track-cell-future-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200));
2086
-
2087
- /* ## Toggle button */
2088
-
2089
- --components-toggle-button-group-xs-gap: var(--primitives-space-4);
2090
- --components-toggle-button-group-sm-gap: var(--primitives-space-6);
2091
- --components-toggle-button-group-md-gap: var(--primitives-space-8);
2092
-
2093
- /* ## Toolbar */
2094
-
2095
- --components-toolbar-sm-gap: var(--primitives-space-6);
2096
- --components-toolbar-md-gap: var(--primitives-space-8);
2097
- --components-toolbar-lg-gap: var(--primitives-space-8);
2098
-
2099
- /* ## Tooltip */
2100
-
2101
- --components-tooltip-background-color: light-dark(var(--primitives-color-neutral-600), var(--primitives-color-neutral-750));
2102
- --components-tooltip-content-color: var(--primitives-color-neutral-0);
2103
- --components-tooltip-box-shadow: var(--primitives-box-shadows-level-2);
2104
-
2105
- /* ## Top navigation bar */
2106
-
2107
- --components-top-navigation-bar-title-sm-font: var(--primitives-font-display-6-sm);
2108
- --components-top-navigation-bar-title-md-font: var(--primitives-font-display-5-sm);
2109
- --components-top-navigation-bar-title-lg-font: var(--primitives-font-display-4-sm);
2110
-
2111
- /* ## Top title bar */
2112
-
2113
- --components-top-title-bar-divider-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-350));
2114
-
2115
- /* ## Window */
2116
-
2117
- --components-window-default-width: var(--primitives-area-640);
1709
+ /* ## Code syntax */
1710
+
1711
+ --semantics-code-syntax-comment-color: var(--semantics-content-secondary-color);
1712
+ --semantics-code-syntax-punctuation-color: var(--semantics-content-color);
1713
+ --semantics-code-syntax-keyword-color: var(--primitives-color-donkergeel-650);
1714
+ --semantics-code-syntax-string-color: var(--primitives-color-groen-650);
1715
+ --semantics-code-syntax-number-color: var(--primitives-color-oranje-650);
1716
+ --semantics-code-syntax-boolean-color: var(--primitives-color-oranje-650);
1717
+ --semantics-code-syntax-null-color: var(--primitives-color-oranje-650);
1718
+ --semantics-code-syntax-function-color: var(--primitives-color-lintblauw-650);
1719
+ --semantics-code-syntax-class-color: var(--primitives-color-donkergeel-650);
1720
+ --semantics-code-syntax-builtin-color: var(--primitives-color-donkergeel-650);
1721
+ --semantics-code-syntax-tag-color: var(--primitives-color-groen-650);
1722
+ --semantics-code-syntax-attr-name-color: var(--primitives-color-lintblauw-650);
1723
+ --semantics-code-syntax-attr-value-color: var(--primitives-color-mintgroen-650);
1724
+ --semantics-code-syntax-property-color: var(--primitives-color-lintblauw-650);
1725
+ --semantics-code-syntax-selector-color: var(--primitives-color-donkergeel-650);
1726
+ --semantics-code-syntax-atrule-color: var(--primitives-color-groen-650);
1727
+ --semantics-code-syntax-regex-color: var(--primitives-color-rood-650);
1728
+ --semantics-code-syntax-url-color: var(--primitives-color-mintgroen-650);
1729
+ --semantics-code-syntax-operator-color: var(--primitives-color-groen-650);
1730
+ --semantics-code-syntax-constant-color: var(--primitives-color-oranje-650);
1731
+ --semantics-code-syntax-deleted-color: var(--primitives-color-rood-650);
1732
+ --semantics-code-syntax-inserted-color: var(--primitives-color-groen-650);
1733
+ --semantics-code-syntax-important-color: var(--primitives-color-rood-650);
1734
+ --semantics-code-syntax-symbol-color: var(--primitives-color-violet-650);
1735
+ --semantics-code-syntax-entity-color: var(--primitives-color-paars-650);
1736
+ --semantics-code-syntax-variable-color: var(--primitives-color-lintblauw-650);
1737
+
1738
+ /* ## List items */
1739
+
1740
+ --semantics-list-items-indicator-corner-radius: var(--primitives-corner-radius-sm);
1741
+ --semantics-list-items-indicator-inline-inset: var(--primitives-space-8);
1742
+ --semantics-list-items-is-hovered-background-color: light-dark(var(--primitives-color-neutral-50), var(--primitives-color-neutral-150));
1743
+ --semantics-list-items-is-hovered-content-color: var(--primitives-color-neutral-1000);
1744
+ --semantics-list-items-is-active-background-color: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
1745
+ --semantics-list-items-is-active-content-color: var(--primitives-color-neutral-1000);
1746
+ --semantics-list-items-is-expanded-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
1747
+ --semantics-list-items-is-expanded-content-color: var(--primitives-color-neutral-1000);
1748
+ --semantics-list-items-is-expanded-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
1749
+ --semantics-list-items-is-expanded-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
1750
+ --semantics-list-items-is-selected-background-color: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-250));
1751
+ --semantics-list-items-is-selected-content-color: var(--primitives-color-neutral-1000);
1752
+ --semantics-list-items-is-selected-is-hovered-background-color: light-dark(var(--primitives-color-neutral-150), var(--primitives-color-neutral-300));
1753
+ --semantics-list-items-is-selected-is-active-background-color: light-dark(var(--primitives-color-neutral-200), var(--primitives-color-neutral-350));
1754
+ --semantics-list-items-is-highlighted-background-color: var(--semantics-controls-is-highlighted-indicator-color);
1755
+ --semantics-list-items-is-highlighted-is-hovered-background-color: light-dark(var(--primitives-color-accent-800), var(--primitives-color-accent-700));
1756
+ --semantics-list-items-is-highlighted-is-active-background-color: light-dark(var(--primitives-color-accent-850), var(--primitives-color-accent-750));
1757
+ --semantics-list-items-is-highlighted-content-color: var(--semantics-controls-is-highlighted-contrast-color);
1758
+
1759
+ /* ## Menu bar items */
1760
+
1761
+ --semantics-menu-bar-items-inline-padding: var(--primitives-space-8);
2118
1762
  }
2119
1763
 
2120
1764
  :root[data-scheme="light"] {