@nldd/design-system 0.8.95 → 0.8.97

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 (468) hide show
  1. package/README.md +20 -19
  2. package/custom-elements.json +781 -379
  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 +4682 -4158
  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 +17 -1
  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 +25 -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 +24 -12
  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.d.ts +19 -3
  50. package/dist/components/content/image/image.d.ts.map +1 -1
  51. package/dist/components/content/image/image.js +28 -7
  52. package/dist/components/content/image/image.js.map +1 -1
  53. package/dist/components/content/image/image.styles.d.ts.map +1 -1
  54. package/dist/components/content/image/image.styles.js +189 -153
  55. package/dist/components/content/image/image.styles.js.map +1 -1
  56. package/dist/components/content/image/image.template.d.ts.map +1 -1
  57. package/dist/components/content/image/image.template.js +13 -1
  58. package/dist/components/content/image/image.template.js.map +1 -1
  59. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map +1 -1
  60. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js +42 -40
  61. package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js.map +1 -1
  62. package/dist/components/content/rich-text/rich-text.d.ts +25 -12
  63. package/dist/components/content/rich-text/rich-text.d.ts.map +1 -1
  64. package/dist/components/content/rich-text/rich-text.js +25 -12
  65. package/dist/components/content/rich-text/rich-text.js.map +1 -1
  66. package/dist/components/content/tag/tag.styles.js +95 -95
  67. package/dist/components/content/text/text.styles.js +23 -23
  68. package/dist/components/content/title/title.styles.js +38 -38
  69. package/dist/components/content/token/token.styles.js +4 -4
  70. package/dist/components/content/tooltip/tooltip.js +5 -5
  71. package/dist/components/content/tooltip/tooltip.js.map +1 -1
  72. package/dist/components/content/tooltip/tooltip.styles.d.ts.map +1 -1
  73. package/dist/components/content/tooltip/tooltip.styles.js +21 -18
  74. package/dist/components/content/tooltip/tooltip.styles.js.map +1 -1
  75. package/dist/components/forms/form-field/form-field.styles.js +5 -5
  76. package/dist/components/forms/validation-list/validation-list.styles.js +7 -7
  77. package/dist/components/{icon-Typdp4av.js → icon-D_ZGezHx.js} +83 -63
  78. package/dist/components/{icon-button-9mo3oIyL.js → icon-button-NN0SrgS3.js} +278 -275
  79. package/dist/components/index.d.ts +3 -3
  80. package/dist/components/index.d.ts.map +1 -1
  81. package/dist/components/index.js +3 -3
  82. package/dist/components/index.js.map +1 -1
  83. package/dist/components/inputs/checkbox/checkbox.styles.d.ts.map +1 -1
  84. package/dist/components/inputs/checkbox/checkbox.styles.js +31 -16
  85. package/dist/components/inputs/checkbox/checkbox.styles.js.map +1 -1
  86. package/dist/components/inputs/code-editor/code-editor.js +2 -2
  87. package/dist/components/inputs/code-editor/code-editor.js.map +1 -1
  88. package/dist/components/inputs/code-editor/code-editor.styles.js +30 -30
  89. package/dist/components/inputs/combo-box/combo-box.js +2 -2
  90. package/dist/components/inputs/combo-box/combo-box.js.map +1 -1
  91. package/dist/components/inputs/combo-box/combo-box.styles.js +30 -30
  92. package/dist/components/inputs/date-field/date-field.js +4 -4
  93. package/dist/components/inputs/date-field/date-field.js.map +1 -1
  94. package/dist/components/inputs/date-field/date-field.styles.js +46 -46
  95. package/dist/components/inputs/date-picker/date-picker.js +3 -3
  96. package/dist/components/inputs/date-picker/date-picker.js.map +1 -1
  97. package/dist/components/inputs/date-picker/date-picker.styles.js +65 -65
  98. package/dist/components/inputs/dropdown/dropdown.js +2 -2
  99. package/dist/components/inputs/dropdown/dropdown.js.map +1 -1
  100. package/dist/components/inputs/dropdown/dropdown.styles.js +66 -66
  101. package/dist/components/inputs/file-field/file-field.styles.d.ts.map +1 -1
  102. package/dist/components/inputs/file-field/file-field.styles.js +33 -30
  103. package/dist/components/inputs/file-field/file-field.styles.js.map +1 -1
  104. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js +3 -3
  105. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.js.map +1 -1
  106. package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +30 -30
  107. package/dist/components/inputs/number-field/number-field.js +3 -3
  108. package/dist/components/inputs/number-field/number-field.js.map +1 -1
  109. package/dist/components/inputs/number-field/number-field.styles.js +18 -18
  110. package/dist/components/inputs/password-field/password-field.js +2 -2
  111. package/dist/components/inputs/password-field/password-field.js.map +1 -1
  112. package/dist/components/inputs/password-field/password-field.styles.js +37 -37
  113. package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map +1 -1
  114. package/dist/components/inputs/radio-button/radio-button.styles.js +29 -13
  115. package/dist/components/inputs/radio-button/radio-button.styles.js.map +1 -1
  116. package/dist/components/inputs/search-field/search-field.js +2 -2
  117. package/dist/components/inputs/search-field/search-field.js.map +1 -1
  118. package/dist/components/inputs/search-field/search-field.styles.js +30 -30
  119. package/dist/components/inputs/segmented-control/segmented-control.js +4 -4
  120. package/dist/components/inputs/segmented-control/segmented-control.js.map +1 -1
  121. package/dist/components/inputs/segmented-control/segmented-control.styles.js +108 -108
  122. package/dist/components/inputs/stepper/stepper.styles.js +10 -10
  123. package/dist/components/inputs/switch/switch.styles.d.ts.map +1 -1
  124. package/dist/components/inputs/switch/switch.styles.js +39 -31
  125. package/dist/components/inputs/switch/switch.styles.js.map +1 -1
  126. package/dist/components/inputs/text-editor/text-editor.js +2 -2
  127. package/dist/components/inputs/text-editor/text-editor.js.map +1 -1
  128. package/dist/components/inputs/text-editor/text-editor.markdown.js +2 -2
  129. package/dist/components/inputs/text-editor/text-editor.markdown.js.map +1 -1
  130. package/dist/components/inputs/text-editor/text-editor.mentions.js +7 -7
  131. package/dist/components/inputs/text-editor/text-editor.mentions.js.map +1 -1
  132. package/dist/components/inputs/text-editor/text-editor.styles.js +138 -138
  133. package/dist/components/inputs/text-field/text-field.js +2 -2
  134. package/dist/components/inputs/text-field/text-field.js.map +1 -1
  135. package/dist/components/inputs/text-field/text-field.styles.js +27 -27
  136. package/dist/components/inputs/time-field/time-field.js +4 -4
  137. package/dist/components/inputs/time-field/time-field.js.map +1 -1
  138. package/dist/components/inputs/time-field/time-field.styles.js +40 -40
  139. package/dist/components/inputs/time-picker/time-picker.js +4 -4
  140. package/dist/components/inputs/time-picker/time-picker.js.map +1 -1
  141. package/dist/components/inputs/time-picker/time-picker.styles.js +30 -30
  142. package/dist/components/inputs/toggle-button/toggle-button.d.ts +1 -1
  143. package/dist/components/inputs/toggle-button/toggle-button.js +1 -1
  144. package/dist/components/inputs/toggle-button/toggle-button.styles.js +145 -145
  145. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.d.ts.map +1 -1
  146. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js +7 -3
  147. package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js.map +1 -1
  148. package/dist/components/inputs/token-field/token-field.styles.js +28 -28
  149. package/dist/components/layout/box/box.d.ts +1 -1
  150. package/dist/components/layout/box/box.js +1 -1
  151. package/dist/components/layout/box/box.styles.js +13 -13
  152. package/dist/components/layout/card/card.styles.d.ts.map +1 -1
  153. package/dist/components/layout/card/card.styles.js +24 -21
  154. package/dist/components/layout/card/card.styles.js.map +1 -1
  155. package/dist/components/layout/collection/collection.js +6 -6
  156. package/dist/components/layout/collection/collection.js.map +1 -1
  157. package/dist/components/layout/collection/collection.styles.js +19 -19
  158. package/dist/components/layout/container/container.d.ts +2 -2
  159. package/dist/components/layout/container/container.d.ts.map +1 -1
  160. package/dist/components/layout/container/container.js +32 -31
  161. package/dist/components/layout/container/container.js.map +1 -1
  162. package/dist/components/layout/container/container.styles.js +125 -125
  163. package/dist/components/layout/page/page.d.ts +9 -3
  164. package/dist/components/layout/page/page.d.ts.map +1 -1
  165. package/dist/components/layout/page/page.js +41 -18
  166. package/dist/components/layout/page/page.js.map +1 -1
  167. package/dist/components/layout/page/page.styles.js +21 -21
  168. package/dist/components/layout/page-footer/page-footer.js +4 -4
  169. package/dist/components/layout/page-footer/page-footer.js.map +1 -1
  170. package/dist/components/layout/page-footer/page-footer.styles.d.ts.map +1 -1
  171. package/dist/components/layout/page-footer/page-footer.styles.js +26 -26
  172. package/dist/components/layout/page-footer/page-footer.styles.js.map +1 -1
  173. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.d.ts +2 -0
  174. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.d.ts.map +1 -1
  175. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js +6 -4
  176. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js.map +1 -1
  177. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.d.ts.map +1 -1
  178. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js +22 -17
  179. package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js.map +1 -1
  180. package/dist/components/layout/page-sections/hero/hero.d.ts +57 -11
  181. package/dist/components/layout/page-sections/hero/hero.d.ts.map +1 -1
  182. package/dist/components/layout/page-sections/hero/hero.js +164 -21
  183. package/dist/components/layout/page-sections/hero/hero.js.map +1 -1
  184. package/dist/components/layout/page-sections/hero/hero.styles.d.ts.map +1 -1
  185. package/dist/components/layout/page-sections/hero/hero.styles.js +159 -105
  186. package/dist/components/layout/page-sections/hero/hero.styles.js.map +1 -1
  187. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.d.ts +4 -0
  188. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.d.ts.map +1 -1
  189. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.js +11 -4
  190. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.js.map +1 -1
  191. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.d.ts.map +1 -1
  192. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js +30 -17
  193. package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js.map +1 -1
  194. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.d.ts +4 -0
  195. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.d.ts.map +1 -1
  196. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.js +11 -4
  197. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.js.map +1 -1
  198. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.d.ts.map +1 -1
  199. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js +34 -17
  200. package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js.map +1 -1
  201. package/dist/components/layout/page-sections/page-section-controls.d.ts +11 -1
  202. package/dist/components/layout/page-sections/page-section-controls.d.ts.map +1 -1
  203. package/dist/components/layout/page-sections/page-section-controls.js +11 -2
  204. package/dist/components/layout/page-sections/page-section-controls.js.map +1 -1
  205. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts +5 -1
  206. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts.map +1 -1
  207. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js +11 -7
  208. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js.map +1 -1
  209. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts.map +1 -1
  210. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js +37 -34
  211. package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js.map +1 -1
  212. package/dist/components/layout/page-sections/simple-section/simple-section.d.ts +2 -0
  213. package/dist/components/layout/page-sections/simple-section/simple-section.d.ts.map +1 -1
  214. package/dist/components/layout/page-sections/simple-section/simple-section.js +6 -5
  215. package/dist/components/layout/page-sections/simple-section/simple-section.js.map +1 -1
  216. package/dist/components/layout/page-sections/simple-section/simple-section.styles.js +19 -19
  217. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.d.ts +4 -0
  218. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.d.ts.map +1 -1
  219. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.js +11 -4
  220. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.js.map +1 -1
  221. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.d.ts.map +1 -1
  222. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js +34 -17
  223. package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js.map +1 -1
  224. package/dist/components/layout/popover/popover.d.ts +1 -1
  225. package/dist/components/layout/popover/popover.js +5 -5
  226. package/dist/components/layout/popover/popover.js.map +1 -1
  227. package/dist/components/layout/popover/popover.styles.d.ts.map +1 -1
  228. package/dist/components/layout/popover/popover.styles.js +4 -3
  229. package/dist/components/layout/popover/popover.styles.js.map +1 -1
  230. package/dist/components/layout/sheet/sheet.js +5 -5
  231. package/dist/components/layout/sheet/sheet.js.map +1 -1
  232. package/dist/components/layout/sheet/sheet.styles.js +8 -8
  233. package/dist/components/layout/{app-view/app-view.d.ts → shell/shell.d.ts} +11 -11
  234. package/dist/components/layout/shell/shell.d.ts.map +1 -0
  235. package/dist/components/layout/{app-view/app-view.js → shell/shell.js} +24 -24
  236. package/dist/components/layout/shell/shell.js.map +1 -0
  237. package/dist/components/layout/shell/shell.styles.d.ts +2 -0
  238. package/dist/components/layout/shell/shell.styles.d.ts.map +1 -0
  239. package/dist/components/layout/{app-view/app-view.styles.js → shell/shell.styles.js} +8 -8
  240. package/dist/components/layout/shell/shell.styles.js.map +1 -0
  241. package/dist/components/layout/shell/shell.template.d.ts +4 -0
  242. package/dist/components/layout/shell/shell.template.d.ts.map +1 -0
  243. package/dist/components/layout/shell/shell.template.js +9 -0
  244. package/dist/components/layout/shell/shell.template.js.map +1 -0
  245. package/dist/components/layout/spacer/spacer.styles.js +76 -76
  246. package/dist/components/layout/split-views/bar-split-view/bar-split-view.js +1 -1
  247. package/dist/components/layout/split-views/bar-split-view/bar-split-view.js.map +1 -1
  248. package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js +5 -5
  249. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.d.ts +1 -1
  250. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js +5 -5
  251. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js.map +1 -1
  252. package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js +12 -12
  253. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.d.ts +1 -1
  254. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.js +2 -2
  255. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.js.map +1 -1
  256. package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js +6 -6
  257. package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js +4 -4
  258. package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js +4 -4
  259. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.js +1 -1
  260. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.js.map +1 -1
  261. package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js +6 -6
  262. package/dist/components/layout/window/window.d.ts +1 -1
  263. package/dist/components/layout/window/window.js +1 -1
  264. package/dist/components/layout/window/window.styles.d.ts.map +1 -1
  265. package/dist/components/layout/window/window.styles.js +3 -1
  266. package/dist/components/layout/window/window.styles.js.map +1 -1
  267. package/dist/components/lists-and-tables/cells/cell/cell.js +8 -8
  268. package/dist/components/lists-and-tables/cells/cell/cell.js.map +1 -1
  269. package/dist/components/lists-and-tables/cells/cell/cell.styles.js +9 -9
  270. package/dist/components/lists-and-tables/cells/description-cell/description-cell.js +8 -8
  271. package/dist/components/lists-and-tables/cells/description-cell/description-cell.js.map +1 -1
  272. package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js +10 -10
  273. package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.js +9 -9
  274. package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.js +14 -14
  275. package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.js +20 -20
  276. package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.d.ts → step-cell/step-cell.d.ts} +18 -17
  277. package/dist/components/lists-and-tables/cells/step-cell/step-cell.d.ts.map +1 -0
  278. package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.js → step-cell/step-cell.js} +33 -32
  279. package/dist/components/lists-and-tables/cells/step-cell/step-cell.js.map +1 -0
  280. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.d.ts +2 -0
  281. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.d.ts.map +1 -0
  282. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.js +184 -0
  283. package/dist/components/lists-and-tables/cells/step-cell/step-cell.styles.js.map +1 -0
  284. package/dist/components/lists-and-tables/cells/step-cell/step-cell.template.d.ts +4 -0
  285. package/dist/components/lists-and-tables/cells/step-cell/step-cell.template.d.ts.map +1 -0
  286. package/dist/components/lists-and-tables/cells/{timeline-track-cell/timeline-track-cell.template.js → step-cell/step-cell.template.js} +10 -10
  287. package/dist/components/lists-and-tables/cells/step-cell/step-cell.template.js.map +1 -0
  288. package/dist/components/lists-and-tables/cells/text-cell/text-cell.js +9 -9
  289. package/dist/components/lists-and-tables/cells/text-cell/text-cell.js.map +1 -1
  290. package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.d.ts.map +1 -1
  291. package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js +39 -37
  292. package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js.map +1 -1
  293. package/dist/components/lists-and-tables/cells/title-cell/title-cell.js +8 -8
  294. package/dist/components/lists-and-tables/cells/title-cell/title-cell.js.map +1 -1
  295. package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.d.ts.map +1 -1
  296. package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js +39 -37
  297. package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js.map +1 -1
  298. package/dist/components/lists-and-tables/list/list.js +7 -7
  299. package/dist/components/lists-and-tables/list/list.js.map +1 -1
  300. package/dist/components/lists-and-tables/list/list.styles.d.ts.map +1 -1
  301. package/dist/components/lists-and-tables/list/list.styles.js +49 -48
  302. package/dist/components/lists-and-tables/list/list.styles.js.map +1 -1
  303. package/dist/components/lists-and-tables/list-item/list-item.d.ts +16 -6
  304. package/dist/components/lists-and-tables/list-item/list-item.d.ts.map +1 -1
  305. package/dist/components/lists-and-tables/list-item/list-item.js +29 -16
  306. package/dist/components/lists-and-tables/list-item/list-item.js.map +1 -1
  307. package/dist/components/lists-and-tables/list-item/list-item.styles.d.ts.map +1 -1
  308. package/dist/components/lists-and-tables/list-item/list-item.styles.js +69 -67
  309. package/dist/components/lists-and-tables/list-item/list-item.styles.js.map +1 -1
  310. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.d.ts +4 -1
  311. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.d.ts.map +1 -1
  312. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.js +8 -2
  313. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.js.map +1 -1
  314. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.styles.js +30 -30
  315. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.template.d.ts +1 -1
  316. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.template.d.ts.map +1 -1
  317. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.template.js +1 -1
  318. package/dist/components/lists-and-tables/list-item-segment/list-item-segment.template.js.map +1 -1
  319. package/dist/components/lists-and-tables/table/table.js +2 -2
  320. package/dist/components/lists-and-tables/table/table.js.map +1 -1
  321. package/dist/components/lists-and-tables/table/table.styles.js +21 -21
  322. package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +3 -3
  323. package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js.map +1 -1
  324. package/dist/components/navigation/document-tab-bar/document-tab-bar.d.ts +1 -1
  325. package/dist/components/navigation/document-tab-bar/document-tab-bar.js +12 -12
  326. package/dist/components/navigation/document-tab-bar/document-tab-bar.js.map +1 -1
  327. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map +1 -1
  328. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +51 -49
  329. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
  330. package/dist/components/navigation/menu-bar-item/menu-bar-item.d.ts +5 -0
  331. package/dist/components/navigation/menu-bar-item/menu-bar-item.d.ts.map +1 -1
  332. package/dist/components/navigation/menu-bar-item/menu-bar-item.js +13 -1
  333. package/dist/components/navigation/menu-bar-item/menu-bar-item.js.map +1 -1
  334. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map +1 -1
  335. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +35 -19
  336. package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map +1 -1
  337. package/dist/components/navigation/menu-bar-item/menu-bar-item.template.d.ts.map +1 -1
  338. package/dist/components/navigation/menu-bar-item/menu-bar-item.template.js +11 -10
  339. package/dist/components/navigation/menu-bar-item/menu-bar-item.template.js.map +1 -1
  340. package/dist/components/navigation/pagination/pagination.styles.js +29 -29
  341. package/dist/components/navigation/skip-link/skip-link.styles.js +8 -8
  342. package/dist/components/navigation/tab-bar/tab-bar.styles.js +53 -53
  343. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js +3 -3
  344. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js.map +1 -1
  345. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
  346. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +35 -32
  347. package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
  348. package/dist/components/navigation/top-title-bar/top-title-bar.js +1 -1
  349. package/dist/components/navigation/top-title-bar/top-title-bar.js.map +1 -1
  350. package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map +1 -1
  351. package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +3 -1
  352. package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map +1 -1
  353. package/dist/components/{shadow-resets-aG-rgyNQ.js → shadow-resets-CPa58rmc.js} +1 -1
  354. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js +46 -46
  355. package/dist/components/status-and-feedback/badge/badge.js +2 -2
  356. package/dist/components/status-and-feedback/badge/badge.js.map +1 -1
  357. package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
  358. package/dist/components/status-and-feedback/badge/badge.styles.js +120 -119
  359. package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
  360. package/dist/components/status-and-feedback/banner/banner.styles.js +49 -49
  361. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +19 -19
  362. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js +12 -12
  363. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js.map +1 -1
  364. package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js +58 -58
  365. package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +6 -6
  366. package/dist/components/status-and-feedback/notification/notification.styles.d.ts.map +1 -1
  367. package/dist/components/status-and-feedback/notification/notification.styles.js +45 -39
  368. package/dist/components/status-and-feedback/notification/notification.styles.js.map +1 -1
  369. package/dist/components/status-and-feedback/notification/notifications-area.js +2 -2
  370. package/dist/components/status-and-feedback/notification/notifications-area.js.map +1 -1
  371. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.d.ts.map +1 -1
  372. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js +121 -119
  373. package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map +1 -1
  374. package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js +58 -58
  375. package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js +1 -1
  376. package/dist/components/status-and-feedback/progress-circle/progress-circle.template.js.map +1 -1
  377. package/dist/components/status-and-feedback/status-bar/status-bar.d.ts +10 -0
  378. package/dist/components/status-and-feedback/status-bar/status-bar.d.ts.map +1 -1
  379. package/dist/components/status-and-feedback/status-bar/status-bar.js +21 -0
  380. package/dist/components/status-and-feedback/status-bar/status-bar.js.map +1 -1
  381. package/dist/components/status-and-feedback/status-bar/status-bar.styles.js +36 -36
  382. package/dist/components/status-and-feedback/{step-indicator/step-indicator.d.ts → step-bar/step-bar.d.ts} +32 -32
  383. package/dist/components/status-and-feedback/step-bar/step-bar.d.ts.map +1 -0
  384. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.d.ts +9 -0
  385. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.d.ts.map +1 -0
  386. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.js +8 -0
  387. package/dist/components/status-and-feedback/step-bar/step-bar.i18n.js.map +1 -0
  388. package/dist/components/status-and-feedback/{step-indicator/step-indicator.js → step-bar/step-bar.js} +46 -46
  389. package/dist/components/status-and-feedback/step-bar/step-bar.js.map +1 -0
  390. package/dist/components/status-and-feedback/step-bar/step-bar.styles.d.ts +3 -0
  391. package/dist/components/status-and-feedback/step-bar/step-bar.styles.d.ts.map +1 -0
  392. package/dist/components/status-and-feedback/step-bar/step-bar.styles.js +294 -0
  393. package/dist/components/status-and-feedback/step-bar/step-bar.styles.js.map +1 -0
  394. package/dist/components/status-and-feedback/step-bar/step-bar.template.d.ts +5 -0
  395. package/dist/components/status-and-feedback/step-bar/step-bar.template.d.ts.map +1 -0
  396. package/dist/components/status-and-feedback/step-bar/step-bar.template.js +69 -0
  397. package/dist/components/status-and-feedback/step-bar/step-bar.template.js.map +1 -0
  398. package/dist/css/document-reset.css +3 -3
  399. package/dist/css/rich-text.css +71 -122
  400. package/dist/css/variables.css +54 -410
  401. package/dist/nldd.min.js +4607 -4331
  402. package/dist/translations/en-US.js +5 -5
  403. package/dist/translations/en-US.js.map +1 -1
  404. package/dist/translations/fy.js +5 -5
  405. package/dist/translations/fy.js.map +1 -1
  406. package/dist/translations/nl.generated.d.ts +5 -5
  407. package/dist/translations/nl.generated.js +2 -2
  408. package/dist/translations/nl.generated.js.map +1 -1
  409. package/dist/translations/pap-AW.js +5 -5
  410. package/dist/translations/pap-AW.js.map +1 -1
  411. package/dist/translations/pap-CW.js +5 -5
  412. package/dist/translations/pap-CW.js.map +1 -1
  413. package/dist/types/vue.d.ts +125 -82
  414. package/dist/utilities/codemirror/theme.js +17 -17
  415. package/dist/utilities/codemirror/theme.js.map +1 -1
  416. package/dist/utilities/page-section-mixin.d.ts +5 -0
  417. package/dist/utilities/page-section-mixin.d.ts.map +1 -1
  418. package/dist/utilities/page-section-mixin.js +13 -4
  419. package/dist/utilities/page-section-mixin.js.map +1 -1
  420. package/dist/utilities/scroll-mode-controller.d.ts +29 -13
  421. package/dist/utilities/scroll-mode-controller.d.ts.map +1 -1
  422. package/dist/utilities/scroll-mode-controller.js +48 -13
  423. package/dist/utilities/scroll-mode-controller.js.map +1 -1
  424. package/dist/utilities/spacing-scale.d.ts +1 -1
  425. package/dist/utilities/spacing-scale.js +1 -1
  426. package/package.json +13 -11
  427. package/dist/components/layout/app-view/app-view.d.ts.map +0 -1
  428. package/dist/components/layout/app-view/app-view.js.map +0 -1
  429. package/dist/components/layout/app-view/app-view.styles.d.ts +0 -2
  430. package/dist/components/layout/app-view/app-view.styles.d.ts.map +0 -1
  431. package/dist/components/layout/app-view/app-view.styles.js.map +0 -1
  432. package/dist/components/layout/app-view/app-view.template.d.ts +0 -4
  433. package/dist/components/layout/app-view/app-view.template.d.ts.map +0 -1
  434. package/dist/components/layout/app-view/app-view.template.js +0 -9
  435. package/dist/components/layout/app-view/app-view.template.js.map +0 -1
  436. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.d.ts.map +0 -1
  437. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.js.map +0 -1
  438. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts +0 -2
  439. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts.map +0 -1
  440. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js +0 -184
  441. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js.map +0 -1
  442. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.d.ts +0 -4
  443. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.d.ts.map +0 -1
  444. package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.template.js.map +0 -1
  445. package/dist/components/palettes.html +0 -245
  446. package/dist/components/sample-images/butterfly-1200.jpg +0 -0
  447. package/dist/components/sample-images/butterfly-1600.jpg +0 -0
  448. package/dist/components/sample-images/butterfly-480.jpg +0 -0
  449. package/dist/components/sample-images/butterfly-960.jpg +0 -0
  450. package/dist/components/status-and-feedback/step-indicator/step-indicator.d.ts.map +0 -1
  451. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.d.ts +0 -9
  452. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.d.ts.map +0 -1
  453. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.js +0 -8
  454. package/dist/components/status-and-feedback/step-indicator/step-indicator.i18n.js.map +0 -1
  455. package/dist/components/status-and-feedback/step-indicator/step-indicator.js.map +0 -1
  456. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.d.ts +0 -3
  457. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.d.ts.map +0 -1
  458. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js +0 -294
  459. package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js.map +0 -1
  460. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.d.ts +0 -5
  461. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.d.ts.map +0 -1
  462. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js +0 -69
  463. package/dist/components/status-and-feedback/step-indicator/step-indicator.template.js.map +0 -1
  464. package/dist/palettes.html +0 -245
  465. package/dist/sample-images/butterfly-1200.jpg +0 -0
  466. package/dist/sample-images/butterfly-1600.jpg +0 -0
  467. package/dist/sample-images/butterfly-480.jpg +0 -0
  468. package/dist/sample-images/butterfly-960.jpg +0 -0
