@tylertech/forge-ai 0.11.6 → 0.12.0

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 (117) hide show
  1. package/custom-elements.json +808 -779
  2. package/dist/ai-agent-info/ai-agent-info.d.ts +2 -2
  3. package/dist/ai-agent-info/ai-agent-info.scss.mjs +1 -1
  4. package/dist/ai-agent-selector/ai-agent-selector.d.ts +2 -2
  5. package/dist/ai-agent-selector/ai-agent-selector.scss.mjs +1 -1
  6. package/dist/ai-artifact/ai-artifact.d.ts +2 -2
  7. package/dist/ai-artifact/ai-artifact.scss.mjs +1 -1
  8. package/dist/ai-assistant-response/ai-assistant-response.d.ts +2 -2
  9. package/dist/ai-assistant-response/ai-assistant-response.scss.mjs +1 -1
  10. package/dist/ai-attachment/ai-attachment.d.ts +2 -2
  11. package/dist/ai-attachment/ai-attachment.scss.mjs +1 -1
  12. package/dist/ai-button/ai-button.d.ts +2 -2
  13. package/dist/ai-button/ai-button.scss.mjs +1 -1
  14. package/dist/ai-chain-of-thought/ai-chain-of-thought.d.ts +2 -2
  15. package/dist/ai-chain-of-thought/ai-chain-of-thought.scss.mjs +1 -1
  16. package/dist/ai-chain-of-thought/thought-base/thought-base.d.ts +2 -2
  17. package/dist/ai-chain-of-thought/thought-base/thought-base.scss.mjs +1 -1
  18. package/dist/ai-chain-of-thought/thought-detail/thought-detail.d.ts +2 -2
  19. package/dist/ai-chain-of-thought/thought-detail/thought-detail.scss.mjs +1 -1
  20. package/dist/ai-chain-of-thought/thought-image/thought-image.d.ts +2 -2
  21. package/dist/ai-chain-of-thought/thought-image/thought-image.scss.mjs +1 -1
  22. package/dist/ai-chain-of-thought/thought-search-result/thought-search-result.d.ts +2 -2
  23. package/dist/ai-chain-of-thought/thought-search-result/thought-search-result.scss.mjs +1 -1
  24. package/dist/ai-chat-header/ai-chat-header.d.ts +2 -2
  25. package/dist/ai-chat-header/ai-chat-header.scss.mjs +1 -1
  26. package/dist/ai-chat-interface/ai-chat-interface.d.ts +2 -2
  27. package/dist/ai-chat-interface/ai-chat-interface.scss.mjs +1 -1
  28. package/dist/ai-chatbot/ai-chatbot-tool-call.d.ts +2 -2
  29. package/dist/ai-chatbot/ai-chatbot-tool-call.mjs +13 -3
  30. package/dist/ai-chatbot/ai-chatbot-tool-call.scss.mjs +1 -1
  31. package/dist/ai-chatbot/ai-chatbot.d.ts +10 -4
  32. package/dist/ai-chatbot/ai-chatbot.scss.mjs +1 -1
  33. package/dist/ai-chatbot/index.d.ts +1 -1
  34. package/dist/ai-chatbot/types.d.ts +34 -0
  35. package/dist/ai-chatbot-launcher/ai-chatbot-launcher.d.ts +5 -4
  36. package/dist/ai-chatbot-launcher/ai-chatbot-launcher.scss.mjs +1 -1
  37. package/dist/ai-confirmation-prompt/ai-confirmation-prompt.d.ts +2 -2
  38. package/dist/ai-confirmation-prompt/ai-confirmation-prompt.scss.mjs +1 -1
  39. package/dist/ai-dialog/ai-dialog.d.ts +2 -2
  40. package/dist/ai-dialog/ai-dialog.scss.mjs +1 -1
  41. package/dist/ai-dropdown-menu/ai-dropdown-menu-item-group.d.ts +2 -2
  42. package/dist/ai-dropdown-menu/ai-dropdown-menu-item-group.scss.mjs +1 -1
  43. package/dist/ai-dropdown-menu/ai-dropdown-menu-item.d.ts +2 -2
  44. package/dist/ai-dropdown-menu/ai-dropdown-menu-item.scss.mjs +1 -1
  45. package/dist/ai-dropdown-menu/ai-dropdown-menu-separator.d.ts +2 -2
  46. package/dist/ai-dropdown-menu/ai-dropdown-menu-separator.scss.mjs +1 -1
  47. package/dist/ai-dropdown-menu/ai-dropdown-menu.d.ts +2 -2
  48. package/dist/ai-dropdown-menu/ai-dropdown-menu.scss.mjs +1 -1
  49. package/dist/ai-embedded-chat/ai-embedded-chat.d.ts +2 -2
  50. package/dist/ai-embedded-chat/ai-embedded-chat.scss.mjs +1 -1
  51. package/dist/ai-empty-state/ai-empty-state.d.ts +2 -2
  52. package/dist/ai-empty-state/ai-empty-state.scss.mjs +1 -1
  53. package/dist/ai-error-message/ai-error-message.d.ts +2 -2
  54. package/dist/ai-error-message/ai-error-message.scss.mjs +1 -1
  55. package/dist/ai-event-stream-viewer/ai-event-stream-viewer.d.ts +2 -2
  56. package/dist/ai-event-stream-viewer/ai-event-stream-viewer.scss.mjs +1 -1
  57. package/dist/ai-fab/ai-fab.d.ts +2 -2
  58. package/dist/ai-fab/ai-fab.scss.mjs +1 -1
  59. package/dist/ai-file-picker/ai-file-picker.d.ts +2 -2
  60. package/dist/ai-file-picker/ai-file-picker.scss.mjs +1 -1
  61. package/dist/ai-floating-chat/ai-floating-chat.d.ts +2 -2
  62. package/dist/ai-floating-chat/ai-floating-chat.scss.mjs +1 -1
  63. package/dist/ai-gradient-container/ai-gradient-container.d.ts +2 -2
  64. package/dist/ai-gradient-container/ai-gradient-container.scss.mjs +1 -1
  65. package/dist/ai-icon/ai-icon.d.ts +2 -2
  66. package/dist/ai-icon/ai-icon.scss.mjs +1 -1
  67. package/dist/ai-icon-button/ai-icon-button.d.ts +2 -2
  68. package/dist/ai-icon-button/ai-icon-button.scss.mjs +1 -1
  69. package/dist/ai-message-thread/ai-message-thread.d.ts +2 -2
  70. package/dist/ai-message-thread/ai-message-thread.scss.mjs +1 -1
  71. package/dist/ai-modal/ai-modal.d.ts +2 -2
  72. package/dist/ai-modal/ai-modal.scss.mjs +1 -1
  73. package/dist/ai-prompt/ai-prompt.d.ts +2 -2
  74. package/dist/ai-prompt/ai-prompt.scss.mjs +1 -1
  75. package/dist/ai-prompt/prompt-button/prompt-button.d.ts +2 -2
  76. package/dist/ai-prompt/prompt-button/prompt-button.scss.mjs +1 -1
  77. package/dist/ai-reasoning/ai-reasoning.d.ts +2 -2
  78. package/dist/ai-reasoning/ai-reasoning.scss.mjs +1 -1
  79. package/dist/ai-reasoning/reasoning-content/reasoning-content.d.ts +2 -2
  80. package/dist/ai-reasoning-header/ai-reasoning-header.d.ts +2 -2
  81. package/dist/ai-reasoning-header/ai-reasoning-header.scss.mjs +1 -1
  82. package/dist/ai-response-message/ai-response-message.d.ts +2 -2
  83. package/dist/ai-response-message/ai-response-message.scss.mjs +1 -1
  84. package/dist/ai-response-message-toolbar/ai-response-message-toolbar.d.ts +2 -2
  85. package/dist/ai-response-message-toolbar/ai-response-message-toolbar.scss.mjs +1 -1
  86. package/dist/ai-sidebar/ai-sidebar.d.ts +2 -2
  87. package/dist/ai-sidebar/ai-sidebar.scss.mjs +1 -1
  88. package/dist/ai-sidebar-chat/ai-sidebar-chat.d.ts +2 -2
  89. package/dist/ai-slash-command-menu/ai-slash-command-menu.d.ts +2 -2
  90. package/dist/ai-slash-command-menu/ai-slash-command-menu.scss.mjs +1 -1
  91. package/dist/ai-spinner/ai-spinner.d.ts +2 -2
  92. package/dist/ai-spinner/ai-spinner.scss.mjs +1 -1
  93. package/dist/ai-suggestions/ai-suggestions.d.ts +2 -2
  94. package/dist/ai-suggestions/ai-suggestions.scss.mjs +116 -520
  95. package/dist/ai-thinking-indicator/ai-thinking-indicator.d.ts +2 -2
  96. package/dist/ai-thinking-indicator/ai-thinking-indicator.scss.mjs +1 -181
  97. package/dist/ai-threads/ai-threads.d.ts +2 -2
  98. package/dist/ai-threads/ai-threads.scss.mjs +1 -1
  99. package/dist/ai-tool-call-indicator/ai-tool-call-indicator.d.ts +2 -2
  100. package/dist/ai-tool-call-indicator/ai-tool-call-indicator.scss.mjs +1 -1
  101. package/dist/ai-user-message/ai-user-message.d.ts +2 -2
  102. package/dist/ai-user-message/ai-user-message.scss.mjs +1 -1
  103. package/dist/ai-user-message-toolbar/ai-user-message-toolbar.d.ts +2 -2
  104. package/dist/ai-user-message-toolbar/ai-user-message-toolbar.scss.mjs +1 -1
  105. package/dist/ai-voice-input/ai-voice-input.d.ts +2 -2
  106. package/dist/ai-voice-input/ai-voice-input.scss.mjs +1 -1
  107. package/dist/core/chatbot-core-controller.mjs +18 -0
  108. package/dist/core/overlay/overlay.d.ts +2 -2
  109. package/dist/core/popover/popover.d.ts +2 -2
  110. package/dist/core/popover/popover.scss.mjs +1 -1
  111. package/dist/core/tooltip/tooltip.d.ts +2 -2
  112. package/dist/core/tooltip/tooltip.scss.mjs +1 -1
  113. package/dist/tools/ai-data-table/ai-data-table.d.ts +2 -2
  114. package/dist/tools/ai-data-table/ai-data-table.scss.mjs +1 -1
  115. package/dist/tools/ai-paginator/ai-paginator.d.ts +2 -2
  116. package/dist/tools/ai-paginator/ai-paginator.scss.mjs +1 -1
  117. package/package.json +15 -13
