@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/actions/icon-button/icon-button.styles.js CHANGED
@@ -9,25 +9,25 @@ export const iconButtonStyles = css `
9
9
  /* # Host */
10
10
 
11
11
  :host {
12
- --_corner-radius: var(--semantics-controls-md-corner-radius);
13
- --_width: auto;
14
- --_min-size: var(--semantics-controls-md-min-size);
15
- --_block-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
16
- --_inline-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
17
- --_icon-size: var(--semantics-buttons-md-is-icon-only-icon-size);
18
- --_disclosure-icon-margin-right: calc(var(--primitives-space-2) * -1);
19
- --_disclosure-icon-size: var(--primitives-space-20);
20
- --_text-display: none;
21
- --_text-font: var(--primitives-font-body-xxs-medium-flat);
22
- --_background-color: var(--semantics-buttons-neutral-tinted-background-color);
23
- --_primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
24
- --_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
25
- --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
26
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
27
- --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
28
- --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
29
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
30
- --_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
12
+ --_icon-button-corner-radius: var(--semantics-controls-md-corner-radius);
13
+ --_icon-button-width: auto;
14
+ --_icon-button-min-size: var(--semantics-controls-md-min-size);
15
+ --_icon-button-block-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
16
+ --_icon-button-inline-padding: var(--semantics-buttons-md-is-icon-only-inline-padding);
17
+ --_icon-button-size: var(--semantics-buttons-md-is-icon-only-icon-size);
18
+ --_icon-button-disclosure-icon-margin-right: calc(var(--primitives-space-2) * -1);
19
+ --_icon-button-disclosure-icon-size: var(--primitives-space-20);
20
+ --_icon-button-text-display: none;
21
+ --_icon-button-text-font: var(--primitives-font-body-xxs-medium-flat);
22
+ --_icon-button-background-color: var(--semantics-buttons-neutral-tinted-background-color);
23
+ --_icon-button-primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
24
+ --_icon-button-highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
25
+ --_icon-button-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
26
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
27
+ --_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
28
+ --_icon-button-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
29
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
30
+ --_icon-button-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
31
31
 
32
32
  ${inheritedTextReset}
33
33
  /* inline-flex, not inline-block: a block container puts the control on a
@@ -42,110 +42,110 @@ export const iconButtonStyles = css `
42
42
  }
43
43
 
44
44
  :host([size="xs"]) {
45
- --_corner-radius: var(--semantics-controls-xs-corner-radius);
46
- --_min-size: var(--semantics-controls-xs-min-size);
47
- --_block-padding: var(--semantics-buttons-xs-is-icon-only-inline-padding);
48
- --_inline-padding: var(--semantics-buttons-xs-is-icon-only-inline-padding);
49
- --_icon-size: var(--semantics-buttons-xs-is-icon-only-icon-size);
50
- --_disclosure-icon-margin-right: 0;
51
- --_disclosure-icon-size: var(--primitives-space-16);
45
+ --_icon-button-corner-radius: var(--semantics-controls-xs-corner-radius);
46
+ --_icon-button-min-size: var(--semantics-controls-xs-min-size);
47
+ --_icon-button-block-padding: var(--semantics-buttons-xs-is-icon-only-inline-padding);
48
+ --_icon-button-inline-padding: var(--semantics-buttons-xs-is-icon-only-inline-padding);
49
+ --_icon-button-size: var(--semantics-buttons-xs-is-icon-only-icon-size);
50
+ --_icon-button-disclosure-icon-margin-right: 0;
51
+ --_icon-button-disclosure-icon-size: var(--primitives-space-16);
52
52
  }
53
53
 
54
54
  :host([size="sm"]) {
55
- --_corner-radius: var(--semantics-controls-sm-corner-radius);
56
- --_min-size: var(--semantics-controls-sm-min-size);
57
- --_block-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
58
- --_inline-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
59
- --_icon-size: var(--semantics-buttons-sm-is-icon-only-icon-size);
55
+ --_icon-button-corner-radius: var(--semantics-controls-sm-corner-radius);
56
+ --_icon-button-min-size: var(--semantics-controls-sm-min-size);
57
+ --_icon-button-block-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
58
+ --_icon-button-inline-padding: var(--semantics-buttons-sm-is-icon-only-inline-padding);
59
+ --_icon-button-size: var(--semantics-buttons-sm-is-icon-only-icon-size);
60
60
  }
61
61
 