package/dist/components/actions/button/button.styles.js CHANGED
@@ -9,30 +9,30 @@ export const buttonStyles = css `
9
9
  /* # Host */
10
10
 
11
11
  :host {
12
- --_corner-radius: var(--semantics-controls-md-corner-radius);
12
+ --_button-corner-radius: var(--semantics-controls-md-corner-radius);
13
13
  /* A parent that stacks its buttons says so through the context variable;
14
14
  the button's own width attribute overrides it with an inline style. */
15
- --_width: var(--context-button-width, auto);
16
- --_min-size: var(--semantics-controls-md-min-size);
17
- --_block-padding: var(--semantics-controls-md-block-padding);
18
- --_inline-padding: var(--semantics-buttons-md-inline-padding);
19
- --_gap: var(--semantics-buttons-md-gap);
20
- --_font: var(--semantics-buttons-md-primary-text-font);
21
- --_icon-size: var(--semantics-buttons-md-icon-size);
22
- --_disclosure-icon-size: var(--primitives-space-20);
23
- --_supporting-font: var(--semantics-buttons-md-supporting-text-font);
24
- --_background-color: var(--semantics-buttons-neutral-tinted-background-color);
25
- --_primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
26
- --_secondary-content-color: var(--semantics-buttons-neutral-tinted-content-secondary-color);
27
- --_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
28
- --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
29
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
30
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-secondary-color);
31
- --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
32
- --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
33
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
34
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-secondary-color);
35
- --_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
15
+ --_button-width: var(--context-button-width, auto);
16
+ --_button-min-size: var(--semantics-controls-md-min-size);
17
+ --_button-block-padding: var(--semantics-controls-md-block-padding);
18
+ --_button-inline-padding: var(--semantics-buttons-md-inline-padding);
19
+ --_button-gap: var(--semantics-buttons-md-gap);
20
+ --_button-font: var(--semantics-buttons-md-primary-text-font);
21
+ --_button-icon-size: var(--semantics-buttons-md-icon-size);
22
+ --_button-disclosure-icon-size: var(--primitives-space-20);
23
+ --_button-supporting-font: var(--semantics-buttons-md-supporting-text-font);
24
+ --_button-background-color: var(--semantics-buttons-neutral-tinted-background-color);
25
+ --_button-primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
26
+ --_button-secondary-content-color: var(--semantics-buttons-neutral-tinted-content-secondary-color);
27
+ --_button-highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
28
+ --_button-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
29
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
30
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-secondary-color);
31
+ --_button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
32
+ --_button-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
33
+ --_button-is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
34
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-secondary-color);
35
+ --_button-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
36
36
 
37
37
  ${inheritedTextReset}
38
38
  /* inline-flex, not inline-block: a block container puts the control on a
@@ -53,131 +53,131 @@ export const buttonStyles = css `
53
53
  }