@@ -1,285 +1,18 @@
1
- const styles = `/**
2
- * @license
3
- * Copyright Tyler Technologies, Inc.
4
- * License: Apache-2.0
5
- */
6
- /**
7
- * @license
8
- * Copyright Tyler Technologies, Inc.
9
- * License: Apache-2.0
10
- */
11
- /**
12
- * @license
13
- * Copyright Tyler Technologies, Inc.
14
- * License: Apache-2.0
15
- */
16
- /**
17
- * @license
18
- * Copyright Tyler Technologies, Inc.
19
- * License: Apache-2.0
20
- */
21
- /**
22
- * @license
23
- * Copyright Tyler Technologies, Inc.
24
- * License: Apache-2.0
25
- */
26
- /**
27
- * @license
28
- * Copyright Tyler Technologies, Inc.
29
- * License: Apache-2.0
30
- */
31
- /**
32
- * @license
33
- * Copyright Tyler Technologies, Inc.
34
- * License: Apache-2.0
35
- */
36
- /**
37
- * @license
38
- * Copyright Tyler Technologies, Inc.
39
- * License: Apache-2.0
40
- */
41
- /**
42
- * @license
43
- * Copyright Tyler Technologies, Inc.
44
- * License: Apache-2.0
45
- */
46
- /**
47
- * @license
48
- * Copyright Tyler Technologies, Inc.
49
- * License: Apache-2.0
50
- */
51
- /**
52
- * @license
53
- * Copyright Tyler Technologies, Inc.
54
- * License: Apache-2.0
55
- */
56
- /**
57
- * @license
58
- * Copyright Tyler Technologies, Inc.
59
- * License: Apache-2.0
60
- */
61
- /**
62
- * @license
63
- * Copyright Tyler Technologies, Inc.
64
- * License: Apache-2.0
65
- */
66
- /**
67
- * @license
68
- * Copyright Tyler Technologies, Inc.
69
- * License: Apache-2.0
70
- */
71
- /**
72
- * @license
73
- * Copyright Tyler Technologies, Inc.
74
- * License: Apache-2.0
75
- */
76
- /**
77
- * @license
78
- * Copyright Tyler Technologies, Inc.
79
- * License: Apache-2.0
80
- */
81
- /**
82
- * @license
83
- * Copyright Tyler Technologies, Inc.
84
- * License: Apache-2.0
85
- */
86
- /**
87
- * @license
88
- * Copyright Tyler Technologies, Inc.
89
- * License: Apache-2.0
90
- */
91
- /**
92
- * @license
93
- * Copyright Tyler Technologies, Inc.
94
- * License: Apache-2.0
95
- */
96
- /**
97
- * @license
98
- * Copyright Tyler Technologies, Inc.
99
- * License: Apache-2.0
100
- */
101
- /**
102
- * @license
103
- * Copyright Tyler Technologies, Inc.
104
- * License: Apache-2.0
105
- */
106
- /**
107
- * @license
108
- * Copyright Tyler Technologies, Inc.
109
- * License: Apache-2.0
110
- */
111
- /**
112
- * @license
113
- * Copyright Tyler Technologies, Inc.
114
- * License: Apache-2.0
115
- */
116
- /**
117
- * @license
118
- * Copyright Tyler Technologies, Inc.
119
- * License: Apache-2.0
120
- */
121
- /**
122
- * @license
123
- * Copyright Tyler Technologies, Inc.
124
- * License: Apache-2.0
125
- */
126
- /**
127
- * @license
128
- * Copyright Tyler Technologies, Inc.
129
- * License: Apache-2.0
130
- */
131
- /**
132
- * @license
133
- * Copyright Tyler Technologies, Inc.
134
- * License: Apache-2.0
135
- */
1
+ const styles = `/* prettier-ignore */
136
2
  /**
137
3
  * @license
138
- * Copyright Tyler Technologies, Inc.
4
+ * Copyright Tyler Technologies, Inc.
139
5
  * License: Apache-2.0
140
6
  */