62
62
  :host([size="lg"]) {
63
- --_corner-radius: var(--semantics-controls-lg-corner-radius);
64
- --_min-size: var(--semantics-controls-lg-min-size);
65
- --_block-padding: var(--primitives-space-8);
66
- --_inline-padding: var(--primitives-space-8);
67
- --_text-display: block;
63
+ --_icon-button-corner-radius: var(--semantics-controls-lg-corner-radius);
64
+ --_icon-button-min-size: var(--semantics-controls-lg-min-size);
65
+ --_icon-button-block-padding: var(--primitives-space-8);
66
+ --_icon-button-inline-padding: var(--primitives-space-8);
67
+ --_icon-button-text-display: block;
68
68
  }
69
69
 
70
70
  :host([size="lg"][hide-lg-text]) {
71
- --_block-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
72
- --_inline-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
73
- --_icon-size: var(--semantics-buttons-lg-is-icon-only-icon-size);
74
- --_text-display: none;
71
+ --_icon-button-block-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
72
+ --_icon-button-inline-padding: var(--semantics-buttons-lg-is-icon-only-inline-padding);
73
+ --_icon-button-size: var(--semantics-buttons-lg-is-icon-only-icon-size);
74
+ --_icon-button-text-display: none;
75
75
  }
76
76
 
77
77
  :host([appearance="neutral-base"]) {
78
- --_background-color: var(--semantics-buttons-neutral-base-background-color);
79
- --_primary-content-color: var(--semantics-buttons-neutral-base-content-color);
80
- --_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
81
- --_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
82
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
83
- --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
84
- --_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
85
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
86
- --_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
78
+ --_icon-button-background-color: var(--semantics-buttons-neutral-base-background-color);
79
+ --_icon-button-primary-content-color: var(--semantics-buttons-neutral-base-content-color);
80
+ --_icon-button-highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
81
+ --_icon-button-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
82
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
83
+ --_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
84
+ --_icon-button-is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
85
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
86
+ --_icon-button-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
87
87
  }
88
88
 
89
89
  :host([appearance="neutral-transparent"]) {
90
- --_background-color: transparent;
91
- --_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
92
- --_highlight-border-color: transparent;
93
- --_is-hovered-background-color: transparent;
94
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
95
- --_is-hovered-highlight-border-color: transparent;
96
- --_is-active-background-color: transparent;
97
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
98
- --_is-active-highlight-border-color: transparent;
90
+ --_icon-button-background-color: transparent;
91
+ --_icon-button-primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
92
+ --_icon-button-highlight-border-color: transparent;
93
+ --_icon-button-is-hovered-background-color: transparent;
94
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
95
+ --_icon-button-is-hovered-highlight-border-color: transparent;
96
+ --_icon-button-is-active-background-color: transparent;
97
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
98
+ --_icon-button-is-active-highlight-border-color: transparent;
99
99
  }
100
100
 
101
101
  :host([appearance="accent-filled"]),
102
102
  :host([appearance="primary"]) {
103
- --_background-color: var(--semantics-buttons-accent-filled-background-color);
104
- --_primary-content-color: var(--semantics-buttons-accent-filled-content-color);
105
- --_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
106
- --_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
107
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
108
- --_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
109
- --_is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
110
- --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
111
- --_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
103
+ --_icon-button-background-color: var(--semantics-buttons-accent-filled-background-color);
104
+ --_icon-button-primary-content-color: var(--semantics-buttons-accent-filled-content-color);
105
+ --_icon-button-highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
106
+ --_icon-button-is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
107
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
108
+ --_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
109
+ --_icon-button-is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
110
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
111
+ --_icon-button-is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
112
112
  }
113
113
 
114
114
  :host([appearance="accent-transparent"]) {
115
- --_background-color: transparent;
116
- --_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
117
- --_highlight-border-color: transparent;
118
- --_is-hovered-background-color: transparent;
119
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
120
- --_is-hovered-highlight-border-color: transparent;
121
- --_is-active-background-color: transparent;
122
- --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
123
- --_is-active-highlight-border-color: transparent;
115
+ --_icon-button-background-color: transparent;
116
+ --_icon-button-primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
117
+ --_icon-button-highlight-border-color: transparent;
118
+ --_icon-button-is-hovered-background-color: transparent;
119
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
120
+ --_icon-button-is-hovered-highlight-border-color: transparent;
121
+ --_icon-button-is-active-background-color: transparent;
122
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
123
+ --_icon-button-is-active-highlight-border-color: transparent;
124
124
  }
