@nldd/design-system 0.8.67 → 0.8.69

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 (151) hide show
  1. package/dist/components/actions/button/button.d.ts +6 -0
  2. package/dist/components/actions/button/button.d.ts.map +1 -1
  3. package/dist/components/actions/button/button.js +12 -0
  4. package/dist/components/actions/button/button.js.map +1 -1
  5. package/dist/components/actions/button/button.styles.js +108 -108
  6. package/dist/components/actions/button/button.template.d.ts.map +1 -1
  7. package/dist/components/actions/button/button.template.js +9 -0
  8. package/dist/components/actions/button/button.template.js.map +1 -1
  9. package/dist/components/actions/icon-button/icon-button.d.ts +9 -0
  10. package/dist/components/actions/icon-button/icon-button.d.ts.map +1 -1
  11. package/dist/components/actions/icon-button/icon-button.js +15 -0
  12. package/dist/components/actions/icon-button/icon-button.js.map +1 -1
  13. package/dist/components/actions/icon-button/icon-button.styles.js +54 -54
  14. package/dist/components/actions/icon-button/icon-button.template.d.ts.map +1 -1
  15. package/dist/components/actions/icon-button/icon-button.template.js +7 -1
  16. package/dist/components/actions/icon-button/icon-button.template.js.map +1 -1
  17. package/dist/components/actions/menu/menu.d.ts +19 -0
  18. package/dist/components/actions/menu/menu.d.ts.map +1 -1
  19. package/dist/components/actions/menu/menu.js +53 -2
  20. package/dist/components/actions/menu/menu.js.map +1 -1
  21. package/dist/components/actions/menu/menu.styles.d.ts.map +1 -1
  22. package/dist/components/actions/menu/menu.styles.js +50 -23
  23. package/dist/components/actions/menu/menu.styles.js.map +1 -1
  24. package/dist/components/actions/menu/menu.template.d.ts.map +1 -1
  25. package/dist/components/actions/menu/menu.template.js +58 -33
  26. package/dist/components/actions/menu/menu.template.js.map +1 -1
  27. package/dist/components/actions/split-button/split-button.d.ts +16 -18
  28. package/dist/components/actions/split-button/split-button.d.ts.map +1 -1
  29. package/dist/components/actions/split-button/split-button.js +28 -54
  30. package/dist/components/actions/split-button/split-button.js.map +1 -1
  31. package/dist/components/actions/split-button/split-button.template.js +1 -1
  32. package/dist/components/actions/split-button/split-button.template.js.map +1 -1
  33. package/dist/components/actions/toolbar/toolbar.d.ts +10 -0
  34. package/dist/components/actions/toolbar/toolbar.d.ts.map +1 -1
  35. package/dist/components/actions/toolbar/toolbar.js +41 -2
  36. package/dist/components/actions/toolbar/toolbar.js.map +1 -1
  37. package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
  38. package/dist/components/actions/toolbar/toolbar.styles.js +16 -2
  39. package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
  40. package/dist/components/components.js +103 -102
  41. package/dist/components/content/avatar/avatar.d.ts +96 -0
  42. package/dist/components/content/avatar/avatar.d.ts.map +1 -0
  43. package/dist/components/content/avatar/avatar.js +210 -0
  44. package/dist/components/content/avatar/avatar.js.map +1 -0
  45. package/dist/components/content/avatar/avatar.styles.d.ts +2 -0
  46. package/dist/components/content/avatar/avatar.styles.d.ts.map +1 -0
  47. package/dist/components/content/avatar/avatar.styles.js +126 -0
  48. package/dist/components/content/avatar/avatar.styles.js.map +1 -0
  49. package/dist/components/content/avatar/avatar.template.d.ts +3 -0
  50. package/dist/components/content/avatar/avatar.template.d.ts.map +1 -0
  51. package/dist/components/content/avatar/avatar.template.js +36 -0
  52. package/dist/components/content/avatar/avatar.template.js.map +1 -0
  53. package/dist/components/content/byline/byline.d.ts +1 -0
  54. package/dist/components/content/byline/byline.d.ts.map +1 -1
  55. package/dist/components/content/byline/byline.js +1 -0
  56. package/dist/components/content/byline/byline.js.map +1 -1
  57. package/dist/components/content/byline/byline.styles.d.ts.map +1 -1
  58. package/dist/components/content/byline/byline.styles.js +15 -5
  59. package/dist/components/content/byline/byline.styles.js.map +1 -1
  60. package/dist/components/content/byline/byline.template.js +11 -11
  61. package/dist/components/content/byline/byline.template.js.map +1 -1
  62. package/dist/components/content/icon/icon-aliases.d.ts.map +1 -1
  63. package/dist/components/content/icon/icon-aliases.js +2 -0
  64. package/dist/components/content/icon/icon-aliases.js.map +1 -1
  65. package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
  66. package/dist/components/content/icon/icon-registry.js +1 -0
  67. package/dist/components/content/icon/icon-registry.js.map +1 -1
  68. package/dist/components/content/image/lqip-encoder-element.js +1 -1
  69. package/dist/components/content/rich-text/rich-text.d.ts +7 -0
  70. package/dist/components/content/rich-text/rich-text.d.ts.map +1 -1
  71. package/dist/components/content/rich-text/rich-text.js +10 -0
  72. package/dist/components/content/rich-text/rich-text.js.map +1 -1
  73. package/dist/components/content/tag/tag.styles.js +23 -23
  74. package/dist/components/content/token/token.styles.js +1 -1
  75. package/dist/components/{index-CXT1jMFt.js → index-Bf4pa5Bp.js} +1 -1
  76. package/dist/components/{index-DWwviobk.js → index-BfOpap4b.js} +1 -1
  77. package/dist/components/{index-Bfw_pYWB.js → index-CXC-Objp.js} +1 -1
  78. package/dist/components/{index-CKnwqp_9.js → index-CfvgUB5p.js} +1 -1
  79. package/dist/components/{index-DO7aT0MT.js → index-DB-i084x.js} +1 -1
  80. package/dist/components/{index-Bqf6o41r.js → index-DZo3DrGQ.js} +1 -1
  81. package/dist/components/{index-DjsXjoZJ.js → index-VwuVCCal.js} +1474 -927
  82. package/dist/components/index.d.ts +1 -0
  83. package/dist/components/index.d.ts.map +1 -1
  84. package/dist/components/index.js +1 -0
  85. package/dist/components/index.js.map +1 -1
  86. package/dist/components/inputs/dropdown/dropdown.styles.js +6 -6
  87. package/dist/components/inputs/segmented-control/segmented-control.styles.js +6 -6
  88. package/dist/components/inputs/text-editor/text-editor.links.d.ts +8 -0
  89. package/dist/components/inputs/text-editor/text-editor.links.d.ts.map +1 -1
  90. package/dist/components/inputs/text-editor/text-editor.links.js +48 -7
  91. package/dist/components/inputs/text-editor/text-editor.links.js.map +1 -1
  92. package/dist/components/inputs/text-editor/text-editor.markdown.d.ts.map +1 -1
  93. package/dist/components/inputs/text-editor/text-editor.markdown.js +11 -0
  94. package/dist/components/inputs/text-editor/text-editor.markdown.js.map +1 -1
  95. package/dist/components/inputs/text-editor/text-editor.styles.d.ts.map +1 -1
  96. package/dist/components/inputs/text-editor/text-editor.styles.js +14 -3
  97. package/dist/components/inputs/text-editor/text-editor.styles.js.map +1 -1
  98. package/dist/components/inputs/toggle-button/toggle-button.styles.js +6 -6
  99. package/dist/components/layout/page-footer/page-footer.d.ts +9 -1
  100. package/dist/components/layout/page-footer/page-footer.d.ts.map +1 -1
  101. package/dist/components/layout/page-footer/page-footer.js +23 -1
  102. package/dist/components/layout/page-footer/page-footer.js.map +1 -1
  103. package/dist/components/layout/page-footer/page-footer.styles.d.ts.map +1 -1
  104. package/dist/components/layout/page-footer/page-footer.styles.js +9 -0
  105. package/dist/components/layout/page-footer/page-footer.styles.js.map +1 -1
  106. package/dist/components/layout/page-sections/hero/hero.styles.js +19 -19
  107. package/dist/components/layout/popover/popover.d.ts.map +1 -1
  108. package/dist/components/layout/popover/popover.js +32 -2
  109. package/dist/components/layout/popover/popover.js.map +1 -1
  110. package/dist/components/layout/sheet/sheet.d.ts +6 -0
  111. package/dist/components/layout/sheet/sheet.d.ts.map +1 -1
  112. package/dist/components/layout/sheet/sheet.js +13 -1
  113. package/dist/components/layout/sheet/sheet.js.map +1 -1
  114. package/dist/components/layout/sheet/sheet.template.d.ts.map +1 -1
  115. package/dist/components/layout/sheet/sheet.template.js +1 -0
  116. package/dist/components/layout/sheet/sheet.template.js.map +1 -1
  117. package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js +2 -2
  118. package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.js +6 -6
  119. package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js +11 -11
  120. package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js +11 -11
  121. package/dist/components/lists-and-tables/list-item/list-item.styles.d.ts.map +1 -1
  122. package/dist/components/lists-and-tables/list-item/list-item.styles.js +14 -7
  123. package/dist/components/lists-and-tables/list-item/list-item.styles.js.map +1 -1
  124. package/dist/components/lists-and-tables/table/table.styles.d.ts.map +1 -1
  125. package/dist/components/lists-and-tables/table/table.styles.js +2 -1
  126. package/dist/components/lists-and-tables/table/table.styles.js.map +1 -1
  127. package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +14 -14
  128. package/dist/components/navigation/pagination/pagination.styles.js +9 -9
  129. package/dist/components/navigation/tab-bar/tab-bar.styles.js +6 -6
  130. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts +14 -2
  131. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts.map +1 -1
  132. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js +14 -2
  133. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js.map +1 -1
  134. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.d.ts.map +1 -1
  135. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js +3 -2
  136. package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js.map +1 -1
  137. package/dist/components/status-and-feedback/badge/badge.styles.js +23 -23
  138. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.d.ts +3 -2
  139. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.d.ts.map +1 -1
  140. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.js +2 -1
  141. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.js.map +1 -1
  142. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.template.d.ts.map +1 -1
  143. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.template.js +8 -1
  144. package/dist/components/status-and-feedback/inline-dialog/inline-dialog.template.js.map +1 -1
  145. package/dist/css/rich-text.css +19 -0
  146. package/dist/css/settings.css +253 -246
  147. package/dist/utilities/popup-anchor-controller.d.ts +63 -0
  148. package/dist/utilities/popup-anchor-controller.d.ts.map +1 -0
  149. package/dist/utilities/popup-anchor-controller.js +63 -0
  150. package/dist/utilities/popup-anchor-controller.js.map +1 -0
  151. package/package.json +5 -1
package/dist/components/{index-DjsXjoZJ.js → index-VwuVCCal.js} RENAMED
@@ -37,16 +37,16 @@ const buttonStyles = css$1`
37
37
  --_disclosure-icon-size: var(--primitives-space-20);
38
38
  --_supporting-font: var(--semantics-buttons-md-supporting-text-font);
39
39
  --_background-color: var(--semantics-buttons-neutral-tinted-background-color);
40
- --_primary-content-color: var(--semantics-buttons-neutral-tinted-primary-content-color);
41
- --_secondary-content-color: var(--semantics-buttons-neutral-tinted-secondary-content-color);
40
+ --_primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
41
+ --_secondary-content-color: var(--semantics-buttons-neutral-tinted-content-secondary-color);
42
42
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
43
43
  --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
44
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
45
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-secondary-content-color);
44
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
45
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-secondary-color);
46
46
  --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
47
47
  --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
48
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
49
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-secondary-content-color);
48
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
49
+ --_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-secondary-color);
50
50
  --_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
51
51
 
52
52
  ${inheritedTextReset}
@@ -95,93 +95,93 @@ const buttonStyles = css$1`
95
95
 
96
96
  :host([variant="neutral-base"]) {
97
97
  --_background-color: var(--semantics-buttons-neutral-base-background-color);
98
- --_primary-content-color: var(--semantics-buttons-neutral-base-primary-content-color);
99
- --_secondary-content-color: var(--semantics-buttons-neutral-base-secondary-content-color);
98
+ --_primary-content-color: var(--semantics-buttons-neutral-base-content-color);
99
+ --_secondary-content-color: var(--semantics-buttons-neutral-base-content-secondary-color);
100
100
  --_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
101
101
  --_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
102
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-primary-content-color);
103
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-hovered-secondary-content-color);
102
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
103
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-secondary-color);
104
104
  --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
105
105
  --_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
106
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-primary-content-color);
107
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-active-secondary-content-color);
106
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
107
+ --_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-active-content-secondary-color);
108
108
  --_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
109
109
  }
110
110
 
111
111
  :host([variant="neutral-transparent"]) {
112
112
  --_background-color: transparent;
113
- --_primary-content-color: var(--semantics-buttons-neutral-transparent-primary-content-color);
114
- --_secondary-content-color: var(--semantics-buttons-neutral-transparent-secondary-content-color);
113
+ --_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
114
+ --_secondary-content-color: var(--semantics-buttons-neutral-transparent-content-secondary-color);
115
115
  --_highlight-border-color: transparent;
116
116
  --_is-hovered-background-color: transparent;
117
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-primary-content-color);
118
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-secondary-content-color);
117
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
118
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-secondary-color);
119
119
  --_is-hovered-highlight-border-color: transparent;
120
120
  --_is-active-background-color: transparent;
121
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-primary-content-color);
122
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-secondary-content-color);
121
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
122
+ --_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-secondary-color);
123
123
  --_is-active-highlight-border-color: transparent;
124
124
  }
125
125
 
126
126
  :host([variant="accent-filled"]),
127
127
  :host([variant="primary"]) {
128
128
  --_background-color: var(--semantics-buttons-accent-filled-background-color);
129
- --_primary-content-color: var(--semantics-buttons-accent-filled-primary-content-color);
130
- --_secondary-content-color: var(--semantics-buttons-accent-filled-secondary-content-color);
129
+ --_primary-content-color: var(--semantics-buttons-accent-filled-content-color);
130
+ --_secondary-content-color: var(--semantics-buttons-accent-filled-content-secondary-color);
131
131
  --_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
132
132
  --_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
133
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-primary-content-color);
134
- --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-hovered-secondary-content-color);
133
+ --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
134
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-secondary-color);
135
135
  --_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
136
136
  --_is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
137
- --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-primary-content-color);
138
- --_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-active-secondary-content-color);
137
+ --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
138
+ --_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-active-content-secondary-color);
139
139
  --_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
140
140
  }
141
141
 
142
142
  :host([variant="accent-transparent"]) {
143
143
  --_background-color: transparent;
144
- --_primary-content-color: var(--semantics-buttons-accent-transparent-primary-content-color);
145
- --_secondary-content-color: var(--semantics-buttons-accent-transparent-secondary-content-color);
144
+ --_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
145
+ --_secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
146
146
  --_highlight-border-color: transparent;
147
147
  --_is-hovered-background-color: transparent;
148
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-primary-content-color);
149
- --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-secondary-content-color);
148
+ --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
149
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-secondary-color);
150
150
  --_is-hovered-highlight-border-color: transparent;
151
151
  --_is-active-background-color: transparent;
152
- --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-primary-content-color);
153
- --_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-secondary-content-color);
152
+ --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
153
+ --_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-secondary-color);
154
154
  --_is-active-highlight-border-color: transparent;
155
155
  }
156
156
 
157
157
  :host([variant="critical-tinted"]),
158
158
  :host([variant="destructive"]) {
159
159
  --_background-color: var(--semantics-buttons-critical-tinted-background-color);
160
- --_primary-content-color: var(--semantics-buttons-critical-tinted-primary-content-color);
161
- --_secondary-content-color: var(--semantics-buttons-critical-tinted-secondary-content-color);
160
+ --_primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
161
+ --_secondary-content-color: var(--semantics-buttons-critical-tinted-content-secondary-color);
162
162
  --_highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
163
163
  --_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
164
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-primary-content-color);
165
- --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-secondary-content-color);
164
+ --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
165
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-secondary-color);
166
166
  --_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
167
167
  --_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
168
- --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-primary-content-color);
169
- --_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-active-secondary-content-color);
168
+ --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
169
+ --_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-secondary-color);
170
170
  --_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
171
171
  }
172
172
 
173
173
  :host([variant="critical-transparent"]) {
174
174
  --_background-color: transparent;
175
- --_primary-content-color: var(--semantics-buttons-critical-transparent-primary-content-color);
176
- --_secondary-content-color: var(--semantics-buttons-critical-transparent-secondary-content-color);
175
+ --_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
176
+ --_secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
177
177
  --_highlight-border-color: transparent;
178
178
  --_is-hovered-background-color: transparent;
179
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-primary-content-color);
180
- --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-secondary-content-color);
179
+ --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
180
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-secondary-color);
181
181
  --_is-hovered-highlight-border-color: transparent;
182
182
  --_is-active-background-color: transparent;
183
- --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-primary-content-color);
184
- --_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-secondary-content-color);
183
+ --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
184
+ --_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-secondary-color);
185
185
  --_is-active-highlight-border-color: transparent;
186
186
  }
187
187
 
@@ -193,31 +193,31 @@ const buttonStyles = css$1`
193
193
 
194
194
  :host([variant="inherit-tinted"]) {
195
195
  --_background-color: var(--semantics-buttons-inherit-tinted-background-color);
196
- --_primary-content-color: var(--semantics-buttons-inherit-tinted-primary-content-color);
197
- --_secondary-content-color: var(--semantics-buttons-inherit-tinted-secondary-content-color);
196
+ --_primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
197
+ --_secondary-content-color: var(--semantics-buttons-inherit-tinted-content-secondary-color);
198
198
  --_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
199
199
  --_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-hovered-background-color);
200
- --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-primary-content-color);
201
- --_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-secondary-content-color);
200
+ --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-content-color);
201
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-content-secondary-color);
202
202
  --_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-hovered-highlight-border-color);
203
203
  --_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-active-background-color);
204
- --_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-active-primary-content-color);
205
- --_is-active-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-active-secondary-content-color);
204
+ --_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-active-content-color);
205
+ --_is-active-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-active-content-secondary-color);
206
206
  --_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-active-highlight-border-color);
207
207
  }
208
208
 
209
209
  :host([variant="inherit-filled"]) {
210
210
  --_background-color: var(--semantics-buttons-inherit-filled-background-color);
211
- --_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-primary-content-color));
212
- --_secondary-content-color: var(--semantics-buttons-inherit-filled-secondary-content-color);
211
+ --_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
212
+ --_secondary-content-color: var(--semantics-buttons-inherit-filled-content-secondary-color);
213
213
  --_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
214
214
  --_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-hovered-background-color);
215
- --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-primary-content-color);
216
- --_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-secondary-content-color);
215
+ --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-content-color);
216
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-content-secondary-color);
217
217
  --_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-hovered-highlight-border-color);
218
218
  --_is-active-background-color: var(--semantics-buttons-inherit-filled-is-active-background-color);
219
- --_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-active-primary-content-color);
220
- --_is-active-secondary-content-color: var(--semantics-buttons-inherit-filled-is-active-secondary-content-color);
219
+ --_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-active-content-color);
220
+ --_is-active-secondary-content-color: var(--semantics-buttons-inherit-filled-is-active-content-secondary-color);
221
221
  --_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-active-highlight-border-color);
222
222
  }
223
223
 
@@ -238,108 +238,108 @@ const buttonStyles = css$1`
238
238
 
239
239
  :host([expanded]) {
240
240
  --_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
241
- --_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-primary-content-color);
242
- --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-secondary-content-color);
241
+ --_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
242
+ --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-secondary-color);
243
243
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
244
244
  --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
245
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-primary-content-color);
246
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-secondary-content-color);
245
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
246
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-secondary-color);
247
247
  --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
248
248
  --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
249
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-primary-content-color);
250
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-secondary-content-color);
249
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
250
+ --_is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-secondary-color);
251
251
  --_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
252
252
  }
253
253
 
254
254
  :host([expanded][variant="neutral-base"]) {
255
255
  --_background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
256
- --_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-primary-content-color);
257
- --_secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-secondary-content-color);
256
+ --_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
257
+ --_secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-secondary-color);
258
258
  --_highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
259
259
  --_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
260
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-primary-content-color);
261
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-secondary-content-color);
260
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
261
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-secondary-color);
262
262
  --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
263
263
  --_is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
264
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-primary-content-color);
265
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-secondary-content-color);
264
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
265
+ --_is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-secondary-color);
266
266
  --_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
267
267
  }
268
268
 
269
269
  :host([expanded][variant="neutral-transparent"]) {
270
270
  --_background-color: transparent;
271
- --_primary-content-color: var(--semantics-buttons-neutral-transparent-primary-content-color);
272
- --_secondary-content-color: var(--semantics-buttons-neutral-transparent-secondary-content-color);
271
+ --_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
272
+ --_secondary-content-color: var(--semantics-buttons-neutral-transparent-content-secondary-color);
273
273
  --_highlight-border-color: transparent;
274
274
  --_is-hovered-background-color: transparent;
275
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-primary-content-color);
276
- --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-secondary-content-color);
275
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
276
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-secondary-color);
277
277
  --_is-hovered-highlight-border-color: transparent;
278
278
  --_is-active-background-color: transparent;
279
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-primary-content-color);
280
- --_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-secondary-content-color);
279
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
280
+ --_is-active-secondary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-secondary-color);
281
281
  --_is-active-highlight-border-color: transparent;
282
282
  }
283
283
 
284
284
  :host([expanded][variant="accent-filled"]),
285
285
  :host([expanded][variant="primary"]) {
286
286
  --_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
287
- --_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-primary-content-color);
288
- --_secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-secondary-content-color);
287
+ --_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
288
+ --_secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-secondary-color);
289
289
  --_highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
290
290
  --_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
291
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-primary-content-color);
292
- --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-secondary-content-color);
291
+ --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
292
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-secondary-color);
293
293
  --_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
294
294
  --_is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
295
- --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-primary-content-color);
296
- --_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-secondary-content-color);
295
+ --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
296
+ --_is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-secondary-color);
297
297
  --_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
298
298
  }
299
299
 
300
300
  :host([expanded][variant="accent-transparent"]) {
301
301
  --_background-color: transparent;
302
- --_primary-content-color: var(--semantics-buttons-accent-transparent-primary-content-color);
303
- --_secondary-content-color: var(--semantics-buttons-accent-transparent-secondary-content-color);
302
+ --_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
303
+ --_secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
304
304
  --_highlight-border-color: transparent;
305
305
  --_is-hovered-background-color: transparent;
306
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-primary-content-color);
307
- --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-secondary-content-color);
306
+ --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
307
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-secondary-color);
308
308
  --_is-hovered-highlight-border-color: transparent;
309
309
  --_is-active-background-color: transparent;
310
- --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-primary-content-color);
311
- --_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-secondary-content-color);
310
+ --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
311
+ --_is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-secondary-color);
312
312
  --_is-active-highlight-border-color: transparent;
313
313
  }
314
314
 
315
315
  :host([expanded][variant="critical-tinted"]),
316
316
  :host([expanded][variant="destructive"]) {
317
317
  --_background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
318
- --_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-primary-content-color);
319
- --_secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-secondary-content-color);
318
+ --_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
319
+ --_secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-secondary-color);
320
320
  --_highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
321
321
  --_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
322
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-primary-content-color);
323
- --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-secondary-content-color);
322
+ --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
323
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-secondary-color);
324
324
  --_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
325
325
  --_is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
326
- --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-primary-content-color);
327
- --_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-secondary-content-color);
326
+ --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
327
+ --_is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-secondary-color);
328
328
  --_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
329
329
  }
330
330
 
331
331
  :host([expanded][variant="critical-transparent"]) {
332
332
  --_background-color: transparent;
333
- --_primary-content-color: var(--semantics-buttons-critical-transparent-primary-content-color);
334
- --_secondary-content-color: var(--semantics-buttons-critical-transparent-secondary-content-color);
333
+ --_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
334
+ --_secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
335
335
  --_highlight-border-color: transparent;
336
336
  --_is-hovered-background-color: transparent;
337
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-primary-content-color);
338
- --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-secondary-content-color);
337
+ --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
338
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-secondary-color);
339
339
  --_is-hovered-highlight-border-color: transparent;
340
340
  --_is-active-background-color: transparent;
341
- --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-primary-content-color);
342
- --_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-secondary-content-color);
341
+ --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
342
+ --_is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-secondary-color);
343
343
  --_is-active-highlight-border-color: transparent;
344
344
  }
345
345
 
@@ -349,31 +349,31 @@ const buttonStyles = css$1`
349
349
  specificity and later source order, so it would otherwise win. */
350
350
  :host([expanded][variant="inherit-tinted"]) {
351
351
  --_background-color: var(--semantics-buttons-inherit-tinted-is-expanded-background-color);
352
- --_primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-primary-content-color);
353
- --_secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-secondary-content-color);
352
+ --_primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-content-color);
353
+ --_secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-content-secondary-color);
354
354
  --_highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-highlight-border-color);
355
355
  --_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-background-color);
356
- --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-primary-content-color);
357
- --_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-secondary-content-color);
356
+ --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-color);
357
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-secondary-color);
358
358
  --_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-highlight-border-color);
359
359
  --_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-background-color);
360
- --_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-primary-content-color);
361
- --_is-active-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-secondary-content-color);
360
+ --_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-content-color);
361
+ --_is-active-secondary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-content-secondary-color);
362
362
  --_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-highlight-border-color);
363
363
  }
364
364
 
365
365
  :host([expanded][variant="inherit-filled"]) {
366
366
  --_background-color: var(--semantics-buttons-inherit-filled-is-expanded-background-color);
367
- --_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-is-expanded-primary-content-color));
368
- --_secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-secondary-content-color);
367
+ --_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-is-expanded-content-color));
368
+ --_secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-content-secondary-color);
369
369
  --_highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-highlight-border-color);
370
370
  --_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-background-color);
371
- --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-primary-content-color);
372
- --_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-secondary-content-color);
371
+ --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-color);
372
+ --_is-hovered-secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-secondary-color);
373
373
  --_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-highlight-border-color);
374
374
  --_is-active-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-background-color);
375
- --_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-primary-content-color);
376
- --_is-active-secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-secondary-content-color);
375
+ --_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-content-color);
376
+ --_is-active-secondary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-content-secondary-color);
377
377
  --_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-highlight-border-color);
378
378
  }
379
379
 
@@ -665,6 +665,7 @@ function template$n(helpers) {
665
665
  ></nldd-activity-indicator>
666
666
  </div>
667
667
  ` : nothing;
668
+ const popupSlot = html$1`<slot name="popup" @slotchange=${this._popup.handleSlotChange}></slot>`;
668
669
  if (this.href) {
669
670
  const resolvedRel = this._resolvedRel();
670
671
  return html$1`
@@ -677,12 +678,14 @@ function template$n(helpers) {
677
678
  aria-haspopup=${this.popupType || nothing}
678
679
  aria-expanded=${ariaExpanded}
679
680
  aria-busy=${ariaBusy}
681
+ @pointerdown=${this._popup.handlePointerdown}
680
682
  @click=${helpers.handleClick}
681
683
  >
682
684
  ${content2}
683
685
  ${renderOpensInNewTabHint ? html$1`<span class="button__opens-in-new-tab-hint">${opensInNewTabHint}</span>` : nothing}
684
686
  </a>
685
687
  ${loadingIndicator}
688
+ ${popupSlot}
686
689
  `;
687
690
  }
688
691
  return html$1`
@@ -697,20 +700,22 @@ function template$n(helpers) {
697
700
  popovertarget=${this.popovertarget || nothing}
698
701
  .popoverTargetElement=${this.popoverTargetElement}
699
702
  .popoverTargetAction=${this.popoverTargetAction}
703
+ @pointerdown=${this._popup.handlePointerdown}
700
704
  @click=${helpers.handleClick}
701
705
  >
702
706
  ${content2}
703
707
  </button>
704
708
  ${loadingIndicator}
709
+ ${popupSlot}
705
710
  `;
706
711
  }
707
- var __defProp$1x = Object.defineProperty;
708
- var __decorateClass$1y = (decorators, target, key, kind) => {
712
+ var __defProp$1y = Object.defineProperty;
713
+ var __decorateClass$1z = (decorators, target, key, kind) => {
709
714
  var result = void 0;
710
715
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
711
716
  if (decorator = decorators[i])
712
717
  result = decorator(target, key, result) || result;
713
- if (result) __defProp$1x(target, key, result);
718
+ if (result) __defProp$1y(target, key, result);
714
719
  return result;
715
720
  };
716
721
  function withTranslations(Base, defaults) {
@@ -737,7 +742,7 @@ function withTranslations(Base, defaults) {
737
742
  }
738
743
  }
739
744
  }