141
- /* prettier-ignore */
142
- /**
143
- * @license
144
- * Copyright Tyler Technologies, Inc.
145
- * License: Apache-2.0
146
- */
147
- /**
148
- * @license
149
- * Copyright Tyler Technologies, Inc.
150
- * License: Apache-2.0
151
- */
152
- /**
153
- * @license
154
- * Copyright Tyler Technologies, Inc.
155
- * License: Apache-2.0
156
- */
157
- /**
158
- * @license
159
- * Copyright Tyler Technologies, Inc.
160
- * License: Apache-2.0
161
- */
162
- /**
163
- * @license
164
- * Copyright Tyler Technologies, Inc.
165
- * License: Apache-2.0
166
- */
167
- /**
168
- * @license
169
- * Copyright Tyler Technologies, Inc.
170
- * License: Apache-2.0
171
- */
172
- /**
173
- * @license
174
- * Copyright Tyler Technologies, Inc.
175
- * License: Apache-2.0
176
- */
177
- /**
178
- * @license
179
- * Copyright Tyler Technologies, Inc.
180
- * License: Apache-2.0
181
- */
182
- /**
183
- * @license
184
- * Copyright Tyler Technologies, Inc.
185
- * License: Apache-2.0
186
- */
187
- /**
188
- * @license
189
- * Copyright Tyler Technologies, Inc.
190
- * License: Apache-2.0
191
- */
192
- /**
193
- * @license
194
- * Copyright Tyler Technologies, Inc.
195
- * License: Apache-2.0
196
- */
197
- /**
198
- * @license
199
- * Copyright Tyler Technologies, Inc.
200
- * License: Apache-2.0
201
- */
202
- /**
203
- * @license
204
- * Copyright Tyler Technologies, Inc.
205
- * License: Apache-2.0
206
- */
207
- /**
208
- * @license
209
- * Copyright Tyler Technologies, Inc.
210
- * License: Apache-2.0
211
- */
212
- /**
213
- * @license
214
- * Copyright Tyler Technologies, Inc.
215
- * License: Apache-2.0
216
- */
217
- /**
218
- * @license
219
- * Copyright Tyler Technologies, Inc.
220
- * License: Apache-2.0
221
- */
222
- /**
223
- * @license
224
- * Copyright Tyler Technologies, Inc.
225
- * License: Apache-2.0
226
- */
227
- /**
228
- * @license
229
- * Copyright Tyler Technologies, Inc.
230
- * License: Apache-2.0
231
- */
232
- /**
233
- * @license
234
- * Copyright Tyler Technologies, Inc.
235
- * License: Apache-2.0
236
- */
237
- /**
238
- * @license
239
- * Copyright Tyler Technologies, Inc.
240
- * License: Apache-2.0
241
- */
242
- /**
243
- * @license
244
- * Copyright Tyler Technologies, Inc.
245
- * License: Apache-2.0
246
- */
247
- /**
248
- * @license
249
- * Copyright Tyler Technologies, Inc.
250
- * License: Apache-2.0
251
- */
252
- /**
253
- * @license
254
- * Copyright Tyler Technologies, Inc.
255
- * License: Apache-2.0
256
- */
257
- /**
258
- * @license
259
- * Copyright Tyler Technologies, Inc.
260
- * License: Apache-2.0
261
- */
262
- /**
263
- * @license
264
- * Copyright Tyler Technologies, Inc.
265
- * License: Apache-2.0
266
- */
267
- /**
268
- * @license
269
- * Copyright Tyler Technologies, Inc.
270
- * License: Apache-2.0
271
- */
272
- /* prettier-ignore */
273
7
  .forge-icon {
274
- --_icon-color: var(--forge-icon-color, currentColor);
275
- --_icon-size: var(--forge-icon-size, 1em);
276
- --_icon-width: var(--forge-icon-width, var(--_icon-size));
277
- --_icon-height: var(--forge-icon-height, var(--_icon-size));
278
- --_icon-font-size: var(--forge-icon-font-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));
8
+ --_icon-color:var(--forge-icon-color, currentColor);
9
+ --_icon-size:var(--forge-icon-size, 1em);
10
+ --_icon-width:var(--forge-icon-width, var(--_icon-size));
11
+ --_icon-height:var(--forge-icon-height, var(--_icon-size));
12
+ --_icon-font-size:var(--forge-icon-font-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));
279
13
  }