54
54
 
55
55
  :host([size="xs"]) {
56
- --_corner-radius: var(--semantics-controls-xs-corner-radius);
57
- --_min-size: var(--semantics-controls-xs-min-size);
58
- --_block-padding: var(--semantics-controls-xs-block-padding);
59
- --_inline-padding: var(--semantics-buttons-xs-inline-padding);
60
- --_gap: var(--semantics-buttons-xs-gap);
61
- --_font: var(--semantics-buttons-xs-primary-text-font);
62
- --_icon-size: var(--semantics-buttons-xs-icon-size);
63
- --_disclosure-icon-size: var(--primitives-space-16);
64
- --_supporting-font: var(--semantics-buttons-xs-supporting-text-font);
56
+ --_button-corner-radius: var(--semantics-controls-xs-corner-radius);
57
+ --_button-min-size: var(--semantics-controls-xs-min-size);
58
+ --_button-block-padding: var(--semantics-controls-xs-block-padding);
59
+ --_button-inline-padding: var(--semantics-buttons-xs-inline-padding);
60
+ --_button-gap: var(--semantics-buttons-xs-gap);
61
+ --_button-font: var(--semantics-buttons-xs-primary-text-font);
62
+ --_button-icon-size: var(--semantics-buttons-xs-icon-size);
63
+ --_button-disclosure-icon-size: var(--primitives-space-16);
64
+ --_button-supporting-font: var(--semantics-buttons-xs-supporting-text-font);
65
65
  }
