@threadlabs/looma 0.5.2 → 0.6.0-rc.1
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.
- package/components/shared/overlay.js +3 -0
- package/components/ui-button/ui-button.html +14 -14
- package/components/ui-callout/ui-callout.html +1 -1
- package/components/ui-checkbox/ui-checkbox.html +1 -1
- package/components/ui-cluster/ui-cluster.html +6 -6
- package/components/ui-combobox/ui-combobox.html +23 -23
- package/components/ui-container/ui-container.html +4 -4
- package/components/ui-context-menu/ui-context-menu.html +2 -2
- package/components/ui-dialog/ui-dialog.html +12 -12
- package/components/ui-disclosure/ui-disclosure.html +19 -4
- package/components/ui-editable/ui-editable.html +6 -6
- package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html +20 -20
- package/components/ui-editor-mention-menu/ui-editor-mention-menu.html +25 -25
- package/components/ui-editor-slash-menu/ui-editor-slash-menu.html +39 -39
- package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html +20 -20
- package/components/ui-editor-table-overlay/ui-editor-table-overlay.html +48 -48
- package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html +34 -34
- package/components/ui-editor-toolbar/ui-editor-toolbar.html +9 -9
- package/components/ui-floating-action-button/ui-floating-action-button.html +16 -22
- package/components/ui-grid/ui-grid.html +6 -6
- package/components/ui-icon-button/ui-icon-button.html +42 -38
- package/components/ui-input/ui-input.html +2 -2
- package/components/ui-menu/ui-menu.html +15 -4
- package/components/ui-menu-item/ui-menu-item.html +5 -5
- package/components/ui-popover/ui-popover.html +3 -3
- package/components/ui-reel/ui-reel.html +6 -6
- package/components/ui-search-result-row/ui-search-result-row.html +9 -9
- package/components/ui-search-shell/ui-search-shell.html +3 -3
- package/components/ui-select/ui-select.html +2 -2
- package/components/ui-sidebar/ui-sidebar.html +11 -11
- package/components/ui-stack/ui-stack.html +6 -6
- package/components/ui-switcher/ui-switcher.html +6 -6
- package/components/ui-tabs/ui-tabs.html +18 -4
- package/components/ui-textarea/ui-textarea.html +2 -2
- package/components/ui-toast-region/ui-toast-region.html +2 -2
- package/components/ui-tooltip/ui-tooltip.html +1 -1
- package/components/ui-top-bar/ui-top-bar.html +5 -5
- package/components/ui-tree/ui-tree.html +7 -0
- package/components/ui-tree-item/ui-tree-item.html +15 -7
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-button.css +14 -14
- package/styles/ui-callout.css +1 -1
- package/styles/ui-checkbox.css +1 -1
- package/styles/ui-cluster.css +6 -6
- package/styles/ui-combobox.css +23 -23
- package/styles/ui-container.css +4 -4
- package/styles/ui-context-menu.css +2 -2
- package/styles/ui-dialog.css +12 -12
- package/styles/ui-disclosure.css +22 -6
- package/styles/ui-editable.css +6 -6
- package/styles/ui-editor-insert-table-grid.css +20 -20
- package/styles/ui-editor-mention-menu.css +25 -25
- package/styles/ui-editor-slash-menu.css +39 -39
- package/styles/ui-editor-table-context-menu.css +20 -20
- package/styles/ui-editor-table-overlay.css +48 -48
- package/styles/ui-editor-table-toolbar.css +34 -34
- package/styles/ui-editor-toolbar.css +9 -9
- package/styles/ui-floating-action-button.css +16 -22
- package/styles/ui-grid.css +6 -6
- package/styles/ui-icon-button.css +42 -38
- package/styles/ui-input.css +2 -2
- package/styles/ui-menu-item.css +5 -5
- package/styles/ui-menu.css +18 -6
- package/styles/ui-popover.css +3 -3
- package/styles/ui-reel.css +6 -6
- package/styles/ui-search-result-row.css +9 -9
- package/styles/ui-search-shell.css +3 -3
- package/styles/ui-select.css +2 -2
- package/styles/ui-sidebar.css +11 -11
- package/styles/ui-stack.css +6 -6
- package/styles/ui-switcher.css +6 -6
- package/styles/ui-tabs.css +20 -6
- package/styles/ui-textarea.css +2 -2
- package/styles/ui-toast-region.css +2 -2
- package/styles/ui-tooltip.css +1 -1
- package/styles/ui-top-bar.css +5 -5
- package/styles/ui-tree-item.css +21 -8
- package/styles/ui-tree.css +7 -1
- package/theme-dark.css +42 -103
- package/theme-high-contrast.css +18 -22
- package/theme-light.css +15 -41
- package/tokens.css +149 -201
- package/vanilla/UiDisclosure.d.ts +1 -0
- package/vanilla/UiDisclosure.js +1 -1
- package/vanilla/UiMenu.d.ts +1 -0
- package/vanilla/UiMenu.js +1 -1
- package/vanilla/UiTabs.d.ts +1 -0
- package/vanilla/UiTabs.js +1 -1
- package/vanilla/UiTree.d.ts +1 -0
- package/vanilla/UiTree.js +1 -1
- package/vue/UiButton.vue +20 -14
- package/vue/UiCallout.vue +1 -1
- package/vue/UiCheckbox.vue +1 -1
- package/vue/UiCluster.vue +6 -6
- package/vue/UiCombobox.vue +23 -23
- package/vue/UiContainer.vue +4 -4
- package/vue/UiContextMenu.vue +2 -2
- package/vue/UiDialog.vue +12 -12
- package/vue/UiDisclosure.d.ts +2 -0
- package/vue/UiDisclosure.vue +21 -4
- package/vue/UiEditable.vue +6 -6
- package/vue/UiEditorInsertTableGrid.vue +20 -20
- package/vue/UiEditorMentionMenu.vue +25 -25
- package/vue/UiEditorSlashMenu.vue +39 -39
- package/vue/UiEditorTableContextMenu.vue +20 -20
- package/vue/UiEditorTableOverlay.vue +48 -57
- package/vue/UiEditorTableToolbar.vue +34 -34
- package/vue/UiEditorToolbar.vue +9 -9
- package/vue/UiFloatingActionButton.vue +17 -22
- package/vue/UiGrid.vue +6 -6
- package/vue/UiIconButton.vue +46 -42
- package/vue/UiInput.vue +2 -2
- package/vue/UiMenu.d.ts +2 -0
- package/vue/UiMenu.vue +17 -7
- package/vue/UiMenuItem.vue +6 -5
- package/vue/UiPopover.vue +3 -3
- package/vue/UiReel.vue +6 -6
- package/vue/UiSearchResultRow.vue +10 -13
- package/vue/UiSearchShell.vue +3 -3
- package/vue/UiSelect.vue +2 -2
- package/vue/UiSidebar.vue +11 -16
- package/vue/UiStack.vue +6 -6
- package/vue/UiSwitcher.vue +6 -6
- package/vue/UiTabs.d.ts +2 -0
- package/vue/UiTabs.vue +21 -4
- package/vue/UiTextarea.vue +2 -2
- package/vue/UiToastRegion.vue +2 -2
- package/vue/UiTooltip.vue +1 -1
- package/vue/UiTopBar.vue +5 -5
- package/vue/UiTree.d.ts +2 -0
- package/vue/UiTree.vue +24 -1
- package/vue/UiTreeItem.vue +16 -8
- package/vue/chunks/UiButton.js +1 -1
- package/vue/chunks/UiCallout.js +1 -1
- package/vue/chunks/UiCheckbox.js +1 -1
- package/vue/chunks/UiCluster.js +1 -1
- package/vue/chunks/UiCombobox.js +1 -1
- package/vue/chunks/UiContainer.js +1 -1
- package/vue/chunks/UiContextMenu.js +1 -1
- package/vue/chunks/UiDialog.js +1 -1
- package/vue/chunks/UiDisclosure.js +3 -2
- package/vue/chunks/UiEditable.js +1 -1
- package/vue/chunks/UiEditorInsertTableGrid.js +1 -1
- package/vue/chunks/UiEditorMentionMenu.js +1 -1
- package/vue/chunks/UiEditorSlashMenu.js +1 -1
- package/vue/chunks/UiEditorTableContextMenu.js +1 -1
- package/vue/chunks/UiEditorTableOverlay.js +1 -1
- package/vue/chunks/UiEditorTableToolbar.js +1 -1
- package/vue/chunks/UiEditorToolbar.js +1 -1
- package/vue/chunks/UiFloatingActionButton.js +1 -1
- package/vue/chunks/UiGrid.js +1 -1
- package/vue/chunks/UiIconButton.js +1 -1
- package/vue/chunks/UiInput.js +1 -1
- package/vue/chunks/UiMenu.js +3 -2
- package/vue/chunks/UiMenuItem.js +1 -1
- package/vue/chunks/UiPopover.js +1 -1
- package/vue/chunks/UiReel.js +1 -1
- package/vue/chunks/UiSearchResultRow.js +1 -1
- package/vue/chunks/UiSearchShell.js +1 -1
- package/vue/chunks/UiSelect.js +1 -1
- package/vue/chunks/UiSidebar.js +1 -1
- package/vue/chunks/UiStack.js +1 -1
- package/vue/chunks/UiSwitcher.js +1 -1
- package/vue/chunks/UiTabs.js +7 -2
- package/vue/chunks/UiTextarea.js +1 -1
- package/vue/chunks/UiToastRegion.js +1 -1
- package/vue/chunks/UiTooltip.js +1 -1
- package/vue/chunks/UiTopBar.js +1 -1
- package/vue/chunks/UiTree.js +8 -2
- package/vue/chunks/UiTreeItem.js +1 -1
- package/vue/components.css +1082 -1048
- package/vue/editor/LoomaEditor.d.ts +11 -0
- package/vue/editor/index.js +9 -0
package/vue/components.css
CHANGED
|
@@ -172,36 +172,36 @@
|
|
|
172
172
|
display: none;
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
-
[data-component~="ui-button"][data-v-
|
|
175
|
+
[data-component~="ui-button"][data-v-d0355403] {
|
|
176
176
|
display: inline-flex;
|
|
177
177
|
align-items: center;
|
|
178
178
|
justify-content: center;
|
|
179
179
|
vertical-align: middle;
|
|
180
180
|
color: var(--ui-action-secondary-text, var(--ui-text-primary));
|
|
181
181
|
}
|
|
182
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-
|
|
182
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403] {
|
|
183
183
|
color: var(--ui-action-primary-text, var(--ui-text-on-accent));
|
|
184
184
|
}
|
|
185
|
-
[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-
|
|
185
|
+
[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-d0355403] {
|
|
186
186
|
justify-content: flex-start;
|
|
187
187
|
text-align: start;
|
|
188
188
|
}
|
|
189
|
-
[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-
|
|
189
|
+
[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-d0355403] {
|
|
190
190
|
display: flex;
|
|
191
191
|
inline-size: 100%;
|
|
192
192
|
}
|
|
193
|
-
[data-component~="ui-button"][data-v-
|
|
193
|
+
[data-component~="ui-button"][data-v-d0355403] {
|
|
194
194
|
appearance: none;
|
|
195
|
-
min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md
|
|
195
|
+
min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
|
|
196
196
|
border: 1px solid var(--ui-button-border, var(--ui-border-strong));
|
|
197
|
-
border-radius: var(--ui-button-radius, var(--ui-radius-
|
|
197
|
+
border-radius: var(--ui-button-radius, var(--ui-radius-md));
|
|
198
198
|
background: var(--ui-button-surface, var(--ui-surface-elevated));
|
|
199
199
|
color: var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
|
|
200
200
|
font: inherit;
|
|
201
|
-
font-weight: var(--ui-font-medium
|
|
201
|
+
font-weight: var(--ui-font-medium);
|
|
202
202
|
line-height: var(--ui-line-height-tight);
|
|
203
203
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
204
|
-
background-image: var(--ui-raised-highlight
|
|
204
|
+
background-image: var(--ui-raised-highlight);
|
|
205
205
|
box-shadow: var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs)));
|
|
206
206
|
cursor: pointer;
|
|
207
207
|
transition:
|
|
@@ -213,29 +213,29 @@
|
|
|
213
213
|
margin: 0;
|
|
214
214
|
}
|
|
215
215
|
@supports (text-box-trim: trim-both) {
|
|
216
|
-
[data-component~="ui-button"][data-v-
|
|
216
|
+
[data-component~="ui-button"][data-v-d0355403] {
|
|
217
217
|
text-box-trim: trim-both;
|
|
218
218
|
text-box-edge: cap alphabetic;
|
|
219
219
|
}
|
|
220
220
|
}
|
|
221
|
-
[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-
|
|
222
|
-
min-block-size: var(--ui-control-size-sm
|
|
221
|
+
[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-d0355403] {
|
|
222
|
+
min-block-size: var(--ui-control-size-sm);
|
|
223
223
|
padding: var(--ui-space-1) var(--ui-space-2);
|
|
224
224
|
font-size: 0.875rem;
|
|
225
225
|
}
|
|
226
|
-
[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-
|
|
227
|
-
min-block-size: var(--ui-control-size-lg
|
|
226
|
+
[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-d0355403] {
|
|
227
|
+
min-block-size: var(--ui-control-size-lg);
|
|
228
228
|
padding: var(--ui-space-3) var(--ui-space-4);
|
|
229
229
|
font-size: 1rem;
|
|
230
230
|
}
|
|
231
|
-
[data-component~="ui-button"][data-v-
|
|
231
|
+
[data-component~="ui-button"][data-v-d0355403]:hover:enabled {
|
|
232
232
|
background: var(--ui-action-secondary-surface-hover, var(--ui-surface-muted));
|
|
233
233
|
border-color: var(--ui-control-border-hover, var(--ui-border-strong));
|
|
234
234
|
}
|
|
235
|
-
[data-component~="ui-button"][data-v-
|
|
235
|
+
[data-component~="ui-button"][data-v-d0355403]:active:enabled {
|
|
236
236
|
background: var(--ui-surface-subtle);
|
|
237
237
|
}
|
|
238
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-
|
|
238
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403] {
|
|
239
239
|
border-color: var(--ui-action-primary-surface, var(--ui-accent-solid));
|
|
240
240
|
background: var(--ui-action-primary-surface, var(--ui-accent-solid));
|
|
241
241
|
color: var(--ui-action-primary-text, var(--ui-text-on-accent));
|
|
@@ -245,19 +245,19 @@
|
|
|
245
245
|
var(--ui-shadow-xs)
|
|
246
246
|
);
|
|
247
247
|
}
|
|
248
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-
|
|
248
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403]:hover:enabled {
|
|
249
249
|
background: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
|
|
250
250
|
border-color: var(--ui-action-primary-surface-hover, var(--ui-accent-hover));
|
|
251
251
|
box-shadow: var(--ui-shadow-sm);
|
|
252
252
|
transform: translateY(-1px);
|
|
253
253
|
}
|
|
254
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-
|
|
254
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403]:active:enabled {
|
|
255
255
|
background: var(--ui-action-primary-surface-active, var(--ui-accent-active));
|
|
256
256
|
border-color: var(--ui-action-primary-surface-active, var(--ui-accent-active));
|
|
257
257
|
box-shadow: none;
|
|
258
258
|
transform: translateY(0);
|
|
259
259
|
}
|
|
260
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-
|
|
260
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-d0355403] {
|
|
261
261
|
border-color: var(--ui-danger-solid);
|
|
262
262
|
background: var(--ui-danger-solid);
|
|
263
263
|
color: var(--ui-text-on-accent);
|
|
@@ -267,17 +267,17 @@
|
|
|
267
267
|
var(--ui-shadow-xs)
|
|
268
268
|
);
|
|
269
269
|
}
|
|
270
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-
|
|
270
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-d0355403]:hover:enabled {
|
|
271
271
|
background: var(--ui-danger-hover);
|
|
272
272
|
border-color: var(--ui-danger-hover);
|
|
273
273
|
box-shadow: var(--ui-shadow-sm);
|
|
274
274
|
transform: translateY(-1px);
|
|
275
275
|
}
|
|
276
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-
|
|
276
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-d0355403]:active:enabled {
|
|
277
277
|
box-shadow: none;
|
|
278
278
|
transform: translateY(0);
|
|
279
279
|
}
|
|
280
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-
|
|
280
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-d0355403] {
|
|
281
281
|
border-color: transparent;
|
|
282
282
|
background: transparent;
|
|
283
283
|
box-shadow: none;
|
|
@@ -285,30 +285,36 @@
|
|
|
285
285
|
}
|
|
286
286
|
|
|
287
287
|
/* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
|
|
288
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-
|
|
289
|
-
background: var(
|
|
288
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-d0355403]:hover:enabled {
|
|
289
|
+
background: var(
|
|
290
|
+
--ui-button-ghost-hover-surface,
|
|
291
|
+
color-mix(in srgb, currentColor 8%, transparent)
|
|
292
|
+
);
|
|
290
293
|
border-color: transparent;
|
|
291
294
|
}
|
|
292
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-
|
|
293
|
-
background: var(
|
|
295
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-d0355403]:active:enabled {
|
|
296
|
+
background: var(
|
|
297
|
+
--ui-button-ghost-active-surface,
|
|
298
|
+
color-mix(in srgb, currentColor 14%, transparent)
|
|
299
|
+
);
|
|
294
300
|
border-color: transparent;
|
|
295
301
|
}
|
|
296
302
|
|
|
297
303
|
/* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
|
|
298
|
-
[data-component~="ui-button"][data-v-
|
|
304
|
+
[data-component~="ui-button"][data-v-d0355403]:focus-visible {
|
|
299
305
|
outline: none;
|
|
300
306
|
box-shadow:
|
|
301
307
|
var(--ui-button-shadow, var(--ui-raised, var(--ui-shadow-xs))),
|
|
302
308
|
var(--ui-focus-halo);
|
|
303
309
|
}
|
|
304
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-
|
|
310
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403]:focus-visible {
|
|
305
311
|
box-shadow:
|
|
306
312
|
var(--ui-button-solid-shadow, inset 0 1px rgb(255 255 255 / 0.16), var(--ui-shadow-xs)),
|
|
307
313
|
var(--ui-focus-halo);
|
|
308
314
|
}
|
|
309
315
|
|
|
310
316
|
/* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
|
|
311
|
-
[data-component~="ui-button"][data-v-
|
|
317
|
+
[data-component~="ui-button"][data-v-d0355403]:disabled {
|
|
312
318
|
opacity: var(--ui-button-disabled-opacity, 0.6);
|
|
313
319
|
cursor: not-allowed;
|
|
314
320
|
border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
|
|
@@ -321,7 +327,7 @@
|
|
|
321
327
|
var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary)))
|
|
322
328
|
);
|
|
323
329
|
}
|
|
324
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-
|
|
330
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-d0355403]:disabled {
|
|
325
331
|
border-color: var(
|
|
326
332
|
--ui-button-disabled-border,
|
|
327
333
|
var(--ui-action-primary-surface, var(--ui-accent-solid))
|
|
@@ -332,12 +338,12 @@
|
|
|
332
338
|
);
|
|
333
339
|
color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
|
|
334
340
|
}
|
|
335
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-
|
|
341
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-d0355403]:disabled {
|
|
336
342
|
border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
|
|
337
343
|
background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
|
|
338
344
|
color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
|
|
339
345
|
}
|
|
340
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-
|
|
346
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-d0355403]:disabled {
|
|
341
347
|
border-color: transparent;
|
|
342
348
|
background-color: transparent;
|
|
343
349
|
color: var(
|
|
@@ -346,23 +352,23 @@
|
|
|
346
352
|
);
|
|
347
353
|
}
|
|
348
354
|
@media (pointer: coarse) {
|
|
349
|
-
[data-component~="ui-button"][data-v-
|
|
350
|
-
min-block-size: var(--ui-control-min-block-size
|
|
355
|
+
[data-component~="ui-button"][data-v-d0355403] {
|
|
356
|
+
min-block-size: var(--ui-control-min-block-size);
|
|
351
357
|
}
|
|
352
358
|
}
|
|
353
359
|
|
|
354
360
|
/* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
|
|
355
361
|
WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
|
|
356
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-
|
|
362
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-d0355403] {
|
|
357
363
|
display: inline;
|
|
358
364
|
min-block-size: 0;
|
|
359
365
|
padding: 0;
|
|
360
366
|
border: 0;
|
|
361
|
-
border-radius: var(--ui-radius-sm
|
|
367
|
+
border-radius: var(--ui-radius-sm);
|
|
362
368
|
background: none;
|
|
363
369
|
box-shadow: none;
|
|
364
370
|
font: inherit;
|
|
365
|
-
color: var(--ui-button-link-
|
|
371
|
+
color: var(--ui-button-link-text, var(--ui-text-secondary));
|
|
366
372
|
text-decoration-line: underline;
|
|
367
373
|
text-decoration-thickness: 1px;
|
|
368
374
|
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
|
|
@@ -371,33 +377,33 @@
|
|
|
371
377
|
color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
372
378
|
text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
373
379
|
}
|
|
374
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-
|
|
375
|
-
color: var(--ui-button-link-hover-
|
|
380
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-d0355403]:hover:enabled {
|
|
381
|
+
color: var(--ui-button-link-hover-text, var(--ui-text-primary));
|
|
376
382
|
text-decoration-color: currentColor;
|
|
377
383
|
background: none;
|
|
378
384
|
transform: none;
|
|
379
385
|
}
|
|
380
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-
|
|
386
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-d0355403]:active:enabled {
|
|
381
387
|
background: none;
|
|
382
388
|
transform: none;
|
|
383
389
|
}
|
|
384
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-
|
|
390
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-d0355403]:disabled {
|
|
385
391
|
background: none;
|
|
386
|
-
color: var(--ui-button-disabled-text, var(--ui-button-link-
|
|
392
|
+
color: var(--ui-button-disabled-text, var(--ui-button-link-text, var(--ui-text-secondary)));
|
|
387
393
|
}
|
|
388
|
-
[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-
|
|
394
|
+
[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-d0355403]:focus-visible {
|
|
389
395
|
box-shadow: none;
|
|
390
396
|
/* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
|
|
391
|
-
outline: 2px solid var(--ui-focus-ring
|
|
397
|
+
outline: 2px solid var(--ui-focus-ring);
|
|
392
398
|
outline-offset: 2px;
|
|
393
399
|
}
|
|
394
400
|
|
|
395
401
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
396
|
-
[data-component~="ui-button"][hidden][data-v-
|
|
402
|
+
[data-component~="ui-button"][hidden][data-v-d0355403] {
|
|
397
403
|
display: none;
|
|
398
404
|
}
|
|
399
405
|
|
|
400
|
-
[data-component~="ui-callout"][data-v-
|
|
406
|
+
[data-component~="ui-callout"][data-v-31ee6589] {
|
|
401
407
|
--_callout-surface: var(--ui-info-soft);
|
|
402
408
|
--_callout-border: var(--ui-info-solid);
|
|
403
409
|
--_callout-icon: var(--ui-info-solid);
|
|
@@ -413,7 +419,7 @@
|
|
|
413
419
|
color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
|
|
414
420
|
border-inline-start: var(--ui-callout-leading-border-width, 4px) solid
|
|
415
421
|
var(--ui-callout-border, var(--_callout-border));
|
|
416
|
-
border-radius: var(--ui-radius-
|
|
422
|
+
border-radius: var(--ui-radius-md);
|
|
417
423
|
background: var(--ui-callout-surface, var(--_callout-surface));
|
|
418
424
|
color: var(--ui-callout-text, var(--ui-text-primary));
|
|
419
425
|
font-family: var(--ui-font-family-sans);
|
|
@@ -423,47 +429,47 @@
|
|
|
423
429
|
}
|
|
424
430
|
|
|
425
431
|
/* One line box tall, so the icon centres on the first line of text. */
|
|
426
|
-
.icon[data-v-
|
|
432
|
+
.icon[data-v-31ee6589] {
|
|
427
433
|
display: grid;
|
|
428
434
|
place-items: center;
|
|
429
435
|
inline-size: var(--ui-callout-icon-column, 1.125rem);
|
|
430
436
|
block-size: 1lh;
|
|
431
437
|
color: var(--ui-callout-icon, var(--_callout-icon));
|
|
432
438
|
}
|
|
433
|
-
.icon svg[data-v-
|
|
439
|
+
.icon svg[data-v-31ee6589] {
|
|
434
440
|
inline-size: var(--ui-callout-icon-size, 1.125rem);
|
|
435
441
|
block-size: var(--ui-callout-icon-size, 1.125rem);
|
|
436
442
|
}
|
|
437
|
-
.content[data-v-
|
|
443
|
+
.content[data-v-31ee6589] {
|
|
438
444
|
min-inline-size: 0;
|
|
439
445
|
}
|
|
440
|
-
[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-
|
|
446
|
+
[data-component~="ui-callout"][data-ui-callout-state~="tone=note"][data-v-31ee6589] {
|
|
441
447
|
--_callout-surface: var(--ui-surface-muted);
|
|
442
448
|
--_callout-border: var(--ui-border-strong);
|
|
443
449
|
--_callout-icon: var(--ui-text-secondary);
|
|
444
450
|
}
|
|
445
|
-
[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-
|
|
451
|
+
[data-component~="ui-callout"][data-ui-callout-state~="tone=warning"][data-v-31ee6589] {
|
|
446
452
|
--_callout-surface: var(--ui-warning-soft);
|
|
447
453
|
--_callout-border: var(--ui-warning-solid);
|
|
448
454
|
--_callout-icon: var(--ui-warning-solid);
|
|
449
455
|
}
|
|
450
|
-
[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-
|
|
456
|
+
[data-component~="ui-callout"][data-ui-callout-state~="tone=success"][data-v-31ee6589] {
|
|
451
457
|
--_callout-surface: var(--ui-success-soft);
|
|
452
458
|
--_callout-border: var(--ui-success-solid);
|
|
453
459
|
--_callout-icon: var(--ui-success-solid);
|
|
454
460
|
}
|
|
455
|
-
[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-
|
|
461
|
+
[data-component~="ui-callout"][data-ui-callout-state~="tone=danger"][data-v-31ee6589] {
|
|
456
462
|
--_callout-surface: var(--ui-danger-soft);
|
|
457
463
|
--_callout-border: var(--ui-danger-solid);
|
|
458
464
|
--_callout-icon: var(--ui-danger-solid);
|
|
459
465
|
}
|
|
460
466
|
|
|
461
467
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
462
|
-
[data-component~="ui-callout"][hidden][data-v-
|
|
468
|
+
[data-component~="ui-callout"][hidden][data-v-31ee6589] {
|
|
463
469
|
display: none;
|
|
464
470
|
}
|
|
465
471
|
|
|
466
|
-
[data-component~="ui-checkbox"][data-v-
|
|
472
|
+
[data-component~="ui-checkbox"][data-v-acf71232] {
|
|
467
473
|
display: inline-flex;
|
|
468
474
|
align-items: flex-start;
|
|
469
475
|
gap: var(--ui-checkbox-gap, var(--ui-space-2));
|
|
@@ -471,11 +477,11 @@
|
|
|
471
477
|
color: var(--ui-text-primary);
|
|
472
478
|
cursor: pointer;
|
|
473
479
|
}
|
|
474
|
-
.label[data-v-
|
|
480
|
+
.label[data-v-acf71232] {
|
|
475
481
|
min-inline-size: 0;
|
|
476
482
|
line-height: var(--ui-line-height-md);
|
|
477
483
|
}
|
|
478
|
-
input[data-v-
|
|
484
|
+
input[data-v-acf71232] {
|
|
479
485
|
appearance: none;
|
|
480
486
|
-webkit-appearance: none;
|
|
481
487
|
position: relative;
|
|
@@ -484,7 +490,7 @@ input[data-v-1e598fdb] {
|
|
|
484
490
|
block-size: var(--ui-checkbox-size, 1.125rem);
|
|
485
491
|
margin: 0.125em 0 0;
|
|
486
492
|
border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
|
|
487
|
-
border-radius: var(--ui-radius-
|
|
493
|
+
border-radius: var(--ui-radius-sm);
|
|
488
494
|
background: var(--ui-control-surface, var(--ui-surface-default));
|
|
489
495
|
box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 8%, transparent);
|
|
490
496
|
cursor: pointer;
|
|
@@ -493,20 +499,20 @@ input[data-v-1e598fdb] {
|
|
|
493
499
|
border-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
494
500
|
box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
|
|
495
501
|
}
|
|
496
|
-
input[data-v-
|
|
502
|
+
input[data-v-acf71232]::after {
|
|
497
503
|
content: "";
|
|
498
504
|
position: absolute;
|
|
499
505
|
opacity: 0;
|
|
500
506
|
}
|
|
501
|
-
input[data-v-
|
|
502
|
-
input[data-v-
|
|
507
|
+
input[data-v-acf71232]:checked,
|
|
508
|
+
input[data-v-acf71232]:indeterminate {
|
|
503
509
|
border-color: var(--ui-accent-solid);
|
|
504
510
|
background: var(--ui-accent-solid);
|
|
505
511
|
box-shadow: inset 0 1px 2px color-mix(in srgb, #000 16%, transparent);
|
|
506
512
|
}
|
|
507
513
|
|
|
508
514
|
/* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
|
|
509
|
-
input[data-v-
|
|
515
|
+
input[data-v-acf71232]:checked::after {
|
|
510
516
|
inset: 0;
|
|
511
517
|
margin: auto;
|
|
512
518
|
inline-size: 0.32rem;
|
|
@@ -516,7 +522,7 @@ input[data-v-1e598fdb]:checked::after {
|
|
|
516
522
|
opacity: 1;
|
|
517
523
|
transform: translateY(-0.11rem) rotate(45deg);
|
|
518
524
|
}
|
|
519
|
-
input[data-v-
|
|
525
|
+
input[data-v-acf71232]:indeterminate::after {
|
|
520
526
|
inset: 50% 0.23rem auto;
|
|
521
527
|
block-size: 0.125rem;
|
|
522
528
|
border-radius: var(--ui-radius-round);
|
|
@@ -524,30 +530,30 @@ input[data-v-1e598fdb]:indeterminate::after {
|
|
|
524
530
|
opacity: 1;
|
|
525
531
|
transform: translateY(-50%);
|
|
526
532
|
}
|
|
527
|
-
input[data-v-
|
|
533
|
+
input[data-v-acf71232]:hover:enabled {
|
|
528
534
|
border-color: var(--ui-accent-solid);
|
|
529
535
|
}
|
|
530
|
-
input[data-v-
|
|
536
|
+
input[data-v-acf71232]:focus-visible {
|
|
531
537
|
outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
|
|
532
538
|
outline-offset: 2px;
|
|
533
539
|
}
|
|
534
|
-
[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-
|
|
540
|
+
[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-acf71232] {
|
|
535
541
|
color: var(--ui-text-muted);
|
|
536
542
|
cursor: not-allowed;
|
|
537
543
|
}
|
|
538
|
-
[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-
|
|
544
|
+
[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-acf71232] {
|
|
539
545
|
border-color: var(--ui-border-default);
|
|
540
546
|
background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
541
547
|
cursor: not-allowed;
|
|
542
548
|
}
|
|
543
549
|
|
|
544
550
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
545
|
-
[data-component~="ui-checkbox"][hidden][data-v-
|
|
551
|
+
[data-component~="ui-checkbox"][hidden][data-v-acf71232] {
|
|
546
552
|
display: none;
|
|
547
553
|
}
|
|
548
554
|
|
|
549
|
-
[data-component~="ui-cluster"][data-v-
|
|
550
|
-
--_layout-gap: var(--ui-space-3
|
|
555
|
+
[data-component~="ui-cluster"][data-v-06d4310a] {
|
|
556
|
+
--_layout-gap: var(--ui-space-3);
|
|
551
557
|
display: flex;
|
|
552
558
|
flex-wrap: wrap;
|
|
553
559
|
align-items: center;
|
|
@@ -556,37 +562,37 @@ input[data-v-1e598fdb]:focus-visible {
|
|
|
556
562
|
max-inline-size: 100%;
|
|
557
563
|
margin: 0;
|
|
558
564
|
}
|
|
559
|
-
[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-
|
|
560
|
-
--_layout-gap: var(--ui-space-2
|
|
565
|
+
[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-06d4310a] {
|
|
566
|
+
--_layout-gap: var(--ui-space-2);
|
|
561
567
|
}
|
|
562
|
-
[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-
|
|
563
|
-
--_layout-gap: var(--ui-space-3
|
|
568
|
+
[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-06d4310a] {
|
|
569
|
+
--_layout-gap: var(--ui-space-3);
|
|
564
570
|
}
|
|
565
|
-
[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-
|
|
566
|
-
--_layout-gap: var(--ui-space-4
|
|
571
|
+
[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-06d4310a] {
|
|
572
|
+
--_layout-gap: var(--ui-space-4);
|
|
567
573
|
}
|
|
568
|
-
[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-
|
|
569
|
-
--_layout-gap: var(--ui-space-5
|
|
574
|
+
[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-06d4310a] {
|
|
575
|
+
--_layout-gap: var(--ui-space-5);
|
|
570
576
|
}
|
|
571
|
-
[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-
|
|
572
|
-
--_layout-gap: var(--ui-space-6
|
|
577
|
+
[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-06d4310a] {
|
|
578
|
+
--_layout-gap: var(--ui-space-6);
|
|
573
579
|
}
|
|
574
|
-
[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-
|
|
580
|
+
[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-06d4310a] {
|
|
575
581
|
align-items: flex-start;
|
|
576
582
|
}
|
|
577
|
-
[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-
|
|
583
|
+
[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-06d4310a] {
|
|
578
584
|
align-items: flex-end;
|
|
579
585
|
}
|
|
580
|
-
[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-
|
|
586
|
+
[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-06d4310a] {
|
|
581
587
|
align-items: stretch;
|
|
582
588
|
}
|
|
583
589
|
|
|
584
590
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
585
|
-
[data-component~="ui-cluster"][hidden][data-v-
|
|
591
|
+
[data-component~="ui-cluster"][hidden][data-v-06d4310a] {
|
|
586
592
|
display: none;
|
|
587
593
|
}
|
|
588
594
|
|
|
589
|
-
[data-component~="ui-tooltip"][data-v-
|
|
595
|
+
[data-component~="ui-tooltip"][data-v-3099b119] {
|
|
590
596
|
position: fixed;
|
|
591
597
|
inset: auto;
|
|
592
598
|
margin: 0;
|
|
@@ -607,13 +613,13 @@ input[data-v-1e598fdb]:focus-visible {
|
|
|
607
613
|
display var(--ui-motion-fast) allow-discrete,
|
|
608
614
|
overlay var(--ui-motion-fast) allow-discrete;
|
|
609
615
|
}
|
|
610
|
-
.surface[data-v-
|
|
616
|
+
.surface[data-v-3099b119] {
|
|
611
617
|
--_tooltip-line: var(--ui-tooltip-border, var(--ui-border-default));
|
|
612
618
|
position: relative;
|
|
613
619
|
box-sizing: border-box;
|
|
614
620
|
max-inline-size: var(--ui-tooltip-max-inline-size, 18rem);
|
|
615
621
|
border: 1px solid var(--_tooltip-line);
|
|
616
|
-
border-radius: var(--ui-tooltip-radius, var(--ui-radius-
|
|
622
|
+
border-radius: var(--ui-tooltip-radius, var(--ui-radius-sm));
|
|
617
623
|
background: var(--ui-tooltip-surface, var(--ui-surface-elevated));
|
|
618
624
|
color: var(--ui-tooltip-text, var(--ui-text-primary));
|
|
619
625
|
padding: var(--ui-space-1) var(--ui-space-2);
|
|
@@ -622,7 +628,7 @@ input[data-v-1e598fdb]:focus-visible {
|
|
|
622
628
|
line-height: var(--ui-line-height-tight);
|
|
623
629
|
box-shadow: var(--ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
|
|
624
630
|
}
|
|
625
|
-
[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-
|
|
631
|
+
[data-component~="ui-tooltip"][data-ui-tooltip-state~="inverse"] .surface[data-v-3099b119] {
|
|
626
632
|
--_tooltip-line: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
|
|
627
633
|
background: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
|
|
628
634
|
color: var(--ui-tooltip-inverse-text, var(--ui-surface-default));
|
|
@@ -630,7 +636,7 @@ input[data-v-1e598fdb]:focus-visible {
|
|
|
630
636
|
|
|
631
637
|
/* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
|
|
632
638
|
* the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
|
|
633
|
-
.surface[data-v-
|
|
639
|
+
.surface[data-v-3099b119]::after {
|
|
634
640
|
content: "";
|
|
635
641
|
position: absolute;
|
|
636
642
|
z-index: 1;
|
|
@@ -647,7 +653,7 @@ input[data-v-1e598fdb]:focus-visible {
|
|
|
647
653
|
transform: rotate(45deg);
|
|
648
654
|
}
|
|
649
655
|
:is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-start"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
|
|
650
|
-
.surface[data-v-
|
|
656
|
+
.surface[data-v-3099b119]::after {
|
|
651
657
|
inset-block-start: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
|
|
652
658
|
inset-block-end: auto;
|
|
653
659
|
border-inline-end-width: 0;
|
|
@@ -658,67 +664,67 @@ input[data-v-1e598fdb]:focus-visible {
|
|
|
658
664
|
border-start-start-radius: 1px;
|
|
659
665
|
}
|
|
660
666
|
:is([data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=top-end"], [data-component~="ui-tooltip"][data-ui-tooltip-state~="placement=bottom-end"])
|
|
661
|
-
.surface[data-v-
|
|
667
|
+
.surface[data-v-3099b119]::after {
|
|
662
668
|
inset-inline-start: auto;
|
|
663
669
|
inset-inline-end: var(--ui-space-3);
|
|
664
670
|
}
|
|
665
|
-
[data-component~="ui-tooltip"][data-v-
|
|
671
|
+
[data-component~="ui-tooltip"][data-v-3099b119]:popover-open {
|
|
666
672
|
opacity: 1;
|
|
667
673
|
transform: translateY(0);
|
|
668
674
|
}
|
|
669
675
|
@starting-style {
|
|
670
|
-
[data-component~="ui-tooltip"][data-v-
|
|
676
|
+
[data-component~="ui-tooltip"][data-v-3099b119]:popover-open {
|
|
671
677
|
opacity: 0;
|
|
672
678
|
transform: translateY(4px);
|
|
673
679
|
}
|
|
674
680
|
}
|
|
675
|
-
[data-component~="ui-tooltip"][hidden][data-v-
|
|
681
|
+
[data-component~="ui-tooltip"][hidden][data-v-3099b119] {
|
|
676
682
|
display: none;
|
|
677
683
|
}
|
|
678
684
|
@media (prefers-reduced-motion: reduce) {
|
|
679
|
-
[data-component~="ui-tooltip"][data-v-
|
|
685
|
+
[data-component~="ui-tooltip"][data-v-3099b119] {
|
|
680
686
|
transition: none;
|
|
681
687
|
}
|
|
682
688
|
}
|
|
683
689
|
|
|
684
|
-
[data-component~="ui-combobox"][data-v-
|
|
690
|
+
[data-component~="ui-combobox"][data-v-147b231f] {
|
|
685
691
|
display: grid;
|
|
686
692
|
gap: var(--ui-space-1);
|
|
687
693
|
min-inline-size: 0;
|
|
688
694
|
color: var(--ui-text-primary);
|
|
689
695
|
font: inherit;
|
|
690
696
|
}
|
|
691
|
-
label[data-v-
|
|
692
|
-
color: var(--ui-
|
|
693
|
-
font-size: var(--ui-
|
|
694
|
-
font-weight:
|
|
697
|
+
label[data-v-147b231f] {
|
|
698
|
+
color: var(--ui-combobox-label-text, var(--ui-text-primary));
|
|
699
|
+
font-size: var(--ui-combobox-label-font-size, 0.875rem);
|
|
700
|
+
font-weight: 500;
|
|
695
701
|
}
|
|
696
|
-
.field[data-v-
|
|
702
|
+
.field[data-v-147b231f] {
|
|
697
703
|
display: flex;
|
|
698
704
|
min-inline-size: 0;
|
|
699
705
|
border: 1px solid var(--ui-control-border, var(--ui-border-default));
|
|
700
|
-
border-radius: var(--ui-radius-
|
|
706
|
+
border-radius: var(--ui-radius-md);
|
|
701
707
|
background: var(--ui-control-surface, var(--ui-surface-default));
|
|
702
708
|
box-shadow: var(--ui-control-inset);
|
|
703
709
|
transition:
|
|
704
710
|
border-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
705
711
|
box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
|
|
706
712
|
}
|
|
707
|
-
.field[data-v-
|
|
713
|
+
.field[data-v-147b231f]:focus-within {
|
|
708
714
|
border-color: var(--ui-control-focus, var(--ui-accent-solid));
|
|
709
715
|
box-shadow:
|
|
710
716
|
var(--ui-control-inset),
|
|
711
717
|
var(--ui-control-focus-halo-shadow);
|
|
712
718
|
}
|
|
713
|
-
input[data-v-
|
|
719
|
+
input[data-v-147b231f]::selection {
|
|
714
720
|
background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
|
|
715
721
|
color: inherit;
|
|
716
722
|
}
|
|
717
|
-
input[data-v-
|
|
723
|
+
input[data-v-147b231f] {
|
|
718
724
|
appearance: none;
|
|
719
725
|
width: 100%;
|
|
720
726
|
min-inline-size: 0;
|
|
721
|
-
min-block-size: calc(var(--ui-control-size-md
|
|
727
|
+
min-block-size: calc(var(--ui-control-size-md) - 2px);
|
|
722
728
|
box-sizing: border-box;
|
|
723
729
|
border: 0;
|
|
724
730
|
border-radius: inherit;
|
|
@@ -730,50 +736,50 @@ input[data-v-7eb73ca2] {
|
|
|
730
736
|
margin: 0;
|
|
731
737
|
outline: none;
|
|
732
738
|
}
|
|
733
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-
|
|
734
|
-
min-block-size: calc(var(--ui-
|
|
739
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-147b231f] {
|
|
740
|
+
min-block-size: calc(var(--ui-control-size-sm) - 2px);
|
|
735
741
|
padding: var(--ui-space-1) var(--ui-space-2);
|
|
736
742
|
}
|
|
737
|
-
button[data-v-
|
|
743
|
+
button[data-v-147b231f] {
|
|
738
744
|
appearance: none;
|
|
739
745
|
display: inline-grid;
|
|
740
746
|
place-items: center;
|
|
741
747
|
align-self: stretch;
|
|
742
748
|
border: 0;
|
|
743
|
-
border-radius: var(--ui-radius-
|
|
749
|
+
border-radius: var(--ui-radius-md);
|
|
744
750
|
background: transparent;
|
|
745
|
-
color: var(--ui-
|
|
751
|
+
color: var(--ui-combobox-affordance-text, var(--ui-text-secondary));
|
|
746
752
|
font: inherit;
|
|
747
|
-
font-weight:
|
|
753
|
+
font-weight: 400;
|
|
748
754
|
min-inline-size: 2rem;
|
|
749
755
|
padding: 0 var(--ui-space-1);
|
|
750
756
|
cursor: pointer;
|
|
751
757
|
}
|
|
752
|
-
.affordance-icon[data-v-
|
|
758
|
+
.affordance-icon[data-v-147b231f] {
|
|
753
759
|
display: block;
|
|
754
|
-
inline-size: var(--ui-icon-size-sm
|
|
755
|
-
block-size: var(--ui-icon-size-sm
|
|
760
|
+
inline-size: var(--ui-icon-size-sm);
|
|
761
|
+
block-size: var(--ui-icon-size-sm);
|
|
756
762
|
}
|
|
757
|
-
button[data-v-
|
|
763
|
+
button[data-v-147b231f]:hover:enabled {
|
|
758
764
|
background: var(--ui-surface-muted);
|
|
759
765
|
color: var(--ui-text-primary);
|
|
760
766
|
}
|
|
761
|
-
button[data-v-
|
|
767
|
+
button[data-v-147b231f]:focus-visible {
|
|
762
768
|
outline: none;
|
|
763
769
|
background: var(--ui-surface-muted);
|
|
764
770
|
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
|
|
765
771
|
}
|
|
766
|
-
input[data-v-
|
|
772
|
+
input[data-v-147b231f]:disabled, button[data-v-147b231f]:disabled {
|
|
767
773
|
color: var(--ui-text-muted);
|
|
768
774
|
cursor: not-allowed;
|
|
769
775
|
}
|
|
770
|
-
.field[data-v-
|
|
776
|
+
.field[data-v-147b231f]:has(input:disabled) {
|
|
771
777
|
background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
772
778
|
}
|
|
773
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-
|
|
779
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-147b231f] {
|
|
774
780
|
border-color: var(--ui-danger-solid, var(--ui-accent-active));
|
|
775
781
|
}
|
|
776
|
-
.popup[data-v-
|
|
782
|
+
.popup[data-v-147b231f] {
|
|
777
783
|
box-sizing: border-box;
|
|
778
784
|
min-inline-size: 12rem;
|
|
779
785
|
max-inline-size: calc(100vw - 1rem);
|
|
@@ -782,45 +788,45 @@ input[data-v-7eb73ca2]:disabled, button[data-v-7eb73ca2]:disabled {
|
|
|
782
788
|
margin: 0;
|
|
783
789
|
padding: var(--ui-space-1);
|
|
784
790
|
border: 1px solid var(--ui-border-default);
|
|
785
|
-
border-radius: var(--ui-radius-
|
|
791
|
+
border-radius: var(--ui-radius-md);
|
|
786
792
|
background: var(--ui-surface-elevated);
|
|
787
793
|
color: var(--ui-text-primary);
|
|
788
794
|
box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
|
|
789
795
|
}
|
|
790
|
-
[hidden][data-v-
|
|
796
|
+
[hidden][data-v-147b231f] {
|
|
791
797
|
display: none;
|
|
792
798
|
}
|
|
793
|
-
.option[data-v-
|
|
799
|
+
.option[data-v-147b231f] {
|
|
794
800
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
795
|
-
border-radius: var(--ui-radius-
|
|
801
|
+
border-radius: var(--ui-radius-sm);
|
|
796
802
|
cursor: pointer;
|
|
797
803
|
overflow-wrap: anywhere;
|
|
798
804
|
}
|
|
799
|
-
.option[data-v-
|
|
805
|
+
.option[data-v-147b231f]:hover, .option.active[data-v-147b231f] {
|
|
800
806
|
background: var(--ui-surface-muted);
|
|
801
|
-
outline: 1px solid var(--ui-focus-ring
|
|
807
|
+
outline: 1px solid var(--ui-focus-ring);
|
|
802
808
|
outline-offset: -1px;
|
|
803
809
|
}
|
|
804
|
-
.option[aria-disabled="true"][data-v-
|
|
810
|
+
.option[aria-disabled="true"][data-v-147b231f] {
|
|
805
811
|
color: var(--ui-text-muted);
|
|
806
812
|
cursor: not-allowed;
|
|
807
813
|
}
|
|
808
|
-
.primary[data-v-
|
|
814
|
+
.primary[data-v-147b231f] {
|
|
809
815
|
display: block;
|
|
810
|
-
color: var(--ui-option-
|
|
811
|
-
font-weight:
|
|
816
|
+
color: var(--ui-combobox-option-text, var(--ui-text-primary));
|
|
817
|
+
font-weight: 500;
|
|
812
818
|
}
|
|
813
|
-
.message[data-v-
|
|
814
|
-
color: var(--ui-
|
|
815
|
-
font-weight:
|
|
819
|
+
.message[data-v-147b231f], .group[data-v-147b231f] {
|
|
820
|
+
color: var(--ui-combobox-message-text, var(--ui-text-secondary));
|
|
821
|
+
font-weight: 400;
|
|
816
822
|
font-size: var(--ui-font-size-sm);
|
|
817
823
|
line-height: var(--ui-line-height-md);
|
|
818
824
|
overflow-wrap: anywhere;
|
|
819
825
|
}
|
|
820
|
-
.group[data-v-
|
|
826
|
+
.group[data-v-147b231f], .popup .message[data-v-147b231f] {
|
|
821
827
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
822
828
|
}
|
|
823
|
-
.sr-only[data-v-
|
|
829
|
+
.sr-only[data-v-147b231f] {
|
|
824
830
|
position: absolute;
|
|
825
831
|
inline-size: 1px;
|
|
826
832
|
block-size: 1px;
|
|
@@ -829,95 +835,95 @@ input[data-v-7eb73ca2]:disabled, button[data-v-7eb73ca2]:disabled {
|
|
|
829
835
|
white-space: nowrap;
|
|
830
836
|
}
|
|
831
837
|
@media (pointer: coarse) {
|
|
832
|
-
button[data-v-
|
|
838
|
+
button[data-v-147b231f] {
|
|
833
839
|
min-inline-size: 2.75rem;
|
|
834
840
|
min-block-size: 2.75rem;
|
|
835
841
|
}
|
|
836
842
|
}
|
|
837
843
|
@media (forced-colors: active) {
|
|
838
|
-
.field[data-v-
|
|
844
|
+
.field[data-v-147b231f], .popup[data-v-147b231f] {
|
|
839
845
|
border-color: CanvasText;
|
|
840
846
|
}
|
|
841
|
-
.option.active[data-v-
|
|
847
|
+
.option.active[data-v-147b231f] {
|
|
842
848
|
outline-color: Highlight;
|
|
843
849
|
}
|
|
844
850
|
}
|
|
845
851
|
|
|
846
852
|
/* Multiple mode: chips wrap before the cursor on one flexible field line. */
|
|
847
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-
|
|
853
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-147b231f] {
|
|
848
854
|
flex-wrap: wrap;
|
|
849
855
|
align-items: center;
|
|
850
856
|
gap: var(--ui-space-1);
|
|
851
|
-
min-block-size: var(--ui-
|
|
857
|
+
min-block-size: var(--ui-combobox-item-min-block-size, 2.5rem);
|
|
852
858
|
padding: var(--ui-space-1);
|
|
853
859
|
}
|
|
854
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-
|
|
855
|
-
flex: 1 0 var(--ui-
|
|
860
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-147b231f] {
|
|
861
|
+
flex: 1 0 var(--ui-combobox-item-input-min-inline-size, 5rem);
|
|
856
862
|
width: auto;
|
|
857
863
|
min-block-size: 1.75rem;
|
|
858
864
|
padding: var(--ui-space-0-5) var(--ui-space-1);
|
|
859
865
|
}
|
|
860
|
-
.item[data-v-
|
|
866
|
+
.item[data-v-147b231f] {
|
|
861
867
|
appearance: none;
|
|
862
868
|
display: inline-flex;
|
|
863
869
|
min-inline-size: 0;
|
|
864
|
-
max-inline-size: min(100%, var(--ui-
|
|
870
|
+
max-inline-size: min(100%, var(--ui-combobox-item-item-max-inline-size, 12rem));
|
|
865
871
|
overflow: hidden;
|
|
866
872
|
padding: 0;
|
|
867
873
|
border: 0;
|
|
868
|
-
border-radius: var(--ui-radius-
|
|
874
|
+
border-radius: var(--ui-radius-sm);
|
|
869
875
|
background: transparent;
|
|
870
876
|
color: inherit;
|
|
871
877
|
font: inherit;
|
|
872
878
|
cursor: default;
|
|
873
879
|
}
|
|
874
|
-
.item[data-v-
|
|
875
|
-
outline: 2px solid var(--ui-focus-ring
|
|
880
|
+
.item[data-v-147b231f]:focus-visible {
|
|
881
|
+
outline: 2px solid var(--ui-focus-ring);
|
|
876
882
|
outline-offset: 1px;
|
|
877
883
|
}
|
|
878
|
-
.item[data-v-
|
|
884
|
+
.item[data-v-147b231f]:disabled {
|
|
879
885
|
opacity: 0.6;
|
|
880
886
|
}
|
|
881
887
|
|
|
882
888
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
883
|
-
[data-component~="ui-combobox"][hidden][data-v-
|
|
889
|
+
[data-component~="ui-combobox"][hidden][data-v-147b231f] {
|
|
884
890
|
display: none;
|
|
885
891
|
}
|
|
886
892
|
|
|
887
|
-
[data-component~="ui-container"][data-v-
|
|
893
|
+
[data-component~="ui-container"][data-v-4c7bb81d] {
|
|
888
894
|
--_container-measure: 65ch;
|
|
889
|
-
--_container-gutters: var(--ui-space-4
|
|
895
|
+
--_container-gutters: var(--ui-space-4);
|
|
890
896
|
display: block;
|
|
891
897
|
inline-size: 100%;
|
|
892
898
|
max-inline-size: var(--ui-container-measure, var(--_container-measure));
|
|
893
899
|
margin-inline: auto;
|
|
894
900
|
padding-inline: var(--ui-container-gutters, var(--_container-gutters));
|
|
895
901
|
}
|
|
896
|
-
[data-component~="ui-container"][data-ui-container-state~="measure=narrow"][data-v-
|
|
902
|
+
[data-component~="ui-container"][data-ui-container-state~="measure=narrow"][data-v-4c7bb81d] {
|
|
897
903
|
--_container-measure: 45ch;
|
|
898
904
|
}
|
|
899
|
-
[data-component~="ui-container"][data-ui-container-state~="measure=wide"][data-v-
|
|
905
|
+
[data-component~="ui-container"][data-ui-container-state~="measure=wide"][data-v-4c7bb81d] {
|
|
900
906
|
--_container-measure: 80ch;
|
|
901
907
|
}
|
|
902
|
-
[data-component~="ui-container"][data-ui-container-state~="gutters=s"][data-v-
|
|
903
|
-
--_container-gutters: var(--ui-space-3
|
|
908
|
+
[data-component~="ui-container"][data-ui-container-state~="gutters=s"][data-v-4c7bb81d] {
|
|
909
|
+
--_container-gutters: var(--ui-space-3);
|
|
904
910
|
}
|
|
905
|
-
[data-component~="ui-container"][data-ui-container-state~="gutters=m"][data-v-
|
|
906
|
-
--_container-gutters: var(--ui-space-4
|
|
911
|
+
[data-component~="ui-container"][data-ui-container-state~="gutters=m"][data-v-4c7bb81d] {
|
|
912
|
+
--_container-gutters: var(--ui-space-4);
|
|
907
913
|
}
|
|
908
|
-
[data-component~="ui-container"][data-ui-container-state~="gutters=l"][data-v-
|
|
909
|
-
--_container-gutters: var(--ui-space-5
|
|
914
|
+
[data-component~="ui-container"][data-ui-container-state~="gutters=l"][data-v-4c7bb81d] {
|
|
915
|
+
--_container-gutters: var(--ui-space-5);
|
|
910
916
|
}
|
|
911
917
|
|
|
912
918
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
913
|
-
[data-component~="ui-container"][hidden][data-v-
|
|
919
|
+
[data-component~="ui-container"][hidden][data-v-4c7bb81d] {
|
|
914
920
|
display: none;
|
|
915
921
|
}
|
|
916
922
|
|
|
917
|
-
[data-component~="ui-context-menu"][data-v-
|
|
923
|
+
[data-component~="ui-context-menu"][data-v-39e418e5] {
|
|
918
924
|
display: contents;
|
|
919
925
|
}
|
|
920
|
-
.menu[data-v-
|
|
926
|
+
.menu[data-v-39e418e5] {
|
|
921
927
|
position: fixed;
|
|
922
928
|
inset: auto;
|
|
923
929
|
margin: 0;
|
|
@@ -927,11 +933,11 @@ button[data-v-7eb73ca2] {
|
|
|
927
933
|
padding: var(--ui-space-1);
|
|
928
934
|
background: var(--ui-surface-elevated);
|
|
929
935
|
border: 1px solid var(--ui-border-default);
|
|
930
|
-
border-radius: var(--ui-radius-
|
|
936
|
+
border-radius: var(--ui-radius-lg);
|
|
931
937
|
box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
|
|
932
938
|
outline: 0;
|
|
933
939
|
overflow: auto;
|
|
934
|
-
z-index: var(--ui-z-
|
|
940
|
+
z-index: var(--ui-context-menu-z-index, 1000);
|
|
935
941
|
min-width: 12rem;
|
|
936
942
|
opacity: 0;
|
|
937
943
|
transform: translateY(-4px) scale(0.99);
|
|
@@ -941,41 +947,41 @@ button[data-v-7eb73ca2] {
|
|
|
941
947
|
display var(--ui-motion-fast) allow-discrete,
|
|
942
948
|
overlay var(--ui-motion-fast) allow-discrete;
|
|
943
949
|
}
|
|
944
|
-
.menu[data-v-
|
|
950
|
+
.menu[data-v-39e418e5]:popover-open {
|
|
945
951
|
opacity: 1;
|
|
946
952
|
transform: translateY(0) scale(1);
|
|
947
953
|
}
|
|
948
954
|
@starting-style {
|
|
949
|
-
.menu[data-v-
|
|
955
|
+
.menu[data-v-39e418e5]:popover-open {
|
|
950
956
|
opacity: 0;
|
|
951
957
|
transform: translateY(-4px) scale(0.99);
|
|
952
958
|
}
|
|
953
959
|
}
|
|
954
|
-
.menu[hidden][data-v-
|
|
955
|
-
.menu[popover][data-v-
|
|
960
|
+
.menu[hidden][data-v-39e418e5],
|
|
961
|
+
.menu[popover][data-v-39e418e5]:not(:popover-open) {
|
|
956
962
|
display: none;
|
|
957
963
|
}
|
|
958
964
|
@media (prefers-reduced-motion: reduce) {
|
|
959
|
-
.menu[data-v-
|
|
965
|
+
.menu[data-v-39e418e5] {
|
|
960
966
|
transition: none;
|
|
961
967
|
}
|
|
962
968
|
}
|
|
963
969
|
|
|
964
970
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
965
|
-
[data-component~="ui-context-menu"][hidden][data-v-
|
|
971
|
+
[data-component~="ui-context-menu"][hidden][data-v-39e418e5] {
|
|
966
972
|
display: none;
|
|
967
973
|
}
|
|
968
974
|
|
|
969
|
-
[data-component~="ui-dialog"][data-v-
|
|
975
|
+
[data-component~="ui-dialog"][data-v-05ac1756] {
|
|
970
976
|
position: fixed;
|
|
971
977
|
inset: 0;
|
|
972
978
|
box-sizing: border-box;
|
|
973
979
|
inline-size: min(
|
|
974
|
-
calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4
|
|
980
|
+
calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
|
|
975
981
|
var(--ui-dialog-max-width, 440px)
|
|
976
982
|
);
|
|
977
983
|
max-inline-size: none;
|
|
978
|
-
max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4
|
|
984
|
+
max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
|
|
979
985
|
margin: auto;
|
|
980
986
|
padding: 0;
|
|
981
987
|
overflow: hidden;
|
|
@@ -995,17 +1001,17 @@ button[data-v-7eb73ca2] {
|
|
|
995
1001
|
display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
|
|
996
1002
|
overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
|
|
997
1003
|
}
|
|
998
|
-
[data-component~="ui-dialog"][open][data-v-
|
|
1004
|
+
[data-component~="ui-dialog"][open][data-v-05ac1756] {
|
|
999
1005
|
display: flex;
|
|
1000
1006
|
visibility: visible;
|
|
1001
1007
|
pointer-events: auto;
|
|
1002
1008
|
opacity: 1;
|
|
1003
1009
|
transform: scale(1);
|
|
1004
|
-
animation: ui-dialog-enter-
|
|
1010
|
+
animation: ui-dialog-enter-05ac1756 var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
|
|
1005
1011
|
}
|
|
1006
1012
|
|
|
1007
1013
|
/* Header and actions stay pinned; only the body scrolls when content is long. */
|
|
1008
|
-
header[data-v-
|
|
1014
|
+
header[data-v-05ac1756] {
|
|
1009
1015
|
display: flex;
|
|
1010
1016
|
align-items: center;
|
|
1011
1017
|
gap: var(--ui-space-3);
|
|
@@ -1015,7 +1021,7 @@ header[data-v-e78fa426] {
|
|
|
1015
1021
|
}
|
|
1016
1022
|
|
|
1017
1023
|
/* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
|
|
1018
|
-
[data-component~="ui-dialog"] .title[data-v-
|
|
1024
|
+
[data-component~="ui-dialog"] .title[data-v-05ac1756] {
|
|
1019
1025
|
flex: 1;
|
|
1020
1026
|
min-inline-size: 0;
|
|
1021
1027
|
margin: 0;
|
|
@@ -1023,20 +1029,20 @@ header[data-v-e78fa426] {
|
|
|
1023
1029
|
border: 0;
|
|
1024
1030
|
color: var(--ui-text-primary);
|
|
1025
1031
|
letter-spacing: normal;
|
|
1026
|
-
font-size: var(--ui-font-size-lg
|
|
1027
|
-
font-weight: var(--ui-font-semibold
|
|
1032
|
+
font-size: var(--ui-font-size-lg);
|
|
1033
|
+
font-weight: var(--ui-font-semibold);
|
|
1028
1034
|
line-height: var(--ui-line-height-tight);
|
|
1029
1035
|
}
|
|
1030
|
-
.close[data-v-
|
|
1036
|
+
.close[data-v-05ac1756] {
|
|
1031
1037
|
display: inline-grid;
|
|
1032
1038
|
place-items: center;
|
|
1033
1039
|
flex: none;
|
|
1034
1040
|
margin-inline-start: auto;
|
|
1035
|
-
inline-size: var(--ui-control-size-sm
|
|
1036
|
-
block-size: var(--ui-control-size-sm
|
|
1041
|
+
inline-size: var(--ui-control-size-sm);
|
|
1042
|
+
block-size: var(--ui-control-size-sm);
|
|
1037
1043
|
padding: 0;
|
|
1038
1044
|
border: 0;
|
|
1039
|
-
border-radius: var(--ui-radius-round
|
|
1045
|
+
border-radius: var(--ui-radius-round);
|
|
1040
1046
|
background: transparent;
|
|
1041
1047
|
color: var(--ui-text-secondary);
|
|
1042
1048
|
cursor: pointer;
|
|
@@ -1046,8 +1052,8 @@ header[data-v-e78fa426] {
|
|
|
1046
1052
|
}
|
|
1047
1053
|
|
|
1048
1054
|
/* A CSS-drawn X. */
|
|
1049
|
-
.close[data-v-
|
|
1050
|
-
.close[data-v-
|
|
1055
|
+
.close[data-v-05ac1756]::before,
|
|
1056
|
+
.close[data-v-05ac1756]::after {
|
|
1051
1057
|
content: "";
|
|
1052
1058
|
grid-area: 1 / 1;
|
|
1053
1059
|
inline-size: 0.875rem;
|
|
@@ -1056,37 +1062,37 @@ header[data-v-e78fa426] {
|
|
|
1056
1062
|
background: currentColor;
|
|
1057
1063
|
transform: rotate(45deg);
|
|
1058
1064
|
}
|
|
1059
|
-
.close[data-v-
|
|
1065
|
+
.close[data-v-05ac1756]::after {
|
|
1060
1066
|
transform: rotate(-45deg);
|
|
1061
1067
|
}
|
|
1062
|
-
.close[data-v-
|
|
1068
|
+
.close[data-v-05ac1756]:hover {
|
|
1063
1069
|
background: var(--ui-surface-muted);
|
|
1064
1070
|
color: var(--ui-text-primary);
|
|
1065
1071
|
}
|
|
1066
|
-
.close[data-v-
|
|
1067
|
-
outline: 2px solid var(--ui-focus-ring
|
|
1072
|
+
.close[data-v-05ac1756]:focus-visible {
|
|
1073
|
+
outline: 2px solid var(--ui-focus-ring);
|
|
1068
1074
|
outline-offset: 2px;
|
|
1069
1075
|
}
|
|
1070
1076
|
|
|
1071
1077
|
/* A touch target, like Button on coarse pointers. */
|
|
1072
1078
|
@media (pointer: coarse) {
|
|
1073
|
-
.close[data-v-
|
|
1074
|
-
inline-size: var(--ui-control-min-block-size
|
|
1075
|
-
block-size: var(--ui-control-min-block-size
|
|
1079
|
+
.close[data-v-05ac1756] {
|
|
1080
|
+
inline-size: var(--ui-control-min-block-size);
|
|
1081
|
+
block-size: var(--ui-control-min-block-size);
|
|
1076
1082
|
}
|
|
1077
1083
|
}
|
|
1078
|
-
html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-
|
|
1079
|
-
inline-size: var(--ui-control-min-block-size
|
|
1080
|
-
block-size: var(--ui-control-min-block-size
|
|
1084
|
+
html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-05ac1756] {
|
|
1085
|
+
inline-size: var(--ui-control-min-block-size);
|
|
1086
|
+
block-size: var(--ui-control-min-block-size);
|
|
1081
1087
|
}
|
|
1082
|
-
.body[data-v-
|
|
1088
|
+
.body[data-v-05ac1756] {
|
|
1083
1089
|
flex: 1 1 auto;
|
|
1084
1090
|
min-block-size: 0;
|
|
1085
1091
|
overflow: auto;
|
|
1086
1092
|
overscroll-behavior: contain;
|
|
1087
1093
|
padding: var(--ui-space-5);
|
|
1088
1094
|
}
|
|
1089
|
-
footer[data-v-
|
|
1095
|
+
footer[data-v-05ac1756] {
|
|
1090
1096
|
display: flex;
|
|
1091
1097
|
flex: none;
|
|
1092
1098
|
flex-wrap: wrap;
|
|
@@ -1095,72 +1101,85 @@ footer[data-v-e78fa426] {
|
|
|
1095
1101
|
padding: var(--ui-space-3) var(--ui-space-5);
|
|
1096
1102
|
border-block-start: 1px solid var(--ui-border-default);
|
|
1097
1103
|
}
|
|
1098
|
-
footer[data-v-
|
|
1104
|
+
footer[data-v-05ac1756]:empty {
|
|
1099
1105
|
display: none;
|
|
1100
1106
|
}
|
|
1101
|
-
@keyframes ui-dialog-enter-
|
|
1107
|
+
@keyframes ui-dialog-enter-05ac1756 {
|
|
1102
1108
|
from {
|
|
1103
1109
|
opacity: 0;
|
|
1104
1110
|
transform: scale(0.96);
|
|
1105
1111
|
}
|
|
1106
1112
|
}
|
|
1107
|
-
[data-component~="ui-dialog"][data-v-
|
|
1113
|
+
[data-component~="ui-dialog"][data-v-05ac1756]::backdrop {
|
|
1108
1114
|
background-color: transparent;
|
|
1109
1115
|
transition:
|
|
1110
1116
|
background-color var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
|
|
1111
1117
|
display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
|
|
1112
1118
|
overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
|
|
1113
1119
|
}
|
|
1114
|
-
[data-component~="ui-dialog"][open][data-v-
|
|
1120
|
+
[data-component~="ui-dialog"][open][data-v-05ac1756]::backdrop {
|
|
1115
1121
|
background-color: var(--ui-overlay-backdrop);
|
|
1116
|
-
animation: ui-dialog-backdrop-enter-
|
|
1122
|
+
animation: ui-dialog-backdrop-enter-05ac1756 var(--ui-dialog-duration, var(--ui-motion-base))
|
|
1117
1123
|
var(--ui-motion-ease);
|
|
1118
1124
|
}
|
|
1119
|
-
@keyframes ui-dialog-backdrop-enter-
|
|
1125
|
+
@keyframes ui-dialog-backdrop-enter-05ac1756 {
|
|
1120
1126
|
from {
|
|
1121
1127
|
background-color: transparent;
|
|
1122
1128
|
}
|
|
1123
1129
|
}
|
|
1124
1130
|
|
|
1131
|
+
/* Density resolves into the summary row's own values; the public tokens still override them. */
|
|
1132
|
+
[data-component~="ui-disclosure"][data-v-d9a330a8] {
|
|
1133
|
+
--_trigger-min-block-size: var(--ui-control-size);
|
|
1134
|
+
--_trigger-padding-block: var(--ui-space-2);
|
|
1135
|
+
--_trigger-padding-inline: var(--ui-space-3);
|
|
1136
|
+
}
|
|
1137
|
+
[data-component~="ui-disclosure"][data-ui-disclosure-state~="density=compact"][data-v-d9a330a8] {
|
|
1138
|
+
--_trigger-min-block-size: var(--ui-control-size-sm);
|
|
1139
|
+
--_trigger-padding-block: var(--ui-space-1);
|
|
1140
|
+
--_trigger-padding-inline: var(--ui-space-2);
|
|
1141
|
+
}
|
|
1142
|
+
|
|
1125
1143
|
/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
|
|
1126
1144
|
* select or combobox. Stacked disclosures share their dividers. */
|
|
1127
|
-
[data-component~="ui-disclosure"][data-v-
|
|
1145
|
+
[data-component~="ui-disclosure"][data-v-d9a330a8] {
|
|
1128
1146
|
display: block;
|
|
1129
1147
|
inline-size: 100%;
|
|
1130
1148
|
overflow: clip;
|
|
1131
1149
|
border-block-end: 1px solid var(--ui-border-default);
|
|
1132
1150
|
color: var(--ui-text-primary);
|
|
1133
1151
|
}
|
|
1134
|
-
.trigger[data-v-
|
|
1152
|
+
.trigger[data-v-d9a330a8] {
|
|
1135
1153
|
display: grid;
|
|
1136
1154
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
1137
1155
|
gap: var(--ui-space-3);
|
|
1138
1156
|
align-items: center;
|
|
1139
1157
|
inline-size: 100%;
|
|
1140
|
-
min-block-size:
|
|
1141
|
-
padding: var(--ui-
|
|
1158
|
+
min-block-size: var(--ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
|
|
1159
|
+
padding: var(--ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
|
|
1160
|
+
var(--ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
|
|
1142
1161
|
border: 0;
|
|
1143
1162
|
background: transparent;
|
|
1144
1163
|
color: inherit;
|
|
1145
1164
|
font: inherit;
|
|
1146
|
-
font-weight: var(--ui-font-semibold
|
|
1165
|
+
font-weight: var(--ui-font-semibold);
|
|
1147
1166
|
text-align: start;
|
|
1148
1167
|
cursor: pointer;
|
|
1149
|
-
border-radius: var(--ui-radius-
|
|
1168
|
+
border-radius: var(--ui-radius-sm);
|
|
1150
1169
|
transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1151
1170
|
}
|
|
1152
|
-
.trigger[data-v-
|
|
1171
|
+
.trigger[data-v-d9a330a8]:hover:not(:disabled) {
|
|
1153
1172
|
background: var(--ui-surface-muted);
|
|
1154
1173
|
}
|
|
1155
|
-
.trigger[data-v-
|
|
1174
|
+
.trigger[data-v-d9a330a8]:focus-visible {
|
|
1156
1175
|
outline: none;
|
|
1157
1176
|
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
|
|
1158
1177
|
}
|
|
1159
|
-
.trigger[data-v-
|
|
1178
|
+
.trigger[data-v-d9a330a8]:disabled {
|
|
1160
1179
|
color: var(--ui-text-muted);
|
|
1161
1180
|
cursor: not-allowed;
|
|
1162
1181
|
}
|
|
1163
|
-
.chevron[data-v-
|
|
1182
|
+
.chevron[data-v-d9a330a8] {
|
|
1164
1183
|
inline-size: 0.5rem;
|
|
1165
1184
|
block-size: 0.5rem;
|
|
1166
1185
|
border-inline-end: 2px solid currentColor;
|
|
@@ -1168,39 +1187,39 @@ from {
|
|
|
1168
1187
|
transform: rotate(45deg) translate(-1px, -1px);
|
|
1169
1188
|
transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1170
1189
|
}
|
|
1171
|
-
.panel[data-v-
|
|
1190
|
+
.panel[data-v-d9a330a8] {
|
|
1172
1191
|
display: grid;
|
|
1173
1192
|
grid-template-rows: 0fr;
|
|
1174
1193
|
transition: grid-template-rows var(--ui-motion-fast)
|
|
1175
1194
|
var(--ui-motion-ease-out, var(--ui-motion-ease));
|
|
1176
1195
|
}
|
|
1177
|
-
.panel-inner[data-v-
|
|
1196
|
+
.panel-inner[data-v-d9a330a8] {
|
|
1178
1197
|
min-block-size: 0;
|
|
1179
1198
|
overflow: hidden;
|
|
1180
1199
|
padding-inline: var(--ui-space-3);
|
|
1181
1200
|
}
|
|
1182
|
-
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel[data-v-
|
|
1201
|
+
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel[data-v-d9a330a8] {
|
|
1183
1202
|
grid-template-rows: 1fr;
|
|
1184
1203
|
}
|
|
1185
|
-
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner[data-v-
|
|
1204
|
+
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner[data-v-d9a330a8] {
|
|
1186
1205
|
padding-block: 0 var(--ui-space-3);
|
|
1187
1206
|
}
|
|
1188
|
-
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .chevron[data-v-
|
|
1207
|
+
[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .chevron[data-v-d9a330a8] {
|
|
1189
1208
|
transform: rotate(225deg) translate(-1px, -1px);
|
|
1190
1209
|
}
|
|
1191
1210
|
@media (prefers-reduced-motion: reduce) {
|
|
1192
|
-
.panel[data-v-
|
|
1193
|
-
.chevron[data-v-
|
|
1211
|
+
.panel[data-v-d9a330a8],
|
|
1212
|
+
.chevron[data-v-d9a330a8] {
|
|
1194
1213
|
transition: none;
|
|
1195
1214
|
}
|
|
1196
1215
|
}
|
|
1197
1216
|
|
|
1198
1217
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
1199
|
-
[data-component~="ui-disclosure"][hidden][data-v-
|
|
1218
|
+
[data-component~="ui-disclosure"][hidden][data-v-d9a330a8] {
|
|
1200
1219
|
display: none;
|
|
1201
1220
|
}
|
|
1202
1221
|
|
|
1203
|
-
[data-component~="ui-editable"][data-v-
|
|
1222
|
+
[data-component~="ui-editable"][data-v-3707d050] {
|
|
1204
1223
|
display: flex;
|
|
1205
1224
|
flex-wrap: wrap;
|
|
1206
1225
|
align-items: center;
|
|
@@ -1211,20 +1230,20 @@ from {
|
|
|
1211
1230
|
|
|
1212
1231
|
/* The value and the input share one grid cell with identical box metrics, so switching between
|
|
1213
1232
|
* display and edit never changes the control's size or moves the text. */
|
|
1214
|
-
.field[data-v-
|
|
1233
|
+
.field[data-v-3707d050] {
|
|
1215
1234
|
display: inline-grid;
|
|
1216
1235
|
min-inline-size: 8rem;
|
|
1217
1236
|
max-inline-size: 100%;
|
|
1218
1237
|
}
|
|
1219
|
-
.preview[data-v-
|
|
1220
|
-
.input[data-v-
|
|
1238
|
+
.preview[data-v-3707d050],
|
|
1239
|
+
.input[data-v-3707d050] {
|
|
1221
1240
|
grid-area: 1 / 1;
|
|
1222
1241
|
box-sizing: border-box;
|
|
1223
|
-
min-block-size: var(--ui-control-size-sm
|
|
1242
|
+
min-block-size: var(--ui-control-size-sm);
|
|
1224
1243
|
margin: 0;
|
|
1225
1244
|
padding: var(--ui-space-1) var(--ui-space-2);
|
|
1226
1245
|
border: 1px solid transparent;
|
|
1227
|
-
border-radius: var(--ui-radius-
|
|
1246
|
+
border-radius: var(--ui-radius-md);
|
|
1228
1247
|
font: inherit;
|
|
1229
1248
|
line-height: var(--ui-line-height-md);
|
|
1230
1249
|
color: inherit;
|
|
@@ -1233,7 +1252,7 @@ from {
|
|
|
1233
1252
|
border-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
1234
1253
|
box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1235
1254
|
}
|
|
1236
|
-
.preview[data-v-
|
|
1255
|
+
.preview[data-v-3707d050] {
|
|
1237
1256
|
display: inline-flex;
|
|
1238
1257
|
gap: var(--ui-space-2);
|
|
1239
1258
|
align-items: center;
|
|
@@ -1241,233 +1260,233 @@ from {
|
|
|
1241
1260
|
text-align: start;
|
|
1242
1261
|
cursor: pointer;
|
|
1243
1262
|
}
|
|
1244
|
-
.preview[data-v-
|
|
1263
|
+
.preview[data-v-3707d050]:hover:not(:disabled) {
|
|
1245
1264
|
background: var(--ui-surface-muted);
|
|
1246
1265
|
}
|
|
1247
|
-
.preview[data-v-
|
|
1266
|
+
.preview[data-v-3707d050]:focus-visible {
|
|
1248
1267
|
outline: none;
|
|
1249
1268
|
box-shadow: var(--ui-focus-halo);
|
|
1250
1269
|
}
|
|
1251
|
-
.hint[data-v-
|
|
1270
|
+
.hint[data-v-3707d050] {
|
|
1252
1271
|
color: var(--ui-text-secondary);
|
|
1253
1272
|
font-size: var(--ui-font-size-sm);
|
|
1254
1273
|
}
|
|
1255
1274
|
|
|
1256
1275
|
/* Contained so it takes the value's width instead of its own default input width. */
|
|
1257
|
-
.input[data-v-
|
|
1276
|
+
.input[data-v-3707d050] {
|
|
1258
1277
|
contain: inline-size;
|
|
1259
1278
|
inline-size: 100%;
|
|
1260
1279
|
min-inline-size: 0;
|
|
1261
1280
|
visibility: hidden;
|
|
1262
1281
|
background: var(--ui-control-surface, var(--ui-surface-elevated));
|
|
1263
1282
|
}
|
|
1264
|
-
.input[data-v-
|
|
1283
|
+
.input[data-v-3707d050]:focus {
|
|
1265
1284
|
outline: none;
|
|
1266
1285
|
border-color: var(--ui-control-focus, var(--ui-accent-solid));
|
|
1267
1286
|
box-shadow:
|
|
1268
1287
|
var(--ui-control-inset),
|
|
1269
1288
|
var(--ui-control-focus-halo-shadow);
|
|
1270
1289
|
}
|
|
1271
|
-
.input[data-v-
|
|
1290
|
+
.input[data-v-3707d050]::selection {
|
|
1272
1291
|
background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
|
|
1273
1292
|
}
|
|
1274
|
-
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .preview[data-v-
|
|
1293
|
+
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .preview[data-v-3707d050] {
|
|
1275
1294
|
visibility: hidden;
|
|
1276
1295
|
}
|
|
1277
|
-
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .input[data-v-
|
|
1296
|
+
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .input[data-v-3707d050] {
|
|
1278
1297
|
visibility: visible;
|
|
1279
1298
|
}
|
|
1280
|
-
.actions[data-v-
|
|
1299
|
+
.actions[data-v-3707d050] {
|
|
1281
1300
|
display: none;
|
|
1282
1301
|
gap: var(--ui-space-1);
|
|
1283
1302
|
}
|
|
1284
|
-
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .actions[data-v-
|
|
1303
|
+
[data-component~="ui-editable"][data-ui-editable-state~="internalEdit"] .actions[data-v-3707d050] {
|
|
1285
1304
|
display: inline-flex;
|
|
1286
1305
|
}
|
|
1287
|
-
.actions button[data-v-
|
|
1288
|
-
min-block-size: var(--ui-control-size-sm
|
|
1306
|
+
.actions button[data-v-3707d050] {
|
|
1307
|
+
min-block-size: var(--ui-control-size-sm);
|
|
1289
1308
|
padding: 0 var(--ui-space-3);
|
|
1290
1309
|
border: 1px solid var(--ui-border-strong);
|
|
1291
|
-
border-radius: var(--ui-radius-
|
|
1310
|
+
border-radius: var(--ui-radius-md);
|
|
1292
1311
|
background: var(--ui-surface-elevated);
|
|
1293
|
-
background-image: var(--ui-raised-highlight
|
|
1294
|
-
box-shadow: var(--ui-raised
|
|
1312
|
+
background-image: var(--ui-raised-highlight);
|
|
1313
|
+
box-shadow: var(--ui-raised);
|
|
1295
1314
|
color: inherit;
|
|
1296
1315
|
font: inherit;
|
|
1297
1316
|
font-size: var(--ui-font-size-sm);
|
|
1298
1317
|
cursor: pointer;
|
|
1299
1318
|
}
|
|
1300
|
-
.actions .save[data-v-
|
|
1319
|
+
.actions .save[data-v-3707d050] {
|
|
1301
1320
|
border-color: var(--ui-accent-solid);
|
|
1302
1321
|
background: var(--ui-accent-solid);
|
|
1303
1322
|
color: var(--ui-text-on-accent);
|
|
1304
1323
|
}
|
|
1305
|
-
.actions button[data-v-
|
|
1324
|
+
.actions button[data-v-3707d050]:focus-visible {
|
|
1306
1325
|
outline: none;
|
|
1307
1326
|
box-shadow: var(--ui-focus-halo);
|
|
1308
1327
|
}
|
|
1309
|
-
[data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview[data-v-
|
|
1328
|
+
[data-component~="ui-editable"][data-ui-editable-state~="disabled"] .preview[data-v-3707d050] {
|
|
1310
1329
|
color: var(--ui-text-muted);
|
|
1311
1330
|
cursor: not-allowed;
|
|
1312
1331
|
}
|
|
1313
1332
|
|
|
1314
1333
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
1315
|
-
[data-component~="ui-editable"][hidden][data-v-
|
|
1334
|
+
[data-component~="ui-editable"][hidden][data-v-3707d050] {
|
|
1316
1335
|
display: none;
|
|
1317
1336
|
}
|
|
1318
1337
|
|
|
1319
|
-
[data-component~="ui-editor-insert-table-grid"][data-v-
|
|
1320
|
-
padding: var(--ui-space-3
|
|
1321
|
-
background: var(--ui-surface
|
|
1322
|
-
border: 1px solid var(--ui-border
|
|
1323
|
-
border-radius: var(--ui-radius-md
|
|
1338
|
+
[data-component~="ui-editor-insert-table-grid"][data-v-c4064690] {
|
|
1339
|
+
padding: var(--ui-space-3);
|
|
1340
|
+
background: var(--ui-surface);
|
|
1341
|
+
border: 1px solid var(--ui-border);
|
|
1342
|
+
border-radius: var(--ui-radius-md);
|
|
1324
1343
|
box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
|
|
1325
1344
|
}
|
|
1326
|
-
.hint[data-v-
|
|
1327
|
-
margin: 0 0 var(--ui-space-2
|
|
1328
|
-
font-size: var(--ui-
|
|
1329
|
-
color: var(--ui-text-muted
|
|
1345
|
+
.hint[data-v-c4064690] {
|
|
1346
|
+
margin: 0 0 var(--ui-space-2);
|
|
1347
|
+
font-size: var(--ui-font-size-sm);
|
|
1348
|
+
color: var(--ui-text-muted);
|
|
1330
1349
|
}
|
|
1331
|
-
.grid[data-v-
|
|
1350
|
+
.grid[data-v-c4064690] {
|
|
1332
1351
|
display: grid;
|
|
1333
1352
|
grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
|
|
1334
1353
|
grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
|
|
1335
1354
|
gap: 2px;
|
|
1336
|
-
margin-bottom: var(--ui-space-2
|
|
1355
|
+
margin-bottom: var(--ui-space-2);
|
|
1337
1356
|
}
|
|
1338
|
-
.cell[data-v-
|
|
1357
|
+
.cell[data-v-c4064690] {
|
|
1339
1358
|
width: 1.25rem;
|
|
1340
1359
|
height: 1.25rem;
|
|
1341
1360
|
padding: 0;
|
|
1342
|
-
border: 1px solid var(--ui-border
|
|
1361
|
+
border: 1px solid var(--ui-border);
|
|
1343
1362
|
border-radius: 2px;
|
|
1344
|
-
background: var(--ui-surface
|
|
1363
|
+
background: var(--ui-surface);
|
|
1345
1364
|
cursor: pointer;
|
|
1346
1365
|
}
|
|
1347
|
-
.cell.selected[data-v-
|
|
1348
|
-
background: var(--ui-accent-solid, var(--ui-accent
|
|
1349
|
-
border-color: var(--ui-accent-solid, var(--ui-accent
|
|
1366
|
+
.cell.selected[data-v-c4064690] {
|
|
1367
|
+
background: var(--ui-accent-solid, var(--ui-accent));
|
|
1368
|
+
border-color: var(--ui-accent-solid, var(--ui-accent));
|
|
1350
1369
|
}
|
|
1351
|
-
.header[data-v-
|
|
1370
|
+
.header[data-v-c4064690] {
|
|
1352
1371
|
display: block;
|
|
1353
|
-
margin-bottom: var(--ui-space-2
|
|
1354
|
-
font-size: var(--ui-
|
|
1372
|
+
margin-bottom: var(--ui-space-2);
|
|
1373
|
+
font-size: var(--ui-font-size-sm);
|
|
1355
1374
|
cursor: pointer;
|
|
1356
1375
|
}
|
|
1357
|
-
[data-component~="ui-editor-insert-table-grid"] .insert[data-v-
|
|
1376
|
+
[data-component~="ui-editor-insert-table-grid"] .insert[data-v-c4064690] {
|
|
1358
1377
|
width: 100%;
|
|
1359
|
-
padding: var(--ui-space-2
|
|
1360
|
-
border: 1px solid var(--ui-border
|
|
1361
|
-
border-radius: var(--ui-radius-sm
|
|
1362
|
-
background: var(--ui-accent-solid, var(--ui-accent
|
|
1363
|
-
color: var(--ui-accent-contrast
|
|
1364
|
-
font-size: var(--ui-
|
|
1378
|
+
padding: var(--ui-space-2) var(--ui-space-3);
|
|
1379
|
+
border: 1px solid var(--ui-border);
|
|
1380
|
+
border-radius: var(--ui-radius-sm);
|
|
1381
|
+
background: var(--ui-accent-solid, var(--ui-accent));
|
|
1382
|
+
color: var(--ui-accent-contrast);
|
|
1383
|
+
font-size: var(--ui-font-size-sm);
|
|
1365
1384
|
cursor: pointer;
|
|
1366
1385
|
}
|
|
1367
|
-
[data-component~="ui-editor-insert-table-grid"] .insert[data-v-
|
|
1386
|
+
[data-component~="ui-editor-insert-table-grid"] .insert[data-v-c4064690]:hover {
|
|
1368
1387
|
filter: brightness(1.05);
|
|
1369
1388
|
}
|
|
1370
|
-
[data-component~="ui-editor-insert-table-grid"][hidden][data-v-
|
|
1389
|
+
[data-component~="ui-editor-insert-table-grid"][hidden][data-v-c4064690] {
|
|
1371
1390
|
display: none;
|
|
1372
1391
|
}
|
|
1373
1392
|
|
|
1374
|
-
[data-component~="ui-editor-mention-menu"][data-v-
|
|
1393
|
+
[data-component~="ui-editor-mention-menu"][data-v-2abe407e] {
|
|
1375
1394
|
user-select: none;
|
|
1376
1395
|
}
|
|
1377
|
-
[data-component~="ui-editor-mention-menu"][data-v-
|
|
1396
|
+
[data-component~="ui-editor-mention-menu"][data-v-2abe407e] {
|
|
1378
1397
|
display: flex;
|
|
1379
1398
|
overflow: hidden;
|
|
1380
1399
|
flex-direction: column;
|
|
1381
|
-
background: var(--ui-surface
|
|
1382
|
-
border: 1px solid var(--ui-border
|
|
1383
|
-
border-radius: var(--ui-radius-
|
|
1400
|
+
background: var(--ui-surface);
|
|
1401
|
+
border: 1px solid var(--ui-border);
|
|
1402
|
+
border-radius: var(--ui-radius-dialog);
|
|
1384
1403
|
box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
|
|
1385
1404
|
}
|
|
1386
|
-
.header[data-v-
|
|
1405
|
+
.header[data-v-2abe407e] {
|
|
1387
1406
|
display: flex;
|
|
1388
1407
|
align-items: center;
|
|
1389
1408
|
justify-content: space-between;
|
|
1390
|
-
gap: var(--ui-space-3
|
|
1391
|
-
padding: var(--ui-space-2
|
|
1392
|
-
color: var(--ui-text-secondary
|
|
1393
|
-
border-bottom: 1px solid var(--ui-border
|
|
1394
|
-
font-size: var(--ui-font-size-xs
|
|
1395
|
-
font-weight: var(--ui-font-semibold
|
|
1409
|
+
gap: var(--ui-space-3);
|
|
1410
|
+
padding: var(--ui-space-2) var(--ui-space-3);
|
|
1411
|
+
color: var(--ui-text-secondary);
|
|
1412
|
+
border-bottom: 1px solid var(--ui-border);
|
|
1413
|
+
font-size: var(--ui-font-size-xs);
|
|
1414
|
+
font-weight: var(--ui-font-semibold);
|
|
1396
1415
|
}
|
|
1397
|
-
.hint[data-v-
|
|
1416
|
+
.hint[data-v-2abe407e] {
|
|
1398
1417
|
overflow: hidden;
|
|
1399
|
-
color: var(--ui-text-muted
|
|
1400
|
-
font-weight: var(--ui-font-normal
|
|
1418
|
+
color: var(--ui-text-muted);
|
|
1419
|
+
font-weight: var(--ui-font-normal);
|
|
1401
1420
|
text-overflow: ellipsis;
|
|
1402
1421
|
white-space: nowrap;
|
|
1403
1422
|
}
|
|
1404
|
-
.list[data-v-
|
|
1423
|
+
.list[data-v-2abe407e] {
|
|
1405
1424
|
max-height: 280px;
|
|
1406
|
-
padding: var(--ui-space-1
|
|
1425
|
+
padding: var(--ui-space-1) 0;
|
|
1407
1426
|
margin: 0;
|
|
1408
1427
|
overflow-y: auto;
|
|
1409
1428
|
overscroll-behavior: contain;
|
|
1410
1429
|
list-style: none;
|
|
1411
1430
|
}
|
|
1412
|
-
.item[data-v-
|
|
1431
|
+
.item[data-v-2abe407e] {
|
|
1413
1432
|
display: flex;
|
|
1414
1433
|
align-items: center;
|
|
1415
1434
|
min-height: 44px;
|
|
1416
|
-
padding: var(--ui-space-
|
|
1417
|
-
gap: var(--ui-space-3
|
|
1435
|
+
padding: var(--ui-space-2) var(--ui-space-3);
|
|
1436
|
+
gap: var(--ui-space-3);
|
|
1418
1437
|
cursor: pointer;
|
|
1419
1438
|
}
|
|
1420
|
-
.item.active[data-v-
|
|
1439
|
+
.item.active[data-v-2abe407e] {
|
|
1421
1440
|
background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
|
|
1422
1441
|
}
|
|
1423
|
-
.avatar[data-v-
|
|
1442
|
+
.avatar[data-v-2abe407e] {
|
|
1424
1443
|
display: inline-flex;
|
|
1425
1444
|
align-items: center;
|
|
1426
1445
|
justify-content: center;
|
|
1427
1446
|
width: 32px;
|
|
1428
1447
|
height: 32px;
|
|
1429
1448
|
flex: 0 0 auto;
|
|
1430
|
-
color: var(--ui-accent-active, var(--ui-accent-solid
|
|
1431
|
-
background: var(--ui-accent-soft, var(--ui-accent-subtle
|
|
1449
|
+
color: var(--ui-accent-active, var(--ui-accent-solid));
|
|
1450
|
+
background: var(--ui-accent-soft, var(--ui-accent-subtle));
|
|
1432
1451
|
border-radius: 999px;
|
|
1433
|
-
font-size: var(--ui-font-size-xs
|
|
1434
|
-
font-weight: var(--ui-font-semibold
|
|
1452
|
+
font-size: var(--ui-font-size-xs);
|
|
1453
|
+
font-weight: var(--ui-font-semibold);
|
|
1435
1454
|
}
|
|
1436
|
-
.body[data-v-
|
|
1455
|
+
.body[data-v-2abe407e] {
|
|
1437
1456
|
display: flex;
|
|
1438
1457
|
min-width: 0;
|
|
1439
1458
|
flex-direction: column;
|
|
1440
1459
|
}
|
|
1441
|
-
.label[data-v-
|
|
1442
|
-
.detail[data-v-
|
|
1460
|
+
.label[data-v-2abe407e],
|
|
1461
|
+
.detail[data-v-2abe407e] {
|
|
1443
1462
|
overflow: hidden;
|
|
1444
1463
|
text-overflow: ellipsis;
|
|
1445
1464
|
white-space: nowrap;
|
|
1446
1465
|
}
|
|
1447
|
-
.label[data-v-
|
|
1448
|
-
color: var(--ui-text-primary
|
|
1449
|
-
font-size: var(--ui-font-size-sm
|
|
1450
|
-
font-weight: var(--ui-font-medium
|
|
1466
|
+
.label[data-v-2abe407e] {
|
|
1467
|
+
color: var(--ui-text-primary);
|
|
1468
|
+
font-size: var(--ui-font-size-sm);
|
|
1469
|
+
font-weight: var(--ui-font-medium);
|
|
1451
1470
|
}
|
|
1452
|
-
.detail[data-v-
|
|
1453
|
-
.loading[data-v-
|
|
1454
|
-
color: var(--ui-text-muted
|
|
1455
|
-
font-size: var(--ui-font-size-xs
|
|
1471
|
+
.detail[data-v-2abe407e],
|
|
1472
|
+
.loading[data-v-2abe407e] {
|
|
1473
|
+
color: var(--ui-text-muted);
|
|
1474
|
+
font-size: var(--ui-font-size-xs);
|
|
1456
1475
|
}
|
|
1457
|
-
.loading[data-v-
|
|
1476
|
+
.loading[data-v-2abe407e] {
|
|
1458
1477
|
min-height: 44px;
|
|
1459
|
-
padding: var(--ui-space-3
|
|
1478
|
+
padding: var(--ui-space-3);
|
|
1460
1479
|
}
|
|
1461
1480
|
@media (max-width: 767px) {
|
|
1462
|
-
[data-component~="ui-editor-mention-menu"][data-v-
|
|
1481
|
+
[data-component~="ui-editor-mention-menu"][data-v-2abe407e] {
|
|
1463
1482
|
border-bottom: 0;
|
|
1464
|
-
border-radius: var(--ui-radius-
|
|
1483
|
+
border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
|
|
1465
1484
|
}
|
|
1466
|
-
.list[data-v-
|
|
1485
|
+
.list[data-v-2abe407e] {
|
|
1467
1486
|
max-height: calc(60dvh - 48px);
|
|
1468
1487
|
}
|
|
1469
1488
|
}
|
|
1470
|
-
[data-component~="ui-editor-mention-menu"][hidden][data-v-
|
|
1489
|
+
[data-component~="ui-editor-mention-menu"][hidden][data-v-2abe407e] {
|
|
1471
1490
|
display: none;
|
|
1472
1491
|
}
|
|
1473
1492
|
|
|
@@ -1488,159 +1507,159 @@ svg[data-v-b2b50d17] {
|
|
|
1488
1507
|
display: none;
|
|
1489
1508
|
}
|
|
1490
1509
|
|
|
1491
|
-
[data-component~="ui-editor-slash-menu"][data-v-
|
|
1510
|
+
[data-component~="ui-editor-slash-menu"][data-v-aeee1d4f] {
|
|
1492
1511
|
user-select: none;
|
|
1493
1512
|
}
|
|
1494
|
-
[data-component~="ui-editor-slash-menu"][data-v-
|
|
1495
|
-
background: var(--ui-surface
|
|
1496
|
-
border: 1px solid var(--ui-border
|
|
1497
|
-
border-radius: var(--ui-radius-
|
|
1513
|
+
[data-component~="ui-editor-slash-menu"][data-v-aeee1d4f] {
|
|
1514
|
+
background: var(--ui-surface);
|
|
1515
|
+
border: 1px solid var(--ui-border);
|
|
1516
|
+
border-radius: var(--ui-radius-dialog);
|
|
1498
1517
|
box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
|
|
1499
1518
|
overflow: hidden;
|
|
1500
1519
|
display: flex;
|
|
1501
1520
|
flex-direction: column;
|
|
1502
1521
|
}
|
|
1503
1522
|
@media (max-width: 767px) {
|
|
1504
|
-
[data-component~="ui-editor-slash-menu"][data-v-
|
|
1505
|
-
border-radius: var(--ui-radius-
|
|
1523
|
+
[data-component~="ui-editor-slash-menu"][data-v-aeee1d4f] {
|
|
1524
|
+
border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
|
|
1506
1525
|
border-bottom: none;
|
|
1507
1526
|
}
|
|
1508
1527
|
}
|
|
1509
|
-
.header[data-v-
|
|
1528
|
+
.header[data-v-aeee1d4f] {
|
|
1510
1529
|
display: none;
|
|
1511
1530
|
align-items: center;
|
|
1512
|
-
gap: var(--ui-space-2
|
|
1513
|
-
padding: var(--ui-space-3
|
|
1514
|
-
border-bottom: 1px solid var(--ui-border
|
|
1515
|
-
font-size: var(--ui-font-size-xs
|
|
1516
|
-
color: var(--ui-text-muted
|
|
1517
|
-
font-weight: var(--ui-font-semibold
|
|
1531
|
+
gap: var(--ui-space-2);
|
|
1532
|
+
padding: var(--ui-space-3) var(--ui-space-4);
|
|
1533
|
+
border-bottom: 1px solid var(--ui-border);
|
|
1534
|
+
font-size: var(--ui-font-size-xs);
|
|
1535
|
+
color: var(--ui-text-muted);
|
|
1536
|
+
font-weight: var(--ui-font-semibold);
|
|
1518
1537
|
text-transform: uppercase;
|
|
1519
1538
|
letter-spacing: 0.05em;
|
|
1520
1539
|
}
|
|
1521
1540
|
@media (max-width: 767px) {
|
|
1522
|
-
.header[data-v-
|
|
1541
|
+
.header[data-v-aeee1d4f] {
|
|
1523
1542
|
display: flex;
|
|
1524
1543
|
}
|
|
1525
1544
|
}
|
|
1526
|
-
.header-query[data-v-
|
|
1527
|
-
background: var(--ui-surface-hover
|
|
1528
|
-
border-radius: var(--ui-radius-sm
|
|
1545
|
+
.header-query[data-v-aeee1d4f] {
|
|
1546
|
+
background: var(--ui-surface-hover);
|
|
1547
|
+
border-radius: var(--ui-radius-sm);
|
|
1529
1548
|
padding: 0.1em 0.4em;
|
|
1530
1549
|
font-family: var(--ui-font-family-mono, ui-monospace, monospace);
|
|
1531
|
-
font-size: var(--ui-font-size-xs
|
|
1532
|
-
color: var(--ui-accent
|
|
1550
|
+
font-size: var(--ui-font-size-xs);
|
|
1551
|
+
color: var(--ui-accent);
|
|
1533
1552
|
text-transform: none;
|
|
1534
1553
|
letter-spacing: 0;
|
|
1535
1554
|
}
|
|
1536
|
-
.list[data-v-
|
|
1555
|
+
.list[data-v-aeee1d4f] {
|
|
1537
1556
|
list-style: none;
|
|
1538
1557
|
margin: 0;
|
|
1539
|
-
padding: var(--ui-space-1
|
|
1558
|
+
padding: var(--ui-space-1) 0;
|
|
1540
1559
|
overflow-y: auto;
|
|
1541
1560
|
max-height: 280px;
|
|
1542
1561
|
overscroll-behavior: contain;
|
|
1543
1562
|
}
|
|
1544
1563
|
@media (max-width: 767px) {
|
|
1545
|
-
.list[data-v-
|
|
1564
|
+
.list[data-v-aeee1d4f] {
|
|
1546
1565
|
max-height: calc(60dvh - 80px);
|
|
1547
|
-
padding: var(--ui-space-1
|
|
1566
|
+
padding: var(--ui-space-1) 0 var(--ui-space-2);
|
|
1548
1567
|
}
|
|
1549
1568
|
}
|
|
1550
|
-
.item[data-v-
|
|
1569
|
+
.item[data-v-aeee1d4f] {
|
|
1551
1570
|
display: flex;
|
|
1552
1571
|
align-items: center;
|
|
1553
|
-
gap: var(--ui-space-3
|
|
1554
|
-
padding: var(--ui-space-2
|
|
1572
|
+
gap: var(--ui-space-3);
|
|
1573
|
+
padding: var(--ui-space-2) var(--ui-space-3);
|
|
1555
1574
|
min-height: 44px;
|
|
1556
1575
|
cursor: pointer;
|
|
1557
1576
|
transition: background-color 120ms ease;
|
|
1558
1577
|
}
|
|
1559
|
-
.item.active[data-v-
|
|
1578
|
+
.item.active[data-v-aeee1d4f] {
|
|
1560
1579
|
background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
|
|
1561
1580
|
}
|
|
1562
|
-
.icon[data-v-
|
|
1581
|
+
.icon[data-v-aeee1d4f] {
|
|
1563
1582
|
display: flex;
|
|
1564
1583
|
align-items: center;
|
|
1565
1584
|
justify-content: center;
|
|
1566
1585
|
width: 32px;
|
|
1567
1586
|
height: 32px;
|
|
1568
|
-
background: var(--ui-surface-hover
|
|
1569
|
-
border: 1px solid var(--ui-border
|
|
1570
|
-
border-radius: var(--ui-radius-md
|
|
1571
|
-
font-size: var(--ui-font-size-sm
|
|
1572
|
-
font-weight: var(--ui-font-bold
|
|
1573
|
-
color: var(--ui-text-secondary
|
|
1587
|
+
background: var(--ui-surface-hover);
|
|
1588
|
+
border: 1px solid var(--ui-border);
|
|
1589
|
+
border-radius: var(--ui-radius-md);
|
|
1590
|
+
font-size: var(--ui-font-size-sm);
|
|
1591
|
+
font-weight: var(--ui-font-bold);
|
|
1592
|
+
color: var(--ui-text-secondary);
|
|
1574
1593
|
font-family: var(--ui-font-family-mono, ui-monospace, monospace);
|
|
1575
1594
|
flex-shrink: 0;
|
|
1576
1595
|
line-height: 1;
|
|
1577
1596
|
}
|
|
1578
|
-
.item.active .icon[data-v-
|
|
1579
|
-
background: var(--ui-accent
|
|
1580
|
-
border-color: var(--ui-accent
|
|
1581
|
-
color: var(--ui-accent-contrast
|
|
1597
|
+
.item.active .icon[data-v-aeee1d4f] {
|
|
1598
|
+
background: var(--ui-accent);
|
|
1599
|
+
border-color: var(--ui-accent);
|
|
1600
|
+
color: var(--ui-accent-contrast);
|
|
1582
1601
|
}
|
|
1583
|
-
.icon[data-v-
|
|
1602
|
+
.icon[data-v-aeee1d4f] {
|
|
1584
1603
|
--ui-icon-size: 1rem;
|
|
1585
1604
|
--ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
|
|
1586
1605
|
}
|
|
1587
|
-
.body[data-v-
|
|
1606
|
+
.body[data-v-aeee1d4f] {
|
|
1588
1607
|
display: flex;
|
|
1589
1608
|
min-width: 0;
|
|
1590
1609
|
flex-direction: column;
|
|
1591
1610
|
gap: 1px;
|
|
1592
1611
|
}
|
|
1593
|
-
.title[data-v-
|
|
1594
|
-
font-size: var(--ui-font-size-sm
|
|
1595
|
-
font-weight: var(--ui-font-medium
|
|
1596
|
-
color: var(--ui-text
|
|
1612
|
+
.title[data-v-aeee1d4f] {
|
|
1613
|
+
font-size: var(--ui-font-size-sm);
|
|
1614
|
+
font-weight: var(--ui-font-medium);
|
|
1615
|
+
color: var(--ui-text);
|
|
1597
1616
|
white-space: nowrap;
|
|
1598
1617
|
overflow: hidden;
|
|
1599
1618
|
text-overflow: ellipsis;
|
|
1600
1619
|
}
|
|
1601
|
-
.description[data-v-
|
|
1602
|
-
font-size: var(--ui-font-size-xs
|
|
1603
|
-
color: var(--ui-text-muted
|
|
1620
|
+
.description[data-v-aeee1d4f] {
|
|
1621
|
+
font-size: var(--ui-font-size-xs);
|
|
1622
|
+
color: var(--ui-text-muted);
|
|
1604
1623
|
white-space: nowrap;
|
|
1605
1624
|
overflow: hidden;
|
|
1606
1625
|
text-overflow: ellipsis;
|
|
1607
1626
|
}
|
|
1608
|
-
.footer[data-v-
|
|
1627
|
+
.footer[data-v-aeee1d4f] {
|
|
1609
1628
|
display: none;
|
|
1610
|
-
padding: var(--ui-space-2
|
|
1611
|
-
border-top: 1px solid var(--ui-border
|
|
1612
|
-
font-size: var(--ui-font-size-xs
|
|
1613
|
-
color: var(--ui-text-muted
|
|
1629
|
+
padding: var(--ui-space-2) var(--ui-space-3);
|
|
1630
|
+
border-top: 1px solid var(--ui-border);
|
|
1631
|
+
font-size: var(--ui-font-size-xs);
|
|
1632
|
+
color: var(--ui-text-muted);
|
|
1614
1633
|
}
|
|
1615
1634
|
@media (min-width: 768px) {
|
|
1616
|
-
.footer[data-v-
|
|
1635
|
+
.footer[data-v-aeee1d4f] {
|
|
1617
1636
|
display: block;
|
|
1618
1637
|
}
|
|
1619
1638
|
}
|
|
1620
|
-
[data-component~="ui-editor-slash-menu"] kbd[data-v-
|
|
1639
|
+
[data-component~="ui-editor-slash-menu"] kbd[data-v-aeee1d4f] {
|
|
1621
1640
|
display: inline-flex;
|
|
1622
1641
|
align-items: center;
|
|
1623
1642
|
justify-content: center;
|
|
1624
1643
|
font-family: var(--ui-font-family-mono, ui-monospace, monospace);
|
|
1625
1644
|
font-size: 10px;
|
|
1626
|
-
background: var(--ui-surface-hover
|
|
1627
|
-
border: 1px solid var(--ui-border
|
|
1645
|
+
background: var(--ui-surface-hover);
|
|
1646
|
+
border: 1px solid var(--ui-border);
|
|
1628
1647
|
border-radius: 3px;
|
|
1629
1648
|
padding: 0 3px;
|
|
1630
|
-
color: var(--ui-text-secondary
|
|
1649
|
+
color: var(--ui-text-secondary);
|
|
1631
1650
|
}
|
|
1632
|
-
[data-component~="ui-editor-slash-menu"][hidden][data-v-
|
|
1651
|
+
[data-component~="ui-editor-slash-menu"][hidden][data-v-aeee1d4f] {
|
|
1633
1652
|
display: none;
|
|
1634
1653
|
}
|
|
1635
1654
|
|
|
1636
|
-
[data-component~="ui-editor-table-context-menu"][data-v-
|
|
1655
|
+
[data-component~="ui-editor-table-context-menu"][data-v-7c984caf] {
|
|
1637
1656
|
min-width: 14rem;
|
|
1638
1657
|
max-width: min(17rem, calc(100vw - 24px));
|
|
1639
1658
|
max-height: min(28rem, calc(100vh - 24px));
|
|
1640
|
-
padding: var(--ui-space-
|
|
1641
|
-
background: var(--ui-surface
|
|
1642
|
-
border: 1px solid var(--ui-border
|
|
1643
|
-
border-radius: var(--ui-radius-lg
|
|
1659
|
+
padding: var(--ui-space-2);
|
|
1660
|
+
background: var(--ui-surface);
|
|
1661
|
+
border: 1px solid var(--ui-border);
|
|
1662
|
+
border-radius: var(--ui-radius-lg);
|
|
1644
1663
|
box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
|
|
1645
1664
|
display: flex;
|
|
1646
1665
|
flex-direction: column;
|
|
@@ -1649,125 +1668,125 @@ svg[data-v-b2b50d17] {
|
|
|
1649
1668
|
overscroll-behavior: contain;
|
|
1650
1669
|
scrollbar-width: thin;
|
|
1651
1670
|
}
|
|
1652
|
-
.section[data-v-
|
|
1671
|
+
.section[data-v-7c984caf] {
|
|
1653
1672
|
display: flex;
|
|
1654
1673
|
flex-direction: column;
|
|
1655
1674
|
gap: 3px;
|
|
1656
1675
|
}
|
|
1657
|
-
[data-component~="ui-editor-table-context-menu"] button[data-v-
|
|
1676
|
+
[data-component~="ui-editor-table-context-menu"] button[data-v-7c984caf] {
|
|
1658
1677
|
display: flex;
|
|
1659
1678
|
align-items: center;
|
|
1660
|
-
gap: var(--ui-space-2
|
|
1679
|
+
gap: var(--ui-space-2);
|
|
1661
1680
|
width: 100%;
|
|
1662
1681
|
text-align: left;
|
|
1663
1682
|
min-height: 32px;
|
|
1664
|
-
padding: var(--ui-space-
|
|
1683
|
+
padding: var(--ui-space-2) var(--ui-space-2);
|
|
1665
1684
|
border: none;
|
|
1666
|
-
border-radius: var(--ui-radius-sm
|
|
1685
|
+
border-radius: var(--ui-radius-sm);
|
|
1667
1686
|
background: none;
|
|
1668
|
-
font-size: var(--ui-font-size-sm
|
|
1687
|
+
font-size: var(--ui-font-size-sm);
|
|
1669
1688
|
cursor: pointer;
|
|
1670
|
-
color: var(--ui-text
|
|
1689
|
+
color: var(--ui-text);
|
|
1671
1690
|
}
|
|
1672
|
-
[data-component~="ui-editor-table-context-menu"] button[data-v-
|
|
1691
|
+
[data-component~="ui-editor-table-context-menu"] button[data-v-7c984caf] {
|
|
1673
1692
|
--ui-icon-size: 1rem;
|
|
1674
1693
|
--ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
|
|
1675
1694
|
}
|
|
1676
|
-
[data-component~="ui-editor-table-context-menu"] button[data-v-
|
|
1677
|
-
background: var(--ui-surface-hover
|
|
1695
|
+
[data-component~="ui-editor-table-context-menu"] button[data-v-7c984caf]:hover:not(:disabled) {
|
|
1696
|
+
background: var(--ui-surface-hover);
|
|
1678
1697
|
}
|
|
1679
|
-
[data-component~="ui-editor-table-context-menu"] button.selected[data-v-
|
|
1698
|
+
[data-component~="ui-editor-table-context-menu"] button.selected[data-v-7c984caf] {
|
|
1680
1699
|
background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
|
|
1681
1700
|
}
|
|
1682
|
-
[data-component~="ui-editor-table-context-menu"] button.danger[data-v-
|
|
1683
|
-
color: var(--ui-danger
|
|
1701
|
+
[data-component~="ui-editor-table-context-menu"] button.danger[data-v-7c984caf] {
|
|
1702
|
+
color: var(--ui-danger);
|
|
1684
1703
|
}
|
|
1685
|
-
.swatches[data-v-
|
|
1704
|
+
.swatches[data-v-7c984caf] {
|
|
1686
1705
|
display: grid;
|
|
1687
1706
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1688
1707
|
gap: 3px;
|
|
1689
1708
|
}
|
|
1690
|
-
.swatch-button[data-v-
|
|
1709
|
+
.swatch-button[data-v-7c984caf] {
|
|
1691
1710
|
display: inline-flex;
|
|
1692
1711
|
align-items: center;
|
|
1693
|
-
gap: var(--ui-space-2
|
|
1712
|
+
gap: var(--ui-space-2);
|
|
1694
1713
|
}
|
|
1695
|
-
.swatch[data-v-
|
|
1714
|
+
.swatch[data-v-7c984caf] {
|
|
1696
1715
|
display: inline-flex;
|
|
1697
1716
|
width: 1rem;
|
|
1698
1717
|
height: 1rem;
|
|
1699
1718
|
border-radius: 999px;
|
|
1700
|
-
border: 1px solid var(--ui-border
|
|
1719
|
+
border: 1px solid var(--ui-border);
|
|
1701
1720
|
background: var(--ui-editor-table-context-swatch, #fff);
|
|
1702
1721
|
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
|
|
1703
1722
|
flex-shrink: 0;
|
|
1704
1723
|
}
|
|
1705
|
-
.swatch.default[data-v-
|
|
1724
|
+
.swatch.default[data-v-7c984caf] {
|
|
1706
1725
|
position: relative;
|
|
1707
1726
|
background:
|
|
1708
1727
|
linear-gradient(
|
|
1709
1728
|
135deg,
|
|
1710
1729
|
transparent calc(50% - 1px),
|
|
1711
|
-
var(--ui-text-muted
|
|
1712
|
-
var(--ui-text-muted
|
|
1730
|
+
var(--ui-text-muted) calc(50% - 1px),
|
|
1731
|
+
var(--ui-text-muted) calc(50% + 1px),
|
|
1713
1732
|
transparent calc(50% + 1px)
|
|
1714
1733
|
),
|
|
1715
|
-
var(--ui-surface
|
|
1734
|
+
var(--ui-surface);
|
|
1716
1735
|
}
|
|
1717
|
-
.swatch-label[data-v-
|
|
1736
|
+
.swatch-label[data-v-7c984caf] {
|
|
1718
1737
|
min-width: 0;
|
|
1719
1738
|
white-space: nowrap;
|
|
1720
1739
|
}
|
|
1721
|
-
.heading[data-v-
|
|
1722
|
-
padding: var(--ui-space-1
|
|
1740
|
+
.heading[data-v-7c984caf] {
|
|
1741
|
+
padding: var(--ui-space-1) var(--ui-space-2);
|
|
1723
1742
|
font-size: 0.6875rem;
|
|
1724
1743
|
font-weight: 700;
|
|
1725
1744
|
letter-spacing: 0.05em;
|
|
1726
1745
|
text-transform: uppercase;
|
|
1727
|
-
color: var(--ui-text-muted
|
|
1746
|
+
color: var(--ui-text-muted);
|
|
1728
1747
|
}
|
|
1729
|
-
.sep[data-v-
|
|
1748
|
+
.sep[data-v-7c984caf] {
|
|
1730
1749
|
height: 1px;
|
|
1731
|
-
background: var(--ui-border
|
|
1732
|
-
margin: var(--ui-space-1
|
|
1750
|
+
background: var(--ui-border);
|
|
1751
|
+
margin: var(--ui-space-1) 0;
|
|
1733
1752
|
}
|
|
1734
|
-
[data-component~="ui-editor-table-context-menu"][hidden][data-v-
|
|
1753
|
+
[data-component~="ui-editor-table-context-menu"][hidden][data-v-7c984caf] {
|
|
1735
1754
|
display: none;
|
|
1736
1755
|
}
|
|
1737
1756
|
|
|
1738
|
-
[data-component~="ui-editor-table-overlay"][data-v-
|
|
1757
|
+
[data-component~="ui-editor-table-overlay"][data-v-d5963c35] {
|
|
1739
1758
|
display: block;
|
|
1740
1759
|
width: 100%;
|
|
1741
1760
|
height: 100%;
|
|
1742
1761
|
overflow: visible;
|
|
1743
1762
|
pointer-events: none;
|
|
1744
1763
|
}
|
|
1745
|
-
[data-component~="ui-editor-table-overlay"][data-v-
|
|
1764
|
+
[data-component~="ui-editor-table-overlay"][data-v-d5963c35] {
|
|
1746
1765
|
position: relative;
|
|
1747
1766
|
width: 100%;
|
|
1748
1767
|
height: 100%;
|
|
1749
1768
|
overflow: visible;
|
|
1750
1769
|
pointer-events: none;
|
|
1751
1770
|
}
|
|
1752
|
-
.rows[data-v-
|
|
1753
|
-
.cols[data-v-
|
|
1771
|
+
.rows[data-v-d5963c35],
|
|
1772
|
+
.cols[data-v-d5963c35] {
|
|
1754
1773
|
pointer-events: none;
|
|
1755
1774
|
position: absolute;
|
|
1756
1775
|
}
|
|
1757
|
-
.rows[data-v-
|
|
1776
|
+
.rows[data-v-d5963c35] {
|
|
1758
1777
|
inset: 0;
|
|
1759
1778
|
width: 100%;
|
|
1760
1779
|
}
|
|
1761
|
-
.cols[data-v-
|
|
1780
|
+
.cols[data-v-d5963c35] {
|
|
1762
1781
|
inset: 0;
|
|
1763
1782
|
height: 100%;
|
|
1764
1783
|
}
|
|
1765
|
-
.control[data-v-
|
|
1784
|
+
.control[data-v-d5963c35] {
|
|
1766
1785
|
position: absolute;
|
|
1767
1786
|
z-index: 1;
|
|
1768
1787
|
pointer-events: none;
|
|
1769
1788
|
}
|
|
1770
|
-
.handle[data-v-
|
|
1789
|
+
.handle[data-v-d5963c35] {
|
|
1771
1790
|
position: absolute;
|
|
1772
1791
|
display: inline-flex;
|
|
1773
1792
|
align-items: center;
|
|
@@ -1775,10 +1794,10 @@ svg[data-v-b2b50d17] {
|
|
|
1775
1794
|
width: 24px;
|
|
1776
1795
|
height: 24px;
|
|
1777
1796
|
padding: 0;
|
|
1778
|
-
border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong
|
|
1779
|
-
border-radius: var(--ui-radius-round
|
|
1780
|
-
background: color-mix(in srgb, var(--ui-surface-elevated
|
|
1781
|
-
color: var(--ui-affordance-near-color, var(--ui-text-secondary
|
|
1797
|
+
border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong));
|
|
1798
|
+
border-radius: var(--ui-radius-round);
|
|
1799
|
+
background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
|
|
1800
|
+
color: var(--ui-affordance-near-color, var(--ui-text-secondary));
|
|
1782
1801
|
font: inherit;
|
|
1783
1802
|
font-size: 16px;
|
|
1784
1803
|
line-height: 1;
|
|
@@ -1786,129 +1805,124 @@ svg[data-v-b2b50d17] {
|
|
|
1786
1805
|
opacity: 0;
|
|
1787
1806
|
scale: 0.72;
|
|
1788
1807
|
transition:
|
|
1789
|
-
opacity var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1790
|
-
scale var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1791
|
-
color var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1792
|
-
background-color var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1793
|
-
var(--ui-motion
|
|
1794
|
-
border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms))
|
|
1795
|
-
var(--ui-motion-ease, ease);
|
|
1808
|
+
opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
|
|
1809
|
+
scale var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
|
|
1810
|
+
color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
|
|
1811
|
+
background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
|
|
1812
|
+
border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
|
|
1796
1813
|
pointer-events: auto;
|
|
1797
1814
|
cursor: pointer;
|
|
1798
1815
|
}
|
|
1799
|
-
.handle[data-v-
|
|
1816
|
+
.handle[data-v-d5963c35] {
|
|
1800
1817
|
--ui-icon-size: 14px;
|
|
1801
|
-
--ui-icon-stroke-width:
|
|
1818
|
+
--ui-icon-stroke-width: 2;
|
|
1802
1819
|
}
|
|
1803
|
-
.handle[data-ui-proximity="near"][data-v-
|
|
1804
|
-
.control.active .handle[data-v-
|
|
1805
|
-
.handle[data-v-
|
|
1820
|
+
.handle[data-ui-proximity="near"][data-v-d5963c35],
|
|
1821
|
+
.control.active .handle[data-v-d5963c35],
|
|
1822
|
+
.handle[data-v-d5963c35]:focus-visible {
|
|
1806
1823
|
opacity: 1;
|
|
1807
1824
|
scale: 1;
|
|
1808
1825
|
}
|
|
1809
|
-
.control.active .handle[data-v-
|
|
1810
|
-
.handle[data-v-
|
|
1811
|
-
border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid
|
|
1812
|
-
background: var(--ui-affordance-direct-color, var(--ui-accent-solid
|
|
1813
|
-
color: var(--ui-text-on-accent
|
|
1826
|
+
.control.active .handle[data-v-d5963c35],
|
|
1827
|
+
.handle[data-v-d5963c35]:focus-visible {
|
|
1828
|
+
border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid));
|
|
1829
|
+
background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
|
|
1830
|
+
color: var(--ui-text-on-accent);
|
|
1814
1831
|
box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
|
|
1815
1832
|
}
|
|
1816
|
-
.handle[data-v-
|
|
1817
|
-
.selector[data-v-
|
|
1818
|
-
.cell-menu[data-v-
|
|
1819
|
-
outline: 2px solid var(--ui-focus-ring
|
|
1833
|
+
.handle[data-v-d5963c35]:focus-visible,
|
|
1834
|
+
.selector[data-v-d5963c35]:focus-visible,
|
|
1835
|
+
.cell-menu[data-v-d5963c35]:focus-visible {
|
|
1836
|
+
outline: 2px solid var(--ui-focus-ring);
|
|
1820
1837
|
outline-offset: 2px;
|
|
1821
1838
|
}
|
|
1822
|
-
.control.row[data-v-
|
|
1839
|
+
.control.row[data-v-d5963c35] {
|
|
1823
1840
|
left: 0;
|
|
1824
1841
|
width: 100%;
|
|
1825
1842
|
height: 0;
|
|
1826
1843
|
}
|
|
1827
|
-
.control.row .handle[data-v-
|
|
1844
|
+
.control.row .handle[data-v-d5963c35] {
|
|
1828
1845
|
top: -12px;
|
|
1829
1846
|
left: -30px;
|
|
1830
1847
|
}
|
|
1831
|
-
.control.col[data-v-
|
|
1848
|
+
.control.col[data-v-d5963c35] {
|
|
1832
1849
|
top: 0;
|
|
1833
1850
|
width: 0;
|
|
1834
1851
|
height: 100%;
|
|
1835
1852
|
}
|
|
1836
|
-
.control.col .handle[data-v-
|
|
1853
|
+
.control.col .handle[data-v-d5963c35] {
|
|
1837
1854
|
top: -30px;
|
|
1838
1855
|
left: -12px;
|
|
1839
1856
|
}
|
|
1840
|
-
.line[data-v-
|
|
1857
|
+
.line[data-v-d5963c35] {
|
|
1841
1858
|
position: absolute;
|
|
1842
|
-
background: var(--ui-affordance-direct-color, var(--ui-accent-solid
|
|
1859
|
+
background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
|
|
1843
1860
|
opacity: 0;
|
|
1844
|
-
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1845
|
-
var(--ui-motion-ease, ease);
|
|
1861
|
+
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
|
|
1846
1862
|
}
|
|
1847
|
-
.control.row .line[data-v-
|
|
1863
|
+
.control.row .line[data-v-d5963c35] {
|
|
1848
1864
|
inset: -1px 0 auto;
|
|
1849
1865
|
height: 2px;
|
|
1850
1866
|
}
|
|
1851
|
-
.control.col .line[data-v-
|
|
1867
|
+
.control.col .line[data-v-d5963c35] {
|
|
1852
1868
|
inset: 0 auto 0 -1px;
|
|
1853
1869
|
width: 2px;
|
|
1854
1870
|
}
|
|
1855
|
-
.control.active .line[data-v-
|
|
1871
|
+
.control.active .line[data-v-d5963c35] {
|
|
1856
1872
|
opacity: 0.8;
|
|
1857
1873
|
}
|
|
1858
|
-
.guide[data-v-
|
|
1874
|
+
.guide[data-v-d5963c35] {
|
|
1859
1875
|
position: absolute;
|
|
1860
|
-
width: var(--ui-affordance-guide-size
|
|
1861
|
-
height: var(--ui-affordance-guide-size
|
|
1862
|
-
border-radius: var(--ui-radius-round
|
|
1863
|
-
background: var(--ui-affordance-guide-color, var(--ui-border-strong
|
|
1864
|
-
opacity: var(--ui-affordance-guide-opacity
|
|
1865
|
-
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1866
|
-
var(--ui-motion-ease, ease);
|
|
1876
|
+
width: var(--ui-affordance-guide-size);
|
|
1877
|
+
height: var(--ui-affordance-guide-size);
|
|
1878
|
+
border-radius: var(--ui-radius-round);
|
|
1879
|
+
background: var(--ui-affordance-guide-color, var(--ui-border-strong));
|
|
1880
|
+
opacity: var(--ui-affordance-guide-opacity);
|
|
1881
|
+
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
|
|
1867
1882
|
}
|
|
1868
|
-
.control.row .guide[data-v-
|
|
1883
|
+
.control.row .guide[data-v-d5963c35] {
|
|
1869
1884
|
left: -10px;
|
|
1870
1885
|
top: -2px;
|
|
1871
1886
|
}
|
|
1872
|
-
.control.col .guide[data-v-
|
|
1887
|
+
.control.col .guide[data-v-d5963c35] {
|
|
1873
1888
|
left: -2px;
|
|
1874
1889
|
top: -10px;
|
|
1875
1890
|
}
|
|
1876
|
-
.control:has(.handle[data-ui-proximity="near"]) .guide[data-v-
|
|
1877
|
-
.control.active .guide[data-v-
|
|
1891
|
+
.control:has(.handle[data-ui-proximity="near"]) .guide[data-v-d5963c35],
|
|
1892
|
+
.control.active .guide[data-v-d5963c35] {
|
|
1878
1893
|
opacity: 0;
|
|
1879
1894
|
}
|
|
1880
|
-
.tooltip[data-v-
|
|
1895
|
+
.tooltip[data-v-d5963c35] {
|
|
1881
1896
|
position: absolute;
|
|
1882
1897
|
z-index: 2;
|
|
1883
1898
|
top: calc(100% + 6px);
|
|
1884
1899
|
left: 50%;
|
|
1885
1900
|
width: max-content;
|
|
1886
1901
|
max-width: 14rem;
|
|
1887
|
-
padding: var(--ui-space-1
|
|
1888
|
-
border-radius: var(--ui-radius-
|
|
1889
|
-
background: var(--ui-text-primary
|
|
1890
|
-
color: var(--ui-surface-elevated
|
|
1891
|
-
font-size: var(--ui-font-size-xs
|
|
1892
|
-
font-weight: var(--ui-font-medium
|
|
1893
|
-
line-height: var(--ui-line-height-md
|
|
1902
|
+
padding: var(--ui-space-1) var(--ui-space-2);
|
|
1903
|
+
border-radius: var(--ui-radius-sm);
|
|
1904
|
+
background: var(--ui-text-primary);
|
|
1905
|
+
color: var(--ui-surface-elevated);
|
|
1906
|
+
font-size: var(--ui-font-size-xs);
|
|
1907
|
+
font-weight: var(--ui-font-medium);
|
|
1908
|
+
line-height: var(--ui-line-height-md);
|
|
1894
1909
|
opacity: 0;
|
|
1895
1910
|
transform: translateX(-50%);
|
|
1896
|
-
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1897
|
-
var(--ui-motion-ease, ease);
|
|
1911
|
+
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
|
|
1898
1912
|
pointer-events: none;
|
|
1899
1913
|
}
|
|
1900
|
-
.control.row .tooltip[data-v-
|
|
1914
|
+
.control.row .tooltip[data-v-d5963c35] {
|
|
1901
1915
|
top: 50%;
|
|
1902
1916
|
left: auto;
|
|
1903
1917
|
right: calc(100% + 8px);
|
|
1904
1918
|
transform: translateY(-50%);
|
|
1905
1919
|
}
|
|
1906
|
-
.control.active .tooltip[data-v-
|
|
1907
|
-
.handle:focus-visible .tooltip[data-v-
|
|
1920
|
+
.control.active .tooltip[data-v-d5963c35],
|
|
1921
|
+
.handle:focus-visible .tooltip[data-v-d5963c35] {
|
|
1908
1922
|
opacity: 1;
|
|
1909
1923
|
}
|
|
1910
|
-
.selector[data-v-
|
|
1911
|
-
.cell-menu[data-v-
|
|
1924
|
+
.selector[data-v-d5963c35],
|
|
1925
|
+
.cell-menu[data-v-d5963c35] {
|
|
1912
1926
|
position: absolute;
|
|
1913
1927
|
z-index: 2;
|
|
1914
1928
|
display: inline-flex;
|
|
@@ -1917,105 +1931,101 @@ svg[data-v-b2b50d17] {
|
|
|
1917
1931
|
padding: 0;
|
|
1918
1932
|
border: 1px solid transparent;
|
|
1919
1933
|
background: transparent;
|
|
1920
|
-
color: var(--ui-text-secondary
|
|
1934
|
+
color: var(--ui-text-secondary);
|
|
1921
1935
|
box-shadow: none;
|
|
1922
1936
|
pointer-events: auto;
|
|
1923
1937
|
cursor: pointer;
|
|
1924
1938
|
transition:
|
|
1925
|
-
color var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1926
|
-
background-color var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1927
|
-
var(--ui-motion
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
.cell-menu[data-v-a31eb11f]:hover {
|
|
1935
|
-
background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted, #f3f4f6));
|
|
1936
|
-
color: var(--ui-icon-button-hover-color, var(--ui-text-primary, #1a1a1a));
|
|
1939
|
+
color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
|
|
1940
|
+
background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
|
|
1941
|
+
border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
|
|
1942
|
+
box-shadow var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
|
|
1943
|
+
}
|
|
1944
|
+
.selector[data-v-d5963c35]:hover,
|
|
1945
|
+
.cell-menu[data-v-d5963c35]:hover {
|
|
1946
|
+
background: var(--ui-icon-button-hover-surface, var(--ui-surface-muted));
|
|
1947
|
+
color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
|
|
1937
1948
|
box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
|
|
1938
1949
|
}
|
|
1939
|
-
.selector[data-v-
|
|
1940
|
-
border-radius: var(--ui-radius-round
|
|
1950
|
+
.selector[data-v-d5963c35] {
|
|
1951
|
+
border-radius: var(--ui-radius-round);
|
|
1941
1952
|
}
|
|
1942
|
-
.selector[data-v-
|
|
1953
|
+
.selector[data-v-d5963c35]::before {
|
|
1943
1954
|
content: "";
|
|
1944
1955
|
position: absolute;
|
|
1945
1956
|
inset: 50% auto auto 50%;
|
|
1946
|
-
border-radius: var(--ui-radius-round
|
|
1947
|
-
background: var(--ui-affordance-guide-color, var(--ui-border-strong
|
|
1948
|
-
opacity: var(--ui-affordance-guide-opacity
|
|
1957
|
+
border-radius: var(--ui-radius-round);
|
|
1958
|
+
background: var(--ui-affordance-guide-color, var(--ui-border-strong));
|
|
1959
|
+
opacity: var(--ui-affordance-guide-opacity);
|
|
1949
1960
|
transform: translate(-50%, -50%);
|
|
1950
|
-
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1951
|
-
var(--ui-motion-ease, ease);
|
|
1961
|
+
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
|
|
1952
1962
|
pointer-events: none;
|
|
1953
1963
|
}
|
|
1954
|
-
.selector .glyph[data-v-
|
|
1964
|
+
.selector .glyph[data-v-d5963c35] {
|
|
1955
1965
|
display: block;
|
|
1956
1966
|
width: 14px;
|
|
1957
1967
|
height: 14px;
|
|
1958
1968
|
--ui-icon-size: 14px;
|
|
1959
|
-
--ui-icon-stroke-width:
|
|
1969
|
+
--ui-icon-stroke-width: 2;
|
|
1960
1970
|
opacity: 0;
|
|
1961
1971
|
transform: scale(0.72);
|
|
1962
1972
|
transition:
|
|
1963
|
-
opacity var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1964
|
-
transform var(--ui-affordance-motion, var(--ui-motion-fast
|
|
1973
|
+
opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
|
|
1974
|
+
transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
|
|
1965
1975
|
}
|
|
1966
|
-
.selector[data-v-
|
|
1967
|
-
.selector[data-v-
|
|
1976
|
+
.selector[data-v-d5963c35]:hover::before,
|
|
1977
|
+
.selector[data-v-d5963c35]:focus-visible::before {
|
|
1968
1978
|
opacity: 0;
|
|
1969
1979
|
}
|
|
1970
|
-
.selector:hover .glyph[data-v-
|
|
1971
|
-
.selector:focus-visible .glyph[data-v-
|
|
1980
|
+
.selector:hover .glyph[data-v-d5963c35],
|
|
1981
|
+
.selector:focus-visible .glyph[data-v-d5963c35] {
|
|
1972
1982
|
opacity: 1;
|
|
1973
1983
|
transform: scale(1);
|
|
1974
1984
|
}
|
|
1975
|
-
.selector.row[data-v-
|
|
1985
|
+
.selector.row[data-v-d5963c35] {
|
|
1976
1986
|
left: -9px;
|
|
1977
1987
|
width: 18px;
|
|
1978
1988
|
height: 32px;
|
|
1979
1989
|
transform: translateY(-50%);
|
|
1980
1990
|
}
|
|
1981
|
-
.selector.row[data-v-
|
|
1991
|
+
.selector.row[data-v-d5963c35]::before {
|
|
1982
1992
|
width: 2px;
|
|
1983
1993
|
height: 16px;
|
|
1984
1994
|
}
|
|
1985
|
-
.selector.column[data-v-
|
|
1995
|
+
.selector.column[data-v-d5963c35] {
|
|
1986
1996
|
top: -9px;
|
|
1987
1997
|
width: 32px;
|
|
1988
1998
|
height: 18px;
|
|
1989
1999
|
transform: translateX(-50%);
|
|
1990
2000
|
}
|
|
1991
|
-
.selector.column[data-v-
|
|
2001
|
+
.selector.column[data-v-d5963c35]::before {
|
|
1992
2002
|
width: 16px;
|
|
1993
2003
|
height: 2px;
|
|
1994
2004
|
}
|
|
1995
2005
|
@media (hover: none), (pointer: coarse) {
|
|
1996
|
-
.selector[data-v-
|
|
2006
|
+
.selector[data-v-d5963c35]::before {
|
|
1997
2007
|
opacity: 0;
|
|
1998
2008
|
}
|
|
1999
|
-
.selector .glyph[data-v-
|
|
2009
|
+
.selector .glyph[data-v-d5963c35] {
|
|
2000
2010
|
opacity: 1;
|
|
2001
2011
|
transform: none;
|
|
2002
2012
|
}
|
|
2003
2013
|
}
|
|
2004
|
-
.cell-menu[data-v-
|
|
2014
|
+
.cell-menu[data-v-d5963c35] {
|
|
2005
2015
|
width: 24px;
|
|
2006
2016
|
height: 24px;
|
|
2007
|
-
border-radius: var(--ui-radius-
|
|
2008
|
-
background: color-mix(in srgb, var(--ui-surface-muted
|
|
2017
|
+
border-radius: var(--ui-radius-sm);
|
|
2018
|
+
background: color-mix(in srgb, var(--ui-surface-muted) 78%, transparent);
|
|
2009
2019
|
}
|
|
2010
|
-
.cell-menu[data-v-
|
|
2020
|
+
.cell-menu[data-v-d5963c35] {
|
|
2011
2021
|
--ui-icon-size: 15px;
|
|
2012
|
-
--ui-icon-stroke-width:
|
|
2022
|
+
--ui-icon-stroke-width: 2;
|
|
2013
2023
|
}
|
|
2014
|
-
[data-component~="ui-editor-table-overlay"][hidden][data-v-
|
|
2024
|
+
[data-component~="ui-editor-table-overlay"][hidden][data-v-d5963c35] {
|
|
2015
2025
|
display: none;
|
|
2016
2026
|
}
|
|
2017
2027
|
|
|
2018
|
-
.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"][data-v-
|
|
2028
|
+
.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"][data-v-c7ed049b] {
|
|
2019
2029
|
min-width: max-content;
|
|
2020
2030
|
min-height: 100%;
|
|
2021
2031
|
padding: 0;
|
|
@@ -2025,160 +2035,160 @@ svg[data-v-b2b50d17] {
|
|
|
2025
2035
|
box-shadow: none;
|
|
2026
2036
|
backdrop-filter: none;
|
|
2027
2037
|
}
|
|
2028
|
-
.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button[data-v-
|
|
2038
|
+
.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button[data-v-c7ed049b] {
|
|
2029
2039
|
min-height: 44px;
|
|
2030
2040
|
background: transparent;
|
|
2031
2041
|
}
|
|
2032
|
-
.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active[data-v-
|
|
2033
|
-
.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected[data-v-
|
|
2034
|
-
background: var(--ui-accent-soft, var(--ui-accent-subtle
|
|
2042
|
+
.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active[data-v-c7ed049b],
|
|
2043
|
+
.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected[data-v-c7ed049b] {
|
|
2044
|
+
background: var(--ui-accent-soft, var(--ui-accent-subtle));
|
|
2035
2045
|
}
|
|
2036
|
-
.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu[data-v-
|
|
2046
|
+
.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu[data-v-c7ed049b] {
|
|
2037
2047
|
top: auto;
|
|
2038
2048
|
right: 0;
|
|
2039
|
-
bottom: calc(100% + var(--ui-space-2
|
|
2049
|
+
bottom: calc(100% + var(--ui-space-2));
|
|
2040
2050
|
max-height: min(50dvh, 22rem);
|
|
2041
2051
|
overflow-y: auto;
|
|
2042
2052
|
overscroll-behavior: contain;
|
|
2043
2053
|
}
|
|
2044
|
-
[data-component~="ui-editor-table-toolbar"][data-v-
|
|
2054
|
+
[data-component~="ui-editor-table-toolbar"][data-v-c7ed049b] {
|
|
2045
2055
|
display: inline-flex;
|
|
2046
2056
|
align-items: center;
|
|
2047
|
-
gap: var(--ui-space-1
|
|
2048
|
-
padding: var(--ui-space-1
|
|
2049
|
-
background: color-mix(in srgb, var(--ui-surface
|
|
2050
|
-
border: 1px solid var(--ui-border
|
|
2051
|
-
border-radius: calc(var(--ui-radius-md
|
|
2057
|
+
gap: var(--ui-space-1);
|
|
2058
|
+
padding: var(--ui-space-1);
|
|
2059
|
+
background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
|
|
2060
|
+
border: 1px solid var(--ui-border);
|
|
2061
|
+
border-radius: calc(var(--ui-radius-md) + 2px);
|
|
2052
2062
|
box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
|
|
2053
2063
|
backdrop-filter: blur(10px);
|
|
2054
2064
|
}
|
|
2055
|
-
.group[data-v-
|
|
2065
|
+
.group[data-v-c7ed049b] {
|
|
2056
2066
|
display: inline-flex;
|
|
2057
2067
|
align-items: center;
|
|
2058
2068
|
gap: 2px;
|
|
2059
2069
|
overflow: hidden;
|
|
2060
2070
|
}
|
|
2061
|
-
.sep[data-v-
|
|
2071
|
+
.sep[data-v-c7ed049b] {
|
|
2062
2072
|
width: 1px;
|
|
2063
2073
|
align-self: stretch;
|
|
2064
|
-
background: var(--ui-border
|
|
2074
|
+
background: var(--ui-border);
|
|
2065
2075
|
}
|
|
2066
|
-
.overflow[data-v-
|
|
2076
|
+
.overflow[data-v-c7ed049b] {
|
|
2067
2077
|
position: relative;
|
|
2068
2078
|
}
|
|
2069
|
-
[data-component~="ui-editor-table-toolbar"] button[data-v-
|
|
2079
|
+
[data-component~="ui-editor-table-toolbar"] button[data-v-c7ed049b] {
|
|
2070
2080
|
display: inline-flex;
|
|
2071
2081
|
align-items: center;
|
|
2072
2082
|
justify-content: center;
|
|
2073
|
-
gap: var(--ui-space-
|
|
2083
|
+
gap: var(--ui-space-2);
|
|
2074
2084
|
min-height: 32px;
|
|
2075
2085
|
border: 0;
|
|
2076
|
-
border-radius: var(--ui-radius-sm
|
|
2086
|
+
border-radius: var(--ui-radius-sm);
|
|
2077
2087
|
background: transparent;
|
|
2078
|
-
color: var(--ui-text-primary
|
|
2088
|
+
color: var(--ui-text-primary);
|
|
2079
2089
|
cursor: pointer;
|
|
2080
|
-
font-size: var(--ui-
|
|
2090
|
+
font-size: var(--ui-font-size-sm);
|
|
2081
2091
|
font-weight: 500;
|
|
2082
2092
|
line-height: 1;
|
|
2083
|
-
padding: var(--ui-space-
|
|
2093
|
+
padding: var(--ui-space-2) var(--ui-space-2);
|
|
2084
2094
|
white-space: nowrap;
|
|
2085
2095
|
}
|
|
2086
|
-
[data-component~="ui-editor-table-toolbar"] button[data-v-
|
|
2087
|
-
background: var(--ui-surface-hover
|
|
2096
|
+
[data-component~="ui-editor-table-toolbar"] button[data-v-c7ed049b]:hover {
|
|
2097
|
+
background: var(--ui-surface-hover);
|
|
2088
2098
|
}
|
|
2089
|
-
[data-component~="ui-editor-table-toolbar"] button.active[data-v-
|
|
2090
|
-
background: var(--ui-accent-soft, var(--ui-accent-subtle
|
|
2091
|
-
color: var(--ui-accent-active
|
|
2099
|
+
[data-component~="ui-editor-table-toolbar"] button.active[data-v-c7ed049b] {
|
|
2100
|
+
background: var(--ui-accent-soft, var(--ui-accent-subtle));
|
|
2101
|
+
color: var(--ui-accent-active);
|
|
2092
2102
|
}
|
|
2093
|
-
.group button[data-v-
|
|
2094
|
-
border-radius: var(--ui-radius-sm
|
|
2103
|
+
.group button[data-v-c7ed049b] {
|
|
2104
|
+
border-radius: var(--ui-radius-sm);
|
|
2095
2105
|
}
|
|
2096
|
-
.group button + button[data-v-
|
|
2106
|
+
.group button + button[data-v-c7ed049b] {
|
|
2097
2107
|
border-left: 0;
|
|
2098
2108
|
}
|
|
2099
|
-
[data-component~="ui-editor-table-toolbar"] .more[data-v-
|
|
2109
|
+
[data-component~="ui-editor-table-toolbar"] .more[data-v-c7ed049b] {
|
|
2100
2110
|
border: 0;
|
|
2101
|
-
border-radius: var(--ui-radius-sm
|
|
2111
|
+
border-radius: var(--ui-radius-sm);
|
|
2102
2112
|
}
|
|
2103
|
-
[data-component~="ui-editor-table-toolbar"] button.danger[data-v-
|
|
2104
|
-
color: var(--ui-danger
|
|
2113
|
+
[data-component~="ui-editor-table-toolbar"] button.danger[data-v-c7ed049b] {
|
|
2114
|
+
color: var(--ui-danger);
|
|
2105
2115
|
}
|
|
2106
|
-
[data-component~="ui-editor-table-toolbar"][data-v-
|
|
2116
|
+
[data-component~="ui-editor-table-toolbar"][data-v-c7ed049b] {
|
|
2107
2117
|
--ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
|
|
2108
2118
|
--ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
|
|
2109
2119
|
}
|
|
2110
|
-
.chevron[data-v-
|
|
2120
|
+
.chevron[data-v-c7ed049b] {
|
|
2111
2121
|
display: inline-flex;
|
|
2112
2122
|
--ui-icon-size: 0.875rem;
|
|
2113
2123
|
}
|
|
2114
|
-
[data-component~="ui-editor-table-toolbar"] .icon-button[data-v-
|
|
2124
|
+
[data-component~="ui-editor-table-toolbar"] .icon-button[data-v-c7ed049b] {
|
|
2115
2125
|
width: 32px;
|
|
2116
2126
|
padding-inline: 0;
|
|
2117
2127
|
}
|
|
2118
|
-
.menu[data-v-
|
|
2128
|
+
.menu[data-v-c7ed049b] {
|
|
2119
2129
|
position: absolute;
|
|
2120
|
-
top: calc(100% + var(--ui-space-2
|
|
2130
|
+
top: calc(100% + var(--ui-space-2));
|
|
2121
2131
|
right: 0;
|
|
2122
2132
|
min-width: 12rem;
|
|
2123
|
-
padding: var(--ui-space-1
|
|
2124
|
-
background: var(--ui-surface
|
|
2125
|
-
border: 1px solid var(--ui-border
|
|
2126
|
-
border-radius: var(--ui-radius-md
|
|
2133
|
+
padding: var(--ui-space-1);
|
|
2134
|
+
background: var(--ui-surface);
|
|
2135
|
+
border: 1px solid var(--ui-border);
|
|
2136
|
+
border-radius: var(--ui-radius-md);
|
|
2127
2137
|
box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
|
|
2128
2138
|
display: flex;
|
|
2129
2139
|
flex-direction: column;
|
|
2130
2140
|
gap: 2px;
|
|
2131
2141
|
z-index: 2;
|
|
2132
2142
|
}
|
|
2133
|
-
.menu-section + .menu-section[data-v-
|
|
2134
|
-
margin-top: var(--ui-space-1
|
|
2135
|
-
padding-top: var(--ui-space-1
|
|
2136
|
-
border-top: 1px solid color-mix(in srgb, var(--ui-border
|
|
2143
|
+
.menu-section + .menu-section[data-v-c7ed049b] {
|
|
2144
|
+
margin-top: var(--ui-space-1);
|
|
2145
|
+
padding-top: var(--ui-space-1);
|
|
2146
|
+
border-top: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
|
|
2137
2147
|
}
|
|
2138
|
-
.menu-heading[data-v-
|
|
2139
|
-
padding: var(--ui-space-1
|
|
2148
|
+
.menu-heading[data-v-c7ed049b] {
|
|
2149
|
+
padding: var(--ui-space-1) var(--ui-space-2);
|
|
2140
2150
|
font-size: 0.6875rem;
|
|
2141
2151
|
font-weight: 700;
|
|
2142
2152
|
letter-spacing: 0.05em;
|
|
2143
2153
|
text-transform: uppercase;
|
|
2144
|
-
color: var(--ui-text-muted
|
|
2154
|
+
color: var(--ui-text-muted);
|
|
2145
2155
|
}
|
|
2146
|
-
.menu button[data-v-
|
|
2156
|
+
.menu button[data-v-c7ed049b] {
|
|
2147
2157
|
display: flex;
|
|
2148
2158
|
justify-content: flex-start;
|
|
2149
2159
|
width: 100%;
|
|
2150
2160
|
text-align: left;
|
|
2151
2161
|
}
|
|
2152
|
-
.swatches[data-v-
|
|
2162
|
+
.swatches[data-v-c7ed049b] {
|
|
2153
2163
|
display: grid;
|
|
2154
2164
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
2155
2165
|
gap: 2px;
|
|
2156
2166
|
}
|
|
2157
|
-
[data-component~="ui-editor-table-toolbar"] .swatch-button[data-v-
|
|
2158
|
-
gap: var(--ui-space-1
|
|
2167
|
+
[data-component~="ui-editor-table-toolbar"] .swatch-button[data-v-c7ed049b] {
|
|
2168
|
+
gap: var(--ui-space-1);
|
|
2159
2169
|
justify-content: flex-start;
|
|
2160
2170
|
}
|
|
2161
|
-
.swatch[data-v-
|
|
2171
|
+
.swatch[data-v-c7ed049b] {
|
|
2162
2172
|
width: 14px;
|
|
2163
2173
|
height: 14px;
|
|
2164
2174
|
flex: 0 0 14px;
|
|
2165
|
-
border: 1px solid color-mix(in srgb, var(--ui-border
|
|
2175
|
+
border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
|
|
2166
2176
|
border-radius: 3px;
|
|
2167
2177
|
background: var(--ui-editor-table-toolbar-swatch);
|
|
2168
2178
|
}
|
|
2169
|
-
.swatch.default[data-v-
|
|
2179
|
+
.swatch.default[data-v-c7ed049b] {
|
|
2170
2180
|
background:
|
|
2171
|
-
linear-gradient(135deg, transparent 44%, var(--ui-danger
|
|
2172
|
-
var(--ui-surface
|
|
2181
|
+
linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
|
|
2182
|
+
var(--ui-surface);
|
|
2173
2183
|
}
|
|
2174
|
-
.swatch-button.selected[data-v-
|
|
2175
|
-
background: var(--ui-accent-soft, var(--ui-accent-subtle
|
|
2184
|
+
.swatch-button.selected[data-v-c7ed049b] {
|
|
2185
|
+
background: var(--ui-accent-soft, var(--ui-accent-subtle));
|
|
2176
2186
|
}
|
|
2177
|
-
[data-component~="ui-editor-table-toolbar"][hidden][data-v-
|
|
2187
|
+
[data-component~="ui-editor-table-toolbar"][hidden][data-v-c7ed049b] {
|
|
2178
2188
|
display: none;
|
|
2179
2189
|
}
|
|
2180
2190
|
|
|
2181
|
-
[data-component~="ui-editor-toolbar"][data-v-
|
|
2191
|
+
[data-component~="ui-editor-toolbar"][data-v-472b5c16] {
|
|
2182
2192
|
position: sticky;
|
|
2183
2193
|
top: 0;
|
|
2184
2194
|
z-index: var(--ui-editor-toolbar-z-index, 10);
|
|
@@ -2192,23 +2202,23 @@ svg[data-v-b2b50d17] {
|
|
|
2192
2202
|
overflow-x: auto;
|
|
2193
2203
|
scrollbar-width: none;
|
|
2194
2204
|
white-space: nowrap;
|
|
2195
|
-
background: var(--ui-editor-toolbar-
|
|
2196
|
-
border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border
|
|
2205
|
+
background: var(--ui-editor-toolbar-surface, var(--ui-surface));
|
|
2206
|
+
border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
|
|
2197
2207
|
}
|
|
2198
|
-
[data-component~="ui-editor-toolbar"][data-v-
|
|
2208
|
+
[data-component~="ui-editor-toolbar"][data-v-472b5c16]::-webkit-scrollbar {
|
|
2199
2209
|
display: none;
|
|
2200
2210
|
}
|
|
2201
|
-
[data-component~="ui-editor-toolbar"] > [data-v-
|
|
2211
|
+
[data-component~="ui-editor-toolbar"] > [data-v-472b5c16-s] {
|
|
2202
2212
|
flex: 0 0 auto;
|
|
2203
2213
|
}
|
|
2204
|
-
.divider[data-v-
|
|
2214
|
+
.divider[data-v-472b5c16-s] {
|
|
2205
2215
|
width: 1px;
|
|
2206
2216
|
height: 20px;
|
|
2207
|
-
background: var(--ui-editor-toolbar-divider, var(--ui-border
|
|
2217
|
+
background: var(--ui-editor-toolbar-divider, var(--ui-border));
|
|
2208
2218
|
flex-shrink: 0;
|
|
2209
2219
|
margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
|
|
2210
2220
|
}
|
|
2211
|
-
[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-
|
|
2221
|
+
[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-472b5c16] {
|
|
2212
2222
|
position: static;
|
|
2213
2223
|
top: auto;
|
|
2214
2224
|
width: max-content;
|
|
@@ -2218,11 +2228,11 @@ svg[data-v-b2b50d17] {
|
|
|
2218
2228
|
overflow-x: visible;
|
|
2219
2229
|
background: color-mix(
|
|
2220
2230
|
in srgb,
|
|
2221
|
-
var(--ui-editor-toolbar-
|
|
2231
|
+
var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
|
|
2222
2232
|
transparent
|
|
2223
2233
|
);
|
|
2224
|
-
border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border
|
|
2225
|
-
border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg
|
|
2234
|
+
border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
|
|
2235
|
+
border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
|
|
2226
2236
|
box-shadow: var(
|
|
2227
2237
|
--ui-editor-toolbar-floating-shadow,
|
|
2228
2238
|
var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
|
|
@@ -2230,23 +2240,23 @@ svg[data-v-b2b50d17] {
|
|
|
2230
2240
|
backdrop-filter: blur(10px);
|
|
2231
2241
|
}
|
|
2232
2242
|
@media (max-width: 767px) {
|
|
2233
|
-
[data-component~="ui-editor-toolbar"][data-v-
|
|
2243
|
+
[data-component~="ui-editor-toolbar"][data-v-472b5c16] {
|
|
2234
2244
|
position: fixed;
|
|
2235
2245
|
top: auto;
|
|
2236
2246
|
bottom: env(safe-area-inset-bottom);
|
|
2237
2247
|
left: 0;
|
|
2238
2248
|
right: 0;
|
|
2239
2249
|
min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
|
|
2240
|
-
border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border
|
|
2250
|
+
border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
|
|
2241
2251
|
border-bottom: none;
|
|
2242
2252
|
box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
|
|
2243
2253
|
}
|
|
2244
|
-
[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-
|
|
2254
|
+
[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-472b5c16] {
|
|
2245
2255
|
position: static;
|
|
2246
2256
|
inset: auto;
|
|
2247
2257
|
min-height: auto;
|
|
2248
|
-
border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border
|
|
2249
|
-
border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg
|
|
2258
|
+
border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border));
|
|
2259
|
+
border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
|
|
2250
2260
|
box-shadow: var(
|
|
2251
2261
|
--ui-editor-toolbar-floating-shadow,
|
|
2252
2262
|
var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
|
|
@@ -2255,7 +2265,7 @@ svg[data-v-b2b50d17] {
|
|
|
2255
2265
|
}
|
|
2256
2266
|
|
|
2257
2267
|
/* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
|
|
2258
|
-
.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"][data-v-
|
|
2268
|
+
.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"][data-v-472b5c16] {
|
|
2259
2269
|
position: static;
|
|
2260
2270
|
min-height: var(--ui-editor-toolbar-min-height, 48px);
|
|
2261
2271
|
overscroll-behavior-inline: contain;
|
|
@@ -2266,7 +2276,7 @@ svg[data-v-b2b50d17] {
|
|
|
2266
2276
|
|
|
2267
2277
|
/* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
|
|
2268
2278
|
.looma-editor__mobile-toolbar-shell
|
|
2269
|
-
[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-
|
|
2279
|
+
[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-472b5c16] {
|
|
2270
2280
|
width: 100%;
|
|
2271
2281
|
max-width: none;
|
|
2272
2282
|
min-height: 100%;
|
|
@@ -2283,25 +2293,26 @@ svg[data-v-b2b50d17] {
|
|
|
2283
2293
|
}
|
|
2284
2294
|
|
|
2285
2295
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
2286
|
-
[data-component~="ui-editor-toolbar"][hidden][data-v-
|
|
2296
|
+
[data-component~="ui-editor-toolbar"][hidden][data-v-472b5c16] {
|
|
2287
2297
|
display: none;
|
|
2288
2298
|
}
|
|
2289
2299
|
|
|
2290
|
-
[data-component~="ui-floating-action-button"][data-v-
|
|
2300
|
+
[data-component~="ui-floating-action-button"][data-v-b66a2428] {
|
|
2291
2301
|
position: fixed;
|
|
2292
2302
|
inset-block-end: calc(
|
|
2293
|
-
var(--ui-floating-action-button-
|
|
2303
|
+
var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) +
|
|
2304
|
+
env(safe-area-inset-bottom)
|
|
2294
2305
|
);
|
|
2295
2306
|
inset-inline-end: max(
|
|
2296
|
-
var(--ui-floating-action-button-inline-end, var(--ui-space-5
|
|
2307
|
+
var(--ui-floating-action-button-inset-inline-end, var(--ui-space-5)),
|
|
2297
2308
|
env(safe-area-inset-right)
|
|
2298
2309
|
);
|
|
2299
|
-
inline-size: var(--ui-
|
|
2300
|
-
block-size: var(--ui-
|
|
2310
|
+
inline-size: var(--ui-control-min-block-size);
|
|
2311
|
+
block-size: var(--ui-control-min-block-size);
|
|
2301
2312
|
display: inline-flex;
|
|
2302
2313
|
z-index: var(--ui-floating-action-button-z-index, 100);
|
|
2303
2314
|
}
|
|
2304
|
-
[data-component~="ui-floating-action-button"][data-v-
|
|
2315
|
+
[data-component~="ui-floating-action-button"][data-v-b66a2428] {
|
|
2305
2316
|
appearance: none;
|
|
2306
2317
|
border: none;
|
|
2307
2318
|
border-radius: 999px;
|
|
@@ -2310,49 +2321,43 @@ svg[data-v-b2b50d17] {
|
|
|
2310
2321
|
display: inline-flex;
|
|
2311
2322
|
align-items: center;
|
|
2312
2323
|
justify-content: center;
|
|
2313
|
-
background: var(--ui-
|
|
2314
|
-
color: var(--ui-
|
|
2315
|
-
box-shadow: var(
|
|
2316
|
-
--ui-floating-action-button-shadow,
|
|
2317
|
-
0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)
|
|
2318
|
-
);
|
|
2324
|
+
background: var(--ui-accent);
|
|
2325
|
+
color: var(--ui-on-accent);
|
|
2326
|
+
box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 40%, transparent);
|
|
2319
2327
|
cursor: pointer;
|
|
2320
2328
|
transition:
|
|
2321
|
-
background-color var(--ui-motion-fast
|
|
2322
|
-
transform var(--ui-motion-fast
|
|
2323
|
-
box-shadow var(--ui-motion-fast
|
|
2329
|
+
background-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
2330
|
+
transform var(--ui-motion-fast) var(--ui-motion-ease),
|
|
2331
|
+
box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
|
|
2324
2332
|
}
|
|
2325
|
-
[data-component~="ui-floating-action-button"][data-v-
|
|
2326
|
-
background: var(--ui-
|
|
2327
|
-
box-shadow: var(
|
|
2328
|
-
--ui-floating-action-button-hover-shadow,
|
|
2329
|
-
0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)
|
|
2330
|
-
);
|
|
2333
|
+
[data-component~="ui-floating-action-button"][data-v-b66a2428]:hover:enabled {
|
|
2334
|
+
background: var(--ui-accent-hover);
|
|
2335
|
+
box-shadow: 0 6px 16px color-mix(in srgb, var(--ui-accent) 50%, transparent);
|
|
2331
2336
|
}
|
|
2332
|
-
[data-component~="ui-floating-action-button"][data-v-
|
|
2333
|
-
transform: scale(
|
|
2337
|
+
[data-component~="ui-floating-action-button"][data-v-b66a2428]:active:enabled {
|
|
2338
|
+
transform: scale(0.94);
|
|
2334
2339
|
}
|
|
2335
|
-
[data-component~="ui-floating-action-button"][data-v-
|
|
2336
|
-
outline: 2px solid var(--ui-focus-ring
|
|
2340
|
+
[data-component~="ui-floating-action-button"][data-v-b66a2428]:focus-visible {
|
|
2341
|
+
outline: 2px solid var(--ui-focus-ring);
|
|
2337
2342
|
outline-offset: 2px;
|
|
2338
2343
|
}
|
|
2339
|
-
[data-component~="ui-floating-action-button"][data-v-
|
|
2344
|
+
[data-component~="ui-floating-action-button"][data-v-b66a2428]:disabled {
|
|
2340
2345
|
opacity: 0.6;
|
|
2341
2346
|
cursor: not-allowed;
|
|
2342
2347
|
}
|
|
2343
|
-
svg[data-v-
|
|
2344
|
-
inline-size: var(--ui-
|
|
2345
|
-
block-size: var(--ui-
|
|
2348
|
+
svg[data-v-b66a2428-s] {
|
|
2349
|
+
inline-size: var(--ui-icon-size-lg);
|
|
2350
|
+
block-size: var(--ui-icon-size-lg);
|
|
2346
2351
|
flex-shrink: 0;
|
|
2347
2352
|
}
|
|
2348
2353
|
@media (min-width: 768px) {
|
|
2349
|
-
[data-component~="ui-floating-action-button"][data-ui-floating-action-button-state~="mobileOnly"][data-v-
|
|
2354
|
+
[data-component~="ui-floating-action-button"][data-ui-floating-action-button-state~="mobileOnly"][data-v-b66a2428] {
|
|
2350
2355
|
display: none;
|
|
2351
2356
|
}
|
|
2352
2357
|
}
|
|
2353
2358
|
|
|
2354
2359
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
2355
|
-
[data-component~="ui-floating-action-button"][hidden][data-v-
|
|
2360
|
+
[data-component~="ui-floating-action-button"][hidden][data-v-b66a2428] {
|
|
2356
2361
|
display: none;
|
|
2357
2362
|
}
|
|
2358
2363
|
|
|
@@ -2393,8 +2398,8 @@ svg[data-v-a6b9e9ca-s] {
|
|
|
2393
2398
|
display: none;
|
|
2394
2399
|
}
|
|
2395
2400
|
|
|
2396
|
-
[data-component~="ui-grid"][data-v-
|
|
2397
|
-
--_grid-gap: var(--ui-space-4
|
|
2401
|
+
[data-component~="ui-grid"][data-v-356b2957] {
|
|
2402
|
+
--_grid-gap: var(--ui-space-4);
|
|
2398
2403
|
--_grid-min: 12rem;
|
|
2399
2404
|
display: grid;
|
|
2400
2405
|
gap: var(--ui-grid-gap, var(--_grid-gap));
|
|
@@ -2404,50 +2409,50 @@ svg[data-v-a6b9e9ca-s] {
|
|
|
2404
2409
|
max-inline-size: 100%;
|
|
2405
2410
|
margin: 0;
|
|
2406
2411
|
}
|
|
2407
|
-
[data-component~="ui-grid"][data-ui-grid-state~="gap=xs"][data-v-
|
|
2408
|
-
--_grid-gap: var(--ui-space-2
|
|
2412
|
+
[data-component~="ui-grid"][data-ui-grid-state~="gap=xs"][data-v-356b2957] {
|
|
2413
|
+
--_grid-gap: var(--ui-space-2);
|
|
2409
2414
|
}
|
|
2410
|
-
[data-component~="ui-grid"][data-ui-grid-state~="gap=s"][data-v-
|
|
2411
|
-
--_grid-gap: var(--ui-space-3
|
|
2415
|
+
[data-component~="ui-grid"][data-ui-grid-state~="gap=s"][data-v-356b2957] {
|
|
2416
|
+
--_grid-gap: var(--ui-space-3);
|
|
2412
2417
|
}
|
|
2413
|
-
[data-component~="ui-grid"][data-ui-grid-state~="gap=m"][data-v-
|
|
2414
|
-
--_grid-gap: var(--ui-space-4
|
|
2418
|
+
[data-component~="ui-grid"][data-ui-grid-state~="gap=m"][data-v-356b2957] {
|
|
2419
|
+
--_grid-gap: var(--ui-space-4);
|
|
2415
2420
|
}
|
|
2416
|
-
[data-component~="ui-grid"][data-ui-grid-state~="gap=l"][data-v-
|
|
2417
|
-
--_grid-gap: var(--ui-space-5
|
|
2421
|
+
[data-component~="ui-grid"][data-ui-grid-state~="gap=l"][data-v-356b2957] {
|
|
2422
|
+
--_grid-gap: var(--ui-space-5);
|
|
2418
2423
|
}
|
|
2419
|
-
[data-component~="ui-grid"][data-ui-grid-state~="gap=xl"][data-v-
|
|
2420
|
-
--_grid-gap: var(--ui-space-6
|
|
2424
|
+
[data-component~="ui-grid"][data-ui-grid-state~="gap=xl"][data-v-356b2957] {
|
|
2425
|
+
--_grid-gap: var(--ui-space-6);
|
|
2421
2426
|
}
|
|
2422
|
-
[data-component~="ui-grid"][data-ui-grid-state~="min=md"][data-v-
|
|
2427
|
+
[data-component~="ui-grid"][data-ui-grid-state~="min=md"][data-v-356b2957] {
|
|
2423
2428
|
--_grid-min: 16rem;
|
|
2424
2429
|
}
|
|
2425
|
-
[data-component~="ui-grid"][data-ui-grid-state~="min=lg"][data-v-
|
|
2430
|
+
[data-component~="ui-grid"][data-ui-grid-state~="min=lg"][data-v-356b2957] {
|
|
2426
2431
|
--_grid-min: 20rem;
|
|
2427
2432
|
}
|
|
2428
2433
|
|
|
2429
2434
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
2430
|
-
[data-component~="ui-grid"][hidden][data-v-
|
|
2435
|
+
[data-component~="ui-grid"][hidden][data-v-356b2957] {
|
|
2431
2436
|
display: none;
|
|
2432
2437
|
}
|
|
2433
2438
|
|
|
2434
|
-
[data-component~="ui-icon-button"][data-v-
|
|
2439
|
+
[data-component~="ui-icon-button"][data-v-ab2df1cc] {
|
|
2435
2440
|
display: inline-flex;
|
|
2436
2441
|
color: var(--ui-text-secondary);
|
|
2437
2442
|
}
|
|
2438
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-
|
|
2443
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ab2df1cc] {
|
|
2439
2444
|
position: relative;
|
|
2440
2445
|
}
|
|
2441
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-
|
|
2446
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ab2df1cc]::before {
|
|
2442
2447
|
content: "";
|
|
2443
2448
|
position: absolute;
|
|
2444
2449
|
inset: 50% auto auto 50%;
|
|
2445
2450
|
z-index: 1;
|
|
2446
|
-
inline-size: var(--ui-affordance-guide-size
|
|
2447
|
-
block-size: var(--ui-affordance-guide-size
|
|
2448
|
-
border-radius: var(--ui-radius-round
|
|
2451
|
+
inline-size: var(--ui-affordance-guide-size);
|
|
2452
|
+
block-size: var(--ui-affordance-guide-size);
|
|
2453
|
+
border-radius: var(--ui-radius-round);
|
|
2449
2454
|
background: var(--ui-affordance-guide-color, var(--ui-border-strong));
|
|
2450
|
-
opacity: var(--ui-affordance-guide-opacity
|
|
2455
|
+
opacity: var(--ui-affordance-guide-opacity);
|
|
2451
2456
|
transform: translate(-50%, -50%);
|
|
2452
2457
|
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
|
|
2453
2458
|
pointer-events: none;
|
|
@@ -2457,27 +2462,29 @@ svg[data-v-a6b9e9ca-s] {
|
|
|
2457
2462
|
* surface and icon. The root is the native button, so hiding it outright would hide the dot
|
|
2458
2463
|
* too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
|
|
2459
2464
|
@media (hover: hover) and (pointer: fine) {
|
|
2460
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-
|
|
2465
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ab2df1cc]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
|
|
2461
2466
|
border-color: transparent;
|
|
2462
2467
|
background: transparent;
|
|
2463
2468
|
box-shadow: none;
|
|
2464
2469
|
color: transparent;
|
|
2465
2470
|
}
|
|
2466
2471
|
}
|
|
2467
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-
|
|
2472
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ab2df1cc]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
|
|
2468
2473
|
opacity: 0;
|
|
2469
2474
|
}
|
|
2470
|
-
[data-component~="ui-icon-button"][data-v-
|
|
2475
|
+
[data-component~="ui-icon-button"][data-v-ab2df1cc] {
|
|
2476
|
+
/* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
|
|
2477
|
+
--_size: 2rem;
|
|
2471
2478
|
appearance: none;
|
|
2472
|
-
inline-size: var(--ui-icon-button-size,
|
|
2473
|
-
block-size: var(--ui-icon-button-size,
|
|
2474
|
-
min-inline-size: var(--ui-icon-button-size,
|
|
2475
|
-
min-block-size: var(--ui-icon-button-size,
|
|
2479
|
+
inline-size: var(--ui-icon-button-size, var(--_size));
|
|
2480
|
+
block-size: var(--ui-icon-button-size, var(--_size));
|
|
2481
|
+
min-inline-size: var(--ui-icon-button-size, var(--_size));
|
|
2482
|
+
min-block-size: var(--ui-icon-button-size, var(--_size));
|
|
2476
2483
|
padding: 0;
|
|
2477
2484
|
margin: 0;
|
|
2478
2485
|
border: 1px solid transparent;
|
|
2479
|
-
border-radius: var(--ui-icon-button-radius, var(--ui-radius-
|
|
2480
|
-
background: var(--ui-icon-button-
|
|
2486
|
+
border-radius: var(--ui-icon-button-radius, var(--ui-radius-md));
|
|
2487
|
+
background: var(--ui-icon-button-surface, transparent);
|
|
2481
2488
|
color: inherit;
|
|
2482
2489
|
display: inline-flex;
|
|
2483
2490
|
align-items: center;
|
|
@@ -2491,7 +2498,7 @@ svg[data-v-a6b9e9ca-s] {
|
|
|
2491
2498
|
transform var(--ui-motion-fast) var(--ui-motion-ease);
|
|
2492
2499
|
}
|
|
2493
2500
|
@media (hover: none), (pointer: coarse) {
|
|
2494
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-
|
|
2501
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-ab2df1cc]::before {
|
|
2495
2502
|
opacity: 0;
|
|
2496
2503
|
}
|
|
2497
2504
|
}
|
|
@@ -2499,116 +2506,118 @@ svg[data-v-a6b9e9ca-s] {
|
|
|
2499
2506
|
/* A touch target without a bigger button: an invisible hit area, at least the control
|
|
2500
2507
|
minimum, centred on the button (::before is the anticipatory guide). */
|
|
2501
2508
|
@media (pointer: coarse) {
|
|
2502
|
-
[data-component~="ui-icon-button"][data-v-
|
|
2509
|
+
[data-component~="ui-icon-button"][data-v-ab2df1cc] {
|
|
2503
2510
|
position: relative;
|
|
2504
2511
|
}
|
|
2505
|
-
[data-component~="ui-icon-button"][data-v-
|
|
2512
|
+
[data-component~="ui-icon-button"][data-v-ab2df1cc]::after {
|
|
2506
2513
|
content: "";
|
|
2507
2514
|
position: absolute;
|
|
2508
2515
|
inset: 50% auto auto 50%;
|
|
2509
|
-
inline-size: max(100%, var(--ui-control-min-block-size
|
|
2510
|
-
block-size: max(100%, var(--ui-control-min-block-size
|
|
2516
|
+
inline-size: max(100%, var(--ui-control-min-block-size));
|
|
2517
|
+
block-size: max(100%, var(--ui-control-min-block-size));
|
|
2511
2518
|
transform: translate(-50%, -50%);
|
|
2512
2519
|
}
|
|
2513
2520
|
}
|
|
2514
|
-
html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-
|
|
2521
|
+
html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ab2df1cc] {
|
|
2515
2522
|
position: relative;
|
|
2516
2523
|
}
|
|
2517
|
-
html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-
|
|
2524
|
+
html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-ab2df1cc]::after {
|
|
2518
2525
|
content: "";
|
|
2519
2526
|
position: absolute;
|
|
2520
2527
|
inset: 50% auto auto 50%;
|
|
2521
|
-
inline-size: max(100%, var(--ui-control-min-block-size
|
|
2522
|
-
block-size: max(100%, var(--ui-control-min-block-size
|
|
2528
|
+
inline-size: max(100%, var(--ui-control-min-block-size));
|
|
2529
|
+
block-size: max(100%, var(--ui-control-min-block-size));
|
|
2523
2530
|
transform: translate(-50%, -50%);
|
|
2524
2531
|
}
|
|
2525
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
min-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
|
|
2532
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ab2df1cc] {
|
|
2533
|
+
--_size: 1.75rem;
|
|
2534
|
+
inline-size: var(--ui-icon-button-size, var(--_size));
|
|
2535
|
+
block-size: var(--ui-icon-button-size, var(--_size));
|
|
2536
|
+
min-inline-size: var(--ui-icon-button-size, var(--_size));
|
|
2537
|
+
min-block-size: var(--ui-icon-button-size, var(--_size));
|
|
2538
|
+
}
|
|
2539
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ab2df1cc] {
|
|
2540
|
+
--_size: 2.5rem;
|
|
2541
|
+
inline-size: var(--ui-icon-button-size, var(--_size));
|
|
2542
|
+
block-size: var(--ui-icon-button-size, var(--_size));
|
|
2543
|
+
min-inline-size: var(--ui-icon-button-size, var(--_size));
|
|
2544
|
+
min-block-size: var(--ui-icon-button-size, var(--_size));
|
|
2545
|
+
}
|
|
2546
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-ab2df1cc] {
|
|
2547
|
+
border-radius: var(--ui-radius-round);
|
|
2539
2548
|
}
|
|
2540
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-
|
|
2549
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ab2df1cc] {
|
|
2541
2550
|
border-color: var(--ui-icon-button-border, var(--ui-border-default));
|
|
2542
|
-
background: var(--ui-icon-button-outline-
|
|
2543
|
-
color: var(--ui-icon-button-outline-
|
|
2551
|
+
background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
|
|
2552
|
+
color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
|
|
2544
2553
|
}
|
|
2545
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-
|
|
2546
|
-
background: var(--ui-icon-button-solid-
|
|
2547
|
-
color: var(--ui-icon-button-solid-
|
|
2554
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ab2df1cc] {
|
|
2555
|
+
background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
|
|
2556
|
+
color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
|
|
2548
2557
|
box-shadow: var(
|
|
2549
2558
|
--ui-icon-button-solid-shadow,
|
|
2550
2559
|
0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
|
|
2551
2560
|
);
|
|
2552
2561
|
}
|
|
2553
|
-
[data-component~="ui-icon-button"][data-v-
|
|
2562
|
+
[data-component~="ui-icon-button"][data-v-ab2df1cc]:hover:enabled {
|
|
2554
2563
|
/* Derived from the text colour so the ghost hover shows on any background. */
|
|
2555
|
-
background: var(--ui-icon-button-hover-
|
|
2556
|
-
color: var(--ui-icon-button-hover-
|
|
2564
|
+
background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
|
|
2565
|
+
color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
|
|
2557
2566
|
}
|
|
2558
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-
|
|
2567
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ab2df1cc]:hover:enabled {
|
|
2559
2568
|
border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
|
|
2560
2569
|
}
|
|
2561
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-
|
|
2562
|
-
background: var(--ui-icon-button-solid-hover-
|
|
2570
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ab2df1cc]:hover:enabled {
|
|
2571
|
+
background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
|
|
2563
2572
|
}
|
|
2564
|
-
[data-component~="ui-icon-button"][data-v-
|
|
2573
|
+
[data-component~="ui-icon-button"][data-v-ab2df1cc]:active:enabled {
|
|
2565
2574
|
transform: scale(var(--ui-icon-button-active-scale, 0.96));
|
|
2566
2575
|
}
|
|
2567
|
-
[data-component~="ui-icon-button"][data-v-
|
|
2576
|
+
[data-component~="ui-icon-button"][data-v-ab2df1cc]:focus-visible {
|
|
2568
2577
|
outline: none;
|
|
2569
2578
|
box-shadow: var(--ui-focus-halo);
|
|
2570
2579
|
}
|
|
2571
2580
|
|
|
2572
2581
|
/* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
|
|
2573
|
-
[data-component~="ui-icon-button"][data-v-
|
|
2582
|
+
[data-component~="ui-icon-button"][data-v-ab2df1cc]:disabled {
|
|
2574
2583
|
opacity: var(--ui-icon-button-disabled-opacity, 0.6);
|
|
2575
|
-
color: var(--ui-icon-button-disabled-
|
|
2584
|
+
color: var(--ui-icon-button-disabled-text, inherit);
|
|
2576
2585
|
cursor: not-allowed;
|
|
2577
2586
|
}
|
|
2578
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-
|
|
2587
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-ab2df1cc]:disabled {
|
|
2579
2588
|
border-color: var(
|
|
2580
2589
|
--ui-icon-button-disabled-border,
|
|
2581
2590
|
var(--ui-icon-button-border, var(--ui-border-default))
|
|
2582
2591
|
);
|
|
2583
2592
|
background-color: var(
|
|
2584
|
-
--ui-icon-button-disabled-
|
|
2585
|
-
var(--ui-icon-button-outline-
|
|
2593
|
+
--ui-icon-button-disabled-surface,
|
|
2594
|
+
var(--ui-icon-button-outline-surface, var(--ui-surface-default))
|
|
2586
2595
|
);
|
|
2587
2596
|
color: var(
|
|
2588
|
-
--ui-icon-button-disabled-
|
|
2589
|
-
var(--ui-icon-button-outline-
|
|
2597
|
+
--ui-icon-button-disabled-text,
|
|
2598
|
+
var(--ui-icon-button-outline-text, var(--ui-text-primary))
|
|
2590
2599
|
);
|
|
2591
2600
|
}
|
|
2592
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-
|
|
2601
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-ab2df1cc]:disabled {
|
|
2593
2602
|
background-color: var(
|
|
2594
|
-
--ui-icon-button-disabled-
|
|
2595
|
-
var(--ui-icon-button-solid-
|
|
2603
|
+
--ui-icon-button-disabled-surface,
|
|
2604
|
+
var(--ui-icon-button-solid-surface, var(--ui-accent-solid))
|
|
2596
2605
|
);
|
|
2597
2606
|
color: var(
|
|
2598
|
-
--ui-icon-button-disabled-
|
|
2599
|
-
var(--ui-icon-button-solid-
|
|
2607
|
+
--ui-icon-button-disabled-text,
|
|
2608
|
+
var(--ui-icon-button-solid-text, var(--ui-text-on-accent))
|
|
2600
2609
|
);
|
|
2601
2610
|
}
|
|
2602
|
-
[data-component~="ui-icon-button"][data-v-
|
|
2603
|
-
--_icon-button-icon-default: var(--ui-icon-size-md
|
|
2611
|
+
[data-component~="ui-icon-button"][data-v-ab2df1cc] {
|
|
2612
|
+
--_icon-button-icon-default: var(--ui-icon-size-md);
|
|
2604
2613
|
}
|
|
2605
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-
|
|
2606
|
-
--_icon-button-icon-default: var(--ui-icon-size-sm
|
|
2614
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-ab2df1cc] {
|
|
2615
|
+
--_icon-button-icon-default: var(--ui-icon-size-sm);
|
|
2607
2616
|
}
|
|
2608
|
-
[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-
|
|
2609
|
-
--_icon-button-icon-default: var(--ui-icon-size-lg
|
|
2617
|
+
[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-ab2df1cc] {
|
|
2618
|
+
--_icon-button-icon-default: var(--ui-icon-size-lg);
|
|
2610
2619
|
}
|
|
2611
|
-
svg[data-v-
|
|
2620
|
+
svg[data-v-ab2df1cc-s] {
|
|
2612
2621
|
inline-size: var(--ui-icon-button-icon-size, var(--_icon-button-icon-default));
|
|
2613
2622
|
block-size: var(--ui-icon-button-icon-size, var(--_icon-button-icon-default));
|
|
2614
2623
|
flex-shrink: 0;
|
|
@@ -2616,21 +2625,21 @@ svg[data-v-9ff7e192-s] {
|
|
|
2616
2625
|
}
|
|
2617
2626
|
|
|
2618
2627
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
2619
|
-
[data-component~="ui-icon-button"][hidden][data-v-
|
|
2628
|
+
[data-component~="ui-icon-button"][hidden][data-v-ab2df1cc] {
|
|
2620
2629
|
display: none;
|
|
2621
2630
|
}
|
|
2622
2631
|
|
|
2623
|
-
[data-component~="ui-input"][data-v-
|
|
2632
|
+
[data-component~="ui-input"][data-v-f00d6a51] {
|
|
2624
2633
|
box-sizing: border-box;
|
|
2625
2634
|
display: inline-block;
|
|
2626
2635
|
inline-size: 100%;
|
|
2627
2636
|
min-inline-size: 0;
|
|
2628
|
-
min-block-size: var(--ui-control-size-md
|
|
2637
|
+
min-block-size: var(--ui-control-size-md);
|
|
2629
2638
|
margin: 0;
|
|
2630
2639
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
2631
2640
|
appearance: none;
|
|
2632
2641
|
border: 1px solid var(--ui-control-border, var(--ui-border-strong));
|
|
2633
|
-
border-radius: var(--ui-input-radius, var(--ui-radius-
|
|
2642
|
+
border-radius: var(--ui-input-radius, var(--ui-radius-md));
|
|
2634
2643
|
background: var(--ui-control-surface, var(--ui-surface-elevated));
|
|
2635
2644
|
color: var(--ui-text-primary);
|
|
2636
2645
|
font: inherit;
|
|
@@ -2643,18 +2652,18 @@ svg[data-v-9ff7e192-s] {
|
|
|
2643
2652
|
}
|
|
2644
2653
|
|
|
2645
2654
|
/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
|
|
2646
|
-
[data-component~="ui-input"][data-v-
|
|
2655
|
+
[data-component~="ui-input"][data-v-f00d6a51]::selection {
|
|
2647
2656
|
background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
|
|
2648
2657
|
color: inherit;
|
|
2649
2658
|
}
|
|
2650
|
-
[data-component~="ui-input"][data-v-
|
|
2659
|
+
[data-component~="ui-input"][data-v-f00d6a51]::placeholder {
|
|
2651
2660
|
color: var(--ui-control-placeholder, var(--ui-text-secondary));
|
|
2652
2661
|
opacity: 1;
|
|
2653
2662
|
}
|
|
2654
|
-
[data-component~="ui-input"][data-v-
|
|
2663
|
+
[data-component~="ui-input"][data-v-f00d6a51]:hover:not(:focus):not(:disabled) {
|
|
2655
2664
|
border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
|
|
2656
2665
|
}
|
|
2657
|
-
[data-component~="ui-input"][data-v-
|
|
2666
|
+
[data-component~="ui-input"][data-v-f00d6a51]:focus-visible {
|
|
2658
2667
|
border-color: var(--ui-control-focus, var(--ui-accent-solid));
|
|
2659
2668
|
outline: none;
|
|
2660
2669
|
box-shadow: var(
|
|
@@ -2665,16 +2674,16 @@ svg[data-v-9ff7e192-s] {
|
|
|
2665
2674
|
}
|
|
2666
2675
|
|
|
2667
2676
|
/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
|
|
2668
|
-
[data-component~="ui-input"][aria-invalid="true"][data-v-
|
|
2669
|
-
[data-component~="ui-input"][data-v-
|
|
2677
|
+
[data-component~="ui-input"][aria-invalid="true"][data-v-f00d6a51],
|
|
2678
|
+
[data-component~="ui-input"][data-v-f00d6a51]:is(:user-invalid, [data-user-invalid]) {
|
|
2670
2679
|
border-color: var(--ui-danger-solid);
|
|
2671
2680
|
}
|
|
2672
|
-
[data-component~="ui-input"][data-v-
|
|
2681
|
+
[data-component~="ui-input"][data-v-f00d6a51]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
|
|
2673
2682
|
box-shadow:
|
|
2674
2683
|
var(--ui-control-inset),
|
|
2675
2684
|
0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
|
|
2676
2685
|
}
|
|
2677
|
-
[data-component~="ui-input"][data-v-
|
|
2686
|
+
[data-component~="ui-input"][data-v-f00d6a51]:disabled {
|
|
2678
2687
|
background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
2679
2688
|
color: var(--ui-text-muted);
|
|
2680
2689
|
box-shadow: none;
|
|
@@ -2685,20 +2694,26 @@ svg[data-v-9ff7e192-s] {
|
|
|
2685
2694
|
* scroll vertically inside the field. Native inputs already center their single line. */
|
|
2686
2695
|
|
|
2687
2696
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
2688
|
-
[data-component~="ui-input"][hidden][data-v-
|
|
2697
|
+
[data-component~="ui-input"][hidden][data-v-f00d6a51] {
|
|
2689
2698
|
display: none;
|
|
2690
2699
|
}
|
|
2691
2700
|
|
|
2692
|
-
|
|
2701
|
+
/* Compact sets the part tokens its items read, so nothing has to rescale a global. */
|
|
2702
|
+
[data-component~="ui-menu"][data-ui-menu-state~="density=compact"][data-v-09be9e37] {
|
|
2703
|
+
--ui-menu-item-padding-block: var(--ui-space-1);
|
|
2704
|
+
--ui-menu-item-padding-inline: var(--ui-space-2);
|
|
2705
|
+
--ui-menu-item-font-size: var(--ui-font-size-sm);
|
|
2706
|
+
--ui-menu-item-radius: var(--ui-radius-sm);
|
|
2707
|
+
padding: var(--ui-space-1);
|
|
2708
|
+
gap: 0;
|
|
2709
|
+
}
|
|
2710
|
+
[data-component~="ui-menu"][data-v-09be9e37] {
|
|
2693
2711
|
display: flex;
|
|
2694
2712
|
flex-direction: column;
|
|
2695
2713
|
box-sizing: border-box;
|
|
2696
2714
|
inline-size: max-content;
|
|
2697
|
-
min-inline-size: min(
|
|
2698
|
-
|
|
2699
|
-
calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2)
|
|
2700
|
-
);
|
|
2701
|
-
max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
|
|
2715
|
+
min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2));
|
|
2716
|
+
max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
|
|
2702
2717
|
padding: 0;
|
|
2703
2718
|
border: 0;
|
|
2704
2719
|
outline: 0;
|
|
@@ -2707,7 +2722,7 @@ svg[data-v-9ff7e192-s] {
|
|
|
2707
2722
|
box-shadow: none;
|
|
2708
2723
|
overflow: visible;
|
|
2709
2724
|
}
|
|
2710
|
-
.surface[data-v-
|
|
2725
|
+
.surface[data-v-09be9e37] {
|
|
2711
2726
|
display: flex;
|
|
2712
2727
|
flex-direction: column;
|
|
2713
2728
|
box-sizing: border-box;
|
|
@@ -2715,20 +2730,20 @@ svg[data-v-9ff7e192-s] {
|
|
|
2715
2730
|
padding: var(--ui-space-1);
|
|
2716
2731
|
background: var(--ui-surface-elevated);
|
|
2717
2732
|
border: 1px solid var(--ui-border-default);
|
|
2718
|
-
border-radius: var(--ui-radius-
|
|
2733
|
+
border-radius: var(--ui-radius-lg);
|
|
2719
2734
|
box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
|
|
2720
2735
|
max-block-size: inherit;
|
|
2721
2736
|
overflow: auto;
|
|
2722
2737
|
}
|
|
2723
|
-
[data-component~="ui-menu"][data-v-
|
|
2738
|
+
[data-component~="ui-menu"][data-v-09be9e37]:not([data-component~="ui-menu"][data-ui-menu-state~="internalOpen"]) {
|
|
2724
2739
|
display: none;
|
|
2725
2740
|
}
|
|
2726
|
-
[data-component~="ui-menu"][popover][data-v-
|
|
2741
|
+
[data-component~="ui-menu"][popover][data-v-09be9e37] {
|
|
2727
2742
|
position: fixed;
|
|
2728
2743
|
inset: auto;
|
|
2729
2744
|
margin: 0;
|
|
2730
2745
|
overflow: visible;
|
|
2731
|
-
max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2
|
|
2746
|
+
max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2)) * 2);
|
|
2732
2747
|
opacity: 0;
|
|
2733
2748
|
transform: translateY(-4px) scale(0.99);
|
|
2734
2749
|
transition:
|
|
@@ -2737,61 +2752,62 @@ svg[data-v-9ff7e192-s] {
|
|
|
2737
2752
|
display var(--ui-motion-fast) allow-discrete,
|
|
2738
2753
|
overlay var(--ui-motion-fast) allow-discrete;
|
|
2739
2754
|
}
|
|
2740
|
-
[data-component~="ui-menu"][popover][data-v-
|
|
2755
|
+
[data-component~="ui-menu"][popover][data-v-09be9e37]:popover-open {
|
|
2741
2756
|
opacity: 1;
|
|
2742
2757
|
transform: translateY(0) scale(1);
|
|
2743
2758
|
}
|
|
2744
2759
|
@starting-style {
|
|
2745
|
-
[data-component~="ui-menu"][popover][data-v-
|
|
2760
|
+
[data-component~="ui-menu"][popover][data-v-09be9e37]:popover-open {
|
|
2746
2761
|
opacity: 0;
|
|
2747
2762
|
transform: translateY(-4px) scale(0.99);
|
|
2748
2763
|
}
|
|
2749
2764
|
}
|
|
2750
|
-
[data-component~="ui-menu"][hidden][data-v-
|
|
2765
|
+
[data-component~="ui-menu"][hidden][data-v-09be9e37] {
|
|
2751
2766
|
display: none;
|
|
2752
2767
|
}
|
|
2753
2768
|
@media (prefers-reduced-motion: reduce) {
|
|
2754
|
-
[data-component~="ui-menu"][popover][data-v-
|
|
2769
|
+
[data-component~="ui-menu"][popover][data-v-09be9e37] {
|
|
2755
2770
|
transition: none;
|
|
2756
2771
|
}
|
|
2757
2772
|
}
|
|
2758
2773
|
|
|
2759
|
-
[data-component~="ui-menu-item"][data-v-
|
|
2774
|
+
[data-component~="ui-menu-item"][data-v-deb5a674] {
|
|
2760
2775
|
display: block;
|
|
2761
2776
|
box-sizing: border-box;
|
|
2762
2777
|
width: 100%;
|
|
2763
|
-
padding: var(--ui-
|
|
2778
|
+
padding: var(--ui-menu-item-padding-block, var(--ui-space-2))
|
|
2779
|
+
var(--ui-menu-item-padding-inline, var(--ui-space-3));
|
|
2764
2780
|
text-align: left;
|
|
2765
|
-
border-radius: var(--ui-radius-
|
|
2781
|
+
border-radius: var(--ui-menu-item-radius, var(--ui-radius-md));
|
|
2766
2782
|
color: var(--ui-text-primary);
|
|
2767
|
-
font-size: var(--ui-font-size-md);
|
|
2768
|
-
font-weight: var(--ui-font-medium
|
|
2783
|
+
font-size: var(--ui-menu-item-font-size, var(--ui-font-size-md));
|
|
2784
|
+
font-weight: var(--ui-font-medium);
|
|
2769
2785
|
cursor: pointer;
|
|
2770
2786
|
outline: none;
|
|
2771
2787
|
transition:
|
|
2772
2788
|
background-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
2773
2789
|
color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
2774
2790
|
}
|
|
2775
|
-
[data-component~="ui-menu-item"][data-v-
|
|
2776
|
-
background: var(--ui-surface-subtle);
|
|
2791
|
+
[data-component~="ui-menu-item"][data-v-deb5a674]:is(:hover, :focus-visible):not([aria-disabled="true"]) {
|
|
2792
|
+
background: var(--ui-menu-item-hover-surface, var(--ui-surface-subtle));
|
|
2777
2793
|
}
|
|
2778
|
-
[data-component~="ui-menu-item"][aria-disabled="true"][data-v-
|
|
2794
|
+
[data-component~="ui-menu-item"][aria-disabled="true"][data-v-deb5a674] {
|
|
2779
2795
|
opacity: 0.6;
|
|
2780
2796
|
cursor: not-allowed;
|
|
2781
2797
|
}
|
|
2782
2798
|
|
|
2783
2799
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
2784
|
-
[data-component~="ui-menu-item"][hidden][data-v-
|
|
2800
|
+
[data-component~="ui-menu-item"][hidden][data-v-deb5a674] {
|
|
2785
2801
|
display: none;
|
|
2786
2802
|
}
|
|
2787
2803
|
|
|
2788
|
-
[data-component~="ui-popover"][data-v-
|
|
2804
|
+
[data-component~="ui-popover"][data-v-c16079f0] {
|
|
2789
2805
|
box-sizing: border-box;
|
|
2790
2806
|
max-inline-size: min(
|
|
2791
2807
|
20rem,
|
|
2792
|
-
calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2
|
|
2808
|
+
calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2)
|
|
2793
2809
|
);
|
|
2794
|
-
max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2
|
|
2810
|
+
max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2)) * 2);
|
|
2795
2811
|
overflow: visible;
|
|
2796
2812
|
padding: 0;
|
|
2797
2813
|
border: 0;
|
|
@@ -2800,7 +2816,7 @@ svg[data-v-9ff7e192-s] {
|
|
|
2800
2816
|
background: transparent;
|
|
2801
2817
|
box-shadow: none;
|
|
2802
2818
|
}
|
|
2803
|
-
.surface[data-v-
|
|
2819
|
+
.surface[data-v-c16079f0] {
|
|
2804
2820
|
box-sizing: border-box;
|
|
2805
2821
|
max-inline-size: inherit;
|
|
2806
2822
|
max-block-size: inherit;
|
|
@@ -2808,13 +2824,13 @@ svg[data-v-9ff7e192-s] {
|
|
|
2808
2824
|
padding: var(--ui-space-3);
|
|
2809
2825
|
background: var(--ui-surface-elevated);
|
|
2810
2826
|
border: 1px solid var(--ui-border-default);
|
|
2811
|
-
border-radius: var(--ui-radius-
|
|
2827
|
+
border-radius: var(--ui-radius-lg);
|
|
2812
2828
|
box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
|
|
2813
2829
|
}
|
|
2814
|
-
[data-component~="ui-popover"][data-v-
|
|
2830
|
+
[data-component~="ui-popover"][data-v-c16079f0]:not([data-component~="ui-popover"][data-ui-popover-state~="internalOpen"]) {
|
|
2815
2831
|
display: none;
|
|
2816
2832
|
}
|
|
2817
|
-
[data-component~="ui-popover"][popover][data-v-
|
|
2833
|
+
[data-component~="ui-popover"][popover][data-v-c16079f0] {
|
|
2818
2834
|
position: fixed;
|
|
2819
2835
|
inset: auto;
|
|
2820
2836
|
margin: 0;
|
|
@@ -2826,21 +2842,21 @@ svg[data-v-9ff7e192-s] {
|
|
|
2826
2842
|
display var(--ui-motion-fast) allow-discrete,
|
|
2827
2843
|
overlay var(--ui-motion-fast) allow-discrete;
|
|
2828
2844
|
}
|
|
2829
|
-
[data-component~="ui-popover"][popover][data-v-
|
|
2845
|
+
[data-component~="ui-popover"][popover][data-v-c16079f0]:popover-open {
|
|
2830
2846
|
opacity: 1;
|
|
2831
2847
|
transform: translateY(0) scale(1);
|
|
2832
2848
|
}
|
|
2833
2849
|
@starting-style {
|
|
2834
|
-
[data-component~="ui-popover"][popover][data-v-
|
|
2850
|
+
[data-component~="ui-popover"][popover][data-v-c16079f0]:popover-open {
|
|
2835
2851
|
opacity: 0;
|
|
2836
2852
|
transform: translateY(-4px) scale(0.99);
|
|
2837
2853
|
}
|
|
2838
2854
|
}
|
|
2839
|
-
[data-component~="ui-popover"][hidden][data-v-
|
|
2855
|
+
[data-component~="ui-popover"][hidden][data-v-c16079f0] {
|
|
2840
2856
|
display: none;
|
|
2841
2857
|
}
|
|
2842
2858
|
@media (prefers-reduced-motion: reduce) {
|
|
2843
|
-
[data-component~="ui-popover"][popover][data-v-
|
|
2859
|
+
[data-component~="ui-popover"][popover][data-v-c16079f0] {
|
|
2844
2860
|
transition: none;
|
|
2845
2861
|
}
|
|
2846
2862
|
}
|
|
@@ -2912,8 +2928,8 @@ legend[data-v-df092584] + * {
|
|
|
2912
2928
|
display: none;
|
|
2913
2929
|
}
|
|
2914
2930
|
|
|
2915
|
-
[data-component~="ui-reel"][data-v-
|
|
2916
|
-
--_reel-gap: var(--ui-space-4
|
|
2931
|
+
[data-component~="ui-reel"][data-v-0dde8279] {
|
|
2932
|
+
--_reel-gap: var(--ui-space-4);
|
|
2917
2933
|
--_reel-item-width: auto;
|
|
2918
2934
|
display: flex;
|
|
2919
2935
|
inline-size: 100%;
|
|
@@ -2925,133 +2941,130 @@ legend[data-v-df092584] + * {
|
|
|
2925
2941
|
overflow-y: hidden;
|
|
2926
2942
|
overscroll-behavior-inline: contain;
|
|
2927
2943
|
}
|
|
2928
|
-
[data-component~="ui-reel"] > [data-v-
|
|
2944
|
+
[data-component~="ui-reel"] > [data-v-0dde8279-s] {
|
|
2929
2945
|
min-inline-size: 0;
|
|
2930
2946
|
flex: 0 0 var(--ui-reel-item-width, var(--_reel-item-width));
|
|
2931
2947
|
}
|
|
2932
|
-
[data-component~="ui-reel"][data-ui-reel-state~="gap=xs"][data-v-
|
|
2933
|
-
--_reel-gap: var(--ui-space-2
|
|
2948
|
+
[data-component~="ui-reel"][data-ui-reel-state~="gap=xs"][data-v-0dde8279] {
|
|
2949
|
+
--_reel-gap: var(--ui-space-2);
|
|
2934
2950
|
}
|
|
2935
|
-
[data-component~="ui-reel"][data-ui-reel-state~="gap=s"][data-v-
|
|
2936
|
-
--_reel-gap: var(--ui-space-3
|
|
2951
|
+
[data-component~="ui-reel"][data-ui-reel-state~="gap=s"][data-v-0dde8279] {
|
|
2952
|
+
--_reel-gap: var(--ui-space-3);
|
|
2937
2953
|
}
|
|
2938
|
-
[data-component~="ui-reel"][data-ui-reel-state~="gap=m"][data-v-
|
|
2939
|
-
--_reel-gap: var(--ui-space-4
|
|
2954
|
+
[data-component~="ui-reel"][data-ui-reel-state~="gap=m"][data-v-0dde8279] {
|
|
2955
|
+
--_reel-gap: var(--ui-space-4);
|
|
2940
2956
|
}
|
|
2941
|
-
[data-component~="ui-reel"][data-ui-reel-state~="gap=l"][data-v-
|
|
2942
|
-
--_reel-gap: var(--ui-space-5
|
|
2957
|
+
[data-component~="ui-reel"][data-ui-reel-state~="gap=l"][data-v-0dde8279] {
|
|
2958
|
+
--_reel-gap: var(--ui-space-5);
|
|
2943
2959
|
}
|
|
2944
|
-
[data-component~="ui-reel"][data-ui-reel-state~="gap=xl"][data-v-
|
|
2945
|
-
--_reel-gap: var(--ui-space-6
|
|
2960
|
+
[data-component~="ui-reel"][data-ui-reel-state~="gap=xl"][data-v-0dde8279] {
|
|
2961
|
+
--_reel-gap: var(--ui-space-6);
|
|
2946
2962
|
}
|
|
2947
|
-
[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=sm"][data-v-
|
|
2963
|
+
[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=sm"][data-v-0dde8279] {
|
|
2948
2964
|
--_reel-item-width: 12rem;
|
|
2949
2965
|
}
|
|
2950
|
-
[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=md"][data-v-
|
|
2966
|
+
[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=md"][data-v-0dde8279] {
|
|
2951
2967
|
--_reel-item-width: 16rem;
|
|
2952
2968
|
}
|
|
2953
|
-
[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=lg"][data-v-
|
|
2969
|
+
[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=lg"][data-v-0dde8279] {
|
|
2954
2970
|
--_reel-item-width: 20rem;
|
|
2955
2971
|
}
|
|
2956
|
-
[data-component~="ui-reel"][data-ui-reel-state~="snap"][data-v-
|
|
2972
|
+
[data-component~="ui-reel"][data-ui-reel-state~="snap"][data-v-0dde8279] {
|
|
2957
2973
|
scroll-snap-type: inline mandatory;
|
|
2958
2974
|
}
|
|
2959
|
-
[data-component~="ui-reel"][data-ui-reel-state~="snap=start"] > [data-v-
|
|
2975
|
+
[data-component~="ui-reel"][data-ui-reel-state~="snap=start"] > [data-v-0dde8279-s] {
|
|
2960
2976
|
scroll-snap-align: start;
|
|
2961
2977
|
}
|
|
2962
|
-
[data-component~="ui-reel"][data-ui-reel-state~="snap=center"] > [data-v-
|
|
2978
|
+
[data-component~="ui-reel"][data-ui-reel-state~="snap=center"] > [data-v-0dde8279-s] {
|
|
2963
2979
|
scroll-snap-align: center;
|
|
2964
2980
|
}
|
|
2965
2981
|
|
|
2966
2982
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
2967
|
-
[data-component~="ui-reel"][hidden][data-v-
|
|
2983
|
+
[data-component~="ui-reel"][hidden][data-v-0dde8279] {
|
|
2968
2984
|
display: none;
|
|
2969
2985
|
}
|
|
2970
2986
|
|
|
2971
|
-
[data-component~="ui-search-result-row"][data-v-
|
|
2987
|
+
[data-component~="ui-search-result-row"][data-v-7d88a5d4] {
|
|
2972
2988
|
appearance: none;
|
|
2973
2989
|
inline-size: 100%;
|
|
2974
2990
|
min-block-size: var(--ui-search-result-row-min-height, 56px);
|
|
2975
2991
|
margin: 0;
|
|
2976
|
-
padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3
|
|
2977
|
-
padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4
|
|
2992
|
+
padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3));
|
|
2993
|
+
padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4));
|
|
2978
2994
|
display: flex;
|
|
2979
2995
|
align-items: flex-start;
|
|
2980
|
-
gap: var(--ui-search-result-row-gap, var(--ui-space-3
|
|
2981
|
-
background: var(--ui-search-result-row-
|
|
2996
|
+
gap: var(--ui-search-result-row-gap, var(--ui-space-3));
|
|
2997
|
+
background: var(--ui-search-result-row-surface, transparent);
|
|
2982
2998
|
border: none;
|
|
2983
|
-
border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border
|
|
2999
|
+
border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border));
|
|
2984
3000
|
color: inherit;
|
|
2985
3001
|
cursor: pointer;
|
|
2986
3002
|
text-align: left;
|
|
2987
|
-
transition: background-color var(--ui-motion-fast
|
|
3003
|
+
transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
2988
3004
|
}
|
|
2989
|
-
[data-component~="ui-search-result-row"][data-v-
|
|
3005
|
+
[data-component~="ui-search-result-row"][data-v-7d88a5d4]:last-child {
|
|
2990
3006
|
border-block-end: none;
|
|
2991
3007
|
}
|
|
2992
|
-
[data-component~="ui-search-result-row"][data-v-
|
|
3008
|
+
[data-component~="ui-search-result-row"][data-v-7d88a5d4]:hover:enabled {
|
|
2993
3009
|
background: var(
|
|
2994
|
-
--ui-search-result-row-hover-
|
|
2995
|
-
color-mix(in srgb, var(--ui-surface
|
|
3010
|
+
--ui-search-result-row-hover-surface,
|
|
3011
|
+
color-mix(in srgb, var(--ui-surface) 85%, black 3%)
|
|
2996
3012
|
);
|
|
2997
3013
|
}
|
|
2998
|
-
[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-
|
|
3014
|
+
[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"][data-v-7d88a5d4] {
|
|
2999
3015
|
background: var(
|
|
3000
3016
|
--ui-search-result-row-selected-bg,
|
|
3001
|
-
var(
|
|
3002
|
-
--ui-search-result-row-hover-bg,
|
|
3003
|
-
color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%)
|
|
3004
|
-
)
|
|
3017
|
+
var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
|
|
3005
3018
|
);
|
|
3006
3019
|
}
|
|
3007
|
-
[data-component~="ui-search-result-row"][data-v-
|
|
3008
|
-
outline: 2px solid var(--ui-focus-ring
|
|
3020
|
+
[data-component~="ui-search-result-row"][data-v-7d88a5d4]:focus-visible {
|
|
3021
|
+
outline: 2px solid var(--ui-focus-ring);
|
|
3009
3022
|
outline-offset: -2px;
|
|
3010
3023
|
}
|
|
3011
|
-
[data-component~="ui-search-result-row"][data-v-
|
|
3024
|
+
[data-component~="ui-search-result-row"][data-v-7d88a5d4]:disabled {
|
|
3012
3025
|
opacity: 0.6;
|
|
3013
3026
|
cursor: not-allowed;
|
|
3014
3027
|
}
|
|
3015
|
-
.leading[data-v-
|
|
3016
|
-
.trailing[data-v-
|
|
3028
|
+
.leading[data-v-7d88a5d4],
|
|
3029
|
+
.trailing[data-v-7d88a5d4] {
|
|
3017
3030
|
display: inline-flex;
|
|
3018
3031
|
align-items: flex-start;
|
|
3019
3032
|
flex-shrink: 0;
|
|
3020
3033
|
}
|
|
3021
|
-
.content[data-v-
|
|
3034
|
+
.content[data-v-7d88a5d4] {
|
|
3022
3035
|
min-inline-size: 0;
|
|
3023
3036
|
flex: 1;
|
|
3024
3037
|
display: flex;
|
|
3025
3038
|
flex-direction: column;
|
|
3026
3039
|
}
|
|
3027
|
-
.title[data-v-
|
|
3028
|
-
.meta[data-v-
|
|
3029
|
-
.excerpt[data-v-
|
|
3040
|
+
.title[data-v-7d88a5d4],
|
|
3041
|
+
.meta[data-v-7d88a5d4],
|
|
3042
|
+
.excerpt[data-v-7d88a5d4] {
|
|
3030
3043
|
display: block;
|
|
3031
3044
|
min-inline-size: 0;
|
|
3032
3045
|
}
|
|
3033
3046
|
|
|
3034
3047
|
/* An unused region takes no space. */
|
|
3035
|
-
.leading[data-v-
|
|
3036
|
-
.meta[data-v-
|
|
3037
|
-
.excerpt[data-v-
|
|
3038
|
-
.trailing[data-v-
|
|
3048
|
+
.leading[data-v-7d88a5d4]:empty,
|
|
3049
|
+
.meta[data-v-7d88a5d4]:empty,
|
|
3050
|
+
.excerpt[data-v-7d88a5d4]:empty,
|
|
3051
|
+
.trailing[data-v-7d88a5d4]:empty {
|
|
3039
3052
|
display: none;
|
|
3040
3053
|
}
|
|
3041
|
-
[slot="title"][data-v-
|
|
3054
|
+
[slot="title"][data-v-7d88a5d4-s],[slot="meta"][data-v-7d88a5d4-s],[slot="excerpt"][data-v-7d88a5d4-s] {
|
|
3042
3055
|
display: block;
|
|
3043
3056
|
margin: 0;
|
|
3044
3057
|
}
|
|
3045
3058
|
|
|
3046
3059
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3047
|
-
[data-component~="ui-search-result-row"][hidden][data-v-
|
|
3060
|
+
[data-component~="ui-search-result-row"][hidden][data-v-7d88a5d4] {
|
|
3048
3061
|
display: none;
|
|
3049
3062
|
}
|
|
3050
3063
|
|
|
3051
|
-
[data-component~="ui-search-shell"][data-v-
|
|
3064
|
+
[data-component~="ui-search-shell"][data-v-976b649d] {
|
|
3052
3065
|
display: contents;
|
|
3053
3066
|
}
|
|
3054
|
-
dialog[data-v-
|
|
3067
|
+
dialog[data-v-976b649d] {
|
|
3055
3068
|
position: fixed;
|
|
3056
3069
|
inset: 0;
|
|
3057
3070
|
z-index: var(--ui-search-shell-z-index, 400);
|
|
@@ -3069,10 +3082,10 @@ dialog[data-v-7aa92a93] {
|
|
|
3069
3082
|
background: var(--ui-overlay-backdrop);
|
|
3070
3083
|
color: var(--ui-text-primary);
|
|
3071
3084
|
}
|
|
3072
|
-
dialog[data-v-
|
|
3085
|
+
dialog[data-v-976b649d]::backdrop {
|
|
3073
3086
|
background: var(--ui-overlay-backdrop);
|
|
3074
3087
|
}
|
|
3075
|
-
.panel[data-v-
|
|
3088
|
+
.panel[data-v-976b649d] {
|
|
3076
3089
|
position: relative;
|
|
3077
3090
|
display: flex;
|
|
3078
3091
|
flex-direction: column;
|
|
@@ -3080,12 +3093,12 @@ dialog[data-v-7aa92a93]::backdrop {
|
|
|
3080
3093
|
max-block-size: var(--ui-search-shell-max-height, 80vh);
|
|
3081
3094
|
margin-inline: auto;
|
|
3082
3095
|
overflow: hidden;
|
|
3083
|
-
background: var(--ui-search-shell-
|
|
3096
|
+
background: var(--ui-search-shell-surface, var(--ui-surface-elevated));
|
|
3084
3097
|
border: 1px solid var(--ui-search-shell-border, var(--ui-border-default));
|
|
3085
3098
|
border-radius: var(--ui-search-shell-radius, var(--ui-radius-dialog));
|
|
3086
3099
|
box-shadow: var(--ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
|
|
3087
3100
|
}
|
|
3088
|
-
.search[data-v-
|
|
3101
|
+
.search[data-v-976b649d] {
|
|
3089
3102
|
padding: var(--ui-space-3);
|
|
3090
3103
|
border-block-end: 1px solid var(--ui-border-default);
|
|
3091
3104
|
transition:
|
|
@@ -3094,40 +3107,40 @@ dialog[data-v-7aa92a93]::backdrop {
|
|
|
3094
3107
|
}
|
|
3095
3108
|
|
|
3096
3109
|
/* The search region shows where typing goes, whatever the author put in it. */
|
|
3097
|
-
.search[data-v-
|
|
3110
|
+
.search[data-v-976b649d]:focus-within {
|
|
3098
3111
|
border-block-end-color: var(--ui-search-shell-focus-color, var(--ui-control-focus));
|
|
3099
3112
|
box-shadow: inset 0 -1px 0 var(--ui-search-shell-focus-color, var(--ui-control-focus));
|
|
3100
3113
|
}
|
|
3101
|
-
input[slot="search"][data-v-
|
|
3114
|
+
input[slot="search"][data-v-976b649d-s] {
|
|
3102
3115
|
box-sizing: border-box;
|
|
3103
3116
|
inline-size: 100%;
|
|
3104
3117
|
min-block-size: var(--ui-control-min-block-size);
|
|
3105
3118
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
3106
3119
|
border: 1px solid var(--ui-control-border);
|
|
3107
|
-
border-radius: var(--ui-radius-
|
|
3120
|
+
border-radius: var(--ui-radius-md);
|
|
3108
3121
|
background: var(--ui-control-surface);
|
|
3109
3122
|
color: var(--ui-text-primary);
|
|
3110
3123
|
font: inherit;
|
|
3111
3124
|
box-shadow: var(--ui-shadow-xs);
|
|
3112
3125
|
}
|
|
3113
|
-
input[slot="search"][data-v-
|
|
3126
|
+
input[slot="search"][data-v-976b649d-s]:focus-visible {
|
|
3114
3127
|
border-color: var(--ui-control-focus);
|
|
3115
|
-
outline: 2px solid var(--ui-focus-ring
|
|
3128
|
+
outline: 2px solid var(--ui-focus-ring);
|
|
3116
3129
|
outline-offset: 2px;
|
|
3117
3130
|
}
|
|
3118
|
-
.status[data-v-
|
|
3119
|
-
.footer[data-v-
|
|
3131
|
+
.status[data-v-976b649d],
|
|
3132
|
+
.footer[data-v-976b649d] {
|
|
3120
3133
|
flex-shrink: 0;
|
|
3121
3134
|
padding: var(--ui-space-2) var(--ui-space-4);
|
|
3122
3135
|
color: var(--ui-text-secondary);
|
|
3123
3136
|
font-size: var(--ui-font-size-sm);
|
|
3124
3137
|
}
|
|
3125
|
-
.status[data-v-
|
|
3138
|
+
.status[data-v-976b649d] {
|
|
3126
3139
|
border-block-end: 1px solid var(--ui-border-default);
|
|
3127
3140
|
}
|
|
3128
3141
|
|
|
3129
3142
|
/* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
|
|
3130
|
-
.footer[data-v-
|
|
3143
|
+
.footer[data-v-976b649d] {
|
|
3131
3144
|
display: flex;
|
|
3132
3145
|
flex-wrap: wrap;
|
|
3133
3146
|
align-items: center;
|
|
@@ -3136,21 +3149,21 @@ input[slot="search"][data-v-7aa92a93-s]:focus-visible {
|
|
|
3136
3149
|
padding: var(--ui-space-3) var(--ui-space-4);
|
|
3137
3150
|
border-block-start: 1px solid var(--ui-border-default);
|
|
3138
3151
|
}
|
|
3139
|
-
.status[data-v-
|
|
3140
|
-
.footer[data-v-
|
|
3152
|
+
.status[data-v-976b649d]:empty,
|
|
3153
|
+
.footer[data-v-976b649d]:empty {
|
|
3141
3154
|
display: none;
|
|
3142
3155
|
}
|
|
3143
|
-
.body[data-v-
|
|
3156
|
+
.body[data-v-976b649d] {
|
|
3144
3157
|
flex: 1;
|
|
3145
3158
|
min-block-size: 0;
|
|
3146
3159
|
overflow: auto;
|
|
3147
3160
|
padding: var(--ui-space-2);
|
|
3148
3161
|
}
|
|
3149
3162
|
@media (max-width: 47.9375rem) {
|
|
3150
|
-
dialog[data-v-
|
|
3163
|
+
dialog[data-v-976b649d] {
|
|
3151
3164
|
padding: 0;
|
|
3152
3165
|
}
|
|
3153
|
-
.panel[data-v-
|
|
3166
|
+
.panel[data-v-976b649d] {
|
|
3154
3167
|
inline-size: 100%;
|
|
3155
3168
|
min-block-size: 100dvh;
|
|
3156
3169
|
max-block-size: none;
|
|
@@ -3160,20 +3173,20 @@ dialog[data-v-7aa92a93] {
|
|
|
3160
3173
|
}
|
|
3161
3174
|
|
|
3162
3175
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3163
|
-
[data-component~="ui-search-shell"][hidden][data-v-
|
|
3176
|
+
[data-component~="ui-search-shell"][hidden][data-v-976b649d] {
|
|
3164
3177
|
display: none;
|
|
3165
3178
|
}
|
|
3166
3179
|
|
|
3167
|
-
[data-component~="ui-select"][data-v-
|
|
3180
|
+
[data-component~="ui-select"][data-v-01335c35] {
|
|
3168
3181
|
box-sizing: border-box;
|
|
3169
3182
|
display: inline-block;
|
|
3170
3183
|
inline-size: 100%;
|
|
3171
3184
|
min-inline-size: 0;
|
|
3172
|
-
min-block-size: var(--ui-control-size-md
|
|
3185
|
+
min-block-size: var(--ui-control-size-md);
|
|
3173
3186
|
margin: 0;
|
|
3174
3187
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
3175
3188
|
border: 1px solid var(--ui-control-border, var(--ui-border-strong));
|
|
3176
|
-
border-radius: var(--ui-select-radius, var(--ui-radius-
|
|
3189
|
+
border-radius: var(--ui-select-radius, var(--ui-radius-md));
|
|
3177
3190
|
background-color: var(--ui-control-surface, var(--ui-surface-elevated));
|
|
3178
3191
|
color: var(--ui-text-primary);
|
|
3179
3192
|
color-scheme: light dark;
|
|
@@ -3188,7 +3201,7 @@ dialog[data-v-7aa92a93] {
|
|
|
3188
3201
|
|
|
3189
3202
|
/* Single selects draw their own chevron: the native caret cannot be inset or sized consistently.
|
|
3190
3203
|
* The root stays a native <s-lect>, so the icon is a background image rather than an element. */
|
|
3191
|
-
[data-component~="ui-select"][data-v-
|
|
3204
|
+
[data-component~="ui-select"][data-v-01335c35]:not([multiple]) {
|
|
3192
3205
|
appearance: none;
|
|
3193
3206
|
padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
|
|
3194
3207
|
background-image: var(
|
|
@@ -3199,10 +3212,10 @@ dialog[data-v-7aa92a93] {
|
|
|
3199
3212
|
background-position: right var(--ui-space-3) center;
|
|
3200
3213
|
background-size: 1.125rem 1.125rem;
|
|
3201
3214
|
}
|
|
3202
|
-
[data-component~="ui-select"][data-v-
|
|
3215
|
+
[data-component~="ui-select"][data-v-01335c35]:hover:not(:focus):not(:disabled) {
|
|
3203
3216
|
border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
|
|
3204
3217
|
}
|
|
3205
|
-
[data-component~="ui-select"][data-v-
|
|
3218
|
+
[data-component~="ui-select"][data-v-01335c35]:focus-visible {
|
|
3206
3219
|
border-color: var(--ui-control-focus, var(--ui-accent-solid));
|
|
3207
3220
|
outline: none;
|
|
3208
3221
|
box-shadow: var(
|
|
@@ -3213,29 +3226,29 @@ dialog[data-v-7aa92a93] {
|
|
|
3213
3226
|
}
|
|
3214
3227
|
|
|
3215
3228
|
/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
|
|
3216
|
-
[data-component~="ui-select"][aria-invalid="true"][data-v-
|
|
3217
|
-
[data-component~="ui-select"][data-v-
|
|
3229
|
+
[data-component~="ui-select"][aria-invalid="true"][data-v-01335c35],
|
|
3230
|
+
[data-component~="ui-select"][data-v-01335c35]:is(:user-invalid, [data-user-invalid]) {
|
|
3218
3231
|
border-color: var(--ui-danger-solid);
|
|
3219
3232
|
}
|
|
3220
|
-
[data-component~="ui-select"][data-v-
|
|
3233
|
+
[data-component~="ui-select"][data-v-01335c35]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
|
|
3221
3234
|
box-shadow:
|
|
3222
3235
|
var(--ui-control-inset),
|
|
3223
3236
|
0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
|
|
3224
3237
|
}
|
|
3225
|
-
[data-component~="ui-select"][data-v-
|
|
3238
|
+
[data-component~="ui-select"][data-v-01335c35]:disabled {
|
|
3226
3239
|
background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
3227
3240
|
color: var(--ui-text-muted);
|
|
3228
3241
|
box-shadow: none;
|
|
3229
3242
|
cursor: not-allowed;
|
|
3230
3243
|
}
|
|
3231
|
-
[data-component~="ui-select"][multiple][data-v-
|
|
3232
|
-
[data-component~="ui-select"][size][data-v-
|
|
3244
|
+
[data-component~="ui-select"][multiple][data-v-01335c35],
|
|
3245
|
+
[data-component~="ui-select"][size][data-v-01335c35]:not([size="1"]) {
|
|
3233
3246
|
min-block-size: 7rem;
|
|
3234
3247
|
padding: var(--ui-space-2);
|
|
3235
3248
|
}
|
|
3236
3249
|
|
|
3237
3250
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3238
|
-
[data-component~="ui-select"][hidden][data-v-
|
|
3251
|
+
[data-component~="ui-select"][hidden][data-v-01335c35] {
|
|
3239
3252
|
display: none;
|
|
3240
3253
|
}
|
|
3241
3254
|
|
|
@@ -3252,7 +3265,7 @@ hr[aria-orientation="vertical"][data-v-f0034397] {
|
|
|
3252
3265
|
border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
|
|
3253
3266
|
}
|
|
3254
3267
|
|
|
3255
|
-
[data-component~="ui-sidebar"][data-v-
|
|
3268
|
+
[data-component~="ui-sidebar"][data-v-a2e22569] {
|
|
3256
3269
|
position: relative;
|
|
3257
3270
|
box-sizing: border-box;
|
|
3258
3271
|
display: flex;
|
|
@@ -3264,21 +3277,21 @@ hr[aria-orientation="vertical"][data-v-f0034397] {
|
|
|
3264
3277
|
background: var(--ui-sidebar-surface, var(--ui-surface-default));
|
|
3265
3278
|
border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
|
|
3266
3279
|
}
|
|
3267
|
-
[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-v-
|
|
3280
|
+
[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-v-a2e22569] {
|
|
3268
3281
|
border-inline-end: 0;
|
|
3269
3282
|
border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
|
|
3270
3283
|
}
|
|
3271
|
-
.content[data-v-
|
|
3284
|
+
.content[data-v-a2e22569] {
|
|
3272
3285
|
flex: 1;
|
|
3273
3286
|
min-block-size: 0;
|
|
3274
3287
|
overflow: auto;
|
|
3275
3288
|
}
|
|
3276
3289
|
|
|
3277
3290
|
/* Collapsed while docked. */
|
|
3278
|
-
[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"][data-v-
|
|
3291
|
+
[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"][data-v-a2e22569]:not([popover]) {
|
|
3279
3292
|
display: none;
|
|
3280
3293
|
}
|
|
3281
|
-
.resizer[data-v-
|
|
3294
|
+
.resizer[data-v-a2e22569] {
|
|
3282
3295
|
position: absolute;
|
|
3283
3296
|
z-index: 1;
|
|
3284
3297
|
inset-block: 0;
|
|
@@ -3291,15 +3304,15 @@ hr[aria-orientation="vertical"][data-v-f0034397] {
|
|
|
3291
3304
|
touch-action: none;
|
|
3292
3305
|
outline: none;
|
|
3293
3306
|
}
|
|
3294
|
-
.resizer[hidden][data-v-
|
|
3307
|
+
.resizer[hidden][data-v-a2e22569] {
|
|
3295
3308
|
display: none;
|
|
3296
3309
|
}
|
|
3297
|
-
[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] .resizer[data-v-
|
|
3310
|
+
[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] .resizer[data-v-a2e22569] {
|
|
3298
3311
|
inset-inline-end: auto;
|
|
3299
3312
|
inset-inline-start: 0;
|
|
3300
3313
|
transform: translateX(-50%);
|
|
3301
3314
|
}
|
|
3302
|
-
.resizer[data-v-
|
|
3315
|
+
.resizer[data-v-a2e22569]::after {
|
|
3303
3316
|
content: "";
|
|
3304
3317
|
position: absolute;
|
|
3305
3318
|
inset-block: 0;
|
|
@@ -3310,40 +3323,35 @@ hr[aria-orientation="vertical"][data-v-f0034397] {
|
|
|
3310
3323
|
var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%,
|
|
3311
3324
|
transparent
|
|
3312
3325
|
);
|
|
3313
|
-
opacity: var(--ui-affordance-guide-opacity
|
|
3326
|
+
opacity: var(--ui-affordance-guide-opacity);
|
|
3314
3327
|
transition:
|
|
3315
|
-
background-color var(--ui-affordance-motion, var(--ui-motion-fast
|
|
3316
|
-
var(--ui-motion
|
|
3317
|
-
opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
|
|
3328
|
+
background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
|
|
3329
|
+
opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
|
|
3318
3330
|
}
|
|
3319
|
-
.guide[data-v-
|
|
3331
|
+
.guide[data-v-a2e22569] {
|
|
3320
3332
|
position: absolute;
|
|
3321
3333
|
inset-block-start: 50%;
|
|
3322
3334
|
inset-inline-start: 50%;
|
|
3323
3335
|
inline-size: 6px;
|
|
3324
3336
|
block-size: 22px;
|
|
3325
|
-
border: 1px solid var(--ui-border-strong
|
|
3326
|
-
border-radius: var(--ui-radius-round
|
|
3327
|
-
background: var(--ui-surface-elevated
|
|
3337
|
+
border: 1px solid var(--ui-border-strong);
|
|
3338
|
+
border-radius: var(--ui-radius-round);
|
|
3339
|
+
background: var(--ui-surface-elevated);
|
|
3328
3340
|
opacity: 0;
|
|
3329
3341
|
transform: translate(-50%, -50%);
|
|
3330
|
-
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast
|
|
3331
|
-
var(--ui-motion-ease, ease);
|
|
3342
|
+
transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
|
|
3332
3343
|
pointer-events: none;
|
|
3333
3344
|
}
|
|
3334
|
-
.resizer[data-v-
|
|
3335
|
-
background: var(
|
|
3336
|
-
--ui-affordance-direct-color,
|
|
3337
|
-
var(--ui-accent-solid, var(--ui-color-focus, Highlight))
|
|
3338
|
-
);
|
|
3345
|
+
.resizer[data-v-a2e22569]:is(:hover, :focus-visible)::after {
|
|
3346
|
+
background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
|
|
3339
3347
|
opacity: 1;
|
|
3340
3348
|
}
|
|
3341
|
-
.resizer:is(:hover, :focus-visible) > .guide[data-v-
|
|
3349
|
+
.resizer:is(:hover, :focus-visible) > .guide[data-v-a2e22569] {
|
|
3342
3350
|
opacity: 1;
|
|
3343
3351
|
}
|
|
3344
3352
|
|
|
3345
3353
|
/* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
|
|
3346
|
-
[data-component~="ui-sidebar"][popover][data-v-
|
|
3354
|
+
[data-component~="ui-sidebar"][popover][data-v-a2e22569] {
|
|
3347
3355
|
position: fixed;
|
|
3348
3356
|
inset-block: 0;
|
|
3349
3357
|
inset-inline-start: 0;
|
|
@@ -3357,47 +3365,47 @@ hr[aria-orientation="vertical"][data-v-f0034397] {
|
|
|
3357
3365
|
box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
|
|
3358
3366
|
transform: translateX(0);
|
|
3359
3367
|
transition:
|
|
3360
|
-
transform var(--ui-motion-base
|
|
3361
|
-
display var(--ui-motion-base
|
|
3362
|
-
overlay var(--ui-motion-base
|
|
3368
|
+
transform var(--ui-motion-base) var(--ui-motion-ease-out),
|
|
3369
|
+
display var(--ui-motion-base) allow-discrete,
|
|
3370
|
+
overlay var(--ui-motion-base) allow-discrete;
|
|
3363
3371
|
}
|
|
3364
3372
|
|
|
3365
3373
|
/* The author display above would otherwise override the UA rule that hides a closed popover. */
|
|
3366
|
-
[data-component~="ui-sidebar"][popover][data-v-
|
|
3374
|
+
[data-component~="ui-sidebar"][popover][data-v-a2e22569]:not(:popover-open) {
|
|
3367
3375
|
display: none;
|
|
3368
3376
|
transform: translateX(-100%);
|
|
3369
3377
|
}
|
|
3370
|
-
[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-
|
|
3378
|
+
[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-a2e22569] {
|
|
3371
3379
|
inset-inline-start: auto;
|
|
3372
3380
|
inset-inline-end: 0;
|
|
3373
3381
|
}
|
|
3374
|
-
[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-
|
|
3382
|
+
[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-a2e22569]:not(:popover-open) {
|
|
3375
3383
|
transform: translateX(100%);
|
|
3376
3384
|
}
|
|
3377
3385
|
@starting-style {
|
|
3378
|
-
[data-component~="ui-sidebar"][popover][data-v-
|
|
3386
|
+
[data-component~="ui-sidebar"][popover][data-v-a2e22569]:popover-open {
|
|
3379
3387
|
transform: translateX(-100%);
|
|
3380
3388
|
}
|
|
3381
|
-
[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-
|
|
3389
|
+
[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-a2e22569]:popover-open {
|
|
3382
3390
|
transform: translateX(100%);
|
|
3383
3391
|
}
|
|
3384
3392
|
}
|
|
3385
|
-
[data-component~="ui-sidebar"][popover][data-v-
|
|
3393
|
+
[data-component~="ui-sidebar"][popover][data-v-a2e22569]::backdrop {
|
|
3386
3394
|
background: var(--ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
|
|
3387
3395
|
}
|
|
3388
3396
|
@media (prefers-reduced-motion: reduce) {
|
|
3389
|
-
[data-component~="ui-sidebar"][popover][data-v-
|
|
3397
|
+
[data-component~="ui-sidebar"][popover][data-v-a2e22569] {
|
|
3390
3398
|
transition: none;
|
|
3391
3399
|
}
|
|
3392
3400
|
}
|
|
3393
3401
|
|
|
3394
3402
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3395
|
-
[data-component~="ui-sidebar"][hidden][data-v-
|
|
3403
|
+
[data-component~="ui-sidebar"][hidden][data-v-a2e22569] {
|
|
3396
3404
|
display: none;
|
|
3397
3405
|
}
|
|
3398
3406
|
|
|
3399
|
-
[data-component~="ui-stack"][data-v-
|
|
3400
|
-
--_layout-gap: var(--ui-space-4
|
|
3407
|
+
[data-component~="ui-stack"][data-v-aa8062a9] {
|
|
3408
|
+
--_layout-gap: var(--ui-space-4);
|
|
3401
3409
|
display: flex;
|
|
3402
3410
|
flex-direction: column;
|
|
3403
3411
|
align-items: stretch;
|
|
@@ -3406,42 +3414,42 @@ hr[aria-orientation="vertical"][data-v-f0034397] {
|
|
|
3406
3414
|
max-inline-size: 100%;
|
|
3407
3415
|
margin: 0;
|
|
3408
3416
|
}
|
|
3409
|
-
[data-component~="ui-stack"][data-ui-stack-state~="gap=xs"][data-v-
|
|
3410
|
-
--_layout-gap: var(--ui-space-2
|
|
3417
|
+
[data-component~="ui-stack"][data-ui-stack-state~="gap=xs"][data-v-aa8062a9] {
|
|
3418
|
+
--_layout-gap: var(--ui-space-2);
|
|
3411
3419
|
}
|
|
3412
|
-
[data-component~="ui-stack"][data-ui-stack-state~="gap=s"][data-v-
|
|
3413
|
-
--_layout-gap: var(--ui-space-3
|
|
3420
|
+
[data-component~="ui-stack"][data-ui-stack-state~="gap=s"][data-v-aa8062a9] {
|
|
3421
|
+
--_layout-gap: var(--ui-space-3);
|
|
3414
3422
|
}
|
|
3415
|
-
[data-component~="ui-stack"][data-ui-stack-state~="gap=m"][data-v-
|
|
3416
|
-
--_layout-gap: var(--ui-space-4
|
|
3423
|
+
[data-component~="ui-stack"][data-ui-stack-state~="gap=m"][data-v-aa8062a9] {
|
|
3424
|
+
--_layout-gap: var(--ui-space-4);
|
|
3417
3425
|
}
|
|
3418
|
-
[data-component~="ui-stack"][data-ui-stack-state~="gap=l"][data-v-
|
|
3419
|
-
--_layout-gap: var(--ui-space-5
|
|
3426
|
+
[data-component~="ui-stack"][data-ui-stack-state~="gap=l"][data-v-aa8062a9] {
|
|
3427
|
+
--_layout-gap: var(--ui-space-5);
|
|
3420
3428
|
}
|
|
3421
|
-
[data-component~="ui-stack"][data-ui-stack-state~="gap=xl"][data-v-
|
|
3422
|
-
--_layout-gap: var(--ui-space-6
|
|
3429
|
+
[data-component~="ui-stack"][data-ui-stack-state~="gap=xl"][data-v-aa8062a9] {
|
|
3430
|
+
--_layout-gap: var(--ui-space-6);
|
|
3423
3431
|
}
|
|
3424
|
-
[data-component~="ui-stack"][data-ui-stack-state~="align=start"][data-v-
|
|
3432
|
+
[data-component~="ui-stack"][data-ui-stack-state~="align=start"][data-v-aa8062a9] {
|
|
3425
3433
|
align-items: flex-start;
|
|
3426
3434
|
}
|
|
3427
|
-
[data-component~="ui-stack"][data-ui-stack-state~="align=center"][data-v-
|
|
3435
|
+
[data-component~="ui-stack"][data-ui-stack-state~="align=center"][data-v-aa8062a9] {
|
|
3428
3436
|
align-items: center;
|
|
3429
3437
|
}
|
|
3430
|
-
[data-component~="ui-stack"][data-ui-stack-state~="align=end"][data-v-
|
|
3438
|
+
[data-component~="ui-stack"][data-ui-stack-state~="align=end"][data-v-aa8062a9] {
|
|
3431
3439
|
align-items: flex-end;
|
|
3432
3440
|
}
|
|
3433
|
-
[data-component~="ui-stack"][data-ui-stack-state~="justify=center"][data-v-
|
|
3441
|
+
[data-component~="ui-stack"][data-ui-stack-state~="justify=center"][data-v-aa8062a9] {
|
|
3434
3442
|
justify-content: center;
|
|
3435
3443
|
}
|
|
3436
|
-
[data-component~="ui-stack"][data-ui-stack-state~="justify=end"][data-v-
|
|
3444
|
+
[data-component~="ui-stack"][data-ui-stack-state~="justify=end"][data-v-aa8062a9] {
|
|
3437
3445
|
justify-content: flex-end;
|
|
3438
3446
|
}
|
|
3439
|
-
[data-component~="ui-stack"][data-ui-stack-state~="justify=between"][data-v-
|
|
3447
|
+
[data-component~="ui-stack"][data-ui-stack-state~="justify=between"][data-v-aa8062a9] {
|
|
3440
3448
|
justify-content: space-between;
|
|
3441
3449
|
}
|
|
3442
3450
|
|
|
3443
3451
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3444
|
-
[data-component~="ui-stack"][hidden][data-v-
|
|
3452
|
+
[data-component~="ui-stack"][hidden][data-v-aa8062a9] {
|
|
3445
3453
|
display: none;
|
|
3446
3454
|
}
|
|
3447
3455
|
|
|
@@ -3519,8 +3527,8 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
|
|
|
3519
3527
|
display: none;
|
|
3520
3528
|
}
|
|
3521
3529
|
|
|
3522
|
-
[data-component~="ui-switcher"][data-v-
|
|
3523
|
-
--_switcher-gap: var(--ui-space-4
|
|
3530
|
+
[data-component~="ui-switcher"][data-v-4ba623e1] {
|
|
3531
|
+
--_switcher-gap: var(--ui-space-4);
|
|
3524
3532
|
display: flex;
|
|
3525
3533
|
flex-wrap: wrap;
|
|
3526
3534
|
gap: var(--ui-switcher-gap, var(--_switcher-gap));
|
|
@@ -3528,57 +3536,68 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
|
|
|
3528
3536
|
max-inline-size: 100%;
|
|
3529
3537
|
margin: 0;
|
|
3530
3538
|
}
|
|
3531
|
-
[data-component~="ui-switcher"] > [data-v-
|
|
3539
|
+
[data-component~="ui-switcher"] > [data-v-4ba623e1-s] {
|
|
3532
3540
|
min-inline-size: 0;
|
|
3533
3541
|
flex-grow: 1;
|
|
3534
3542
|
/* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
|
|
3535
3543
|
flex-basis: calc((var(--ui-switcher-threshold, 30rem) - 100%) * 999);
|
|
3536
3544
|
}
|
|
3537
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="gap=xs"][data-v-
|
|
3538
|
-
--_switcher-gap: var(--ui-space-2
|
|
3545
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="gap=xs"][data-v-4ba623e1] {
|
|
3546
|
+
--_switcher-gap: var(--ui-space-2);
|
|
3539
3547
|
}
|
|
3540
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="gap=s"][data-v-
|
|
3541
|
-
--_switcher-gap: var(--ui-space-3
|
|
3548
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="gap=s"][data-v-4ba623e1] {
|
|
3549
|
+
--_switcher-gap: var(--ui-space-3);
|
|
3542
3550
|
}
|
|
3543
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="gap=m"][data-v-
|
|
3544
|
-
--_switcher-gap: var(--ui-space-4
|
|
3551
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="gap=m"][data-v-4ba623e1] {
|
|
3552
|
+
--_switcher-gap: var(--ui-space-4);
|
|
3545
3553
|
}
|
|
3546
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="gap=l"][data-v-
|
|
3547
|
-
--_switcher-gap: var(--ui-space-5
|
|
3554
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="gap=l"][data-v-4ba623e1] {
|
|
3555
|
+
--_switcher-gap: var(--ui-space-5);
|
|
3548
3556
|
}
|
|
3549
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="gap=xl"][data-v-
|
|
3550
|
-
--_switcher-gap: var(--ui-space-6
|
|
3557
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="gap=xl"][data-v-4ba623e1] {
|
|
3558
|
+
--_switcher-gap: var(--ui-space-6);
|
|
3551
3559
|
}
|
|
3552
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="threshold=xs"] > [data-v-
|
|
3560
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="threshold=xs"] > [data-v-4ba623e1-s] {
|
|
3553
3561
|
flex-basis: calc((var(--ui-switcher-threshold, 20rem) - 100%) * 999);
|
|
3554
3562
|
}
|
|
3555
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="threshold=md"] > [data-v-
|
|
3563
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="threshold=md"] > [data-v-4ba623e1-s] {
|
|
3556
3564
|
flex-basis: calc((var(--ui-switcher-threshold, 45rem) - 100%) * 999);
|
|
3557
3565
|
}
|
|
3558
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="threshold=lg"] > [data-v-
|
|
3566
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="threshold=lg"] > [data-v-4ba623e1-s] {
|
|
3559
3567
|
flex-basis: calc((var(--ui-switcher-threshold, 60rem) - 100%) * 999);
|
|
3560
3568
|
}
|
|
3561
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="align=start"][data-v-
|
|
3569
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="align=start"][data-v-4ba623e1] {
|
|
3562
3570
|
align-items: flex-start;
|
|
3563
3571
|
}
|
|
3564
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="align=center"][data-v-
|
|
3572
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="align=center"][data-v-4ba623e1] {
|
|
3565
3573
|
align-items: center;
|
|
3566
3574
|
}
|
|
3567
|
-
[data-component~="ui-switcher"][data-ui-switcher-state~="align=end"][data-v-
|
|
3575
|
+
[data-component~="ui-switcher"][data-ui-switcher-state~="align=end"][data-v-4ba623e1] {
|
|
3568
3576
|
align-items: flex-end;
|
|
3569
3577
|
}
|
|
3570
3578
|
|
|
3571
3579
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3572
|
-
[data-component~="ui-switcher"][hidden][data-v-
|
|
3580
|
+
[data-component~="ui-switcher"][hidden][data-v-4ba623e1] {
|
|
3573
3581
|
display: none;
|
|
3574
3582
|
}
|
|
3575
3583
|
|
|
3576
|
-
|
|
3584
|
+
/* Density resolves into the tab row's own values; the public tokens still override them. */
|
|
3585
|
+
[data-component~="ui-tabs"][data-v-b9e876c6] {
|
|
3586
|
+
--_tab-min-block-size: var(--ui-control-size);
|
|
3587
|
+
--_tab-padding-block: var(--ui-space-2);
|
|
3588
|
+
--_tab-padding-inline: var(--ui-space-3);
|
|
3589
|
+
}
|
|
3590
|
+
[data-component~="ui-tabs"][data-ui-tabs-state~="density=compact"][data-v-b9e876c6] {
|
|
3591
|
+
--_tab-min-block-size: var(--ui-control-size-sm);
|
|
3592
|
+
--_tab-padding-block: var(--ui-space-1);
|
|
3593
|
+
--_tab-padding-inline: var(--ui-space-2);
|
|
3594
|
+
}
|
|
3595
|
+
[data-component~="ui-tabs"][data-v-b9e876c6] {
|
|
3577
3596
|
display: grid;
|
|
3578
3597
|
inline-size: 100%;
|
|
3579
3598
|
min-inline-size: 0;
|
|
3580
3599
|
}
|
|
3581
|
-
.list[data-v-
|
|
3600
|
+
.list[data-v-b9e876c6] {
|
|
3582
3601
|
display: grid;
|
|
3583
3602
|
grid-auto-flow: column;
|
|
3584
3603
|
grid-auto-columns: max-content;
|
|
@@ -3594,60 +3613,61 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
|
|
|
3594
3613
|
scrollbar-width: thin;
|
|
3595
3614
|
border-block-end: 1px solid var(--ui-border-default);
|
|
3596
3615
|
}
|
|
3597
|
-
.list button[data-v-
|
|
3598
|
-
min-block-size:
|
|
3616
|
+
.list button[data-v-b9e876c6] {
|
|
3617
|
+
min-block-size: var(--ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
|
|
3599
3618
|
margin: 0 0 -1px;
|
|
3600
|
-
padding: var(--ui-
|
|
3619
|
+
padding: var(--ui-tabs-tab-padding-block, var(--_tab-padding-block))
|
|
3620
|
+
var(--ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
|
|
3601
3621
|
border: 0;
|
|
3602
3622
|
border-block-end: 2px solid transparent;
|
|
3603
3623
|
background: transparent;
|
|
3604
3624
|
color: var(--ui-text-secondary);
|
|
3605
3625
|
font: inherit;
|
|
3606
3626
|
font-size: var(--ui-font-size-sm);
|
|
3607
|
-
font-weight: var(--ui-font-medium
|
|
3627
|
+
font-weight: var(--ui-font-medium);
|
|
3608
3628
|
cursor: pointer;
|
|
3609
3629
|
transition:
|
|
3610
3630
|
color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
3611
3631
|
background-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
3612
3632
|
border-color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
3613
3633
|
}
|
|
3614
|
-
[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list[data-v-
|
|
3634
|
+
[data-component~="ui-tabs"][data-ui-tabs-state~="stretch"] .list[data-v-b9e876c6] {
|
|
3615
3635
|
grid-auto-columns: minmax(max-content, 1fr);
|
|
3616
3636
|
}
|
|
3617
|
-
.list button[data-v-
|
|
3637
|
+
.list button[data-v-b9e876c6] {
|
|
3618
3638
|
white-space: nowrap;
|
|
3619
3639
|
}
|
|
3620
|
-
.list button[data-v-
|
|
3640
|
+
.list button[data-v-b9e876c6]:hover {
|
|
3621
3641
|
color: var(--ui-text-primary);
|
|
3622
3642
|
background: var(--ui-surface-muted);
|
|
3623
3643
|
}
|
|
3624
|
-
.list button[aria-selected="true"][data-v-
|
|
3644
|
+
.list button[aria-selected="true"][data-v-b9e876c6] {
|
|
3625
3645
|
color: var(--ui-accent-solid);
|
|
3626
3646
|
border-block-end-color: var(--ui-accent-solid);
|
|
3627
3647
|
}
|
|
3628
|
-
.list button[data-v-
|
|
3648
|
+
.list button[data-v-b9e876c6]:focus-visible {
|
|
3629
3649
|
position: relative;
|
|
3630
3650
|
outline: none;
|
|
3631
3651
|
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
|
|
3632
|
-
border-radius: var(--ui-radius-
|
|
3652
|
+
border-radius: var(--ui-radius-sm);
|
|
3633
3653
|
}
|
|
3634
|
-
.panels[data-v-
|
|
3654
|
+
.panels[data-v-b9e876c6] {
|
|
3635
3655
|
min-inline-size: 0;
|
|
3636
3656
|
}
|
|
3637
|
-
[data-v-
|
|
3657
|
+
[data-v-b9e876c6-s] {
|
|
3638
3658
|
padding: var(--ui-space-4);
|
|
3639
3659
|
}
|
|
3640
|
-
[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"][data-v-
|
|
3660
|
+
[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"][data-v-b9e876c6] {
|
|
3641
3661
|
grid-template-columns: max-content minmax(0, 1fr);
|
|
3642
3662
|
align-items: start;
|
|
3643
3663
|
}
|
|
3644
|
-
[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list[data-v-
|
|
3664
|
+
[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list[data-v-b9e876c6] {
|
|
3645
3665
|
grid-auto-flow: row;
|
|
3646
3666
|
grid-auto-columns: auto;
|
|
3647
3667
|
border-block-end: 0;
|
|
3648
3668
|
border-inline-end: 1px solid var(--ui-border-default);
|
|
3649
3669
|
}
|
|
3650
|
-
[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button[data-v-
|
|
3670
|
+
[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button[data-v-b9e876c6] {
|
|
3651
3671
|
margin: 0 -1px 0 0;
|
|
3652
3672
|
border-block-end: 0;
|
|
3653
3673
|
border-inline-end: 2px solid transparent;
|
|
@@ -3655,32 +3675,32 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
|
|
|
3655
3675
|
}
|
|
3656
3676
|
[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
|
|
3657
3677
|
.list
|
|
3658
|
-
button[aria-selected="true"][data-v-
|
|
3678
|
+
button[aria-selected="true"][data-v-b9e876c6] {
|
|
3659
3679
|
border-inline-end-color: var(--ui-accent-solid);
|
|
3660
3680
|
}
|
|
3661
3681
|
@media (prefers-reduced-motion: reduce) {
|
|
3662
|
-
.list button[data-v-
|
|
3682
|
+
.list button[data-v-b9e876c6] {
|
|
3663
3683
|
transition: none;
|
|
3664
3684
|
}
|
|
3665
3685
|
}
|
|
3666
3686
|
|
|
3667
3687
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3668
|
-
[data-component~="ui-tabs"][hidden][data-v-
|
|
3688
|
+
[data-component~="ui-tabs"][hidden][data-v-b9e876c6] {
|
|
3669
3689
|
display: none;
|
|
3670
3690
|
}
|
|
3671
3691
|
|
|
3672
|
-
[data-component~="ui-textarea"][data-v-
|
|
3692
|
+
[data-component~="ui-textarea"][data-v-2b01ccc0] {
|
|
3673
3693
|
box-sizing: border-box;
|
|
3674
3694
|
display: inline-block;
|
|
3675
3695
|
inline-size: 100%;
|
|
3676
3696
|
min-inline-size: 0;
|
|
3677
|
-
min-block-size: calc(
|
|
3697
|
+
min-block-size: calc(3rem * 2);
|
|
3678
3698
|
margin: 0;
|
|
3679
3699
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
3680
3700
|
appearance: none;
|
|
3681
3701
|
resize: vertical;
|
|
3682
3702
|
border: 1px solid var(--ui-control-border, var(--ui-border-strong));
|
|
3683
|
-
border-radius: var(--ui-textarea-radius, var(--ui-radius-
|
|
3703
|
+
border-radius: var(--ui-textarea-radius, var(--ui-radius-md));
|
|
3684
3704
|
background: var(--ui-control-surface, var(--ui-surface-elevated));
|
|
3685
3705
|
color: var(--ui-text-primary);
|
|
3686
3706
|
font: inherit;
|
|
@@ -3693,18 +3713,18 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
|
|
|
3693
3713
|
}
|
|
3694
3714
|
|
|
3695
3715
|
/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
|
|
3696
|
-
[data-component~="ui-textarea"][data-v-
|
|
3716
|
+
[data-component~="ui-textarea"][data-v-2b01ccc0]::selection {
|
|
3697
3717
|
background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
|
|
3698
3718
|
color: inherit;
|
|
3699
3719
|
}
|
|
3700
|
-
[data-component~="ui-textarea"][data-v-
|
|
3720
|
+
[data-component~="ui-textarea"][data-v-2b01ccc0]::placeholder {
|
|
3701
3721
|
color: var(--ui-control-placeholder, var(--ui-text-secondary));
|
|
3702
3722
|
opacity: 1;
|
|
3703
3723
|
}
|
|
3704
|
-
[data-component~="ui-textarea"][data-v-
|
|
3724
|
+
[data-component~="ui-textarea"][data-v-2b01ccc0]:hover:not(:focus):not(:disabled) {
|
|
3705
3725
|
border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
|
|
3706
3726
|
}
|
|
3707
|
-
[data-component~="ui-textarea"][data-v-
|
|
3727
|
+
[data-component~="ui-textarea"][data-v-2b01ccc0]:focus-visible {
|
|
3708
3728
|
border-color: var(--ui-control-focus, var(--ui-accent-solid));
|
|
3709
3729
|
outline: none;
|
|
3710
3730
|
box-shadow: var(
|
|
@@ -3715,16 +3735,16 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
|
|
|
3715
3735
|
}
|
|
3716
3736
|
|
|
3717
3737
|
/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
|
|
3718
|
-
[data-component~="ui-textarea"][aria-invalid="true"][data-v-
|
|
3719
|
-
[data-component~="ui-textarea"][data-v-
|
|
3738
|
+
[data-component~="ui-textarea"][aria-invalid="true"][data-v-2b01ccc0],
|
|
3739
|
+
[data-component~="ui-textarea"][data-v-2b01ccc0]:is(:user-invalid, [data-user-invalid]) {
|
|
3720
3740
|
border-color: var(--ui-danger-solid);
|
|
3721
3741
|
}
|
|
3722
|
-
[data-component~="ui-textarea"][data-v-
|
|
3742
|
+
[data-component~="ui-textarea"][data-v-2b01ccc0]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
|
|
3723
3743
|
box-shadow:
|
|
3724
3744
|
var(--ui-control-inset),
|
|
3725
3745
|
0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
|
|
3726
3746
|
}
|
|
3727
|
-
[data-component~="ui-textarea"][data-v-
|
|
3747
|
+
[data-component~="ui-textarea"][data-v-2b01ccc0]:disabled {
|
|
3728
3748
|
background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
3729
3749
|
color: var(--ui-text-muted);
|
|
3730
3750
|
box-shadow: none;
|
|
@@ -3732,11 +3752,11 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
|
|
|
3732
3752
|
}
|
|
3733
3753
|
|
|
3734
3754
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3735
|
-
[data-component~="ui-textarea"][hidden][data-v-
|
|
3755
|
+
[data-component~="ui-textarea"][hidden][data-v-2b01ccc0] {
|
|
3736
3756
|
display: none;
|
|
3737
3757
|
}
|
|
3738
3758
|
|
|
3739
|
-
[data-component~="ui-toast-region"][data-v-
|
|
3759
|
+
[data-component~="ui-toast-region"][data-v-7d8dab78] {
|
|
3740
3760
|
position: fixed;
|
|
3741
3761
|
top: calc(var(--ui-space-4) + env(safe-area-inset-top));
|
|
3742
3762
|
right: auto;
|
|
@@ -3758,34 +3778,34 @@ input[data-v-44eb48fd], input[data-v-44eb48fd]::after {
|
|
|
3758
3778
|
box-shadow: none;
|
|
3759
3779
|
pointer-events: none;
|
|
3760
3780
|
}
|
|
3761
|
-
[data-component~="ui-toast-region"][data-v-
|
|
3781
|
+
[data-component~="ui-toast-region"][data-v-7d8dab78]:not(:popover-open) {
|
|
3762
3782
|
display: none;
|
|
3763
3783
|
}
|
|
3764
|
-
[data-component~="ui-toast-region"] > .toast[data-v-
|
|
3765
|
-
[data-component~="ui-toast-region"] > [data-v-
|
|
3784
|
+
[data-component~="ui-toast-region"] > .toast[data-v-7d8dab78],
|
|
3785
|
+
[data-component~="ui-toast-region"] > [data-v-7d8dab78-s] {
|
|
3766
3786
|
pointer-events: auto;
|
|
3767
3787
|
}
|
|
3768
|
-
.toast[data-v-
|
|
3788
|
+
.toast[data-v-7d8dab78] {
|
|
3769
3789
|
display: grid;
|
|
3770
3790
|
grid-template-columns: 1fr auto;
|
|
3771
3791
|
gap: var(--ui-space-2);
|
|
3772
3792
|
align-items: start;
|
|
3773
3793
|
border: 1px solid var(--ui-border-default);
|
|
3774
|
-
border-radius: var(--ui-radius-
|
|
3794
|
+
border-radius: var(--ui-radius-lg);
|
|
3775
3795
|
padding: var(--ui-space-3) var(--ui-space-4);
|
|
3776
3796
|
background: var(--ui-surface-elevated);
|
|
3777
3797
|
color: var(--ui-text-primary);
|
|
3778
3798
|
box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
|
|
3779
|
-
animation: ui-toast-enter-
|
|
3799
|
+
animation: ui-toast-enter-7d8dab78 var(--ui-toast-enter-duration, 0.32s)
|
|
3780
3800
|
var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
|
|
3781
3801
|
}
|
|
3782
3802
|
|
|
3783
3803
|
/* Leaving slides on down and fades; the controller removes the toast when this ends. */
|
|
3784
|
-
.toast.closing[data-v-
|
|
3785
|
-
animation: ui-toast-exit-
|
|
3804
|
+
.toast.closing[data-v-7d8dab78] {
|
|
3805
|
+
animation: ui-toast-exit-7d8dab78 var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease) both;
|
|
3786
3806
|
pointer-events: none;
|
|
3787
3807
|
}
|
|
3788
|
-
@keyframes ui-toast-enter-
|
|
3808
|
+
@keyframes ui-toast-enter-7d8dab78 {
|
|
3789
3809
|
from {
|
|
3790
3810
|
opacity: 0;
|
|
3791
3811
|
transform: translateY(-1rem);
|
|
@@ -3795,7 +3815,7 @@ to {
|
|
|
3795
3815
|
transform: translateY(0);
|
|
3796
3816
|
}
|
|
3797
3817
|
}
|
|
3798
|
-
@keyframes ui-toast-exit-
|
|
3818
|
+
@keyframes ui-toast-exit-7d8dab78 {
|
|
3799
3819
|
from {
|
|
3800
3820
|
opacity: 1;
|
|
3801
3821
|
transform: translateY(0);
|
|
@@ -3806,83 +3826,88 @@ to {
|
|
|
3806
3826
|
}
|
|
3807
3827
|
}
|
|
3808
3828
|
@media (prefers-reduced-motion: reduce) {
|
|
3809
|
-
.toast[data-v-
|
|
3829
|
+
.toast[data-v-7d8dab78], .toast.closing[data-v-7d8dab78] {
|
|
3810
3830
|
animation: none;
|
|
3811
3831
|
}
|
|
3812
3832
|
}
|
|
3813
|
-
.message[data-v-
|
|
3833
|
+
.message[data-v-7d8dab78] {
|
|
3814
3834
|
min-inline-size: 0;
|
|
3815
3835
|
align-self: center;
|
|
3816
3836
|
}
|
|
3817
|
-
.dismiss[data-v-
|
|
3837
|
+
.dismiss[data-v-7d8dab78] {
|
|
3818
3838
|
align-self: center;
|
|
3819
3839
|
margin-inline-end: calc(var(--ui-space-2) * -1);
|
|
3820
3840
|
}
|
|
3821
3841
|
|
|
3822
3842
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3823
|
-
[data-component~="ui-toast-region"][hidden][data-v-
|
|
3843
|
+
[data-component~="ui-toast-region"][hidden][data-v-7d8dab78] {
|
|
3824
3844
|
display: none;
|
|
3825
3845
|
}
|
|
3826
3846
|
|
|
3827
|
-
[data-component~="ui-top-bar"][data-v-
|
|
3847
|
+
[data-component~="ui-top-bar"][data-v-88437f08] {
|
|
3828
3848
|
position: sticky;
|
|
3829
3849
|
inset-block-start: 0;
|
|
3830
3850
|
z-index: var(--ui-top-bar-z-index, 100);
|
|
3831
3851
|
min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
|
|
3832
3852
|
display: flex;
|
|
3833
3853
|
align-items: center;
|
|
3834
|
-
gap: var(--ui-top-bar-gap, var(--ui-space-3
|
|
3854
|
+
gap: var(--ui-top-bar-gap, var(--ui-space-3));
|
|
3835
3855
|
padding-block-start: env(safe-area-inset-top);
|
|
3836
3856
|
padding-inline-start: max(
|
|
3837
|
-
var(--ui-top-bar-padding-inline, var(--ui-space-4
|
|
3857
|
+
var(--ui-top-bar-padding-inline, var(--ui-space-4)),
|
|
3838
3858
|
env(safe-area-inset-left)
|
|
3839
3859
|
);
|
|
3840
3860
|
padding-inline-end: max(
|
|
3841
|
-
var(--ui-top-bar-padding-inline, var(--ui-space-4
|
|
3861
|
+
var(--ui-top-bar-padding-inline, var(--ui-space-4)),
|
|
3842
3862
|
env(safe-area-inset-right)
|
|
3843
3863
|
);
|
|
3844
|
-
background: var(--ui-top-bar-
|
|
3864
|
+
background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
|
|
3845
3865
|
border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-default));
|
|
3846
3866
|
}
|
|
3847
|
-
.leading[data-v-
|
|
3848
|
-
.search[data-v-
|
|
3849
|
-
.actions[data-v-
|
|
3867
|
+
.leading[data-v-88437f08],
|
|
3868
|
+
.search[data-v-88437f08],
|
|
3869
|
+
.actions[data-v-88437f08] {
|
|
3850
3870
|
display: flex;
|
|
3851
3871
|
align-items: center;
|
|
3852
3872
|
flex-shrink: 0;
|
|
3853
3873
|
}
|
|
3854
|
-
.actions[data-v-
|
|
3855
|
-
gap: var(--ui-top-bar-actions-gap, var(--ui-space-1
|
|
3874
|
+
.actions[data-v-88437f08] {
|
|
3875
|
+
gap: var(--ui-top-bar-actions-gap, var(--ui-space-1));
|
|
3856
3876
|
}
|
|
3857
|
-
.title[data-v-
|
|
3877
|
+
.title[data-v-88437f08] {
|
|
3858
3878
|
min-inline-size: 0;
|
|
3859
3879
|
flex: 1;
|
|
3860
3880
|
}
|
|
3861
3881
|
|
|
3862
3882
|
/* An unused region takes no space, so it adds no gap. */
|
|
3863
|
-
.leading[data-v-
|
|
3864
|
-
.search[data-v-
|
|
3865
|
-
.actions[data-v-
|
|
3883
|
+
.leading[data-v-88437f08]:empty,
|
|
3884
|
+
.search[data-v-88437f08]:empty,
|
|
3885
|
+
.actions[data-v-88437f08]:empty {
|
|
3866
3886
|
display: none;
|
|
3867
3887
|
}
|
|
3868
3888
|
|
|
3869
3889
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3870
|
-
[data-component~="ui-top-bar"][hidden][data-v-
|
|
3890
|
+
[data-component~="ui-top-bar"][hidden][data-v-88437f08] {
|
|
3871
3891
|
display: none;
|
|
3872
3892
|
}
|
|
3873
3893
|
|
|
3874
|
-
[data-component~="ui-tree"][data-v-
|
|
3894
|
+
[data-component~="ui-tree"][data-ui-tree-state~="density=compact"][data-v-e94f7a5c] {
|
|
3895
|
+
--ui-tree-item-min-block-size: var(--ui-control-size-sm);
|
|
3896
|
+
--ui-tree-item-font-size: var(--ui-font-size-sm);
|
|
3897
|
+
--ui-tree-item-label-padding-block: 0;
|
|
3898
|
+
}
|
|
3899
|
+
[data-component~="ui-tree"][data-v-e94f7a5c] {
|
|
3875
3900
|
display: block;
|
|
3876
3901
|
min-inline-size: 0;
|
|
3877
3902
|
padding-inline-start: var(--ui-tree-gutter, 0px);
|
|
3878
3903
|
}
|
|
3879
3904
|
|
|
3880
3905
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
3881
|
-
[data-component~="ui-tree"][hidden][data-v-
|
|
3906
|
+
[data-component~="ui-tree"][hidden][data-v-e94f7a5c] {
|
|
3882
3907
|
display: none;
|
|
3883
3908
|
}
|
|
3884
3909
|
|
|
3885
|
-
[data-component~="ui-tree-item"][data-v-
|
|
3910
|
+
[data-component~="ui-tree-item"][data-v-b57a29c6] {
|
|
3886
3911
|
--_tree-row-min-height: 32px;
|
|
3887
3912
|
|
|
3888
3913
|
position: relative;
|
|
@@ -3890,14 +3915,14 @@ to {
|
|
|
3890
3915
|
min-inline-size: 0;
|
|
3891
3916
|
margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
|
|
3892
3917
|
}
|
|
3893
|
-
.row[data-v-
|
|
3918
|
+
.row[data-v-b57a29c6] {
|
|
3894
3919
|
position: relative;
|
|
3895
3920
|
display: grid;
|
|
3896
3921
|
grid-template-columns: 20px auto minmax(0, 1fr) auto;
|
|
3897
3922
|
align-items: center;
|
|
3898
|
-
min-block-size: var(--ui-tree-
|
|
3923
|
+
min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
|
|
3899
3924
|
min-inline-size: 0;
|
|
3900
|
-
font-size: var(--ui-tree-font-size, var(--ui-font-size-ui
|
|
3925
|
+
font-size: var(--ui-tree-item-font-size, var(--ui-font-size-ui));
|
|
3901
3926
|
border-radius: var(--ui-radius-md);
|
|
3902
3927
|
color: var(--ui-text-secondary);
|
|
3903
3928
|
transition:
|
|
@@ -3907,36 +3932,38 @@ to {
|
|
|
3907
3932
|
box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
|
|
3908
3933
|
min-block-size var(--ui-motion-base) var(--ui-motion-ease);
|
|
3909
3934
|
}
|
|
3910
|
-
.row[data-v-
|
|
3911
|
-
[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-
|
|
3912
|
-
.row[data-v-
|
|
3935
|
+
.row[data-v-b57a29c6]:hover,
|
|
3936
|
+
[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row[data-v-b57a29c6],
|
|
3937
|
+
.row[data-v-b57a29c6]:focus-within {
|
|
3913
3938
|
color: var(--ui-text-primary);
|
|
3914
3939
|
background: var(--ui-surface-muted);
|
|
3915
3940
|
}
|
|
3916
|
-
[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-
|
|
3941
|
+
[data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row[data-v-b57a29c6] {
|
|
3917
3942
|
opacity: 0.55;
|
|
3918
3943
|
}
|
|
3919
|
-
[data-component~="ui-tree-item"][data-dragging] .row[data-v-
|
|
3944
|
+
[data-component~="ui-tree-item"][data-dragging] .row[data-v-b57a29c6] {
|
|
3920
3945
|
opacity: 0.42;
|
|
3921
3946
|
}
|
|
3922
|
-
[data-component~="ui-tree-item"][data-v-
|
|
3947
|
+
[data-component~="ui-tree-item"][data-v-b57a29c6]:focus {
|
|
3923
3948
|
outline: none;
|
|
3924
3949
|
}
|
|
3925
|
-
[data-component~="ui-tree-item"]:focus-visible .row[data-v-
|
|
3950
|
+
[data-component~="ui-tree-item"]:focus-visible .row[data-v-b57a29c6] {
|
|
3926
3951
|
box-shadow: 0 0 0 2px var(--ui-focus-ring);
|
|
3927
3952
|
}
|
|
3928
|
-
|
|
3953
|
+
|
|
3954
|
+
/* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
|
|
3955
|
+
[data-component~="ui-tree-item"][data-drop-position="inside"] > .row[data-v-b57a29c6] {
|
|
3929
3956
|
background: var(--ui-accent-subtle);
|
|
3930
3957
|
box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
|
|
3931
3958
|
}
|
|
3932
|
-
.disclosure[data-v-
|
|
3933
|
-
.disclosure-spacer[data-v-
|
|
3959
|
+
.disclosure[data-v-b57a29c6],
|
|
3960
|
+
.disclosure-spacer[data-v-b57a29c6] {
|
|
3934
3961
|
grid-column: 1;
|
|
3935
3962
|
grid-row: 1;
|
|
3936
3963
|
inline-size: 20px;
|
|
3937
3964
|
block-size: 28px;
|
|
3938
3965
|
}
|
|
3939
|
-
.disclosure[data-v-
|
|
3966
|
+
.disclosure[data-v-b57a29c6] {
|
|
3940
3967
|
display: grid;
|
|
3941
3968
|
place-items: center;
|
|
3942
3969
|
padding: 0;
|
|
@@ -3946,14 +3973,14 @@ to {
|
|
|
3946
3973
|
border-radius: var(--ui-radius-sm);
|
|
3947
3974
|
cursor: pointer;
|
|
3948
3975
|
}
|
|
3949
|
-
.disclosure[hidden][data-v-
|
|
3976
|
+
.disclosure[hidden][data-v-b57a29c6] {
|
|
3950
3977
|
display: none;
|
|
3951
3978
|
}
|
|
3952
|
-
.disclosure[data-v-
|
|
3979
|
+
.disclosure[data-v-b57a29c6]:hover {
|
|
3953
3980
|
color: var(--ui-text-primary);
|
|
3954
3981
|
background: var(--ui-surface-elevated);
|
|
3955
3982
|
}
|
|
3956
|
-
.disclosure-icon[data-v-
|
|
3983
|
+
.disclosure-icon[data-v-b57a29c6] {
|
|
3957
3984
|
display: grid;
|
|
3958
3985
|
place-items: center;
|
|
3959
3986
|
inline-size: 14px;
|
|
@@ -3961,7 +3988,7 @@ to {
|
|
|
3961
3988
|
transform: rotate(-90deg);
|
|
3962
3989
|
transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
|
|
3963
3990
|
}
|
|
3964
|
-
.disclosure-icon[data-v-
|
|
3991
|
+
.disclosure-icon[data-v-b57a29c6]::before {
|
|
3965
3992
|
display: block;
|
|
3966
3993
|
inline-size: 0.45rem;
|
|
3967
3994
|
block-size: 0.45rem;
|
|
@@ -3971,19 +3998,19 @@ to {
|
|
|
3971
3998
|
/* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
|
|
3972
3999
|
transform: translateY(-20%) rotate(45deg);
|
|
3973
4000
|
}
|
|
3974
|
-
[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-
|
|
4001
|
+
[data-component~="ui-tree-item"][aria-expanded="true"] .disclosure-icon[data-v-b57a29c6] {
|
|
3975
4002
|
transform: rotate(0deg);
|
|
3976
4003
|
}
|
|
3977
4004
|
|
|
3978
4005
|
/* Lucide grip-vertical, filling the handle as in Looma 0.2. */
|
|
3979
|
-
.drag-handle svg[data-v-
|
|
4006
|
+
.drag-handle svg[data-v-b57a29c6] {
|
|
3980
4007
|
display: block;
|
|
3981
4008
|
inline-size: 100%;
|
|
3982
4009
|
block-size: 100%;
|
|
3983
4010
|
}
|
|
3984
4011
|
|
|
3985
4012
|
/* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
|
|
3986
|
-
.leading[data-v-
|
|
4013
|
+
.leading[data-v-b57a29c6] {
|
|
3987
4014
|
display: inline-grid;
|
|
3988
4015
|
place-items: center;
|
|
3989
4016
|
grid-column: 2;
|
|
@@ -3993,12 +4020,12 @@ to {
|
|
|
3993
4020
|
margin-inline-start: var(--ui-space-1);
|
|
3994
4021
|
color: var(--ui-text-muted);
|
|
3995
4022
|
}
|
|
3996
|
-
.leading[data-v-
|
|
4023
|
+
.leading[data-v-b57a29c6]:empty {
|
|
3997
4024
|
display: none;
|
|
3998
4025
|
}
|
|
3999
4026
|
|
|
4000
4027
|
/* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
|
|
4001
|
-
svg[data-v-
|
|
4028
|
+
svg[data-v-b57a29c6-s],img[data-v-b57a29c6-s] {
|
|
4002
4029
|
display: block;
|
|
4003
4030
|
inline-size: 1em;
|
|
4004
4031
|
block-size: 1em;
|
|
@@ -4007,24 +4034,31 @@ svg[data-v-554c49dd-s],img[data-v-554c49dd-s] {
|
|
|
4007
4034
|
|
|
4008
4035
|
/* The label spans the row's height and centres its content, so slotted content (a link) can
|
|
4009
4036
|
stretch to fill the row as its own hit area; the padding tokens remove the inset. */
|
|
4010
|
-
.label[data-v-
|
|
4037
|
+
.label[data-v-b57a29c6] {
|
|
4011
4038
|
grid-column: 3;
|
|
4012
4039
|
grid-row: 1;
|
|
4013
4040
|
align-self: stretch;
|
|
4014
4041
|
display: flex;
|
|
4015
4042
|
align-items: center;
|
|
4016
4043
|
min-inline-size: 0;
|
|
4017
|
-
padding: var(--ui-tree-label-padding-block, var(--ui-space-1))
|
|
4018
|
-
var(--ui-tree-label-padding-inline, var(--ui-space-2));
|
|
4044
|
+
padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1))
|
|
4045
|
+
var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
|
|
4046
|
+
}
|
|
4047
|
+
|
|
4048
|
+
/* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
|
|
4049
|
+
its own text and reading as overflow. */
|
|
4050
|
+
.label > [data-v-b57a29c6-s] {
|
|
4051
|
+
flex: 1 1 auto;
|
|
4052
|
+
min-inline-size: 0;
|
|
4019
4053
|
}
|
|
4020
|
-
.actions[data-v-
|
|
4054
|
+
.actions[data-v-b57a29c6] {
|
|
4021
4055
|
grid-column: 4;
|
|
4022
4056
|
grid-row: 1;
|
|
4023
4057
|
display: inline-flex;
|
|
4024
4058
|
align-items: center;
|
|
4025
4059
|
min-inline-size: 0;
|
|
4026
4060
|
}
|
|
4027
|
-
.drag-handle[data-v-
|
|
4061
|
+
.drag-handle[data-v-b57a29c6] {
|
|
4028
4062
|
position: absolute;
|
|
4029
4063
|
z-index: 2;
|
|
4030
4064
|
inset-block-start: 50%;
|
|
@@ -4045,16 +4079,16 @@ svg[data-v-554c49dd-s],img[data-v-554c49dd-s] {
|
|
|
4045
4079
|
transform: translateY(-50%);
|
|
4046
4080
|
transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
|
|
4047
4081
|
}
|
|
4048
|
-
.row:hover .drag-handle[data-v-
|
|
4049
|
-
.drag-handle[data-v-
|
|
4050
|
-
.drag-handle[data-v-
|
|
4051
|
-
[data-component~="ui-tree-item"][data-dragging] .drag-handle[data-v-
|
|
4082
|
+
.row:hover .drag-handle[data-v-b57a29c6],
|
|
4083
|
+
.drag-handle[data-v-b57a29c6]:hover,
|
|
4084
|
+
.drag-handle[data-v-b57a29c6]:focus-visible,
|
|
4085
|
+
[data-component~="ui-tree-item"][data-dragging] > .row > .drag-handle[data-v-b57a29c6] {
|
|
4052
4086
|
opacity: 1;
|
|
4053
4087
|
}
|
|
4054
|
-
.drag-handle[data-v-
|
|
4088
|
+
.drag-handle[data-v-b57a29c6]:active {
|
|
4055
4089
|
cursor: grabbing;
|
|
4056
4090
|
}
|
|
4057
|
-
.drop-indicator[data-v-
|
|
4091
|
+
.drop-indicator[data-v-b57a29c6] {
|
|
4058
4092
|
position: absolute;
|
|
4059
4093
|
z-index: 3;
|
|
4060
4094
|
inset-inline: 1px;
|
|
@@ -4064,8 +4098,8 @@ svg[data-v-554c49dd-s],img[data-v-554c49dd-s] {
|
|
|
4064
4098
|
background: var(--ui-tree-drop-color, var(--ui-accent-solid));
|
|
4065
4099
|
pointer-events: none;
|
|
4066
4100
|
}
|
|
4067
|
-
.drop-indicator[data-v-
|
|
4068
|
-
.drop-indicator[data-v-
|
|
4101
|
+
.drop-indicator[data-v-b57a29c6]::before,
|
|
4102
|
+
.drop-indicator[data-v-b57a29c6]::after {
|
|
4069
4103
|
content: "";
|
|
4070
4104
|
position: absolute;
|
|
4071
4105
|
inset-block-start: 50%;
|
|
@@ -4076,39 +4110,39 @@ svg[data-v-554c49dd-s],img[data-v-554c49dd-s] {
|
|
|
4076
4110
|
background: var(--ui-surface-elevated);
|
|
4077
4111
|
transform: translateY(-50%);
|
|
4078
4112
|
}
|
|
4079
|
-
.drop-indicator[data-v-
|
|
4113
|
+
.drop-indicator[data-v-b57a29c6]::before {
|
|
4080
4114
|
inset-inline-start: -1px;
|
|
4081
4115
|
}
|
|
4082
|
-
.drop-indicator[data-v-
|
|
4116
|
+
.drop-indicator[data-v-b57a29c6]::after {
|
|
4083
4117
|
inset-inline-end: -1px;
|
|
4084
4118
|
}
|
|
4085
|
-
[data-component~="ui-tree-item"][data-drop-position="before"] .row-drop-indicator[data-v-
|
|
4119
|
+
[data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator[data-v-b57a29c6] {
|
|
4086
4120
|
display: block;
|
|
4087
4121
|
inset-block-start: -1px;
|
|
4088
4122
|
}
|
|
4089
|
-
[data-component~="ui-tree-item"][data-drop-position="after"] .subtree-drop-indicator[data-v-
|
|
4123
|
+
[data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator[data-v-b57a29c6] {
|
|
4090
4124
|
display: block;
|
|
4091
4125
|
inset-block-end: -1px;
|
|
4092
4126
|
}
|
|
4093
|
-
.children[hidden][data-v-
|
|
4127
|
+
.children[hidden][data-v-b57a29c6] {
|
|
4094
4128
|
display: none;
|
|
4095
4129
|
}
|
|
4096
|
-
html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-
|
|
4130
|
+
html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"][data-v-b57a29c6] {
|
|
4097
4131
|
--_tree-row-min-height: 44px;
|
|
4098
4132
|
}
|
|
4099
|
-
html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-
|
|
4133
|
+
html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .drag-handle[data-v-b57a29c6] {
|
|
4100
4134
|
display: none;
|
|
4101
4135
|
}
|
|
4102
4136
|
@media (prefers-reduced-motion: reduce) {
|
|
4103
|
-
.row[data-v-
|
|
4104
|
-
.disclosure-icon[data-v-
|
|
4105
|
-
.drag-handle[data-v-
|
|
4137
|
+
.row[data-v-b57a29c6],
|
|
4138
|
+
.disclosure-icon[data-v-b57a29c6],
|
|
4139
|
+
.drag-handle[data-v-b57a29c6] {
|
|
4106
4140
|
transition: none;
|
|
4107
4141
|
}
|
|
4108
4142
|
}
|
|
4109
4143
|
|
|
4110
4144
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
4111
|
-
[data-component~="ui-tree-item"][hidden][data-v-
|
|
4145
|
+
[data-component~="ui-tree-item"][hidden][data-v-b57a29c6] {
|
|
4112
4146
|
display: none;
|
|
4113
4147
|
}
|
|
4114
4148
|
/**
|