280
14
 
281
- img.forge-icon,
282
- svg.forge-icon {
15
+ img.forge-icon, svg.forge-icon {
283
16
  display: inline-block;
284
17
  box-sizing: content-box;
285
18
  contain: content;
@@ -303,22 +36,23 @@ svg {
303
36
 
304
37
  /**
305
38
  * @license
306
- * Copyright Tyler Technologies, Inc.
39
+ * Copyright Tyler Technologies, Inc.
307
40
  * License: Apache-2.0
308
41
  */
309
- /* prettier-ignore */
310
- @layer list, list-item, navlist, with-start-end, two-line, three-line, dense, wrap, selected, indented, disabled;
42
+ @layer list, list-item, navlist, with-start-end, two-line, three-line, dense, wrap, selected, indented, disabled, multicolumn;
311
43
  @layer list {
312
44
  .forge-list {
313
- --_list-spacing: var(--forge-list-spacing, 0);
314
- --_list-container-color: var(--forge-list-container-color, transparent);
315
- --_list-navlist-spacing: var(--forge-list-navlist-spacing, var(--forge-spacing-xxsmall, 4px));
316
- --_list-navlist-margin: var(--forge-list-navlist-margin, var(--forge-spacing-xxsmall, 4px) var(--forge-spacing-xsmall, 8px));
317
- --_list-navlist-height: var(--forge-list-navlist-height, 40px);
318
- --_list-navlist-padding: var(--forge-list-navlist-padding, 0 var(--forge-spacing-xsmall, 8px));
319
- --_list-navlist-shape: var(--forge-list-navlist-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));
320
- --_list-navlist-font-size: var(--forge-list-navlist-font-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));
321
- --_list-navlist-font-weight: var(--forge-list-navlist-font-weight, 500);
45
+ --_list-spacing:var(--forge-list-spacing, 0);
46
+ --_list-container-color:var(--forge-list-container-color, transparent);
47
+ --_list-column-width:var(--forge-list-column-width, 256px);
48
+ --_list-column-spacing:var(--forge-list-column-spacing, var(--_list-spacing));
49
+ --_list-navlist-spacing:var(--forge-list-navlist-spacing, var(--forge-spacing-xxsmall, 4px));
50
+ --_list-navlist-margin:var(--forge-list-navlist-margin, var(--forge-spacing-xxsmall, 4px) var(--forge-spacing-xsmall, 8px));
51
+ --_list-navlist-height:var(--forge-list-navlist-height, 40px);
52
+ --_list-navlist-padding:var(--forge-list-navlist-padding, 0 var(--forge-spacing-xsmall, 8px));
53
+ --_list-navlist-shape:var(--forge-list-navlist-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));
54
+ --_list-navlist-font-size:var(--forge-list-navlist-font-size, calc(var(--forge-typography-font-size, 1rem) * 0.875));
55
+ --_list-navlist-font-weight:var(--forge-list-navlist-font-weight, 500);
322
56
  }
323
57
  .forge-list {
324
58
  outline: none;
@@ -328,7 +62,7 @@ svg {
328
62
  min-width: inherit;
329
63
  }
330
64
  .forge-list--dense .forge-list-item {
331
- --_list-item-gap: var(--_list-item-dense-gap);
65
+ --_list-item-gap:var(--_list-item-dense-gap);
332
66
  height: var(--_list-item-dense-one-line-height);
333
67
  min-height: var(--_list-item-dense-one-line-height);
334
68
  }
@@ -366,8 +100,7 @@ svg {
366
100
  .forge-list-item:has(.forge-list-item__start ~ .forge-list-item__end) {
367
101
  grid-template-columns: auto 1fr auto;
368
102
  }
369
- .forge-list-item__start,
370
- .forge-list-item__end {
103
+ .forge-list-item__start, .forge-list-item__end {
371
104
  color: var(--_list-item-text-color);
372
105
  display: inline-flex;
373
106
  flex-shrink: 0;
@@ -378,39 +111,39 @@ svg {
378
111
  }
379
112
  @layer list-item {
380
113
  .forge-list-item {
381
- --_list-item-background: var(--forge-list-item-background, transparent);
382
- --_list-item-shape: var(--forge-list-item-shape, 0);
383
- --_list-item-padding: var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));
384
- --_list-item-margin: var(--forge-list-item-margin, 0);
385
- --_list-item-height: var(--forge-list-item-height, 48px);
386
- --_list-item-dense-height: var(--forge-list-item-dense-height, 32px);
387
- --_list-item-indent: var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));
388
- --_list-item-cursor: var(--forge-list-item-cursor, pointer);
389
- --_list-item-gap: var(--forge-list-item-gap, var(--forge-spacing-large, 24px));
390
- --_list-item-text-color: var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));
391
- --_list-item-text-font-size: var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));
392
- --_list-item-text-font-weight: var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));
393
- --_list-item-text-line-height: var(--forge-list-item-text-line-height, 1.5rem);
394
- --_list-item-selected-color: var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));
395
- --_list-item-selected-background: var(--forge-list-item-selected-background, var(--_list-item-selected-color));
396
- --_list-item-selected-opacity: var(--forge-list-item-selected-opacity, 0.08);
397
- --_list-item-selected-start-color: var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));
398
- --_list-item-selected-end-color: var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));
399
- --_list-item-selected-text-color: var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));
400
- --_list-item-disabled-opacity: var(--forge-list-item-disabled-opacity, 0.38);
401
- --_list-item-disabled-cursor: var(--forge-list-item-disabled-cursor, not-allowed);
402
- --_list-item-one-line-height: var(--forge-list-item-one-line-height, var(--_list-item-height));
403
- --_list-item-two-line-height: var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));
404
- --_list-item-three-line-height: var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));
405
- --_list-item-dense-one-line-height: var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));
406
- --_list-item-dense-two-line-height: var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));
407
- --_list-item-dense-three-line-height: var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));
408
- --_list-item-dense-font-size: var(--forge-list-item-dense-font-size, 0.875rem);
409
- --_list-item-dense-indent: var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));
410
- --_list-item-dense-gap: var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));
411
- --_list-item-start-selected-color: var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));
412
- --_list-item-end-selected-color: var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));
413
- --_list-item-wrap-padding: var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px));
114
+ --_list-item-background:var(--forge-list-item-background, transparent);
115
+ --_list-item-shape:var(--forge-list-item-shape, 0);
116
+ --_list-item-padding:var(--forge-list-item-padding, 0 var(--forge-spacing-medium, 16px));
117
+ --_list-item-margin:var(--forge-list-item-margin, 0);
118
+ --_list-item-height:var(--forge-list-item-height, 48px);
119
+ --_list-item-dense-height:var(--forge-list-item-dense-height, 32px);
120
+ --_list-item-indent:var(--forge-list-item-indent, var(--forge-spacing-xxlarge, 48px));
121
+ --_list-item-cursor:var(--forge-list-item-cursor, pointer);
122
+ --_list-item-gap:var(--forge-list-item-gap, var(--forge-spacing-large, 24px));
123
+ --_list-item-text-color:var(--forge-list-item-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));
124
+ --_list-item-text-font-size:var(--forge-list-item-text-font-size, var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1))));
125
+ --_list-item-text-font-weight:var(--forge-list-item-text-font-weight, var(--forge-typography-body2-font-weight, 400));
126
+ --_list-item-text-line-height:var(--forge-list-item-text-line-height, 1.5rem);
127
+ --_list-item-selected-color:var(--forge-list-item-selected-color, var(--forge-theme-primary, #3f51b5));
128
+ --_list-item-selected-background:var(--forge-list-item-selected-background, var(--_list-item-selected-color));
129
+ --_list-item-selected-opacity:var(--forge-list-item-selected-opacity, 0.08);
130
+ --_list-item-selected-start-color:var(--forge-list-item-selected-start-color, var(--_list-item-selected-color));
131
+ --_list-item-selected-end-color:var(--forge-list-item-selected-end-color, var(--_list-item-selected-color));
132
+ --_list-item-selected-text-color:var(--forge-list-item-selected-text-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));
133
+ --_list-item-disabled-opacity:var(--forge-list-item-disabled-opacity, 0.38);
134
+ --_list-item-disabled-cursor:var(--forge-list-item-disabled-cursor, not-allowed);
135
+ --_list-item-one-line-height:var(--forge-list-item-one-line-height, var(--_list-item-height));
136
+ --_list-item-two-line-height:var(--forge-list-item-two-line-height, var(--forge-list-item-height, 72px));
137
+ --_list-item-three-line-height:var(--forge-list-item-three-line-height, var(--forge-list-item-height, 88px));
138
+ --_list-item-dense-one-line-height:var(--forge-list-item-dense-one-line-height, var(--_list-item-dense-height));
139
+ --_list-item-dense-two-line-height:var(--forge-list-item-dense-two-line-height, var(--forge-list-item-dense-height, 56px));
140
+ --_list-item-dense-three-line-height:var(--forge-list-item-dense-three-line-height, var(--forge-list-item-dense-height, 72px));
141
+ --_list-item-dense-font-size:var(--forge-list-item-dense-font-size, 0.875rem);
142
+ --_list-item-dense-indent:var(--forge-list-item-dense-indent, var(--forge-spacing-xxlarge, 48px));
143
+ --_list-item-dense-gap:var(--forge-list-item-dense-gap, var(--forge-spacing-xsmall, 8px));
144
+ --_list-item-start-selected-color:var(--forge-list-item-start-selected-color, var(--_list-item-selected-color));
145
+ --_list-item-end-selected-color:var(--forge-list-item-end-selected-color, var(--_list-item-selected-color));
146
+ --_list-item-wrap-padding:var(--forge-list-item-wrap-padding, var(--forge-spacing-xsmall, 8px) var(--forge-spacing-medium, 16px));
414
147
  }