66
66
 
67
67
  :host([size="sm"]) {
68
- --_corner-radius: var(--semantics-controls-sm-corner-radius);
69
- --_min-size: var(--semantics-controls-sm-min-size);
70
- --_block-padding: var(--semantics-controls-sm-block-padding);
71
- --_inline-padding: var(--semantics-buttons-sm-inline-padding);
72
- --_gap: var(--semantics-buttons-sm-gap);
73
- --_font: var(--semantics-buttons-sm-primary-text-font);
74
- --_icon-size: var(--semantics-buttons-sm-icon-size);
75
- --_disclosure-icon-size: var(--primitives-space-18);
76
- --_supporting-font: var(--semantics-buttons-sm-supporting-text-font);
68
+ --_button-corner-radius: var(--semantics-controls-sm-corner-radius);
69
+ --_button-min-size: var(--semantics-controls-sm-min-size);
70
+ --_button-block-padding: var(--semantics-controls-sm-block-padding);
71
+ --_button-inline-padding: var(--semantics-buttons-sm-inline-padding);
72
+ --_button-gap: var(--semantics-buttons-sm-gap);
73
+ --_button-font: var(--semantics-buttons-sm-primary-text-font);
74
+ --_button-icon-size: var(--semantics-buttons-sm-icon-size);
75
+ --_button-disclosure-icon-size: var(--primitives-space-18);
76
+ --_button-supporting-font: var(--semantics-buttons-sm-supporting-text-font);
77
77
  }