125
125
 
126
126
  :host([appearance="critical-tinted"]),
127
127
  :host([appearance="destructive"]) {
128
- --_background-color: var(--semantics-buttons-critical-tinted-background-color);
129
- --_primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
130
- --_highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
131
- --_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
132
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
133
- --_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
134
- --_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
135
- --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
136
- --_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
128
+ --_icon-button-background-color: var(--semantics-buttons-critical-tinted-background-color);
129
+ --_icon-button-primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
130
+ --_icon-button-highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
131
+ --_icon-button-is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
132
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
133
+ --_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
134
+ --_icon-button-is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
135
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
136
+ --_icon-button-is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
137
137
  }
138
138
 
139
139
  :host([appearance="critical-transparent"]) {
140
- --_background-color: transparent;
141
- --_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
142
- --_highlight-border-color: transparent;
143
- --_is-hovered-background-color: transparent;
144
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
145
- --_is-hovered-highlight-border-color: transparent;
146
- --_is-active-background-color: transparent;
147
- --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
148
- --_is-active-highlight-border-color: transparent;
140
+ --_icon-button-background-color: transparent;
141
+ --_icon-button-primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
142
+ --_icon-button-highlight-border-color: transparent;
143
+ --_icon-button-is-hovered-background-color: transparent;
144
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
145
+ --_icon-button-is-hovered-highlight-border-color: transparent;
146
+ --_icon-button-is-active-background-color: transparent;
147
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
148
+ --_icon-button-is-active-highlight-border-color: transparent;
149
149
  }
150
150
 
151
151
  /* The on-color variants derive from currentColor; see nldd-button for
@@ -154,28 +154,28 @@ export const iconButtonStyles = css `
154
154
 
155
155
  :host([appearance="inherit-tinted"]),
156
156
  :host([expanded][appearance="inherit-tinted"]) {
157
- --_background-color: var(--context-button-background-color, var(--semantics-buttons-inherit-tinted-background-color));
158
- --_primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
159
- --_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
160
- --_is-hovered-background-color: var(--_background-color);
161
- --_is-hovered-primary-content-color: var(--_primary-content-color);
162
- --_is-hovered-highlight-border-color: var(--_highlight-border-color);
163
- --_is-active-background-color: var(--_background-color);
164
- --_is-active-primary-content-color: var(--_primary-content-color);
165
- --_is-active-highlight-border-color: var(--_highlight-border-color);
157
+ --_icon-button-background-color: var(--context-button-background-color, var(--semantics-buttons-inherit-tinted-background-color));
158
+ --_icon-button-primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
159
+ --_icon-button-highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
160
+ --_icon-button-is-hovered-background-color: var(--_icon-button-background-color);
161
+ --_icon-button-is-hovered-primary-content-color: var(--_icon-button-primary-content-color);
162
+ --_icon-button-is-hovered-highlight-border-color: var(--_icon-button-highlight-border-color);
163
+ --_icon-button-is-active-background-color: var(--_icon-button-background-color);
164
+ --_icon-button-is-active-primary-content-color: var(--_icon-button-primary-content-color);
165
+ --_icon-button-is-active-highlight-border-color: var(--_icon-button-highlight-border-color);
166
166
  }
167
167
 
168
168
  :host([appearance="inherit-filled"]),
169
169
  :host([expanded][appearance="inherit-filled"]) {
170
- --_background-color: var(--semantics-buttons-inherit-filled-background-color);
171
- --_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
172
- --_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
173
- --_is-hovered-background-color: var(--_background-color);
174
- --_is-hovered-primary-content-color: var(--_primary-content-color);
175
- --_is-hovered-highlight-border-color: var(--_highlight-border-color);
176
- --_is-active-background-color: var(--_background-color);
177
- --_is-active-primary-content-color: var(--_primary-content-color);
178
- --_is-active-highlight-border-color: var(--_highlight-border-color);
170
+ --_icon-button-background-color: var(--semantics-buttons-inherit-filled-background-color);
171
+ --_icon-button-primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
172
+ --_icon-button-highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
173
+ --_icon-button-is-hovered-background-color: var(--_icon-button-background-color);
174
+ --_icon-button-is-hovered-primary-content-color: var(--_icon-button-primary-content-color);
175
+ --_icon-button-is-hovered-highlight-border-color: var(--_icon-button-highlight-border-color);
176
+ --_icon-button-is-active-background-color: var(--_icon-button-background-color);
177
+ --_icon-button-is-active-primary-content-color: var(--_icon-button-primary-content-color);
178
+ --_icon-button-is-active-highlight-border-color: var(--_icon-button-highlight-border-color);
179
179
  }
180
180
 
181
181
  /* For inherit-filled the inner button keeps the inherited on-color:
@@ -187,95 +187,95 @@ export const iconButtonStyles = css `
187
187
  }
188
188
 
189
189
  :host([appearance="inherit-filled"]) .icon-button > * {
190
- color: var(--_primary-content-color);
190
+ color: var(--_icon-button-primary-content-color);
191
191
  }
192
192
 
193
193
  /* ## Expanded — default (incl. unknown variant) */