415
148
  .forge-list-item {
416
149
  position: relative;
@@ -421,7 +154,7 @@ svg {
421
154
  outline: none;
422
155
  text-decoration: none;
423
156
  border-radius: var(--_list-item-shape);
424
- -webkit-tap-highlight-color: transparent;
157
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
425
158
  background-color: var(--_list-item-background);
426
159
  height: var(--_list-item-height);
427
160
  min-height: var(--_list-item-height);
@@ -455,7 +188,7 @@ svg {
455
188
  margin: 0;
456
189
  box-sizing: border-box;
457
190
  width: 100%;
458
- background: transparent;
191
+ background: rgba(0, 0, 0, 0);
459
192
  color: inherit;
460
193
  outline: none;
461
194
  font: inherit;
@@ -473,24 +206,18 @@ svg {
473
206
  color: inherit !important;
474
207
  text-decoration: none !important;
475
208
  }
476
- .forge-list-item--interactive:not(.forge-list-item--disabled),
477
- .forge-list-item button:not(:disabled),
478
- .forge-list-item a,
479
- .forge-list-item label {
480
- --_state-layer-display: var(--forge-state-layer-display, flex);
481
- --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));
482
- --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));
483
- --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);
484
- --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));
485
- --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);
486
- --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);
487
- --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);
488
- --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);
489
- }
490
- .forge-list-item--interactive:not(.forge-list-item--disabled)::before,
491
- .forge-list-item button:not(:disabled)::before,
492
- .forge-list-item a::before,
493
- .forge-list-item label::before {
209
+ .forge-list-item--interactive:not(.forge-list-item--disabled), .forge-list-item button:not(:disabled), .forge-list-item a, .forge-list-item label {
210
+ --_state-layer-display:var(--forge-state-layer-display, flex);
211
+ --_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));
212
+ --_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));
213
+ --_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);
214
+ --_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));
215
+ --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);
216
+ --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);
217
+ --_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);
218
+ --_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms);
219
+ }
220
+ .forge-list-item--interactive:not(.forge-list-item--disabled)::before, .forge-list-item button:not(:disabled)::before, .forge-list-item a::before, .forge-list-item label::before {
494
221
  opacity: 0;
495
222
  position: absolute;
496
223
  backface-visibility: hidden;
@@ -498,55 +225,25 @@ svg {
498
225
  background-color: var(--_state-layer-hover-color);
499
226
  inset: 0;
500
227
  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;
501
- --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);
228
+ --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 100ms);
502
229
  content: "";