740
- __decorateClass$1y([
745
+ __decorateClass$1z([
741
746
  property({ type: Object })
742
747
  ], TranslationsMixin.prototype, "translations");
743
748
  return TranslationsMixin;
@@ -751,6 +756,54 @@ function reflectNonDefault(defaultValue) {
751
756
  const nlddButtonTranslations = {
752
757
  "components.button.opens-in-new-tab-text": "Opent in nieuw tabblad"
753
758
  };
759
+ const OVERLAY_SELECTOR = "nldd-menu, nldd-popover";
760
+ class PopupAnchorController {
761
+ constructor(host, options = {}) {
762
+ this._overlay = null;
763
+ this._wasOpenOnPointerdown = false;
764
+ this.handleSlotChange = (event) => {
765
+ const slot = event.target;
766
+ const overlay = slot.assignedElements().find((el) => el.matches(OVERLAY_SELECTOR)) ?? null;
767
+ this.setOverlay(overlay);
768
+ };
769
+ this.handlePointerdown = () => {
770
+ this._wasOpenOnPointerdown = this._overlay?.matches(":popover-open") ?? false;
771
+ };
772
+ this._anchorFor = options.anchorFor ?? (() => host);
773
+ this._onChange = options.onChange;
774
+ }
775
+ /** The slotted overlay, or null when none is slotted. */
776
+ get overlay() {
777
+ return this._overlay;
778
+ }
779
+ /** Adopt an overlay (or none). Releases the previous one first: left
780
+ * anchored, a removed overlay keeps positioning against this control and
781
+ * syncing `expanded` onto it, and the pair can never be collected. */
782
+ setOverlay(overlay) {
783
+ if (overlay === this._overlay) return;
784
+ const previous = this._overlay;
785
+ if (previous) previous.anchorElement = null;
786
+ this._overlay = overlay;
787
+ this.anchor();
788
+ this._onChange?.(overlay, previous);
789
+ }
790
+ /** (Re-)anchor the current overlay. Call once the anchor target exists when
791
+ * it resolves later than the first `slotchange`. */
792
+ anchor() {
793
+ const target = this._anchorFor();
794
+ if (this._overlay && target) this._overlay.anchorElement = target;
795
+ }
796
+ /** Call from the control's click handler. Returns true when the click was
797
+ * consumed (an overlay is slotted, so the control is its invoker and
798
+ * neither submits a form nor navigates); false to fall through. */
799
+ handleClick(event) {
800
+ if (!this._overlay) return false;
801
+ const wasOpen = event.detail > 0 && this._wasOpenOnPointerdown;
802
+ this._wasOpenOnPointerdown = false;
803
+ if (!wasOpen && !this._overlay.matches(":popover-open")) this._overlay.showPopover();
804
+ return true;
805
+ }
806
+ }
754
807
  const iconStyles = css$1`
755
808
  :host {
756
809
  box-sizing: border-box;
@@ -953,6 +1006,8 @@ const aliases = {
953
1006
  "document": "file",
954
1007
  // file-text
955
1008
  "text-document": "file-text",
1009
+ // file-text-batch-check-plus
1010
+ "new-text-document": "file-text-batch-check-plus",
956
1011
  // file-text-stack
957
1012
  "documents": "file-text-stack",
958
1013
  "text-documents": "file-text-stack",
@@ -1301,6 +1356,7 @@ const iconRegistry = /* @__PURE__ */ new Map([
1301
1356
  ["file-box", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M15 12a1 1 0 0 1-1 1h-4a1 1 0 1 1 0-2h4a1 1 0 0 1 1 1"/>\n <path fill="currentColor" d="M19 3a3 3 0 0 1 3 3v2c0 .56-.44 1-1 1v9c0 1.67-1.33 3-3 3H6c-1.67 0-3-1.33-3-3V9c-.56 0-1-.44-1-1V6a3 3 0 0 1 3-3zM5 18a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9H5zM5 5a1 1 0 0 0-1 1v1h16V6a1 1 0 0 0-1-1z"/>\n</svg>'],
1302
1357
  ["file-text", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M7 4a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V9h-3a2 2 0 0 1-2-2V4zm8 1.414L16.586 7H15zM4 5a3 3 0 0 1 3-3h7a1 1 0 0 1 .707.293l5 5A1 1 0 0 1 20 8v11a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3zm4 3h3v2H8zm0 4h8v2H8zm0 4h8v2H8z"/>\n</svg>'],
1303
1358
  ["file-text-batch-check-mark", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M18 13a5 5 0 1 1 0 10 5 5 0 0 1 0-10m-.75 5.44-1.47-1.47-1.06 1.06 2.53 2.53 4.03-4.03-1.06-1.06z"/>\n <path fill="currentColor" d="M13 2a1 1 0 0 1 .7.3l5 5a1 1 0 0 1 .3.7v4.08a6 6 0 0 0-2 0V9h-3a2 2 0 0 1-2-2V4H6a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h6.34a6 6 0 0 0 1.19 2H6a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zm1 5h1.59L14 5.41z"/>\n <path fill="currentColor" d="M12.34 16q-.34.95-.34 2H7v-2zM15 12.8q-.83.49-1.47 1.2H7v-2h8zM10 10H7V8h3z"/>\n</svg>'],
1359
+ ["file-text-batch-check-plus", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M18 13a5 5 0 1 1 0 10 5 5 0 0 1 0-10m-.75 4.25H15v1.5h2.25V21h1.5v-2.25H21v-1.5h-2.25V15h-1.5z"/>\n <path fill="currentColor" d="M13 2a1 1 0 0 1 .7.3l5 5a1 1 0 0 1 .3.7v4.08a6 6 0 0 0-2 0V9h-3a2 2 0 0 1-2-2V4H6a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h6.34a6 6 0 0 0 1.19 2H6a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zm1 5h1.59L14 5.41z"/>\n <path fill="currentColor" d="M12.34 16q-.34.95-.34 2H7v-2zM15 12.8q-.83.49-1.47 1.2H7v-2h8zM10 10H7V8h3z"/>\n</svg>'],
1304
1360
  ["file-text-pencil", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M14 2a1 1 0 0 1 .7.3l1.68 1.67-3.35 3.35Q13 7.17 13 7V4H7a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-5.34l2-2V19a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3z"/>\n <path fill="currentColor" d="M17.17 4.59a2 2 0 0 1 2.83 0L21.42 6a2 2 0 0 1 0 2.83L12.25 18H8v-4.24zm-7.17 10V16h1.42l5.75-5.76-1.4-1.41zm7.17-7.18 1.42 1.42L20 7.4 18.6 6z"/>\n <path fill="currentColor" d="M16 18h-2.34l2-2H16zm-4-9.65L10.35 10H8V8h4z"/>\n</svg>'],
1305
1361
  ["file-text-stack", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M5 19a1 1 0 0 0 1 1h12a2 2 0 0 1-2 2H6a3 3 0 0 1-3-3V7c0-1.1.9-2 2-2z"/>\n <path fill="currentColor" d="M17 15h-7v-2h7zm0-3.5h-7v-2h7zM13 8h-3V6h3z"/>\n <path fill="currentColor" d="M15.5 2c.69.07 1.39.39 1.88.88l2.74 2.74A3 3 0 0 1 21 7.74V16a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zM9 4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V7.5h-2.5a1 1 0 0 1-1-1V4z"/>\n</svg>'],
1306
1362
  ["flag", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" fill-rule="evenodd" d="m5 3.67 2.04-.34a8 8 0 0 1 3.84.3l2.24.74a8 8 0 0 0 3.84.3L21 4v11l-4.04.67a8 8 0 0 1-3.38-.16l-2.7-.88a8 8 0 0 0-3.84-.3L5 14.67V22H3V2h2zm5.25 1.86c-1.74-.59-3.5-.13-5.25.16v6.95l1.71-.29a10 10 0 0 1 4.8.38l2.24.74a6 6 0 0 0 2.88.23l2.37-.4V6.36l-1.71.29a10 10 0 0 1-4.8-.38z" clip-rule="evenodd"/>\n</svg>'],
@@ -1415,14 +1471,14 @@ const iconRegistry = /* @__PURE__ */ new Map([
1415
1471
  ["underlined", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M20 22H4v-2h16zM8 13c0 1.33 1.43 3 4 3s4-1.67 4-3V2h2v11c0 2.76-2.69 5-6 5s-6-2.24-6-5V2h2z"/>\n</svg>'],
1416
1472
  ["wheat", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n <path fill="currentColor" d="M8 22H6v-3h2zm10 0h-2v-3h2zM3 14a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4m2 0a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4M3 10a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4m2 0a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4M3 6a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4m2 0a4 4 0 0 1 4 4 4 4 0 0 1-4-4m8 0a4 4 0 0 1-4 4 4 4 0 0 1 4-4M7 2a4 4 0 0 1 0 5.29A4 4 0 0 1 7 2m10 0a4 4 0 0 1 0 5.29A4 4 0 0 1 17 2"/>\n</svg>']
1417
1473
  ]);
1418
- var __defProp$1w = Object.defineProperty;
1419
- var __getOwnPropDesc$1u = Object.getOwnPropertyDescriptor;
1420
- var __decorateClass$1x = (decorators, target, key, kind) => {
1421
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1u(target, key) : target;
1474
+ var __defProp$1x = Object.defineProperty;
1475
+ var __getOwnPropDesc$1v = Object.getOwnPropertyDescriptor;
1476
+ var __decorateClass$1y = (decorators, target, key, kind) => {
1477
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1v(target, key) : target;
1422
1478
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
1423
1479
  if (decorator = decorators[i])
1424
1480
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
1425
- if (kind && result) __defProp$1w(target, key, result);
1481
+ if (kind && result) __defProp$1x(target, key, result);
1426
1482
  return result;
1427
1483
  };
1428
1484
  const ICONS = [
@@ -1462,19 +1518,19 @@ let NLDDIcon = class extends LitElement {
1462
1518
  }
1463
1519
  };
1464
1520
  NLDDIcon.styles = iconStyles;
1465
- __decorateClass$1x([
1521
+ __decorateClass$1y([
1466
1522
  property({ type: String })
1467
1523
  ], NLDDIcon.prototype, "name", 2);
1468
- __decorateClass$1x([
1524
+ __decorateClass$1y([
1469
1525
  property({ reflect: true, converter: reflectNonDefault("") })
1470
1526
  ], NLDDIcon.prototype, "size", 2);
1471
- __decorateClass$1x([
1527
+ __decorateClass$1y([
1472
1528
  property({ reflect: true, converter: reflectNonDefault("") })
1473
1529
  ], NLDDIcon.prototype, "color", 2);
1474
- __decorateClass$1x([
1530
+ __decorateClass$1y([
1475
1531
  state()
1476
1532
  ], NLDDIcon.prototype, "_iconSvg", 2);
1477
- NLDDIcon = __decorateClass$1x([
1533
+ NLDDIcon = __decorateClass$1y([
1478
1534
  customElement("nldd-icon")
1479
1535
  ], NLDDIcon);
1480
1536
  const icon = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -1495,6 +1551,7 @@ const activityIndicatorStyles = css$1`
1495
1551
 
1496
1552
  :host {
1497
1553
  --_circle-size: var(--primitives-space-32);
1554
+ --_color: var(--context-content-color, currentColor);
1498
1555
  --_track-opacity: 0.25;
1499
1556
  --_stroke-width: 2;
1500
1557
  --_rotation-duration: 0.8s;
@@ -1664,7 +1721,7 @@ const activityIndicatorStyles = css$1`
1664
1721
 
1665
1722
  .activity-indicator__track {
1666
1723
  opacity: var(--_track-opacity);
1667
- stroke: currentColor;
1724
+ stroke: var(--_color);
1668
1725
  stroke-width: var(--_stroke-width);
1669
1726
  }
1670
1727
 
@@ -1673,7 +1730,7 @@ const activityIndicatorStyles = css$1`
1673
1730
  element visibly wobbles when it sits at a sub-pixel position (next to a
1674
1731
  label, or overlaid on a button). Mirrors nldd-progress-circle. */
1675
1732
  .activity-indicator__indicator {
1676
- stroke: currentColor;
1733
+ stroke: var(--_color);
1677
1734
  stroke-width: var(--_stroke-width);
1678
1735
  stroke-linecap: round;
1679
1736
  stroke-dasharray: 25 100;
@@ -1767,14 +1824,14 @@ function activityIndicatorTemplate(component) {
1767
1824
  const nlddActivityIndicatorTranslations = {
1768
1825
  "components.activity-indicator.loading-text": "Laden"
1769
1826
  };
1770
- var __defProp$1v = Object.defineProperty;
1771
- var __getOwnPropDesc$1t = Object.getOwnPropertyDescriptor;
1772
- var __decorateClass$1w = (decorators, target, key, kind) => {
1773
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1t(target, key) : target;
1827
+ var __defProp$1w = Object.defineProperty;
1828
+ var __getOwnPropDesc$1u = Object.getOwnPropertyDescriptor;
1829
+ var __decorateClass$1x = (decorators, target, key, kind) => {
1830
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1u(target, key) : target;
1774
1831
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
1775
1832
  if (decorator = decorators[i])
1776
1833
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
1777
- if (kind && result) __defProp$1v(target, key, result);
1834
+ if (kind && result) __defProp$1w(target, key, result);
1778
1835
  return result;
1779
1836
  };
1780
1837
  const DELAY_MS = 1e3;
@@ -1857,44 +1914,44 @@ let NLDDActivityIndicator = class extends LitElement {
1857
1914
  }
1858
1915
  };
1859
1916
  NLDDActivityIndicator.styles = activityIndicatorStyles;
1860
- __decorateClass$1w([
1917
+ __decorateClass$1x([
1861
1918
  property({ reflect: true, converter: reflectNonDefault("32") })
1862
1919
  ], NLDDActivityIndicator.prototype, "size", 2);
1863
- __decorateClass$1w([
1920
+ __decorateClass$1x([
1864
1921
  property({ type: Boolean, reflect: true, attribute: "show-text" })
1865
1922
  ], NLDDActivityIndicator.prototype, "showText", 2);
1866
- __decorateClass$1w([
1923
+ __decorateClass$1x([
1867
1924
  property({ reflect: true, converter: reflectNonDefault("") })
1868
1925
  ], NLDDActivityIndicator.prototype, "text", 2);
1869
- __decorateClass$1w([
1926
+ __decorateClass$1x([
1870
1927
  property({ reflect: true, converter: reflectNonDefault("default") })
1871
1928
  ], NLDDActivityIndicator.prototype, "timing", 2);
1872
- __decorateClass$1w([
1929
+ __decorateClass$1x([
1873
1930
  property({ type: Boolean, reflect: true })
1874
1931
  ], NLDDActivityIndicator.prototype, "complete", 2);
1875
- __decorateClass$1w([
1932
+ __decorateClass$1x([
1876
1933
  property({ type: Boolean, reflect: true, attribute: "no-backdrop" })
1877
1934
  ], NLDDActivityIndicator.prototype, "noBackdrop", 2);
1878
- __decorateClass$1w([
1935
+ __decorateClass$1x([
1879
1936
  property({ type: Object })
1880
1937
  ], NLDDActivityIndicator.prototype, "translations", 2);
1881
- __decorateClass$1w([
1938
+ __decorateClass$1x([
1882
1939
  state()
1883
1940
  ], NLDDActivityIndicator.prototype, "_visible", 2);
1884
- __decorateClass$1w([
1941
+ __decorateClass$1x([
1885
1942
  state()
1886
1943
  ], NLDDActivityIndicator.prototype, "_hasContent", 2);
1887
- NLDDActivityIndicator = __decorateClass$1w([
1944
+ NLDDActivityIndicator = __decorateClass$1x([
1888
1945
  customElement("nldd-activity-indicator")
1889
1946
  ], NLDDActivityIndicator);
1890
- var __defProp$1u = Object.defineProperty;
1891
- var __getOwnPropDesc$1s = Object.getOwnPropertyDescriptor;
1892
- var __decorateClass$1v = (decorators, target, key, kind) => {
1893
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1s(target, key) : target;
1947
+ var __defProp$1v = Object.defineProperty;
1948
+ var __getOwnPropDesc$1t = Object.getOwnPropertyDescriptor;
1949
+ var __decorateClass$1w = (decorators, target, key, kind) => {
1950
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1t(target, key) : target;
1894
1951
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
1895
1952
  if (decorator = decorators[i])
1896
1953
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
1897
- if (kind && result) __defProp$1u(target, key, result);
1954
+ if (kind && result) __defProp$1v(target, key, result);
1898
1955
  return result;
1899
1956
  };
1900
1957
  let NLDDButton = class extends withTranslations(LitElement, nlddButtonTranslations) {
@@ -1924,6 +1981,7 @@ let NLDDButton = class extends withTranslations(LitElement, nlddButtonTranslatio
1924
1981
  this.target = void 0;
1925
1982
  this.rel = void 0;
1926
1983
  this._warnedA11y = false;
1984
+ this._popup = new PopupAnchorController(this);
1927
1985
  }
1928
1986
  updated(changedProperties) {
1929
1987
  if (changedProperties.has("width")) {
@@ -1948,6 +2006,10 @@ let NLDDButton = class extends withTranslations(LitElement, nlddButtonTranslatio
1948
2006
  e.stopPropagation();
1949
2007
  return;
1950
2008
  }
2009
+ if (this._popup.handleClick(e)) {
2010
+ e.preventDefault();
2011
+ return;
2012
+ }
1951
2013
  if (this.href) return;
1952
2014
  if (this.type === "submit") this._internals.form?.requestSubmit();
1953
2015
  else if (this.type === "reset") this._internals.form?.reset();
@@ -1973,76 +2035,76 @@ let NLDDButton = class extends withTranslations(LitElement, nlddButtonTranslatio
1973
2035
  };
1974
2036
  NLDDButton.styles = buttonStyles;
1975
2037
  NLDDButton.formAssociated = true;
1976
- __decorateClass$1v([
2038
+ __decorateClass$1w([
1977
2039
  property({ reflect: true, converter: reflectNonDefault("neutral-tinted") })
1978
2040
  ], NLDDButton.prototype, "variant", 2);
1979
- __decorateClass$1v([
2041
+ __decorateClass$1w([
1980
2042
  property({ reflect: true, converter: reflectNonDefault("md") })
1981
2043
  ], NLDDButton.prototype, "size", 2);
1982
- __decorateClass$1v([
2044
+ __decorateClass$1w([
1983
2045
  property({ reflect: true, attribute: "horizontal-alignment", converter: reflectNonDefault("") })
1984
2046
  ], NLDDButton.prototype, "horizontalAlignment", 2);
1985
- __decorateClass$1v([
2047
+ __decorateClass$1w([
1986
2048
  property({ reflect: true, converter: reflectNonDefault("") })
1987
2049
  ], NLDDButton.prototype, "width", 2);
1988
- __decorateClass$1v([
2050
+ __decorateClass$1w([
1989
2051
  property({ type: Boolean, reflect: true, attribute: "expandable" })
1990
2052
  ], NLDDButton.prototype, "expandable", 2);
1991
- __decorateClass$1v([
2053
+ __decorateClass$1w([
1992
2054
  property({ type: Boolean, reflect: true })
1993
2055
  ], NLDDButton.prototype, "expanded", 2);
1994
- __decorateClass$1v([
2056
+ __decorateClass$1w([
1995
2057
  property({ type: String, reflect: true, attribute: "popup-type" })
1996
2058
  ], NLDDButton.prototype, "popupType", 2);
1997
- __decorateClass$1v([
2059
+ __decorateClass$1w([
1998
2060
  property({ type: String, reflect: true })
1999
2061
  ], NLDDButton.prototype, "type", 2);
2000
- __decorateClass$1v([
2062
+ __decorateClass$1w([
2001
2063
  property({ type: String })
2002
2064
  ], NLDDButton.prototype, "popovertarget", 2);
2003
- __decorateClass$1v([
2065
+ __decorateClass$1w([
2004
2066
  property({ attribute: false })
2005
2067
  ], NLDDButton.prototype, "popoverTargetElement", 2);
2006
- __decorateClass$1v([
2068
+ __decorateClass$1w([
2007
2069
  property({ attribute: false })
2008
2070
  ], NLDDButton.prototype, "popoverTargetAction", 2);
2009
- __decorateClass$1v([
2071
+ __decorateClass$1w([
2010
2072
  property({ type: Boolean, reflect: true })
2011
2073
  ], NLDDButton.prototype, "loading", 2);
2012
- __decorateClass$1v([
2074
+ __decorateClass$1w([
2013
2075
  property({ type: Boolean, reflect: true })
2014
2076
  ], NLDDButton.prototype, "disabled", 2);
2015
- __decorateClass$1v([
2077
+ __decorateClass$1w([
2016
2078
  property({ reflect: true, converter: reflectNonDefault("") })
2017
2079
  ], NLDDButton.prototype, "text", 2);
2018
- __decorateClass$1v([
2080
+ __decorateClass$1w([
2019
2081
  property({ reflect: true, attribute: "supporting-text", converter: reflectNonDefault("") })
2020
2082
  ], NLDDButton.prototype, "supportingText", 2);
2021
- __decorateClass$1v([
2083
+ __decorateClass$1w([
2022
2084
  property({ type: Boolean, reflect: true, attribute: "single-line" })
2023
2085
  ], NLDDButton.prototype, "singleLine", 2);
2024
- __decorateClass$1v([
2086
+ __decorateClass$1w([
2025
2087
  property({ type: Boolean, reflect: true, attribute: "no-highlight-border" })
2026
2088
  ], NLDDButton.prototype, "noHighlightBorder", 2);
2027
- __decorateClass$1v([
2089
+ __decorateClass$1w([
2028
2090
  property({ type: String, attribute: "start-icon" })
2029
2091
  ], NLDDButton.prototype, "startIcon", 2);
2030
- __decorateClass$1v([
2092
+ __decorateClass$1w([
2031
2093
  property({ type: String, attribute: "end-icon" })
2032
2094
  ], NLDDButton.prototype, "endIcon", 2);
2033
- __decorateClass$1v([
2095
+ __decorateClass$1w([
2034
2096
  property({ type: String, attribute: "accessible-label" })
2035
2097
  ], NLDDButton.prototype, "accessibleLabel", 2);
2036
- __decorateClass$1v([
2098
+ __decorateClass$1w([
2037
2099
  property({ type: String, reflect: true })
2038
2100
  ], NLDDButton.prototype, "href", 2);
2039
- __decorateClass$1v([
2101
+ __decorateClass$1w([
2040
2102
  property({ type: String })
2041
2103
  ], NLDDButton.prototype, "target", 2);
2042
- __decorateClass$1v([
2104
+ __decorateClass$1w([
2043
2105
  property({ type: String })
2044
2106
  ], NLDDButton.prototype, "rel", 2);
2045
- NLDDButton = __decorateClass$1v([
2107
+ NLDDButton = __decorateClass$1w([
2046
2108
  customElement("nldd-button")
2047
2109
  ], NLDDButton);
2048
2110
  const iconButtonStyles = css$1`
@@ -2065,13 +2127,13 @@ const iconButtonStyles = css$1`
2065
2127
  --_text-display: none;
2066
2128
  --_text-font: var(--primitives-font-body-xxs-medium-flat);
2067
2129
  --_background-color: var(--semantics-buttons-neutral-tinted-background-color);
2068
- --_primary-content-color: var(--semantics-buttons-neutral-tinted-primary-content-color);
2130
+ --_primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
2069
2131
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
2070
2132
  --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
2071
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
2133
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
2072
2134
  --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
2073
2135
  --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
2074
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
2136
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
2075
2137
  --_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
2076
2138
 
2077
2139
  ${inheritedTextReset}
@@ -2117,75 +2179,75 @@ const iconButtonStyles = css$1`
2117
2179
 
2118
2180
  :host([variant="neutral-base"]) {
2119
2181
  --_background-color: var(--semantics-buttons-neutral-base-background-color);
2120
- --_primary-content-color: var(--semantics-buttons-neutral-base-primary-content-color);
2182
+ --_primary-content-color: var(--semantics-buttons-neutral-base-content-color);
2121
2183
  --_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
2122
2184
  --_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
2123
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-primary-content-color);
2185
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
2124
2186
  --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
2125
2187
  --_is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
2126
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-primary-content-color);
2188
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
2127
2189
  --_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
2128
2190
  }
2129
2191
 
2130
2192
  :host([variant="neutral-transparent"]) {
2131
2193
  --_background-color: transparent;
2132
- --_primary-content-color: var(--semantics-buttons-neutral-transparent-primary-content-color);
2194
+ --_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
2133
2195
  --_highlight-border-color: transparent;
2134
2196
  --_is-hovered-background-color: transparent;
2135
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-primary-content-color);
2197
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
2136
2198
  --_is-hovered-highlight-border-color: transparent;
2137
2199
  --_is-active-background-color: transparent;
2138
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-primary-content-color);
2200
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
2139
2201
  --_is-active-highlight-border-color: transparent;
2140
2202
  }
2141
2203
 
2142
2204
  :host([variant="accent-filled"]),
2143
2205
  :host([variant="primary"]) {
2144
2206
  --_background-color: var(--semantics-buttons-accent-filled-background-color);
2145
- --_primary-content-color: var(--semantics-buttons-accent-filled-primary-content-color);
2207
+ --_primary-content-color: var(--semantics-buttons-accent-filled-content-color);
2146
2208
  --_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
2147
2209
  --_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
2148
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-primary-content-color);
2210
+ --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
2149
2211
  --_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
2150
2212
  --_is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
2151
- --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-primary-content-color);
2213
+ --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
2152
2214
  --_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
2153
2215
  }
2154
2216
 
2155
2217
  :host([variant="accent-transparent"]) {
2156
2218
  --_background-color: transparent;
2157
- --_primary-content-color: var(--semantics-buttons-accent-transparent-primary-content-color);
2219
+ --_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
2158
2220
  --_highlight-border-color: transparent;
2159
2221
  --_is-hovered-background-color: transparent;
2160
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-primary-content-color);
2222
+ --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
2161
2223
  --_is-hovered-highlight-border-color: transparent;
2162
2224
  --_is-active-background-color: transparent;
2163
- --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-primary-content-color);
2225
+ --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
2164
2226
  --_is-active-highlight-border-color: transparent;
2165
2227
  }
2166
2228
 
2167
2229
  :host([variant="critical-tinted"]),
2168
2230
  :host([variant="destructive"]) {
2169
2231
  --_background-color: var(--semantics-buttons-critical-tinted-background-color);
2170
- --_primary-content-color: var(--semantics-buttons-critical-tinted-primary-content-color);
2232
+ --_primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
2171
2233
  --_highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
2172
2234
  --_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
2173
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-primary-content-color);
2235
+ --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
2174
2236
  --_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
2175
2237
  --_is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
2176
- --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-primary-content-color);
2238
+ --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
2177
2239
  --_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
2178
2240
  }
2179
2241
 
2180
2242
  :host([variant="critical-transparent"]) {
2181
2243
  --_background-color: transparent;
2182
- --_primary-content-color: var(--semantics-buttons-critical-transparent-primary-content-color);
2244
+ --_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
2183
2245
  --_highlight-border-color: transparent;
2184
2246
  --_is-hovered-background-color: transparent;
2185
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-primary-content-color);
2247
+ --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
2186
2248
  --_is-hovered-highlight-border-color: transparent;
2187
2249
  --_is-active-background-color: transparent;
2188
- --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-primary-content-color);
2250
+ --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
2189
2251
  --_is-active-highlight-border-color: transparent;
2190
2252
  }
2191
2253
 
@@ -2195,25 +2257,25 @@ const iconButtonStyles = css$1`
2195
2257
 
2196
2258
  :host([variant="inherit-tinted"]) {
2197
2259
  --_background-color: var(--semantics-buttons-inherit-tinted-background-color);
2198
- --_primary-content-color: var(--semantics-buttons-inherit-tinted-primary-content-color);
2260
+ --_primary-content-color: var(--semantics-buttons-inherit-tinted-content-color);
2199
2261
  --_highlight-border-color: var(--semantics-buttons-inherit-tinted-highlight-border-color);
2200
2262
  --_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-hovered-background-color);
2201
- --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-primary-content-color);
2263
+ --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-hovered-content-color);
2202
2264
  --_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-hovered-highlight-border-color);
2203
2265
  --_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-active-background-color);
2204
- --_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-active-primary-content-color);
2266
+ --_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-active-content-color);
2205
2267
  --_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-active-highlight-border-color);
2206
2268
  }
2207
2269
 
2208
2270
  :host([variant="inherit-filled"]) {
2209
2271
  --_background-color: var(--semantics-buttons-inherit-filled-background-color);
2210
- --_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-primary-content-color));
2272
+ --_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-content-color));
2211
2273
  --_highlight-border-color: var(--semantics-buttons-inherit-filled-highlight-border-color);
2212
2274
  --_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-hovered-background-color);
2213
- --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-primary-content-color);
2275
+ --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-hovered-content-color);
2214
2276
  --_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-hovered-highlight-border-color);
2215
2277
  --_is-active-background-color: var(--semantics-buttons-inherit-filled-is-active-background-color);
2216
- --_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-active-primary-content-color);
2278
+ --_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-active-content-color);
2217
2279
  --_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-active-highlight-border-color);
2218
2280
  }
2219
2281
 
@@ -2233,87 +2295,87 @@ const iconButtonStyles = css$1`
2233
2295
 
2234
2296
  :host([expanded]) {
2235
2297
  --_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
2236
- --_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-primary-content-color);
2298
+ --_primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
2237
2299
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
2238
2300
  --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
2239
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-primary-content-color);
2301
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
2240
2302
  --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
2241
2303
  --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
2242
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-primary-content-color);
2304
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
2243
2305
  --_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
2244
2306
  }
2245
2307
 
2246
2308
  :host([expanded][variant="neutral-base"]) {
2247
2309
  --_background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
2248
- --_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-primary-content-color);
2310
+ --_primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
2249
2311
  --_highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
2250
2312
  --_is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
2251
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-primary-content-color);
2313
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
2252
2314
  --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
2253
2315
  --_is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
2254
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-primary-content-color);
2316
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
2255
2317
  --_is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
2256
2318
  }
2257
2319
 
2258
2320
  :host([expanded][variant="neutral-transparent"]) {
2259
2321
  --_background-color: transparent;
2260
- --_primary-content-color: var(--semantics-buttons-neutral-transparent-primary-content-color);
2322
+ --_primary-content-color: var(--semantics-buttons-neutral-transparent-content-color);
2261
2323
  --_highlight-border-color: transparent;
2262
2324
  --_is-hovered-background-color: transparent;
2263
- --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-primary-content-color);
2325
+ --_is-hovered-primary-content-color: var(--semantics-buttons-neutral-transparent-is-hovered-content-color);
2264
2326
  --_is-hovered-highlight-border-color: transparent;
2265
2327
  --_is-active-background-color: transparent;
2266
- --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-primary-content-color);
2328
+ --_is-active-primary-content-color: var(--semantics-buttons-neutral-transparent-is-active-content-color);
2267
2329
  --_is-active-highlight-border-color: transparent;
2268
2330
  }
2269
2331
 
2270
2332
  :host([expanded][variant="accent-filled"]),
2271
2333
  :host([expanded][variant="primary"]) {
2272
2334
  --_background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
2273
- --_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-primary-content-color);
2335
+ --_primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
2274
2336
  --_highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
2275
2337
  --_is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
2276
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-primary-content-color);
2338
+ --_is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
2277
2339
  --_is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
2278
2340
  --_is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
2279
- --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-primary-content-color);
2341
+ --_is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
2280
2342
  --_is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
2281
2343
  }
2282
2344
 
2283
2345
  :host([expanded][variant="accent-transparent"]) {
2284
2346
  --_background-color: transparent;
2285
- --_primary-content-color: var(--semantics-buttons-accent-transparent-primary-content-color);
2347
+ --_primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
2286
2348
  --_highlight-border-color: transparent;
2287
2349
  --_is-hovered-background-color: transparent;
2288
- --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-primary-content-color);
2350
+ --_is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
2289
2351
  --_is-hovered-highlight-border-color: transparent;
2290
2352
  --_is-active-background-color: transparent;
2291
- --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-primary-content-color);
2353
+ --_is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
2292
2354
  --_is-active-highlight-border-color: transparent;
2293
2355
  }
2294
2356
 
2295
2357
  :host([expanded][variant="critical-tinted"]),
2296
2358
  :host([expanded][variant="destructive"]) {
2297
2359
  --_background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
2298
- --_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-primary-content-color);
2360
+ --_primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
2299
2361
  --_highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
2300
2362
  --_is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
2301
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-primary-content-color);
2363
+ --_is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
2302
2364
  --_is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
2303
2365
  --_is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
2304
- --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-primary-content-color);
2366
+ --_is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
2305
2367
  --_is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
2306
2368
  }
2307
2369
 
2308
2370
  :host([expanded][variant="critical-transparent"]) {
2309
2371
  --_background-color: transparent;
2310
- --_primary-content-color: var(--semantics-buttons-critical-transparent-primary-content-color);
2372
+ --_primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
2311
2373
  --_highlight-border-color: transparent;
2312
2374
  --_is-hovered-background-color: transparent;
2313
- --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-primary-content-color);
2375
+ --_is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
2314
2376
  --_is-hovered-highlight-border-color: transparent;
2315
2377
  --_is-active-background-color: transparent;
2316
- --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-primary-content-color);
2378
+ --_is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
2317
2379
  --_is-active-highlight-border-color: transparent;
2318
2380
  }
2319
2381
 
@@ -2323,25 +2385,25 @@ const iconButtonStyles = css$1`
2323
2385
  specificity and later source order. See nldd-button for the rationale. */
2324
2386
  :host([expanded][variant="inherit-tinted"]) {
2325
2387
  --_background-color: var(--semantics-buttons-inherit-tinted-is-expanded-background-color);
2326
- --_primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-primary-content-color);
2388
+ --_primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-content-color);
2327
2389
  --_highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-highlight-border-color);
2328
2390
  --_is-hovered-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-background-color);
2329
- --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-primary-content-color);
2391
+ --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-content-color);
2330
2392
  --_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-hovered-highlight-border-color);
2331
2393
  --_is-active-background-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-background-color);
2332
- --_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-primary-content-color);
2394
+ --_is-active-primary-content-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-content-color);
2333
2395
  --_is-active-highlight-border-color: var(--semantics-buttons-inherit-tinted-is-expanded-is-active-highlight-border-color);
2334
2396
  }
2335
2397
 
2336
2398
  :host([expanded][variant="inherit-filled"]) {
2337
2399
  --_background-color: var(--semantics-buttons-inherit-filled-is-expanded-background-color);
2338
- --_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-is-expanded-primary-content-color));
2400
+ --_primary-content-color: var(--context-parent-background-color, var(--semantics-buttons-inherit-filled-is-expanded-content-color));
2339
2401
  --_highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-highlight-border-color);
2340
2402
  --_is-hovered-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-background-color);
2341
- --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-primary-content-color);
2403
+ --_is-hovered-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-content-color);
2342
2404
  --_is-hovered-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-hovered-highlight-border-color);
2343
2405
  --_is-active-background-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-background-color);
2344
- --_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-primary-content-color);
2406
+ --_is-active-primary-content-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-content-color);
2345
2407
  --_is-active-highlight-border-color: var(--semantics-buttons-inherit-filled-is-expanded-is-active-highlight-border-color);
2346
2408
  }
2347
2409
 
@@ -2643,14 +2705,14 @@ function isPointerMode() {
2643
2705
  function isTouchMode() {
2644
2706
  return getInputModality() === "touch";
2645
2707
  }
2646
- var __defProp$1t = Object.defineProperty;
2647
- var __getOwnPropDesc$1r = Object.getOwnPropertyDescriptor;
2648
- var __decorateClass$1u = (decorators, target, key, kind) => {
2649
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1r(target, key) : target;
2708
+ var __defProp$1u = Object.defineProperty;
2709
+ var __getOwnPropDesc$1s = Object.getOwnPropertyDescriptor;
2710
+ var __decorateClass$1v = (decorators, target, key, kind) => {
2711
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1s(target, key) : target;
2650
2712
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
2651
2713
  if (decorator = decorators[i])
2652
2714
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
2653
- if (kind && result) __defProp$1t(target, key, result);
2715
+ if (kind && result) __defProp$1u(target, key, result);
2654
2716
  return result;
2655
2717
  };
2656
2718
  let tooltipCounter = 0;
@@ -2898,22 +2960,22 @@ let NLDDTooltip = class extends LitElement {
2898
2960
  }
2899
2961
  };
2900
2962
  NLDDTooltip.styles = tooltipStyles;
2901
- __decorateClass$1u([
2963
+ __decorateClass$1v([
2902
2964
  property({ reflect: true, converter: reflectNonDefault("") })
2903
2965
  ], NLDDTooltip.prototype, "text", 2);
2904
- __decorateClass$1u([
2966
+ __decorateClass$1v([
2905
2967
  property({ type: Boolean, reflect: true })
2906
2968
  ], NLDDTooltip.prototype, "open", 2);
2907
- __decorateClass$1u([
2969
+ __decorateClass$1v([
2908
2970
  property({ reflect: true, converter: reflectNonDefault("bottom") })
2909
2971
  ], NLDDTooltip.prototype, "placement", 2);
2910
- __decorateClass$1u([
2972
+ __decorateClass$1v([
2911
2973
  property({ reflect: true, converter: reflectNonDefault("default") })
2912
2974
  ], NLDDTooltip.prototype, "timing", 2);
2913
- __decorateClass$1u([
2975
+ __decorateClass$1v([
2914
2976
  state()
2915
2977
  ], NLDDTooltip.prototype, "_visible", 2);
2916
- NLDDTooltip = __decorateClass$1u([
2978
+ NLDDTooltip = __decorateClass$1v([
2917
2979
  customElement("nldd-tooltip")
2918
2980
  ], NLDDTooltip);
2919
2981
  function renderContent(component) {
@@ -2967,6 +3029,7 @@ function template$l() {
2967
3029
  aria-expanded=${ariaExpanded}
2968
3030
  aria-busy=${ariaBusy}
2969
3031
  tabindex=${this.noTab ? "-1" : nothing}
3032
+ @pointerdown=${this._popup.handlePointerdown}
2970
3033
  @click=${this._handleClick}
2971
3034
  >
2972
3035
  ${content2}
@@ -2986,6 +3049,7 @@ function template$l() {
2986
3049
  popovertarget=${this.popovertarget || nothing}
2987
3050
  .popoverTargetElement=${this.popoverTargetElement}
2988
3051
  .popoverTargetAction=${this.popoverTargetAction}
3052
+ @pointerdown=${this._popup.handlePointerdown}
2989
3053
  @click=${this._handleClick}
2990
3054
  >
2991
3055
  ${content2}
@@ -2997,19 +3061,20 @@ function template$l() {
2997
3061
  ${renderButton()}
2998
3062
  </nldd-tooltip>
2999
3063
  ` : renderButton();
3000
- return html$1`${control}${loadingIndicator}`;
3064
+ const popupSlot = html$1`<slot name="popup" @slotchange=${this._popup.handleSlotChange}></slot>`;
3065
+ return html$1`${control}${loadingIndicator}${popupSlot}`;
3001
3066
  }
3002
3067
  const nlddIconButtonTranslations = {
3003
3068
  "components.icon-button.opens-in-new-tab-text": "Opent in nieuw tabblad"
3004
3069
  };
3005
- var __defProp$1s = Object.defineProperty;
3006
- var __getOwnPropDesc$1q = Object.getOwnPropertyDescriptor;
3007
- var __decorateClass$1t = (decorators, target, key, kind) => {
3008
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1q(target, key) : target;
3070
+ var __defProp$1t = Object.defineProperty;
3071
+ var __getOwnPropDesc$1r = Object.getOwnPropertyDescriptor;
3072
+ var __decorateClass$1u = (decorators, target, key, kind) => {
3073
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1r(target, key) : target;
3009
3074
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
3010
3075
  if (decorator = decorators[i])
3011
3076
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
3012
- if (kind && result) __defProp$1s(target, key, result);
3077
+ if (kind && result) __defProp$1t(target, key, result);
3013
3078
  return result;
3014
3079
  };
3015
3080
  let NLDDIconButton = class extends withTranslations(LitElement, nlddIconButtonTranslations) {
@@ -3038,6 +3103,7 @@ let NLDDIconButton = class extends withTranslations(LitElement, nlddIconButtonTr
3038
3103
  this.target = void 0;
3039
3104
  this.rel = void 0;
3040
3105
  this._warnedA11y = false;
3106
+ this._popup = new PopupAnchorController(this);
3041
3107
  }
3042
3108
  /** Whether an icon is present via attribute or slot. */
3043
3109
  get _hasIcon() {
@@ -3074,6 +3140,10 @@ let NLDDIconButton = class extends withTranslations(LitElement, nlddIconButtonTr
3074
3140
  e.stopPropagation();
3075
3141
  return;
3076
3142
  }
3143
+ if (this._popup.handleClick(e)) {
3144
+ e.preventDefault();
3145
+ return;
3146
+ }
3077
3147
  if (this.href) return;
3078
3148
  if (this.type === "submit") this._internals.form?.requestSubmit();
3079
3149
  else if (this.type === "reset") this._internals.form?.reset();
@@ -3096,73 +3166,73 @@ let NLDDIconButton = class extends withTranslations(LitElement, nlddIconButtonTr
3096
3166
  };
3097
3167
  NLDDIconButton.styles = iconButtonStyles;
3098
3168
  NLDDIconButton.formAssociated = true;
3099
- __decorateClass$1t([
3169
+ __decorateClass$1u([
3100
3170
  property({ reflect: true, converter: reflectNonDefault("neutral-tinted") })
3101
3171
  ], NLDDIconButton.prototype, "variant", 2);
3102
- __decorateClass$1t([
3172
+ __decorateClass$1u([
3103
3173
  property({ reflect: true, converter: reflectNonDefault("md") })
3104
3174
  ], NLDDIconButton.prototype, "size", 2);
3105
- __decorateClass$1t([
3175
+ __decorateClass$1u([
3106
3176
  property({ type: Boolean, reflect: true, attribute: "hide-lg-text" })
3107
3177
  ], NLDDIconButton.prototype, "hideLgText", 2);
3108
- __decorateClass$1t([
3178
+ __decorateClass$1u([
3109
3179
  property({ type: Boolean, reflect: true })
3110
3180
  ], NLDDIconButton.prototype, "loading", 2);
3111
- __decorateClass$1t([
3181
+ __decorateClass$1u([
3112
3182
  property({ type: Boolean, reflect: true })
3113
3183
  ], NLDDIconButton.prototype, "disabled", 2);
3114
- __decorateClass$1t([
3184
+ __decorateClass$1u([
3115
3185
  property({ type: Boolean, reflect: true, attribute: "no-highlight-border" })
3116
3186
  ], NLDDIconButton.prototype, "noHighlightBorder", 2);
3117
- __decorateClass$1t([
3187
+ __decorateClass$1u([
3118
3188
  property({ type: String, reflect: true })
3119
3189
  ], NLDDIconButton.prototype, "type", 2);
3120
- __decorateClass$1t([
3190
+ __decorateClass$1u([
3121
3191
  property({ type: Boolean, reflect: true, attribute: "expandable" })
3122
3192
  ], NLDDIconButton.prototype, "expandable", 2);
3123
- __decorateClass$1t([
3193
+ __decorateClass$1u([
3124
3194
  property({ type: Boolean, reflect: true })
3125
3195
  ], NLDDIconButton.prototype, "expanded", 2);
3126
- __decorateClass$1t([
3196
+ __decorateClass$1u([
3127
3197
  property({ type: Boolean, reflect: true, attribute: "no-tab" })
3128
3198
  ], NLDDIconButton.prototype, "noTab", 2);
3129
- __decorateClass$1t([
3199
+ __decorateClass$1u([
3130
3200
  property({ type: String, reflect: true, attribute: "popup-type" })
3131
3201
  ], NLDDIconButton.prototype, "popupType", 2);
3132
- __decorateClass$1t([
3202
+ __decorateClass$1u([
3133
3203
  property({ reflect: true, converter: reflectNonDefault("") })
3134
3204
  ], NLDDIconButton.prototype, "width", 2);
3135
- __decorateClass$1t([
3205
+ __decorateClass$1u([
3136
3206
  property({ type: String })
3137
3207
  ], NLDDIconButton.prototype, "popovertarget", 2);
3138
- __decorateClass$1t([
3208
+ __decorateClass$1u([
3139
3209
  property({ attribute: false })
3140
3210
  ], NLDDIconButton.prototype, "popoverTargetElement", 2);
3141
- __decorateClass$1t([
3211
+ __decorateClass$1u([
3142
3212
  property({ attribute: false })
3143
3213
  ], NLDDIconButton.prototype, "popoverTargetAction", 2);
3144
- __decorateClass$1t([
3214
+ __decorateClass$1u([
3145
3215
  property({ reflect: true, converter: reflectNonDefault("") })
3146
3216
  ], NLDDIconButton.prototype, "text", 2);
3147
- __decorateClass$1t([
3217
+ __decorateClass$1u([
3148
3218
  property({ type: String })
3149
3219
  ], NLDDIconButton.prototype, "icon", 2);
3150
- __decorateClass$1t([
3220
+ __decorateClass$1u([
3151
3221
  property({ type: String, attribute: "accessible-label" })
3152
3222
  ], NLDDIconButton.prototype, "accessibleLabel", 2);
3153
- __decorateClass$1t([
3223
+ __decorateClass$1u([
3154
3224
  property({ reflect: true, attribute: "tooltip-timing", converter: reflectNonDefault("default") })
3155
3225
  ], NLDDIconButton.prototype, "tooltipTiming", 2);
3156
- __decorateClass$1t([
3226
+ __decorateClass$1u([
3157
3227
  property({ type: String, reflect: true })
3158
3228
  ], NLDDIconButton.prototype, "href", 2);
3159
- __decorateClass$1t([
3229
+ __decorateClass$1u([
3160
3230
  property({ type: String })
3161
3231
  ], NLDDIconButton.prototype, "target", 2);
3162
- __decorateClass$1t([
3232
+ __decorateClass$1u([
3163
3233
  property({ type: String })
3164
3234
  ], NLDDIconButton.prototype, "rel", 2);
3165
- NLDDIconButton = __decorateClass$1t([
3235
+ NLDDIconButton = __decorateClass$1u([
3166
3236
  customElement("nldd-icon-button")
3167
3237
  ], NLDDIconButton);
3168
3238
  const splitButtonStyles = css$1`
@@ -3311,7 +3381,7 @@ function template$k() {
3311
3381
  ></nldd-icon-button>
3312
3382
  </div>
3313
3383
  </div>
3314
- <slot @slotchange=${this._handleSlotChange}></slot>
3384
+ <slot @slotchange=${this._popup.handleSlotChange}></slot>
3315
3385
  `;
3316
3386
  }
3317
3387
  const nlddSplitButtonTranslations = {
@@ -3384,7 +3454,6 @@ const menuStyles = css$1`
3384
3454
  width: var(--_width, max-content);
3385
3455
  min-width: var(--_min-width);
3386
3456
  max-width: var(--_max-width);
3387
- padding: var(--_padding);
3388
3457
  flex-direction: column;
3389
3458
  max-height: min(var(--_max-height), calc(var(--_max-items) * var(--_item-size) + var(--_padding) * 2));
3390
3459
  outline: none;
@@ -3398,14 +3467,42 @@ const menuStyles = css$1`
3398
3467
  }
3399
3468
 
3400
3469
 
3401
- /* # Empty */
3470
+ /* # Elements */
3402
3471
 
3403
- .menu__empty {
3404
- padding: var(--primitives-space-8);
3472
+ .menu__main {
3473
+ display: flex;
3474
+ flex-direction: column;
3475
+ padding: var(--_padding);
3405
3476
  }
3406
3477
 
3478
+ .menu__list {
3479
+ display: flex;
3480
+ flex-direction: column;
3481
+ }
3407
3482
 
3408
- /* # Back button — drill-in mode header */
3483
+ .menu__header {
3484
+ box-sizing: border-box;
3485
+ border-bottom: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
3486
+ flex-shrink: 0;
3487
+ }
3488
+
3489
+ .menu__header[hidden] {
3490
+ display: none;
3491
+ }
3492
+
3493
+ .menu__footer {
3494
+ box-sizing: border-box;
3495
+ border-top: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
3496
+ flex-shrink: 0;
3497
+ }
3498
+
3499
+ .menu__footer[hidden] {
3500
+ display: none;
3501
+ }
3502
+
3503
+ .menu__empty {
3504
+ padding: var(--primitives-space-8);
3505
+ }
3409
3506
 
3410
3507
  .menu__back-button {
3411
3508
  display: flex;
@@ -3420,7 +3517,7 @@ const menuStyles = css$1`
3420
3517
  align-items: center;
3421
3518
  text-align: start;
3422
3519
  appearance: none;
3423
- --context-cell-content-color: var(--semantics-content-secondary-color);
3520
+ --context-content-color: var(--semantics-content-secondary-color);
3424
3521
 
3425
3522
  @media (pointer: fine) {
3426
3523
  border-radius: var(--semantics-controls-sm-corner-radius);
@@ -3434,13 +3531,13 @@ const menuStyles = css$1`
3434
3531
  @media (hover: hover) {
3435
3532
  .menu__back-button:hover {
3436
3533
  background-color: var(--_item-is-highlighted-background-color);
3437
- --context-cell-content-color: var(--_item-is-highlighted-content-color);
3534
+ --context-content-color: var(--_item-is-highlighted-content-color);
3438
3535
  }
3439
3536
  }
3440
3537
 
3441
3538
  .menu__back-button:active:hover {
3442
3539
  background-color: var(--_item-is-highlighted-background-color);
3443
- --context-cell-content-color: var(--_item-is-highlighted-content-color);
3540
+ --context-content-color: var(--_item-is-highlighted-content-color);
3444
3541
  }
3445
3542
 
3446
3543
  .menu__back-button:focus-visible {
@@ -3458,11 +3555,8 @@ const menuStyles = css$1`
3458
3555
  }
3459
3556
 
3460
3557
 
3461
- /* # Live region — drill-in view-change announcements (WCAG 4.1.3)
3462
- *
3463
- * Sibling of .menu so the role="status" doesn't violate menu's
3464
- * required-owned-children. Visually hidden, kept in the a11y tree. */
3465
-
3558
+ /* Sibling of .menu so role="status" stays outside menu's required-owned
3559
+ children (WCAG 4.1.3); visually hidden, kept in the a11y tree. */
3466
3560
  .menu__live-region {
3467
3561
  position: absolute;
3468
3562
  margin: -1px;
@@ -3499,8 +3593,8 @@ const menuItemStyles = css$1`
3499
3593
 
3500
3594
  .menu__item[aria-expanded="true"] {
3501
3595
  --_item-background-color: var(--components-menu-item-is-expanded-background-color);
3502
- --context-cell-content-color: var(--components-menu-item-is-expanded-content-color);
3503
- --context-cell-content-secondary-color: var(--components-menu-item-is-expanded-content-color);
3596
+ --context-content-color: var(--components-menu-item-is-expanded-content-color);
3597
+ --context-content-secondary-color: var(--components-menu-item-is-expanded-content-color);
3504
3598
  }
3505
3599
 
3506
3600
  /* ## Highlighted or pressed
@@ -3514,8 +3608,8 @@ const menuItemStyles = css$1`
3514
3608
  .menu__item[aria-expanded="true"]:hover,
3515
3609
  .menu__item:active:hover {
3516
3610
  --_item-background-color: var(--_item-is-highlighted-background-color);
3517
- --context-cell-content-color: var(--_item-is-highlighted-content-color);
3518
- --context-cell-content-secondary-color: var(--_item-is-highlighted-content-color);
3611
+ --context-content-color: var(--_item-is-highlighted-content-color);
3612
+ --context-content-secondary-color: var(--_item-is-highlighted-content-color);
3519
3613
  }
3520
3614
 
3521
3615
  /* ## Destructive */
@@ -3523,8 +3617,8 @@ const menuItemStyles = css$1`
3523
3617
  :host([destructive]) {
3524
3618
  --_item-is-highlighted-background-color: var(--components-menu-item-is-destructive-is-highlighted-background-color);
3525
3619
  --_item-is-highlighted-content-color: var(--components-menu-item-is-destructive-is-highlighted-content-color);
3526
- --context-cell-content-color: var(--components-menu-item-is-destructive-content-color);
3527
- --context-cell-content-secondary-color: var(--components-menu-item-is-destructive-content-color);
3620
+ --context-content-color: var(--components-menu-item-is-destructive-content-color);
3621
+ --context-content-secondary-color: var(--components-menu-item-is-destructive-content-color);
3528
3622
  }
3529
3623
 
3530
3624
 
@@ -3617,9 +3711,11 @@ const menuGroupStyles = css$1`
3617
3711
  /* # Host
3618
3712
  *
3619
3713
  * Auto top/bottom dividers via border-top/-bottom; suppressed for the
3620
- * first child (top) and when followed by another group or last child
3621
- * (bottom — flag set by parent menu via data-no-bottom-divider since
3622
- * :last-child can't see hidden siblings).
3714
+ * first item (top) and when followed by another group or last item
3715
+ * (bottom). Both flags are set by the parent menu (data-no-top-divider /
3716
+ * data-no-bottom-divider): CSS :first-child / :last-child can't see hidden
3717
+ * siblings, nor the header slot's div that becomes the first light-DOM
3718
+ * child (which would leave a first group no longer :first-child).
3623
3719
  *
3624
3720
  * padding-top > padding-bottom binds the title visually to its items
3625
3721
  * rather than to whatever sits above. */
@@ -3635,7 +3731,8 @@ const menuGroupStyles = css$1`
3635
3731
  padding-bottom: var(--primitives-space-4);
3636
3732
  }
3637
3733
 
3638
- :host(:first-child) {
3734
+ :host(:first-child),
3735
+ :host([data-no-top-divider]) {
3639
3736
  border-top: none;
3640
3737
  padding-top: var(--primitives-space-2);
3641
3738
  }
@@ -3693,47 +3790,67 @@ const itemRoleMap = {
3693
3790
  radio: { menu: "menuitemradio", listbox: "option" }
3694
3791
  };
3695
3792
  function menuTemplate(isEmpty, variant) {
3696
- const menuRole = isEmpty ? nothing : menuRoleMap[variant];
3793
+ const menuRole = menuRoleMap[variant];
3697
3794
  const showBack = this._isSubmenu && this._drillInMode && this._parentItem !== null;
3795
+ const isRoot = !this._isSubmenu;
3698
3796
  return html$1`
3699
3797
  <div class="menu"
3700
- role=${menuRole}
3701
3798
  tabindex="-1"
3702
3799
  @touchstart=${this._handleMenuTouchStart}
3703
3800
  @touchmove=${this._handleMenuTouchMove}
3704
3801
  @touchend=${this._handleMenuTouchEnd}
3705
3802
  @touchcancel=${this._handleMenuTouchEnd}
3706
3803
  >
3707
- ${showBack ? html$1`
3708
- <button class="menu__back-button"
3709
- type="button"
3710
- aria-label=${this._resolvedBackLabel}
3711
- @click=${this._handleBack}
3712
- @mouseenter=${this._handleBackMouseenter}
3804
+ ${isRoot ? html$1`
3805
+ <div class="menu__header"
3806
+ ?hidden=${!this._hasHeader}
3713
3807
  >
3714
- <nldd-icon-cell
3715
- size="20"
3716
- icon="chevron-left"
3717
- ></nldd-icon-cell>
3718
- <nldd-spacer-cell size="6"></nldd-spacer-cell>
3719
- <nldd-text-cell text=${this._parentItem.text}></nldd-text-cell>
3720
- </button>
3721
- <!-- Pure visual divider; role="none" keeps strict ARIA validators
3722
- quiet (a focusable role="separator" inside a menu would need
3723
- aria-valuenow et al.; this one is decorative). -->
3724
- <div class="menu__back-button-divider"
3725
- role="none"
3726
- ></div>
3808
+ <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
3809
+ </div>
3727
3810
  ` : nothing}
3728
- <slot></slot>
3729
- ${isEmpty ? html$1`
3730
- <div class="menu__empty">
3731
- <slot name="empty">
3732
- <nldd-inline-dialog
3733
- text=${this._resolvedEmptyText}
3734
- supporting-text=${this.emptySupportingText || nothing}
3735
- ></nldd-inline-dialog>
3736
- </slot>
3811
+ <div class="menu__main">
3812
+ ${showBack ? html$1`
3813
+ <button class="menu__back-button"
3814
+ type="button"
3815
+ aria-label=${this._resolvedBackLabel}
3816
+ @click=${this._handleBack}
3817
+ @mouseenter=${this._handleBackMouseenter}
3818
+ >
3819
+ <nldd-icon-cell
3820
+ size="20"
3821
+ icon="chevron-left"
3822
+ ></nldd-icon-cell>
3823
+ <nldd-spacer-cell size="6"></nldd-spacer-cell>
3824
+ <nldd-text-cell text=${this._parentItem.text}></nldd-text-cell>
3825
+ </button>
3826
+ <!-- Pure visual divider; role="none" keeps strict ARIA validators
3827
+ quiet (a focusable role="separator" inside a menu would need
3828
+ aria-valuenow et al.; this one is decorative). -->
3829
+ <div class="menu__back-button-divider"
3830
+ role="none"
3831
+ ></div>
3832
+ ` : nothing}
3833
+ <div class="menu__list"
3834
+ role=${menuRole}
3835
+ >
3836
+ <slot></slot>
3837
+ </div>
3838
+ ${isEmpty ? html$1`
3839
+ <div class="menu__empty">
3840
+ <slot name="empty">
3841
+ <nldd-inline-dialog
3842
+ text=${this._resolvedEmptyText}
3843
+ supporting-text=${this.emptySupportingText || nothing}
3844
+ ></nldd-inline-dialog>
3845
+ </slot>
3846
+ </div>
3847
+ ` : nothing}
3848
+ </div>
3849
+ ${isRoot ? html$1`
3850
+ <div class="menu__footer"
3851
+ ?hidden=${!this._hasFooter}
3852
+ >
3853
+ <slot name="footer" @slotchange=${this._onFooterSlotChange}></slot>
3737
3854
  </div>
3738
3855
  ` : nothing}
3739
3856
  </div>
@@ -3889,7 +4006,7 @@ const iconCellStyles = css$1`
3889
4006
 
3890
4007
  :host {
3891
4008
  --_size: var(--primitives-space-24);
3892
- --_content-color: var(--context-cell-content-color, var(--semantics-content-color));
4009
+ --_content-color: var(--context-content-color, var(--semantics-content-color));
3893
4010
 
3894
4011
  display: flex;
3895
4012
  width: var(--_size);
@@ -3917,23 +4034,23 @@ const iconCellStyles = css$1`
3917
4034
  /* ## Color */
3918
4035
 
3919
4036
  :host([color="secondary"]) {
3920
- --_content-color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
4037
+ --_content-color: var(--context-content-secondary-color, var(--semantics-content-secondary-color));
3921
4038
  }
3922
4039
 
3923
4040
  :host([color="accent"]) {
3924
- --_content-color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
4041
+ --_content-color: var(--context-content-accent-color, var(--semantics-content-accent-color));
3925
4042
  }
3926
4043
 
3927
4044
  :host([color="success"]) {
3928
- --_content-color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
4045
+ --_content-color: var(--context-content-success-color, var(--semantics-content-success-color));
3929
4046
  }
3930
4047
 
3931
4048
  :host([color="warning"]) {
3932
- --_content-color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
4049
+ --_content-color: var(--context-content-warning-color, var(--semantics-content-warning-color));
3933
4050
  }
3934
4051
 
3935
4052
  :host([color="critical"]) {
3936
- --_content-color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
4053
+ --_content-color: var(--context-content-critical-color, var(--semantics-content-critical-color));
3937
4054
  }
3938
4055
 
3939
4056
 
@@ -3978,13 +4095,13 @@ const breakpoints = {
3978
4095
  mdMax: "1007px",
3979
4096
  lgMin: "1008px"
3980
4097
  };
3981
- var __defProp$1r = Object.defineProperty;
3982
- var __decorateClass$1s = (decorators, target, key, kind) => {
4098
+ var __defProp$1s = Object.defineProperty;
4099
+ var __decorateClass$1t = (decorators, target, key, kind) => {
3983
4100
  var result = void 0;
3984
4101
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
3985
4102
  if (decorator = decorators[i])
3986
4103
  result = decorator(target, key, result) || result;
3987
- if (result) __defProp$1r(target, key, result);
4104
+ if (result) __defProp$1s(target, key, result);
3988
4105
  return result;
3989
4106
  };
3990
4107
  function resolveHideBelow(value) {
@@ -4035,22 +4152,22 @@ function VisibilityMixin(Base, containerName) {
4035
4152
  this._visibilityStyle.textContent = rules.join("\n");
4036
4153
  }
4037
4154
  }
4038
- __decorateClass$1s([
4155
+ __decorateClass$1t([
4039
4156
  property({ type: String, reflect: true, attribute: "hide-below" })
4040
4157
  ], WithVisibility.prototype, "hideBelow");
4041
- __decorateClass$1s([
4158
+ __decorateClass$1t([
4042
4159
  property({ type: String, reflect: true, attribute: "hide-above" })
4043
4160
  ], WithVisibility.prototype, "hideAbove");
4044
4161
  return WithVisibility;
4045
4162
  }
4046
- var __defProp$1q = Object.defineProperty;
4047
- var __getOwnPropDesc$1p = Object.getOwnPropertyDescriptor;
4048
- var __decorateClass$1r = (decorators, target, key, kind) => {
4049
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1p(target, key) : target;
4163
+ var __defProp$1r = Object.defineProperty;
4164
+ var __getOwnPropDesc$1q = Object.getOwnPropertyDescriptor;
4165
+ var __decorateClass$1s = (decorators, target, key, kind) => {
4166
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1q(target, key) : target;
4050
4167
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
4051
4168
  if (decorator = decorators[i])
4052
4169
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
4053
- if (kind && result) __defProp$1q(target, key, result);
4170
+ if (kind && result) __defProp$1r(target, key, result);
4054
4171
  return result;
4055
4172
  };
4056
4173
  let NLDDIconCell = class extends VisibilityMixin(LitElement, "cells-container") {
@@ -4066,19 +4183,19 @@ let NLDDIconCell = class extends VisibilityMixin(LitElement, "cells-container")
4066
4183
  }
4067
4184
  };
4068
4185
  NLDDIconCell.styles = iconCellStyles;
4069
- __decorateClass$1r([
4186
+ __decorateClass$1s([
4070
4187
  property({ reflect: true, attribute: "vertical-alignment", converter: reflectNonDefault("center") })
4071
4188
  ], NLDDIconCell.prototype, "verticalAlignment", 2);
4072
- __decorateClass$1r([
4189
+ __decorateClass$1s([
4073
4190
  property({ type: String, reflect: true })
4074
4191
  ], NLDDIconCell.prototype, "size", 2);
4075
- __decorateClass$1r([
4192
+ __decorateClass$1s([
4076
4193
  property({ reflect: true, converter: reflectNonDefault("default") })
4077
4194
  ], NLDDIconCell.prototype, "color", 2);
4078
- __decorateClass$1r([
4195
+ __decorateClass$1s([
4079
4196
  property({ type: String, reflect: true })
4080
4197
  ], NLDDIconCell.prototype, "icon", 2);
4081
- NLDDIconCell = __decorateClass$1r([
4198
+ NLDDIconCell = __decorateClass$1s([
4082
4199
  customElement("nldd-icon-cell")
4083
4200
  ], NLDDIconCell);
4084
4201
  const iconCell = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -4136,14 +4253,14 @@ const spacerCellStyles = css$1`
4136
4253
  flex-basis: 0;
4137
4254
  }
4138
4255
  `;
4139
- var __defProp$1p = Object.defineProperty;
4140
- var __getOwnPropDesc$1o = Object.getOwnPropertyDescriptor;
4141
- var __decorateClass$1q = (decorators, target, key, kind) => {
4142
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1o(target, key) : target;
4256
+ var __defProp$1q = Object.defineProperty;
4257
+ var __getOwnPropDesc$1p = Object.getOwnPropertyDescriptor;
4258
+ var __decorateClass$1r = (decorators, target, key, kind) => {
4259
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1p(target, key) : target;
4143
4260
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
4144
4261
  if (decorator = decorators[i])
4145
4262
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
4146
- if (kind && result) __defProp$1p(target, key, result);
4263
+ if (kind && result) __defProp$1q(target, key, result);
4147
4264
  return result;
4148
4265
  };
4149
4266
  let NLDDSpacerCell = class extends VisibilityMixin(LitElement, "cells-container") {
@@ -4156,10 +4273,10 @@ let NLDDSpacerCell = class extends VisibilityMixin(LitElement, "cells-container"
4156
4273
  }
4157
4274
  };
4158
4275
  NLDDSpacerCell.styles = spacerCellStyles;
4159
- __decorateClass$1q([
4276
+ __decorateClass$1r([
4160
4277
  property({ type: String, reflect: true })
4161
4278
  ], NLDDSpacerCell.prototype, "size", 2);
4162
- NLDDSpacerCell = __decorateClass$1q([
4279
+ NLDDSpacerCell = __decorateClass$1r([
4163
4280
  customElement("nldd-spacer-cell")
4164
4281
  ], NLDDSpacerCell);
4165
4282
  const textCellStyles = css$1`
@@ -4175,10 +4292,10 @@ const textCellStyles = css$1`
4175
4292
  --_min-width: 0;
4176
4293
  --_max-width: none;
4177
4294
  --_min-height: 0;
4178
- --_secondary-color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
4295
+ --_secondary-color: var(--context-content-secondary-color, var(--semantics-content-secondary-color));
4179
4296
  --_secondary-font: var(--primitives-font-body-xs-regular-tight);
4180
4297
  --_text-align: start;
4181
- --_text-color: var(--context-cell-content-color, var(--semantics-content-color));
4298
+ --_text-color: var(--context-content-color, var(--semantics-content-color));
4182
4299
  --_text-font: var(--primitives-font-body-md-regular-tight);
4183
4300
 
4184
4301
  ${inheritedTextReset}
@@ -4270,27 +4387,27 @@ const textCellStyles = css$1`
4270
4387
  /* # Color */
4271
4388
 
4272
4389
  :host([color="secondary"]) {
4273
- --_text-color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
4390
+ --_text-color: var(--context-content-secondary-color, var(--semantics-content-secondary-color));
4274
4391
  }
4275
4392
 
4276
4393
  :host([color="accent"]) {
4277
- --_secondary-color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
4278
- --_text-color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
4394
+ --_secondary-color: var(--context-content-accent-color, var(--semantics-content-accent-color));
4395
+ --_text-color: var(--context-content-accent-color, var(--semantics-content-accent-color));
4279
4396
  }
4280
4397
 
4281
4398
  :host([color="success"]) {
4282
- --_secondary-color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
4283
- --_text-color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
4399
+ --_secondary-color: var(--context-content-success-color, var(--semantics-content-success-color));
4400
+ --_text-color: var(--context-content-success-color, var(--semantics-content-success-color));
4284
4401
  }
4285
4402
 
4286
4403
  :host([color="warning"]) {
4287
- --_secondary-color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
4288
- --_text-color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
4404
+ --_secondary-color: var(--context-content-warning-color, var(--semantics-content-warning-color));
4405
+ --_text-color: var(--context-content-warning-color, var(--semantics-content-warning-color));
4289
4406
  }
4290
4407
 
4291
4408
  :host([color="critical"]) {
4292
- --_secondary-color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
4293
- --_text-color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
4409
+ --_secondary-color: var(--context-content-critical-color, var(--semantics-content-critical-color));
4410
+ --_text-color: var(--context-content-critical-color, var(--semantics-content-critical-color));
4294
4411
  }
4295
4412
 
4296
4413
 
@@ -4386,14 +4503,14 @@ function template$i() {
4386
4503
  </p>
4387
4504
  `;
4388
4505
  }
4389
- var __defProp$1o = Object.defineProperty;
4390
- var __getOwnPropDesc$1n = Object.getOwnPropertyDescriptor;
4391
- var __decorateClass$1p = (decorators, target, key, kind) => {
4392
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1n(target, key) : target;
4506
+ var __defProp$1p = Object.defineProperty;
4507
+ var __getOwnPropDesc$1o = Object.getOwnPropertyDescriptor;
4508
+ var __decorateClass$1q = (decorators, target, key, kind) => {
4509
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1o(target, key) : target;
4393
4510
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
4394
4511
  if (decorator = decorators[i])
4395
4512
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
4396
- if (kind && result) __defProp$1o(target, key, result);
4513
+ if (kind && result) __defProp$1p(target, key, result);
4397
4514
  return result;
4398
4515
  };
4399
4516
  let NLDDTextCell = class extends VisibilityMixin(LitElement, "cells-container") {
@@ -4472,55 +4589,55 @@ let NLDDTextCell = class extends VisibilityMixin(LitElement, "cells-container")
4472
4589
  }
4473
4590
  };
4474
4591
  NLDDTextCell.styles = [textCellStyles];
4475
- __decorateClass$1p([
4592
+ __decorateClass$1q([
4476
4593
  property({ reflect: true, converter: reflectNonDefault("md") })
4477
4594
  ], NLDDTextCell.prototype, "size", 2);
4478
- __decorateClass$1p([
4595
+ __decorateClass$1q([
4479
4596
  property({ reflect: true, converter: reflectNonDefault("default") })
4480
4597
  ], NLDDTextCell.prototype, "color", 2);
4481
- __decorateClass$1p([
4598
+ __decorateClass$1q([
4482
4599
  property({ reflect: true, converter: reflectNonDefault("full") })
4483
4600
  ], NLDDTextCell.prototype, "width", 2);
4484
- __decorateClass$1p([
4601
+ __decorateClass$1q([
4485
4602
  property({ type: String, reflect: true, attribute: "min-width" })
4486
4603
  ], NLDDTextCell.prototype, "minWidth", 2);
4487
- __decorateClass$1p([
4604
+ __decorateClass$1q([
4488
4605
  property({ type: String, reflect: true, attribute: "max-width" })
4489
4606
  ], NLDDTextCell.prototype, "maxWidth", 2);
4490
- __decorateClass$1p([
4607
+ __decorateClass$1q([
4491
4608
  property({ type: String, reflect: true, attribute: "min-height" })
4492
4609
  ], NLDDTextCell.prototype, "minHeight", 2);
4493
- __decorateClass$1p([
4610
+ __decorateClass$1q([
4494
4611
  property({ reflect: true, attribute: "horizontal-alignment", converter: reflectNonDefault("left") })
4495
4612
  ], NLDDTextCell.prototype, "horizontalAlignment", 2);
4496
- __decorateClass$1p([
4613
+ __decorateClass$1q([
4497
4614
  property({ reflect: true, attribute: "vertical-alignment", converter: reflectNonDefault("center") })
4498
4615
  ], NLDDTextCell.prototype, "verticalAlignment", 2);
4499
- __decorateClass$1p([
4616
+ __decorateClass$1q([
4500
4617
  property({ reflect: true, converter: reflectNonDefault("") })
4501
4618
  ], NLDDTextCell.prototype, "text", 2);
4502
- __decorateClass$1p([
4619
+ __decorateClass$1q([
4503
4620
  property({ reflect: true, converter: reflectNonDefault("") })
4504
4621
  ], NLDDTextCell.prototype, "overline", 2);
4505
- __decorateClass$1p([
4622
+ __decorateClass$1q([
4506
4623
  property({ reflect: true, attribute: "supporting-text", converter: reflectNonDefault("") })
4507
4624
  ], NLDDTextCell.prototype, "supportingText", 2);
4508
- __decorateClass$1p([
4625
+ __decorateClass$1q([
4509
4626
  property({ reflect: true, converter: reflectNonDefault("") })
4510
4627
  ], NLDDTextCell.prototype, "query", 2);
4511
- __decorateClass$1p([
4628
+ __decorateClass$1q([
4512
4629
  property({ type: String, attribute: "query-mark-mode" })
4513
4630
  ], NLDDTextCell.prototype, "queryMarkMode", 2);
4514
- __decorateClass$1p([
4631
+ __decorateClass$1q([
4515
4632
  state()
4516
4633
  ], NLDDTextCell.prototype, "_hasOverlineSlotted", 2);
4517
- __decorateClass$1p([
4634
+ __decorateClass$1q([
4518
4635
  state()
4519
4636
  ], NLDDTextCell.prototype, "_hasDefaultSlotted", 2);
4520
- __decorateClass$1p([
4637
+ __decorateClass$1q([
4521
4638
  state()
4522
4639
  ], NLDDTextCell.prototype, "_hasSupportingTextSlotted", 2);
4523
- NLDDTextCell = __decorateClass$1p([
4640
+ NLDDTextCell = __decorateClass$1q([
4524
4641
  customElement("nldd-text-cell")
4525
4642
  ], NLDDTextCell);
4526
4643
  const textCell = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -4707,14 +4824,14 @@ function detectOS() {
4707
4824
  cached = classify(platform);
4708
4825
  return cached;
4709
4826
  }
4710
- var __defProp$1n = Object.defineProperty;
4711
- var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
4712
- var __decorateClass$1o = (decorators, target, key, kind) => {
4713
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1m(target, key) : target;
4827
+ var __defProp$1o = Object.defineProperty;
4828
+ var __getOwnPropDesc$1n = Object.getOwnPropertyDescriptor;
4829
+ var __decorateClass$1p = (decorators, target, key, kind) => {
4830
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1n(target, key) : target;
4714
4831
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
4715
4832
  if (decorator = decorators[i])
4716
4833
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
4717
- if (kind && result) __defProp$1n(target, key, result);
4834
+ if (kind && result) __defProp$1o(target, key, result);
4718
4835
  return result;
4719
4836
  };
4720
4837
  let NLDDKeyboardShortcut = class extends LitElement {
@@ -4752,34 +4869,34 @@ let NLDDKeyboardShortcut = class extends LitElement {
4752
4869
  }
4753
4870
  };
4754
4871
  NLDDKeyboardShortcut.styles = keyboardShortcutStyles;
4755
- __decorateClass$1o([
4872
+ __decorateClass$1p([
4756
4873
  property({ reflect: true, converter: reflectNonDefault("") })
4757
4874
  ], NLDDKeyboardShortcut.prototype, "keys", 2);
4758
- __decorateClass$1o([
4875
+ __decorateClass$1p([
4759
4876
  property({ reflect: true, attribute: "mac-keys", converter: reflectNonDefault("") })
4760
4877
  ], NLDDKeyboardShortcut.prototype, "macKeys", 2);
4761
- __decorateClass$1o([
4878
+ __decorateClass$1p([
4762
4879
  property({ reflect: true, attribute: "windows-keys", converter: reflectNonDefault("") })
4763
4880
  ], NLDDKeyboardShortcut.prototype, "windowsKeys", 2);
4764
- __decorateClass$1o([
4881
+ __decorateClass$1p([
4765
4882
  property({ reflect: true, attribute: "linux-keys", converter: reflectNonDefault("") })
4766
4883
  ], NLDDKeyboardShortcut.prototype, "linuxKeys", 2);
4767
- __decorateClass$1o([
4884
+ __decorateClass$1p([
4768
4885
  property({ reflect: true, converter: reflectNonDefault("md") })
4769
4886
  ], NLDDKeyboardShortcut.prototype, "size", 2);
4770
- __decorateClass$1o([
4887
+ __decorateClass$1p([
4771
4888
  property({ reflect: true, converter: reflectNonDefault("box") })
4772
4889
  ], NLDDKeyboardShortcut.prototype, "variant", 2);
4773
- __decorateClass$1o([
4890
+ __decorateClass$1p([
4774
4891
  property({ reflect: true, converter: reflectNonDefault("neutral") })
4775
4892
  ], NLDDKeyboardShortcut.prototype, "color", 2);
4776
- __decorateClass$1o([
4893
+ __decorateClass$1p([
4777
4894
  property({ type: Boolean, reflect: true, attribute: "always-visible" })
4778
4895
  ], NLDDKeyboardShortcut.prototype, "alwaysVisible", 2);
4779
- __decorateClass$1o([
4896
+ __decorateClass$1p([
4780
4897
  property({ type: String, attribute: "debug-os" })
4781
4898
  ], NLDDKeyboardShortcut.prototype, "debugOS", 2);
4782
- NLDDKeyboardShortcut = __decorateClass$1o([
4899
+ NLDDKeyboardShortcut = __decorateClass$1p([
4783
4900
  customElement("nldd-keyboard-shortcut")
4784
4901
  ], NLDDKeyboardShortcut);
4785
4902
  const inlineDialogStyles = css$1`
@@ -4913,7 +5030,14 @@ function inlineDialogTemplate(component) {
4913
5030
  return html$1`
4914
5031
  <div class="inline-dialog__body">
4915
5032
  <div class="inline-dialog__main">
4916
- ${component._resolvedIconName ? html$1`
5033
+ ${component.variant === "loading" ? html$1`
5034
+ <div class="inline-dialog__icon">
5035
+ <nldd-activity-indicator
5036
+ size=${component.size === "lg" ? "48" : "40"}
5037
+ timing="instant"
5038
+ ></nldd-activity-indicator>
5039
+ </div>
5040
+ ` : component._resolvedIconName ? html$1`
4917
5041
  <div class="inline-dialog__icon">
4918
5042
  <nldd-icon name=${component._resolvedIconName}></nldd-icon>
4919
5043
  </div>
@@ -4999,14 +5123,14 @@ function template$g() {
4999
5123
  </div>
5000
5124
  `;
5001
5125
  }
5002
- var __defProp$1m = Object.defineProperty;
5003
- var __getOwnPropDesc$1l = Object.getOwnPropertyDescriptor;
5004
- var __decorateClass$1n = (decorators, target, key, kind) => {
5005
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1l(target, key) : target;
5126
+ var __defProp$1n = Object.defineProperty;
5127
+ var __getOwnPropDesc$1m = Object.getOwnPropertyDescriptor;
5128
+ var __decorateClass$1o = (decorators, target, key, kind) => {
5129
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1m(target, key) : target;
5006
5130
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
5007
5131
  if (decorator = decorators[i])
5008
5132
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
5009
- if (kind && result) __defProp$1m(target, key, result);
5133
+ if (kind && result) __defProp$1n(target, key, result);
5010
5134
  return result;
5011
5135
  };
5012
5136
  let NLDDButtonGroup = class extends LitElement {
@@ -5039,26 +5163,26 @@ let NLDDButtonGroup = class extends LitElement {
5039
5163
  }
5040
5164
  };
5041
5165
  NLDDButtonGroup.styles = buttonGroupStyles;
5042
- __decorateClass$1n([
5166
+ __decorateClass$1o([
5043
5167
  property({ reflect: true, converter: reflectNonDefault("md") })
5044
5168
  ], NLDDButtonGroup.prototype, "size", 2);
5045
- __decorateClass$1n([
5169
+ __decorateClass$1o([
5046
5170
  property({ reflect: true, converter: reflectNonDefault("vertical") })
5047
5171
  ], NLDDButtonGroup.prototype, "orientation", 2);
5048
- __decorateClass$1n([
5172
+ __decorateClass$1o([
5049
5173
  query("slot")
5050
5174
  ], NLDDButtonGroup.prototype, "_slot", 2);
5051
- NLDDButtonGroup = __decorateClass$1n([
5175
+ NLDDButtonGroup = __decorateClass$1o([
5052
5176
  customElement("nldd-button-group")
5053
5177
  ], NLDDButtonGroup);
5054
- var __defProp$1l = Object.defineProperty;
5055
- var __getOwnPropDesc$1k = Object.getOwnPropertyDescriptor;
5056
- var __decorateClass$1m = (decorators, target, key, kind) => {
5057
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1k(target, key) : target;
5178
+ var __defProp$1m = Object.defineProperty;
5179
+ var __getOwnPropDesc$1l = Object.getOwnPropertyDescriptor;
5180
+ var __decorateClass$1n = (decorators, target, key, kind) => {
5181
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1l(target, key) : target;
5058
5182
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
5059
5183
  if (decorator = decorators[i])
5060
5184
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
5061
- if (kind && result) __defProp$1l(target, key, result);
5185
+ if (kind && result) __defProp$1m(target, key, result);
5062
5186
  return result;
5063
5187
  };
5064
5188
  let NLDDInlineDialog = class extends LitElement {
@@ -5107,43 +5231,43 @@ let NLDDInlineDialog = class extends LitElement {
5107
5231
  }
5108
5232
  };
5109
5233
  NLDDInlineDialog.styles = inlineDialogStyles;
5110
- __decorateClass$1m([
5234
+ __decorateClass$1n([
5111
5235
  property({ reflect: true, converter: reflectNonDefault("") })
5112
5236
  ], NLDDInlineDialog.prototype, "variant", 2);
5113
- __decorateClass$1m([
5237
+ __decorateClass$1n([
5114
5238
  property({ reflect: true, converter: reflectNonDefault("md") })
5115
5239
  ], NLDDInlineDialog.prototype, "size", 2);
5116
- __decorateClass$1m([
5240
+ __decorateClass$1n([
5117
5241
  property({ type: String, reflect: true })
5118
5242
  ], NLDDInlineDialog.prototype, "icon", 2);
5119
- __decorateClass$1m([
5243
+ __decorateClass$1n([
5120
5244
  property({ type: String, reflect: true, attribute: "icon-color" })
5121
5245
  ], NLDDInlineDialog.prototype, "iconColor", 2);
5122
- __decorateClass$1m([
5246
+ __decorateClass$1n([
5123
5247
  property({ reflect: true, converter: reflectNonDefault("") })
5124
5248
  ], NLDDInlineDialog.prototype, "text", 2);
5125
- __decorateClass$1m([
5249
+ __decorateClass$1n([
5126
5250
  property({ reflect: true, attribute: "supporting-text", converter: reflectNonDefault("") })
5127
5251
  ], NLDDInlineDialog.prototype, "supportingText", 2);
5128
- __decorateClass$1m([
5252
+ __decorateClass$1n([
5129
5253
  property({ type: Number, reflect: true, attribute: "heading-level" })
5130
5254
  ], NLDDInlineDialog.prototype, "headingLevel", 2);
5131
- __decorateClass$1m([
5255
+ __decorateClass$1n([
5132
5256
  state()
5133
5257
  ], NLDDInlineDialog.prototype, "_hasContent", 2);
5134
- __decorateClass$1m([
5258
+ __decorateClass$1n([
5135
5259
  state()
5136
5260
  ], NLDDInlineDialog.prototype, "_hasActions", 2);
5137
- NLDDInlineDialog = __decorateClass$1m([
5261
+ NLDDInlineDialog = __decorateClass$1n([
5138
5262
  customElement("nldd-inline-dialog")
5139
5263
  ], NLDDInlineDialog);
5140
- var __defProp$1k = Object.defineProperty;
5141
- var __decorateClass$1l = (decorators, target, key, kind) => {
5264
+ var __defProp$1l = Object.defineProperty;
5265
+ var __decorateClass$1m = (decorators, target, key, kind) => {
5142
5266
  var result = void 0;
5143
5267
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
5144
5268
  if (decorator = decorators[i])
5145
5269
  result = decorator(target, key, result) || result;
5146
- if (result) __defProp$1k(target, key, result);
5270
+ if (result) __defProp$1l(target, key, result);
5147
5271
  return result;
5148
5272
  };
5149
5273
  const _NLDDMenuDivider = class _NLDDMenuDivider extends LitElement {
@@ -5166,7 +5290,7 @@ const _NLDDMenuGroup = (_a = class extends LitElement {
5166
5290
  return menuGroupTemplate(this);
5167
5291
  }
5168
5292
  }, _a.styles = menuGroupStyles, _a._idCounter = 0, _a);
5169
- __decorateClass$1l([
5293
+ __decorateClass$1m([
5170
5294
  property({ reflect: true, converter: reflectNonDefault("") })
5171
5295
  ], _NLDDMenuGroup.prototype, "text");
5172
5296
  let NLDDMenuGroup = _NLDDMenuGroup;
@@ -5273,58 +5397,58 @@ const _NLDDMenuItem = (_b = class extends LitElement {
5273
5397
  return menuItemTemplate.call(this, this.menuVariant);
5274
5398
  }
5275
5399
  }, _b.styles = menuItemStyles, _b._idCounter = 0, _b);
5276
- __decorateClass$1l([
5400
+ __decorateClass$1m([
5277
5401
  property({ reflect: true, converter: reflectNonDefault("") })
5278
5402
  ], _NLDDMenuItem.prototype, "text");
5279
- __decorateClass$1l([
5403
+ __decorateClass$1m([
5280
5404
  property({ type: String, reflect: true })
5281
5405
  ], _NLDDMenuItem.prototype, "value");
5282
- __decorateClass$1l([
5406
+ __decorateClass$1m([
5283
5407
  property({ type: String, reflect: true })
5284
5408
  ], _NLDDMenuItem.prototype, "href");
5285
- __decorateClass$1l([
5409
+ __decorateClass$1m([
5286
5410
  property({ reflect: true, converter: reflectNonDefault("") })
5287
5411
  ], _NLDDMenuItem.prototype, "aliases");
5288
- __decorateClass$1l([
5412
+ __decorateClass$1m([
5289
5413
  property({ reflect: true, converter: reflectNonDefault("") })
5290
5414
  ], _NLDDMenuItem.prototype, "details");
5291
- __decorateClass$1l([
5415
+ __decorateClass$1m([
5292
5416
  property({ reflect: true, converter: reflectNonDefault("") })
5293
5417
  ], _NLDDMenuItem.prototype, "shortcut");
5294
- __decorateClass$1l([
5418
+ __decorateClass$1m([
5295
5419
  property({ reflect: true, attribute: "shortcut-mac", converter: reflectNonDefault("") })
5296
5420
  ], _NLDDMenuItem.prototype, "shortcutMac");
5297
- __decorateClass$1l([
5421
+ __decorateClass$1m([
5298
5422
  property({ reflect: true, attribute: "shortcut-windows", converter: reflectNonDefault("") })
5299
5423
  ], _NLDDMenuItem.prototype, "shortcutWindows");
5300
- __decorateClass$1l([
5424
+ __decorateClass$1m([
5301
5425
  property({ reflect: true, attribute: "shortcut-linux", converter: reflectNonDefault("") })
5302
5426
  ], _NLDDMenuItem.prototype, "shortcutLinux");
5303
- __decorateClass$1l([
5427
+ __decorateClass$1m([
5304
5428
  property({ type: String, reflect: true })
5305
5429
  ], _NLDDMenuItem.prototype, "icon");
5306
- __decorateClass$1l([
5430
+ __decorateClass$1m([
5307
5431
  property({ type: String, reflect: true })
5308
5432
  ], _NLDDMenuItem.prototype, "type");
5309
- __decorateClass$1l([
5433
+ __decorateClass$1m([
5310
5434
  property({ type: Boolean, reflect: true })
5311
5435
  ], _NLDDMenuItem.prototype, "selected");
5312
- __decorateClass$1l([
5436
+ __decorateClass$1m([
5313
5437
  property({ type: Boolean, reflect: true })
5314
5438
  ], _NLDDMenuItem.prototype, "destructive");
5315
- __decorateClass$1l([
5439
+ __decorateClass$1m([
5316
5440
  property({ type: Boolean, reflect: true })
5317
5441
  ], _NLDDMenuItem.prototype, "disabled");
5318
- __decorateClass$1l([
5442
+ __decorateClass$1m([
5319
5443
  property({ reflect: true, converter: reflectNonDefault("") })
5320
5444
  ], _NLDDMenuItem.prototype, "query");
5321
- __decorateClass$1l([
5445
+ __decorateClass$1m([
5322
5446
  property({ reflect: true, attribute: "query-mark-mode", converter: reflectNonDefault("predictive") })
5323
5447
  ], _NLDDMenuItem.prototype, "queryMarkMode");
5324
- __decorateClass$1l([
5448
+ __decorateClass$1m([
5325
5449
  state()
5326
5450
  ], _NLDDMenuItem.prototype, "menuVariant");
5327
- __decorateClass$1l([
5451
+ __decorateClass$1m([
5328
5452
  state()
5329
5453
  ], _NLDDMenuItem.prototype, "_submenuOpen");
5330
5454
  let NLDDMenuItem = _NLDDMenuItem;
@@ -5353,6 +5477,8 @@ const _NLDDMenu = (_c = class extends LitElement {
5353
5477
  this.debugSafeTriangle = false;
5354
5478
  this.filterFn = defaultFilterFn;
5355
5479
  this._isEmpty = false;
5480
+ this._hasHeader = false;
5481
+ this._hasFooter = false;
5356
5482
  this._activeSubmenu = null;
5357
5483
  this._activeSubmenuOpener = null;
5358
5484
  this._activeSubmenuCleanup = null;
@@ -6203,6 +6329,8 @@ const _NLDDMenu = (_c = class extends LitElement {
6203
6329
  }
6204
6330
  firstUpdated() {
6205
6331
  this._updateEmptyState();
6332
+ this._onHeaderSlotChange();
6333
+ this._onFooterSlotChange();
6206
6334
  }
6207
6335
  disconnectedCallback() {
6208
6336
  super.disconnectedCallback();
@@ -6255,12 +6383,30 @@ const _NLDDMenu = (_c = class extends LitElement {
6255
6383
  ).filter((item) => item.closest("nldd-menu") === this);
6256
6384
  this._isEmpty = shown.length === 0;
6257
6385
  }
6386
+ /** True when the named slot has non-whitespace content. assignedNodes (not
6387
+ * assignedElements) so a bare text header counts; whitespace-only formatting
6388
+ * nodes don't. */
6389
+ _slotHasContent(name2) {
6390
+ const slot = this.shadowRoot?.querySelector(`slot[name="${name2}"]`);
6391
+ return (slot?.assignedNodes({ flatten: true }) ?? []).some(
6392
+ (n) => n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && (n.textContent?.trim() ?? "") !== ""
6393
+ );
6394
+ }
6395
+ _onHeaderSlotChange() {
6396
+ this._hasHeader = this._slotHasContent("header");
6397
+ }
6398
+ _onFooterSlotChange() {
6399
+ this._hasFooter = this._slotHasContent("footer");
6400
+ }
6258
6401
  _updateDividerVisibility() {
6259
- const children = Array.from(this.children);
6402
+ const children = Array.from(this.children).filter((el) => !el.hasAttribute("slot"));
6260
6403
  children.forEach((el) => {
6261
6404
  const tag = el.tagName.toLowerCase();
6262
6405
  if (tag === "nldd-menu-divider") el.removeAttribute("hidden");
6263
- if (tag === "nldd-menu-group") el.removeAttribute("data-no-bottom-divider");
6406
+ if (tag === "nldd-menu-group") {
6407
+ el.removeAttribute("data-no-bottom-divider");
6408
+ el.removeAttribute("data-no-top-divider");
6409
+ }
6264
6410
  });
6265
6411
  const visible = children.filter((el) => !el.hasAttribute("hidden"));
6266
6412
  visible.forEach((el, index2) => {
@@ -6276,6 +6422,9 @@ const _NLDDMenu = (_c = class extends LitElement {
6276
6422
  const remaining = visible.filter((el) => !el.hasAttribute("hidden"));
6277
6423
  remaining.forEach((el, index2) => {
6278
6424
  if (el.tagName.toLowerCase() !== "nldd-menu-group") return;
6425
+ if (index2 === 0) {
6426
+ el.setAttribute("data-no-top-divider", "");
6427
+ }
6279
6428
  const nextTag = remaining[index2 + 1]?.tagName.toLowerCase();
6280
6429
  const isLast = index2 === remaining.length - 1;
6281
6430
  if (isLast || nextTag === "nldd-menu-group") {
@@ -6434,57 +6583,63 @@ const _NLDDMenu = (_c = class extends LitElement {
6434
6583
  return menuTemplate.call(this, this._isEmpty, this.variant);
6435
6584
  }
6436
6585
  }, _c.styles = menuStyles, _c._SAFE_TRIANGLE_STALL_DISMISS_MS = 500, _c._SAFE_TRIANGLE_APEX_X_OFFSET = 4, _c._drillInModeQuery = null, _c._TOUCH_SCROLL_THRESHOLD_PX = 8, _c._menuIdCounter = 0, _c._TYPEAHEAD_RESET_MS = 500, _c);
6437
- __decorateClass$1l([
6586
+ __decorateClass$1m([
6438
6587
  property({ type: String, reflect: true })
6439
6588
  ], _NLDDMenu.prototype, "anchor");
6440
- __decorateClass$1l([
6589
+ __decorateClass$1m([
6441
6590
  property({ attribute: false })
6442
6591
  ], _NLDDMenu.prototype, "anchorElement");
6443
- __decorateClass$1l([
6592
+ __decorateClass$1m([
6444
6593
  property({ reflect: true, converter: reflectNonDefault("bottom-start") })
6445
6594
  ], _NLDDMenu.prototype, "placement");
6446
- __decorateClass$1l([
6595
+ __decorateClass$1m([
6447
6596
  property({ reflect: true, converter: reflectNonDefault("menu") })
6448
6597
  ], _NLDDMenu.prototype, "variant");
6449
- __decorateClass$1l([
6598
+ __decorateClass$1m([
6450
6599
  property({ reflect: true, attribute: "empty-text", converter: reflectNonDefault("") })
6451
6600
  ], _NLDDMenu.prototype, "emptyText");
6452
- __decorateClass$1l([
6601
+ __decorateClass$1m([
6453
6602
  property({ reflect: true, attribute: "empty-supporting-text", converter: reflectNonDefault("") })
6454
6603
  ], _NLDDMenu.prototype, "emptySupportingText");
6455
- __decorateClass$1l([
6604
+ __decorateClass$1m([
6456
6605
  property({ type: String, reflect: true })
6457
6606
  ], _NLDDMenu.prototype, "width");
6458
- __decorateClass$1l([
6607
+ __decorateClass$1m([
6459
6608
  property({ type: Number, attribute: "max-items" })
6460
6609
  ], _NLDDMenu.prototype, "maxItems");
6461
- __decorateClass$1l([
6610
+ __decorateClass$1m([
6462
6611
  property({ type: Object })
6463
6612
  ], _NLDDMenu.prototype, "translations");
6464
- __decorateClass$1l([
6613
+ __decorateClass$1m([
6465
6614
  property({ type: Boolean, reflect: true, attribute: "debug-safe-triangle" })
6466
6615
  ], _NLDDMenu.prototype, "debugSafeTriangle");
6467
- __decorateClass$1l([
6616
+ __decorateClass$1m([
6468
6617
  property({ attribute: false })
6469
6618
  ], _NLDDMenu.prototype, "filterFn");
6470
- __decorateClass$1l([
6619
+ __decorateClass$1m([
6471
6620
  state()
6472
6621
  ], _NLDDMenu.prototype, "_isEmpty");
6473
- __decorateClass$1l([
6622
+ __decorateClass$1m([
6623
+ state()
6624
+ ], _NLDDMenu.prototype, "_hasHeader");
6625
+ __decorateClass$1m([
6626
+ state()
6627
+ ], _NLDDMenu.prototype, "_hasFooter");
6628
+ __decorateClass$1m([
6474
6629
  state()
6475
6630
  ], _NLDDMenu.prototype, "_parentItem");
6476
6631
  let NLDDMenu = _NLDDMenu;
6477
6632
  if (!customElements.get("nldd-menu")) {
6478
6633
  customElements.define("nldd-menu", NLDDMenu);
6479
6634
  }
6480
- var __defProp$1j = Object.defineProperty;
6481
- var __getOwnPropDesc$1j = Object.getOwnPropertyDescriptor;
6482
- var __decorateClass$1k = (decorators, target, key, kind) => {
6483
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1j(target, key) : target;
6635
+ var __defProp$1k = Object.defineProperty;
6636
+ var __getOwnPropDesc$1k = Object.getOwnPropertyDescriptor;
6637
+ var __decorateClass$1l = (decorators, target, key, kind) => {
6638
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1k(target, key) : target;
6484
6639
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
6485
6640
  if (decorator = decorators[i])
6486
6641
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
6487
- if (kind && result) __defProp$1j(target, key, result);
6642
+ if (kind && result) __defProp$1k(target, key, result);
6488
6643
  return result;
6489
6644
  };
6490
6645
  let NLDDSplitButton = class extends LitElement {
@@ -6498,8 +6653,14 @@ let NLDDSplitButton = class extends LitElement {
6498
6653
  this.icon = "";
6499
6654
  this.translations = {};
6500
6655
  this._menuIsOpen = false;
6501
- this._menu = null;
6502
- this._menuWasOpenOnPointerdown = false;
6656
+ this._popup = new PopupAnchorController(this, {
6657
+ anchorFor: () => this._popupButtonWrapper ?? null,
6658
+ onChange: (overlay, previous) => {
6659
+ previous?.removeEventListener("toggle", this._handleMenuToggle);
6660
+ this._menuIsOpen = false;
6661
+ overlay?.addEventListener("toggle", this._handleMenuToggle);
6662
+ }
6663
+ });
6503
6664
  this._handleMenuToggle = (event) => {
6504
6665
  this._menuIsOpen = event.newState === "open";
6505
6666
  };
@@ -6510,33 +6671,12 @@ let NLDDSplitButton = class extends LitElement {
6510
6671
  }
6511
6672
  // — Lifecycle ————————————————————————————————————————————————————————————
6512
6673
  firstUpdated() {
6513
- this._popupButtonWrapper?.addEventListener("pointerdown", () => {
6514
- this._menuWasOpenOnPointerdown = this._menu?.matches(":popover-open") ?? false;
6515
- });
6516
- if (this._menu && this._popupButtonWrapper) {
6517
- this._menu.anchorElement = this._popupButtonWrapper;
6518
- }
6674
+ this._popupButtonWrapper?.addEventListener("pointerdown", this._popup.handlePointerdown);
6675
+ this._popup.anchor();
6519
6676
  }
6520
6677
  disconnectedCallback() {
6521
6678
  super.disconnectedCallback();
6522
- this._menu?.removeEventListener("toggle", this._handleMenuToggle);
6523
- }
6524
- /**
6525
- * Wires the slotted `nldd-menu` to the chevron: anchors it to the popup
6526
- * button and tracks its open state. Re-runs whenever the slotted content
6527
- * changes (menu added, removed or replaced).
6528
- */
6529
- _handleSlotChange(event) {
6530
- const slot = event.target;
6531
- const menu = slot.assignedElements().find((el) => el.matches("nldd-menu")) ?? null;
6532
- if (menu === this._menu) return;
6533
- this._menu?.removeEventListener("toggle", this._handleMenuToggle);
6534
- this._menu = menu;
6535
- this._menuIsOpen = false;
6536
- if (menu) {
6537
- if (this._popupButtonWrapper) menu.anchorElement = this._popupButtonWrapper;
6538
- menu.addEventListener("toggle", this._handleMenuToggle);
6539
- }
6679
+ this._popup.overlay?.removeEventListener("toggle", this._handleMenuToggle);
6540
6680
  }
6541
6681
  _handleActionClick(e) {
6542
6682
  if (this.disabled) return;
@@ -6546,13 +6686,7 @@ let NLDDSplitButton = class extends LitElement {
6546
6686
  _handleMenuClick(e) {
6547
6687
  if (this.disabled) return;
6548
6688
  e.stopPropagation();
6549
- if (this._menu) {
6550
- const wasOpen = this._menuWasOpenOnPointerdown;
6551
- this._menuWasOpenOnPointerdown = false;
6552
- if (wasOpen) return;
6553
- this._menu.showPopover();
6554
- return;
6555
- }
6689
+ if (this._popup.handleClick(e)) return;
6556
6690
  this.dispatchEvent(new CustomEvent("menu-click", { bubbles: true, composed: true }));
6557
6691
  }
6558
6692
  // willUpdate (not updated) so the host width is resolved before the first
@@ -6576,34 +6710,34 @@ let NLDDSplitButton = class extends LitElement {
6576
6710
  }
6577
6711
  };
6578
6712
  NLDDSplitButton.styles = splitButtonStyles;
6579
- __decorateClass$1k([
6713
+ __decorateClass$1l([
6580
6714
  property({ reflect: true, converter: reflectNonDefault("md") })
6581
6715
  ], NLDDSplitButton.prototype, "size", 2);
6582
- __decorateClass$1k([
6716
+ __decorateClass$1l([
6583
6717
  property({ reflect: true, converter: reflectNonDefault("neutral-tinted") })
6584
6718
  ], NLDDSplitButton.prototype, "variant", 2);
6585
- __decorateClass$1k([
6719
+ __decorateClass$1l([
6586
6720
  property({ type: Boolean, reflect: true })
6587
6721
  ], NLDDSplitButton.prototype, "disabled", 2);
6588
- __decorateClass$1k([
6722
+ __decorateClass$1l([
6589
6723
  property({ reflect: true, converter: reflectNonDefault("") })
6590
6724
  ], NLDDSplitButton.prototype, "width", 2);
6591
- __decorateClass$1k([
6725
+ __decorateClass$1l([
6592
6726
  property({ reflect: true, converter: reflectNonDefault("") })
6593
6727
  ], NLDDSplitButton.prototype, "text", 2);
6594
- __decorateClass$1k([
6728
+ __decorateClass$1l([
6595
6729
  property({ type: String })
6596
6730
  ], NLDDSplitButton.prototype, "icon", 2);
6597
- __decorateClass$1k([
6731
+ __decorateClass$1l([
6598
6732
  property({ type: Object })
6599
6733
  ], NLDDSplitButton.prototype, "translations", 2);
6600
- __decorateClass$1k([
6734
+ __decorateClass$1l([
6601
6735
  query(".split-button__popup-button")
6602
6736
  ], NLDDSplitButton.prototype, "_popupButtonWrapper", 2);
6603
- __decorateClass$1k([
6737
+ __decorateClass$1l([
6604
6738
  state()
6605
6739
  ], NLDDSplitButton.prototype, "_menuIsOpen", 2);
6606
- NLDDSplitButton = __decorateClass$1k([
6740
+ NLDDSplitButton = __decorateClass$1l([
6607
6741
  customElement("nldd-split-button")
6608
6742
  ], NLDDSplitButton);
6609
6743
  const buttonBarStyles = css$1`
@@ -6738,14 +6872,14 @@ function renderChild(child) {
6738
6872
  }
6739
6873
  return html$1`<slot name="child-${child.id}"></slot>`;
6740
6874
  }
6741
- var __defProp$1i = Object.defineProperty;
6742
- var __getOwnPropDesc$1i = Object.getOwnPropertyDescriptor;
6743
- var __decorateClass$1j = (decorators, target, key, kind) => {
6744
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1i(target, key) : target;
6875
+ var __defProp$1j = Object.defineProperty;
6876
+ var __getOwnPropDesc$1j = Object.getOwnPropertyDescriptor;
6877
+ var __decorateClass$1k = (decorators, target, key, kind) => {
6878
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1j(target, key) : target;
6745
6879
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
6746
6880
  if (decorator = decorators[i])
6747
6881
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
6748
- if (kind && result) __defProp$1i(target, key, result);
6882
+ if (kind && result) __defProp$1j(target, key, result);
6749
6883
  return result;
6750
6884
  };
6751
6885
  if (!customElements.get("nldd-button-bar-divider")) {
@@ -6859,19 +6993,19 @@ let NLDDButtonBar = class extends LitElement {
6859
6993
  }
6860
6994
  };
6861
6995
  NLDDButtonBar.styles = buttonBarStyles;
6862
- __decorateClass$1j([
6996
+ __decorateClass$1k([
6863
6997
  property({ reflect: true, converter: reflectNonDefault("md") })
6864
6998
  ], NLDDButtonBar.prototype, "size", 2);
6865
- __decorateClass$1j([
6999
+ __decorateClass$1k([
6866
7000
  property({ reflect: true, converter: reflectNonDefault("neutral-tinted") })
6867
7001
  ], NLDDButtonBar.prototype, "variant", 2);
6868
- __decorateClass$1j([
7002
+ __decorateClass$1k([
6869
7003
  property({ type: Boolean, reflect: true })
6870
7004
  ], NLDDButtonBar.prototype, "disabled", 2);
6871
- __decorateClass$1j([
7005
+ __decorateClass$1k([
6872
7006
  state()
6873
7007
  ], NLDDButtonBar.prototype, "_children", 2);
6874
- NLDDButtonBar = __decorateClass$1j([
7008
+ NLDDButtonBar = __decorateClass$1k([
6875
7009
  customElement("nldd-button-bar")
6876
7010
  ], NLDDButtonBar);
6877
7011
  const toolbarStyles = css$1`
@@ -6890,6 +7024,11 @@ const toolbarStyles = css$1`
6890
7024
  --_center-width: 0px;
6891
7025
  --_end-width: 0px;
6892
7026
  --_overflow-button-width: 0px;
7027
+ /* The gap between a side area and its spacer only exists when that area is
7028
+ non-empty; toolbar.ts drops these to 0px when start/end is empty so the
7029
+ spacer basis doesn't over-subtract and pull the centre off-centre. */
7030
+ --_left-spacer-gap: var(--_gap);
7031
+ --_right-spacer-gap: var(--_gap);
6893
7032
  --_label-margin-top: var(--primitives-space-4);
6894
7033
 
6895
7034
  ${inheritedTextReset}
@@ -6962,7 +7101,7 @@ const toolbarStyles = css$1`
6962
7101
  var(--_width) / 2
6963
7102
  - var(--_start-width)
6964
7103
  - var(--_center-width) / 2
6965
- - var(--_gap)
7104
+ - var(--_left-spacer-gap)
6966
7105
  );
6967
7106
  }
6968
7107
 
@@ -6975,7 +7114,7 @@ const toolbarStyles = css$1`
6975
7114
  var(--_width) / 2
6976
7115
  - var(--_end-width)
6977
7116
  - var(--_center-width) / 2
6978
- - var(--_gap)
7117
+ - var(--_right-spacer-gap)
6979
7118
  - var(--_overflow-button-width)
6980
7119
  );
6981
7120
  }
@@ -7131,6 +7270,15 @@ const toolbarTitleStyles = css$1`
7131
7270
  align-items: center;
7132
7271
  }
7133
7272
 
7273
+ /* A solo-fluid title fills the whole row (flex-grow above), so text-align on
7274
+ the shrink-wrapped title-group can't centre it. Centre the group (with its
7275
+ trailing action, as one unit) along the row's main axis instead. Scoped to
7276
+ solo-fluid so a title balanced by real start/end items keeps using the
7277
+ toolbar spacers. */
7278
+ :host([solo-fluid][align="center"]) {
7279
+ justify-content: center;
7280
+ }
7281
+
7134
7282
  :host([hidden]) {
7135
7283
  display: none;
7136
7284
  }
@@ -7248,14 +7396,14 @@ function template$e(component, hasCenterChildren, leftSpacerZero, rightSpacerZer
7248
7396
  const nlddToolbarTranslations = {
7249
7397
  "components.toolbar.overflow-action": "Meer"
7250
7398
  };
7251
- var __defProp$1h = Object.defineProperty;
7252
- var __getOwnPropDesc$1h = Object.getOwnPropertyDescriptor;
7253
- var __decorateClass$1i = (decorators, target, key, kind) => {
7254
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1h(target, key) : target;
7399
+ var __defProp$1i = Object.defineProperty;
7400
+ var __getOwnPropDesc$1i = Object.getOwnPropertyDescriptor;
7401
+ var __decorateClass$1j = (decorators, target, key, kind) => {
7402
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1i(target, key) : target;
7255
7403
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
7256
7404
  if (decorator = decorators[i])
7257
7405
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
7258
- if (kind && result) __defProp$1h(target, key, result);
7406
+ if (kind && result) __defProp$1i(target, key, result);
7259
7407
  return result;
7260
7408
  };
7261
7409
  let NLDDToolbarItem = class extends LitElement {
@@ -7279,19 +7427,19 @@ let NLDDToolbarItem = class extends LitElement {
7279
7427
  }
7280
7428
  };
7281
7429
  NLDDToolbarItem.styles = toolbarItemStyles;
7282
- __decorateClass$1i([
7430
+ __decorateClass$1j([
7283
7431
  property({ reflect: true, converter: reflectNonDefault("") })
7284
7432
  ], NLDDToolbarItem.prototype, "width", 2);
7285
- __decorateClass$1i([
7433
+ __decorateClass$1j([
7286
7434
  property({ reflect: true, attribute: "min-width", converter: reflectNonDefault("") })
7287
7435
  ], NLDDToolbarItem.prototype, "minWidth", 2);
7288
- __decorateClass$1i([
7436
+ __decorateClass$1j([
7289
7437
  property({ reflect: true, attribute: "max-width", converter: reflectNonDefault("") })
7290
7438
  ], NLDDToolbarItem.prototype, "maxWidth", 2);
7291
- __decorateClass$1i([
7439
+ __decorateClass$1j([
7292
7440
  property({ type: String })
7293
7441
  ], NLDDToolbarItem.prototype, "label", 2);
7294
- __decorateClass$1i([
7442
+ __decorateClass$1j([
7295
7443
  property({
7296
7444
  reflect: true,
7297
7445
  converter: {
@@ -7300,13 +7448,13 @@ __decorateClass$1i([
7300
7448
  }
7301
7449
  })
7302
7450
  ], NLDDToolbarItem.prototype, "priority", 2);
7303
- __decorateClass$1i([
7451
+ __decorateClass$1j([
7304
7452
  property({ reflect: true, converter: reflectNonDefault("md") })
7305
7453
  ], NLDDToolbarItem.prototype, "size", 2);
7306
- __decorateClass$1i([
7454
+ __decorateClass$1j([
7307
7455
  property({ type: Boolean, reflect: true, attribute: "show-item-labels" })
7308
7456
  ], NLDDToolbarItem.prototype, "showItemLabels", 2);
7309
- NLDDToolbarItem = __decorateClass$1i([
7457
+ NLDDToolbarItem = __decorateClass$1j([
7310
7458
  customElement("nldd-toolbar-item")
7311
7459
  ], NLDDToolbarItem);
7312
7460
  let NLDDToolbarTitle = class extends LitElement {
@@ -7342,28 +7490,28 @@ let NLDDToolbarTitle = class extends LitElement {
7342
7490
  }
7343
7491
  };
7344
7492
  NLDDToolbarTitle.styles = toolbarTitleStyles;
7345
- __decorateClass$1i([
7493
+ __decorateClass$1j([
7346
7494
  property({ reflect: true, converter: reflectNonDefault("") })
7347
7495
  ], NLDDToolbarTitle.prototype, "text", 2);
7348
- __decorateClass$1i([
7496
+ __decorateClass$1j([
7349
7497
  property({ reflect: true, attribute: "supporting-text", converter: reflectNonDefault("") })
7350
7498
  ], NLDDToolbarTitle.prototype, "supportingText", 2);
7351
- __decorateClass$1i([
7499
+ __decorateClass$1j([
7352
7500
  property({ reflect: true, converter: reflectNonDefault("left") })
7353
7501
  ], NLDDToolbarTitle.prototype, "align", 2);
7354
- __decorateClass$1i([
7502
+ __decorateClass$1j([
7355
7503
  property({ reflect: true, converter: reflectNonDefault("") })
7356
7504
  ], NLDDToolbarTitle.prototype, "width", 2);
7357
- __decorateClass$1i([
7505
+ __decorateClass$1j([
7358
7506
  property({ reflect: true, attribute: "min-width", converter: reflectNonDefault("") })
7359
7507
  ], NLDDToolbarTitle.prototype, "minWidth", 2);
7360
- __decorateClass$1i([
7508
+ __decorateClass$1j([
7361
7509
  property({ reflect: true, attribute: "max-width", converter: reflectNonDefault("") })
7362
7510
  ], NLDDToolbarTitle.prototype, "maxWidth", 2);
7363
- __decorateClass$1i([
7511
+ __decorateClass$1j([
7364
7512
  property({ reflect: true, converter: reflectNonDefault("md") })
7365
7513
  ], NLDDToolbarTitle.prototype, "size", 2);
7366
- NLDDToolbarTitle = __decorateClass$1i([
7514
+ NLDDToolbarTitle = __decorateClass$1j([
7367
7515
  customElement("nldd-toolbar-title")
7368
7516
  ], NLDDToolbarTitle);
7369
7517
  let NLDDToolbar = class extends LitElement {
@@ -7380,6 +7528,7 @@ let NLDDToolbar = class extends LitElement {
7380
7528
  this._overflowIds = /* @__PURE__ */ new Set();
7381
7529
  this._leftSpacerZero = false;
7382
7530
  this._rightSpacerZero = false;
7531
+ this._centerOnly = false;
7383
7532
  this._pinnedOverflowItems = [];
7384
7533
  this._childIds = /* @__PURE__ */ new WeakMap();
7385
7534
  this._idCounter = 0;
@@ -7652,6 +7801,8 @@ let NLDDToolbar = class extends LitElement {
7652
7801
  this.style.setProperty("--_start-width", `${startWidth}px`);
7653
7802
  this.style.setProperty("--_center-width", `${centerWidth}px`);
7654
7803
  this.style.setProperty("--_end-width", `${endWidth}px`);
7804
+ this.style.setProperty("--_left-spacer-gap", startWidth > 0 ? `${itemGap}px` : "0px");
7805
+ this.style.setProperty("--_right-spacer-gap", endWidth > 0 ? `${itemGap}px` : "0px");
7655
7806
  const { leftZero, rightZero } = this._computeSpacerZeros(
7656
7807
  hostWidth,
7657
7808
  itemGap,
@@ -7662,6 +7813,14 @@ let NLDDToolbar = class extends LitElement {
7662
7813
  );
7663
7814
  if (leftZero !== this._leftSpacerZero) this._leftSpacerZero = leftZero;
7664
7815
  if (rightZero !== this._rightSpacerZero) this._rightSpacerZero = rightZero;
7816
+ const centerOnly = !this._hasRenderedChild(this._startChildren) && !this._hasRenderedChild(this._endChildren) && this._centerChildren.length > 0;
7817
+ if (centerOnly !== this._centerOnly) this._centerOnly = centerOnly;
7818
+ }
7819
+ /** Whether any child in the list is actually rendered. getClientRects() is
7820
+ * empty for a `display:none` element (consumer-hidden or toolbar-hidden via
7821
+ * `[hidden]`), so this counts real on-screen presence, not mere DOM presence. */
7822
+ _hasRenderedChild(children) {
7823
+ return children.some((c) => c.element.getClientRects().length > 0);
7665
7824
  }
7666
7825
  _measureAndUpdate() {
7667
7826
  if (this._isMeasuring) return;
@@ -7757,7 +7916,7 @@ let NLDDToolbar = class extends LitElement {
7757
7916
  * promotion is skipped there (matching the previous template behaviour).
7758
7917
  */
7759
7918
  _promoteSoloFluid(itemsEl, itemChildren, titleChildren, centerOnly) {
7760
- const remainingVisible = itemChildren.filter((c) => !c.element.hidden);
7919
+ const remainingVisible = itemChildren.filter((c) => c.element.getClientRects().length > 0);
7761
7920
  if (!centerOnly && remainingVisible.length === 1 && remainingVisible[0].element.hasAttribute("fluid")) {
7762
7921
  const host = remainingVisible[0].element;
7763
7922
  host.removeAttribute("fluid");
@@ -7841,49 +8000,52 @@ let NLDDToolbar = class extends LitElement {
7841
8000
  this._pinnedOverflowItems.length > 0 || this._overflowIds.size > 0,
7842
8001
  this._menuOpen,
7843
8002
  this.label,
7844
- this._startChildren.length === 0 && this._endChildren.length === 0 && this._centerChildren.length > 0,
8003
+ this._centerOnly,
7845
8004
  (key) => this._t(key)
7846
8005
  );
7847
8006
  }
7848
8007
  };
7849
8008
  NLDDToolbar.styles = toolbarStyles;
7850
- __decorateClass$1i([
8009
+ __decorateClass$1j([
7851
8010
  property({ reflect: true, converter: reflectNonDefault("md") })
7852
8011
  ], NLDDToolbar.prototype, "size", 2);
7853
- __decorateClass$1i([
8012
+ __decorateClass$1j([
7854
8013
  property({ type: Boolean, reflect: true, attribute: "show-item-labels" })
7855
8014
  ], NLDDToolbar.prototype, "showItemLabels", 2);
7856
- __decorateClass$1i([
8015
+ __decorateClass$1j([
7857
8016
  property({ type: String, reflect: true })
7858
8017
  ], NLDDToolbar.prototype, "label", 2);
7859
- __decorateClass$1i([
8018
+ __decorateClass$1j([
7860
8019
  property({ type: Object })
7861
8020
  ], NLDDToolbar.prototype, "translations", 2);
7862
- __decorateClass$1i([
8021
+ __decorateClass$1j([
7863
8022
  state()
7864
8023
  ], NLDDToolbar.prototype, "_menuOpen", 2);
7865
- __decorateClass$1i([
8024
+ __decorateClass$1j([
7866
8025
  state()
7867
8026
  ], NLDDToolbar.prototype, "_startChildren", 2);
7868
- __decorateClass$1i([
8027
+ __decorateClass$1j([
7869
8028
  state()
7870
8029
  ], NLDDToolbar.prototype, "_centerChildren", 2);
7871
- __decorateClass$1i([
8030
+ __decorateClass$1j([
7872
8031
  state()
7873
8032
  ], NLDDToolbar.prototype, "_endChildren", 2);
7874
- __decorateClass$1i([
8033
+ __decorateClass$1j([
7875
8034
  state()
7876
8035
  ], NLDDToolbar.prototype, "_overflowIds", 2);
7877
- __decorateClass$1i([
8036
+ __decorateClass$1j([
7878
8037
  state()
7879
8038
  ], NLDDToolbar.prototype, "_leftSpacerZero", 2);
7880
- __decorateClass$1i([
8039
+ __decorateClass$1j([
7881
8040
  state()
7882
8041
  ], NLDDToolbar.prototype, "_rightSpacerZero", 2);
7883
- __decorateClass$1i([
8042
+ __decorateClass$1j([
8043
+ state()
8044
+ ], NLDDToolbar.prototype, "_centerOnly", 2);
8045
+ __decorateClass$1j([
7884
8046
  state()
7885
8047
  ], NLDDToolbar.prototype, "_pinnedOverflowItems", 2);
7886
- NLDDToolbar = __decorateClass$1i([
8048
+ NLDDToolbar = __decorateClass$1j([
7887
8049
  customElement("nldd-toolbar")
7888
8050
  ], NLDDToolbar);
7889
8051
  function groupForOverflow(items) {
@@ -7905,6 +8067,294 @@ function groupForOverflow(items) {
7905
8067
  }
7906
8068
  return groups;
7907
8069
  }
8070
+ const avatarStyles = css$1`
8071
+ :host {
8072
+ box-sizing: border-box;
8073
+ }
8074
+
8075
+
8076
+ /* # Host */
8077
+
8078
+ :host {
8079
+ --_size: 100%;
8080
+ --_corner-radius: var(--components-avatar-corner-radius);
8081
+ --_background-color: var(--components-avatar-background-color);
8082
+ --_content-color: var(--components-avatar-content-color);
8083
+ --_icon-scale: 0.6;
8084
+ --_initials-scale: 0.56;
8085
+ --_initials-font-weight: 600;
8086
+ --_initials-fit: 1;
8087
+ --_shape-scale: 1;
8088
+
8089
+ ${inheritedTextReset}
8090
+ display: inline-flex;
8091
+ width: var(--_size);
8092
+ aspect-ratio: 1;
8093
+ flex-shrink: 0;
8094
+ align-items: center;
8095
+ justify-content: center;
8096
+ }
8097
+
8098
+ :host([hidden]) {
8099
+ display: none;
8100
+ }
8101
+
8102
+ :host([type="organization"]) {
8103
+ --_corner-radius: var(--components-avatar-organization-corner-radius);
8104
+ }
8105
+
8106
+ /* Fill tracks the shared content-colour channel (set by list-item / table /
8107
+ menu), falling back to currentColor for buttons / standalone — mirrors
8108
+ nldd-activity-indicator. The fill (not the text) colour must resolve here,
8109
+ so .avatar keeps its inherited colour and the contrast text lives on the
8110
+ child elements. */
8111
+ :host([color="inherit"]) {
8112
+ --_background-color: var(--context-content-color, currentColor);
8113
+ --_content-color: var(--semantics-content-contrast-color);
8114
+ }
8115
+
8116
+ /* Shrink the visible disc to 5/6 of the host (centred), so the avatar lines
8117
+ up optically with an icon on the same grid (an icon glyph has built-in
8118
+ padding). The host keeps the grid cell size. */
8119
+ :host([icon-aligned]) {
8120
+ --_shape-scale: calc(5 / 6);
8121
+ }
8122
+
8123
+
8124
+ /* # Size — spacer-aligned, mirrors nldd-icon */
8125
+
8126
+ :host([size="16"]) { --_size: var(--primitives-space-16); }
8127
+ :host([size="20"]) { --_size: var(--primitives-space-20); }
8128
+ :host([size="24"]) { --_size: var(--primitives-space-24); }
8129
+ :host([size="28"]) { --_size: var(--primitives-space-28); }
8130
+ :host([size="32"]) { --_size: var(--primitives-space-32); }
8131
+ :host([size="40"]) { --_size: var(--primitives-space-40); }
8132
+ :host([size="44"]) { --_size: var(--primitives-space-44); }
8133
+ :host([size="48"]) { --_size: var(--primitives-space-48); }
8134
+ :host([size="56"]) { --_size: var(--primitives-space-56); }
8135
+ :host([size="64"]) { --_size: var(--primitives-space-64); }
8136
+ :host([size="80"]) { --_size: var(--primitives-space-80); }
8137
+ :host([size="96"]) { --_size: var(--primitives-space-96); }
8138
+
8139
+
8140
+ /* # Avatar */
8141
+
8142
+ /* container-type: inline-size lets the initials and icon scale (cqi) with the
8143
+ avatar's rendered width, so a fixed size and a filled (100%) size both work.
8144
+ inline-size (not size) leaves the block axis free, so aspect-ratio can drive
8145
+ the height without the box collapsing in flex/grid. color stays inherited
8146
+ here so --_background-color's currentColor (color="inherit") resolves to the
8147
+ surrounding colour, not the content colour. */
8148
+ .avatar {
8149
+ container-type: inline-size;
8150
+ display: flex;
8151
+ width: calc(100% * var(--_shape-scale));
8152
+ height: calc(100% * var(--_shape-scale));
8153
+ align-items: center;
8154
+ justify-content: center;
8155
+ overflow: hidden;
8156
+ border-radius: var(--_corner-radius);
8157
+ background-color: var(--_background-color);
8158
+ }
8159
+
8160
+
8161
+ /* # Content */
8162
+
8163
+ .avatar__image {
8164
+ display: block;
8165
+ width: 100%;
8166
+ height: 100%;
8167
+ object-fit: cover;
8168
+ }
8169
+
8170
+ .avatar__initials {
8171
+ font-family: var(--primitives-font-family-body);
8172
+ font-weight: var(--_initials-font-weight);
8173
+ font-size: calc(var(--_initials-scale) * 100cqi);
8174
+ line-height: 1;
8175
+ color: var(--_content-color);
8176
+ /* fit-initials shrinks wide initials via this factor (measured in JS);
8177
+ transform (not font-size) so scrollWidth stays the natural width. */
8178
+ transform: scale(var(--_initials-fit));
8179
+ user-select: none;
8180
+ }
8181
+
8182
+ .avatar__icon {
8183
+ width: calc(var(--_icon-scale) * 100cqi);
8184
+ color: var(--_content-color);
8185
+ }
8186
+
8187
+ @media (forced-colors: active) {
8188
+ .avatar {
8189
+ border: var(--primitives-border-width-regular) solid CanvasText;
8190
+ }
8191
+ }
8192
+ `;
8193
+ function avatarTemplate(component) {
8194
+ const showImage = Boolean(component.src) && !component._imageFailed;
8195
+ const initials = component.resolvedInitials;
8196
+ const showInitials = !showImage && initials !== "";
8197
+ const showIcon = !showImage && !showInitials;
8198
+ return html$1`
8199
+ <div class="avatar">
8200
+ ${showImage ? html$1`
8201
+ <img class="avatar__image"
8202
+ src=${component.src}
8203
+ srcset=${component.srcset || nothing}
8204
+ sizes=${component.size ? `${component.size}px` : "auto"}
8205
+ alt=""
8206
+ loading="lazy"
8207
+ decoding="async"
8208
+ @error=${component._onImageError}
8209
+ >
8210
+ ` : nothing}
8211
+ ${showInitials ? html$1`
8212
+ <span class="avatar__initials"
8213
+ aria-hidden="true"
8214
+ >${initials}</span>
8215
+ ` : nothing}
8216
+ ${showIcon ? html$1`
8217
+ <nldd-icon class="avatar__icon"
8218
+ name=${component.resolvedIcon}
8219
+ ></nldd-icon>
8220
+ ` : nothing}
8221
+ </div>
8222
+ `;
8223
+ }
8224
+ var __defProp$1h = Object.defineProperty;
8225
+ var __getOwnPropDesc$1h = Object.getOwnPropertyDescriptor;
8226
+ var __decorateClass$1i = (decorators, target, key, kind) => {
8227
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1h(target, key) : target;
8228
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
8229
+ if (decorator = decorators[i])
8230
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
8231
+ if (kind && result) __defProp$1h(target, key, result);
8232
+ return result;
8233
+ };
8234
+ const INITIALS_FIT_RATIO = 0.75;
8235
+ let NLDDAvatar = class extends LitElement {
8236
+ constructor() {
8237
+ super(...arguments);
8238
+ this.src = "";
8239
+ this.srcset = "";
8240
+ this.name = "";
8241
+ this.initials = "";
8242
+ this.icon = "";
8243
+ this.type = "person";
8244
+ this.color = "default";
8245
+ this.size = "";
8246
+ this.iconAligned = false;
8247
+ this.decorative = false;
8248
+ this._imageFailed = false;
8249
+ this._onImageError = () => {
8250
+ this._imageFailed = true;
8251
+ };
8252
+ this._resizeObserver = new ResizeObserver(() => this._fitInitials());
8253
+ }
8254
+ /** Initials shown when there is no image: an explicit `initials` wins,
8255
+ * otherwise the first letter of the first and last word of `name`. */
8256
+ get resolvedInitials() {
8257
+ if (this.initials) return this.initials.slice(0, 3);
8258
+ const words = this.name.trim().split(/\s+/).filter(Boolean);
8259
+ if (words.length === 0) return "";
8260
+ const first = words[0].charAt(0);
8261
+ const last = words.length > 1 ? words[words.length - 1].charAt(0) : "";
8262
+ return (first + last).toUpperCase();
8263
+ }
8264
+ /** Fallback icon when there is neither image nor initials. */
8265
+ get resolvedIcon() {
8266
+ if (this.icon) return this.icon;
8267
+ return this.type === "organization" ? "building" : "person";
8268
+ }
8269
+ willUpdate(changed) {
8270
+ if (changed.has("src") || changed.has("srcset")) this._imageFailed = false;
8271
+ }
8272
+ firstUpdated() {
8273
+ const disc = this.shadowRoot?.querySelector(".avatar");
8274
+ if (disc) this._resizeObserver.observe(disc);
8275
+ }
8276
+ connectedCallback() {
8277
+ super.connectedCallback();
8278
+ const disc = this.shadowRoot?.querySelector(".avatar");
8279
+ if (this.hasUpdated && disc) this._resizeObserver.observe(disc);
8280
+ }
8281
+ disconnectedCallback() {
8282
+ super.disconnectedCallback();
8283
+ this._resizeObserver.disconnect();
8284
+ }
8285
+ updated(changed) {
8286
+ const labelled = !this.decorative && this.name.trim() !== "";
8287
+ if (labelled) {
8288
+ this.setAttribute("role", "img");
8289
+ this.setAttribute("aria-label", this.name);
8290
+ this.removeAttribute("aria-hidden");
8291
+ } else {
8292
+ this.setAttribute("aria-hidden", "true");
8293
+ this.removeAttribute("role");
8294
+ this.removeAttribute("aria-label");
8295
+ }
8296
+ if (changed.has("name") || changed.has("initials") || changed.has("src") || changed.has("srcset") || changed.has("_imageFailed")) {
8297
+ this._fitInitials();
8298
+ }
8299
+ }
8300
+ /** Shrink wide initials so they always fit the disc. The fit factor is the
8301
+ * disc's usable width over the initials' natural width (scrollWidth ignores
8302
+ * the applied transform, so the measurement stays stable); capped at 1 so
8303
+ * narrow initials are never enlarged. Applied via --_initials-fit (a
8304
+ * transform scale), so no reflow and it stays measurable. */
8305
+ _fitInitials() {
8306
+ const initials = this.shadowRoot?.querySelector(".avatar__initials");
8307
+ const disc = this.shadowRoot?.querySelector(".avatar");
8308
+ if (!initials || !disc) {
8309
+ this.style.removeProperty("--_initials-fit");
8310
+ return;
8311
+ }
8312
+ const available = disc.clientWidth * INITIALS_FIT_RATIO;
8313
+ const actual = initials.scrollWidth;
8314
+ if (available <= 0 || actual <= 0) return;
8315
+ this.style.setProperty("--_initials-fit", String(Math.min(1, available / actual)));
8316
+ }
8317
+ render() {
8318
+ return avatarTemplate(this);
8319
+ }
8320
+ };
8321
+ NLDDAvatar.styles = avatarStyles;
8322
+ __decorateClass$1i([
8323
+ property({ type: String })
8324
+ ], NLDDAvatar.prototype, "src", 2);
8325
+ __decorateClass$1i([
8326
+ property({ type: String })
8327
+ ], NLDDAvatar.prototype, "srcset", 2);
8328
+ __decorateClass$1i([
8329
+ property({ type: String })
8330
+ ], NLDDAvatar.prototype, "name", 2);
8331
+ __decorateClass$1i([
8332
+ property({ type: String })
8333
+ ], NLDDAvatar.prototype, "initials", 2);
8334
+ __decorateClass$1i([
8335
+ property({ type: String })
8336
+ ], NLDDAvatar.prototype, "icon", 2);
8337
+ __decorateClass$1i([
8338
+ property({ reflect: true, converter: reflectNonDefault("person") })
8339
+ ], NLDDAvatar.prototype, "type", 2);
8340
+ __decorateClass$1i([
8341
+ property({ reflect: true, converter: reflectNonDefault("default") })
8342
+ ], NLDDAvatar.prototype, "color", 2);
8343
+ __decorateClass$1i([
8344
+ property({ reflect: true, converter: reflectNonDefault("") })
8345
+ ], NLDDAvatar.prototype, "size", 2);
8346
+ __decorateClass$1i([
8347
+ property({ type: Boolean, reflect: true, attribute: "icon-aligned" })
8348
+ ], NLDDAvatar.prototype, "iconAligned", 2);
8349
+ __decorateClass$1i([
8350
+ property({ type: Boolean, reflect: true })
8351
+ ], NLDDAvatar.prototype, "decorative", 2);
8352
+ __decorateClass$1i([
8353
+ state()
8354
+ ], NLDDAvatar.prototype, "_imageFailed", 2);
8355
+ NLDDAvatar = __decorateClass$1i([
8356
+ customElement("nldd-avatar")
8357
+ ], NLDDAvatar);
7908
8358
  const smMax$h = unsafeCSS(breakpoints.smMax);
7909
8359
  const blockquoteStyles = css$1`
7910
8360
  :host {
@@ -8119,19 +8569,29 @@ const bylineStyles = css$1`
8119
8569
  object-fit: cover !important;
8120
8570
  }
8121
8571
 
8122
- .byline__avatar {
8123
- display: block;
8572
+ /* A slotted avatar can't be wrapped, so size it here. width/height need
8573
+ !important to beat the avatar's own :host width. */
8574
+ .byline__avatars ::slotted(nldd-avatar) {
8575
+ width: var(--_avatar-size) !important;
8576
+ height: var(--_avatar-size) !important;
8124
8577
  margin-inline-start: calc(-1 * var(--_avatar-overlap-size));
8125
8578
  border-radius: var(--_avatar-corner-radius);
8126
8579
  box-shadow: 0 0 0 var(--_avatar-border-width) var(--_avatar-border-color);
8580
+ }
8581
+
8582
+ .byline__avatar {
8583
+ display: flex;
8584
+ box-sizing: border-box;
8127
8585
  width: var(--_avatar-size);
8128
8586
  height: var(--_avatar-size);
8129
- object-fit: cover;
8587
+ flex-shrink: 0;
8588
+ margin-inline-start: calc(-1 * var(--_avatar-overlap-size));
8589
+ border-radius: var(--_avatar-corner-radius);
8590
+ box-shadow: 0 0 0 var(--_avatar-border-width) var(--_avatar-border-color);
8130
8591
  }
8131
8592
 
8132
8593
  @media (forced-colors: active) {
8133
- .byline__avatars ::slotted(img),
8134
- .byline__avatar {
8594
+ .byline__avatars ::slotted(img) {
8135
8595
  border: var(--_avatar-border-width) solid Canvas !important;
8136
8596
  }
8137
8597
  }
@@ -8175,14 +8635,14 @@ function bylineTemplate(component) {
8175
8635
  const hasText = Boolean(component.text) || component._hasSlottedText;
8176
8636
  const hasSupportingText = Boolean(component.supportingText) || component._hasSlottedSupportingText;
8177
8637
  const hasAvatars = component._hasSlottedAvatars || Boolean(component.avatarSrc);
8178
- const avatarImage = component.avatarSrc && !component._hasSlottedAvatars ? html$1`<img class="byline__avatar"
8179
- src=${component.avatarSrc}
8180
- srcset=${component.avatarSrcset || nothing}
8181
- sizes="40px"
8182
- alt=${component.avatarAlt}
8183
- loading="lazy"
8184
- decoding="async"
8185
- >` : nothing;
8638
+ const avatarImage = component.avatarSrc && !component._hasSlottedAvatars ? html$1`<div class="byline__avatar">
8639
+ <nldd-avatar
8640
+ src=${component.avatarSrc}
8641
+ srcset=${component.avatarSrcset || nothing}
8642
+ name=${component.avatarAlt || nothing}
8643
+ ?decorative=${!component.avatarAlt}
8644
+ ></nldd-avatar>
8645
+ </div>` : nothing;
8186
8646
  return html$1`
8187
8647
  <div class="byline"
8188
8648
  ?data-multiple-avatars=${component._avatarCount >= 2}
@@ -26068,16 +26528,16 @@ const highlightStyle = HighlightStyle.define([
26068
26528
  ]);
26069
26529
  const nlddCodeMirrorTheme = [baseTheme$1, syntaxHighlighting(highlightStyle)];
26070
26530
  const loaders = {
26071
- json: async () => (await import("./index-Bqf6o41r.js")).json(),
26072
- yaml: async () => (await import("./index-Bfw_pYWB.js")).yaml(),
26531
+ json: async () => (await import("./index-DZo3DrGQ.js")).json(),
26532
+ yaml: async () => (await import("./index-CXC-Objp.js")).yaml(),
26073
26533
  javascript: async () => (await Promise.resolve().then(() => index$2)).javascript(),
26074
26534
  typescript: async () => (await Promise.resolve().then(() => index$2)).javascript({ typescript: true }),
26075
26535
  css: async () => (await Promise.resolve().then(() => index$3)).css(),
26076
26536
  html: async () => (await Promise.resolve().then(() => index$1)).html(),
26077
- xml: async () => (await import("./index-CXT1jMFt.js")).xml(),
26078
- python: async () => (await import("./index-CKnwqp_9.js")).python(),
26079
- rust: async () => (await import("./index-DO7aT0MT.js")).rust(),
26080
- sql: async () => (await import("./index-DWwviobk.js")).sql(),
26537
+ xml: async () => (await import("./index-Bf4pa5Bp.js")).xml(),
26538
+ python: async () => (await import("./index-CfvgUB5p.js")).python(),
26539
+ rust: async () => (await import("./index-DB-i084x.js")).rust(),
26540
+ sql: async () => (await import("./index-BfOpap4b.js")).sql(),
26081
26541
  markdown: async () => (await Promise.resolve().then(() => index)).markdown(),
26082
26542
  // No official lang-* package — wrap the legacy StreamLanguage modes.
26083
26543
  bash: async () => new LanguageSupport(StreamLanguage.define((await import("./shell-BlsXDxCn.js")).shell)),
@@ -27287,6 +27747,7 @@ let NLDDRichText = class extends LitElement {
27287
27747
  super(...arguments);
27288
27748
  this.spacing = "snug";
27289
27749
  this.centered = false;
27750
+ this.hyphens = false;
27290
27751
  this.color = "";
27291
27752
  this.translations = {};
27292
27753
  }
@@ -27337,6 +27798,9 @@ __decorateClass$1d([
27337
27798
  __decorateClass$1d([
27338
27799
  property({ type: Boolean, reflect: true })
27339
27800
  ], NLDDRichText.prototype, "centered", 2);
27801
+ __decorateClass$1d([
27802
+ property({ type: Boolean, reflect: true })
27803
+ ], NLDDRichText.prototype, "hyphens", 2);
27340
27804
  __decorateClass$1d([
27341
27805
  property({ reflect: true, converter: reflectNonDefault("") })
27342
27806
  ], NLDDRichText.prototype, "color", 2);
@@ -27360,7 +27824,7 @@ const tagStyles = css$1`
27360
27824
  --_min-height: var(--primitives-space-24);
27361
27825
  --_inline-padding: var(--primitives-space-6);
27362
27826
  --_gap: var(--primitives-space-3);
27363
- --_content-color: var(--semantics-categories-neutral-tinted-primary-content-color);
27827
+ --_content-color: var(--semantics-categories-neutral-tinted-content-color);
27364
27828
  --_border-color: var(--semantics-categories-neutral-tinted-highlight-border-color);
27365
27829
  --_border-width: var(--primitives-border-width-thin);
27366
27830
  --_font: var(--primitives-font-body-sm-medium-flat);
@@ -27385,25 +27849,25 @@ const tagStyles = css$1`
27385
27849
 
27386
27850
  :host([color="accent"]) {
27387
27851
  --_background-color: var(--semantics-categories-accent-tinted-background-color);
27388
- --_content-color: var(--semantics-categories-accent-tinted-primary-content-color);
27852
+ --_content-color: var(--semantics-categories-accent-tinted-content-color);
27389
27853
  --_border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
27390
27854
  }
27391
27855
 
27392
27856
  :host([color="success"]) {
27393
27857
  --_background-color: var(--semantics-categories-success-tinted-background-color);
27394
- --_content-color: var(--semantics-categories-success-tinted-primary-content-color);
27858
+ --_content-color: var(--semantics-categories-success-tinted-content-color);
27395
27859
  --_border-color: var(--semantics-categories-success-tinted-highlight-border-color);
27396
27860
  }
27397
27861
 
27398
27862
  :host([color="warning"]) {
27399
27863
  --_background-color: var(--semantics-categories-warning-tinted-background-color);
27400
- --_content-color: var(--semantics-categories-warning-tinted-primary-content-color);
27864
+ --_content-color: var(--semantics-categories-warning-tinted-content-color);
27401
27865
  --_border-color: var(--semantics-categories-warning-tinted-highlight-border-color);
27402
27866
  }
27403
27867
 
27404
27868
  :host([color="critical"]) {
27405
27869
  --_background-color: var(--semantics-categories-critical-tinted-background-color);
27406
- --_content-color: var(--semantics-categories-critical-tinted-primary-content-color);
27870
+ --_content-color: var(--semantics-categories-critical-tinted-content-color);
27407
27871
  --_border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
27408
27872
  }
27409
27873
 
@@ -27411,109 +27875,109 @@ const tagStyles = css$1`
27411
27875
 
27412
27876
  :host([color="lintblauw"]) {
27413
27877
  --_background-color: var(--semantics-categories-lintblauw-tinted-background-color);
27414
- --_content-color: var(--semantics-categories-lintblauw-tinted-primary-content-color);
27878
+ --_content-color: var(--semantics-categories-lintblauw-tinted-content-color);
27415
27879
  --_border-color: var(--semantics-categories-lintblauw-tinted-highlight-border-color);
27416
27880
  }
27417
27881
 
27418
27882
  :host([color="donkerblauw"]) {
27419
27883
  --_background-color: var(--semantics-categories-donkerblauw-tinted-background-color);
27420
- --_content-color: var(--semantics-categories-donkerblauw-tinted-primary-content-color);
27884
+ --_content-color: var(--semantics-categories-donkerblauw-tinted-content-color);
27421
27885
  --_border-color: var(--semantics-categories-donkerblauw-tinted-highlight-border-color);
27422
27886
  }
27423
27887
 
27424
27888
  :host([color="hemelblauw"]) {
27425
27889
  --_background-color: var(--semantics-categories-hemelblauw-tinted-background-color);
27426
- --_content-color: var(--semantics-categories-hemelblauw-tinted-primary-content-color);
27890
+ --_content-color: var(--semantics-categories-hemelblauw-tinted-content-color);
27427
27891
  --_border-color: var(--semantics-categories-hemelblauw-tinted-highlight-border-color);
27428
27892
  }
27429
27893
 
27430
27894
  :host([color="lichtblauw"]) {
27431
27895
  --_background-color: var(--semantics-categories-lichtblauw-tinted-background-color);
27432
- --_content-color: var(--semantics-categories-lichtblauw-tinted-primary-content-color);
27896
+ --_content-color: var(--semantics-categories-lichtblauw-tinted-content-color);
27433
27897
  --_border-color: var(--semantics-categories-lichtblauw-tinted-highlight-border-color);
27434
27898
  }
27435
27899
 
27436
27900
  :host([color="paars"]) {
27437
27901
  --_background-color: var(--semantics-categories-paars-tinted-background-color);
27438
- --_content-color: var(--semantics-categories-paars-tinted-primary-content-color);
27902
+ --_content-color: var(--semantics-categories-paars-tinted-content-color);
27439
27903
  --_border-color: var(--semantics-categories-paars-tinted-highlight-border-color);
27440
27904
  }
27441
27905
 
27442
27906
  :host([color="violet"]) {
27443
27907
  --_background-color: var(--semantics-categories-violet-tinted-background-color);
27444
- --_content-color: var(--semantics-categories-violet-tinted-primary-content-color);
27908
+ --_content-color: var(--semantics-categories-violet-tinted-content-color);
27445
27909
  --_border-color: var(--semantics-categories-violet-tinted-highlight-border-color);
27446
27910
  }
27447
27911
 
27448
27912
  :host([color="robijnrood"]) {
27449
27913
  --_background-color: var(--semantics-categories-robijnrood-tinted-background-color);
27450
- --_content-color: var(--semantics-categories-robijnrood-tinted-primary-content-color);
27914
+ --_content-color: var(--semantics-categories-robijnrood-tinted-content-color);
27451
27915
  --_border-color: var(--semantics-categories-robijnrood-tinted-highlight-border-color);
27452
27916
  }
27453
27917
 
27454
27918
  :host([color="roze"]) {
27455
27919
  --_background-color: var(--semantics-categories-roze-tinted-background-color);
27456
- --_content-color: var(--semantics-categories-roze-tinted-primary-content-color);
27920
+ --_content-color: var(--semantics-categories-roze-tinted-content-color);
27457
27921
  --_border-color: var(--semantics-categories-roze-tinted-highlight-border-color);
27458
27922
  }
27459
27923
 
27460
27924
  :host([color="rood"]) {
27461
27925
  --_background-color: var(--semantics-categories-rood-tinted-background-color);
27462
- --_content-color: var(--semantics-categories-rood-tinted-primary-content-color);
27926
+ --_content-color: var(--semantics-categories-rood-tinted-content-color);
27463
27927
  --_border-color: var(--semantics-categories-rood-tinted-highlight-border-color);
27464
27928
  }
27465
27929
 
27466
27930
  :host([color="oranje"]) {
27467
27931
  --_background-color: var(--semantics-categories-oranje-tinted-background-color);
27468
- --_content-color: var(--semantics-categories-oranje-tinted-primary-content-color);
27932
+ --_content-color: var(--semantics-categories-oranje-tinted-content-color);
27469
27933
  --_border-color: var(--semantics-categories-oranje-tinted-highlight-border-color);
27470
27934
  }
27471
27935
 
27472
27936
  :host([color="donkergeel"]) {
27473
27937
  --_background-color: var(--semantics-categories-donkergeel-tinted-background-color);
27474
- --_content-color: var(--semantics-categories-donkergeel-tinted-primary-content-color);
27938
+ --_content-color: var(--semantics-categories-donkergeel-tinted-content-color);
27475
27939
  --_border-color: var(--semantics-categories-donkergeel-tinted-highlight-border-color);
27476
27940
  }
27477
27941
 
27478
27942
  :host([color="geel"]) {
27479
27943
  --_background-color: var(--semantics-categories-geel-tinted-background-color);
27480
- --_content-color: var(--semantics-categories-geel-tinted-primary-content-color);
27944
+ --_content-color: var(--semantics-categories-geel-tinted-content-color);
27481
27945
  --_border-color: var(--semantics-categories-geel-tinted-highlight-border-color);
27482
27946
  }
27483
27947
 
27484
27948
  :host([color="donkerbruin"]) {
27485
27949
  --_background-color: var(--semantics-categories-donkerbruin-tinted-background-color);
27486
- --_content-color: var(--semantics-categories-donkerbruin-tinted-primary-content-color);
27950
+ --_content-color: var(--semantics-categories-donkerbruin-tinted-content-color);
27487
27951
  --_border-color: var(--semantics-categories-donkerbruin-tinted-highlight-border-color);
27488
27952
  }
27489
27953
 
27490
27954
  :host([color="bruin"]) {
27491
27955
  --_background-color: var(--semantics-categories-bruin-tinted-background-color);
27492
- --_content-color: var(--semantics-categories-bruin-tinted-primary-content-color);
27956
+ --_content-color: var(--semantics-categories-bruin-tinted-content-color);
27493
27957
  --_border-color: var(--semantics-categories-bruin-tinted-highlight-border-color);
27494
27958
  }
27495
27959
 
27496
27960
  :host([color="donkergroen"]) {
27497
27961
  --_background-color: var(--semantics-categories-donkergroen-tinted-background-color);
27498
- --_content-color: var(--semantics-categories-donkergroen-tinted-primary-content-color);
27962
+ --_content-color: var(--semantics-categories-donkergroen-tinted-content-color);
27499
27963
  --_border-color: var(--semantics-categories-donkergroen-tinted-highlight-border-color);
27500
27964
  }
27501
27965
 
27502
27966
  :host([color="groen"]) {
27503
27967
  --_background-color: var(--semantics-categories-groen-tinted-background-color);
27504
- --_content-color: var(--semantics-categories-groen-tinted-primary-content-color);
27968
+ --_content-color: var(--semantics-categories-groen-tinted-content-color);
27505
27969
  --_border-color: var(--semantics-categories-groen-tinted-highlight-border-color);
27506
27970
  }
27507
27971
 
27508
27972
  :host([color="mosgroen"]) {
27509
27973
  --_background-color: var(--semantics-categories-mosgroen-tinted-background-color);
27510
- --_content-color: var(--semantics-categories-mosgroen-tinted-primary-content-color);
27974
+ --_content-color: var(--semantics-categories-mosgroen-tinted-content-color);
27511
27975
  --_border-color: var(--semantics-categories-mosgroen-tinted-highlight-border-color);
27512
27976
  }
27513
27977
 
27514
27978
  :host([color="mintgroen"]) {
27515
27979
  --_background-color: var(--semantics-categories-mintgroen-tinted-background-color);
27516
- --_content-color: var(--semantics-categories-mintgroen-tinted-primary-content-color);
27980
+ --_content-color: var(--semantics-categories-mintgroen-tinted-content-color);
27517
27981
  --_border-color: var(--semantics-categories-mintgroen-tinted-highlight-border-color);
27518
27982
  }
27519
27983
 
@@ -28035,7 +28499,7 @@ const tokenStyles = css$1`
28035
28499
  min-width: 0;
28036
28500
  padding: 0 var(--primitives-space-6);
28037
28501
  align-items: center;
28038
- color: var(--semantics-buttons-neutral-tinted-primary-content-color);
28502
+ color: var(--semantics-buttons-neutral-tinted-content-color);
28039
28503
  font: var(--semantics-buttons-sm-primary-text-font);
28040
28504
  transition: background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default);
28041
28505
  appearance: none;
@@ -31623,11 +32087,11 @@ const dropdownStyles = css$1`
31623
32087
  --_validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);
31624
32088
  --_picker-icon-size: var(--primitives-space-24);
31625
32089
  --_background-color: var(--semantics-buttons-neutral-tinted-background-color);
31626
- --_content-color: var(--semantics-buttons-neutral-tinted-primary-content-color);
32090
+ --_content-color: var(--semantics-buttons-neutral-tinted-content-color);
31627
32091
  --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
31628
- --_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
32092
+ --_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
31629
32093
  --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
31630
- --_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
32094
+ --_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
31631
32095
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
31632
32096
  --_is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
31633
32097
  --_is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);
@@ -31667,11 +32131,11 @@ const dropdownStyles = css$1`
31667
32131
 
31668
32132
  :host([expanded]) {
31669
32133
  --_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
31670
- --_content-color: var(--semantics-buttons-neutral-tinted-is-expanded-primary-content-color);
32134
+ --_content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
31671
32135
  --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
31672
- --_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-primary-content-color);
32136
+ --_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
31673
32137
  --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
31674
- --_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-primary-content-color);
32138
+ --_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
31675
32139
  --_highlight-border-color: var(--_is-expanded-highlight-border-color);
31676
32140
  }
31677
32141
 
@@ -34116,7 +34580,7 @@ const segmentedControlItemStyles = css$1`
34116
34580
  gap: var(--_gap);
34117
34581
  align-items: center;
34118
34582
  justify-content: center;
34119
- color: var(--semantics-buttons-neutral-tinted-primary-content-color);
34583
+ color: var(--semantics-buttons-neutral-tinted-content-color);
34120
34584
  font: var(--_font);
34121
34585
  }
34122
34586
 
@@ -34127,20 +34591,20 @@ const segmentedControlItemStyles = css$1`
34127
34591
  @media (hover: hover) {
34128
34592
  :host(:not([selected])) .segmented-control__item:hover {
34129
34593
  background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
34130
- color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
34594
+ color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
34131
34595
  }
34132
34596
  }
34133
34597
 
34134
34598
  :host(:not([selected])) .segmented-control__item:active {
34135
34599
  background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
34136
- color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
34600
+ color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
34137
34601
  }
34138
34602
 
34139
34603
  :host([selected]) .segmented-control__item {
34140
34604
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
34141
34605
 
34142
34606
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
34143
- color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
34607
+ color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
34144
34608
  }
34145
34609
 
34146
34610
  @media (hover: hover) {
@@ -34148,7 +34612,7 @@ const segmentedControlItemStyles = css$1`
34148
34612
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
34149
34613
 
34150
34614
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
34151
- color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-primary-content-color);
34615
+ color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
34152
34616
  }
34153
34617
  }
34154
34618
 
@@ -34156,7 +34620,7 @@ const segmentedControlItemStyles = css$1`
34156
34620
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
34157
34621
 
34158
34622
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
34159
- color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-primary-content-color);
34623
+ color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
34160
34624
  }
34161
34625
 
34162
34626
  @media (forced-colors: active) {
@@ -43915,6 +44379,145 @@ function mentions(getSource, onInsert) {
43915
44379
  popupTheme
43916
44380
  ];
43917
44381
  }
44382
+ function textCaretBox(dom) {
44383
+ const view = EditorView.findFromDOM(dom);
44384
+ if (!view) return null;
44385
+ const pos = view.posAtDOM(dom);
44386
+ const line = view.state.doc.lineAt(pos);
44387
+ try {
44388
+ const coords = view.coordsAtPos(Math.max(line.from, pos - 1), 1);
44389
+ return coords ? { top: coords.top, bottom: coords.bottom } : null;
44390
+ } catch {
44391
+ return null;
44392
+ }
44393
+ }
44394
+ class LinkOpenWidget extends WidgetType {
44395
+ constructor(href, label) {
44396
+ super();
44397
+ this.href = href;
44398
+ this.label = label;
44399
+ }
44400
+ eq(other) {
44401
+ return other.href === this.href;
44402
+ }
44403
+ toDOM() {
44404
+ const anchor = document.createElement("a");
44405
+ anchor.className = "cm-link-badge";
44406
+ anchor.href = this.href;
44407
+ anchor.target = "_blank";
44408
+ anchor.rel = "noopener noreferrer";
44409
+ anchor.setAttribute("aria-label", this.label(this.href));
44410
+ const icon2 = document.createElement("nldd-icon");
44411
+ icon2.setAttribute("name", "external-link");
44412
+ icon2.setAttribute("aria-hidden", "true");
44413
+ anchor.append(icon2);
44414
+ anchor.addEventListener("mousedown", (event) => event.preventDefault());
44415
+ return anchor;
44416
+ }
44417
+ ignoreEvent() {
44418
+ return true;
44419
+ }
44420
+ /** Keep the caret at the badge's right edge text-height, not the badge's own box
44421
+ * height (which is taller and would flip with the cursor's arrival direction). */
44422
+ coordsAt(dom) {
44423
+ const badge = dom.getBoundingClientRect();
44424
+ const box = textCaretBox(dom) ?? { top: badge.top, bottom: badge.bottom };
44425
+ const x = badge.right + parseFloat(getComputedStyle(dom).marginRight);
44426
+ return { left: x, right: x, top: box.top, bottom: box.bottom };
44427
+ }
44428
+ }
44429
+ function normaliseLabel(raw) {
44430
+ return raw.replace(/^\[|\]$/g, "").trim().replace(/\s+/g, " ").toLowerCase();
44431
+ }
44432
+ function referenceDefs(state2) {
44433
+ const defs = /* @__PURE__ */ new Map();
44434
+ syntaxTree(state2).iterate({
44435
+ enter: (node) => {
44436
+ if (node.name !== "LinkReference") return;
44437
+ let label = null;
44438
+ let url = null;
44439
+ for (let c = node.node.firstChild; c; c = c.nextSibling) {
44440
+ if (c.name === "LinkLabel") label = normaliseLabel(state2.sliceDoc(c.from, c.to));
44441
+ else if (c.name === "URL") url = state2.sliceDoc(c.from, c.to);
44442
+ }
44443
+ if (label && url && !defs.has(label)) defs.set(label, url);
44444
+ }
44445
+ });
44446
+ return defs;
44447
+ }
44448
+ function isSafeHref(href) {
44449
+ const normalised = href.replace(/[\u0000-\u0020\u007f-\u009f]/g, "");
44450
+ if (!/^[a-z][a-z0-9+.-]*:/i.test(normalised)) return true;
44451
+ return /^(?:https?|mailto|tel):/i.test(normalised);
44452
+ }
44453
+ function hrefOf(state2, link, refs) {
44454
+ let label = null;
44455
+ for (let child = link.firstChild; child; child = child.nextSibling) {
44456
+ if (child.name === "URL") {
44457
+ const href = state2.sliceDoc(child.from, child.to);
44458
+ return href && !href.startsWith(MENTION_HREF_PREFIX) && isSafeHref(href) ? href : null;
44459
+ }
44460
+ if (child.name === "LinkLabel") label = normaliseLabel(state2.sliceDoc(child.from, child.to));
44461
+ }
44462
+ if (label) {
44463
+ const href = refs.get(label);
44464
+ return href && !href.startsWith(MENTION_HREF_PREFIX) && isSafeHref(href) ? href : null;
44465
+ }
44466
+ return null;
44467
+ }
44468
+ function inLinkContext(node) {
44469
+ for (let p = node.parent; p; p = p.parent) {
44470
+ if (p.name === "Link" || p.name === "LinkReference" || p.name === "Image") return true;
44471
+ }
44472
+ return false;
44473
+ }
44474
+ function bareHref(state2, node) {
44475
+ const raw = state2.sliceDoc(node.from, node.to);
44476
+ if (!raw || raw.startsWith(MENTION_HREF_PREFIX)) return null;
44477
+ let href = raw;
44478
+ if (!/^[a-z][a-z0-9+.-]*:/i.test(raw)) {
44479
+ if (/^www\./i.test(raw)) href = `https://${raw}`;
44480
+ else if (/^[^\s@]+@[^\s@]+$/.test(raw)) href = `mailto:${raw}`;
44481
+ }
44482
+ return isSafeHref(href) ? href : null;
44483
+ }
44484
+ function buildBadges(view, label) {
44485
+ const builder = new RangeSetBuilder();
44486
+ const tree = syntaxTree(view.state);
44487
+ const refs = referenceDefs(view.state);
44488
+ const badge = (to, href) => builder.add(to, to, Decoration.widget({ widget: new LinkOpenWidget(href, label), side: -1 }));
44489
+ for (const { from, to } of view.visibleRanges) {
44490
+ tree.iterate({
44491
+ from,
44492
+ to,
44493
+ enter: (node) => {
44494
+ if (node.name === "Link") {
44495
+ const href = hrefOf(view.state, node.node, refs);
44496
+ if (href) badge(node.to, href);
44497
+ return;
44498
+ }
44499
+ if (node.name === "URL" && !inLinkContext(node.node)) {
44500
+ const href = bareHref(view.state, node.node);
44501
+ if (href) badge(node.to, href);
44502
+ }
44503
+ }
44504
+ });
44505
+ }
44506
+ return builder.finish();
44507
+ }
44508
+ function linkOpenBadge(label) {
44509
+ return ViewPlugin.fromClass(
44510
+ class {
44511
+ constructor(view) {
44512
+ this.decorations = buildBadges(view, label);
44513
+ }
44514
+ update(update) {
44515
+ if (update.docChanged || update.viewportChanged) this.decorations = buildBadges(update.view, label);
44516
+ }
44517
+ },
44518
+ { decorations: (plugin) => plugin.decorations }
44519
+ );
44520
+ }
43918
44521
  const NODE_CLASS = {
43919
44522
  ATXHeading1: "cm-md-h1",
43920
44523
  ATXHeading2: "cm-md-h2",
@@ -44033,6 +44636,10 @@ function buildMarkDecorations(view) {
44033
44636
  addCodeblockLines(view.state, node.from, node.to, sel, ranges);
44034
44637
  return;
44035
44638
  }
44639
+ if (node.name === "URL" && !inLinkContext(node.node)) {
44640
+ ranges.push(classDeco("cm-md-autolink").range(node.from, node.to));
44641
+ return;
44642
+ }
44036
44643
  const cls = NODE_CLASS[node.name];
44037
44644
  if (cls) {
44038
44645
  const codeFullySelected = cls === "cm-md-code" && !sel.empty && sel.from <= node.from && sel.to >= node.to;
@@ -44282,18 +44889,6 @@ function canPlaceSentinel(cleanText, pos, _kind) {
44282
44889
  if (strikes % 2 === 1) return false;
44283
44890
  return true;
44284
44891
  }
44285
- function textCaretBox(dom) {
44286
- const view = EditorView.findFromDOM(dom);
44287
- if (!view) return null;
44288
- const pos = view.posAtDOM(dom);
44289
- const line = view.state.doc.lineAt(pos);
44290
- try {
44291
- const coords = view.coordsAtPos(Math.max(line.from, pos - 1), 1);
44292
- return coords ? { top: coords.top, bottom: coords.bottom } : null;
44293
- } catch {
44294
- return null;
44295
- }
44296
- }
44297
44892
  const setAnnotations = StateEffect.define();
44298
44893
  const setAnchored = StateEffect.define();
44299
44894
  const annotationMove = StateEffect.define();
@@ -44740,110 +45335,6 @@ const dragMovePlugin = ViewPlugin.fromClass(DragMove, {
44740
45335
  }
44741
45336
  });
44742
45337
  const dragToMove = [dropPosField, dropCursorLayer, dragMovePlugin];
44743
- class LinkOpenWidget extends WidgetType {
44744
- constructor(href, label) {
44745
- super();
44746
- this.href = href;
44747
- this.label = label;
44748
- }
44749
- eq(other) {
44750
- return other.href === this.href;
44751
- }
44752
- toDOM() {
44753
- const anchor = document.createElement("a");
44754
- anchor.className = "cm-link-badge";
44755
- anchor.href = this.href;
44756
- anchor.target = "_blank";
44757
- anchor.rel = "noopener noreferrer";
44758
- anchor.setAttribute("aria-label", this.label(this.href));
44759
- const icon2 = document.createElement("nldd-icon");
44760
- icon2.setAttribute("name", "external-link");
44761
- icon2.setAttribute("aria-hidden", "true");
44762
- anchor.append(icon2);
44763
- anchor.addEventListener("mousedown", (event) => event.preventDefault());
44764
- return anchor;
44765
- }
44766
- ignoreEvent() {
44767
- return true;
44768
- }
44769
- /** Keep the caret at the badge's right edge text-height, not the badge's own box
44770
- * height (which is taller and would flip with the cursor's arrival direction). */
44771
- coordsAt(dom) {
44772
- const badge = dom.getBoundingClientRect();
44773
- const box = textCaretBox(dom) ?? { top: badge.top, bottom: badge.bottom };
44774
- const x = badge.right + parseFloat(getComputedStyle(dom).marginRight);
44775
- return { left: x, right: x, top: box.top, bottom: box.bottom };
44776
- }
44777
- }
44778
- function normaliseLabel(raw) {
44779
- return raw.replace(/^\[|\]$/g, "").trim().replace(/\s+/g, " ").toLowerCase();
44780
- }
44781
- function referenceDefs(state2) {
44782
- const defs = /* @__PURE__ */ new Map();
44783
- syntaxTree(state2).iterate({
44784
- enter: (node) => {
44785
- if (node.name !== "LinkReference") return;
44786
- let label = null;
44787
- let url = null;
44788
- for (let c = node.node.firstChild; c; c = c.nextSibling) {
44789
- if (c.name === "LinkLabel") label = normaliseLabel(state2.sliceDoc(c.from, c.to));
44790
- else if (c.name === "URL") url = state2.sliceDoc(c.from, c.to);
44791
- }
44792
- if (label && url && !defs.has(label)) defs.set(label, url);
44793
- }
44794
- });
44795
- return defs;
44796
- }
44797
- function isSafeHref(href) {
44798
- const normalised = href.replace(/[\u0000-\u0020\u007f-\u009f]/g, "");
44799
- if (!/^[a-z][a-z0-9+.-]*:/i.test(normalised)) return true;
44800
- return /^(?:https?|mailto|tel):/i.test(normalised);
44801
- }
44802
- function hrefOf(state2, link, refs) {
44803
- let label = null;
44804
- for (let child = link.firstChild; child; child = child.nextSibling) {
44805
- if (child.name === "URL") {
44806
- const href = state2.sliceDoc(child.from, child.to);
44807
- return href && !href.startsWith(MENTION_HREF_PREFIX) && isSafeHref(href) ? href : null;
44808
- }
44809
- if (child.name === "LinkLabel") label = normaliseLabel(state2.sliceDoc(child.from, child.to));
44810
- }
44811
- if (label) {
44812
- const href = refs.get(label);
44813
- return href && !href.startsWith(MENTION_HREF_PREFIX) && isSafeHref(href) ? href : null;
44814
- }
44815
- return null;
44816
- }
44817
- function buildBadges(view, label) {
44818
- const builder = new RangeSetBuilder();
44819
- const tree = syntaxTree(view.state);
44820
- const refs = referenceDefs(view.state);
44821
- for (const { from, to } of view.visibleRanges) {
44822
- tree.iterate({
44823
- from,
44824
- to,
44825
- enter: (node) => {
44826
- if (node.name !== "Link") return;
44827
- const href = hrefOf(view.state, node.node, refs);
44828
- if (href) builder.add(node.to, node.to, Decoration.widget({ widget: new LinkOpenWidget(href, label), side: -1 }));
44829
- }
44830
- });
44831
- }
44832
- return builder.finish();
44833
- }
44834
- function linkOpenBadge(label) {
44835
- return ViewPlugin.fromClass(
44836
- class {
44837
- constructor(view) {
44838
- this.decorations = buildBadges(view, label);
44839
- }
44840
- update(update) {
44841
- if (update.docChanged || update.viewportChanged) this.decorations = buildBadges(update.view, label);
44842
- }
44843
- },
44844
- { decorations: (plugin) => plugin.decorations }
44845
- );
44846
- }
44847
45338
  const EMPTY_FORMATS = {
44848
45339
  bold: false,
44849
45340
  italic: false,
@@ -45206,7 +45697,7 @@ const textEditorStyles = css$1`
45206
45697
  --_annotation-badge-size: 1.5em;
45207
45698
  --_annotation-badge-font-scale: 0.62;
45208
45699
  --_link-badge-size: calc(1em + 2 * var(--_token-block-padding-fit));
45209
- --_link-badge-content-color: var(--semantics-categories-accent-tinted-primary-content-color);
45700
+ --_link-badge-content-color: var(--semantics-categories-accent-tinted-content-color);
45210
45701
  --_link-badge-background-color: var(--semantics-categories-accent-tinted-background-color);
45211
45702
  --_link-badge-highlight-border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
45212
45703
  --_link-badge-is-hovered-background-color: light-dark(var(--primitives-color-accent-75), var(--primitives-color-accent-100));
@@ -45215,9 +45706,9 @@ const textEditorStyles = css$1`
45215
45706
  --_link-badge-is-active-highlight-border-color: light-dark(var(--primitives-color-accent-200), var(--primitives-color-accent-250));
45216
45707
  --_mention-icon-size: 0.95em;
45217
45708
  --_mention-token-background-color: var(--semantics-categories-accent-tinted-background-color);
45218
- --_mention-token-content-color: var(--semantics-categories-accent-tinted-primary-content-color);
45709
+ --_mention-token-content-color: var(--semantics-categories-accent-tinted-content-color);
45219
45710
  --_mention-token-is-selected-background-color: var(--semantics-categories-accent-filled-background-color);
45220
- --_mention-token-is-selected-content-color: var(--semantics-categories-accent-filled-primary-content-color);
45711
+ --_mention-token-is-selected-content-color: var(--semantics-categories-accent-filled-content-color);
45221
45712
  --_rows: 6;
45222
45713
 
45223
45714
  ${inheritedTextReset}
@@ -45490,6 +45981,17 @@ const textEditorStyles = css$1`
45490
45981
  color: inherit;
45491
45982
  }
45492
45983
 
45984
+ /* A bare / autolinked URL reads as the link itself: colour it like link text,
45985
+ and override the highlight-style URL tint (teal) on its token span so the
45986
+ whole address is the link colour, not just the mark wrapper. */
45987
+ .cm-md-autolink {
45988
+ color: var(--semantics-links-color);
45989
+ }
45990
+
45991
+ .cm-md-autolink span {
45992
+ color: inherit;
45993
+ }
45994
+
45493
45995
  .cm-md-quote {
45494
45996
  color: var(--semantics-content-color);
45495
45997
  font-style: italic;
@@ -46822,7 +47324,7 @@ const toggleButtonStyles = css$1`
46822
47324
  gap: var(--_gap);
46823
47325
  align-items: center;
46824
47326
  justify-content: center;
46825
- color: var(--semantics-buttons-neutral-tinted-primary-content-color);
47327
+ color: var(--semantics-buttons-neutral-tinted-content-color);
46826
47328
  font: var(--_font);
46827
47329
  white-space: nowrap;
46828
47330
  text-decoration: none;
@@ -46839,7 +47341,7 @@ const toggleButtonStyles = css$1`
46839
47341
  .toggle-button:has(.toggle-button__input:hover) {
46840
47342
  --_highlight-border-color: var(--_is-hovered-highlight-border-color);
46841
47343
  background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
46842
- color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
47344
+ color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
46843
47345
  }
46844
47346
  }
46845
47347
 
@@ -46847,13 +47349,13 @@ const toggleButtonStyles = css$1`
46847
47349
  .toggle-button:has(.toggle-button__input:active) {
46848
47350
  --_highlight-border-color: var(--_is-active-highlight-border-color);
46849
47351
  background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
46850
- color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
47352
+ color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
46851
47353
  }
46852
47354
 
46853
47355
  :host([selected]) .toggle-button {
46854
47356
  --_highlight-border-color: var(--_is-selected-highlight-border-color);
46855
47357
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
46856
- color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
47358
+ color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
46857
47359
  }
46858
47360
 
46859
47361
  @media (hover: hover) {
@@ -46861,7 +47363,7 @@ const toggleButtonStyles = css$1`
46861
47363
  :host([selected]) .toggle-button:has(.toggle-button__input:hover) {
46862
47364
  --_highlight-border-color: var(--_is-selected-is-hovered-highlight-border-color);
46863
47365
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
46864
- color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-primary-content-color);
47366
+ color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
46865
47367
  }
46866
47368
  }
46867
47369
 
@@ -46869,7 +47371,7 @@ const toggleButtonStyles = css$1`
46869
47371
  :host([selected]) .toggle-button:has(.toggle-button__input:active) {
46870
47372
  --_highlight-border-color: var(--_is-selected-is-active-highlight-border-color);
46871
47373
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
46872
- color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-primary-content-color);
47374
+ color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
46873
47375
  }
46874
47376
 
46875
47377
  .toggle-button:focus-visible,
@@ -50983,7 +51485,7 @@ const heroStyles = css$1`
50983
51485
  --_media-aspect-ratio: 21 / 9;
50984
51486
  --_main-width: 50%;
50985
51487
  --_main-background-color: var(--semantics-categories-accent-reference-background-color);
50986
- --_main-content-color: var(--semantics-categories-accent-reference-primary-content-color);
51488
+ --_main-content-color: var(--semantics-categories-accent-reference-content-color);
50987
51489
  --_main-padding: var(--primitives-space-16);
50988
51490
 
50989
51491
  ${inheritedTextReset}
@@ -51025,92 +51527,92 @@ const heroStyles = css$1`
51025
51527
 
51026
51528
  :host([main-background="lintblauw"]) {
51027
51529
  --_main-background-color: var(--semantics-categories-lintblauw-reference-background-color);
51028
- --_main-content-color: var(--semantics-categories-lintblauw-reference-primary-content-color);
51530
+ --_main-content-color: var(--semantics-categories-lintblauw-reference-content-color);
51029
51531
  }
51030
51532
 
51031
51533
  :host([main-background="donkerblauw"]) {
51032
51534
  --_main-background-color: var(--semantics-categories-donkerblauw-reference-background-color);
51033
- --_main-content-color: var(--semantics-categories-donkerblauw-reference-primary-content-color);
51535
+ --_main-content-color: var(--semantics-categories-donkerblauw-reference-content-color);
51034
51536
  }
51035
51537
 
51036
51538
  :host([main-background="hemelblauw"]) {
51037
51539
  --_main-background-color: var(--semantics-categories-hemelblauw-reference-background-color);
51038
- --_main-content-color: var(--semantics-categories-hemelblauw-reference-primary-content-color);
51540
+ --_main-content-color: var(--semantics-categories-hemelblauw-reference-content-color);
51039
51541
  }
51040
51542
 
51041
51543
  :host([main-background="lichtblauw"]) {
51042
51544
  --_main-background-color: var(--semantics-categories-lichtblauw-reference-background-color);
51043
- --_main-content-color: var(--semantics-categories-lichtblauw-reference-primary-content-color);
51545
+ --_main-content-color: var(--semantics-categories-lichtblauw-reference-content-color);
51044
51546
  }
51045
51547
 
51046
51548
  :host([main-background="paars"]) {
51047
51549
  --_main-background-color: var(--semantics-categories-paars-reference-background-color);
51048
- --_main-content-color: var(--semantics-categories-paars-reference-primary-content-color);
51550
+ --_main-content-color: var(--semantics-categories-paars-reference-content-color);
51049
51551
  }
51050
51552
 
51051
51553
  :host([main-background="violet"]) {
51052
51554
  --_main-background-color: var(--semantics-categories-violet-reference-background-color);
51053
- --_main-content-color: var(--semantics-categories-violet-reference-primary-content-color);
51555
+ --_main-content-color: var(--semantics-categories-violet-reference-content-color);
51054
51556
  }
51055
51557
 
51056
51558
  :host([main-background="robijnrood"]) {
51057
51559
  --_main-background-color: var(--semantics-categories-robijnrood-reference-background-color);
51058
- --_main-content-color: var(--semantics-categories-robijnrood-reference-primary-content-color);
51560
+ --_main-content-color: var(--semantics-categories-robijnrood-reference-content-color);
51059
51561
  }
51060
51562
 
51061
51563
  :host([main-background="roze"]) {
51062
51564
  --_main-background-color: var(--semantics-categories-roze-reference-background-color);
51063
- --_main-content-color: var(--semantics-categories-roze-reference-primary-content-color);
51565
+ --_main-content-color: var(--semantics-categories-roze-reference-content-color);
51064
51566
  }
51065
51567
 
51066
51568
  :host([main-background="rood"]) {
51067
51569
  --_main-background-color: var(--semantics-categories-rood-reference-background-color);
51068
- --_main-content-color: var(--semantics-categories-rood-reference-primary-content-color);
51570
+ --_main-content-color: var(--semantics-categories-rood-reference-content-color);
51069
51571
  }
51070
51572
 
51071
51573
  :host([main-background="oranje"]) {
51072
51574
  --_main-background-color: var(--semantics-categories-oranje-reference-background-color);
51073
- --_main-content-color: var(--semantics-categories-oranje-reference-primary-content-color);
51575
+ --_main-content-color: var(--semantics-categories-oranje-reference-content-color);
51074
51576
  }
51075
51577
 
51076
51578
  :host([main-background="donkergeel"]) {
51077
51579
  --_main-background-color: var(--semantics-categories-donkergeel-reference-background-color);
51078
- --_main-content-color: var(--semantics-categories-donkergeel-reference-primary-content-color);
51580
+ --_main-content-color: var(--semantics-categories-donkergeel-reference-content-color);
51079
51581
  }
51080
51582
 
51081
51583
  :host([main-background="geel"]) {
51082
51584
  --_main-background-color: var(--semantics-categories-geel-reference-background-color);
51083
- --_main-content-color: var(--semantics-categories-geel-reference-primary-content-color);
51585
+ --_main-content-color: var(--semantics-categories-geel-reference-content-color);
51084
51586
  }
51085
51587
 
51086
51588
  :host([main-background="donkerbruin"]) {
51087
51589
  --_main-background-color: var(--semantics-categories-donkerbruin-reference-background-color);
51088
- --_main-content-color: var(--semantics-categories-donkerbruin-reference-primary-content-color);
51590
+ --_main-content-color: var(--semantics-categories-donkerbruin-reference-content-color);
51089
51591
  }
51090
51592
 
51091
51593
  :host([main-background="bruin"]) {
51092
51594
  --_main-background-color: var(--semantics-categories-bruin-reference-background-color);
51093
- --_main-content-color: var(--semantics-categories-bruin-reference-primary-content-color);
51595
+ --_main-content-color: var(--semantics-categories-bruin-reference-content-color);
51094
51596
  }
51095
51597
 
51096
51598
  :host([main-background="donkergroen"]) {
51097
51599
  --_main-background-color: var(--semantics-categories-donkergroen-reference-background-color);
51098
- --_main-content-color: var(--semantics-categories-donkergroen-reference-primary-content-color);
51600
+ --_main-content-color: var(--semantics-categories-donkergroen-reference-content-color);
51099
51601
  }
51100
51602
 
51101
51603
  :host([main-background="groen"]) {
51102
51604
  --_main-background-color: var(--semantics-categories-groen-reference-background-color);
51103
- --_main-content-color: var(--semantics-categories-groen-reference-primary-content-color);
51605
+ --_main-content-color: var(--semantics-categories-groen-reference-content-color);
51104
51606
  }
51105
51607
 
51106
51608
  :host([main-background="mosgroen"]) {
51107
51609
  --_main-background-color: var(--semantics-categories-mosgroen-reference-background-color);
51108
- --_main-content-color: var(--semantics-categories-mosgroen-reference-primary-content-color);
51610
+ --_main-content-color: var(--semantics-categories-mosgroen-reference-content-color);
51109
51611
  }
51110
51612
 
51111
51613
  :host([main-background="mintgroen"]) {
51112
51614
  --_main-background-color: var(--semantics-categories-mintgroen-reference-background-color);
51113
- --_main-content-color: var(--semantics-categories-mintgroen-reference-primary-content-color);
51615
+ --_main-content-color: var(--semantics-categories-mintgroen-reference-content-color);
51114
51616
  }
51115
51617
 
51116
51618
 
@@ -52619,6 +53121,7 @@ function sheetTemplate(component) {
52619
53121
  <dialog class="sheet"
52620
53122
  aria-label=${component.accessibleLabel}
52621
53123
  aria-modal=${component.modeless ? nothing : "true"}
53124
+ @pointerdown=${component._handleDialogPointerDown}
52622
53125
  @click=${component._handleDialogClick}
52623
53126
  @cancel=${component._handleCancel}
52624
53127
  >
@@ -52654,6 +53157,7 @@ let NLDDSheet = class extends LitElement {
52654
53157
  this._hasWarnedLabel = false;
52655
53158
  this._hasWarnedHeight = false;
52656
53159
  this._closing = false;
53160
+ this._pointerDownOnBackdrop = false;
52657
53161
  this._handleDismiss = (e) => {
52658
53162
  if (isDismissFromTitleBar(e)) {
52659
53163
  e.stopPropagation();
@@ -52729,9 +53233,12 @@ let NLDDSheet = class extends LitElement {
52729
53233
  }
52730
53234
  });
52731
53235
  }
53236
+ _handleDialogPointerDown(e) {
53237
+ this._pointerDownOnBackdrop = e.target === this._dialog;
53238
+ }
52732
53239
  _handleDialogClick(e) {
52733
53240
  if (this.modeless) return;
52734
- if (e.target === this._dialog) {
53241
+ if (e.target === this._dialog && this._pointerDownOnBackdrop) {
52735
53242
  this.hide();
52736
53243
  }
52737
53244
  }
@@ -54933,6 +55440,7 @@ let NLDDPopover = class extends LitElement {
54933
55440
  this._pointerdownOnAnchorWhileOpen = true;
54934
55441
  };
54935
55442
  this._handleDocumentClick = (event) => {
55443
+ if (this.anchorElement) return;
54936
55444
  const anchorEl = this._getAnchorEl();
54937
55445
  if (!anchorEl) return;
54938
55446
  const path = event.composedPath();
@@ -55022,6 +55530,8 @@ let NLDDPopover = class extends LitElement {
55022
55530
  this._cleanupAutoUpdate = null;
55023
55531
  const anchorEl = this._getAnchorEl();
55024
55532
  if (anchorEl) {
55533
+ const control = anchorEl;
55534
+ if ("expanded" in control) control.expanded = false;
55025
55535
  anchorEl.removeAttribute("aria-expanded");
55026
55536
  anchorEl.removeAttribute("aria-haspopup");
55027
55537
  if (this.id && anchorEl.getAttribute("aria-controls") === this.id) {
@@ -55168,8 +55678,15 @@ let NLDDPopover = class extends LitElement {
55168
55678
  this._previousAnchorEl = null;
55169
55679
  return;
55170
55680
  }
55171
- anchorEl.setAttribute("aria-expanded", open ? "true" : "false");
55172
- if (!anchorEl.hasAttribute("aria-haspopup")) {
55681
+ const control = anchorEl;
55682
+ if ("expanded" in control) {
55683
+ control.expanded = open;
55684
+ } else {
55685
+ anchorEl.setAttribute("aria-expanded", open ? "true" : "false");
55686
+ }
55687
+ if ("popupType" in control) {
55688
+ if (!control.popupType) control.popupType = "dialog";
55689
+ } else if (!anchorEl.hasAttribute("aria-haspopup")) {
55173
55690
  anchorEl.setAttribute("aria-haspopup", "dialog");
55174
55691
  }
55175
55692
  if (this.id && !anchorEl.hasAttribute("aria-controls")) {
@@ -55540,6 +56057,10 @@ const pageFooterStyles = css$1`
55540
56057
  background-color: transparent;
55541
56058
  }
55542
56059
 
56060
+ :host([width="full"]) {
56061
+ --_max-width: none;
56062
+ }
56063
+
55543
56064
  .page-footer {
55544
56065
  --_lintje-height: calc(var(--_lintje-width) / 2);
55545
56066
 
@@ -55566,8 +56087,13 @@ const pageFooterStyles = css$1`
55566
56087
  }
55567
56088
  }
55568
56089
 
56090
+ /* Empty footer = only the lintje. Add top space equal to the lintje height
56091
+ (container-type on :host makes a BFC, so this margin stays inside the
56092
+ transparent host) so a preceding tinted page section doesn't butt right up
56093
+ against the lintje. */
55569
56094
  :host([empty]) .page-footer {
55570
56095
  min-height: var(--_lintje-height);
56096
+ margin-top: var(--_lintje-height);
55571
56097
  }
55572
56098
 
55573
56099
  .page-footer::after {
@@ -55869,6 +56395,7 @@ if (!customElements.get("nldd-page-footer-legal-bar")) {
55869
56395
  let NLDDPageFooter = class extends LitElement {
55870
56396
  constructor() {
55871
56397
  super(...arguments);
56398
+ this.width = "";
55872
56399
  this._hasBreadcrumbs = false;
55873
56400
  this._hasMain = false;
55874
56401
  this._hasLegalBar = false;
@@ -55899,16 +56426,27 @@ let NLDDPageFooter = class extends LitElement {
55899
56426
  // Reflect the visible-row count as host attributes for styling. Done here
55900
56427
  // (not in the slotchange handler) so a fully empty footer — whose empty
55901
56428
  // slots may never fire slotchange — still gets `empty` on first render.
55902
- updated() {
56429
+ updated(changed) {
55903
56430
  const visibleCount = (this._hasBreadcrumbs ? 1 : 0) + (this._hasMain ? 1 : 0) + (this._hasLegalBar ? 1 : 0);
55904
56431
  this.toggleAttribute("single-slot", visibleCount === 1);
55905
56432
  this.toggleAttribute("empty", visibleCount === 0);
56433
+ if (changed.has("width")) {
56434
+ const w = this.width;
56435
+ if (w && w !== "full" && CSS.supports("max-width", w)) {
56436
+ this.style.setProperty("--_max-width", w);
56437
+ } else {
56438
+ this.style.removeProperty("--_max-width");
56439
+ }
56440
+ }
55906
56441
  }
55907
56442
  render() {
55908
56443
  return pageFooterTemplate(this);
55909
56444
  }
55910
56445
  };
55911
56446
  NLDDPageFooter.styles = pageFooterStyles;
56447
+ __decorateClass$o([
56448
+ property({ reflect: true, converter: reflectNonDefault("") })
56449
+ ], NLDDPageFooter.prototype, "width", 2);
55912
56450
  __decorateClass$o([
55913
56451
  state()
55914
56452
  ], NLDDPageFooter.prototype, "_hasBreadcrumbs", 2);
@@ -57181,7 +57719,8 @@ const listItemStyles = css$1`
57181
57719
 
57182
57720
  :host([selected]) {
57183
57721
  --_background-color: var(--components-list-item-is-selected-background-color);
57184
- --context-cell-content-color: var(--components-list-item-is-selected-content-color);
57722
+ --context-content-color: var(--components-list-item-is-selected-content-color);
57723
+ --context-content-secondary-color: var(--components-list-item-is-selected-content-color);
57185
57724
  }
57186
57725
 
57187
57726
  /* hover only on hover-capable devices: avoids touch-scroll flashing the
@@ -57189,17 +57728,20 @@ const listItemStyles = css$1`
57189
57728
  @media (hover: hover) {
57190
57729
  .list-item__action:hover {
57191
57730
  --_background-color: var(--components-list-item-is-hovered-background-color);
57192
- --context-cell-content-color: var(--components-list-item-is-hovered-content-color);
57731
+ --context-content-color: var(--components-list-item-is-hovered-content-color);
57732
+ --context-content-secondary-color: var(--components-list-item-is-hovered-content-color);
57193
57733
  }
57194
57734
 
57195
57735
  :host([selected]) .list-item__action:hover {
57196
57736
  --_background-color: var(--components-list-item-is-selected-background-color);
57197
- --context-cell-content-color: var(--components-list-item-is-selected-content-color);
57737
+ --context-content-color: var(--components-list-item-is-selected-content-color);
57738
+ --context-content-secondary-color: var(--components-list-item-is-selected-content-color);
57198
57739
  }
57199
57740
 
57200
57741
  :host([selected]) .list-item__action:focus:hover {
57201
57742
  --_background-color: var(--components-list-item-is-highlighted-background-color);
57202
- --context-cell-content-color: var(--components-list-item-is-highlighted-content-color);
57743
+ --context-content-color: var(--components-list-item-is-highlighted-content-color);
57744
+ --context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
57203
57745
  }
57204
57746
  }
57205
57747
 
@@ -57209,12 +57751,14 @@ const listItemStyles = css$1`
57209
57751
  into a scroll clears the press (pointercancel) instead of flashing it. */
57210
57752
  .list-item__action.is-pressed {
57211
57753
  --_background-color: var(--components-list-item-is-hovered-background-color);
57212
- --context-cell-content-color: var(--components-list-item-is-hovered-content-color);
57754
+ --context-content-color: var(--components-list-item-is-hovered-content-color);
57755
+ --context-content-secondary-color: var(--components-list-item-is-hovered-content-color);
57213
57756
  }
57214
57757
 
57215
57758
  :host([selected]) .list-item__action {
57216
57759
  --_background-color: var(--components-list-item-is-selected-background-color);
57217
- --context-cell-content-color: var(--components-list-item-is-selected-content-color);
57760
+ --context-content-color: var(--components-list-item-is-selected-content-color);
57761
+ --context-content-secondary-color: var(--components-list-item-is-selected-content-color);
57218
57762
  }
57219
57763
 
57220
57764
  /* Highlight accent — the strongest fill. Shown for a selected item that is
@@ -57227,7 +57771,8 @@ const listItemStyles = css$1`
57227
57771
  .list-item.is-highlighted,
57228
57772
  :host([selected]) .list-item.is-highlighted .list-item__action {
57229
57773
  --_background-color: var(--components-list-item-is-highlighted-background-color);
57230
- --context-cell-content-color: var(--components-list-item-is-highlighted-content-color);
57774
+ --context-content-color: var(--components-list-item-is-highlighted-content-color);
57775
+ --context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
57231
57776
  }
57232
57777
 
57233
57778
 
@@ -57706,7 +58251,8 @@ const tableRowStyles = css$1`
57706
58251
  the table) plus the selected content color, from the shared table tokens. */
57707
58252
  :host([selected]) {
57708
58253
  background-color: var(--semantics-tables-row-is-selected-background-color);
57709
- --context-cell-content-color: var(--semantics-tables-row-is-selected-content-color);
58254
+ --context-content-color: var(--semantics-tables-row-is-selected-content-color);
58255
+ --context-content-secondary-color: var(--semantics-tables-row-is-selected-content-color);
57710
58256
  }
57711
58257
 
57712
58258
  /* The box's border ring is the table's outer frame, so the last row drops its
@@ -58175,8 +58721,8 @@ const titleCellStyles = css$1`
58175
58721
  --_max-width: none;
58176
58722
  --_min-height: 0;
58177
58723
  --_text-align: start;
58178
- --_secondary-color: var(--context-cell-content-color, var(--semantics-content-secondary-color));
58179
- --_title-color: var(--context-cell-content-color, var(--semantics-content-color));
58724
+ --_secondary-color: var(--context-content-secondary-color, var(--semantics-content-secondary-color));
58725
+ --_title-color: var(--context-content-color, var(--semantics-content-color));
58180
58726
  --_title-font: var(--primitives-font-display-5-sm);
58181
58727
 
58182
58728
  ${inheritedTextReset}
@@ -58283,27 +58829,27 @@ const titleCellStyles = css$1`
58283
58829
  /* # Color */
58284
58830
 
58285
58831
  :host([color="secondary"]) {
58286
- --_title-color: var(--context-cell-content-secondary-color, var(--semantics-content-secondary-color));
58832
+ --_title-color: var(--context-content-secondary-color, var(--semantics-content-secondary-color));
58287
58833
  }
58288
58834
 
58289
58835
  :host([color="accent"]) {
58290
- --_secondary-color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
58291
- --_title-color: var(--context-cell-content-accent-color, var(--semantics-content-accent-color));
58836
+ --_secondary-color: var(--context-content-accent-color, var(--semantics-content-accent-color));
58837
+ --_title-color: var(--context-content-accent-color, var(--semantics-content-accent-color));
58292
58838
  }
58293
58839
 
58294
58840
  :host([color="success"]) {
58295
- --_secondary-color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
58296
- --_title-color: var(--context-cell-content-success-color, var(--semantics-content-success-color));
58841
+ --_secondary-color: var(--context-content-success-color, var(--semantics-content-success-color));
58842
+ --_title-color: var(--context-content-success-color, var(--semantics-content-success-color));
58297
58843
  }
58298
58844
 
58299
58845
  :host([color="warning"]) {
58300
- --_secondary-color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
58301
- --_title-color: var(--context-cell-content-warning-color, var(--semantics-content-warning-color));
58846
+ --_secondary-color: var(--context-content-warning-color, var(--semantics-content-warning-color));
58847
+ --_title-color: var(--context-content-warning-color, var(--semantics-content-warning-color));
58302
58848
  }
58303
58849
 
58304
58850
  :host([color="critical"]) {
58305
- --_secondary-color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
58306
- --_title-color: var(--context-cell-content-critical-color, var(--semantics-content-critical-color));
58851
+ --_secondary-color: var(--context-content-critical-color, var(--semantics-content-critical-color));
58852
+ --_title-color: var(--context-content-critical-color, var(--semantics-content-critical-color));
58307
58853
  }
58308
58854
 
58309
58855
 
@@ -58611,7 +59157,7 @@ const descriptionCellStyles = css$1`
58611
59157
  margin: 0 !important;
58612
59158
  min-width: 0 !important;
58613
59159
  align-self: stretch !important;
58614
- color: var(--context-cell-content-color, var(--semantics-content-secondary-color)) !important;
59160
+ color: var(--context-content-secondary-color, var(--semantics-content-secondary-color)) !important;
58615
59161
  font: var(--primitives-font-body-sm-regular-flat) !important;
58616
59162
  }
58617
59163
 
@@ -58627,7 +59173,7 @@ const descriptionCellStyles = css$1`
58627
59173
  margin: 0 !important;
58628
59174
  min-width: 0 !important;
58629
59175
  align-self: stretch !important;
58630
- color: var(--context-cell-content-color, var(--semantics-content-color)) !important;
59176
+ color: var(--context-content-color, var(--semantics-content-color)) !important;
58631
59177
  font: var(--primitives-font-body-md-regular-tight) !important;
58632
59178
  }
58633
59179
 
@@ -61422,7 +61968,7 @@ const tabBarItemStyles = css$1`
61422
61968
  gap: var(--_gap);
61423
61969
  align-items: center;
61424
61970
  justify-content: center;
61425
- color: var(--semantics-buttons-neutral-tinted-primary-content-color);
61971
+ color: var(--semantics-buttons-neutral-tinted-content-color);
61426
61972
  font: var(--_font);
61427
61973
  text-decoration: none;
61428
61974
  appearance: none;
@@ -61443,20 +61989,20 @@ const tabBarItemStyles = css$1`
61443
61989
  @media (hover: hover) {
61444
61990
  .tab-bar__item:hover {
61445
61991
  background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
61446
- color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
61992
+ color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
61447
61993
  }
61448
61994
  }
61449
61995
 
61450
61996
  .tab-bar__item:active {
61451
61997
  background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
61452
- color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
61998
+ color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
61453
61999
  }
61454
62000
 
61455
62001
  :host([selected]) .tab-bar__item {
61456
62002
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
61457
62003
 
61458
62004
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
61459
- color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
62005
+ color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
61460
62006
  }
61461
62007
 
61462
62008
  @media (hover: hover) {
@@ -61464,7 +62010,7 @@ const tabBarItemStyles = css$1`
61464
62010
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
61465
62011
 
61466
62012
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
61467
- color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-primary-content-color);
62013
+ color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
61468
62014
  }
61469
62015
  }
61470
62016
 
@@ -61472,7 +62018,7 @@ const tabBarItemStyles = css$1`
61472
62018
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
61473
62019
 
61474
62020
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
61475
- color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-primary-content-color);
62021
+ color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
61476
62022
  }
61477
62023
 
61478
62024
  @media (forced-colors: active) {
@@ -62022,7 +62568,7 @@ const documentTabBarStyles = css$1`
62022
62568
  .document-tab-bar__drag-clone .document-tab-bar__item-text {
62023
62569
  overflow: hidden;
62024
62570
  font: var(--components-document-tab-bar-tab-title-font);
62025
- color: var(--semantics-buttons-neutral-tinted-primary-content-color);
62571
+ color: var(--semantics-buttons-neutral-tinted-content-color);
62026
62572
  text-overflow: ellipsis;
62027
62573
  white-space: nowrap;
62028
62574
  }
@@ -62033,7 +62579,7 @@ const documentTabBarStyles = css$1`
62033
62579
 
62034
62580
  .document-tab-bar__drag-clone.is-selected .document-tab-bar__item-text,
62035
62581
  .document-tab-bar__drag-clone.is-selected .document-tab-bar__item-supporting-text {
62036
- color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
62582
+ color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
62037
62583
  }
62038
62584
 
62039
62585
  .document-tab-bar__drag-clone .document-tab-bar__item-supporting-text {
@@ -62074,7 +62620,7 @@ const documentTabBarItemStyles = css$1`
62074
62620
  --_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
62075
62621
  --_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
62076
62622
 
62077
- --_secondary-content-color: var(--semantics-buttons-neutral-tinted-secondary-content-color);
62623
+ --_secondary-content-color: var(--semantics-buttons-neutral-tinted-content-secondary-color);
62078
62624
 
62079
62625
  ${inheritedTextReset}
62080
62626
  container-type: inline-size;
@@ -62128,33 +62674,33 @@ const documentTabBarItemStyles = css$1`
62128
62674
  .document-tab-bar__item-tab:hover {
62129
62675
  background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
62130
62676
  --_highlight-border-color: var(--_is-hovered-highlight-border-color);
62131
- --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-secondary-content-color);
62677
+ --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-secondary-color);
62132
62678
  }
62133
62679
  }
62134
62680
 
62135
62681
  .document-tab-bar__item-tab:active {
62136
62682
  background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
62137
62683
  --_highlight-border-color: var(--_is-active-highlight-border-color);
62138
- --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-secondary-content-color);
62684
+ --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-secondary-color);
62139
62685
  }
62140
62686
 
62141
62687
  :host([selected]) .document-tab-bar__item-tab {
62142
62688
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
62143
62689
  --_highlight-border-color: var(--_is-selected-highlight-border-color);
62144
- --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-secondary-content-color);
62690
+ --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-secondary-color);
62145
62691
  }
62146
62692
 
62147
62693
  @media (hover: hover) {
62148
62694
  :host([selected]) .document-tab-bar__item-tab:hover {
62149
62695
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
62150
62696
  --_highlight-border-color: var(--_is-selected-is-hovered-highlight-border-color);
62151
- --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-secondary-content-color);
62697
+ --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-secondary-color);
62152
62698
  }
62153
62699
  }
62154
62700
 
62155
62701
  :host([selected]) .document-tab-bar__item-tab:active {
62156
62702
  --_highlight-border-color: var(--_is-selected-is-active-highlight-border-color);
62157
- --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-secondary-content-color);
62703
+ --_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-secondary-color);
62158
62704
  }
62159
62705
 
62160
62706
  /* ## Focus */
@@ -62191,26 +62737,26 @@ const documentTabBarItemStyles = css$1`
62191
62737
  overflow: hidden;
62192
62738
  padding-inline-end: var(--primitives-space-6);
62193
62739
  font: var(--components-document-tab-bar-tab-title-font);
62194
- color: var(--semantics-buttons-neutral-tinted-primary-content-color);
62740
+ color: var(--semantics-buttons-neutral-tinted-content-color);
62195
62741
  text-overflow: ellipsis;
62196
62742
  white-space: nowrap;
62197
62743
  }
62198
62744
 
62199
62745
  :host([selected]) .document-tab-bar__item-text {
62200
- color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
62746
+ color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
62201
62747
  }
62202
62748
 
62203
62749
  .document-tab-bar__item-short-text {
62204
62750
  overflow: hidden;
62205
62751
  padding-inline-end: var(--primitives-space-6);
62206
62752
  font: var(--components-document-tab-bar-tab-title-font);
62207
- color: var(--semantics-buttons-neutral-tinted-primary-content-color);
62753
+ color: var(--semantics-buttons-neutral-tinted-content-color);
62208
62754
  text-overflow: ellipsis;
62209
62755
  white-space: nowrap;
62210
62756
  }
62211
62757
 
62212
62758
  :host([selected]) .document-tab-bar__item-short-text {
62213
- color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
62759
+ color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
62214
62760
  }
62215
62761
 
62216
62762
 
@@ -62251,7 +62797,7 @@ const documentTabBarItemStyles = css$1`
62251
62797
  padding: var(--primitives-space-4);
62252
62798
  align-items: center;
62253
62799
  justify-content: center;
62254
- color: var(--semantics-buttons-neutral-tinted-primary-content-color);
62800
+ color: var(--semantics-buttons-neutral-tinted-content-color);
62255
62801
  transform: translateY(-50%);
62256
62802
  appearance: none;
62257
62803
  }
@@ -62267,7 +62813,7 @@ const documentTabBarItemStyles = css$1`
62267
62813
  }
62268
62814
 
62269
62815
  :host([selected]) .document-tab-bar__item-dismiss-button {
62270
- color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
62816
+ color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
62271
62817
  }
62272
62818
 
62273
62819
  @media (hover: hover) {
@@ -63178,25 +63724,25 @@ const paginationStyles = css$1`
63178
63724
  .pagination__page-button.is-current:hover {
63179
63725
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
63180
63726
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
63181
- color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-primary-content-color);
63727
+ color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
63182
63728
  }
63183
63729
  }
63184
63730
 
63185
63731
  .pagination__page-button:active:not(.is-current) {
63186
63732
  background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
63187
- color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
63733
+ color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
63188
63734
  }
63189
63735
 
63190
63736
  .pagination__page-button.is-current {
63191
63737
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
63192
63738
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
63193
- color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
63739
+ color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
63194
63740
  }
63195
63741
 
63196
63742
  .pagination__page-button.is-current:active {
63197
63743
  --_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
63198
63744
  background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
63199
- color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-primary-content-color);
63745
+ color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
63200
63746
  }
63201
63747
 
63202
63748
  @media (forced-colors: active) {
@@ -63263,9 +63809,9 @@ const paginationStyles = css$1`
63263
63809
  --_background-color: transparent;
63264
63810
  --_content-color: inherit;
63265
63811
  --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
63266
- --_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
63812
+ --_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
63267
63813
  --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
63268
- --_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
63814
+ --_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
63269
63815
 
63270
63816
  display: inline-flex;
63271
63817
  position: relative;
@@ -63293,11 +63839,11 @@ const paginationStyles = css$1`
63293
63839
 
63294
63840
  :host([select-expanded]) .pagination__select-wrapper {
63295
63841
  --_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
63296
- --_content-color: var(--semantics-buttons-neutral-tinted-is-expanded-primary-content-color);
63842
+ --_content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
63297
63843
  --_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
63298
- --_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-primary-content-color);
63844
+ --_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
63299
63845
  --_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
63300
- --_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-primary-content-color);
63846
+ --_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
63301
63847
  }
63302
63848
 
63303
63849
  @media (prefers-reduced-motion: reduce) {
@@ -64171,7 +64717,7 @@ const badgeStyles = css$1`
64171
64717
  --_height: var(--primitives-space-20);
64172
64718
  --_inline-padding: var(--primitives-space-6);
64173
64719
  --_gap: var(--primitives-space-3);
64174
- --_content-color: var(--semantics-categories-critical-filled-primary-content-color);
64720
+ --_content-color: var(--semantics-categories-critical-filled-content-color);
64175
64721
  --_font: var(--primitives-font-body-xs-medium-flat);
64176
64722
  --_dot-size: var(--primitives-space-10);
64177
64723
  --_icon-size: var(--primitives-space-14);
@@ -64196,25 +64742,25 @@ const badgeStyles = css$1`
64196
64742
  :host([color="accent"]) {
64197
64743
  --_background-color: var(--semantics-categories-accent-filled-background-color);
64198
64744
  --_border-color: var(--semantics-categories-accent-filled-highlight-border-color);
64199
- --_content-color: var(--semantics-categories-accent-filled-primary-content-color);
64745
+ --_content-color: var(--semantics-categories-accent-filled-content-color);
64200
64746
  }
64201
64747
 
64202
64748
  :host([color="neutral"]) {
64203
64749
  --_background-color: var(--semantics-categories-neutral-filled-background-color);
64204
64750
  --_border-color: var(--semantics-categories-neutral-filled-highlight-border-color);
64205
- --_content-color: var(--semantics-categories-neutral-filled-primary-content-color);
64751
+ --_content-color: var(--semantics-categories-neutral-filled-content-color);
64206
64752
  }
64207
64753
 
64208
64754
  :host([color="warning"]) {
64209
64755
  --_background-color: var(--semantics-categories-warning-filled-background-color);
64210
64756
  --_border-color: var(--semantics-categories-warning-filled-highlight-border-color);
64211
- --_content-color: var(--semantics-categories-warning-filled-primary-content-color);
64757
+ --_content-color: var(--semantics-categories-warning-filled-content-color);
64212
64758
  }
64213
64759
 
64214
64760
  :host([color="success"]) {
64215
64761
  --_background-color: var(--semantics-categories-success-filled-background-color);
64216
64762
  --_border-color: var(--semantics-categories-success-filled-highlight-border-color);
64217
- --_content-color: var(--semantics-categories-success-filled-primary-content-color);
64763
+ --_content-color: var(--semantics-categories-success-filled-content-color);
64218
64764
  }
64219
64765
 
64220
64766
 
@@ -64223,109 +64769,109 @@ const badgeStyles = css$1`
64223
64769
  :host([color="lintblauw"]) {
64224
64770
  --_background-color: var(--semantics-categories-lintblauw-filled-background-color);
64225
64771
  --_border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color);
64226
- --_content-color: var(--semantics-categories-lintblauw-filled-primary-content-color);
64772
+ --_content-color: var(--semantics-categories-lintblauw-filled-content-color);
64227
64773
  }
64228
64774
 
64229
64775
  :host([color="donkerblauw"]) {
64230
64776
  --_background-color: var(--semantics-categories-donkerblauw-filled-background-color);
64231
64777
  --_border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color);
64232
- --_content-color: var(--semantics-categories-donkerblauw-filled-primary-content-color);
64778
+ --_content-color: var(--semantics-categories-donkerblauw-filled-content-color);
64233
64779
  }
64234
64780
 
64235
64781
  :host([color="hemelblauw"]) {
64236
64782
  --_background-color: var(--semantics-categories-hemelblauw-filled-background-color);
64237
64783
  --_border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color);
64238
- --_content-color: var(--semantics-categories-hemelblauw-filled-primary-content-color);
64784
+ --_content-color: var(--semantics-categories-hemelblauw-filled-content-color);
64239
64785
  }
64240
64786
 
64241
64787
  :host([color="lichtblauw"]) {
64242
64788
  --_background-color: var(--semantics-categories-lichtblauw-filled-background-color);
64243
64789
  --_border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color);
64244
- --_content-color: var(--semantics-categories-lichtblauw-filled-primary-content-color);
64790
+ --_content-color: var(--semantics-categories-lichtblauw-filled-content-color);
64245
64791
  }
64246
64792
 
64247
64793
  :host([color="paars"]) {
64248
64794
  --_background-color: var(--semantics-categories-paars-filled-background-color);
64249
64795
  --_border-color: var(--semantics-categories-paars-filled-highlight-border-color);
64250
- --_content-color: var(--semantics-categories-paars-filled-primary-content-color);
64796
+ --_content-color: var(--semantics-categories-paars-filled-content-color);
64251
64797
  }
64252
64798
 
64253
64799
  :host([color="violet"]) {
64254
64800
  --_background-color: var(--semantics-categories-violet-filled-background-color);
64255
64801
  --_border-color: var(--semantics-categories-violet-filled-highlight-border-color);
64256
- --_content-color: var(--semantics-categories-violet-filled-primary-content-color);
64802
+ --_content-color: var(--semantics-categories-violet-filled-content-color);
64257
64803
  }
64258
64804
 
64259
64805
  :host([color="robijnrood"]) {
64260
64806
  --_background-color: var(--semantics-categories-robijnrood-filled-background-color);
64261
64807
  --_border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color);
64262
- --_content-color: var(--semantics-categories-robijnrood-filled-primary-content-color);
64808
+ --_content-color: var(--semantics-categories-robijnrood-filled-content-color);
64263
64809
  }
64264
64810
 
64265
64811
  :host([color="roze"]) {
64266
64812
  --_background-color: var(--semantics-categories-roze-filled-background-color);
64267
64813
  --_border-color: var(--semantics-categories-roze-filled-highlight-border-color);
64268
- --_content-color: var(--semantics-categories-roze-filled-primary-content-color);
64814
+ --_content-color: var(--semantics-categories-roze-filled-content-color);
64269
64815
  }
64270
64816
 
64271
64817
  :host([color="rood"]) {
64272
64818
  --_background-color: var(--semantics-categories-rood-filled-background-color);
64273
64819
  --_border-color: var(--semantics-categories-rood-filled-highlight-border-color);
64274
- --_content-color: var(--semantics-categories-rood-filled-primary-content-color);
64820
+ --_content-color: var(--semantics-categories-rood-filled-content-color);
64275
64821
  }
64276
64822
 
64277
64823
  :host([color="oranje"]) {
64278
64824
  --_background-color: var(--semantics-categories-oranje-filled-background-color);
64279
64825
  --_border-color: var(--semantics-categories-oranje-filled-highlight-border-color);
64280
- --_content-color: var(--semantics-categories-oranje-filled-primary-content-color);
64826
+ --_content-color: var(--semantics-categories-oranje-filled-content-color);
64281
64827
  }
64282
64828
 
64283
64829
  :host([color="donkergeel"]) {
64284
64830
  --_background-color: var(--semantics-categories-donkergeel-filled-background-color);
64285
64831
  --_border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color);
64286
- --_content-color: var(--semantics-categories-donkergeel-filled-primary-content-color);
64832
+ --_content-color: var(--semantics-categories-donkergeel-filled-content-color);
64287
64833
  }
64288
64834
 
64289
64835
  :host([color="geel"]) {
64290
64836
  --_background-color: var(--semantics-categories-geel-filled-background-color);
64291
64837
  --_border-color: var(--semantics-categories-geel-filled-highlight-border-color);
64292
- --_content-color: var(--semantics-categories-geel-filled-primary-content-color);
64838
+ --_content-color: var(--semantics-categories-geel-filled-content-color);
64293
64839
  }
64294
64840
 
64295
64841
  :host([color="donkerbruin"]) {
64296
64842
  --_background-color: var(--semantics-categories-donkerbruin-filled-background-color);
64297
64843
  --_border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color);
64298
- --_content-color: var(--semantics-categories-donkerbruin-filled-primary-content-color);
64844
+ --_content-color: var(--semantics-categories-donkerbruin-filled-content-color);
64299
64845
  }
64300
64846
 
64301
64847
  :host([color="bruin"]) {
64302
64848
  --_background-color: var(--semantics-categories-bruin-filled-background-color);
64303
64849
  --_border-color: var(--semantics-categories-bruin-filled-highlight-border-color);
64304
- --_content-color: var(--semantics-categories-bruin-filled-primary-content-color);
64850
+ --_content-color: var(--semantics-categories-bruin-filled-content-color);
64305
64851
  }
64306
64852
 
64307
64853
  :host([color="donkergroen"]) {
64308
64854
  --_background-color: var(--semantics-categories-donkergroen-filled-background-color);
64309
64855
  --_border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color);
64310
- --_content-color: var(--semantics-categories-donkergroen-filled-primary-content-color);
64856
+ --_content-color: var(--semantics-categories-donkergroen-filled-content-color);
64311
64857
  }
64312
64858
 
64313
64859
  :host([color="groen"]) {
64314
64860
  --_background-color: var(--semantics-categories-groen-filled-background-color);
64315
64861
  --_border-color: var(--semantics-categories-groen-filled-highlight-border-color);
64316
- --_content-color: var(--semantics-categories-groen-filled-primary-content-color);
64862
+ --_content-color: var(--semantics-categories-groen-filled-content-color);
64317
64863
  }
64318
64864
 
64319
64865
  :host([color="mosgroen"]) {
64320
64866
  --_background-color: var(--semantics-categories-mosgroen-filled-background-color);
64321
64867
  --_border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color);
64322
- --_content-color: var(--semantics-categories-mosgroen-filled-primary-content-color);
64868
+ --_content-color: var(--semantics-categories-mosgroen-filled-content-color);
64323
64869
  }
64324
64870
 
64325
64871
  :host([color="mintgroen"]) {
64326
64872
  --_background-color: var(--semantics-categories-mintgroen-filled-background-color);
64327
64873
  --_border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color);
64328
- --_content-color: var(--semantics-categories-mintgroen-filled-primary-content-color);
64874
+ --_content-color: var(--semantics-categories-mintgroen-filled-content-color);
64329
64875
  }
64330
64876
 
64331
64877
  :host([hidden]) {
@@ -67015,107 +67561,108 @@ NLDDJustInTimeEducation = __decorateClass([
67015
67561
  customElement("nldd-just-in-time-education")
67016
67562
  ], NLDDJustInTimeEducation);
67017
67563
  export {
67018
- NLDDFullBleedSection as $,
67019
- NLDDButton as A,
67020
- NLDDButtonBar as B,
67564
+ NLDDFormSection as $,
67565
+ NLDDBreadcrumbsItem as A,
67566
+ NLDDButton as B,
67021
67567
  ContextTracker as C,
67022
- NLDDButtonGroup as D,
67568
+ NLDDButtonBar as D,
67023
67569
  ExternalTokenizer as E,
67024
- NLDDByline as F,
67025
- NLDDCard as G,
67026
- NLDDCell as H,
67570
+ NLDDButtonGroup as F,
67571
+ NLDDByline as G,
67572
+ NLDDCard as H,
67027
67573
  IterMode as I,
67028
- NLDDCheckbox as J,
67029
- NLDDCheckboxField as K,
67574
+ NLDDCell as J,
67575
+ NLDDCheckbox as K,
67030
67576
  LRParser as L,
67031
- NLDDCodeEditor as M,
67577
+ NLDDCheckboxField as M,
67032
67578
  NodeWeakMap as N,
67033
- NLDDCodeViewer as O,
67034
- NLDDCollection as P,
67035
- NLDDComboBox as Q,
67036
- NLDDContainer as R,
67037
- NLDDDescriptionCell as S,
67038
- NLDDDivider as T,
67039
- NLDDDocumentTabBar as U,
67040
- NLDDDragHandleCell as V,
67041
- NLDDDropdown as W,
67042
- NLDDForm as X,
67043
- NLDDFormActions as Y,
67044
- NLDDFormField as Z,
67045
- NLDDFormSection as _,
67579
+ NLDDCodeEditor as O,
67580
+ NLDDCodeViewer as P,
67581
+ NLDDCollection as Q,
67582
+ NLDDComboBox as R,
67583
+ NLDDContainer as S,
67584
+ NLDDDescriptionCell as T,
67585
+ NLDDDivider as U,
67586
+ NLDDDocumentTabBar as V,
67587
+ NLDDDragHandleCell as W,
67588
+ NLDDDropdown as X,
67589
+ NLDDForm as Y,
67590
+ NLDDFormActions as Z,
67591
+ NLDDFormField as _,
67046
67592
  LanguageSupport as a,
67047
- NLDDToken as a$,
67048
- NLDDHero as a0,
67049
- NLDDIcon as a1,
67050
- NLDDIconButton as a2,
67051
- NLDDIconCell as a3,
67052
- NLDDImage as a4,
67053
- NLDDInlineDialog as a5,
67054
- NLDDJustInTimeEducation as a6,
67055
- NLDDKeyboardShortcut as a7,
67056
- NLDDLink as a8,
67057
- NLDDList as a9,
67058
- NLDDSegmentedControl as aA,
67059
- NLDDSheet as aB,
67060
- NLDDSideBySideSplitView as aC,
67061
- NLDDSidebarSection as aD,
67062
- NLDDSimpleSection as aE,
67063
- NLDDSkipLink as aF,
67064
- NLDDSpacer as aG,
67065
- NLDDSpacerCell as aH,
67066
- NLDDSplitButton as aI,
67067
- NLDDSplitViewPane as aJ,
67068
- NLDDStackedSplitView as aK,
67069
- NLDDStatusBar as aL,
67070
- NLDDStepper as aM,
67071
- NLDDSwitch as aN,
67072
- NLDDSwitchField as aO,
67073
- NLDDTabBar as aP,
67074
- NLDDTable as aQ,
67075
- NLDDTableRow as aR,
67076
- NLDDTag as aS,
67077
- NLDDTextCell as aT,
67078
- NLDDTextEditor as aU,
67079
- NLDDTextField as aV,
67080
- NLDDTimelineTrackCell as aW,
67081
- NLDDTitle as aX,
67082
- NLDDTitleCell as aY,
67083
- NLDDToggleButton as aZ,
67084
- NLDDToggleButtonGroup as a_,
67085
- NLDDListItem as aa,
67086
- NLDDMenu as ab,
67087
- NLDDMenuBar as ac,
67088
- NLDDMenuBarItem as ad,
67089
- NLDDModalDialog as ae,
67090
- NLDDMultiLineTextField as af,
67091
- NLDDNavigationSplitView as ag,
67092
- NLDDNumberField as ah,
67093
- NLDDOneHalfOneHalfSection as ai,
67094
- NLDDOneThirdTwoThirdsSection as aj,
67095
- NLDDPage as ak,
67096
- NLDDPageFooter as al,
67097
- NLDDPageFooterLegalBar as am,
67098
- NLDDPageFooterLegalBarItem as an,
67099
- NLDDPagination as ao,
67100
- NLDDPasswordField as ap,
67101
- NLDDPopover as aq,
67102
- NLDDProgressBar as ar,
67103
- NLDDProgressBarSegmentIndicator as as,
67104
- NLDDProgressCircle as at,
67105
- NLDDProgressCircleSegmentIndicator as au,
67106
- NLDDRadioButton as av,
67107
- NLDDRadioButtonField as aw,
67108
- NLDDRadioButtonGroup as ax,
67109
- NLDDRichText as ay,
67110
- NLDDSearchField as az,
67593
+ NLDDToggleButtonGroup as a$,
67594
+ NLDDFullBleedSection as a0,
67595
+ NLDDHero as a1,
67596
+ NLDDIcon as a2,
67597
+ NLDDIconButton as a3,
67598
+ NLDDIconCell as a4,
67599
+ NLDDImage as a5,
67600
+ NLDDInlineDialog as a6,
67601
+ NLDDJustInTimeEducation as a7,
67602
+ NLDDKeyboardShortcut as a8,
67603
+ NLDDLink as a9,
67604
+ NLDDSearchField as aA,
67605
+ NLDDSegmentedControl as aB,
67606
+ NLDDSheet as aC,
67607
+ NLDDSideBySideSplitView as aD,
67608
+ NLDDSidebarSection as aE,
67609
+ NLDDSimpleSection as aF,
67610
+ NLDDSkipLink as aG,
67611
+ NLDDSpacer as aH,
67612
+ NLDDSpacerCell as aI,
67613
+ NLDDSplitButton as aJ,
67614
+ NLDDSplitViewPane as aK,
67615
+ NLDDStackedSplitView as aL,
67616
+ NLDDStatusBar as aM,
67617
+ NLDDStepper as aN,
67618
+ NLDDSwitch as aO,
67619
+ NLDDSwitchField as aP,
67620
+ NLDDTabBar as aQ,
67621
+ NLDDTable as aR,
67622
+ NLDDTableRow as aS,
67623
+ NLDDTag as aT,
67624
+ NLDDTextCell as aU,
67625
+ NLDDTextEditor as aV,
67626
+ NLDDTextField as aW,
67627
+ NLDDTimelineTrackCell as aX,
67628
+ NLDDTitle as aY,
67629
+ NLDDTitleCell as aZ,
67630
+ NLDDToggleButton as a_,
67631
+ NLDDList as aa,
67632
+ NLDDListItem as ab,
67633
+ NLDDMenu as ac,
67634
+ NLDDMenuBar as ad,
67635
+ NLDDMenuBarItem as ae,
67636
+ NLDDModalDialog as af,
67637
+ NLDDMultiLineTextField as ag,
67638
+ NLDDNavigationSplitView as ah,
67639
+ NLDDNumberField as ai,
67640
+ NLDDOneHalfOneHalfSection as aj,
67641
+ NLDDOneThirdTwoThirdsSection as ak,
67642
+ NLDDPage as al,
67643
+ NLDDPageFooter as am,
67644
+ NLDDPageFooterLegalBar as an,
67645
+ NLDDPageFooterLegalBarItem as ao,
67646
+ NLDDPagination as ap,
67647
+ NLDDPasswordField as aq,
67648
+ NLDDPopover as ar,
67649
+ NLDDProgressBar as as,
67650
+ NLDDProgressBarSegmentIndicator as at,
67651
+ NLDDProgressCircle as au,
67652
+ NLDDProgressCircleSegmentIndicator as av,
67653
+ NLDDRadioButton as aw,
67654
+ NLDDRadioButtonField as ax,
67655
+ NLDDRadioButtonGroup as ay,
67656
+ NLDDRichText as az,
67111
67657
  LRLanguage as b,
67112
- NLDDTokenField as b0,
67113
- NLDDToolbar as b1,
67114
- NLDDTooltip as b2,
67115
- NLDDTopNavigationBar as b3,
67116
- NLDDTopTitleBar as b4,
67117
- NLDDTwoThirdsOneThirdSection as b5,
67118
- NLDDWindow as b6,
67658
+ NLDDToken as b0,
67659
+ NLDDTokenField as b1,
67660
+ NLDDToolbar as b2,
67661
+ NLDDTooltip as b3,
67662
+ NLDDTopNavigationBar as b4,
67663
+ NLDDTopTitleBar as b5,
67664
+ NLDDTwoThirdsOneThirdSection as b6,
67665
+ NLDDWindow as b7,
67119
67666
  continuedIndent as c,
67120
67667
  foldInside as d,
67121
67668
  delimitedIndent as e,
@@ -67131,13 +67678,13 @@ export {
67131
67678
  NLDDActivityIndicator as o,
67132
67679
  parseMixed as p,
67133
67680
  NLDDAppView as q,
67134
- NLDDBadge as r,
67681
+ NLDDAvatar as r,
67135
67682
  styleTags as s,
67136
67683
  tags$1 as t,
67137
- NLDDBanner as u,
67138
- NLDDBarSplitView as v,
67139
- NLDDBlockquote as w,
67140
- NLDDBox as x,
67141
- NLDDBreadcrumbs as y,
67142
- NLDDBreadcrumbsItem as z
67684
+ NLDDBadge as u,
67685
+ NLDDBanner as v,
67686
+ NLDDBarSplitView as w,
67687
+ NLDDBlockquote as x,
67688
+ NLDDBox as y,
67689
+ NLDDBreadcrumbs as z
67143
67690
  };