194
194
 
195
195
  :host([expanded]) {
196
- --_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
197
- --_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
198
- --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
199
- --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
200
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
201
- --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
202
- --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
203
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
204
- --_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
196
+ --_icon-button-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
197
+ --_icon-button-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
198
+ --_icon-button-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
199
+ --_icon-button-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
200
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
201
+ --_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
202
+ --_icon-button-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
203
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
204
+ --_icon-button-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
205
205
  }
206
206
 
207
207
  :host([expanded][appearance="neutral-base"]) {
208
- --_background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
209
- --_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
210
- --_highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
211
- --_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
212
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
213
- --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
214
- --_is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
215
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
216
- --_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
208
+ --_icon-button-background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
209
+ --_icon-button-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
210
+ --_icon-button-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
211
+ --_icon-button-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
212
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
213
+ --_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
214
+ --_icon-button-is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
215
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
216
+ --_icon-button-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
217
217
  }
218
218
 
219
219
  :host([expanded][appearance="neutral-transparent"]) {
220
- --_background-color: transparent;
221
- --_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
222
- --_highlight-border-color: transparent;
223
- --_is-hovered-background-color: transparent;
224
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
225
- --_is-hovered-highlight-border-color: transparent;
226
- --_is-active-background-color: transparent;
227
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
228
- --_is-active-highlight-border-color: transparent;
220
+ --_icon-button-background-color: transparent;
221
+ --_icon-button-primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
222
+ --_icon-button-highlight-border-color: transparent;
223
+ --_icon-button-is-hovered-background-color: transparent;
224
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
225
+ --_icon-button-is-hovered-highlight-border-color: transparent;
226
+ --_icon-button-is-active-background-color: transparent;
227
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
228
+ --_icon-button-is-active-highlight-border-color: transparent;
229
229
  }
230
230
 
231
231
  :host([expanded][appearance="accent-filled"]),
232
232
  :host([expanded][appearance="primary"]) {
233
- --_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
234
- --_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
235
- --_highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
236
- --_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
237
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
238
- --_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
239
- --_is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
240
- --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
241
- --_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
233
+ --_icon-button-background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
234
+ --_icon-button-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
235
+ --_icon-button-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
236
+ --_icon-button-is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
237
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
238
+ --_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
239
+ --_icon-button-is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
240
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
241
+ --_icon-button-is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
242
242
  }
243
243
 
244
244
  :host([expanded][appearance="accent-transparent"]) {
245
- --_background-color: transparent;
246
- --_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
247
- --_highlight-border-color: transparent;
248
- --_is-hovered-background-color: transparent;
249
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
250
- --_is-hovered-highlight-border-color: transparent;
251
- --_is-active-background-color: transparent;
252
- --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
253
- --_is-active-highlight-border-color: transparent;
245
+ --_icon-button-background-color: transparent;
246
+ --_icon-button-primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
247
+ --_icon-button-highlight-border-color: transparent;
248
+ --_icon-button-is-hovered-background-color: transparent;
249
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
250
+ --_icon-button-is-hovered-highlight-border-color: transparent;
251
+ --_icon-button-is-active-background-color: transparent;
252
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
253
+ --_icon-button-is-active-highlight-border-color: transparent;
254
254
  }
255
255
 
256
256
  :host([expanded][appearance="critical-tinted"]),
257
257
  :host([expanded][appearance="destructive"]) {
258
- --_background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
259
- --_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
260
- --_highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
261
- --_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
262
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
263
- --_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
264
- --_is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
265
- --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
266
- --_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
258
+ --_icon-button-background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
259
+ --_icon-button-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
260
+ --_icon-button-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
261
+ --_icon-button-is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
262
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
263
+ --_icon-button-is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
264
+ --_icon-button-is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
265
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
266
+ --_icon-button-is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
267
267
  }