78
78
 
79
79
  :host([size="lg"]) {
80
- --_corner-radius: var(--semantics-controls-lg-corner-radius);
81
- --_min-size: var(--semantics-controls-lg-min-size);
82
- --_block-padding: var(--semantics-controls-lg-block-padding);
83
- --_inline-padding: var(--semantics-buttons-lg-inline-padding);
84
- --_gap: var(--semantics-buttons-lg-gap);
85
- --_font: var(--semantics-buttons-lg-primary-text-font);
86
- --_icon-size: var(--semantics-buttons-lg-icon-size);
87
- --_disclosure-icon-size: var(--primitives-space-24);
88
- --_supporting-font: var(--semantics-buttons-lg-supporting-text-font);
80
+ --_button-corner-radius: var(--semantics-controls-lg-corner-radius);
81
+ --_button-min-size: var(--semantics-controls-lg-min-size);
82
+ --_button-block-padding: var(--semantics-controls-lg-block-padding);
83
+ --_button-inline-padding: var(--semantics-buttons-lg-inline-padding);
84
+ --_button-gap: var(--semantics-buttons-lg-gap);
85
+ --_button-font: var(--semantics-buttons-lg-primary-text-font);
86
+ --_button-icon-size: var(--semantics-buttons-lg-icon-size);
87
+ --_button-disclosure-icon-size: var(--primitives-space-24);
88
+ --_button-supporting-font: var(--semantics-buttons-lg-supporting-text-font);
89
89
  }
90
90
 
91
91
  :host([appearance="neutral-base"]) {
92
- --_background-color: var(--semantics-buttons-neutral-base-background-color);
93
- --_primary-content-color: var(--semantics-buttons-neutral-base-content-color);
94
- --_secondary-content-color: var(--semantics-buttons-neutral-base-content-secondary-color);
95
- --_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
96
- --_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
97
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
98
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-secondary-color);
99
- --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
100
- --_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
101
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
102
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-active-content-secondary-color);
103
- --_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
92
+ --_button-background-color: var(--semantics-buttons-neutral-base-background-color);
93
+ --_button-primary-content-color: var(--semantics-buttons-neutral-base-content-color);
94
+ --_button-secondary-content-color: var(--semantics-buttons-neutral-base-content-secondary-color);
95
+ --_button-highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
96
+ --_button-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
97
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
98
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-secondary-color);
99
+ --_button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
100
+ --_button-is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
101
+ --_button-is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
102
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-active-content-secondary-color);
103
+ --_button-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
104
104
  }
105
105
 
106
106
  :host([appearance="neutral-transparent"]) {
107
- --_background-color: transparent;
108
- --_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
109
- --_secondary-content-color: var(--semantics-buttons-neutral-transparent-content-secondary-color);
110
- --_highlight-border-color: transparent;
111
- --_is-hovered-background-color: transparent;
112
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
113
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-secondary-color);
114
- --_is-hovered-highlight-border-color: transparent;
115
- --_is-active-background-color: transparent;
116
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
117
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-secondary-color);
118
- --_is-active-highlight-border-color: transparent;
107
+ --_button-background-color: transparent;
108
+ --_button-primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
109
+ --_button-secondary-content-color: var(--semantics-buttons-neutral-transparent-content-secondary-color);
110
+ --_button-highlight-border-color: transparent;
111
+ --_button-is-hovered-background-color: transparent;
112
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
113
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-secondary-color);
114
+ --_button-is-hovered-highlight-border-color: transparent;
115
+ --_button-is-active-background-color: transparent;
116
+ --_button-is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
117
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-secondary-color);
118
+ --_button-is-active-highlight-border-color: transparent;
119
119
  }
120
120
 
121
121
  :host([appearance="accent-filled"]),
