@smwb/ui-solid 1.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +115 -0
- package/dist/assets/styles/less/components/appBar/appBar.entry.css +1 -1
- package/dist/assets/styles/less/components/avatar/avatar.entry.css +1 -1
- package/dist/assets/styles/less/components/badge/badge.entry.css +1 -1
- package/dist/assets/styles/less/components/breadcrumbs/breadcrumbs.entry.css +1 -1
- package/dist/assets/styles/less/components/button/button.entry.css +1 -1
- package/dist/assets/styles/less/components/buttonGroup/buttonGroup.entry.css +1 -1
- package/dist/assets/styles/less/components/dagView/dagView.entry.css +1 -1
- package/dist/assets/styles/less/components/meter/meter.entry.css +1 -1
- package/dist/assets/styles/less/components/screenDivider/screenDivider.entry.css +1 -1
- package/dist/assets/styles/less/components/sheet/sheet.entry.css +1 -1
- package/dist/assets/styles/less/components/statusDot/statusDot.entry.css +1 -1
- package/dist/assets/styles/less/components/tabGroups/tabGroups.entry.css +1 -1
- package/dist/assets/styles/less/components/tabs/tab/tab.entry.css +1 -1
- package/dist/assets/styles/less/components/toggle/toggle.entry.css +1 -1
- package/dist/assets/styles/less/components/treeView/treeView.entry.css +1 -1
- package/dist/assets/styles/less/tokens.entry.css +1 -1
- package/dist/components/dataDisplay/avatar/avatar.d.ts +5 -2
- package/dist/components/dataDisplay/avatar/avatar.js +9 -9
- package/dist/components/dataDisplay/avatar/avatar.js.map +1 -1
- package/dist/components/dataDisplay/badge/badge.d.ts +2 -1
- package/dist/components/dataDisplay/badge/badge.js.map +1 -1
- package/dist/components/dataDisplay/chart/chart.d.ts +16 -8
- package/dist/components/dataDisplay/chart/chartFull.d.ts +14 -0
- package/dist/components/dataDisplay/chart/core.d.ts +19 -0
- package/dist/components/dataDisplay/chart/index.d.ts +1 -1
- package/dist/components/dataDisplay/dagView/dagView.d.ts +4 -0
- package/dist/components/dataDisplay/dagView/dagView.js +124 -123
- package/dist/components/dataDisplay/dagView/dagView.js.map +1 -1
- package/dist/components/dataDisplay/dagView/index.d.ts +1 -1
- package/dist/components/dataDisplay/meter/index.d.ts +1 -1
- package/dist/components/dataDisplay/meter/meter.d.ts +14 -0
- package/dist/components/dataDisplay/meter/meter.js +32 -30
- package/dist/components/dataDisplay/meter/meter.js.map +1 -1
- package/dist/components/dataDisplay/statusDot/index.d.ts +1 -1
- package/dist/components/dataDisplay/statusDot/statusDot.d.ts +10 -1
- package/dist/components/dataDisplay/statusDot/statusDot.js +20 -11
- package/dist/components/dataDisplay/statusDot/statusDot.js.map +1 -1
- package/dist/components/dataDisplay/treeView/treeView.d.ts +18 -2
- package/dist/components/dataDisplay/treeView/treeView.js +140 -121
- package/dist/components/dataDisplay/treeView/treeView.js.map +1 -1
- package/dist/components/inputs/button/button.d.ts +7 -0
- package/dist/components/inputs/button/button.js +57 -51
- package/dist/components/inputs/button/button.js.map +1 -1
- package/dist/components/inputs/toggle/toggle.d.ts +6 -0
- package/dist/components/inputs/toggle/toggle.js +23 -23
- package/dist/components/inputs/toggle/toggle.js.map +1 -1
- package/dist/components/layout/appLayout/appLayout.d.ts +6 -1
- package/dist/components/layout/appLayout/appLayout.js +49 -42
- package/dist/components/layout/appLayout/appLayout.js.map +1 -1
- package/dist/components/layout/screenDivider/screenDivider.d.ts +12 -0
- package/dist/components/layout/screenDivider/screenDivider.js +87 -46
- package/dist/components/layout/screenDivider/screenDivider.js.map +1 -1
- package/dist/components/layout/sheet/sheet.d.ts +11 -0
- package/dist/components/layout/sheet/sheet.js +122 -102
- package/dist/components/layout/sheet/sheet.js.map +1 -1
- package/dist/components/layout/tabGroups/index.d.ts +1 -1
- package/dist/components/layout/tabGroups/tabGroups.d.ts +44 -1
- package/dist/components/layout/tabGroups/tabGroups.js +500 -460
- package/dist/components/layout/tabGroups/tabGroups.js.map +1 -1
- package/dist/components/layout/tabGroups/tabGroupsFocus.d.ts +16 -0
- package/dist/components/layout/tabGroups/tabGroupsFocus.js +102 -70
- package/dist/components/layout/tabGroups/tabGroupsFocus.js.map +1 -1
- package/dist/components/navigation/appBar/appBar.d.ts +12 -0
- package/dist/components/navigation/appBar/appBar.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts +9 -0
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js +47 -31
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/components/navigation/tabs/tab/tab.js +71 -68
- package/dist/components/navigation/tabs/tab/tab.js.map +1 -1
- package/dist/components/navigation/tabs/tabs.d.ts +15 -1
- package/dist/components/navigation/tabs/tabs.js +19 -16
- package/dist/components/navigation/tabs/tabs.js.map +1 -1
- package/dist/components/navigation/tabs/tabsContext.d.ts +2 -0
- package/dist/components/navigation/tabs/tabsContext.js.map +1 -1
- package/dist/headless/components/dataDisplay/avatar/avatar.js +9 -9
- package/dist/headless/components/dataDisplay/avatar/avatar.js.map +1 -1
- package/dist/headless/components/dataDisplay/badge/badge.js.map +1 -1
- package/dist/headless/components/dataDisplay/dagView/dagView.js +133 -132
- package/dist/headless/components/dataDisplay/dagView/dagView.js.map +1 -1
- package/dist/headless/components/dataDisplay/meter/meter.js +32 -30
- package/dist/headless/components/dataDisplay/meter/meter.js.map +1 -1
- package/dist/headless/components/dataDisplay/statusDot/statusDot.js +19 -10
- package/dist/headless/components/dataDisplay/statusDot/statusDot.js.map +1 -1
- package/dist/headless/components/dataDisplay/treeView/treeView.js +139 -120
- package/dist/headless/components/dataDisplay/treeView/treeView.js.map +1 -1
- package/dist/headless/components/inputs/button/button.js +57 -51
- package/dist/headless/components/inputs/button/button.js.map +1 -1
- package/dist/headless/components/inputs/toggle/toggle.js +23 -23
- package/dist/headless/components/inputs/toggle/toggle.js.map +1 -1
- package/dist/headless/components/layout/appLayout/appLayout.js +52 -45
- package/dist/headless/components/layout/appLayout/appLayout.js.map +1 -1
- package/dist/headless/components/layout/screenDivider/screenDivider.js +88 -47
- package/dist/headless/components/layout/screenDivider/screenDivider.js.map +1 -1
- package/dist/headless/components/layout/sheet/sheet.js +124 -104
- package/dist/headless/components/layout/sheet/sheet.js.map +1 -1
- package/dist/headless/components/layout/tabGroups/tabGroups.js +500 -460
- package/dist/headless/components/layout/tabGroups/tabGroups.js.map +1 -1
- package/dist/headless/components/layout/tabGroups/tabGroupsFocus.js +102 -70
- package/dist/headless/components/layout/tabGroups/tabGroupsFocus.js.map +1 -1
- package/dist/headless/components/navigation/appBar/appBar.js.map +1 -1
- package/dist/headless/components/navigation/breadcrumbs/breadcrumbs.js +46 -30
- package/dist/headless/components/navigation/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/headless/components/navigation/tabs/tab/tab.js +70 -67
- package/dist/headless/components/navigation/tabs/tab/tab.js.map +1 -1
- package/dist/headless/components/navigation/tabs/tabs.js +19 -16
- package/dist/headless/components/navigation/tabs/tabs.js.map +1 -1
- package/dist/headless/components/navigation/tabs/tabsContext.js.map +1 -1
- package/dist/headless/primitives/publishHeaderOffset.js +19 -0
- package/dist/headless/primitives/publishHeaderOffset.js.map +1 -0
- package/dist/headless/source/components/dataDisplay/avatar/avatar.jsx +1 -0
- package/dist/headless/source/components/dataDisplay/avatar/avatar.jsx.map +1 -1
- package/dist/headless/source/components/dataDisplay/badge/badge.jsx.map +1 -1
- package/dist/headless/source/components/dataDisplay/chart/chart.jsx +14 -12
- package/dist/headless/source/components/dataDisplay/chart/chart.jsx.map +1 -1
- package/dist/headless/source/components/dataDisplay/chart/chartFull.js +12 -0
- package/dist/headless/source/components/dataDisplay/chart/chartFull.js.map +7 -0
- package/dist/headless/source/components/dataDisplay/chart/core.js +11 -0
- package/dist/headless/source/components/dataDisplay/chart/core.js.map +7 -0
- package/dist/headless/source/components/dataDisplay/chart/index.js +1 -1
- package/dist/headless/source/components/dataDisplay/chart/index.js.map +1 -1
- package/dist/headless/source/components/dataDisplay/dagView/dagView.jsx +2 -1
- package/dist/headless/source/components/dataDisplay/dagView/dagView.jsx.map +1 -1
- package/dist/headless/source/components/dataDisplay/dagView/index.js.map +2 -2
- package/dist/headless/source/components/dataDisplay/meter/index.js.map +1 -1
- package/dist/headless/source/components/dataDisplay/meter/meter.jsx +14 -2
- package/dist/headless/source/components/dataDisplay/meter/meter.jsx.map +1 -1
- package/dist/headless/source/components/dataDisplay/statusDot/index.js.map +1 -1
- package/dist/headless/source/components/dataDisplay/statusDot/statusDot.jsx +13 -1
- package/dist/headless/source/components/dataDisplay/statusDot/statusDot.jsx.map +1 -1
- package/dist/headless/source/components/dataDisplay/treeView/treeView.jsx +16 -3
- package/dist/headless/source/components/dataDisplay/treeView/treeView.jsx.map +1 -1
- package/dist/headless/source/components/inputs/button/button.jsx +26 -1
- package/dist/headless/source/components/inputs/button/button.jsx.map +1 -1
- package/dist/headless/source/components/inputs/toggle/toggle.jsx +9 -2
- package/dist/headless/source/components/inputs/toggle/toggle.jsx.map +1 -1
- package/dist/headless/source/components/layout/appLayout/appLayout.jsx +14 -2
- package/dist/headless/source/components/layout/appLayout/appLayout.jsx.map +1 -1
- package/dist/headless/source/components/layout/screenDivider/screenDivider.jsx +102 -18
- package/dist/headless/source/components/layout/screenDivider/screenDivider.jsx.map +1 -1
- package/dist/headless/source/components/layout/sheet/sheet.jsx +14 -1
- package/dist/headless/source/components/layout/sheet/sheet.jsx.map +1 -1
- package/dist/headless/source/components/layout/tabGroups/index.js.map +1 -1
- package/dist/headless/source/components/layout/tabGroups/tabGroups.jsx +55 -1
- package/dist/headless/source/components/layout/tabGroups/tabGroups.jsx.map +1 -1
- package/dist/headless/source/components/layout/tabGroups/tabGroupsFocus.js +42 -0
- package/dist/headless/source/components/layout/tabGroups/tabGroupsFocus.js.map +2 -2
- package/dist/headless/source/components/navigation/appBar/appBar.jsx.map +1 -1
- package/dist/headless/source/components/navigation/breadcrumbs/breadcrumbs.jsx +39 -4
- package/dist/headless/source/components/navigation/breadcrumbs/breadcrumbs.jsx.map +1 -1
- package/dist/headless/source/components/navigation/tabs/tab/tab.jsx +7 -1
- package/dist/headless/source/components/navigation/tabs/tab/tab.jsx.map +1 -1
- package/dist/headless/source/components/navigation/tabs/tabs.jsx +5 -1
- package/dist/headless/source/components/navigation/tabs/tabs.jsx.map +1 -1
- package/dist/headless/source/components/navigation/tabs/tabsContext.js.map +2 -2
- package/dist/headless/source/index.js +8 -1
- package/dist/headless/source/index.js.map +2 -2
- package/dist/headless/source/primitives/publishHeaderOffset.js +34 -0
- package/dist/headless/source/primitives/publishHeaderOffset.js.map +7 -0
- package/dist/index.d.ts +5 -5
- package/dist/primitives/publishHeaderOffset.d.ts +7 -0
- package/dist/primitives/publishHeaderOffset.js +19 -0
- package/dist/primitives/publishHeaderOffset.js.map +1 -0
- package/dist/source/components/dataDisplay/avatar/avatar.jsx +1 -0
- package/dist/source/components/dataDisplay/avatar/avatar.jsx.map +1 -1
- package/dist/source/components/dataDisplay/badge/badge.jsx.map +1 -1
- package/dist/source/components/dataDisplay/chart/chart.jsx +14 -12
- package/dist/source/components/dataDisplay/chart/chart.jsx.map +1 -1
- package/dist/source/components/dataDisplay/chart/chartFull.js +12 -0
- package/dist/source/components/dataDisplay/chart/chartFull.js.map +7 -0
- package/dist/source/components/dataDisplay/chart/core.js +11 -0
- package/dist/source/components/dataDisplay/chart/core.js.map +7 -0
- package/dist/source/components/dataDisplay/chart/index.js +1 -1
- package/dist/source/components/dataDisplay/chart/index.js.map +1 -1
- package/dist/source/components/dataDisplay/dagView/dagView.jsx +2 -1
- package/dist/source/components/dataDisplay/dagView/dagView.jsx.map +1 -1
- package/dist/source/components/dataDisplay/dagView/index.js.map +2 -2
- package/dist/source/components/dataDisplay/meter/index.js.map +1 -1
- package/dist/source/components/dataDisplay/meter/meter.jsx +14 -2
- package/dist/source/components/dataDisplay/meter/meter.jsx.map +1 -1
- package/dist/source/components/dataDisplay/statusDot/index.js.map +1 -1
- package/dist/source/components/dataDisplay/statusDot/statusDot.jsx +13 -1
- package/dist/source/components/dataDisplay/statusDot/statusDot.jsx.map +1 -1
- package/dist/source/components/dataDisplay/treeView/treeView.jsx +16 -3
- package/dist/source/components/dataDisplay/treeView/treeView.jsx.map +1 -1
- package/dist/source/components/inputs/button/button.jsx +26 -1
- package/dist/source/components/inputs/button/button.jsx.map +1 -1
- package/dist/source/components/inputs/toggle/toggle.jsx +9 -2
- package/dist/source/components/inputs/toggle/toggle.jsx.map +1 -1
- package/dist/source/components/layout/appLayout/appLayout.jsx +14 -2
- package/dist/source/components/layout/appLayout/appLayout.jsx.map +1 -1
- package/dist/source/components/layout/screenDivider/screenDivider.jsx +102 -18
- package/dist/source/components/layout/screenDivider/screenDivider.jsx.map +1 -1
- package/dist/source/components/layout/sheet/sheet.jsx +14 -1
- package/dist/source/components/layout/sheet/sheet.jsx.map +1 -1
- package/dist/source/components/layout/tabGroups/index.js.map +1 -1
- package/dist/source/components/layout/tabGroups/tabGroups.jsx +55 -1
- package/dist/source/components/layout/tabGroups/tabGroups.jsx.map +1 -1
- package/dist/source/components/layout/tabGroups/tabGroupsFocus.js +42 -0
- package/dist/source/components/layout/tabGroups/tabGroupsFocus.js.map +2 -2
- package/dist/source/components/navigation/appBar/appBar.jsx.map +1 -1
- package/dist/source/components/navigation/breadcrumbs/breadcrumbs.jsx +39 -4
- package/dist/source/components/navigation/breadcrumbs/breadcrumbs.jsx.map +1 -1
- package/dist/source/components/navigation/tabs/tab/tab.jsx +7 -1
- package/dist/source/components/navigation/tabs/tab/tab.jsx.map +1 -1
- package/dist/source/components/navigation/tabs/tabs.jsx +5 -1
- package/dist/source/components/navigation/tabs/tabs.jsx.map +1 -1
- package/dist/source/components/navigation/tabs/tabsContext.js.map +2 -2
- package/dist/source/index.js +8 -1
- package/dist/source/index.js.map +2 -2
- package/dist/source/primitives/publishHeaderOffset.js +34 -0
- package/dist/source/primitives/publishHeaderOffset.js.map +7 -0
- package/package.json +9 -3
package/README.md
CHANGED
|
@@ -226,6 +226,15 @@ skipping disabled tabs; a close from a pointer with focus elsewhere takes none.
|
|
|
226
226
|
`"actions"` and tells the row that focus, which is in the menu outside it, is to move on. A tab removed some other way
|
|
227
227
|
leaves focus on the page. A link tab can be closable too: the anchor is the tab and the button its sibling.
|
|
228
228
|
|
|
229
|
+
`fit` makes the tabs content-width: each is as wide as what it holds (a marker, the label, a close button against it) and
|
|
230
|
+
the row stops sharing its whole width between them, so what is left of the row stays empty, as in an editor's tab strip.
|
|
231
|
+
A tab stays between the theme's `--smui-tabFitMinWidth` (80px) and `--smui-tabFitMaxWidth` (256px); a label longer than
|
|
232
|
+
the maximum is cut with an ellipsis, and a string `label` is also its own `title`, so the full text shows on hover (the
|
|
233
|
+
title is on the label, not on the tab, where a screen reader would read it as a description beside the name). A `Tab`
|
|
234
|
+
whose label is not a string takes a `title` of its own, which is then the tooltip of the whole tab. The accessible name
|
|
235
|
+
is still the whole label. The indicator is as wide as the selected tab, and `scrollable`, `scrollButtons`, `overflowMenu` and the close button work on
|
|
236
|
+
the tabs' own widths. A dragged tab dropped on the row's empty part does nothing. Without `fit` the row is as before.
|
|
237
|
+
|
|
229
238
|
### Tab groups
|
|
230
239
|
|
|
231
240
|
`TabGroups` is a split area of tab groups: one CSS grid holding any number of tab rows, each with its panels, and a
|
|
@@ -337,6 +346,26 @@ makes the layout hold exactly that list: ids that are gone close, and new ones a
|
|
|
337
346
|
`removeTab`, `selectTab`, `moveTab`, `resizeSplit` and `setActiveGroup` are the rest of it, and every one returns the
|
|
338
347
|
layout it was given when there is nothing to do.
|
|
339
348
|
|
|
349
|
+
`stripActions` puts your own controls at the end of a group's tab row, before the group's actions button: the "New
|
|
350
|
+
terminal", "New agent" and "Split" buttons of a workspace screen. It is asked for every group with
|
|
351
|
+
`{ index, count, active }` and returns content for the groups it wants — usually the `active` one, the group the user
|
|
352
|
+
works in; `null`, `undefined` or `false` draws nothing, not even a wrapper. The tabs scroll beside the content, which
|
|
353
|
+
stays in view. It comes after the row's tabs in the Tab order, and the row's arrow keys neither move focus into it nor
|
|
354
|
+
read the keys pressed in it. In a header too narrow for all of it the tabs give way first, then the content is clipped
|
|
355
|
+
at its end; the group's actions button always stays in the row. The function runs once per header, and the group's
|
|
356
|
+
fields are getters: read in the content (`<Show when={group.active}>`, `{group.count}`) they update it in place, so its
|
|
357
|
+
nodes, their state and the focus stay; read in the function's body (`group.active ? … : null`) they make it run again,
|
|
358
|
+
with new content, when that value changes. Read the layout itself in your handlers.
|
|
359
|
+
When a change takes a focused slot control out of the document — a split or a close from the slot — the focus
|
|
360
|
+
goes to the control at the same place in the slot of its group or, once that is gone, of the group in use (the last one
|
|
361
|
+
when there are fewer), else to that group's selected tab; it does not fall to the page.
|
|
362
|
+
|
|
363
|
+
`fit` gives the rows content-width tabs, as `Tabs`' does: each tab is as wide as its marker, label and close button,
|
|
364
|
+
between `--smui-tabFitMinWidth` and `--smui-tabFitMaxWidth`, and the rest of the header stays empty, so `stripActions`
|
|
365
|
+
and the group's actions button keep the end of it. A long label is cut with an ellipsis and shows its text as a
|
|
366
|
+
tooltip: a string label is its own, and the tab's `title` is the tooltip of a label that is not a string. With `dense`
|
|
367
|
+
it is the strip of a workspace screen.
|
|
368
|
+
|
|
340
369
|
**Keyboard.** Everything is reachable without a mouse, and every move is announced in a `role="status"` region:
|
|
341
370
|
|
|
342
371
|
| Where | Keys | What happens |
|
|
@@ -417,6 +446,32 @@ sheet unmounting while open), focus goes back to that element. Focus the app mov
|
|
|
417
446
|
element is focused only while focus is still inside the sheet or has fallen back to the page body, and an element that
|
|
418
447
|
has left the document is skipped.
|
|
419
448
|
|
|
449
|
+
### Sheet below the AppLayout header
|
|
450
|
+
|
|
451
|
+
A `Sheet` is drawn in a portal on `body`, so it covers the whole window, including a fixed app bar, unless it is told
|
|
452
|
+
where to start. `offsetTop` (px, or any CSS length) is the gap above the panel and above the scrim of a modal sheet:
|
|
453
|
+
the `top`, `left` and `right` panels start `offsetTop` below the top edge and are that much shorter, and the scrim of
|
|
454
|
+
every placement starts there, so the header above stays visible and clickable (the button that opened the sheet can
|
|
455
|
+
close it: a press in the strip above a modal scrim belongs to the page and does not close the sheet, so a header
|
|
456
|
+
button can toggle it with `onClick={() => (isOpen ? onClose() : onOpen())}`). The prop writes
|
|
457
|
+
`--smui-sheet-offset-top` on the sheet's wrapper.
|
|
458
|
+
|
|
459
|
+
An app needs no wiring for the common case: `AppLayout` with a sticky header (the default) publishes the header's
|
|
460
|
+
height as `--smui-sheet-offset-top` on the document element and keeps it current as the header resizes, and every
|
|
461
|
+
`Sheet` inherits it, wherever it is drawn. A layout whose header scrolls away (`stickyHeader={false}`) publishes
|
|
462
|
+
nothing. `offsetTop` on a sheet wins over the page's value, so `offsetTop={0}` makes one sheet cover the header anyway;
|
|
463
|
+
you can also set the variable yourself, e.g. `:root { --smui-sheet-offset-top: 56px }` for a header you draw outside
|
|
464
|
+
`AppLayout` (it is 0 when nothing sets it, and then nothing moves). With several layouts mounted the most recent one
|
|
465
|
+
owns the variable, and the one before it takes over again when it unmounts. The height is measured from the top of
|
|
466
|
+
the window, so the layout is assumed to start there (a banner above it is not counted). The offset is made for the
|
|
467
|
+
side panels: a `top` panel is capped to the window below the offset, and the scrim of a modal sheet clips its slide, but
|
|
468
|
+
a non-modal `top` panel has no scrim to clip it and slides in across the header.
|
|
469
|
+
|
|
470
|
+
A modal sheet keeps `aria-modal="true"` below a header, while the header can still be reached by pointer and Tab (a
|
|
471
|
+
sheet has no focus trap), so a screen reader treats the page behind it as inert. If the header has to stay available
|
|
472
|
+
to assistive technology, use `variant="default"` for that panel. See the `SheetBelowHeader` and
|
|
473
|
+
`NonModalSheetBelowHeader` stories of `AppLayout`.
|
|
474
|
+
|
|
420
475
|
### Keyboard shortcuts
|
|
421
476
|
|
|
422
477
|
`Kbd` draws a shortcut as key caps, for a `Tooltip` message, beside a `MenuItemText` in a `MenuItem`, or in a command
|
|
@@ -592,6 +647,51 @@ server, a skeleton of the chart's height holds its place. The colours come from
|
|
|
592
647
|
bundle pass `loader={() => import("./my-echarts")}`, a module that registers only the charts you use
|
|
593
648
|
with `echarts/core`. See Storybook → **Data Display / Chart**.
|
|
594
649
|
|
|
650
|
+
**Without the whole of ECharts.** With no `loader`, `Chart` loads `import("echarts")`, the whole library. That one
|
|
651
|
+
`import()` is in the component, so a bundler turns it into a chunk with every chart type (about 0.5 MB, 180 kB gzipped
|
|
652
|
+
for ECharts 6) in every build, even when each chart of yours passes a `loader` and the chunk is never fetched. To build
|
|
653
|
+
without it, import the chart from `@smwb/ui-solid/chart/core`: the same `Chart`, with the same props, but `loader` is
|
|
654
|
+
required (the type says so) and nothing in it imports `echarts`.
|
|
655
|
+
|
|
656
|
+
```tsx
|
|
657
|
+
import { Chart } from "@smwb/ui-solid/chart/core";
|
|
658
|
+
|
|
659
|
+
<Chart
|
|
660
|
+
label="Works opened by week"
|
|
661
|
+
option={(palette) => ({
|
|
662
|
+
xAxis: { type: "category", data: weeks },
|
|
663
|
+
yAxis: { type: "value" },
|
|
664
|
+
series: [{ type: "bar", data: opened, itemStyle: { color: palette.primary } }],
|
|
665
|
+
})}
|
|
666
|
+
loader={() => import("./my-echarts")}
|
|
667
|
+
/>;
|
|
668
|
+
```
|
|
669
|
+
|
|
670
|
+
`./my-echarts.ts` is a module of yours on `echarts/core`. It registers the chart types, the components and the renderer
|
|
671
|
+
your options use, and exports `init`:
|
|
672
|
+
|
|
673
|
+
```ts
|
|
674
|
+
// my-echarts.ts
|
|
675
|
+
import * as echarts from "echarts/core";
|
|
676
|
+
import { BarChart, LineChart } from "echarts/charts";
|
|
677
|
+
import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
|
|
678
|
+
import { CanvasRenderer } from "echarts/renderers";
|
|
679
|
+
import type { ChartModule } from "@smwb/ui-solid/chart/core";
|
|
680
|
+
|
|
681
|
+
echarts.use([BarChart, LineChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
|
|
682
|
+
|
|
683
|
+
// The `init` of echarts/core, typed as the chart's `ChartModule["init"]`: the `on` of an ECharts instance takes
|
|
684
|
+
// its params as `unknown`, which TypeScript does not match to the chart's `ChartEventParams`.
|
|
685
|
+
export const init = echarts.init as unknown as ChartModule["init"];
|
|
686
|
+
```
|
|
687
|
+
|
|
688
|
+
Register what your options draw: a series type for each `type` you use (`BarChart`, `LineChart`, `PieChart`, …), the
|
|
689
|
+
components they need (`GridComponent` for a cartesian chart's axes, `LegendComponent`, `TooltipComponent`,
|
|
690
|
+
`VisualMapComponent`, …) and `CanvasRenderer` (`SVGRenderer` too, if you pass `renderer="svg"`). In development
|
|
691
|
+
ECharts logs what an option uses and nobody registered (`Series pie is used but not imported`). The module is loaded in
|
|
692
|
+
the browser when the first chart mounts, in a chunk of its own. The `chart` entry stays as it was: an app that passes a `loader` there
|
|
693
|
+
moves to `chart/core` by changing the import path, and one that passes none keeps the whole library.
|
|
694
|
+
|
|
595
695
|
Series colours: set `@chartSeries1` … `@chartSeries12` (light) and `@chartSeries1Dark` … `@chartSeries12Dark`
|
|
596
696
|
(dark) in your `theme.config` and recompile `@smwb/ui-styles` — one line re-colours every chart, no `option`
|
|
597
697
|
needed. Fill them in order: slots 8–12 are unset by default and emit nothing, and the chart draws as many
|
|
@@ -652,6 +752,12 @@ node's `accent` still wins over its status; set runtime properties in the graph'
|
|
|
652
752
|
content in `renderNode` with the class `smwb-dag-view__detail` to hide it when zoomed far out. See Storybook → **Data
|
|
653
753
|
Display / DagView**.
|
|
654
754
|
|
|
755
|
+
The line style of a node's frame is themed too: `--smwb-dag-view-node-border-style` (`@dagViewNodeBorderStyle`, `solid`)
|
|
756
|
+
for every node, `--smwb-dag-view-status-warning-border-style` (`@dagViewStatusWarningBorderStyle`, and one per built-in status
|
|
757
|
+
but `idle`) for the nodes of one status, and a node's `variant: "dashed"` (or `"solid"`) for that node alone; the
|
|
758
|
+
variant outranks the status, the status the theme. The frame is the node's own border, so a dashed node is one frame
|
|
759
|
+
around the whole node.
|
|
760
|
+
|
|
655
761
|
### Change size (DiffStat)
|
|
656
762
|
|
|
657
763
|
```tsx
|
|
@@ -697,6 +803,15 @@ by it, so screen readers hear the status. For sighted users the filled statuses
|
|
|
697
803
|
solid and `unknown` a ring), so show the status in text or a tooltip where it matters. Each status colour reaches 3:1 against the surface in the light and dark
|
|
698
804
|
themes (see `@smwb/ui-styles`).
|
|
699
805
|
|
|
806
|
+
`shape` picks the marker's outline independently of `status`: `dot` (the default) or `diamond`, a square turned
|
|
807
|
+
corner-up for a marker that must not read as a status dot — a thread or a run node sitting beside the agents' own
|
|
808
|
+
dots. The shape is the caller's, so a diamond takes `color`, `size` and `pulse` exactly as the dot does and keeps the
|
|
809
|
+
status meaning: `unknown` is a ring of the same `@statusDotRing`, `active` pulses, and a `color` still recolours it.
|
|
810
|
+
A diamond fills the bounding box of a dot of the same `size` (its side is the size over `@statusDotDiamondRatio`,
|
|
811
|
+
√2, turned by `@statusDotDiamondRotation`, corners `@statusDotDiamondRadius`, all overridable in `theme.config`), so
|
|
812
|
+
the two shapes swap places in a row without moving it. The default dot keeps the markup it has always had: no `shape`
|
|
813
|
+
class or attribute is written for `dot`. See Storybook → **Data Display / Status Dot / Diamond**.
|
|
814
|
+
|
|
700
815
|
### Participant lanes (Swimlanes)
|
|
701
816
|
|
|
702
817
|
```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-appbar{box-sizing:border-box;padding:0 16px;display:flex;align-items:center;inset:0 0 auto;min-width:100%;background-color:var(--smui-appBarBg);color:var(--smui-appBarContentColor);font-size:1rem;height:65px}.smwb-appbar.smwb-bottom{bottom:0;top:auto}.smwb-appbar.smwb-relative{position:relative}.smwb-appbar.smwb-static{position:static}.smwb-appbar.smwb-sticky{position:sticky}.smwb-appbar.smwb-fixed{position:fixed}.smwb-appbar.smwb-absolute{position:absolute}.smwb-appbar.smwb-dense{padding:12px;height:48px}.smwb-appbar.smwb-appbar_variant-window{-webkit-app-region:drag;app-region:drag;user-select:none;--smwb-appbar-wc-left: env(titlebar-area-x, 0px);--smwb-appbar-wc-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)) ;padding-left:calc(16px + var(--smwb-appbar-wc-left));padding-right:calc(16px + var(--smwb-appbar-wc-right))}.smwb-appbar.smwb-appbar_variant-window.smwb-appbar_window-controls-left{--smwb-appbar-wc-left: env(titlebar-area-x, var(--smui-appBarWindowControlsWidth, 64px))}.smwb-appbar.smwb-appbar_variant-window.smwb-appbar_window-controls-right{--smwb-appbar-wc-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, calc(100vw - var(--smui-appBarWindowControlsWidth, 138px)))) }.smwb-appbar.smwb-appbar_variant-window.smwb-appbar_window-controls-none{--smwb-appbar-wc-left: 0px;--smwb-appbar-wc-right: 0px}.smwb-appbar.smwb-appbar_variant-window :where(a[href],button,input,select,textarea,label,summary,iframe,video[controls],[contenteditable]:not([contenteditable=false]),[tabindex]:not([tabindex="-1"]),[role=button],[role=link],[role=menuitem],[role=tab],[role=checkbox],[role=switch],[role=radio],[role=combobox],[role=textbox],[role=searchbox],[role=slider],[role=option],[role=menuitemcheckbox],[role=menuitemradio],[role=treeitem],[role=spinbutton],[role=gridcell],[role=listbox],[role=scrollbar],.smwb-tooltip__wrapper,.smwb-appbar__no-drag,[data-no-drag]){-webkit-app-region:no-drag;app-region:no-drag}.smwb-appbar.smwb-appbar_variant-window.smwb-dense{padding:0 calc(16px + var(--smwb-appbar-wc-right)) 0 calc(16px + var(--smwb-appbar-wc-left))}.smwb-appbar__inner{display:flex;align-items:center;width:100%;justify-content:space-between;flex-wrap:nowrap}.smwb-appbar__left{display:flex;align-items:center;gap:10px;white-space:nowrap}.smwb-appbar__left__title{margin:0;font:inherit}.smwb-appbar__right{white-space:nowrap}.smwb-appbar__mid{
|
|
1
|
+
.smwb-appbar{box-sizing:border-box;padding:0 16px;display:flex;align-items:center;inset:0 0 auto;min-width:100%;background-color:var(--smui-appBarBg);color:var(--smui-appBarContentColor);font-size:1rem;height:65px}.smwb-appbar.smwb-bottom{bottom:0;top:auto}.smwb-appbar.smwb-relative{position:relative}.smwb-appbar.smwb-static{position:static}.smwb-appbar.smwb-sticky{position:sticky}.smwb-appbar.smwb-fixed{position:fixed}.smwb-appbar.smwb-absolute{position:absolute}.smwb-appbar.smwb-dense{padding:12px;height:48px}.smwb-appbar.smwb-appbar_variant-window{-webkit-app-region:drag;app-region:drag;user-select:none;--smwb-appbar-wc-left: env(titlebar-area-x, 0px);--smwb-appbar-wc-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)) ;padding-left:calc(16px + var(--smwb-appbar-wc-left));padding-right:calc(16px + var(--smwb-appbar-wc-right))}.smwb-appbar.smwb-appbar_variant-window.smwb-appbar_window-controls-left{--smwb-appbar-wc-left: env(titlebar-area-x, var(--smui-appBarWindowControlsWidth, 64px))}.smwb-appbar.smwb-appbar_variant-window.smwb-appbar_window-controls-right{--smwb-appbar-wc-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, calc(100vw - var(--smui-appBarWindowControlsWidth, 138px)))) }.smwb-appbar.smwb-appbar_variant-window.smwb-appbar_window-controls-none{--smwb-appbar-wc-left: 0px;--smwb-appbar-wc-right: 0px}.smwb-appbar.smwb-appbar_variant-window :where(a[href],button,input,select,textarea,label,summary,iframe,video[controls],[contenteditable]:not([contenteditable=false]),[tabindex]:not([tabindex="-1"]),[role=button],[role=link],[role=menuitem],[role=tab],[role=checkbox],[role=switch],[role=radio],[role=combobox],[role=textbox],[role=searchbox],[role=slider],[role=option],[role=menuitemcheckbox],[role=menuitemradio],[role=treeitem],[role=spinbutton],[role=gridcell],[role=listbox],[role=scrollbar],.smwb-tooltip__wrapper,.smwb-appbar__no-drag,[data-no-drag]){-webkit-app-region:no-drag;app-region:no-drag}.smwb-appbar.smwb-appbar_variant-window.smwb-dense{padding:0 calc(16px + var(--smwb-appbar-wc-right)) 0 calc(16px + var(--smwb-appbar-wc-left))}.smwb-appbar__inner{display:flex;align-items:center;width:100%;min-width:0;justify-content:space-between;flex-wrap:nowrap}.smwb-appbar__left{display:flex;align-items:center;gap:10px;white-space:nowrap;flex:0 1 auto;min-width:0}.smwb-appbar__left__title{margin:0;font:inherit;min-width:0;overflow:hidden;overflow:clip;overflow-clip-margin:4px;text-overflow:ellipsis}.smwb-appbar__right{white-space:nowrap;flex:0 0 auto}.smwb-appbar__mid{display:flex;flex:1 1 0;min-width:0;flex-direction:column;flex-wrap:nowrap}.smwb-appbar__mid>*{max-width:100%}.smwb-appbar__mid.smwb-middle{align-items:center}.smwb-appbar__mid.smwb-right{align-items:flex-end}.smwb-appbar__mid.smwb-left{align-items:flex-start}[data-smwb-overlay-layer],.smwb-menu,.smwb-tooltip,.smwb-snackbars,.smwb-chat-attachment-image__overlay,.smwb-image-modal__overlay,.smwb-thumb-card__preview,.smwb-chat-shell{-webkit-app-region:no-drag;app-region:no-drag}.smwb-appbar_color-primary{background-color:var(--smui-primaryColor);color:var(--smui-onPrimaryColor)}.smwb-appbar_color-secondary{background-color:var(--smui-secondaryColor);color:var(--smui-onSecondaryColor)}.smwb-appbar_color-error{background-color:var(--smui-errorColor);color:var(--smui-onErrorColor)}.smwb-appbar_color-success{background-color:var(--smui-successColor);color:var(--smui-onSuccessColor)}.smwb-appbar_color-warning{background-color:var(--smui-warningColor);color:var(--smui-onWarningColor)}.smwb-appbar_color-info{background-color:var(--smui-infoColor);color:var(--smui-onInfoColor)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;user-select:none;width:40px;height:40px;font-size:16px;font-weight:500;line-height:1;color:var(--smui-onPrimaryColor);background-color:var(--smui-primaryColor)}.smwb-avatar_small{width:24px;height:24px;font-size:9.6px}.smwb-avatar_large{width:56px;height:56px;font-size:22.4px}.smwb-avatar_circular{border-radius:50%}.smwb-avatar_rounded{border-radius:12px}.smwb-avatar_square{border-radius:0}.smwb-avatar__img{width:100%;height:100%;object-fit:cover;color:transparent;text-align:center}.smwb-avatar__fallback{display:inline-flex;align-items:center;justify-content:center}.smwb-avatar-group{display:inline-flex;flex-direction:row;align-items:center;isolation:isolate}.smwb-avatar-group>:not(:first-child){margin-left:-8px}.smwb-avatar-group>:nth-child(1){z-index:12}.smwb-avatar-group>:nth-child(2){z-index:11}.smwb-avatar-group>:nth-child(3){z-index:10}.smwb-avatar-group>:nth-child(4){z-index:9}.smwb-avatar-group>:nth-child(5){z-index:8}.smwb-avatar-group>:nth-child(6){z-index:7}.smwb-avatar-group>:nth-child(7){z-index:6}.smwb-avatar-group>:nth-child(8){z-index:5}.smwb-avatar-group>:nth-child(9){z-index:4}.smwb-avatar-group>:nth-child(10){z-index:3}.smwb-avatar-group>:nth-child(11){z-index:2}.smwb-avatar-group>:nth-child(12){z-index:1}.smwb-avatar-group>:focus-visible,.smwb-avatar-group>:has(:focus-visible){z-index:13}.smwb-avatar-group .smwb-avatar{border:2px solid var(--smui-surfaceBackground);box-sizing:content-box}.smwb-avatar-group__hidden{display:none}.smwb-avatar-group__surplus{background-color:var(--smui-surfaceVariant);color:var(--smui-onSurfaceVariant);font-size:.8rem}
|
|
1
|
+
.smwb-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;user-select:none;width:40px;height:40px;font-size:16px;font-weight:500;line-height:1;color:var(--smui-onPrimaryColor);background-color:var(--smui-primaryColor)}.smwb-avatar_small{width:24px;height:24px;font-size:9.6px}.smwb-avatar_large{width:56px;height:56px;font-size:22.4px}.smwb-avatar_circular{border-radius:50%}.smwb-avatar_rounded{border-radius:12px}.smwb-avatar_square{border-radius:0}.smwb-avatar_image{background-color:transparent}.smwb-avatar__img{width:100%;height:100%;object-fit:cover;color:transparent;text-align:center}.smwb-avatar__fallback{display:inline-flex;align-items:center;justify-content:center}.smwb-avatar-group{display:inline-flex;flex-direction:row;align-items:center;isolation:isolate}.smwb-avatar-group>:not(:first-child){margin-left:-8px}.smwb-avatar-group>:nth-child(1){z-index:12}.smwb-avatar-group>:nth-child(2){z-index:11}.smwb-avatar-group>:nth-child(3){z-index:10}.smwb-avatar-group>:nth-child(4){z-index:9}.smwb-avatar-group>:nth-child(5){z-index:8}.smwb-avatar-group>:nth-child(6){z-index:7}.smwb-avatar-group>:nth-child(7){z-index:6}.smwb-avatar-group>:nth-child(8){z-index:5}.smwb-avatar-group>:nth-child(9){z-index:4}.smwb-avatar-group>:nth-child(10){z-index:3}.smwb-avatar-group>:nth-child(11){z-index:2}.smwb-avatar-group>:nth-child(12){z-index:1}.smwb-avatar-group>:focus-visible,.smwb-avatar-group>:has(:focus-visible){z-index:13}.smwb-avatar-group .smwb-avatar{border:2px solid var(--smui-surfaceBackground);box-sizing:content-box}.smwb-avatar-group__hidden{display:none}.smwb-avatar-group__surplus{background-color:var(--smui-surfaceVariant);color:var(--smui-onSurfaceVariant);font-size:.8rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-badge{border-radius:10px;z-index:2;font-weight:500;font-size:.75rem;padding:0 6px;color:#fff;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:20px;min-width:20px}.smwb-badge_outside{position:absolute}.smwb-badge_outside_top{top:0}.smwb-badge_outside_top_left{transform:scale(1) translate(-50%,-50%);left:-2px}.smwb-badge_outside_top_right{right:-2px;transform:scale(1) translate(50%,-50%)}.smwb-badge_outside_bottom{bottom:0}.smwb-badge_outside_bottom_right{right:-2px;transform:scale(1) translate(50%,50%)}.smwb-badge_outside_bottom_left{transform:scale(1) translate(-50%,50%);left:-2px}.smwb-badge_inside{position:static}.smwb-badge_success{background-color:var(--smui-successColor)}.smwb-badge_danger{background-color:var(--smui-errorColor)}.smwb-badge_primary{background-color:var(--smui-primaryColor)}.smwb-badge_no-content{padding:0;width:8px;height:8px;min-width:auto}.smwb-badge__wrapper{position:relative;display:inline-flex;align-items:center}
|
|
1
|
+
.smwb-badge{border-radius:10px;z-index:2;font-weight:500;font-size:.75rem;padding:0 6px;color:#fff;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;height:20px;min-width:20px}.smwb-badge_outside{position:absolute}.smwb-badge_outside_top{top:0}.smwb-badge_outside_top_left{transform:scale(1) translate(-50%,-50%);left:-2px}.smwb-badge_outside_top_right{right:-2px;transform:scale(1) translate(50%,-50%)}.smwb-badge_outside_bottom{bottom:0}.smwb-badge_outside_bottom_right{right:-2px;transform:scale(1) translate(50%,50%)}.smwb-badge_outside_bottom_left{transform:scale(1) translate(-50%,50%);left:-2px}.smwb-badge_inside{position:static}.smwb-badge_success{background-color:var(--smui-successColor)}.smwb-badge_danger{background-color:var(--smui-errorColor)}.smwb-badge_primary{background-color:var(--smui-primaryColor)}.smwb-badge_warning{background-color:var(--smui-warningColor);color:var(--smui-badgeWarningColor, #1c1b1f)}.smwb-badge_no-content{padding:0;width:8px;height:8px;min-width:auto}.smwb-badge__wrapper{position:relative;display:inline-flex;align-items:center}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-breadcrumbs{color:var(--smui-onSurfaceVariant);font-size:.875rem}.smwb-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}.smwb-breadcrumbs__item{display:inline-flex;align-items:center}.smwb-breadcrumbs__item a{color:inherit;text-decoration:none;transition:color .15s ease-in-out}.smwb-breadcrumbs__item a:hover{color:var(--smui-primaryColor);text-decoration:underline}.smwb-breadcrumbs__item:last-child{color:var(--smui-onSurfaceColor);font-weight:500}.smwb-breadcrumbs__separator{display:inline-flex;align-items:center;user-select:none;opacity:.6}.smwb-breadcrumbs__expand{border:0;background-color:var(--smui-onSurfaceHover);color:inherit;cursor:pointer;border-radius:4px;padding:0 4px;line-height:1.4;transition:background-color .15s ease-in-out}.smwb-breadcrumbs__expand:hover{background-color:var(--smui-onSurfaceActive)}
|
|
1
|
+
.smwb-breadcrumbs{color:var(--smui-onSurfaceVariant);font-size:.875rem}.smwb-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}.smwb-breadcrumbs__item{display:inline-flex;align-items:center}.smwb-breadcrumbs__item a{color:inherit;text-decoration:none;transition:color .15s ease-in-out}.smwb-breadcrumbs__item a:hover{color:var(--smui-primaryColor);text-decoration:underline}.smwb-breadcrumbs__item:last-child{color:var(--smui-onSurfaceColor);font-weight:500}.smwb-breadcrumbs__separator{display:inline-flex;align-items:center;user-select:none;opacity:.6}.smwb-breadcrumbs__expand{border:0;background-color:var(--smui-onSurfaceHover);color:inherit;cursor:pointer;border-radius:4px;padding:0 4px;line-height:1.4;transition:background-color .15s ease-in-out}.smwb-breadcrumbs__expand:hover{background-color:var(--smui-onSurfaceActive)}.smwb-breadcrumbs--no-wrap{min-width:0}.smwb-breadcrumbs--no-wrap .smwb-breadcrumbs__list{flex-wrap:nowrap}.smwb-breadcrumbs--no-wrap .smwb-breadcrumbs__item,.smwb-breadcrumbs--no-wrap .smwb-breadcrumbs__item>*{min-width:0;overflow:hidden;overflow:clip;overflow-clip-margin:4px;text-overflow:ellipsis;white-space:nowrap}.smwb-breadcrumbs--no-wrap .smwb-breadcrumbs__item{display:block;flex:0 1 auto}.smwb-breadcrumbs--no-wrap .smwb-breadcrumbs__item>*{max-width:100%}.smwb-breadcrumbs--no-wrap .smwb-breadcrumbs__item>a{display:inline-block;vertical-align:top}.smwb-breadcrumbs--no-wrap .smwb-breadcrumbs__item:not(:last-child){flex-shrink:100;min-width:3em}.smwb-breadcrumbs--no-wrap .smwb-breadcrumbs__item:last-child{min-width:4em}.smwb-breadcrumbs--no-wrap .smwb-breadcrumbs__item:has(>.smwb-breadcrumbs__expand){flex:none;min-width:0}.smwb-breadcrumbs--no-wrap .smwb-breadcrumbs__separator{flex:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-button{gap:8px;overflow:hidden;font-weight:500;cursor:pointer;transition:all .2s ease-out;display:inline-flex;align-items:center;justify-content:center;border-radius:24px;letter-spacing:1px;vertical-align:middle;word-spacing:0;line-height:1.5;min-width:64px;position:relative;align-self:flex-start}.smwb-button:disabled,.smwb-button.smwb-disabled{color:var(--smui-disabledTextColor);pointer-events:none;border-color:var(--smui-buttonDisabledBg)}.smwb-button:disabled.smwb-contained,.smwb-button.smwb-disabled.smwb-contained{background-color:var(--smui-buttonDisabledBg);color:var(--smui-disabledTextColor)}.smwb-button.smwb-full-width{width:100%}.smwb-button.smwb-small{font-size:13px;padding:4px 10px;min-height:var(--smui-control-h-sm, 32px)}.smwb-button.smwb-medium{font-size:14px;padding:6px 14px;min-height:var(--smui-control-h-md, 40px)}.smwb-button.smwb-large{font-size:15px;padding:8px 22px;min-height:var(--smui-control-h-lg, 48px)}.smwb-button.smwb-contained{color:var(--smui-onPrimaryColor);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-button.smwb-contained.smwb-primary:not(.smwb-disabled){background-color:var(--smui-primaryColor)}.smwb-button.smwb-contained.smwb-primary:hover{background-color:var(--smui-buttonContainedHoverBg);box-shadow:0 4px 22px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-button.smwb-contained.smwb-primary:disabled{background-color:var(--smui-buttonDisabledBg)}.smwb-button.smwb-contained.smwb-primary:focus{background-color:var(--smui-buttonContainedFocusBg)}.smwb-button.smwb-contained.smwb-primary:active{background-color:var(--smui-buttonContainedActiveBg)}.smwb-button.smwb-outlined{background-color:transparent;border:1px solid var(--smui-outlineColor)}.smwb-button.smwb-outlined.smwb-primary:not(.smwb-disabled){color:var(--smui-primaryColor)}.smwb-button.smwb-outlined:hover{background-color:var(--smui-buttonOutlinedHoverBg)}.smwb-button.smwb-outlined:focus{background-color:var(--smui-buttonOutlinedFocusBg)}.smwb-button.smwb-outlined:active{background-color:var(--smui-buttonOutlinedActiveBg);border:1px solid var(--smui-primaryColor)}.smwb-button.smwb-outlined:disabled,.smwb-button.smwb-outlined.smwb-disabled{background-color:transparent;color:var(--smui-disabledTextColor);border-color:var(--smui-buttonDisabledBg)}.smwb-button.smwb-text{background-color:transparent}.smwb-button.smwb-text.smwb-primary:not(.smwb-disabled){color:var(--smui-primaryColor)}.smwb-button.smwb-text.smwb-primary:disabled{background-color:transparent}.smwb-button.smwb-text.smwb-primary:hover{background-color:var(--smui-buttonOutlinedHoverBg)}.smwb-button.smwb-text.smwb-primary:focus{background-color:var(--smui-buttonOutlinedFocusBg)}.smwb-button.smwb-text.smwb-primary:active{background-color:var(--smui-buttonOutlinedActiveBg)}.smwb-button.smwb-text:disabled{background-color:transparent;color:var(--smui-disabledTextColor);border-color:var(--smui-buttonDisabledBg)}.smwb-button *{pointer-events:none}.smwb-button_color-secondary.smwb-contained{background-color:var(--smui-secondaryColor);color:var(--smui-onSecondaryColor)}.smwb-button_color-secondary.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-secondaryColor) 88%,#000)}.smwb-button_color-secondary.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-secondaryColor) 78%,#000)}.smwb-button_color-secondary.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-secondaryColor) 78%,#000)}.smwb-button_color-secondary.smwb-outlined{color:var(--smui-secondaryColor);border-color:var(--smui-secondaryColor)}.smwb-button_color-secondary.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-secondaryColorHover)}.smwb-button_color-secondary.smwb-text{color:var(--smui-secondaryColor)}.smwb-button_color-secondary.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-secondaryColorHover)}.smwb-button_color-error.smwb-contained{background-color:var(--smui-errorColor);color:var(--smui-onErrorColor)}.smwb-button_color-error.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-errorColor) 88%,#000)}.smwb-button_color-error.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-errorColor) 78%,#000)}.smwb-button_color-error.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-errorColor) 78%,#000)}.smwb-button_color-error.smwb-outlined{color:var(--smui-errorColor);border-color:var(--smui-errorColor)}.smwb-button_color-error.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-errorColorHover)}.smwb-button_color-error.smwb-text{color:var(--smui-errorColor)}.smwb-button_color-error.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-errorColorHover)}.smwb-button_color-success.smwb-contained{background-color:var(--smui-successColor);color:var(--smui-onSuccessColor)}.smwb-button_color-success.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-successColor) 88%,#000)}.smwb-button_color-success.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-successColor) 78%,#000)}.smwb-button_color-success.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-successColor) 78%,#000)}.smwb-button_color-success.smwb-outlined{color:var(--smui-successColor);border-color:var(--smui-successColor)}.smwb-button_color-success.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-successColorHover)}.smwb-button_color-success.smwb-text{color:var(--smui-successColor)}.smwb-button_color-success.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-successColorHover)}.smwb-button_color-warning.smwb-contained{background-color:var(--smui-warningColor);color:var(--smui-onWarningColor)}.smwb-button_color-warning.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-warningColor) 88%,#000)}.smwb-button_color-warning.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-warningColor) 78%,#000)}.smwb-button_color-warning.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-warningColor) 78%,#000)}.smwb-button_color-warning.smwb-outlined{color:var(--smui-warningColor);border-color:var(--smui-warningColor)}.smwb-button_color-warning.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-warningColorHover)}.smwb-button_color-warning.smwb-text{color:var(--smui-warningColor)}.smwb-button_color-warning.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-warningColorHover)}.smwb-button_color-info.smwb-contained{background-color:var(--smui-infoColor);color:var(--smui-onInfoColor)}.smwb-button_color-info.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-infoColor) 88%,#000)}.smwb-button_color-info.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-infoColor) 78%,#000)}.smwb-button_color-info.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-infoColor) 78%,#000)}.smwb-button_color-info.smwb-outlined{color:var(--smui-infoColor);border-color:var(--smui-infoColor)}.smwb-button_color-info.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-infoColorHover)}.smwb-button_color-info.smwb-text{color:var(--smui-infoColor)}.smwb-button_color-info.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-infoColorHover)}
|
|
1
|
+
.smwb-button{gap:8px;overflow:hidden;font-weight:500;cursor:pointer;transition:all .2s ease-out;display:inline-flex;align-items:center;justify-content:center;border-radius:24px;letter-spacing:1px;vertical-align:middle;word-spacing:0;line-height:1.5;min-width:64px;position:relative;align-self:flex-start}.smwb-button:disabled,.smwb-button.smwb-disabled{color:var(--smui-disabledTextColor);pointer-events:none;border-color:var(--smui-buttonDisabledBg)}.smwb-button:disabled.smwb-contained,.smwb-button.smwb-disabled.smwb-contained{background-color:var(--smui-buttonDisabledBg);color:var(--smui-disabledTextColor)}.smwb-button.smwb-full-width{width:100%}.smwb-button.smwb-small{font-size:13px;padding:4px 10px;min-height:var(--smui-control-h-sm, 32px)}.smwb-button.smwb-medium{font-size:14px;padding:6px 14px;min-height:var(--smui-control-h-md, 40px)}.smwb-button.smwb-large{font-size:15px;padding:8px 22px;min-height:var(--smui-control-h-lg, 48px)}.smwb-button.smwb-button_icon-only{box-sizing:border-box;min-width:0;padding:0;flex:none;border-radius:8px}.smwb-button.smwb-button_icon-only:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}.smwb-button.smwb-button_icon-only.smwb-small{width:var(--smui-control-h-sm, 32px);height:var(--smui-control-h-sm, 32px)}.smwb-button.smwb-button_icon-only.smwb-medium{width:var(--smui-control-h-md, 40px);height:var(--smui-control-h-md, 40px)}.smwb-button.smwb-button_icon-only.smwb-large{width:var(--smui-control-h-lg, 48px);height:var(--smui-control-h-lg, 48px)}.smwb-button.smwb-contained{color:var(--smui-onPrimaryColor);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-button.smwb-contained.smwb-primary:not(.smwb-disabled){background-color:var(--smui-primaryColor)}.smwb-button.smwb-contained.smwb-primary:hover{background-color:var(--smui-buttonContainedHoverBg);box-shadow:0 4px 22px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-button.smwb-contained.smwb-primary:disabled{background-color:var(--smui-buttonDisabledBg)}.smwb-button.smwb-contained.smwb-primary:focus{background-color:var(--smui-buttonContainedFocusBg)}.smwb-button.smwb-contained.smwb-primary:active{background-color:var(--smui-buttonContainedActiveBg)}.smwb-button.smwb-outlined{background-color:transparent;border:1px solid var(--smui-outlineColor)}.smwb-button.smwb-outlined.smwb-primary:not(.smwb-disabled){color:var(--smui-primaryColor)}.smwb-button.smwb-outlined:hover{background-color:var(--smui-buttonOutlinedHoverBg)}.smwb-button.smwb-outlined:focus{background-color:var(--smui-buttonOutlinedFocusBg)}.smwb-button.smwb-outlined:active{background-color:var(--smui-buttonOutlinedActiveBg);border:1px solid var(--smui-primaryColor)}.smwb-button.smwb-outlined:disabled,.smwb-button.smwb-outlined.smwb-disabled{background-color:transparent;color:var(--smui-disabledTextColor);border-color:var(--smui-buttonDisabledBg)}.smwb-button.smwb-text{background-color:transparent}.smwb-button.smwb-text.smwb-primary:not(.smwb-disabled){color:var(--smui-primaryColor)}.smwb-button.smwb-text.smwb-primary:disabled{background-color:transparent}.smwb-button.smwb-text.smwb-primary:hover{background-color:var(--smui-buttonOutlinedHoverBg)}.smwb-button.smwb-text.smwb-primary:focus{background-color:var(--smui-buttonOutlinedFocusBg)}.smwb-button.smwb-text.smwb-primary:active{background-color:var(--smui-buttonOutlinedActiveBg)}.smwb-button.smwb-text:disabled{background-color:transparent;color:var(--smui-disabledTextColor);border-color:var(--smui-buttonDisabledBg)}.smwb-button *{pointer-events:none}.smwb-button_color-secondary.smwb-contained{background-color:var(--smui-secondaryColor);color:var(--smui-onSecondaryColor)}.smwb-button_color-secondary.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-secondaryColor) 88%,#000)}.smwb-button_color-secondary.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-secondaryColor) 78%,#000)}.smwb-button_color-secondary.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-secondaryColor) 78%,#000)}.smwb-button_color-secondary.smwb-outlined{color:var(--smui-secondaryColor);border-color:var(--smui-secondaryColor)}.smwb-button_color-secondary.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-secondaryColorHover)}.smwb-button_color-secondary.smwb-text{color:var(--smui-secondaryColor)}.smwb-button_color-secondary.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-secondaryColorHover)}.smwb-button_color-error.smwb-contained{background-color:var(--smui-errorColor);color:var(--smui-onErrorColor)}.smwb-button_color-error.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-errorColor) 88%,#000)}.smwb-button_color-error.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-errorColor) 78%,#000)}.smwb-button_color-error.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-errorColor) 78%,#000)}.smwb-button_color-error.smwb-outlined{color:var(--smui-errorColor);border-color:var(--smui-errorColor)}.smwb-button_color-error.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-errorColorHover)}.smwb-button_color-error.smwb-text{color:var(--smui-errorColor)}.smwb-button_color-error.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-errorColorHover)}.smwb-button_color-success.smwb-contained{background-color:var(--smui-successColor);color:var(--smui-onSuccessColor)}.smwb-button_color-success.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-successColor) 88%,#000)}.smwb-button_color-success.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-successColor) 78%,#000)}.smwb-button_color-success.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-successColor) 78%,#000)}.smwb-button_color-success.smwb-outlined{color:var(--smui-successColor);border-color:var(--smui-successColor)}.smwb-button_color-success.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-successColorHover)}.smwb-button_color-success.smwb-text{color:var(--smui-successColor)}.smwb-button_color-success.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-successColorHover)}.smwb-button_color-warning.smwb-contained{background-color:var(--smui-warningColor);color:var(--smui-onWarningColor)}.smwb-button_color-warning.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-warningColor) 88%,#000)}.smwb-button_color-warning.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-warningColor) 78%,#000)}.smwb-button_color-warning.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-warningColor) 78%,#000)}.smwb-button_color-warning.smwb-outlined{color:var(--smui-warningColor);border-color:var(--smui-warningColor)}.smwb-button_color-warning.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-warningColorHover)}.smwb-button_color-warning.smwb-text{color:var(--smui-warningColor)}.smwb-button_color-warning.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-warningColorHover)}.smwb-button_color-info.smwb-contained{background-color:var(--smui-infoColor);color:var(--smui-onInfoColor)}.smwb-button_color-info.smwb-contained:hover:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-infoColor) 88%,#000)}.smwb-button_color-info.smwb-contained:focus:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-infoColor) 78%,#000)}.smwb-button_color-info.smwb-contained:active:not(.smwb-disabled){background-color:color-mix(in srgb,var(--smui-infoColor) 78%,#000)}.smwb-button_color-info.smwb-outlined{color:var(--smui-infoColor);border-color:var(--smui-infoColor)}.smwb-button_color-info.smwb-outlined:hover:not(.smwb-disabled){background-color:var(--smui-infoColorHover)}.smwb-button_color-info.smwb-text{color:var(--smui-infoColor)}.smwb-button_color-info.smwb-text:hover:not(.smwb-disabled){background-color:var(--smui-infoColorHover)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-button-group{display:inline-flex;border-radius:24px}.smwb-button-group.smwb-vertical{flex-direction:column}.smwb-button-group.smwb-contained{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-button-group.smwb-full-width{width:100%}.smwb-button-group__grouped{align-self:stretch;min-width:40px}.smwb-contained .smwb-button-group__grouped{box-shadow:none}.smwb-
|
|
1
|
+
.smwb-button-group{display:inline-flex;border-radius:24px}.smwb-button-group.smwb-vertical{flex-direction:column}.smwb-button-group.smwb-contained{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-button-group.smwb-full-width{width:100%}.smwb-button-group__grouped{align-self:stretch;min-width:40px}.smwb-contained .smwb-button-group__grouped{box-shadow:none}.smwb-button-group.smwb-horizontal>.smwb-button-group__grouped:not(:first-of-type){border-top-left-radius:0;border-bottom-left-radius:0}.smwb-button-group.smwb-horizontal>.smwb-button-group__grouped:not(:first-of-type).smwb-outlined{margin-left:-1px}.smwb-button-group.smwb-horizontal>.smwb-button-group__grouped:not(:last-of-type){border-top-right-radius:0;border-bottom-right-radius:0}.smwb-button-group.smwb-horizontal>.smwb-button-group__grouped:not(:last-of-type).smwb-outlined{border-right-color:transparent}.smwb-button-group.smwb-horizontal>.smwb-button-group__grouped:not(:last-of-type).smwb-contained{border-right:1px solid color-mix(in srgb,#fff 12%,var(--smui-primaryColor))}.smwb-button-group.smwb-horizontal>.smwb-button-group__grouped:not(:last-of-type).smwb-text{border-right:1px solid var(--smui-primaryColor)}.smwb-button-group.smwb-horizontal>.smwb-button-group__grouped:not(:last-of-type).smwb-disabled.smwb-text,.smwb-button-group.smwb-horizontal>.smwb-button-group__grouped:not(:last-of-type).smwb-disabled.smwb-contained{border-right:1px solid var(--smui-disabledBgColor)}.smwb-button-group.smwb-vertical>.smwb-button-group__grouped:not(:first-of-type){border-top-right-radius:0;border-top-left-radius:0}.smwb-button-group.smwb-vertical>.smwb-button-group__grouped:not(:first-of-type).smwb-outlined{margin-top:-1px}.smwb-button-group.smwb-vertical>.smwb-button-group__grouped:not(:last-of-type){border-bottom-right-radius:0;border-bottom-left-radius:0}.smwb-button-group.smwb-vertical>.smwb-button-group__grouped:not(:last-of-type).smwb-outlined{border-bottom-color:transparent}.smwb-button-group.smwb-vertical>.smwb-button-group__grouped:not(:last-of-type).smwb-contained{border-bottom:1px solid color-mix(in srgb,#fff 12%,var(--smui-primaryColor))}.smwb-button-group.smwb-vertical>.smwb-button-group__grouped:not(:last-of-type).smwb-text{border-bottom:1px solid color-mix(in srgb,var(--smui-primaryColor) 50%,transparent)}.smwb-button-group.smwb-vertical>.smwb-button-group__grouped:not(:last-of-type).smwb-disabled.smwb-text,.smwb-button-group.smwb-vertical>.smwb-button-group__grouped:not(:last-of-type).smwb-disabled.smwb-contained{border-bottom:1px solid var(--smui-disabledBgColor)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-dag-view{--smwb-dag-view-node-bg: var(--smui-surfaceBackground);--smwb-dag-view-node-border: var(--smui-outlineColor);--smwb-dag-view-edge-color: var(--smui-outlineColor);--smwb-dag-view-edge-active-color: var(--smui-primaryColor);--smwb-dag-view-selected-ring: var(--smui-primaryColor);--smwb-dag-view-status-idle: var(--smui-outlineColor);--smwb-dag-view-status-pending: var(--smui-onSurfaceVariant);--smwb-dag-view-status-running: var(--smui-infoColor);--smwb-dag-view-status-success: var(--smui-successColor);--smwb-dag-view-status-warning: var(--smui-warningColor);--smwb-dag-view-status-error: var(--smui-errorColor);--smwb-dag-view-status-skipped: var(--smui-disabledTextColor);--smwb-dag-view-dim-opacity: .35;position:relative;width:100%;height:480px;min-width:0;box-sizing:border-box;overflow:hidden;overflow:clip;border:1px solid var(--smui-dividerColor);border-radius:12px;background-color:color-mix(in srgb,var(--smui-onSurfaceColor) 2%,var(--smui-surfaceBackground));color:var(--smui-onSurfaceColor);touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;cursor:grab}.smwb-dag-view[data-interacting]{cursor:grabbing}.smwb-dag-view__world{position:absolute;top:0;left:0;transform-origin:0 0}.smwb-dag-view[data-interacting] .smwb-dag-view__world{will-change:transform}.smwb-dag-view__edges{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}.smwb-dag-view__edge{fill:none;stroke:var(--smwb-dag-view-edge-color);stroke-width:1.5px;transition:stroke .12s,opacity .12s}.smwb-dag-view__edge--active{stroke:var(--smwb-dag-view-edge-active-color);stroke-width:2.5px}.smwb-dag-view__edge--reversed{stroke-dasharray:6 4}.smwb-dag-view__edge--dimmed{opacity:var(--smwb-dag-view-dim-opacity)}.smwb-dag-view__arrow{fill:var(--smwb-dag-view-edge-color)}.smwb-dag-view__arrow--active{fill:var(--smwb-dag-view-edge-active-color)}.smwb-dag-view__node{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-idle));position:absolute;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;border:1px solid var(--smwb-dag-view-node-border);border-left:4px solid var(--smwb-dag-view-accent);border-radius:8px;background-color:var(--smwb-dag-view-node-bg);color:var(--smui-onSurfaceColor);font-size:.875rem;line-height:1.3;overflow:hidden;contain:layout paint;cursor:pointer;transition:box-shadow .12s,border-color .12s,opacity .12s}.smwb-dag-view__node[data-status=pending]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-pending))}.smwb-dag-view__node[data-status=running]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-running))}.smwb-dag-view__node[data-status=success]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-success))}.smwb-dag-view__node[data-status=warning]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-warning))}.smwb-dag-view__node[data-status=error]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-error))}.smwb-dag-view__node[data-status=skipped]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-skipped))}.smwb-dag-view__node:hover{border-color:color-mix(in srgb,var(--smwb-dag-view-edge-active-color) 45%,var(--smwb-dag-view-node-border));border-left-color:var(--smwb-dag-view-accent)}.smwb-dag-view__node:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}.smwb-dag-view__node--selected{box-shadow:0 0 0 2px var(--smwb-dag-view-selected-ring)}.smwb-dag-view__node--upstream,.smwb-dag-view__node--downstream{border-color:var(--smwb-dag-view-edge-active-color);border-left-color:var(--smwb-dag-view-accent)}.smwb-dag-view__node--dimmed{opacity:var(--smwb-dag-view-dim-opacity)}.smwb-dag-view__node--disabled{cursor:default;color:var(--smui-disabledTextColor)}.smwb-dag-view__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background-color:var(--smwb-dag-view-accent)}.smwb-dag-view__label{flex:1 1 auto;min-width:0;overflow:hidden;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.smwb-dag-view__status{flex-shrink:0;font-size:.75rem;color:var(--smui-onSurfaceVariant)}.smwb-dag-view[data-zoom=far] .smwb-dag-view__status,.smwb-dag-view[data-zoom=far] .smwb-dag-view__detail{display:none}.smwb-dag-view__summary{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.smwb-dag-view__controls{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;gap:4px;cursor:default}.smwb-dag-view__control{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--smui-dividerColor);border-radius:8px;background-color:var(--smui-surfaceBackground);color:var(--smui-onSurfaceVariant);cursor:pointer}.smwb-dag-view__control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.smwb-dag-view__control:hover{background-color:color-mix(in srgb,var(--smui-onSurfaceColor) 8%,var(--smui-surfaceBackground));color:var(--smui-onSurfaceColor)}.smwb-dag-view__control:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}@media(prefers-reduced-motion:no-preference){.smwb-dag-view__node[data-status=running] .smwb-dag-view__dot{animation:smwb-dag-view-pulse 1.4s ease-in-out infinite}}@keyframes smwb-dag-view-pulse{50%{opacity:.35}}
|
|
1
|
+
.smwb-dag-view{--smwb-dag-view-node-bg: var(--smui-surfaceBackground);--smwb-dag-view-node-border: var(--smui-outlineColor);--smwb-dag-view-edge-color: var(--smui-outlineColor);--smwb-dag-view-edge-active-color: var(--smui-primaryColor);--smwb-dag-view-selected-ring: var(--smui-primaryColor);--smwb-dag-view-status-idle: var(--smui-outlineColor);--smwb-dag-view-status-pending: var(--smui-onSurfaceVariant);--smwb-dag-view-status-running: var(--smui-infoColor);--smwb-dag-view-status-success: var(--smui-successColor);--smwb-dag-view-status-warning: var(--smui-warningColor);--smwb-dag-view-status-error: var(--smui-errorColor);--smwb-dag-view-status-skipped: var(--smui-disabledTextColor);--smwb-dag-view-dim-opacity: .35;--smwb-dag-view-node-border-style: solid;position:relative;width:100%;height:480px;min-width:0;box-sizing:border-box;overflow:hidden;overflow:clip;border:1px solid var(--smui-dividerColor);border-radius:12px;background-color:color-mix(in srgb,var(--smui-onSurfaceColor) 2%,var(--smui-surfaceBackground));color:var(--smui-onSurfaceColor);touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;cursor:grab}.smwb-dag-view[data-interacting]{cursor:grabbing}.smwb-dag-view__world{position:absolute;top:0;left:0;transform-origin:0 0}.smwb-dag-view[data-interacting] .smwb-dag-view__world{will-change:transform}.smwb-dag-view__edges{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}.smwb-dag-view__edge{fill:none;stroke:var(--smwb-dag-view-edge-color);stroke-width:1.5px;transition:stroke .12s,opacity .12s}.smwb-dag-view__edge--active{stroke:var(--smwb-dag-view-edge-active-color);stroke-width:2.5px}.smwb-dag-view__edge--reversed{stroke-dasharray:6 4}.smwb-dag-view__edge--dimmed{opacity:var(--smwb-dag-view-dim-opacity)}.smwb-dag-view__arrow{fill:var(--smwb-dag-view-edge-color)}.smwb-dag-view__arrow--active{fill:var(--smwb-dag-view-edge-active-color)}.smwb-dag-view__node{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-idle));--smwb-dag-view-border-style: var(--smwb-dag-view-node-border-style);position:absolute;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;border:1px solid var(--smwb-dag-view-node-border);border-left:4px solid var(--smwb-dag-view-accent);border-style:var(--smwb-dag-view-border-style);border-radius:8px;background-color:var(--smwb-dag-view-node-bg);color:var(--smui-onSurfaceColor);font-size:.875rem;line-height:1.3;overflow:hidden;contain:layout paint;cursor:pointer;transition:box-shadow .12s,border-color .12s,opacity .12s}.smwb-dag-view__node[data-status=pending]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-pending));--smwb-dag-view-border-style: var(--smwb-dag-view-status-pending-border-style, var(--smwb-dag-view-node-border-style))}.smwb-dag-view__node[data-status=running]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-running));--smwb-dag-view-border-style: var(--smwb-dag-view-status-running-border-style, var(--smwb-dag-view-node-border-style))}.smwb-dag-view__node[data-status=success]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-success));--smwb-dag-view-border-style: var(--smwb-dag-view-status-success-border-style, var(--smwb-dag-view-node-border-style))}.smwb-dag-view__node[data-status=warning]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-warning));--smwb-dag-view-border-style: var(--smwb-dag-view-status-warning-border-style, var(--smwb-dag-view-node-border-style))}.smwb-dag-view__node[data-status=error]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-error));--smwb-dag-view-border-style: var(--smwb-dag-view-status-error-border-style, var(--smwb-dag-view-node-border-style))}.smwb-dag-view__node[data-status=skipped]{--smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-skipped));--smwb-dag-view-border-style: var(--smwb-dag-view-status-skipped-border-style, var(--smwb-dag-view-node-border-style))}.smwb-dag-view__node[data-variant=solid]{--smwb-dag-view-border-style: solid}.smwb-dag-view__node[data-variant=dashed]{--smwb-dag-view-border-style: dashed}.smwb-dag-view__node:hover{border-color:color-mix(in srgb,var(--smwb-dag-view-edge-active-color) 45%,var(--smwb-dag-view-node-border));border-left-color:var(--smwb-dag-view-accent)}.smwb-dag-view__node:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}.smwb-dag-view__node--selected{box-shadow:0 0 0 2px var(--smwb-dag-view-selected-ring)}.smwb-dag-view__node--upstream,.smwb-dag-view__node--downstream{border-color:var(--smwb-dag-view-edge-active-color);border-left-color:var(--smwb-dag-view-accent)}.smwb-dag-view__node--dimmed{opacity:var(--smwb-dag-view-dim-opacity)}.smwb-dag-view__node--disabled{cursor:default;color:var(--smui-disabledTextColor)}.smwb-dag-view__dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background-color:var(--smwb-dag-view-accent)}.smwb-dag-view__label{flex:1 1 auto;min-width:0;overflow:hidden;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.smwb-dag-view__status{flex-shrink:0;font-size:.75rem;color:var(--smui-onSurfaceVariant)}.smwb-dag-view[data-zoom=far] .smwb-dag-view__status,.smwb-dag-view[data-zoom=far] .smwb-dag-view__detail{display:none}.smwb-dag-view__summary{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.smwb-dag-view__controls{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;gap:4px;cursor:default}.smwb-dag-view__control{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--smui-dividerColor);border-radius:8px;background-color:var(--smui-surfaceBackground);color:var(--smui-onSurfaceVariant);cursor:pointer}.smwb-dag-view__control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.smwb-dag-view__control:hover{background-color:color-mix(in srgb,var(--smui-onSurfaceColor) 8%,var(--smui-surfaceBackground));color:var(--smui-onSurfaceColor)}.smwb-dag-view__control:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:2px}@media(prefers-reduced-motion:no-preference){.smwb-dag-view__node[data-status=running] .smwb-dag-view__dot{animation:smwb-dag-view-pulse 1.4s ease-in-out infinite}}@keyframes smwb-dag-view-pulse{50%{opacity:.35}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-meter{--smwb-meter-color: var(--smui-infoColor);display:grid;grid-template-columns:minmax(3.5rem,1fr) auto;align-items:center;column-gap:8px;width:100%;min-width:0;font-size:.875rem;line-height:1.4}.smwb-meter__track{display:block;height:6px;border-radius:999px;background-color:var(--smui-indicatorTrackBg);overflow:hidden}.smwb-meter__fill{display:block;height:100%;border-radius:inherit;background-color:var(--smwb-meter-color);transition:width .2s ease-out}.smwb-meter__text{white-space:nowrap;font-variant-numeric:tabular-nums}.smwb-meter__value{font-weight:600}.smwb-meter__of{color:var(--smui-onSurfaceVariant)}.smwb-meter_bar-only{grid-template-columns:minmax(3.5rem,1fr)}.smwb-meter_color-neutral{--smwb-meter-color: var(--smui-onSurfaceVariant)}.smwb-meter_color-primary{--smwb-meter-color: var(--smui-primaryColor)}.smwb-meter_color-info{--smwb-meter-color: var(--smui-infoColor)}.smwb-meter_color-success{--smwb-meter-color: var(--smui-successColor)}.smwb-meter_color-warning{--smwb-meter-color: var(--smui-warningColor)}.smwb-meter_color-error{--smwb-meter-color: var(--smui-errorColor)}
|
|
1
|
+
.smwb-meter{--smwb-meter-color: var(--smui-infoColor);display:grid;grid-template-columns:minmax(3.5rem,1fr) auto;align-items:center;column-gap:8px;width:100%;min-width:0;font-size:.875rem;line-height:1.4}.smwb-meter__track{display:block;height:6px;border-radius:999px;background-color:var(--smui-indicatorTrackBg);overflow:hidden}.smwb-meter__fill{display:block;height:100%;border-radius:inherit;background-color:var(--smwb-meter-color);transition:width .2s ease-out}.smwb-meter__text{white-space:nowrap;font-variant-numeric:tabular-nums}.smwb-meter__value{font-weight:600}.smwb-meter__of{color:var(--smui-onSurfaceVariant)}.smwb-meter_text-before{grid-template-columns:auto minmax(3.5rem,1fr)}.smwb-meter_text-before .smwb-meter__text{order:-1}.smwb-meter_compact{grid-template-columns:64px auto;width:fit-content;max-width:100%;font-size:.75rem}.smwb-meter_compact .smwb-meter__track{height:4px}.smwb-meter_compact .smwb-meter__text{color:var(--smui-onSurfaceVariant)}.smwb-meter_compact.smwb-meter_text-before{grid-template-columns:auto 64px}.smwb-meter_bar-only{grid-template-columns:minmax(3.5rem,1fr)}.smwb-meter_compact.smwb-meter_bar-only{grid-template-columns:64px}.smwb-meter_color-neutral{--smwb-meter-color: var(--smui-onSurfaceVariant)}.smwb-meter_color-primary{--smwb-meter-color: var(--smui-primaryColor)}.smwb-meter_color-info{--smwb-meter-color: var(--smui-infoColor)}.smwb-meter_color-success{--smwb-meter-color: var(--smui-successColor)}.smwb-meter_color-warning{--smwb-meter-color: var(--smui-warningColor)}.smwb-meter_color-error{--smwb-meter-color: var(--smui-errorColor)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-screen-divider__wrapper{display:flex;width:100%;height:100%;overflow:hidden}.smwb-screen-divider__wrapper.smwb-vertical{flex-direction:column}.smwb-screen-divider__wrapper.smwb-vertical
|
|
1
|
+
.smwb-screen-divider__wrapper{display:flex;width:100%;height:100%;overflow:hidden}.smwb-screen-divider__wrapper.smwb-vertical{flex-direction:column}.smwb-screen-divider__wrapper.smwb-vertical>.smwb-screen-divider__resizer{border-top:thin solid var(--smui-primaryColor);border-bottom:thin solid var(--smui-primaryColor);border-left:none;margin:0 5px;min-width:100%;max-height:.7rem;min-height:.7rem;cursor:n-resize;writing-mode:vertical-rl}.smwb-screen-divider__resizer{border-left:thin solid var(--smui-primaryColor);border-right:thin solid var(--smui-primaryColor);background:var(--smui-primaryContainer);margin:5px 0;max-width:.7rem;min-width:.7rem;flex-shrink:0;min-height:100%;cursor:e-resize;z-index:2;user-select:none;touch-action:none;overflow-wrap:break-word;display:flex;justify-content:center;flex-direction:column;line-height:10px}.smwb-screen-divider__resizer:after{content:"......";text-align:center}.smwb-screen-divider__resizer[hidden]{display:none}.smwb-screen-divider__first,.smwb-screen-divider__second{min-height:5px;min-width:5px;flex-shrink:1}.smwb-screen-divider__first.smwb-collapsed,.smwb-screen-divider__second.smwb-collapsed{min-height:0;min-width:0;overflow:hidden;visibility:hidden}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-sheet{background-color:var(--smui-surfaceBackground);position:fixed;opacity:0;transition:all .2s ease-in-out;box-shadow:#00000024 0 8px 10px -5px,#00000024 0 1px 14px 1px,#00000024 0 6px 22px 4px;z-index:100;padding:10px 20px 20px;box-sizing:border-box;overflow:hidden;display:flex;max-width:100vw}.smwb-sheet__header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;gap:4px;padding-bottom:5px}.smwb-sheet__header .smwb-button{min-width:0}.smwb-sheet__drag-handle{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1;touch-action:none;user-select:none}.smwb-sheet__drag-handle:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-sheet__drag-handle-bar{display:block;border-radius:999px;background-color:var(--smui-onSurfaceVariant);opacity:.4;transition:opacity .15s ease-in-out}.smwb-sheet__drag-handle:hover .smwb-sheet__drag-handle-bar,.smwb-sheet__drag-handle:active .smwb-sheet__drag-handle-bar{opacity:.7}.smwb-sheet_resizable.smwb-bottom{padding-top:20px}.smwb-sheet_resizable.smwb-top{padding-bottom:20px}.smwb-sheet_resizable.smwb-left{padding-right:20px}.smwb-sheet_resizable.smwb-right{padding-left:20px}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle,.smwb-sheet.smwb-top .smwb-sheet__drag-handle{left:0;right:0;height:20px;cursor:ns-resize}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar,.smwb-sheet.smwb-top .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar{width:36px;height:4px}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle{top:0}.smwb-sheet.smwb-top .smwb-sheet__drag-handle{bottom:0}.smwb-sheet.smwb-left .smwb-sheet__drag-handle,.smwb-sheet.smwb-right .smwb-sheet__drag-handle{top:0;bottom:0;width:20px;cursor:ew-resize}.smwb-sheet.smwb-left .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar,.smwb-sheet.smwb-right .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar{width:4px;height:36px}.smwb-sheet.smwb-right .smwb-sheet__drag-handle{left:0}.smwb-sheet.smwb-left .smwb-sheet__drag-handle{right:0}.smwb-sheet__inner{display:flex;flex-direction:column;height:100%;width:100%;overflow-y:auto}.smwb-sheet.smwb-bottom{border-radius:28px 28px 0 0;bottom:0;left:0;width:100%;height:var(--sizeProp);transform:translateY(100%);flex-direction:column}.smwb-sheet.smwb-bottom .smwb-sheet__header{width:100%}.smwb-sheet.smwb-top{border-radius:0 0 28px 28px;top:
|
|
1
|
+
.smwb-sheet{background-color:var(--smui-surfaceBackground);position:fixed;opacity:0;transition:all .2s ease-in-out;box-shadow:#00000024 0 8px 10px -5px,#00000024 0 1px 14px 1px,#00000024 0 6px 22px 4px;z-index:100;padding:10px 20px 20px;box-sizing:border-box;overflow:hidden;display:flex;max-width:100vw}.smwb-sheet__header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;gap:4px;padding-bottom:5px}.smwb-sheet__header .smwb-button{min-width:0}.smwb-sheet__drag-handle{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1;touch-action:none;user-select:none}.smwb-sheet__drag-handle:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-sheet__drag-handle-bar{display:block;border-radius:999px;background-color:var(--smui-onSurfaceVariant);opacity:.4;transition:opacity .15s ease-in-out}.smwb-sheet__drag-handle:hover .smwb-sheet__drag-handle-bar,.smwb-sheet__drag-handle:active .smwb-sheet__drag-handle-bar{opacity:.7}.smwb-sheet_resizable.smwb-bottom{padding-top:20px}.smwb-sheet_resizable.smwb-top{padding-bottom:20px}.smwb-sheet_resizable.smwb-left{padding-right:20px}.smwb-sheet_resizable.smwb-right{padding-left:20px}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle,.smwb-sheet.smwb-top .smwb-sheet__drag-handle{left:0;right:0;height:20px;cursor:ns-resize}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar,.smwb-sheet.smwb-top .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar{width:36px;height:4px}.smwb-sheet.smwb-bottom .smwb-sheet__drag-handle{top:0}.smwb-sheet.smwb-top .smwb-sheet__drag-handle{bottom:0}.smwb-sheet.smwb-left .smwb-sheet__drag-handle,.smwb-sheet.smwb-right .smwb-sheet__drag-handle{top:0;bottom:0;width:20px;cursor:ew-resize}.smwb-sheet.smwb-left .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar,.smwb-sheet.smwb-right .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar{width:4px;height:36px}.smwb-sheet.smwb-right .smwb-sheet__drag-handle{left:0}.smwb-sheet.smwb-left .smwb-sheet__drag-handle{right:0}.smwb-sheet__inner{display:flex;flex-direction:column;height:100%;width:100%;overflow-y:auto}.smwb-sheet.smwb-bottom{border-radius:28px 28px 0 0;bottom:0;left:0;width:100%;height:var(--sizeProp);transform:translateY(100%);flex-direction:column}.smwb-sheet.smwb-bottom .smwb-sheet__header{width:100%}.smwb-sheet.smwb-top{border-radius:0 0 28px 28px;top:var(--smui-sheet-offset-top, 0px);left:0;width:100%;height:var(--sizeProp);max-height:calc(100% - var(--smui-sheet-offset-top, 0px));transform:translateY(-100%);flex-direction:column}.smwb-sheet.smwb-top .smwb-sheet__header{width:100%}.smwb-sheet.smwb-left{border-radius:0 28px 28px 0;top:var(--smui-sheet-offset-top, 0px);left:0;height:calc(100% - var(--smui-sheet-offset-top, 0px));width:var(--sizeProp);transform:translate(-100%);flex-direction:row-reverse}.smwb-sheet.smwb-left .smwb-sheet__header{flex-direction:column;height:100%;padding-left:10px}.smwb-sheet.smwb-right{border-radius:28px 0 0 28px;top:var(--smui-sheet-offset-top, 0px);right:0;height:calc(100% - var(--smui-sheet-offset-top, 0px));width:var(--sizeProp);transform:translate(100%)}.smwb-sheet.smwb-right .smwb-sheet__header{flex-direction:column;height:100%}.smwb-sheet__overlay{position:fixed;top:var(--smui-sheet-offset-top, 0px);left:0;width:100%;height:calc(100% - var(--smui-sheet-offset-top, 0px));display:flex;flex-direction:column;z-index:100;opacity:0;transition:all .25s ease-in-out;clip-path:inset(0)}.smwb-sheet__overlay.smwb-entered{opacity:1}.smwb-sheet__overlay.smwb-dark{background-color:#00000080}.smwb-sheet__default.smwb-entered .smwb-sheet,.smwb-sheet__overlay.smwb-entered .smwb-sheet{opacity:1}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom{transform:translateY(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom.smwb-expanded{height:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-bottom.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-bottom.smwb-small{height:10%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-top,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-top{transform:translateY(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-top.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-top.smwb-expanded{height:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-top.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-top.smwb-small{height:10%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left{transform:translate(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left.smwb-expanded{width:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-left.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-left.smwb-small{width:10%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right{transform:translate(0)}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right.smwb-expanded,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right.smwb-expanded{width:90%}.smwb-sheet__default.smwb-entered .smwb-sheet.smwb-right.smwb-small,.smwb-sheet__overlay.smwb-entered .smwb-sheet.smwb-right.smwb-small{width:10%}.smwb-scrollbar::-webkit-scrollbar-thumb{background-color:var(--smui-scrollThumbColor);width:6px;border-radius:999px}.smwb-scrollbar::-webkit-scrollbar{width:6px}.smwb-scrollbar::-webkit-scrollbar-track{background-color:transparent}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-status-dot{--smwb-status-dot-color: var(--smui-onSurfaceVariant);display:inline-block;position:relative;flex:none;box-sizing:border-box;width:12px;height:12px;border-radius:50%;background-color:var(--smwb-status-dot-color);vertical-align:middle}.smwb-status-dot_size-sm{width:8px;height:8px}.smwb-status-dot_status-active{--smwb-status-dot-color: var(--smui-infoColor)}.smwb-status-dot_status-attention{--smwb-status-dot-color: var(--smui-warningColor)}.smwb-status-dot_status-idle{--smwb-status-dot-color: var(--smui-onSurfaceVariant)}.smwb-status-dot_status-done{--smwb-status-dot-color: var(--smui-successColor)}.smwb-status-dot_status-error{--smwb-status-dot-color: var(--smui-errorColor)}.smwb-status-dot_status-unknown{--smwb-status-dot-color: var(--smui-outlineColor);background-color:transparent;border:2px solid var(--smwb-status-dot-color)}.smwb-status-dot_color-default{--smwb-status-dot-color: var(--smui-onSurfaceVariant)}.smwb-status-dot_color-primary{--smwb-status-dot-color: var(--smui-primaryColor)}.smwb-status-dot_color-secondary{--smwb-status-dot-color: var(--smui-secondaryColor)}.smwb-status-dot_color-error{--smwb-status-dot-color: var(--smui-errorColor)}.smwb-status-dot_color-success{--smwb-status-dot-color: var(--smui-successColor)}.smwb-status-dot_color-warning{--smwb-status-dot-color: var(--smui-warningColor)}.smwb-status-dot_color-info{--smwb-status-dot-color: var(--smui-infoColor)}.smwb-status-dot_pulse:after{content:"";position:absolute;inset:0;border-radius:inherit;background-color:var(--smwb-status-dot-color);opacity:0;pointer-events:none}.smwb-status-dot_status-unknown.smwb-status-dot_pulse:after{inset:-2px;background-color:transparent;border:2px solid var(--smwb-status-dot-color)}@media(prefers-reduced-motion:no-preference){.smwb-status-dot_pulse:after{animation:smwb-status-dot-pulse 1.6s ease-out infinite}}@keyframes smwb-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.4);opacity:0}}@media(forced-colors:active){.smwb-status-dot{background-color:CanvasText}.smwb-status-dot_status-unknown{background-color:transparent;border-color:CanvasText}.smwb-status-dot_pulse:after{background-color:CanvasText}.smwb-status-dot_status-unknown.smwb-status-dot_pulse:after{background-color:transparent;border-color:CanvasText}}
|
|
1
|
+
.smwb-status-dot{--smwb-status-dot-color: var(--smui-onSurfaceVariant);display:inline-block;position:relative;flex:none;box-sizing:border-box;width:12px;height:12px;border-radius:50%;background-color:var(--smwb-status-dot-color);vertical-align:middle}.smwb-status-dot_size-sm{width:8px;height:8px}.smwb-status-dot_shape-diamond{width:8.4853px;height:8.4853px;margin:1.7573px;border-radius:0;transform:rotate(45deg)}.smwb-status-dot_shape-diamond.smwb-status-dot_size-sm{width:5.6569px;height:5.6569px;margin:1.1715px}.smwb-status-dot_status-active{--smwb-status-dot-color: var(--smui-infoColor)}.smwb-status-dot_status-attention{--smwb-status-dot-color: var(--smui-warningColor)}.smwb-status-dot_status-idle{--smwb-status-dot-color: var(--smui-onSurfaceVariant)}.smwb-status-dot_status-done{--smwb-status-dot-color: var(--smui-successColor)}.smwb-status-dot_status-error{--smwb-status-dot-color: var(--smui-errorColor)}.smwb-status-dot_status-unknown{--smwb-status-dot-color: var(--smui-outlineColor);background-color:transparent;border:2px solid var(--smwb-status-dot-color)}.smwb-status-dot_color-default{--smwb-status-dot-color: var(--smui-onSurfaceVariant)}.smwb-status-dot_color-primary{--smwb-status-dot-color: var(--smui-primaryColor)}.smwb-status-dot_color-secondary{--smwb-status-dot-color: var(--smui-secondaryColor)}.smwb-status-dot_color-error{--smwb-status-dot-color: var(--smui-errorColor)}.smwb-status-dot_color-success{--smwb-status-dot-color: var(--smui-successColor)}.smwb-status-dot_color-warning{--smwb-status-dot-color: var(--smui-warningColor)}.smwb-status-dot_color-info{--smwb-status-dot-color: var(--smui-infoColor)}.smwb-status-dot_pulse:after{content:"";position:absolute;inset:0;border-radius:inherit;background-color:var(--smwb-status-dot-color);opacity:0;pointer-events:none}.smwb-status-dot_status-unknown.smwb-status-dot_pulse:after{inset:-2px;background-color:transparent;border:2px solid var(--smwb-status-dot-color)}@media(prefers-reduced-motion:no-preference){.smwb-status-dot_pulse:after{animation:smwb-status-dot-pulse 1.6s ease-out infinite}}@keyframes smwb-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.4);opacity:0}}@media(forced-colors:active){.smwb-status-dot{background-color:CanvasText}.smwb-status-dot_status-unknown{background-color:transparent;border-color:CanvasText}.smwb-status-dot_pulse:after{background-color:CanvasText}.smwb-status-dot_status-unknown.smwb-status-dot_pulse:after{background-color:transparent;border-color:CanvasText}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-tab-groups{position:relative;display:grid;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;--smwb-tab-groups-separator-size: 4px}.smwb-tab-groups__header{display:flex;align-items:stretch;box-sizing:border-box;min-width:0;border-bottom:1px solid var(--smui-dividerColor)}.smwb-tab-groups--split .smwb-tab-groups__header--active{box-shadow:inset 0 2px 0 0 var(--smui-primaryColor)}.smwb-tab-groups__tabs{flex:1 1 auto;min-width:0}.smwb-tab-groups__actions-trigger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;padding:0;border:none;background:none;color:var(--smui-onSurfaceVariant);cursor:pointer}.smwb-tab-groups__actions-trigger:hover:not(:disabled){background-color:var(--smui-onSurfaceHover)}.smwb-tab-groups__actions-trigger:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tab-groups__actions-trigger:disabled{opacity:.38;cursor:default}.smwb-tab-groups__panel{position:relative;min-width:0;min-height:0;overflow:auto}.smwb-tab-groups__separator{position:relative;z-index:1;box-sizing:border-box;background:var(--smui-primaryContainer);touch-action:none;user-select:none}.smwb-tab-groups__separator:before{content:"";position:absolute;z-index:1}.smwb-tab-groups__separator--vertical{border-left:thin solid var(--smui-primaryColor);border-right:thin solid var(--smui-primaryColor);cursor:col-resize}.smwb-tab-groups__separator--vertical:before{top:0;bottom:0;left:50%;width:8px;transform:translate(-50%)}.smwb-tab-groups__separator--horizontal{border-top:thin solid var(--smui-primaryColor);border-bottom:thin solid var(--smui-primaryColor);cursor:row-resize}.smwb-tab-groups__separator--horizontal:before{top:50%;right:0;left:0;height:8px;transform:translateY(-50%)}.smwb-tab-groups__separator:hover,.smwb-tab-groups__separator--dragging{background:var(--smui-primaryColor)}.smwb-tab-groups__separator:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tab-groups__drop-target{position:relative;z-index:2}.smwb-tab-groups__drop-target:before{content:"";position:absolute;background:color-mix(in srgb,var(--smui-primaryColor) 16%,transparent);outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tab-groups__drop-target--center:before{inset:0}.smwb-tab-groups__drop-target--top:before{top:0;right:0;left:0;height:50%}.smwb-tab-groups__drop-target--right:before{top:0;right:0;bottom:0;width:50%}.smwb-tab-groups__drop-target--bottom:before{right:0;bottom:0;left:0;height:50%}.smwb-tab-groups__drop-target--left:before{top:0;bottom:0;left:0;width:50%}.smwb-tab-groups__empty{display:flex;align-items:center;justify-content:center;grid-area:1 / 1 / -1 / -1;min-width:0;min-height:0}.smwb-tab-groups__panel-end{position:absolute;width:0;height:0;overflow:hidden;outline:none}.smwb-tab-groups__focus-guard{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);outline:none}.smwb-tab-groups__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
|
|
1
|
+
.smwb-tab-groups{position:relative;display:grid;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;--smwb-tab-groups-separator-size: 4px}.smwb-tab-groups__header{display:flex;align-items:stretch;box-sizing:border-box;min-width:0;border-bottom:1px solid var(--smui-dividerColor)}.smwb-tab-groups--split .smwb-tab-groups__header--active{box-shadow:inset 0 2px 0 0 var(--smui-primaryColor)}.smwb-tab-groups__tabs{flex:1 1 0;min-width:0}.smwb-tab-groups__strip-actions{display:flex;align-items:center;flex:0 1 auto;min-width:0;overflow:hidden;gap:4px;padding:0 4px}.smwb-tab-groups__strip-actions:empty{display:none}.smwb-tab-groups__header .smwb-tab-groups__strip-actions>*{align-self:center}.smwb-tab-groups__actions-trigger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;padding:0;border:none;background:none;color:var(--smui-onSurfaceVariant);cursor:pointer}.smwb-tab-groups__actions-trigger:hover:not(:disabled){background-color:var(--smui-onSurfaceHover)}.smwb-tab-groups__actions-trigger:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tab-groups__actions-trigger:disabled{opacity:.38;cursor:default}.smwb-tab-groups__panel{position:relative;min-width:0;min-height:0;overflow:auto}.smwb-tab-groups__separator{position:relative;z-index:1;box-sizing:border-box;background:var(--smui-primaryContainer);touch-action:none;user-select:none}.smwb-tab-groups__separator:before{content:"";position:absolute;z-index:1}.smwb-tab-groups__separator--vertical{border-left:thin solid var(--smui-primaryColor);border-right:thin solid var(--smui-primaryColor);cursor:col-resize}.smwb-tab-groups__separator--vertical:before{top:0;bottom:0;left:50%;width:8px;transform:translate(-50%)}.smwb-tab-groups__separator--horizontal{border-top:thin solid var(--smui-primaryColor);border-bottom:thin solid var(--smui-primaryColor);cursor:row-resize}.smwb-tab-groups__separator--horizontal:before{top:50%;right:0;left:0;height:8px;transform:translateY(-50%)}.smwb-tab-groups__separator:hover,.smwb-tab-groups__separator--dragging{background:var(--smui-primaryColor)}.smwb-tab-groups__separator:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tab-groups__drop-target{position:relative;z-index:2}.smwb-tab-groups__drop-target:before{content:"";position:absolute;background:color-mix(in srgb,var(--smui-primaryColor) 16%,transparent);outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tab-groups__drop-target--center:before{inset:0}.smwb-tab-groups__drop-target--top:before{top:0;right:0;left:0;height:50%}.smwb-tab-groups__drop-target--right:before{top:0;right:0;bottom:0;width:50%}.smwb-tab-groups__drop-target--bottom:before{right:0;bottom:0;left:0;height:50%}.smwb-tab-groups__drop-target--left:before{top:0;bottom:0;left:0;width:50%}.smwb-tab-groups__empty{display:flex;align-items:center;justify-content:center;grid-area:1 / 1 / -1 / -1;min-width:0;min-height:0}.smwb-tab-groups__panel-end{position:absolute;width:0;height:0;overflow:hidden;outline:none}.smwb-tab-groups__focus-guard{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);outline:none}.smwb-tab-groups__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-tab{position:relative;display:flex;align-items:center;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding:0 24px;min-height:48px;border:none;outline:none;background:none;text-align:center;white-space:nowrap;cursor:pointer;font-size:.875rem;line-height:2.25rem;font-weight:600;letter-spacing:.08928571em;text-decoration:none;text-transform:uppercase;-webkit-appearance:none;z-index:1}.smwb-tab:before{position:absolute;inset:0;opacity:0;content:"";transition:opacity 15ms linear,background-color 15ms linear;z-index:1;background-color:#6750a4}.smwb-tab:hover:before{opacity:.04}.smwb-tab:focus:before{opacity:.12;transition-duration:75ms}.smwb-tab:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tab__content{position:relative;display:flex;align-items:center;justify-content:center;height:inherit}.smwb-tab__text-label{display:inline-block;line-height:1;color:var(--smui-tabColorDefault);transition:color .15s linear;z-index:2}.smwb-tab__icon{color:var(--smui-tabIconColor);fill:currentColor;width:24px;height:24px;font-size:24px;transition:color .15s linear;z-index:2;display:inline-flex;align-items:center;justify-content:center}.smwb-tab--active .smwb-tab__text-label,.smwb-tab--active .smwb-tab__icon{transition-delay:.1s;color:var(--smui-primaryColor)}.smwb-tab--stacked{height:72px}.smwb-tab--stacked .smwb-tab__text-label{padding-top:6px;padding-bottom:4px}.smwb-tab--stacked .smwb-tab__content{flex-direction:column}.smwb-tab:not(.smwb-tab--stacked) .smwb-tab__icon+.smwb-tab__text-label{padding-left:8px}.smwb-tab__ripple-child{color:#6750a4}.smwb-tab--disabled{opacity:.5;pointer-events:none;cursor:default}.smwb-tab-item{position:relative;display:flex;align-items:center;flex:1 0 auto}.smwb-tab-item:before{position:absolute;inset:0;opacity:0;content:"";pointer-events:none;transition:opacity 15ms linear;background-color:#6750a4}.smwb-tab-item:hover:not(.smwb-tab-item--disabled):before{opacity:.04}.smwb-tab-item>.smwb-tab:hover:before{opacity:0}.smwb-tab-item>.smwb-tab:focus:before{opacity:.12}.smwb-tab-item>.smwb-tab:not(:last-child){padding-right:8px}.smwb-tab__close,.smwb-tab__actions{position:relative;z-index:1;flex:0 0 auto;margin-right:4px}.smwb-tab__actions{display:inline-flex;align-items:center}.smwb-tab__close{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:24px;height:24px;padding:0;border:none;border-radius:50%;background:none;color:var(--smui-onSurfaceVariant);cursor:pointer}.smwb-tab__close:hover:not(:disabled){background-color:var(--smui-onSurfaceHover)}.smwb-tab__close:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tab__close:disabled{opacity:.38;cursor:default}.smwb-tabs--dense .smwb-tab{padding:0 12px;font-weight:500;letter-spacing:normal;text-transform:none}.smwb-tabs .smwb-tab__close{opacity:0;pointer-events:none;transition:opacity .15s linear}.smwb-tabs .smwb-tab-item:hover:not(.smwb-tab-item--disabled) .smwb-tab__close:not(:disabled),.smwb-tabs .smwb-tab-item--active .smwb-tab__close:not(:disabled),.smwb-tabs .smwb-tab-item:focus-within .smwb-tab__close:not(:disabled){opacity:1;pointer-events:auto}.smwb-tabs .smwb-tab-item--dragging{opacity:.6}.smwb-tabs .smwb-tab-item--drop-target:after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:var(--smui-primaryColor);pointer-events:none}
|
|
1
|
+
.smwb-tab{position:relative;display:flex;align-items:center;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding:0 24px;min-height:48px;border:none;outline:none;background:none;text-align:center;white-space:nowrap;cursor:pointer;font-size:.875rem;line-height:2.25rem;font-weight:600;letter-spacing:.08928571em;text-decoration:none;text-transform:uppercase;-webkit-appearance:none;z-index:1}.smwb-tab:before{position:absolute;inset:0;opacity:0;content:"";transition:opacity 15ms linear,background-color 15ms linear;z-index:1;background-color:#6750a4}.smwb-tab:hover:before{opacity:.04}.smwb-tab:focus:before{opacity:.12;transition-duration:75ms}.smwb-tab:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tab__content{position:relative;display:flex;align-items:center;justify-content:center;height:inherit}.smwb-tab__text-label{display:inline-block;line-height:1;color:var(--smui-tabColorDefault);transition:color .15s linear;z-index:2}.smwb-tab__icon{color:var(--smui-tabIconColor);fill:currentColor;width:24px;height:24px;font-size:24px;transition:color .15s linear;z-index:2;display:inline-flex;align-items:center;justify-content:center}.smwb-tab--active .smwb-tab__text-label,.smwb-tab--active .smwb-tab__icon{transition-delay:.1s;color:var(--smui-primaryColor)}.smwb-tab--stacked{height:72px}.smwb-tab--stacked .smwb-tab__text-label{padding-top:6px;padding-bottom:4px}.smwb-tab--stacked .smwb-tab__content{flex-direction:column}.smwb-tab:not(.smwb-tab--stacked) .smwb-tab__icon+.smwb-tab__text-label{padding-left:8px}.smwb-tab__ripple-child{color:#6750a4}.smwb-tab--disabled{opacity:.5;pointer-events:none;cursor:default}.smwb-tab-item{position:relative;display:flex;align-items:center;flex:1 0 auto}.smwb-tab-item:before{position:absolute;inset:0;opacity:0;content:"";pointer-events:none;transition:opacity 15ms linear;background-color:#6750a4}.smwb-tab-item:hover:not(.smwb-tab-item--disabled):before{opacity:.04}.smwb-tab-item>.smwb-tab:hover:before{opacity:0}.smwb-tab-item>.smwb-tab:focus:before{opacity:.12}.smwb-tab-item>.smwb-tab:not(:last-child){padding-right:8px}.smwb-tab__close,.smwb-tab__actions{position:relative;z-index:1;flex:0 0 auto;margin-right:4px}.smwb-tab__actions{display:inline-flex;align-items:center}.smwb-tab__close{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:24px;height:24px;padding:0;border:none;border-radius:50%;background:none;color:var(--smui-onSurfaceVariant);cursor:pointer}.smwb-tab__close:hover:not(:disabled){background-color:var(--smui-onSurfaceHover)}.smwb-tab__close:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tab__close:disabled{opacity:.38;cursor:default}.smwb-tabs--dense .smwb-tab{min-height:var(--smui-tabDenseHeight, 36px);padding:0 12px;font-weight:500;letter-spacing:normal;text-transform:none}.smwb-tabs--fit .smwb-tab,.smwb-tabs--fit .smwb-tab-item{flex:0 0 auto;min-width:var(--smui-tabFitMinWidth, 80px);max-width:var(--smui-tabFitMaxWidth, 256px)}.smwb-tabs--fit .smwb-tab-item>.smwb-tab{flex:1 1 auto;min-width:0;max-width:none}.smwb-tabs--fit .smwb-tab__content{min-width:0}.smwb-tabs--fit .smwb-tab__icon{flex:0 0 auto}.smwb-tabs--fit .smwb-tab__text-label{min-width:0;padding-block:.25em;margin-block:-.25em;overflow:hidden;text-overflow:ellipsis}.smwb-tabs .smwb-tab__close{opacity:0;pointer-events:none;transition:opacity .15s linear}.smwb-tabs .smwb-tab-item:hover:not(.smwb-tab-item--disabled) .smwb-tab__close:not(:disabled),.smwb-tabs .smwb-tab-item--active .smwb-tab__close:not(:disabled),.smwb-tabs .smwb-tab-item:focus-within .smwb-tab__close:not(:disabled){opacity:1;pointer-events:auto}.smwb-tabs .smwb-tab-item--dragging{opacity:.6}.smwb-tabs .smwb-tab-item--drop-target:after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:var(--smui-primaryColor);pointer-events:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-toggle{width:50px;height:30px;position:relative;cursor:pointer;display:inline-flex}.smwb-toggle__wrapper{display:inline-flex;flex-direction:column;gap:8px}.smwb-toggle__wrapper_label-left{flex-direction:row;align-items:center}.smwb-toggle__wrapper_label-right{flex-direction:row-reverse;align-items:center}.smwb-toggle__wrapper:has(.smwb-toggle_size-small){min-height:var(--smui-control-h-sm, 32px);justify-content:center}.smwb-toggle__wrapper:has(.smwb-toggle_size-medium){min-height:var(--smui-control-h-md, 40px);justify-content:center}.smwb-toggle__wrapper:has(.smwb-toggle_size-large){min-height:var(--smui-control-h-lg, 48px);justify-content:center}.smwb-toggle.smwb-disabled{opacity:.35;pointer-events:none}.smwb-toggle__track{width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--smui-toggleTrackColor);border-radius:999px;transition:all .2s ease-in-out;border:2px solid var(--smui-toggleBorderColor)}.smwb-toggle__thumb{position:absolute;z-index:1;width:15px;height:15px;border-radius:50%;background-color:#79747e;left:5px;transform:translateY(-50%);top:50%;transition:all .2s ease-in-out;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-toggle__thumb:before{width:40px;height:40px;border-radius:50%;content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background-color:none;opacity:0;transition:all .2s ease-in-out}.smwb-toggle__thumb:hover:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-onSurfaceHover);opacity:1}.smwb-toggle__checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0}.smwb-toggle__checkbox:focus-visible~.smwb-toggle__track{outline:2px solid var(--smui-primaryColor);outline-offset:2px}.smwb-toggle__checkbox:checked~.smwb-toggle__track{background-color:var(--smui-toggleTrackActiveColor);border:2px solid transparent}.smwb-toggle__checkbox:checked~.smwb-toggle__thumb{left:25px;background-color:var(--smui-toggleThumbActiveColor);width:20px;height:20px}.smwb-toggle__checkbox:checked~.smwb-toggle__thumb:hover:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-primaryColorHover);opacity:1}.smwb-toggle__checkbox:checked:active~.smwb-toggle__thumb:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-primaryColorActive);opacity:1}.smwb-toggle__checkbox:active~.smwb-toggle__thumb:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-onSurfaceActive);opacity:1}
|
|
1
|
+
.smwb-toggle{width:50px;height:30px;position:relative;cursor:pointer;display:inline-flex}.smwb-toggle__wrapper{display:inline-flex;flex-direction:column;gap:8px}.smwb-toggle__wrapper_label-left{flex-direction:row;align-items:center}.smwb-toggle__wrapper_label-right{flex-direction:row-reverse;align-items:center}.smwb-toggle__wrapper:has(.smwb-toggle_size-small){min-height:var(--smui-control-h-sm, 32px);justify-content:center}.smwb-toggle__wrapper:has(.smwb-toggle_size-medium){min-height:var(--smui-control-h-md, 40px);justify-content:center}.smwb-toggle__wrapper:has(.smwb-toggle_size-large){min-height:var(--smui-control-h-lg, 48px);justify-content:center}.smwb-toggle__wrapper_compact:has(.smwb-toggle){flex-direction:row;align-items:center;justify-content:flex-start;min-height:min(var(--smui-control-h-sm, 32px),28px);height:min(var(--smui-control-h-sm, 32px),28px)}.smwb-toggle__wrapper_compact:has(.smwb-toggle) .smwb-toggle{height:min(30px,100%)}.smwb-toggle__wrapper_compact:has(.smwb-toggle) .smwb-toggle__label{white-space:nowrap}.smwb-toggle__wrapper_compact.smwb-toggle__wrapper_label-right:has(.smwb-toggle){flex-direction:row-reverse}.smwb-toggle.smwb-disabled{opacity:.35;pointer-events:none}.smwb-toggle__track{width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--smui-toggleTrackColor);border-radius:999px;transition:all .2s ease-in-out;border:2px solid var(--smui-toggleBorderColor)}.smwb-toggle__thumb{position:absolute;z-index:1;width:15px;height:15px;border-radius:50%;background-color:#79747e;left:5px;transform:translateY(-50%);top:50%;transition:all .2s ease-in-out;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.smwb-toggle__thumb:before{width:40px;height:40px;border-radius:50%;content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background-color:none;opacity:0;transition:all .2s ease-in-out}.smwb-toggle__thumb:hover:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-onSurfaceHover);opacity:1}.smwb-toggle__checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0}.smwb-toggle__checkbox:focus-visible~.smwb-toggle__track{outline:2px solid var(--smui-primaryColor);outline-offset:2px}.smwb-toggle__checkbox:checked~.smwb-toggle__track{background-color:var(--smui-toggleTrackActiveColor);border:2px solid transparent}.smwb-toggle__checkbox:checked~.smwb-toggle__thumb{left:25px;background-color:var(--smui-toggleThumbActiveColor);width:20px;height:20px}.smwb-toggle__checkbox:checked~.smwb-toggle__thumb:hover:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-primaryColorHover);opacity:1}.smwb-toggle__checkbox:checked:active~.smwb-toggle__thumb:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-primaryColorActive);opacity:1}.smwb-toggle__checkbox:active~.smwb-toggle__thumb:before{transform:translate(-50%,-50%) scale(1);background-color:var(--smui-onSurfaceActive);opacity:1}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.smwb-
|
|
1
|
+
.smwb-tree{--smwb-tree-row-h: var(--smui-control-h-md, 40px);--smwb-tree-indent: 30px;--smwb-tree-arm: 25px}.smwb-tree_dense{--smwb-tree-row-h: var(--smui-control-h-sm, 32px);--smwb-tree-indent: 6px;--smwb-tree-arm: 6px}.smwb-tree__wrapper>.smwb-tree__node:first-child{border-left:0}.smwb-tree__wrapper>.smwb-tree__node:first-child:before{opacity:0}.smwb-tree_no-guides .smwb-tree__node .smwb-tree__node{border-left-width:0;padding-left:calc(var(--smwb-tree-indent) + 1px)}.smwb-tree_no-guides .smwb-tree__node .smwb-tree__node:before{display:none}.smwb-tree__node{padding-left:var(--smwb-tree-indent);margin-left:9px;position:relative;border-left:1px solid var(--smui-primaryColor)}.smwb-tree__node:last-child{border-left-color:transparent}.smwb-tree__node:before{position:absolute;top:0;left:-1px;height:calc(var(--smwb-tree-row-h) / 2);width:var(--smwb-tree-arm);border-bottom:1px solid var(--smui-primaryColor);border-left:1px solid var(--smui-primaryColor);content:"";font-weight:600;font-size:14px}.smwb-tree__node__label{position:relative;display:inline-flex;align-items:center;gap:10px;min-width:0;overflow-wrap:break-word}.smwb-tree__node__label>.smwb-icon__wrapper{flex:none}.smwb-tree__node__row{display:flex;align-items:center;gap:10px;min-height:var(--smwb-tree-row-h)}.smwb-tree__node__toggle{display:inline-flex;flex:none;align-items:center;justify-content:center;width:24px;cursor:pointer;user-select:none}.smwb-tree__node__toggle:empty{cursor:default}.smwb-tree__node__content{display:flex;align-items:center;flex:1 1 auto;min-width:0;align-self:stretch;cursor:pointer;user-select:none;border-radius:4px}.smwb-tree__node__content:focus-visible{outline:2px solid var(--smui-primaryColor);outline-offset:-2px}.smwb-tree__node__actions{display:inline-flex;flex:none;align-items:center;gap:4px}.smwb-tree__node_selected>.smwb-tree__node__row{background-color:var(--smui-onSurfaceHover);border-radius:4px}.smwb-tree__node__checkbox{flex-shrink:0;width:18px;height:18px;min-width:18px;min-height:18px;margin:0;cursor:pointer;accent-color:var(--smui-checkboxCheckedBg)}.smwb-tree__node__loading{padding:4px 8px 4px 28px;font-size:13px;color:var(--smui-onSurfaceVariant)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(:root){--smui-onSurfaceVariant: #49454e;--smui-onSurfaceColor: #1c1b1f;--smui-primaryColor: #6750a4;--smui-fontFamily: "Roboto", sans-serif;--smui-pageBackground: #fff;--smui-scrollThumbColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-surfaceBackground: #fffbfe;--smui-primaryTextColor: #000;--smui-onPrimaryColor: #fff;--smui-disabledTextColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-outlineColor: #79747e;--smui-onSurfaceHover: color-mix(in srgb, #1c1b1f 8%, transparent);--smui-onSurfaceActive: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-onSurfaceFocus: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-surfaceVariant: #e7e0ec;--smui-disabledBgColor: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-primaryContainer: #eaddff;--smui-onPrimaryContainer: #21005e;--smui-onPrimaryContainerHover: color-mix(in srgb, #000 2%, #eaddff);--smui-onPrimaryContainerActive: color-mix(in srgb, #000 4%, #eaddff);--smui-primaryColorHover: color-mix(in srgb, #6750a4 8%, transparent);--smui-primaryColorActive: color-mix(in srgb, #6750a4 14%, transparent);--smui-primaryColorFocus: color-mix(in srgb, #6750a4 12%, transparent);--smui-secondaryColor: #625b71;--smui-errorColor: red;--smui-successColor: #36913b;--smui-warningColor: #ed6c02;--smui-infoColor: #0288d1;--smui-onSecondaryColor: #fff;--smui-onErrorColor: #fff;--smui-onSuccessColor: #fff;--smui-onWarningColor: #fff;--smui-onInfoColor: #fff;--smui-secondaryColorHover: color-mix(in srgb, #625b71 8%, transparent);--smui-secondaryColorActive: color-mix(in srgb, #625b71 14%, transparent);--smui-secondaryColorFocus: color-mix(in srgb, #625b71 12%, transparent);--smui-errorColorHover: color-mix(in srgb, red 8%, transparent);--smui-errorColorActive: color-mix(in srgb, red 14%, transparent);--smui-errorColorFocus: color-mix(in srgb, red 12%, transparent);--smui-successColorHover: color-mix(in srgb, #36913b 8%, transparent);--smui-successColorActive: color-mix(in srgb, #36913b 14%, transparent);--smui-successColorFocus: color-mix(in srgb, #36913b 12%, transparent);--smui-warningColorHover: color-mix(in srgb, #ed6c02 8%, transparent);--smui-warningColorActive: color-mix(in srgb, #ed6c02 14%, transparent);--smui-warningColorFocus: color-mix(in srgb, #ed6c02 12%, transparent);--smui-infoColorHover: color-mix(in srgb, #0288d1 8%, transparent);--smui-infoColorActive: color-mix(in srgb, #0288d1 14%, transparent);--smui-infoColorFocus: color-mix(in srgb, #0288d1 12%, transparent);--smui-dividerColor: rgba(0, 0, 0, .12);--smui-buttonOutlinedHoverBg: color-mix(in srgb, #6750a4 8%, transparent);--smui-buttonOutlinedActiveBg: color-mix(in srgb, #6750a4 12%, transparent);--smui-buttonOutlinedFocusBg: color-mix(in srgb, #6750a4 12%, transparent);--smui-buttonContainedHoverBg: color-mix(in srgb, #fff 4%, #6750a4);--smui-buttonContainedActiveBg: color-mix(in srgb, #fff 10%, #6750a4);--smui-buttonContainedFocusBg: color-mix(in srgb, #fff 10%, #6750a4);--smui-buttonDisabledBg: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-checkboxBorderColor: #1c1b1f;--smui-checkboxDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-checkboxCheckedBg: #6750a4;--smui-toggleTrackColor: #e7e0ec;--smui-toggleThumbActiveColor: #fffbfe;--smui-toggleTrackActiveColor: #6750a4;--smui-toggleBorderColor: #79747e;--smui-chipsBg: #fffbfe;--smui-chipsIconColorHover: #6750a4;--smui-chipsIconColor: #6750a4;--smui-chipsOutlinedBorder: #79747e;--smui-chipsHoverBg: color-mix(in srgb, #1c1b1f 8%, transparent);--smui-chipsActiveBg: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-chipsSelectedBg: #e8def8;--smui-menuTextColor: #1c1b1f;--smui-menuDividerColor: rgba(0, 0, 0, .12);--smui-menuDisabledTextColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-tabIconColor: #49454e;--smui-tabColorDefault: #49454e;--smui-sliderColor: #6750a4;--smui-sliderDisabledColor: #9e9e9e;--smui-fabFocusBg: color-mix(in srgb, #000 4%, #eaddff);--smui-fabActiveBg: color-mix(in srgb, #000 4%, #eaddff);--smui-fabHoverBg: color-mix(in srgb, #000 2%, #eaddff);--smui-indicatorTrackBg: #e7e0ec;--smui-appBarBg: #fffbfe;--smui-appBarContentColor: #49454e;--smui-navItemActiveBg: color-mix(in srgb, #6750a4 8%, transparent);--smui-tableBorderColor: color-mix(in srgb, #000 12%, transparent);--smui-tooltipBg: #6d6d6d;--smui-tooltipTextColor: #fff;--smui-textFieldLabelColor: rgba(0, 0, 0, .6);--smui-textFieldLabelDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-textFieldInputColor: rgba(0, 0, 0, .87);--smui-textFieldInputDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-textFieldNotchedColor: rgba(0, 0, 0, .38);--smui-textFieldNotchedHoverColor: #000;--smui-textFieldNotchedDisabledColor: rgba(0, 0, 0, .26);--smui-textFieldHelperTextColor: rgba(0, 0, 0, .6);--smui-textFieldHelperTextDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-textFieldFilledBorderColor: rgba(0, 0, 0, .42);--smui-textFieldFilledHoverBorderColor: #000;--smui-textFieldFilledDisabledBorderColor: rgba(0, 0, 0, .26);--smui-textFieldFilledBgColor: rgba(0, 0, 0, .05);--smui-textFieldFilledHoverBgColor: rgba(0, 0, 0, .07);--smui-textFieldFilledFocusedBgColor: rgba(0, 0, 0, .12);--smui-textFieldFilledDisabledBgColor: rgba(0, 0, 0, .045);--smui-selectFieldSearchMenuColor: rgba(0, 0, 0, .87);--smui-dataPickerIconDisabledColor: rgba(0, 0, 0, .26);--smui-dataPickerWeekDayColor: rgba(0, 0, 0, .6);--smui-messageBackground: color-mix(in srgb, #6750a4 10%, transparent);--smui-spacing-unit: 4px;--smui-space-xxs: 2px;--smui-space-xs: 4px;--smui-space-sm: 8px;--smui-space-md: 12px;--smui-space-lg: 16px;--smui-space-xl: 20px;--smui-space-xxl: 24px;--smui-space-xxxl: 32px;--smui-control-h-sm: 32px;--smui-control-h-md: 40px;--smui-control-h-lg: 48px;--smui-radius-xs: 2px;--smui-radius-sm: 4px;--smui-radius-md: 8px;--smui-radius-lg: 12px;--smui-radius-xl: 16px;--smui-radius-xxl: 28px;--smui-elevation-1: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);--smui-elevation-2: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);--smui-elevation-4: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);--smui-elevation-6: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);--smui-elevation-8: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);--smui-elevation-12: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12);--smui-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);--smui-bp-sm: 420px;--smui-bp-md: 768px;--smui-bp-lg: 1024px;--smui-bp-xl: 1200px}:where(:root[data-theme=dark]){--smui-onSurfaceVariant: #cac4d0;--smui-onSurfaceColor: #e6e1e5;--smui-primaryColor: #d0bcff;--smui-fontFamily: "Roboto", sans-serif;--smui-pageBackground: #1f1f1f;--smui-scrollThumbColor: rgba(255, 255, 255, .3);--smui-surfaceBackground: #1c1b1f;--smui-primaryTextColor: #fff;--smui-onPrimaryColor: #371e73;--smui-disabledTextColor: color-mix(in srgb, #e6e1e5 38%, transparent);--smui-outlineColor: #938f99;--smui-onSurfaceHover: color-mix(in srgb, #e6e1e5 8%, transparent);--smui-onSurfaceActive: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-onSurfaceFocus: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-surfaceVariant: #49454f;--smui-disabledBgColor: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-primaryContainer: #4f378b;--smui-onPrimaryContainer: #eaddff;--smui-onPrimaryContainerHover: color-mix(in srgb, #fff 6%, #4f378b);--smui-onPrimaryContainerActive: color-mix(in srgb, #fff 10%, #4f378b);--smui-primaryColorHover: color-mix(in srgb, #d0bcff 8%, transparent);--smui-primaryColorActive: color-mix(in srgb, #d0bcff 14%, transparent);--smui-primaryColorFocus: color-mix(in srgb, #d0bcff 12%, transparent);--smui-dividerColor: rgba(255, 255, 255, .12);--smui-buttonOutlinedHoverBg: color-mix(in srgb, #d0bcff 8%, transparent);--smui-buttonOutlinedActiveBg: color-mix(in srgb, #d0bcff 12%, transparent);--smui-buttonOutlinedFocusBg: color-mix(in srgb, #d0bcff 12%, transparent);--smui-buttonContainedHoverBg: color-mix(in srgb, #fff 4%, #d0bcff);--smui-buttonContainedActiveBg: color-mix(in srgb, #fff 8%, #d0bcff);--smui-buttonContainedFocusBg: color-mix(in srgb, #fff 8%, #d0bcff);--smui-buttonDisabledBg: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-checkboxBorderColor: #e6e1e5;--smui-checkboxDisabledColor: rgba(255, 255, 255, .3);--smui-checkboxCheckedBg: #d0bcff;--smui-toggleTrackColor: #49454f;--smui-toggleThumbActiveColor: #6750a4;--smui-toggleTrackActiveColor: #eaddff;--smui-toggleBorderColor: #938f99;--smui-chipsBg: color-mix(in srgb, #e6e1e5 8%, transparent);--smui-chipsIconColorHover: #e6e1e5;--smui-chipsIconColor: color-mix(in srgb, #e6e1e5 60%, transparent);--smui-chipsOutlinedBorder: #938f99;--smui-chipsHoverBg: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-chipsActiveBg: color-mix(in srgb, #e6e1e5 16%, transparent);--smui-chipsSelectedBg: color-mix(in srgb, #e6e1e5 16%, transparent);--smui-menuTextColor: #e6e1e5;--smui-menuDividerColor: rgba(255, 255, 255, .12);--smui-menuDisabledTextColor: rgba(255, 255, 255, .3);--smui-tabIconColor: color-mix(in srgb, #fff 70%, transparent);--smui-tabColorDefault: color-mix(in srgb, #fff 70%, transparent);--smui-tableBorderColor: color-mix(in srgb, #fff 12%, transparent);--smui-sliderColor: #6750a4;--smui-sliderDisabledColor: #9e9e9e;--smui-fabFocusBg: color-mix(in srgb, #fff 10%, #4f378b);--smui-fabActiveBg: color-mix(in srgb, #fff 10%, #4f378b);--smui-fabHoverBg: color-mix(in srgb, #fff 6%, #4f378b);--smui-indicatorTrackBg: #49454f;--smui-appBarBg: #1c1b1f;--smui-appBarContentColor: #cac4d0;--smui-navItemActiveBg: transparent;--smui-tooltipBg: #fff;--smui-tooltipTextColor: #000;--smui-textFieldLabelColor: rgba(255, 255, 255, .7);--smui-textFieldLabelDisabledColor: rgba(255, 255, 255, .5);--smui-textFieldInputColor: #fff;--smui-textFieldInputDisabledColor: rgba(255, 255, 255, .5);--smui-textFieldNotchedColor: rgba(255, 255, 255, .3);--smui-textFieldNotchedHoverColor: #fff;--smui-textFieldNotchedDisabledColor: rgba(255, 255, 255, .3);--smui-textFieldHelperTextColor: rgba(255, 255, 255, .7);--smui-textFieldHelperTextDisabledColor: rgba(255, 255, 255, .5);--smui-textFieldFilledBorderColor: rgba(255, 255, 255, .7);--smui-textFieldFilledHoverBorderColor: #fff;--smui-textFieldFilledDisabledBorderColor: rgba(255, 255, 255, .5);--smui-textFieldFilledBgColor: rgba(255, 255, 255, .09);--smui-textFieldFilledHoverBgColor: rgba(255, 255, 255, .13);--smui-textFieldFilledFocusedBgColor: rgba(255, 255, 255, .13);--smui-textFieldFilledDisabledBgColor: rgba(255, 255, 255, .045);--smui-selectFieldSearchMenuColor: #fff;--smui-dataPickerIconDisabledColor: rgba(255, 255, 255, .5);--smui-dataPickerWeekDayColor: rgba(255, 255, 255, .6);--smui-messageBackground: #323232}
|
|
1
|
+
:where(:root){--smui-onSurfaceVariant: #49454e;--smui-onSurfaceColor: #1c1b1f;--smui-primaryColor: #6750a4;--smui-fontFamily: "Roboto", sans-serif;--smui-pageBackground: #fff;--smui-scrollThumbColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-surfaceBackground: #fffbfe;--smui-primaryTextColor: #000;--smui-onPrimaryColor: #fff;--smui-disabledTextColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-outlineColor: #79747e;--smui-onSurfaceHover: color-mix(in srgb, #1c1b1f 8%, transparent);--smui-onSurfaceActive: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-onSurfaceFocus: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-surfaceVariant: #e7e0ec;--smui-disabledBgColor: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-primaryContainer: #eaddff;--smui-onPrimaryContainer: #21005e;--smui-onPrimaryContainerHover: color-mix(in srgb, #000 2%, #eaddff);--smui-onPrimaryContainerActive: color-mix(in srgb, #000 4%, #eaddff);--smui-primaryColorHover: color-mix(in srgb, #6750a4 8%, transparent);--smui-primaryColorActive: color-mix(in srgb, #6750a4 14%, transparent);--smui-primaryColorFocus: color-mix(in srgb, #6750a4 12%, transparent);--smui-secondaryColor: #625b71;--smui-errorColor: red;--smui-successColor: #36913b;--smui-warningColor: #ed6c02;--smui-infoColor: #0288d1;--smui-onSecondaryColor: #fff;--smui-onErrorColor: #fff;--smui-onSuccessColor: #fff;--smui-onWarningColor: #fff;--smui-onInfoColor: #fff;--smui-secondaryColorHover: color-mix(in srgb, #625b71 8%, transparent);--smui-secondaryColorActive: color-mix(in srgb, #625b71 14%, transparent);--smui-secondaryColorFocus: color-mix(in srgb, #625b71 12%, transparent);--smui-errorColorHover: color-mix(in srgb, red 8%, transparent);--smui-errorColorActive: color-mix(in srgb, red 14%, transparent);--smui-errorColorFocus: color-mix(in srgb, red 12%, transparent);--smui-successColorHover: color-mix(in srgb, #36913b 8%, transparent);--smui-successColorActive: color-mix(in srgb, #36913b 14%, transparent);--smui-successColorFocus: color-mix(in srgb, #36913b 12%, transparent);--smui-warningColorHover: color-mix(in srgb, #ed6c02 8%, transparent);--smui-warningColorActive: color-mix(in srgb, #ed6c02 14%, transparent);--smui-warningColorFocus: color-mix(in srgb, #ed6c02 12%, transparent);--smui-infoColorHover: color-mix(in srgb, #0288d1 8%, transparent);--smui-infoColorActive: color-mix(in srgb, #0288d1 14%, transparent);--smui-infoColorFocus: color-mix(in srgb, #0288d1 12%, transparent);--smui-dividerColor: rgba(0, 0, 0, .12);--smui-badgeWarningColor: #1c1b1f;--smui-buttonOutlinedHoverBg: color-mix(in srgb, #6750a4 8%, transparent);--smui-buttonOutlinedActiveBg: color-mix(in srgb, #6750a4 12%, transparent);--smui-buttonOutlinedFocusBg: color-mix(in srgb, #6750a4 12%, transparent);--smui-buttonContainedHoverBg: color-mix(in srgb, #fff 4%, #6750a4);--smui-buttonContainedActiveBg: color-mix(in srgb, #fff 10%, #6750a4);--smui-buttonContainedFocusBg: color-mix(in srgb, #fff 10%, #6750a4);--smui-buttonDisabledBg: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-checkboxBorderColor: #1c1b1f;--smui-checkboxDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-checkboxCheckedBg: #6750a4;--smui-toggleTrackColor: #e7e0ec;--smui-toggleThumbActiveColor: #fffbfe;--smui-toggleTrackActiveColor: #6750a4;--smui-toggleBorderColor: #79747e;--smui-chipsBg: #fffbfe;--smui-chipsIconColorHover: #6750a4;--smui-chipsIconColor: #6750a4;--smui-chipsOutlinedBorder: #79747e;--smui-chipsHoverBg: color-mix(in srgb, #1c1b1f 8%, transparent);--smui-chipsActiveBg: color-mix(in srgb, #1c1b1f 12%, transparent);--smui-chipsSelectedBg: #e8def8;--smui-menuTextColor: #1c1b1f;--smui-menuDividerColor: rgba(0, 0, 0, .12);--smui-menuDisabledTextColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-tabIconColor: #49454e;--smui-tabColorDefault: #49454e;--smui-tabDenseHeight: 36px;--smui-tabFitMinWidth: 80px;--smui-tabFitMaxWidth: 256px;--smui-sliderColor: #6750a4;--smui-sliderDisabledColor: #9e9e9e;--smui-fabFocusBg: color-mix(in srgb, #000 4%, #eaddff);--smui-fabActiveBg: color-mix(in srgb, #000 4%, #eaddff);--smui-fabHoverBg: color-mix(in srgb, #000 2%, #eaddff);--smui-indicatorTrackBg: #e7e0ec;--smui-appBarBg: #fffbfe;--smui-appBarContentColor: #49454e;--smui-navItemActiveBg: color-mix(in srgb, #6750a4 8%, transparent);--smui-tableBorderColor: color-mix(in srgb, #000 12%, transparent);--smui-tooltipBg: #6d6d6d;--smui-tooltipTextColor: #fff;--smui-textFieldLabelColor: rgba(0, 0, 0, .6);--smui-textFieldLabelDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-textFieldInputColor: rgba(0, 0, 0, .87);--smui-textFieldInputDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-textFieldNotchedColor: rgba(0, 0, 0, .38);--smui-textFieldNotchedHoverColor: #000;--smui-textFieldNotchedDisabledColor: rgba(0, 0, 0, .26);--smui-textFieldHelperTextColor: rgba(0, 0, 0, .6);--smui-textFieldHelperTextDisabledColor: color-mix(in srgb, #1c1b1f 38%, transparent);--smui-textFieldFilledBorderColor: rgba(0, 0, 0, .42);--smui-textFieldFilledHoverBorderColor: #000;--smui-textFieldFilledDisabledBorderColor: rgba(0, 0, 0, .26);--smui-textFieldFilledBgColor: rgba(0, 0, 0, .05);--smui-textFieldFilledHoverBgColor: rgba(0, 0, 0, .07);--smui-textFieldFilledFocusedBgColor: rgba(0, 0, 0, .12);--smui-textFieldFilledDisabledBgColor: rgba(0, 0, 0, .045);--smui-selectFieldSearchMenuColor: rgba(0, 0, 0, .87);--smui-dataPickerIconDisabledColor: rgba(0, 0, 0, .26);--smui-dataPickerWeekDayColor: rgba(0, 0, 0, .6);--smui-messageBackground: color-mix(in srgb, #6750a4 10%, transparent);--smui-spacing-unit: 4px;--smui-space-xxs: 2px;--smui-space-xs: 4px;--smui-space-sm: 8px;--smui-space-md: 12px;--smui-space-lg: 16px;--smui-space-xl: 20px;--smui-space-xxl: 24px;--smui-space-xxxl: 32px;--smui-control-h-sm: 32px;--smui-control-h-md: 40px;--smui-control-h-lg: 48px;--smui-radius-xs: 2px;--smui-radius-sm: 4px;--smui-radius-md: 8px;--smui-radius-lg: 12px;--smui-radius-xl: 16px;--smui-radius-xxl: 28px;--smui-elevation-1: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);--smui-elevation-2: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);--smui-elevation-4: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);--smui-elevation-6: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);--smui-elevation-8: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);--smui-elevation-12: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12);--smui-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);--smui-bp-sm: 420px;--smui-bp-md: 768px;--smui-bp-lg: 1024px;--smui-bp-xl: 1200px}:where(:root[data-theme=dark]){--smui-onSurfaceVariant: #cac4d0;--smui-onSurfaceColor: #e6e1e5;--smui-primaryColor: #d0bcff;--smui-fontFamily: "Roboto", sans-serif;--smui-pageBackground: #1f1f1f;--smui-scrollThumbColor: rgba(255, 255, 255, .3);--smui-surfaceBackground: #1c1b1f;--smui-primaryTextColor: #fff;--smui-onPrimaryColor: #371e73;--smui-disabledTextColor: color-mix(in srgb, #e6e1e5 38%, transparent);--smui-outlineColor: #938f99;--smui-onSurfaceHover: color-mix(in srgb, #e6e1e5 8%, transparent);--smui-onSurfaceActive: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-onSurfaceFocus: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-surfaceVariant: #49454f;--smui-disabledBgColor: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-primaryContainer: #4f378b;--smui-onPrimaryContainer: #eaddff;--smui-onPrimaryContainerHover: color-mix(in srgb, #fff 6%, #4f378b);--smui-onPrimaryContainerActive: color-mix(in srgb, #fff 10%, #4f378b);--smui-primaryColorHover: color-mix(in srgb, #d0bcff 8%, transparent);--smui-primaryColorActive: color-mix(in srgb, #d0bcff 14%, transparent);--smui-primaryColorFocus: color-mix(in srgb, #d0bcff 12%, transparent);--smui-dividerColor: rgba(255, 255, 255, .12);--smui-buttonOutlinedHoverBg: color-mix(in srgb, #d0bcff 8%, transparent);--smui-buttonOutlinedActiveBg: color-mix(in srgb, #d0bcff 12%, transparent);--smui-buttonOutlinedFocusBg: color-mix(in srgb, #d0bcff 12%, transparent);--smui-buttonContainedHoverBg: color-mix(in srgb, #fff 4%, #d0bcff);--smui-buttonContainedActiveBg: color-mix(in srgb, #fff 8%, #d0bcff);--smui-buttonContainedFocusBg: color-mix(in srgb, #fff 8%, #d0bcff);--smui-buttonDisabledBg: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-checkboxBorderColor: #e6e1e5;--smui-checkboxDisabledColor: rgba(255, 255, 255, .3);--smui-checkboxCheckedBg: #d0bcff;--smui-toggleTrackColor: #49454f;--smui-toggleThumbActiveColor: #6750a4;--smui-toggleTrackActiveColor: #eaddff;--smui-toggleBorderColor: #938f99;--smui-chipsBg: color-mix(in srgb, #e6e1e5 8%, transparent);--smui-chipsIconColorHover: #e6e1e5;--smui-chipsIconColor: color-mix(in srgb, #e6e1e5 60%, transparent);--smui-chipsOutlinedBorder: #938f99;--smui-chipsHoverBg: color-mix(in srgb, #e6e1e5 12%, transparent);--smui-chipsActiveBg: color-mix(in srgb, #e6e1e5 16%, transparent);--smui-chipsSelectedBg: color-mix(in srgb, #e6e1e5 16%, transparent);--smui-menuTextColor: #e6e1e5;--smui-menuDividerColor: rgba(255, 255, 255, .12);--smui-menuDisabledTextColor: rgba(255, 255, 255, .3);--smui-tabIconColor: color-mix(in srgb, #fff 70%, transparent);--smui-tabColorDefault: color-mix(in srgb, #fff 70%, transparent);--smui-tableBorderColor: color-mix(in srgb, #fff 12%, transparent);--smui-sliderColor: #6750a4;--smui-sliderDisabledColor: #9e9e9e;--smui-fabFocusBg: color-mix(in srgb, #fff 10%, #4f378b);--smui-fabActiveBg: color-mix(in srgb, #fff 10%, #4f378b);--smui-fabHoverBg: color-mix(in srgb, #fff 6%, #4f378b);--smui-indicatorTrackBg: #49454f;--smui-appBarBg: #1c1b1f;--smui-appBarContentColor: #cac4d0;--smui-navItemActiveBg: transparent;--smui-tooltipBg: #fff;--smui-tooltipTextColor: #000;--smui-textFieldLabelColor: rgba(255, 255, 255, .7);--smui-textFieldLabelDisabledColor: rgba(255, 255, 255, .5);--smui-textFieldInputColor: #fff;--smui-textFieldInputDisabledColor: rgba(255, 255, 255, .5);--smui-textFieldNotchedColor: rgba(255, 255, 255, .3);--smui-textFieldNotchedHoverColor: #fff;--smui-textFieldNotchedDisabledColor: rgba(255, 255, 255, .3);--smui-textFieldHelperTextColor: rgba(255, 255, 255, .7);--smui-textFieldHelperTextDisabledColor: rgba(255, 255, 255, .5);--smui-textFieldFilledBorderColor: rgba(255, 255, 255, .7);--smui-textFieldFilledHoverBorderColor: #fff;--smui-textFieldFilledDisabledBorderColor: rgba(255, 255, 255, .5);--smui-textFieldFilledBgColor: rgba(255, 255, 255, .09);--smui-textFieldFilledHoverBgColor: rgba(255, 255, 255, .13);--smui-textFieldFilledFocusedBgColor: rgba(255, 255, 255, .13);--smui-textFieldFilledDisabledBgColor: rgba(255, 255, 255, .045);--smui-selectFieldSearchMenuColor: #fff;--smui-dataPickerIconDisabledColor: rgba(255, 255, 255, .5);--smui-dataPickerWeekDayColor: rgba(255, 255, 255, .6);--smui-messageBackground: #323232}
|
|
@@ -2,13 +2,16 @@ import { type JSX, type ParentProps } from "solid-js";
|
|
|
2
2
|
import { type Ref } from "../../../primitives/mergeRefs";
|
|
3
3
|
export type AvatarSize = "small" | "medium" | "large";
|
|
4
4
|
export interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
5
|
-
/**
|
|
5
|
+
/**
|
|
6
|
+
* Image source. Falls back to children (initials / icon) on error or when absent. While the image is shown the
|
|
7
|
+
* avatar paints no background under it, so a transparent PNG/SVG shows what is behind the avatar.
|
|
8
|
+
*/
|
|
6
9
|
src?: string | undefined;
|
|
7
10
|
alt?: string | undefined;
|
|
8
11
|
/** Preset size or an explicit pixel value. */
|
|
9
12
|
size?: AvatarSize | number;
|
|
10
13
|
variant?: "circular" | "rounded" | "square";
|
|
11
|
-
/** Background color for the fallback (initials / icon). */
|
|
14
|
+
/** Background color for the fallback (initials / icon); not painted under an image. */
|
|
12
15
|
color?: string;
|
|
13
16
|
/** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */
|
|
14
17
|
imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>;
|
|
@@ -12,7 +12,7 @@ function G(l) {
|
|
|
12
12
|
const g = y({
|
|
13
13
|
size: "medium",
|
|
14
14
|
variant: "circular"
|
|
15
|
-
}, l), [r, p] = x(g, ["class", "src", "alt", "size", "variant", "color", "style", "imgProps", "children", "ref", "data-testid"]), [d, n] = C(!1),
|
|
15
|
+
}, l), [r, p] = x(g, ["class", "src", "alt", "size", "variant", "color", "style", "imgProps", "children", "ref", "data-testid"]), [d, n] = C(!1), o = () => !!r.src && !d(), c = () => {
|
|
16
16
|
const e = r.size;
|
|
17
17
|
return F(r.style, {
|
|
18
18
|
...w(e) ? {} : {
|
|
@@ -20,26 +20,26 @@ function G(l) {
|
|
|
20
20
|
height: `${e}px`,
|
|
21
21
|
"font-size": `${e / 2.5}px`
|
|
22
22
|
},
|
|
23
|
-
...r.color && !
|
|
23
|
+
...r.color && !o() ? {
|
|
24
24
|
"background-color": r.color
|
|
25
25
|
} : {}
|
|
26
26
|
});
|
|
27
27
|
};
|
|
28
28
|
return (() => {
|
|
29
|
-
var e = S(),
|
|
30
|
-
return typeof
|
|
29
|
+
var e = S(), i = P(r.ref);
|
|
30
|
+
return typeof i == "function" && z(i, e), f(e, v(p, {
|
|
31
31
|
get "data-testid"() {
|
|
32
32
|
return r["data-testid"] ?? "avatar";
|
|
33
33
|
},
|
|
34
34
|
get class() {
|
|
35
|
-
return _("smwb-avatar", `smwb-avatar_${r.variant}`, w(r.size) ? `smwb-avatar_${r.size}` : void 0, r.class);
|
|
35
|
+
return _("smwb-avatar", `smwb-avatar_${r.variant}`, w(r.size) ? `smwb-avatar_${r.size}` : void 0, o() ? "smwb-avatar_image" : void 0, r.class);
|
|
36
36
|
},
|
|
37
37
|
get style() {
|
|
38
38
|
return c();
|
|
39
39
|
}
|
|
40
40
|
}), !1, !0), s(e, u(h, {
|
|
41
41
|
get when() {
|
|
42
|
-
return
|
|
42
|
+
return o();
|
|
43
43
|
},
|
|
44
44
|
get fallback() {
|
|
45
45
|
return (() => {
|
|
@@ -71,7 +71,7 @@ function O(l) {
|
|
|
71
71
|
const g = y({
|
|
72
72
|
max: 5,
|
|
73
73
|
surplusAriaLabel: (a) => `${a} more`
|
|
74
|
-
}, l), [r, p] = x(g, ["class", "max", "total", "onSurplusClick", "surplusAriaLabel", "size", "children", "ref", "data-testid"]), d = L(() => r.children), n = () => d.toArray(),
|
|
74
|
+
}, l), [r, p] = x(g, ["class", "max", "total", "onSurplusClick", "surplusAriaLabel", "size", "children", "ref", "data-testid"]), d = L(() => r.children), n = () => d.toArray(), o = () => r.total ?? n().length, c = () => Math.max(r.max, 1), e = () => n().slice(0, c()), i = () => n().slice(c()), t = () => o() - e().length;
|
|
75
75
|
return (() => {
|
|
76
76
|
var a = S(), $ = P(r.ref);
|
|
77
77
|
return typeof $ == "function" && z($, a), f(a, v(p, {
|
|
@@ -109,11 +109,11 @@ function O(l) {
|
|
|
109
109
|
}
|
|
110
110
|
}), null), s(a, u(h, {
|
|
111
111
|
get when() {
|
|
112
|
-
return
|
|
112
|
+
return i().length > 0;
|
|
113
113
|
},
|
|
114
114
|
get children() {
|
|
115
115
|
var b = B();
|
|
116
|
-
return s(b, () =>
|
|
116
|
+
return s(b, () => i()), b;
|
|
117
117
|
}
|
|
118
118
|
}), null), a;
|
|
119
119
|
})();
|