268
268
 
269
269
  :host([expanded][appearance="critical-transparent"]) {
270
- --_background-color: transparent;
271
- --_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
272
- --_highlight-border-color: transparent;
273
- --_is-hovered-background-color: transparent;
274
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
275
- --_is-hovered-highlight-border-color: transparent;
276
- --_is-active-background-color: transparent;
277
- --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
278
- --_is-active-highlight-border-color: transparent;
270
+ --_icon-button-background-color: transparent;
271
+ --_icon-button-primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
272
+ --_icon-button-highlight-border-color: transparent;
273
+ --_icon-button-is-hovered-background-color: transparent;
274
+ --_icon-button-is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
275
+ --_icon-button-is-hovered-highlight-border-color: transparent;
276
+ --_icon-button-is-active-background-color: transparent;
277
+ --_icon-button-is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
278
+ --_icon-button-is-active-highlight-border-color: transparent;
279
279
  }
280
280
 
281
281
  :host([width="full"]) {
@@ -295,9 +295,9 @@ export const iconButtonStyles = css `
295
295
 
296
296
  :host([no-highlight-border]),
297
297
  :host([no-highlight-border][expanded]) {
298
- --_highlight-border-color: transparent;
299
- --_is-hovered-highlight-border-color: transparent;
300
- --_is-active-highlight-border-color: transparent;
298
+ --_icon-button-highlight-border-color: transparent;
299
+ --_icon-button-is-hovered-highlight-border-color: transparent;
300
+ --_icon-button-is-active-highlight-border-color: transparent;
301
301
  }
302
302
 
303
303
 
@@ -308,19 +308,19 @@ export const iconButtonStyles = css `
308
308
  display: inline-flex;
309
309
  margin: 0;
310
310
  border: none;
311
- border-radius: var(--_corner-radius);
311
+ border-radius: var(--_icon-button-corner-radius);
312
312
  background: none;
313
- background-color: var(--_background-color);
314
- box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
315
- width: var(--_width);
316
- min-width: var(--_min-size);
317
- height: var(--_min-size);
318
- min-height: var(--_min-size);
319
- padding: var(--_block-padding) var(--_inline-padding);
313
+ background-color: var(--_icon-button-background-color);
314
+ box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_icon-button-highlight-border-color);
315
+ width: var(--_icon-button-width);
316
+ min-width: var(--_icon-button-min-size);
317
+ height: var(--_icon-button-min-size);
318
+ min-height: var(--_icon-button-min-size);
319
+ padding: var(--_icon-button-block-padding) var(--_icon-button-inline-padding);
320
320
  flex-direction: column;
321
321
  align-items: center;
322
322
  justify-content: center;
323
- color: var(--_primary-content-color);
323
+ color: var(--_icon-button-primary-content-color);
324
324
  font: inherit;
325
325
  text-decoration: none;
326
326
  transition:
@@ -345,7 +345,7 @@ export const iconButtonStyles = css `
345
345
  .icon-button:focus-visible {
346
346
  outline: var(--semantics-focus-ring-outline);
347
347
  outline-offset: var(--semantics-focus-ring-outline-offset);
348
- box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
348
+ box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_icon-button-highlight-border-color);
349
349
  }
350
350
 
351
351
  .icon-button:focus:not(:focus-visible) {
@@ -354,16 +354,16 @@ export const iconButtonStyles = css `
354
354
 
355
355
  @media (hover: hover) {
356
356
  .icon-button:hover {
357
- background-color: var(--_is-hovered-background-color);
358
- color: var(--_is-hovered-primary-content-color);
359
- --_highlight-border-color: var(--_is-hovered-highlight-border-color);
357
+ background-color: var(--_icon-button-is-hovered-background-color);
358
+ color: var(--_icon-button-is-hovered-primary-content-color);
359
+ --_icon-button-highlight-border-color: var(--_icon-button-is-hovered-highlight-border-color);
360
360
  }
361
361
  }
362
362
 
363
363
  .icon-button:active {
364
- background-color: var(--_is-active-background-color);
365
- color: var(--_is-active-primary-content-color);
366
- --_highlight-border-color: var(--_is-active-highlight-border-color);
364
+ background-color: var(--_icon-button-is-active-background-color);
365
+ color: var(--_icon-button-is-active-primary-content-color);
366
+ --_icon-button-highlight-border-color: var(--_icon-button-is-active-highlight-border-color);
367
367
  }