122
122
  :host([appearance="primary"]) {
123
- --_background-color: var(--semantics-buttons-accent-filled-background-color);
124
- --_primary-content-color: var(--semantics-buttons-accent-filled-content-color);
125
- --_secondary-content-color: var(--semantics-buttons-accent-filled-content-secondary-color);
126
- --_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
127
- --_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
128
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
129
- --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-secondary-color);
130
- --_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
131
- --_is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
132
- --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
133
- --_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-active-content-secondary-color);
134
- --_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
123
+ --_button-background-color: var(--semantics-buttons-accent-filled-background-color);
124
+ --_button-primary-content-color: var(--semantics-buttons-accent-filled-content-color);
125
+ --_button-secondary-content-color: var(--semantics-buttons-accent-filled-content-secondary-color);
126
+ --_button-highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
127
+ --_button-is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
128
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
129
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-secondary-color);
130
+ --_button-is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
131
+ --_button-is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
132
+ --_button-is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
133
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-active-content-secondary-color);
134
+ --_button-is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
135
135
  }
136
136
 
137
137
  :host([appearance="accent-transparent"]) {
138
- --_background-color: transparent;
139
- --_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
140
- --_secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
141
- --_highlight-border-color: transparent;
142
- --_is-hovered-background-color: transparent;
143
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
144
- --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-secondary-color);
145
- --_is-hovered-highlight-border-color: transparent;
146
- --_is-active-background-color: transparent;
147
- --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
148
- --_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-secondary-color);
149
- --_is-active-highlight-border-color: transparent;
138
+ --_button-background-color: transparent;
139
+ --_button-primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
140
+ --_button-secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
141
+ --_button-highlight-border-color: transparent;
142
+ --_button-is-hovered-background-color: transparent;
143
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
144
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-secondary-color);
145
+ --_button-is-hovered-highlight-border-color: transparent;
146
+ --_button-is-active-background-color: transparent;
147
+ --_button-is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
148
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-secondary-color);
149
+ --_button-is-active-highlight-border-color: transparent;
150
150
  }
151
151
 
152
152
  :host([appearance="critical-tinted"]),
153
153
  :host([appearance="destructive"]) {
154
- --_background-color: var(--semantics-buttons-critical-tinted-background-color);
155
- --_primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
156
- --_secondary-content-color: var(--semantics-buttons-critical-tinted-content-secondary-color);
157
- --_highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
158
- --_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
159
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
160
- --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-secondary-color);
161
- --_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
162
- --_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
163
- --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
164
- --_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-secondary-color);
165
- --_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
154
+ --_button-background-color: var(--semantics-buttons-critical-tinted-background-color);
155
+ --_button-primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
156
+ --_button-secondary-content-color: var(--semantics-buttons-critical-tinted-content-secondary-color);
157
+ --_button-highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
158
+ --_button-is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
159
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
160
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-secondary-color);
161
+ --_button-is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
162
+ --_button-is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
163
+ --_button-is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
164
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-secondary-color);
165
+ --_button-is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
166
166
  }
167
167
 
168
168
  :host([appearance="critical-transparent"]) {
169
- --_background-color: transparent;
170
- --_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
171
- --_secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
172
- --_highlight-border-color: transparent;
173
- --_is-hovered-background-color: transparent;
174
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
175
- --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-secondary-color);
176
- --_is-hovered-highlight-border-color: transparent;
177
- --_is-active-background-color: transparent;
178
- --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
179
- --_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-secondary-color);
180
- --_is-active-highlight-border-color: transparent;
169
+ --_button-background-color: transparent;
170
+ --_button-primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
171
+ --_button-secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
172
+ --_button-highlight-border-color: transparent;
173
+ --_button-is-hovered-background-color: transparent;
174
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
175
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-secondary-color);
176
+ --_button-is-hovered-highlight-border-color: transparent;
177
+ --_button-is-active-background-color: transparent;
178
+ --_button-is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
179
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-secondary-color);
180
+ --_button-is-active-highlight-border-color: transparent;
181
181
  }
182
182
 
183
183
  /* The on-color variants derive from currentColor (which stays
@@ -188,34 +188,34 @@ export const buttonStyles = css `
188
188
 
189
189
  :host([appearance="inherit-tinted"]),
190
190
  :host([expanded][appearance="inherit-tinted"]) {
191
- --_background-color: var(--context-button-background-color, var(--semantics-buttons-inherit-tinted-background-color));
192
- --_primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
193
- --_secondary-content-color: var(--semantics-buttons-inherit-tinted-content-secondary-color);
194
- --_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
195
- --_is-hovered-background-color: var(--_background-color);
196
- --_is-hovered-primary-content-color: var(--_primary-content-color);
197
- --_is-hovered-secondary-content-color: var(--_secondary-content-color);
198
- --_is-hovered-highlight-border-color: var(--_highlight-border-color);
199
- --_is-active-background-color: var(--_background-color);
200
- --_is-active-primary-content-color: var(--_primary-content-color);
201
- --_is-active-secondary-content-color: var(--_secondary-content-color);
202
- --_is-active-highlight-border-color: var(--_highlight-border-color);
191
+ --_button-background-color: var(--context-button-background-color, var(--semantics-buttons-inherit-tinted-background-color));
192
+ --_button-primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
193
+ --_button-secondary-content-color: var(--semantics-buttons-inherit-tinted-content-secondary-color);
194
+ --_button-highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
195
+ --_button-is-hovered-background-color: var(--_button-background-color);
196
+ --_button-is-hovered-primary-content-color: var(--_button-primary-content-color);
197
+ --_button-is-hovered-secondary-content-color: var(--_button-secondary-content-color);
198
+ --_button-is-hovered-highlight-border-color: var(--_button-highlight-border-color);
199
+ --_button-is-active-background-color: var(--_button-background-color);
200
+ --_button-is-active-primary-content-color: var(--_button-primary-content-color);
201
+ --_button-is-active-secondary-content-color: var(--_button-secondary-content-color);
202
+ --_button-is-active-highlight-border-color: var(--_button-highlight-border-color);
203
203
  }
204
204
 
205
205
  :host([appearance="inherit-filled"]),
206
206
  :host([expanded][appearance="inherit-filled"]) {
207
- --_background-color: var(--semantics-buttons-inherit-filled-background-color);
208
- --_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
209
- --_secondary-content-color: var(--semantics-buttons-inherit-filled-content-secondary-color);
210
- --_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
211
- --_is-hovered-background-color: var(--_background-color);
212
- --_is-hovered-primary-content-color: var(--_primary-content-color);
213
- --_is-hovered-secondary-content-color: var(--_secondary-content-color);
214
- --_is-hovered-highlight-border-color: var(--_highlight-border-color);
215
- --_is-active-background-color: var(--_background-color);
216
- --_is-active-primary-content-color: var(--_primary-content-color);
217
- --_is-active-secondary-content-color: var(--_secondary-content-color);
218
- --_is-active-highlight-border-color: var(--_highlight-border-color);
207
+ --_button-background-color: var(--semantics-buttons-inherit-filled-background-color);
208
+ --_button-primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
209
+ --_button-secondary-content-color: var(--semantics-buttons-inherit-filled-content-secondary-color);
210
+ --_button-highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
211
+ --_button-is-hovered-background-color: var(--_button-background-color);
212
+ --_button-is-hovered-primary-content-color: var(--_button-primary-content-color);
213
+ --_button-is-hovered-secondary-content-color: var(--_button-secondary-content-color);
214
+ --_button-is-hovered-highlight-border-color: var(--_button-highlight-border-color);
215
+ --_button-is-active-background-color: var(--_button-background-color);
216
+ --_button-is-active-primary-content-color: var(--_button-primary-content-color);
217
+ --_button-is-active-secondary-content-color: var(--_button-secondary-content-color);
218
+ --_button-is-active-highlight-border-color: var(--_button-highlight-border-color);
219
219
  }
220
220
 
221
221
  /* For inherit-filled the inner button keeps the inherited on-color:
@@ -228,116 +228,116 @@ export const buttonStyles = css `
228
228
  }
229
229
 
230
230
  :host([appearance="inherit-filled"]) .button > * {
231
- color: var(--_primary-content-color);
231
+ color: var(--_button-primary-content-color);
232
232
  }
233
233
 
234
234
  /* ## Expanded — default (incl. unknown variant) */