503
230
  opacity: 0;
504
231
  border-radius: inherit;
505
232
  }
506
- .forge-list-item--interactive:not(.forge-list-item--disabled):hover::before,
507
- .forge-list-item button:not(:disabled):hover::before,
508
- .forge-list-item a:hover::before,
509
- .forge-list-item label:hover::before {
233
+ .forge-list-item--interactive:not(.forge-list-item--disabled):hover::before, .forge-list-item button:not(:disabled):hover::before, .forge-list-item a:hover::before, .forge-list-item label:hover::before {
510
234
  background-color: var(--_state-layer-hover-color);
511
235
  opacity: var(--_state-layer-hover-opacity);
512
236
  }
513
- .forge-list-item--interactive:not(.forge-list-item--disabled):active::before,
514
- .forge-list-item button:not(:disabled):active::before,
515
- .forge-list-item a:active::before,
516
- .forge-list-item label:active::before {
237
+ .forge-list-item--interactive:not(.forge-list-item--disabled):active::before, .forge-list-item button:not(:disabled):active::before, .forge-list-item a:active::before, .forge-list-item label:active::before {
517
238
  opacity: var(--_state-layer-pressed-opacity);
518
239
  transition-duration: var(--_state-layer-pressed-duration);
519
- --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);
240
+ --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.18);
520
241
  }
521
242
  .forge-list-item :is(forge-checkbox, forge-radio, forge-switch, input):is(.forge-list-item__start, .forge-list-item__end):not([forge-ignore]) {
522
243
  --forge-focus-indicator-display: none;
523
244
  --forge-state-layer-display: none;
524
245
  }