368
368
 
369
369
  /* Loading keeps the control focusable (not disabled); activation is blocked in JS. */
@@ -391,8 +391,8 @@ export const iconButtonStyles = css `
391
391
 
392
392
  .icon-button__icon {
393
393
  display: flex;
394
- width: var(--_icon-size);
395
- height: var(--_icon-size);
394
+ width: var(--_icon-button-size);
395
+ height: var(--_icon-button-size);
396
396
  flex-shrink: 0;
397
397
  align-items: center;
398
398
  justify-content: center;
@@ -400,17 +400,17 @@ export const iconButtonStyles = css `
400
400
 
401
401
  .icon-button__disclosure-icon {
402
402
  display: flex;
403
- margin-right: var(--_disclosure-icon-margin-right);
404
- width: var(--_disclosure-icon-size);
405
- height: var(--_disclosure-icon-size);
403
+ margin-right: var(--_icon-button-disclosure-icon-margin-right);
404
+ width: var(--_icon-button-disclosure-icon-size);
405
+ height: var(--_icon-button-disclosure-icon-size);
406
406
  flex-shrink: 0;
407
407
  }
408
408
 
409
409
  .icon-button__text {
410
- display: var(--_text-display);
410
+ display: var(--_icon-button-text-display);
411
411
  text-align: center;
412
412
  color: inherit;
413
- font: var(--_text-font);
413
+ font: var(--_icon-button-text-font);
414
414
  white-space: nowrap;
415
415
  transition: opacity var(--primitives-transition-duration-slow) var(--primitives-transition-easing-default);
416
416
  }
@@ -427,7 +427,7 @@ export const iconButtonStyles = css `
427
427
  .icon-button__activity-indicator {
428
428
  position: absolute;
429
429
  inset: 0;
430
- color: var(--_primary-content-color);
430
+ color: var(--_icon-button-primary-content-color);
431
431
  }
432
432
  `;
433
433
  //# sourceMappingURL=icon-button.styles.js.map
package/dist/components/actions/menu/menu.d.ts CHANGED
@@ -137,7 +137,7 @@ export declare class NLDDMenuItem extends LitElement {
137
137
  * @attr {string} width - Explicit width, pinned exactly. Without it the menu sizes to its content between a minimum and a viewport-aware maximum (min(100vw - inset, 640px)).
138
138
  * @attr {string} anchor - ID of the anchor element. Positions the menu against it AND makes it a toggle: the menu listens on document click and opens/closes itself when the click lands on the anchor. Use this for a menu hung off a button. For a menu you open yourself (a type-ahead under a text field, say), set the `anchorElement` property instead — same positioning, no toggle.
139
139
  * @attr {string} placement - Floating UI placement. Default: 'bottom-start'.
140
- * @attr {number} max-items - Maximum number of visible items before scrolling. Sets --_max-items internally. Default: 0 (no limit).
140
+ * @attr {number} max-items - Maximum number of visible items before scrolling. Sets --_menu-max-items internally. Default: 0 (no limit).
141
141
  * @attr {string} empty-text - Text of the default empty-state dialog. Falls back to Dutch i18n "Geen opties beschikbaar".
142
142
  * @attr {string} empty-supporting-text - Supporting text of the default empty-state dialog.
143
143
  * @attr {object} translations - Override one or more translation keys.
@@ -157,7 +157,7 @@ export declare class NLDDMenu extends LitElement {
157
157
  */
158
158
  variant: 'menu' | 'listbox';
159
159
  /**
160
- * Explicit width, pinned exactly (sets --_width and clamps min/max to it).
160
+ * Explicit width, pinned exactly (sets --_menu-width and clamps min/max to it).
161
161
  * Leave unset to let the menu size to its content between a minimum and a
162
162
  * viewport-aware maximum of min(100vw - inset, 640px).
163
163
  */
@@ -174,7 +174,7 @@ export declare class NLDDMenu extends LitElement {
174
174
  placement: string;
175
175
  /**
176
176
  * Maximum number of visible items before the menu scrolls.
177
- * Sets --_max-items internally. Default: 0 (no limit).
177
+ * Sets --_menu-max-items internally. Default: 0 (no limit).
178
178
  */
179
179
  maxItems: number;
180
180
  emptyText: string;