235
235
 
236
236
  :host([expanded]) {
237
- --_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
238
- --_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
239
- --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-secondary-color);
240
- --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
241
- --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
242
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
243
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-secondary-color);
244
- --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
245
- --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
246
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
247
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-secondary-color);
248
- --_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
237
+ --_button-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
238
+ --_button-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
239
+ --_button-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-secondary-color);
240
+ --_button-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
241
+ --_button-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
242
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
243
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-secondary-color);
244
+ --_button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
245
+ --_button-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
246
+ --_button-is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
247
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-secondary-color);
248
+ --_button-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
249
249
  }
250
250
 
251
251
  :host([expanded][appearance="neutral-base"]) {
252
- --_background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
253
- --_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
254
- --_secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-secondary-color);
255
- --_highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
256
- --_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
257
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
258
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-secondary-color);
259
- --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
260
- --_is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
261
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
262
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-secondary-color);
263
- --_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
252
+ --_button-background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
253
+ --_button-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
254
+ --_button-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-secondary-color);
255
+ --_button-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
256
+ --_button-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
257
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
258
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-secondary-color);
259
+ --_button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
260
+ --_button-is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
261
+ --_button-is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
262
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-secondary-color);
263
+ --_button-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
264
264
  }
265
265
 
266
266
  :host([expanded][appearance="neutral-transparent"]) {
267
- --_background-color: transparent;
268
- --_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
269
- --_secondary-content-color: var(--semantics-buttons-neutral-transparent-content-secondary-color);
270
- --_highlight-border-color: transparent;
271
- --_is-hovered-background-color: transparent;
272
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
273
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-secondary-color);
274
- --_is-hovered-highlight-border-color: transparent;
275
- --_is-active-background-color: transparent;
276
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
277
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-secondary-color);
278
- --_is-active-highlight-border-color: transparent;
267
+ --_button-background-color: transparent;
268
+ --_button-primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
269
+ --_button-secondary-content-color: var(--semantics-buttons-neutral-transparent-content-secondary-color);
270
+ --_button-highlight-border-color: transparent;
271
+ --_button-is-hovered-background-color: transparent;
272
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
273
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-secondary-color);
274
+ --_button-is-hovered-highlight-border-color: transparent;
275
+ --_button-is-active-background-color: transparent;
276
+ --_button-is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
277
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-secondary-color);
278
+ --_button-is-active-highlight-border-color: transparent;
279
279
  }
280
280
 
281
281
  :host([expanded][appearance="accent-filled"]),
282
282
  :host([expanded][appearance="primary"]) {
283
- --_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
284
- --_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
285
- --_secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-secondary-color);
286
- --_highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
287
- --_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
288
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
289
- --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-secondary-color);
290
- --_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
291
- --_is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
292
- --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
293
- --_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-secondary-color);
294
- --_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
283
+ --_button-background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
284
+ --_button-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
285
+ --_button-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-secondary-color);
286
+ --_button-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
287
+ --_button-is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
288
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
289
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-secondary-color);
290
+ --_button-is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
291
+ --_button-is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
292
+ --_button-is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
293
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-secondary-color);
294
+ --_button-is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
295
295
  }
296
296
 
297
297
  :host([expanded][appearance="accent-transparent"]) {
298
- --_background-color: transparent;
299
- --_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
300
- --_secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
301
- --_highlight-border-color: transparent;
302
- --_is-hovered-background-color: transparent;
303
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
304
- --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-secondary-color);
305
- --_is-hovered-highlight-border-color: transparent;
306
- --_is-active-background-color: transparent;
307
- --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
308
- --_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-secondary-color);
309
- --_is-active-highlight-border-color: transparent;
298
+ --_button-background-color: transparent;
299
+ --_button-primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
300
+ --_button-secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
301
+ --_button-highlight-border-color: transparent;
302
+ --_button-is-hovered-background-color: transparent;
303
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
304
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-secondary-color);
305
+ --_button-is-hovered-highlight-border-color: transparent;
306
+ --_button-is-active-background-color: transparent;
307
+ --_button-is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
308
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-secondary-color);
309
+ --_button-is-active-highlight-border-color: transparent;
310
310
  }
311
311
 
312
312
  :host([expanded][appearance="critical-tinted"]),
313
313
  :host([expanded][appearance="destructive"]) {
314
- --_background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
315
- --_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
316
- --_secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-secondary-color);
317
- --_highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
318
- --_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
319
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
320
- --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-secondary-color);
321
- --_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
322
- --_is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
323
- --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
324
- --_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-secondary-color);
325
- --_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
314
+ --_button-background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
315
+ --_button-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
316
+ --_button-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-secondary-color);
317
+ --_button-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
318
+ --_button-is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
319
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
320
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-secondary-color);
321
+ --_button-is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
322
+ --_button-is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
323
+ --_button-is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
324
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-secondary-color);
325
+ --_button-is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
326
326
  }
327
327
 
328
328
  :host([expanded][appearance="critical-transparent"]) {
329
- --_background-color: transparent;
330
- --_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
331
- --_secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
332
- --_highlight-border-color: transparent;
333
- --_is-hovered-background-color: transparent;
334
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
335
- --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-secondary-color);
336
- --_is-hovered-highlight-border-color: transparent;
337
- --_is-active-background-color: transparent;
338
- --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
339
- --_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-secondary-color);
340
- --_is-active-highlight-border-color: transparent;
329
+ --_button-background-color: transparent;
330
+ --_button-primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
331
+ --_button-secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
332
+ --_button-highlight-border-color: transparent;
333
+ --_button-is-hovered-background-color: transparent;
334
+ --_button-is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
335
+ --_button-is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-secondary-color);
336
+ --_button-is-hovered-highlight-border-color: transparent;
337
+ --_button-is-active-background-color: transparent;
338
+ --_button-is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
339
+ --_button-is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-secondary-color);
340
+ --_button-is-active-highlight-border-color: transparent;
341
341
  }
342
342
 
343
343
  :host([width="full"]) {
@@ -366,9 +366,9 @@ export const buttonStyles = css `
366
366
 
367
367
  :host([no-highlight-border]),
368
368
  :host([no-highlight-border][expanded]) {
369
- --_highlight-border-color: transparent;
370
- --_is-hovered-highlight-border-color: transparent;
371
- --_is-active-highlight-border-color: transparent;
369
+ --_button-highlight-border-color: transparent;
370
+ --_button-is-hovered-highlight-border-color: transparent;
371
+ --_button-is-active-highlight-border-color: transparent;
372
372
  }
373
373
 
374
374
 
@@ -380,20 +380,20 @@ export const buttonStyles = css `
380
380
  position: relative;
381
381
  margin: 0;
382
382
  border: none;
383
- border-radius: var(--_corner-radius);
383
+ border-radius: var(--_button-corner-radius);
384
384
  background: none;
385
- background-color: var(--_background-color);
386
- box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
387
- width: var(--_width);
388
- min-width: var(--_min-size);
385
+ background-color: var(--_button-background-color);
386
+ box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_button-highlight-border-color);
387
+ width: var(--_button-width);
388
+ min-width: var(--_button-min-size);
389
389
  max-width: 100%;