525
- .forge-list-item:has(button:not(:disabled),
526
- a,
527
- label,
528
- .forge-list-item--interactive:not(.forge-list-item--disabled),
529
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a,
530
- .forge-list-item:has(button:not(:disabled),
531
- a,
532
- label,
533
- .forge-list-item--interactive:not(.forge-list-item--disabled),
534
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button,
535
- .forge-list-item:has(button:not(:disabled),
536
- a,
537
- label,
538
- .forge-list-item--interactive:not(.forge-list-item--disabled),
539
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label,
540
- .forge-list-item:has(button:not(:disabled),
541
- a,
542
- label,
543
- .forge-list-item--interactive:not(.forge-list-item--disabled),
544
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]),
545
- .forge-list-item:has(button:not(:disabled),
546
- a,
547
- label,
548
- .forge-list-item--interactive:not(.forge-list-item--disabled),
549
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {
246
+ .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]), .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {
550
247
  cursor: pointer;
551
248
  }
552
249
  @keyframes forge-focus-indicator-outward-grow {
@@ -575,99 +272,27 @@ svg {
575
272
  border-width: var(--_focus-indicator-active-width);
576
273
  }
577
274
  }
578
- .forge-list-item:has(button:not(:disabled),
579
- a,
580
- label,
581
- .forge-list-item--interactive:not(.forge-list-item--disabled),
582
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a,
583
- .forge-list-item:has(button:not(:disabled),
584
- a,
585
- label,
586
- .forge-list-item--interactive:not(.forge-list-item--disabled),
587
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button,
588
- .forge-list-item:has(button:not(:disabled),
589
- a,
590
- label,
591
- .forge-list-item--interactive:not(.forge-list-item--disabled),
592
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label,
593
- .forge-list-item:has(button:not(:disabled),
594
- a,
595
- label,
596
- .forge-list-item--interactive:not(.forge-list-item--disabled),
597
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]),
598
- .forge-list-item:has(button:not(:disabled),
599
- a,
600
- label,
601
- .forge-list-item--interactive:not(.forge-list-item--disabled),
602
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {
275
+ .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]), .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {
603
276
  outline: none;
604
277
  }
605
- .forge-list-item:has(button:not(:disabled),
606
- a,
607
- label,
608
- .forge-list-item--interactive:not(.forge-list-item--disabled),
609
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a:focus-visible::after,
610
- .forge-list-item:has(button:not(:disabled),
611
- a,
612
- label,
613
- .forge-list-item--interactive:not(.forge-list-item--disabled),
614
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button:focus-visible::after,
615
- .forge-list-item:has(button:not(:disabled),
616
- a,
617
- label,
618
- .forge-list-item--interactive:not(.forge-list-item--disabled),
619
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label:focus-visible::after,
620
- .forge-list-item:has(button:not(:disabled),
621
- a,
622
- label,
623
- .forge-list-item--interactive:not(.forge-list-item--disabled),
624
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]):focus-visible::after,
625
- .forge-list-item:has(button:not(:disabled),
626
- a,
627
- label,
628
- .forge-list-item--interactive:not(.forge-list-item--disabled),
629
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive:focus-visible::after {
630
- --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
631
- --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
632
- --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);
633
- --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));
634
- --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));
635
- --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));
636
- --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));
637
- --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));
638
- --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));
639
- --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));
640
- --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));
641
- --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));
642
- --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);
643
- --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);
644
- --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);
645
- }
646
- .forge-list-item:has(button:not(:disabled),
647
- a,
648
- label,
649
- .forge-list-item--interactive:not(.forge-list-item--disabled),
650
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a:focus-visible::after,
651
- .forge-list-item:has(button:not(:disabled),
652
- a,
653
- label,
654
- .forge-list-item--interactive:not(.forge-list-item--disabled),
655
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button:focus-visible::after,
656
- .forge-list-item:has(button:not(:disabled),
657
- a,
658
- label,
659
- .forge-list-item--interactive:not(.forge-list-item--disabled),
660
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label:focus-visible::after,
661
- .forge-list-item:has(button:not(:disabled),
662
- a,
663
- label,
664
- .forge-list-item--interactive:not(.forge-list-item--disabled),
665
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]):focus-visible::after,
666
- .forge-list-item:has(button:not(:disabled),
667
- a,
668
- label,
669
- .forge-list-item--interactive:not(.forge-list-item--disabled),
670
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive:focus-visible::after {
278
+ .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]):focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive:focus-visible::after {
279
+ --_focus-indicator-display:var(--forge-focus-indicator-display, flex);
280
+ --_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
281
+ --_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);
282
+ --_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));
283
+ --_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));
284
+ --_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));
285
+ --_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));
286
+ --_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));
287
+ --_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));
288
+ --_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));
289
+ --_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));
290
+ --_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));
291
+ --_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);
292
+ --_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);
293
+ --_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0);
294
+ }
295
+ .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label:focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]):focus-visible::after, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive:focus-visible::after {
671
296
  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);
672
297
  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);
673
298
  animation-timing-function: var(--_focus-indicator-easing);
@@ -688,31 +313,7 @@ svg {
688
313
  content: "";
689
314
  display: block;
690
315
  }
691
- .forge-list-item:has(button:not(:disabled),
692
- a,
693
- label,
694
- .forge-list-item--interactive:not(.forge-list-item--disabled),
695
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a,
696
- .forge-list-item:has(button:not(:disabled),
697
- a,
698
- label,
699
- .forge-list-item--interactive:not(.forge-list-item--disabled),
700
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button,
701
- .forge-list-item:has(button:not(:disabled),
702
- a,
703
- label,
704
- .forge-list-item--interactive:not(.forge-list-item--disabled),
705
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label,
706
- .forge-list-item:has(button:not(:disabled),
707
- a,
708
- label,
709
- .forge-list-item--interactive:not(.forge-list-item--disabled),
710
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]),
711
- .forge-list-item:has(button:not(:disabled),
712
- a,
713
- label,
714
- .forge-list-item--interactive:not(.forge-list-item--disabled),
715
- :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {
316
+ .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) a, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) button, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) label, .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled]), .forge-list-item:has(button:not(:disabled), a, label, .forge-list-item--interactive:not(.forge-list-item--disabled), :is(forge-checkbox, forge-radio, forge-switch, input):not([disabled])) .forge-list-item--interactive {
716
317
  --forge-focus-indicator-shape: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));