390
- min-height: var(--_min-size);
391
- padding: var(--_block-padding) var(--_inline-padding);
392
- gap: var(--_gap);
390
+ min-height: var(--_button-min-size);
391
+ padding: var(--_button-block-padding) var(--_button-inline-padding);
392
+ gap: var(--_button-gap);
393
393
  align-items: center;
394
394
  justify-content: center;
395
- color: var(--_primary-content-color);
396
- font: var(--_font);
395
+ color: var(--_button-primary-content-color);
396
+ font: var(--_button-font);
397
397
  text-align: center;
398
398
  text-decoration: none;
399
399
  text-wrap: pretty;
@@ -410,16 +410,16 @@ export const buttonStyles = css `
410
410
 
411
411
  .button:hover {
412
412
  @media (hover: hover) {
413
- background-color: var(--_is-hovered-background-color);
414
- color: var(--_is-hovered-primary-content-color);
415
- --_highlight-border-color: var(--_is-hovered-highlight-border-color);
413
+ background-color: var(--_button-is-hovered-background-color);
414
+ color: var(--_button-is-hovered-primary-content-color);
415
+ --_button-highlight-border-color: var(--_button-is-hovered-highlight-border-color);
416
416
  }
417
417
  }
418
418
 
419
419
  .button:active {
420
- background-color: var(--_is-active-background-color);
421
- color: var(--_is-active-primary-content-color);
422
- --_highlight-border-color: var(--_is-active-highlight-border-color);
420
+ background-color: var(--_button-is-active-background-color);
421
+ color: var(--_button-is-active-primary-content-color);
422
+ --_button-highlight-border-color: var(--_button-is-active-highlight-border-color);
423
423
  }
424
424
 
425
425
  /* Loading keeps the control focusable (not disabled); activation is blocked in JS. */
@@ -430,7 +430,7 @@ export const buttonStyles = css `
430
430
  .button:focus-visible {
431
431
  outline: var(--semantics-focus-ring-outline);
432
432
  outline-offset: var(--semantics-focus-ring-outline-offset);
433
- box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
433
+ box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_button-highlight-border-color);
434
434
  }
435
435
 
436
436
  .button:focus:not(:focus-visible) {
@@ -454,7 +454,7 @@ export const buttonStyles = css `
454
454
  align-items: center;
455
455
  /* Space between the icons and the text-area. Was padding-inline on the
456
456
  text-area; a flex gap keeps it off the text and out of the no-icon edges. */
457
- gap: var(--_gap);
457
+ gap: var(--_button-gap);
458
458
  transition: opacity var(--primitives-transition-duration-slow) var(--primitives-transition-easing-default);
459
459
  }
460
460
 
@@ -477,7 +477,7 @@ export const buttonStyles = css `
477
477
  .button__activity-indicator {
478
478
  position: absolute;
479
479
  inset: 0;
480
- color: var(--_primary-content-color);
480
+ color: var(--_button-primary-content-color);
481
481
  }
482
482
 
483
483
  ::slotted(nldd-icon) {
@@ -507,23 +507,23 @@ export const buttonStyles = css `
507
507
  :host([size="sm"]) .button__text-area {
508
508
  flex-direction: row;
509
509
  align-items: baseline;
510
- gap: var(--_gap);
510
+ gap: var(--_button-gap);
511
511
  }
512
512
 
513
513
  .button__supporting-text {
514
514
  min-width: 0;
515
- color: var(--_secondary-content-color);
516
- font: var(--_supporting-font);
515
+ color: var(--_button-secondary-content-color);
516
+ font: var(--_button-supporting-font);
517
517
  }
518
518
 
519
519
  .button:hover .button__supporting-text {
520
520
  @media (hover: hover) {
521
- color: var(--_is-hovered-secondary-content-color);
521
+ color: var(--_button-is-hovered-secondary-content-color);
522
522
  }
523
523
  }
524
524
 
525
525
  .button:active .button__supporting-text {
526
- color: var(--_is-active-secondary-content-color);
526
+ color: var(--_button-is-active-secondary-content-color);
527
527
  }
528
528
 
529
529
  /* Visually-hidden "opens in new tab" announcement (href + target="_blank");
@@ -549,24 +549,24 @@ export const buttonStyles = css `
549
549
 
550
550
  :host(:not([size])) .button.has-supporting-text,
551
551
  :host([size="md"]) .button.has-supporting-text {
552
- --_font: var(--semantics-buttons-sm-primary-text-font);
553
- --_icon-size: var(--semantics-buttons-md-has-supporting-text-icon-size);
554
- --_inline-padding: var(--semantics-buttons-md-has-supporting-text-inline-padding);
555
- --_block-padding: var(--primitives-space-4);
552
+ --_button-font: var(--semantics-buttons-sm-primary-text-font);
553
+ --_button-icon-size: var(--semantics-buttons-md-has-supporting-text-icon-size);
554
+ --_button-inline-padding: var(--semantics-buttons-md-has-supporting-text-inline-padding);
555
+ --_button-block-padding: var(--primitives-space-4);
556
556
  }
557
557
 
558
558
  :host([size="lg"]) .button.has-supporting-text {
559
- --_font: var(--semantics-buttons-md-primary-text-font);
560
- --_icon-size: var(--semantics-buttons-lg-has-supporting-text-icon-size);
561
- --_inline-padding: var(--semantics-buttons-lg-has-supporting-text-inline-padding);
562
- --_block-padding: var(--primitives-space-4);
559
+ --_button-font: var(--semantics-buttons-md-primary-text-font);
560
+ --_button-icon-size: var(--semantics-buttons-lg-has-supporting-text-icon-size);
561
+ --_button-inline-padding: var(--semantics-buttons-lg-has-supporting-text-inline-padding);
562
+ --_button-block-padding: var(--primitives-space-4);
563
563
  }
564
564
 
565
565
  .button__start-icon,
566
566
  .button__end-icon {
567
567
  display: flex;
568
- width: var(--_icon-size);
569
- height: var(--_icon-size);
568
+ width: var(--_button-icon-size);
569
+ height: var(--_button-icon-size);
570
570
  flex-shrink: 0;
571
571
  align-items: center;
572
572
  justify-content: center;
@@ -579,21 +579,21 @@ export const buttonStyles = css `
579
579
  ::slotted([slot="start-icon"]),
580
580
  ::slotted([slot="end-icon"]) {
581
581
  flex-shrink: 0;
582
- width: var(--_icon-size);
583
- height: var(--_icon-size);
582
+ width: var(--_button-icon-size);
583
+ height: var(--_button-icon-size);
584
584
  }
585
585
 
586
586
  :host([expandable]) .button {
587
- padding-inline-end: calc(var(--_inline-padding) + var(--_gap) + var(--_disclosure-icon-size));
587
+ padding-inline-end: calc(var(--_button-inline-padding) + var(--_button-gap) + var(--_button-disclosure-icon-size));
588
588
  }
589
589
 
590
590
  .button__disclosure-icon {
591
591
  display: block;
592
592
  position: absolute;
593
593
  top: 50%;
594
- inset-inline-end: var(--_inline-padding);
595
- width: var(--_disclosure-icon-size);
596
- height: var(--_disclosure-icon-size);
594
+ inset-inline-end: var(--_button-inline-padding);
595
+ width: var(--_button-disclosure-icon-size);
596
+ height: var(--_button-disclosure-icon-size);
597
597
  transform: translateY(-50%);
598
598
  }
599
599
  `;