717
318
  }
718
319
  .forge-list-item__text {
@@ -733,55 +334,44 @@ svg {
733
334
  }
734
335
  }
735
336
  @layer two-line {
736
- .forge-list--two-line .forge-list-item,
737
- .forge-list-item--two-line {
337
+ .forge-list--two-line .forge-list-item, .forge-list-item--two-line {
738
338
  height: var(--_list-item-two-line-height);
739
339
  min-height: var(--_list-item-two-line-height);
740
340
  }
741
- .forge-list--three-line .forge-list-item,
742
- .forge-list-item--three-line {
341
+ .forge-list--three-line .forge-list-item, .forge-list-item--three-line {
743
342
  height: var(--_list-item-three-line-height);
744
343
  min-height: var(--_list-item-three-line-height);
745
344
  }
746
345
  }
747
346
  @layer dense {
748
- .forge-list--dense .forge-list-item,
749
- .forge-list-item--dense {
750
- --_list-item-gap: var(--_list-item-dense-gap);
347
+ .forge-list--dense .forge-list-item, .forge-list-item--dense {
348
+ --_list-item-gap:var(--_list-item-dense-gap);
751
349
  height: var(--_list-item-dense-one-line-height);
752
350
  min-height: var(--_list-item-dense-one-line-height);
753
351
  font-size: var(--_list-item-dense-font-size);
754
352
  }
755
- .forge-list--dense.forge-list--two-line .forge-list-item,
756
- .forge-list--dense .forge-list-item--two-line,
757
- .forge-list-item--dense.forge-list-item--two-line {
353
+ .forge-list--dense.forge-list--two-line .forge-list-item, .forge-list--dense .forge-list-item--two-line, .forge-list-item--dense.forge-list-item--two-line {
758
354
  height: var(--_list-item-dense-two-line-height);
759
355
  min-height: var(--_list-item-dense-two-line-height);
760
356
  }
761
- .forge-list--dense.forge-list--three-line .forge-list-item,
762
- .forge-list--dense .forge-list-item--three-line,
763
- .forge-list-item--dense.forge-list-item--three-line {
357
+ .forge-list--dense.forge-list--three-line .forge-list-item, .forge-list--dense .forge-list-item--three-line, .forge-list-item--dense.forge-list-item--three-line {
764
358
  height: var(--_list-item-dense-three-line-height);
765
359
  min-height: var(--_list-item-dense-three-line-height);
766
360
  }
767
- .forge-list-dense.forge-list--indented .forge-list-item,
768
- .forge-list--dense .forge-list-item--indented,
769
- .forge-list-item--dense.forge-list-item--indented {
361
+ .forge-list-dense.forge-list--indented .forge-list-item, .forge-list--dense .forge-list-item--indented, .forge-list-item--dense.forge-list-item--indented {
770
362
  margin-inline-start: var(--_list-item-dense-indent);
771
363
  }
772
364
  }
773
365
  @layer wrap {
774
- .forge-list--wrap .forge-list-item,
775
- .forge-list-item--wrap {
776
- --_list-item-padding: var(--_list-item-wrap-padding);
366
+ .forge-list--wrap .forge-list-item, .forge-list-item--wrap {
367
+ --_list-item-padding:var(--_list-item-wrap-padding);
777
368
  height: auto;
778
369
  white-space: normal;
779
370
  overflow: visible;
780
371
  text-overflow: clip;
781
372
  line-height: normal;
782
373
  }
783
- .forge-list--wrap .forge-list-item .forge-list-item__text,
784
- .forge-list-item--wrap .forge-list-item__text {
374
+ .forge-list--wrap .forge-list-item .forge-list-item__text, .forge-list-item--wrap .forge-list-item__text {
785
375
  white-space: normal;
786
376
  overflow: visible;
787
377
  text-overflow: clip;
@@ -812,19 +402,25 @@ svg {
812
402
  }
813
403
  }
814
404
  @layer indented {
815
- .forge-list--indented .forge-list-item,
816
- .forge-list-item--indented {
405
+ .forge-list--indented .forge-list-item, .forge-list-item--indented {
817
406
  margin-inline-start: var(--_list-item-indent);
818
407
  }
819
408
  }
820
409
  @layer disabled {
821
- .forge-list--disabled .forge-list-item,
822
- .forge-list-item--disabled,
823
- .forge-list-item button:disabled {
410
+ .forge-list--disabled .forge-list-item, .forge-list-item--disabled, .forge-list-item button:disabled {
824
411
  cursor: var(--_list-item-disabled-cursor);
825
412
  opacity: var(--_list-item-disabled-opacity);
826
413
  }
827
414
  }
415
+ @layer multicolumn {
416
+ .forge-list--multicolumn {
417
+ display: grid;
418
+ gap: var(--_list-spacing);
419
+ min-width: 0;
420
+ grid-template-columns: repeat(auto-fit, minmax(var(--_list-column-width), 1fr));
421
+ column-gap: var(--_list-column-spacing);
422
+ }
423
+ }
828
424
  :host {
829
425
  display: block;
830
426
  width: 100%;