@smwb/ui-css 1.1.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/ui.css +1779 -177
  2. package/package.json +2 -2
package/dist/ui.css CHANGED
@@ -37,6 +37,32 @@
37
37
  padding: 12px;
38
38
  height: 48px;
39
39
  }
40
+ .smwb-appbar.smwb-appbar_variant-window {
41
+ -webkit-app-region: drag;
42
+ app-region: drag;
43
+ user-select: none;
44
+ --smwb-appbar-wc-left: env(titlebar-area-x, 0px);
45
+ --smwb-appbar-wc-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
46
+ padding-left: calc(16px + var(--smwb-appbar-wc-left));
47
+ padding-right: calc(16px + var(--smwb-appbar-wc-right));
48
+ }
49
+ .smwb-appbar.smwb-appbar_variant-window.smwb-appbar_window-controls-left {
50
+ --smwb-appbar-wc-left: env(titlebar-area-x, var(--smui-appBarWindowControlsWidth, 64px));
51
+ }
52
+ .smwb-appbar.smwb-appbar_variant-window.smwb-appbar_window-controls-right {
53
+ --smwb-appbar-wc-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, calc(100vw - var(--smui-appBarWindowControlsWidth, 138px))));
54
+ }
55
+ .smwb-appbar.smwb-appbar_variant-window.smwb-appbar_window-controls-none {
56
+ --smwb-appbar-wc-left: 0px;
57
+ --smwb-appbar-wc-right: 0px;
58
+ }
59
+ .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]) {
60
+ -webkit-app-region: no-drag;
61
+ app-region: no-drag;
62
+ }
63
+ .smwb-appbar.smwb-appbar_variant-window.smwb-dense {
64
+ padding: 0 calc(16px + var(--smwb-appbar-wc-right)) 0 calc(16px + var(--smwb-appbar-wc-left));
65
+ }
40
66
  .smwb-appbar__inner {
41
67
  display: flex;
42
68
  align-items: center;
@@ -50,6 +76,10 @@
50
76
  gap: 10px;
51
77
  white-space: nowrap;
52
78
  }
79
+ .smwb-appbar__left__title {
80
+ margin: 0;
81
+ font: inherit;
82
+ }
53
83
  .smwb-appbar__right {
54
84
  white-space: nowrap;
55
85
  }
@@ -69,6 +99,17 @@
69
99
  .smwb-appbar__mid.smwb-left {
70
100
  align-items: flex-start;
71
101
  }
102
+ [data-smwb-overlay-layer],
103
+ .smwb-menu,
104
+ .smwb-tooltip,
105
+ .smwb-snackbars,
106
+ .smwb-chat-attachment-image__overlay,
107
+ .smwb-image-modal__overlay,
108
+ .smwb-thumb-card__preview,
109
+ .smwb-chat-shell {
110
+ -webkit-app-region: no-drag;
111
+ app-region: no-drag;
112
+ }
72
113
  .smwb-appbar_color-primary {
73
114
  background-color: var(--smui-primaryColor);
74
115
  color: var(--smui-onPrimaryColor);
@@ -128,14 +169,17 @@
128
169
  .smwb-button.smwb-small {
129
170
  font-size: 13px;
130
171
  padding: 4px 10px;
172
+ min-height: var(--smui-control-h-sm, 32px);
131
173
  }
132
174
  .smwb-button.smwb-medium {
133
175
  font-size: 14px;
134
176
  padding: 6px 14px;
177
+ min-height: var(--smui-control-h-md, 40px);
135
178
  }
136
179
  .smwb-button.smwb-large {
137
180
  font-size: 15px;
138
181
  padding: 8px 22px;
182
+ min-height: var(--smui-control-h-lg, 48px);
139
183
  }
140
184
  .smwb-button.smwb-contained {
141
185
  color: var(--smui-onPrimaryColor);
@@ -371,6 +415,7 @@
371
415
  left: 50%;
372
416
  }
373
417
  .smwb-checkbox__wrapper {
418
+ position: relative;
374
419
  color: var(--smui-primaryTextColor);
375
420
  display: flex;
376
421
  align-items: center;
@@ -390,7 +435,15 @@
390
435
  opacity: 0.8;
391
436
  }
392
437
  .smwb-checkbox__input {
393
- display: none;
438
+ position: absolute;
439
+ width: 18px;
440
+ height: 18px;
441
+ margin: 0;
442
+ opacity: 0;
443
+ }
444
+ .smwb-checkbox__input:focus-visible ~ .smwb-checkbox__btn {
445
+ outline: 2px solid var(--smui-primaryColor);
446
+ outline-offset: 2px;
394
447
  }
395
448
  .smwb-checkbox__input:hover ~ .smwb-checkbox__btn::before {
396
449
  background-color: var(--smui-onSurfaceHover);
@@ -426,10 +479,29 @@
426
479
  .smwb-checkbox__input:checked:disabled ~ .smwb-checkbox__btn .smwb-checkbox__icon {
427
480
  color: var(--smui-disabledTextColor);
428
481
  }
482
+ .smwb-checkbox_size-small {
483
+ min-height: var(--smui-control-h-sm, 32px);
484
+ }
485
+ .smwb-checkbox_size-small .smwb-checkbox__btn,
486
+ .smwb-checkbox_size-small .smwb-checkbox__input {
487
+ width: 16px;
488
+ height: 16px;
489
+ }
490
+ .smwb-checkbox_size-medium {
491
+ min-height: var(--smui-control-h-md, 40px);
492
+ }
493
+ .smwb-checkbox_size-large {
494
+ min-height: var(--smui-control-h-lg, 48px);
495
+ }
496
+ .smwb-checkbox_size-large .smwb-checkbox__btn,
497
+ .smwb-checkbox_size-large .smwb-checkbox__input {
498
+ width: 22px;
499
+ height: 22px;
500
+ }
429
501
  .smwb-chip {
430
502
  position: relative;
431
503
  user-select: none;
432
- height: 32px;
504
+ min-height: var(--smui-control-h-sm, 32px);
433
505
  display: inline-flex;
434
506
  align-items: center;
435
507
  justify-content: center;
@@ -498,6 +570,27 @@
498
570
  align-items: center;
499
571
  justify-content: center;
500
572
  }
573
+ .smwb-chip__content {
574
+ display: inline-flex;
575
+ align-items: center;
576
+ gap: 8px;
577
+ border-radius: inherit;
578
+ }
579
+ .smwb-chip__content:focus {
580
+ outline-offset: 9999px;
581
+ }
582
+ .smwb-chip__content:focus::after {
583
+ content: "";
584
+ position: absolute;
585
+ inset: 0;
586
+ border-radius: inherit;
587
+ outline: inherit;
588
+ pointer-events: none;
589
+ }
590
+ .smwb-chip.smwb-outlined > .smwb-chip__content:focus::after {
591
+ inset: -1px;
592
+ border: 1px solid transparent;
593
+ }
501
594
  .smwb-chip__delete-icon {
502
595
  background: transparent;
503
596
  border: 0;
@@ -509,6 +602,7 @@
509
602
  }
510
603
  .smwb-chip_size-small {
511
604
  height: 24px;
605
+ min-height: 24px;
512
606
  padding: 0 8px;
513
607
  font-size: 0.75rem;
514
608
  }
@@ -1298,6 +1392,182 @@
1298
1392
  .smwb-meter_color-error {
1299
1393
  --smwb-meter-color: var(--smui-errorColor);
1300
1394
  }
1395
+ .smwb-diff-stat {
1396
+ --smwb-diff-stat-added: color-mix(in srgb, var(--smui-successColor) 55%, var(--smui-onSurfaceColor));
1397
+ --smwb-diff-stat-removed: color-mix(in srgb, var(--smui-errorColor) 55%, var(--smui-onSurfaceColor));
1398
+ --smwb-diff-stat-neutral: color-mix(in srgb, var(--smui-onSurfaceColor) 60%, transparent);
1399
+ display: inline-flex;
1400
+ align-items: center;
1401
+ gap: 4px;
1402
+ min-width: 0;
1403
+ font-size: 0.875rem;
1404
+ line-height: 1.4;
1405
+ font-variant-numeric: tabular-nums;
1406
+ white-space: nowrap;
1407
+ }
1408
+ .smwb-diff-stat__text {
1409
+ display: inline-flex;
1410
+ gap: 2px;
1411
+ font-weight: 600;
1412
+ }
1413
+ .smwb-diff-stat__added {
1414
+ color: var(--smwb-diff-stat-added);
1415
+ }
1416
+ .smwb-diff-stat__removed {
1417
+ color: var(--smwb-diff-stat-removed);
1418
+ }
1419
+ .smwb-diff-stat__bar {
1420
+ display: inline-flex;
1421
+ align-items: center;
1422
+ gap: 2px;
1423
+ }
1424
+ .smwb-diff-stat__cell {
1425
+ width: 5px;
1426
+ height: 10px;
1427
+ border-radius: 2px;
1428
+ border: 1px solid var(--smwb-diff-stat-neutral);
1429
+ box-sizing: border-box;
1430
+ }
1431
+ .smwb-diff-stat__cell_added {
1432
+ border-color: var(--smwb-diff-stat-added);
1433
+ background-color: var(--smwb-diff-stat-added);
1434
+ }
1435
+ .smwb-diff-stat__cell_removed {
1436
+ border-color: var(--smwb-diff-stat-removed);
1437
+ background-color: var(--smwb-diff-stat-removed);
1438
+ }
1439
+ .smwb-diff-stat_compact {
1440
+ font-size: 0.75rem;
1441
+ }
1442
+ .smwb-diff-stat_compact .smwb-diff-stat__cell {
1443
+ height: 8px;
1444
+ }
1445
+ .smwb-status-dot {
1446
+ --smwb-status-dot-color: var(--smui-onSurfaceVariant);
1447
+ display: inline-block;
1448
+ position: relative;
1449
+ flex: none;
1450
+ box-sizing: border-box;
1451
+ width: 12px;
1452
+ height: 12px;
1453
+ border-radius: 50%;
1454
+ background-color: var(--smwb-status-dot-color);
1455
+ vertical-align: middle;
1456
+ }
1457
+ .smwb-status-dot_size-sm {
1458
+ width: 8px;
1459
+ height: 8px;
1460
+ }
1461
+ .smwb-status-dot_status-active {
1462
+ --smwb-status-dot-color: var(--smui-infoColor);
1463
+ }
1464
+ .smwb-status-dot_status-attention {
1465
+ --smwb-status-dot-color: var(--smui-warningColor);
1466
+ }
1467
+ .smwb-status-dot_status-idle {
1468
+ --smwb-status-dot-color: var(--smui-onSurfaceVariant);
1469
+ }
1470
+ .smwb-status-dot_status-done {
1471
+ --smwb-status-dot-color: var(--smui-successColor);
1472
+ }
1473
+ .smwb-status-dot_status-error {
1474
+ --smwb-status-dot-color: var(--smui-errorColor);
1475
+ }
1476
+ .smwb-status-dot_status-unknown {
1477
+ --smwb-status-dot-color: var(--smui-outlineColor);
1478
+ background-color: transparent;
1479
+ border: 2px solid var(--smwb-status-dot-color);
1480
+ }
1481
+ .smwb-status-dot_color-default {
1482
+ --smwb-status-dot-color: var(--smui-onSurfaceVariant);
1483
+ }
1484
+ .smwb-status-dot_color-primary {
1485
+ --smwb-status-dot-color: var(--smui-primaryColor);
1486
+ }
1487
+ .smwb-status-dot_color-secondary {
1488
+ --smwb-status-dot-color: var(--smui-secondaryColor);
1489
+ }
1490
+ .smwb-status-dot_color-error {
1491
+ --smwb-status-dot-color: var(--smui-errorColor);
1492
+ }
1493
+ .smwb-status-dot_color-success {
1494
+ --smwb-status-dot-color: var(--smui-successColor);
1495
+ }
1496
+ .smwb-status-dot_color-warning {
1497
+ --smwb-status-dot-color: var(--smui-warningColor);
1498
+ }
1499
+ .smwb-status-dot_color-info {
1500
+ --smwb-status-dot-color: var(--smui-infoColor);
1501
+ }
1502
+ .smwb-status-dot_pulse::after {
1503
+ content: "";
1504
+ position: absolute;
1505
+ inset: 0;
1506
+ border-radius: inherit;
1507
+ background-color: var(--smwb-status-dot-color);
1508
+ opacity: 0;
1509
+ pointer-events: none;
1510
+ }
1511
+ .smwb-status-dot_status-unknown.smwb-status-dot_pulse::after {
1512
+ inset: -2px;
1513
+ background-color: transparent;
1514
+ border: 2px solid var(--smwb-status-dot-color);
1515
+ }
1516
+ @media (prefers-reduced-motion: no-preference) {
1517
+ .smwb-status-dot_pulse::after {
1518
+ animation: smwb-status-dot-pulse 1.6s ease-out infinite;
1519
+ }
1520
+ }
1521
+ @keyframes smwb-status-dot-pulse {
1522
+ 0% {
1523
+ transform: scale(1);
1524
+ opacity: 0.5;
1525
+ }
1526
+ 100% {
1527
+ transform: scale(2.4);
1528
+ opacity: 0;
1529
+ }
1530
+ }
1531
+ @media (forced-colors: active) {
1532
+ .smwb-status-dot {
1533
+ background-color: CanvasText;
1534
+ }
1535
+ .smwb-status-dot_status-unknown {
1536
+ background-color: transparent;
1537
+ border-color: CanvasText;
1538
+ }
1539
+ .smwb-status-dot_pulse::after {
1540
+ background-color: CanvasText;
1541
+ }
1542
+ .smwb-status-dot_status-unknown.smwb-status-dot_pulse::after {
1543
+ background-color: transparent;
1544
+ border-color: CanvasText;
1545
+ }
1546
+ }
1547
+ .smwb-qr-code {
1548
+ display: inline-flex;
1549
+ flex-direction: column;
1550
+ align-items: center;
1551
+ gap: 8px;
1552
+ margin: 0;
1553
+ }
1554
+ .smwb-qr-code__image {
1555
+ border-radius: 4px;
1556
+ overflow: hidden;
1557
+ forced-color-adjust: none;
1558
+ print-color-adjust: exact;
1559
+ }
1560
+ .smwb-qr-code__light {
1561
+ fill: #ffffff;
1562
+ }
1563
+ .smwb-qr-code__dark {
1564
+ fill: #000000;
1565
+ }
1566
+ .smwb-qr-code__caption {
1567
+ color: var(--smui-onSurfaceVariant);
1568
+ font-size: 0.8125rem;
1569
+ text-align: center;
1570
+ }
1301
1571
  .smwb-radio {
1302
1572
  display: inline-flex;
1303
1573
  gap: 20px;
@@ -1328,7 +1598,17 @@
1328
1598
  display: none;
1329
1599
  }
1330
1600
  .smwb-radio__input {
1331
- display: none;
1601
+ position: absolute;
1602
+ top: 0;
1603
+ left: 0;
1604
+ width: 100%;
1605
+ height: 100%;
1606
+ margin: 0;
1607
+ opacity: 0;
1608
+ }
1609
+ .smwb-radio__input:focus-visible ~ .smwb-radio__btn {
1610
+ outline: 2px solid var(--smui-primaryColor);
1611
+ outline-offset: 2px;
1332
1612
  }
1333
1613
  .smwb-radio__input:active ~ .radio__btn:hover ~ .smwb-radio__bg {
1334
1614
  transform: translate(-50%, -50%) scale(1);
@@ -1413,6 +1693,27 @@
1413
1693
  pointer-events: none;
1414
1694
  color: var(--smui-primaryTextColor);
1415
1695
  }
1696
+ .smwb-radio_size-small {
1697
+ min-height: var(--smui-control-h-sm, 32px);
1698
+ }
1699
+ .smwb-radio_size-small .smwb-radio__btn {
1700
+ width: 16px;
1701
+ height: 16px;
1702
+ }
1703
+ .smwb-radio_size-small .smwb-radio__btn::after {
1704
+ width: 8px;
1705
+ height: 8px;
1706
+ }
1707
+ .smwb-radio_size-medium {
1708
+ min-height: var(--smui-control-h-md, 40px);
1709
+ }
1710
+ .smwb-radio_size-large {
1711
+ min-height: var(--smui-control-h-lg, 48px);
1712
+ }
1713
+ .smwb-radio_size-large .smwb-radio__btn {
1714
+ width: 22px;
1715
+ height: 22px;
1716
+ }
1416
1717
  @keyframes ping {
1417
1718
  75%,
1418
1719
  100% {
@@ -1469,6 +1770,20 @@
1469
1770
  .smwb-sidebar.smwb-compactMini .smwb-nav-item__title {
1470
1771
  display: none;
1471
1772
  }
1773
+ .smwb-sidebar.smwb-sidebar_contained {
1774
+ position: relative;
1775
+ top: auto;
1776
+ left: auto;
1777
+ height: 100%;
1778
+ min-height: 0;
1779
+ align-self: stretch;
1780
+ flex-shrink: 0;
1781
+ overflow-y: auto;
1782
+ overflow-x: hidden;
1783
+ }
1784
+ .smwb-sidebar.smwb-sidebar_contained .smwb-nav-item {
1785
+ overflow: hidden;
1786
+ }
1472
1787
  .smwb-sidebar__collapse {
1473
1788
  width: 100%;
1474
1789
  display: flex;
@@ -1511,6 +1826,9 @@
1511
1826
  align-items: center;
1512
1827
  gap: 5px;
1513
1828
  }
1829
+ .smwb-sidebar__nav .smwb-nav-item {
1830
+ flex-shrink: 0;
1831
+ }
1514
1832
  .smwb-sidebar .smwb-nav-item {
1515
1833
  position: relative;
1516
1834
  color: var(--smui-primaryTextColor);
@@ -1843,6 +2161,10 @@
1843
2161
  }
1844
2162
  .smwb-text-field__input:not(.smwb-text-field__input--inline) {
1845
2163
  padding: 16px 16px 17px;
2164
+ padding-top: 0;
2165
+ padding-bottom: 0;
2166
+ box-sizing: border-box;
2167
+ min-height: var(--smui-control-h-md, 40px);
1846
2168
  }
1847
2169
  .smwb-text-field__input::placeholder {
1848
2170
  opacity: 0;
@@ -2046,19 +2368,33 @@
2046
2368
  width: 100%;
2047
2369
  min-width: 0;
2048
2370
  }
2371
+ .smwb-text-field:not(.smwb-text-field--filled) .smwb-text-field__label:not(.smwb-text-field__label--shrink) {
2372
+ transform: translate(16px, calc((var(--smui-control-h-md, 40px) - 23px) / 2));
2373
+ }
2049
2374
  .smwb-text-field_size-small .smwb-text-field__input:not(.smwb-text-field__input--inline) {
2050
- padding-top: 8px;
2051
- padding-bottom: 9px;
2375
+ padding-top: 0;
2376
+ padding-bottom: 0;
2377
+ min-height: var(--smui-control-h-sm, 32px);
2052
2378
  font-size: 13px;
2053
2379
  }
2054
2380
  .smwb-text-field_size-small:not(.smwb-text-field--filled) .smwb-text-field__label:not(.smwb-text-field__label--shrink) {
2055
- transform: translate(16px, 8px);
2381
+ transform: translate(16px, calc((var(--smui-control-h-sm, 32px) - 23px) / 2));
2056
2382
  }
2057
2383
  .smwb-text-field_size-large .smwb-text-field__input:not(.smwb-text-field__input--inline) {
2058
- padding-top: 16px;
2059
- padding-bottom: 16px;
2384
+ padding-top: 0;
2385
+ padding-bottom: 0;
2386
+ min-height: var(--smui-control-h-lg, 48px);
2060
2387
  font-size: 16px;
2061
2388
  }
2389
+ .smwb-text-field_size-large:not(.smwb-text-field--filled) .smwb-text-field__label:not(.smwb-text-field__label--shrink) {
2390
+ transform: translate(16px, calc((var(--smui-control-h-lg, 48px) - 23px) / 2));
2391
+ }
2392
+ .smwb-text-field--filled .smwb-text-field__input:not(.smwb-text-field__input--inline) {
2393
+ box-sizing: content-box;
2394
+ min-height: 0;
2395
+ padding-top: 23px;
2396
+ padding-bottom: 10px;
2397
+ }
2062
2398
  .smwb-toggle {
2063
2399
  width: 50px;
2064
2400
  height: 30px;
@@ -2079,6 +2415,18 @@
2079
2415
  flex-direction: row-reverse;
2080
2416
  align-items: center;
2081
2417
  }
2418
+ .smwb-toggle__wrapper:has(.smwb-toggle_size-small) {
2419
+ min-height: var(--smui-control-h-sm, 32px);
2420
+ justify-content: center;
2421
+ }
2422
+ .smwb-toggle__wrapper:has(.smwb-toggle_size-medium) {
2423
+ min-height: var(--smui-control-h-md, 40px);
2424
+ justify-content: center;
2425
+ }
2426
+ .smwb-toggle__wrapper:has(.smwb-toggle_size-large) {
2427
+ min-height: var(--smui-control-h-lg, 48px);
2428
+ justify-content: center;
2429
+ }
2082
2430
  .smwb-toggle.smwb-disabled {
2083
2431
  opacity: 0.35;
2084
2432
  pointer-events: none;
@@ -2126,7 +2474,17 @@
2126
2474
  opacity: 1;
2127
2475
  }
2128
2476
  .smwb-toggle__checkbox {
2129
- display: none;
2477
+ position: absolute;
2478
+ top: 0;
2479
+ left: 0;
2480
+ width: 100%;
2481
+ height: 100%;
2482
+ margin: 0;
2483
+ opacity: 0;
2484
+ }
2485
+ .smwb-toggle__checkbox:focus-visible ~ .smwb-toggle__track {
2486
+ outline: 2px solid var(--smui-primaryColor);
2487
+ outline-offset: 2px;
2130
2488
  }
2131
2489
  .smwb-toggle__checkbox:checked ~ .smwb-toggle__track {
2132
2490
  background-color: var(--smui-toggleTrackActiveColor);
@@ -2179,7 +2537,7 @@
2179
2537
  white-space: nowrap;
2180
2538
  height: 48px;
2181
2539
  }
2182
- .smwb-menu__item:not(.smwb-menu__item--selected):not(:active):hover:before {
2540
+ .smwb-menu__item:not(.smwb-menu__item--selected):not(:active):not(:focus-visible):not(.smwb-select-field__option--active):hover:before {
2183
2541
  opacity: 0.08;
2184
2542
  }
2185
2543
  .smwb-menu__item:before {
@@ -2201,6 +2559,16 @@
2201
2559
  .smwb-menu__item--selected:before {
2202
2560
  opacity: 0.08;
2203
2561
  }
2562
+ .smwb-menu__item:focus-visible {
2563
+ outline: 2px solid var(--smui-primaryColor);
2564
+ outline-offset: -2px;
2565
+ }
2566
+ .smwb-menu__item:focus-visible:before {
2567
+ opacity: 0.12;
2568
+ }
2569
+ .smwb-menu__item:has( > .smwb-menu__item-inner:focus-visible):before {
2570
+ opacity: 0.12;
2571
+ }
2204
2572
  .smwb-menu__item:active:before {
2205
2573
  opacity: 0.12;
2206
2574
  }
@@ -2212,6 +2580,10 @@
2212
2580
  color: currentColor;
2213
2581
  gap: 6px;
2214
2582
  }
2583
+ .smwb-menu__item-inner:focus-visible {
2584
+ outline: 2px solid var(--smui-primaryColor);
2585
+ outline-offset: -2px;
2586
+ }
2215
2587
  .smwb-menu__text {
2216
2588
  flex-grow: 1;
2217
2589
  }
@@ -2306,6 +2678,29 @@
2306
2678
  opacity: 0.38;
2307
2679
  cursor: default;
2308
2680
  }
2681
+ .smwb-tabs__overflow-trigger {
2682
+ display: inline-flex;
2683
+ align-items: center;
2684
+ justify-content: center;
2685
+ flex: 0 0 auto;
2686
+ width: 40px;
2687
+ padding: 0;
2688
+ border: none;
2689
+ background: none;
2690
+ color: var(--smui-onSurfaceVariant);
2691
+ cursor: pointer;
2692
+ }
2693
+ .smwb-tabs__overflow-trigger:hover:not(:disabled) {
2694
+ background-color: var(--smui-onSurfaceHover);
2695
+ }
2696
+ .smwb-tabs__overflow-trigger:focus-visible {
2697
+ outline: 2px solid var(--smui-primaryColor);
2698
+ outline-offset: -2px;
2699
+ }
2700
+ .smwb-tabs__overflow-trigger:disabled {
2701
+ opacity: 0.38;
2702
+ cursor: default;
2703
+ }
2309
2704
  .smwb-tabs__indicator {
2310
2705
  display: flex;
2311
2706
  justify-content: center;
@@ -2366,6 +2761,10 @@
2366
2761
  opacity: 0.12;
2367
2762
  transition-duration: 75ms;
2368
2763
  }
2764
+ .smwb-tab:focus-visible {
2765
+ outline: 2px solid var(--smui-primaryColor);
2766
+ outline-offset: -2px;
2767
+ }
2369
2768
  .smwb-tab__content {
2370
2769
  position: relative;
2371
2770
  display: flex;
@@ -2418,33 +2817,124 @@
2418
2817
  pointer-events: none;
2419
2818
  cursor: default;
2420
2819
  }
2421
- .smwb-tabs--dense .smwb-tab {
2422
- padding: 0 12px;
2423
- font-weight: 500;
2424
- letter-spacing: normal;
2425
- text-transform: none;
2426
- }
2427
- .smwb-slider {
2428
- display: inline-block;
2820
+ .smwb-tab-item {
2429
2821
  position: relative;
2430
- height: 4px;
2431
- width: 100%;
2432
- padding: 13px 0;
2433
- border-radius: 12px;
2434
- cursor: pointer;
2435
- box-sizing: content-box;
2436
- color: var(--smui-primaryColor);
2437
- touch-action: none;
2438
- }
2439
- .smwb-slider__ticks {
2440
2822
  display: flex;
2441
2823
  align-items: center;
2442
- width: 100%;
2824
+ flex: 1 0 auto;
2825
+ }
2826
+ .smwb-tab-item:before {
2443
2827
  position: absolute;
2444
- top: 50%;
2445
- transform: translateY(-50%);
2446
- left: 0;
2447
- z-index: 1;
2828
+ inset: 0;
2829
+ opacity: 0;
2830
+ content: "";
2831
+ pointer-events: none;
2832
+ transition: opacity 15ms linear;
2833
+ background-color: #6750a4;
2834
+ }
2835
+ .smwb-tab-item:hover:not(.smwb-tab-item--disabled):before {
2836
+ opacity: 0.04;
2837
+ }
2838
+ .smwb-tab-item > .smwb-tab:hover:before {
2839
+ opacity: 0;
2840
+ }
2841
+ .smwb-tab-item > .smwb-tab:focus:before {
2842
+ opacity: 0.12;
2843
+ }
2844
+ .smwb-tab-item > .smwb-tab:not(:last-child) {
2845
+ padding-right: 8px;
2846
+ }
2847
+ .smwb-tab__close,
2848
+ .smwb-tab__actions {
2849
+ position: relative;
2850
+ z-index: 1;
2851
+ flex: 0 0 auto;
2852
+ margin-right: 4px;
2853
+ }
2854
+ .smwb-tab__actions {
2855
+ display: inline-flex;
2856
+ align-items: center;
2857
+ }
2858
+ .smwb-tab__close {
2859
+ display: inline-flex;
2860
+ align-items: center;
2861
+ justify-content: center;
2862
+ box-sizing: border-box;
2863
+ width: 24px;
2864
+ height: 24px;
2865
+ padding: 0;
2866
+ border: none;
2867
+ border-radius: 50%;
2868
+ background: none;
2869
+ color: var(--smui-onSurfaceVariant);
2870
+ cursor: pointer;
2871
+ }
2872
+ .smwb-tab__close:hover:not(:disabled) {
2873
+ background-color: var(--smui-onSurfaceHover);
2874
+ }
2875
+ .smwb-tab__close:focus-visible {
2876
+ outline: 2px solid var(--smui-primaryColor);
2877
+ outline-offset: -2px;
2878
+ }
2879
+ .smwb-tab__close:disabled {
2880
+ opacity: 0.38;
2881
+ cursor: default;
2882
+ }
2883
+ .smwb-tabs--dense .smwb-tab {
2884
+ padding: 0 12px;
2885
+ font-weight: 500;
2886
+ letter-spacing: normal;
2887
+ text-transform: none;
2888
+ }
2889
+ .smwb-tabs .smwb-tab__close {
2890
+ opacity: 0;
2891
+ pointer-events: none;
2892
+ transition: opacity 0.15s linear;
2893
+ }
2894
+ .smwb-tabs .smwb-tab-item:hover:not(.smwb-tab-item--disabled) .smwb-tab__close:not(:disabled),
2895
+ .smwb-tabs .smwb-tab-item--active .smwb-tab__close:not(:disabled),
2896
+ .smwb-tabs .smwb-tab-item:focus-within .smwb-tab__close:not(:disabled) {
2897
+ opacity: 1;
2898
+ pointer-events: auto;
2899
+ }
2900
+ .smwb-tabs .smwb-tab-item--dragging {
2901
+ opacity: 0.6;
2902
+ }
2903
+ .smwb-tabs .smwb-tab-item--drop-target:after {
2904
+ content: "";
2905
+ position: absolute;
2906
+ top: 0;
2907
+ bottom: 0;
2908
+ left: 0;
2909
+ width: 2px;
2910
+ background-color: var(--smui-primaryColor);
2911
+ pointer-events: none;
2912
+ }
2913
+ .smwb-tab-panel:focus-visible {
2914
+ outline: 2px solid var(--smui-primaryColor);
2915
+ outline-offset: -2px;
2916
+ }
2917
+ .smwb-slider {
2918
+ display: inline-block;
2919
+ position: relative;
2920
+ height: 4px;
2921
+ width: 100%;
2922
+ padding: 13px 0;
2923
+ border-radius: 12px;
2924
+ cursor: pointer;
2925
+ box-sizing: content-box;
2926
+ color: var(--smui-primaryColor);
2927
+ touch-action: none;
2928
+ }
2929
+ .smwb-slider__ticks {
2930
+ display: flex;
2931
+ align-items: center;
2932
+ width: 100%;
2933
+ position: absolute;
2934
+ top: 50%;
2935
+ transform: translateY(-50%);
2936
+ left: 0;
2937
+ z-index: 1;
2448
2938
  height: 4px;
2449
2939
  justify-content: space-between;
2450
2940
  }
@@ -2723,6 +3213,9 @@
2723
3213
  }
2724
3214
  .smwb-select-field:not(.smwb-select-field--inline) {
2725
3215
  padding: 16px;
3216
+ padding-top: calc((var(--smui-control-h-md, 40px) - 24px) / 2);
3217
+ padding-bottom: calc((var(--smui-control-h-md, 40px) - 24px) / 2);
3218
+ min-height: var(--smui-control-h-md, 40px);
2726
3219
  }
2727
3220
  .smwb-select-field:not(.smwb-select-field--inline).smwb-select-field--filled {
2728
3221
  padding: 22px 16px 10px 16px;
@@ -2751,12 +3244,39 @@
2751
3244
  width: 0;
2752
3245
  height: 0;
2753
3246
  }
3247
+ .smwb-select-field__control {
3248
+ display: flex;
3249
+ flex: 1 1 auto;
3250
+ align-items: center;
3251
+ align-self: stretch;
3252
+ }
3253
+ .smwb-select-field__control:focus {
3254
+ outline-offset: 9999px;
3255
+ }
3256
+ .smwb-select-field__control:focus::after {
3257
+ content: "";
3258
+ position: absolute;
3259
+ inset: 0;
3260
+ outline: inherit;
3261
+ pointer-events: none;
3262
+ }
2754
3263
  .smwb-select-field__actions {
2755
3264
  display: flex;
2756
3265
  align-items: center;
2757
3266
  column-gap: 2px;
2758
3267
  margin-right: -7px;
2759
3268
  }
3269
+ .smwb-select-field__clear {
3270
+ display: inline-flex;
3271
+ flex-shrink: 0;
3272
+ margin: 0;
3273
+ padding: 0;
3274
+ border: 0;
3275
+ background: none;
3276
+ color: inherit;
3277
+ font: inherit;
3278
+ cursor: pointer;
3279
+ }
2760
3280
  .smwb-select-field__values {
2761
3281
  white-space: nowrap;
2762
3282
  font: inherit;
@@ -2766,7 +3286,8 @@
2766
3286
  .smwb-select-field__values > *:not(:first-child) {
2767
3287
  margin-left: 4px;
2768
3288
  }
2769
- .smwb-select-field__values + span {
3289
+ .smwb-select-field__values + .smwb-select-field__search,
3290
+ .smwb-select-field__values + .smwb-select-field__control > .smwb-select-field__search {
2770
3291
  margin-left: 4px;
2771
3292
  }
2772
3293
  .smwb-select-field__values .smwb-chip {
@@ -2866,16 +3387,37 @@
2866
3387
  font-style: italic;
2867
3388
  color: var(--smui-primaryColor);
2868
3389
  }
3390
+ .smwb-select-field__listbox,
3391
+ .smwb-select-field__group-options {
3392
+ list-style: none;
3393
+ margin: 0;
3394
+ padding: 0;
3395
+ }
3396
+ .smwb-select-field__option--active {
3397
+ outline: 2px solid var(--smui-primaryColor);
3398
+ outline-offset: -2px;
3399
+ }
3400
+ .smwb-menu .smwb-menu__item.smwb-select-field__option--active:before {
3401
+ opacity: 0.12;
3402
+ }
2869
3403
  .smwb-text-field_size-small .smwb-select-field:not(.smwb-select-field--inline) {
2870
- padding-top: 8px;
2871
- padding-bottom: 8px;
3404
+ padding-top: calc((var(--smui-control-h-sm, 32px) - 24px) / 2);
3405
+ padding-bottom: calc((var(--smui-control-h-sm, 32px) - 24px) / 2);
3406
+ min-height: var(--smui-control-h-sm, 32px);
2872
3407
  font-size: 13px;
2873
3408
  }
2874
3409
  .smwb-text-field_size-large .smwb-select-field:not(.smwb-select-field--inline) {
2875
- padding-top: 16px;
2876
- padding-bottom: 16px;
3410
+ padding-top: calc((var(--smui-control-h-lg, 48px) - 24px) / 2);
3411
+ padding-bottom: calc((var(--smui-control-h-lg, 48px) - 24px) / 2);
3412
+ min-height: var(--smui-control-h-lg, 48px);
2877
3413
  font-size: 16px;
2878
3414
  }
3415
+ .smwb-select-field--filled:not(.smwb-select-field--inline),
3416
+ .smwb-text-field_size-small .smwb-select-field--filled:not(.smwb-select-field--inline),
3417
+ .smwb-text-field_size-large .smwb-select-field--filled:not(.smwb-select-field--inline) {
3418
+ min-height: 0;
3419
+ padding: 22px 16px 10px 16px;
3420
+ }
2879
3421
  .smwb-ripple {
2880
3422
  position: absolute;
2881
3423
  inset: 0;
@@ -2971,6 +3513,39 @@
2971
3513
  padding-top: 4px;
2972
3514
  padding-bottom: 4px;
2973
3515
  }
3516
+ .smwb-list__item.smwb-list__item_link,
3517
+ .smwb-list_dense .smwb-list__item.smwb-list__item_link {
3518
+ padding: 0;
3519
+ gap: 0;
3520
+ }
3521
+ .smwb-list__item_link > .smwb-list__item__end {
3522
+ padding-right: 16px;
3523
+ }
3524
+ .smwb-list__item_link > .smwb-list__item__end:empty {
3525
+ display: none;
3526
+ }
3527
+ .smwb-list__item__link {
3528
+ display: flex;
3529
+ align-items: center;
3530
+ align-self: stretch;
3531
+ flex: auto;
3532
+ min-width: 0;
3533
+ min-height: inherit;
3534
+ box-sizing: border-box;
3535
+ gap: 20px;
3536
+ padding: 8px 16px;
3537
+ color: inherit;
3538
+ text-decoration: none;
3539
+ }
3540
+ .smwb-list__item__link:focus-visible {
3541
+ outline: 2px solid var(--smui-primaryColor);
3542
+ outline-offset: -2px;
3543
+ }
3544
+ .smwb-list_dense .smwb-list__item__link,
3545
+ .smwb-list__item_dense > .smwb-list__item__link {
3546
+ padding-top: 4px;
3547
+ padding-bottom: 4px;
3548
+ }
2974
3549
  .smwb-list__subheader {
2975
3550
  padding: 8px 16px;
2976
3551
  color: var(--smui-onSurfaceVariant);
@@ -3193,7 +3768,6 @@
3193
3768
  flex-direction: column;
3194
3769
  border-radius: 8px;
3195
3770
  overflow: visible;
3196
- outline: none;
3197
3771
  }
3198
3772
  .smwb-thumb-card--interactive {
3199
3773
  cursor: pointer;
@@ -3202,6 +3776,11 @@
3202
3776
  opacity: 0.5;
3203
3777
  pointer-events: none;
3204
3778
  }
3779
+ .smwb-thumb-card__content {
3780
+ display: flex;
3781
+ flex-direction: column;
3782
+ outline: none;
3783
+ }
3205
3784
  .smwb-thumb-card__media {
3206
3785
  position: relative;
3207
3786
  width: 100%;
@@ -3214,7 +3793,7 @@
3214
3793
  outline: 2px solid var(--smui-primaryColor);
3215
3794
  outline-offset: 1px;
3216
3795
  }
3217
- .smwb-thumb-card--interactive:focus-visible .smwb-thumb-card__media {
3796
+ .smwb-thumb-card__content:focus-visible .smwb-thumb-card__media {
3218
3797
  outline: 2px solid var(--smui-primaryColor);
3219
3798
  outline-offset: 1px;
3220
3799
  }
@@ -4130,80 +4709,308 @@
4130
4709
  opacity: 0;
4131
4710
  }
4132
4711
  }
4133
- .smwb-sheet {
4134
- background-color: var(--smui-surfaceBackground);
4135
- position: fixed;
4136
- opacity: 0;
4137
- transition: all 0.2s ease-in-out;
4138
- box-shadow: rgba(0, 0, 0, 0.14) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 1px 14px 1px, rgba(0, 0, 0, 0.14) 0px 6px 22px 4px;
4139
- z-index: 100;
4140
- padding: 10px 20px 20px;
4141
- box-sizing: border-box;
4142
- overflow: hidden;
4143
- display: flex;
4144
- max-width: 100vw;
4145
- }
4146
- .smwb-sheet__header {
4147
- display: flex;
4148
- justify-content: space-between;
4712
+ .smwb-kbd {
4713
+ position: relative;
4714
+ display: inline-flex;
4149
4715
  align-items: center;
4716
+ gap: 2px;
4150
4717
  flex-shrink: 0;
4151
- gap: 4px;
4152
- padding-bottom: 5px;
4153
- }
4154
- .smwb-sheet__header .smwb-button {
4155
- min-width: 0;
4718
+ font-family: inherit;
4719
+ font-size: inherit;
4720
+ line-height: 1;
4721
+ white-space: nowrap;
4156
4722
  }
4157
- .smwb-sheet__drag-handle {
4158
- position: absolute;
4159
- display: flex;
4723
+ .smwb-kbd__key {
4724
+ box-sizing: border-box;
4725
+ display: inline-flex;
4160
4726
  align-items: center;
4161
4727
  justify-content: center;
4162
- z-index: 1;
4163
- touch-action: none;
4728
+ min-width: 1.5em;
4729
+ height: 1.5em;
4730
+ padding: 0 0.375em;
4731
+ border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
4732
+ border-radius: 4px;
4733
+ background-color: color-mix(in srgb, currentColor 10%, transparent);
4734
+ font-family: inherit;
4735
+ font-size: inherit;
4736
+ font-weight: 500;
4737
+ line-height: 1;
4738
+ color: inherit;
4164
4739
  user-select: none;
4165
4740
  }
4166
- .smwb-sheet__drag-handle:focus-visible {
4167
- outline: 2px solid var(--smui-primaryColor);
4168
- outline-offset: -2px;
4169
- }
4170
- .smwb-sheet__drag-handle-bar {
4171
- display: block;
4172
- border-radius: 999px;
4173
- background-color: var(--smui-onSurfaceVariant);
4174
- opacity: 0.4;
4175
- transition: opacity 0.15s ease-in-out;
4741
+ @media (forced-colors: active) {
4742
+ .smwb-kbd__key {
4743
+ border-color: currentColor;
4744
+ }
4176
4745
  }
4177
- .smwb-sheet__drag-handle:hover .smwb-sheet__drag-handle-bar,
4178
- .smwb-sheet__drag-handle:active .smwb-sheet__drag-handle-bar {
4746
+ .smwb-kbd__separator {
4179
4747
  opacity: 0.7;
4748
+ user-select: none;
4180
4749
  }
4181
- .smwb-sheet_resizable.smwb-bottom {
4182
- padding-top: 20px;
4183
- }
4184
- .smwb-sheet_resizable.smwb-top {
4185
- padding-bottom: 20px;
4750
+ .smwb-kbd__text {
4751
+ position: absolute;
4752
+ width: 1px;
4753
+ height: 1px;
4754
+ margin: -1px;
4755
+ padding: 0;
4756
+ overflow: hidden;
4757
+ clip: rect(0 0 0 0);
4758
+ white-space: nowrap;
4759
+ border: 0;
4186
4760
  }
4187
- .smwb-sheet_resizable.smwb-left {
4188
- padding-right: 20px;
4761
+ .smwb-modal__overlay > .smwb-modal.smwb-command-palette {
4762
+ width: min(640px, calc(100vw - 32px));
4763
+ height: auto;
4764
+ min-height: 0;
4765
+ max-height: min(560px, calc(100vh - 2 * min(12vh, 96px)));
4766
+ overflow: hidden;
4767
+ padding: 0;
4768
+ border-radius: 16px;
4769
+ margin-block: min(12vh, 96px) auto;
4189
4770
  }
4190
- .smwb-sheet_resizable.smwb-right {
4191
- padding-left: 20px;
4771
+ @media (max-width: 600px) {
4772
+ .smwb-modal__overlay > .smwb-modal.smwb-command-palette {
4773
+ margin-block-start: 16px;
4774
+ }
4192
4775
  }
4193
- .smwb-sheet.smwb-bottom .smwb-sheet__drag-handle,
4194
- .smwb-sheet.smwb-top .smwb-sheet__drag-handle {
4195
- left: 0;
4196
- right: 0;
4197
- height: 20px;
4198
- cursor: ns-resize;
4776
+ .smwb-command-palette__panel {
4777
+ display: flex;
4778
+ flex-direction: column;
4779
+ flex: 1 1 auto;
4780
+ min-height: 0;
4199
4781
  }
4200
- .smwb-sheet.smwb-bottom .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar,
4201
- .smwb-sheet.smwb-top .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar {
4202
- width: 36px;
4203
- height: 4px;
4782
+ .smwb-command-palette__search {
4783
+ display: flex;
4784
+ align-items: center;
4785
+ gap: 8px;
4786
+ padding: 12px 16px;
4787
+ border-bottom: 1px solid var(--smui-dividerColor);
4204
4788
  }
4205
- .smwb-sheet.smwb-bottom .smwb-sheet__drag-handle {
4206
- top: 0;
4789
+ .smwb-command-palette__search-icon {
4790
+ display: inline-flex;
4791
+ flex-shrink: 0;
4792
+ color: var(--smui-onSurfaceVariant);
4793
+ }
4794
+ .smwb-command-palette__input {
4795
+ flex: 1;
4796
+ min-width: 0;
4797
+ border: 0;
4798
+ background: transparent;
4799
+ font: inherit;
4800
+ font-size: 1rem;
4801
+ line-height: 1.5;
4802
+ color: var(--smui-onSurfaceColor);
4803
+ outline: none;
4804
+ }
4805
+ .smwb-command-palette__input::placeholder {
4806
+ color: var(--smui-onSurfaceVariant);
4807
+ opacity: 1;
4808
+ }
4809
+ .smwb-command-palette__results {
4810
+ flex: 1 1 auto;
4811
+ min-height: 0;
4812
+ overflow-y: auto;
4813
+ overscroll-behavior: contain;
4814
+ padding: 4px 0;
4815
+ }
4816
+ .smwb-command-palette__listbox,
4817
+ .smwb-command-palette__group-options {
4818
+ list-style: none;
4819
+ margin: 0;
4820
+ padding: 0;
4821
+ }
4822
+ .smwb-command-palette__group-label {
4823
+ padding: 8px 16px 4px;
4824
+ font-size: 12px;
4825
+ font-weight: 600;
4826
+ text-transform: uppercase;
4827
+ letter-spacing: 0.04em;
4828
+ color: var(--smui-onSurfaceVariant);
4829
+ }
4830
+ .smwb-command-palette__item {
4831
+ position: relative;
4832
+ display: grid;
4833
+ grid-template-columns: auto minmax(0, 1fr) auto;
4834
+ align-items: center;
4835
+ gap: 12px;
4836
+ min-height: 44px;
4837
+ padding: 4px 16px;
4838
+ margin: 0 4px;
4839
+ border-radius: 4px;
4840
+ cursor: pointer;
4841
+ color: var(--smui-onSurfaceColor);
4842
+ }
4843
+ .smwb-command-palette__item::before {
4844
+ content: "";
4845
+ position: absolute;
4846
+ inset: 0;
4847
+ border-radius: inherit;
4848
+ background: currentColor;
4849
+ opacity: 0;
4850
+ pointer-events: none;
4851
+ }
4852
+ .smwb-command-palette__item:hover:not(.smwb-command-palette__item_active):not(.smwb-command-palette__item_disabled)::before {
4853
+ opacity: 0.08;
4854
+ }
4855
+ .smwb-command-palette__item_active {
4856
+ outline: 2px solid var(--smui-primaryColor);
4857
+ outline-offset: -2px;
4858
+ }
4859
+ .smwb-command-palette__item_active::before {
4860
+ opacity: 0.12;
4861
+ }
4862
+ @media (forced-colors: active) {
4863
+ .smwb-command-palette__item_active {
4864
+ outline-color: Highlight;
4865
+ }
4866
+ }
4867
+ .smwb-command-palette__item_disabled {
4868
+ color: var(--smui-disabledTextColor);
4869
+ cursor: default;
4870
+ }
4871
+ .smwb-command-palette__item-icon {
4872
+ grid-column: 1;
4873
+ display: inline-flex;
4874
+ align-items: center;
4875
+ justify-content: center;
4876
+ width: 20px;
4877
+ height: 20px;
4878
+ color: var(--smui-onSurfaceVariant);
4879
+ }
4880
+ .smwb-command-palette__item-text {
4881
+ grid-column: 2;
4882
+ min-width: 0;
4883
+ }
4884
+ .smwb-command-palette__item:not(:has(> .smwb-command-palette__item-icon)) > .smwb-command-palette__item-text {
4885
+ grid-column: 1 / 3;
4886
+ }
4887
+ .smwb-command-palette__item-label {
4888
+ display: block;
4889
+ overflow: hidden;
4890
+ text-overflow: ellipsis;
4891
+ white-space: nowrap;
4892
+ }
4893
+ .smwb-command-palette__item-subtitle {
4894
+ display: block;
4895
+ overflow: hidden;
4896
+ text-overflow: ellipsis;
4897
+ white-space: nowrap;
4898
+ font-size: 0.8125rem;
4899
+ color: var(--smui-onSurfaceVariant);
4900
+ }
4901
+ .smwb-command-palette__item-shortcut.smwb-kbd {
4902
+ grid-column: 3;
4903
+ font-size: 0.75rem;
4904
+ color: var(--smui-onSurfaceVariant);
4905
+ }
4906
+ .smwb-command-palette__loading-row {
4907
+ display: grid;
4908
+ grid-template-columns: auto minmax(0, 1fr) auto;
4909
+ align-items: center;
4910
+ gap: 12px;
4911
+ min-height: 44px;
4912
+ padding: 4px 16px;
4913
+ margin: 0 4px;
4914
+ }
4915
+ .smwb-command-palette__message {
4916
+ padding: 16px 20px;
4917
+ text-align: center;
4918
+ color: var(--smui-onSurfaceVariant);
4919
+ }
4920
+ .smwb-command-palette__message_error {
4921
+ color: var(--smui-errorColor);
4922
+ }
4923
+ .smwb-command-palette__footer {
4924
+ display: flex;
4925
+ align-items: center;
4926
+ gap: 12px;
4927
+ padding: 8px 16px;
4928
+ border-top: 1px solid var(--smui-dividerColor);
4929
+ font-size: 0.75rem;
4930
+ color: var(--smui-onSurfaceVariant);
4931
+ }
4932
+ .smwb-command-palette__status {
4933
+ position: absolute;
4934
+ width: 1px;
4935
+ height: 1px;
4936
+ overflow: hidden;
4937
+ clip-path: inset(50%);
4938
+ white-space: nowrap;
4939
+ }
4940
+ .smwb-sheet {
4941
+ background-color: var(--smui-surfaceBackground);
4942
+ position: fixed;
4943
+ opacity: 0;
4944
+ transition: all 0.2s ease-in-out;
4945
+ box-shadow: rgba(0, 0, 0, 0.14) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 1px 14px 1px, rgba(0, 0, 0, 0.14) 0px 6px 22px 4px;
4946
+ z-index: 100;
4947
+ padding: 10px 20px 20px;
4948
+ box-sizing: border-box;
4949
+ overflow: hidden;
4950
+ display: flex;
4951
+ max-width: 100vw;
4952
+ }
4953
+ .smwb-sheet__header {
4954
+ display: flex;
4955
+ justify-content: space-between;
4956
+ align-items: center;
4957
+ flex-shrink: 0;
4958
+ gap: 4px;
4959
+ padding-bottom: 5px;
4960
+ }
4961
+ .smwb-sheet__header .smwb-button {
4962
+ min-width: 0;
4963
+ }
4964
+ .smwb-sheet__drag-handle {
4965
+ position: absolute;
4966
+ display: flex;
4967
+ align-items: center;
4968
+ justify-content: center;
4969
+ z-index: 1;
4970
+ touch-action: none;
4971
+ user-select: none;
4972
+ }
4973
+ .smwb-sheet__drag-handle:focus-visible {
4974
+ outline: 2px solid var(--smui-primaryColor);
4975
+ outline-offset: -2px;
4976
+ }
4977
+ .smwb-sheet__drag-handle-bar {
4978
+ display: block;
4979
+ border-radius: 999px;
4980
+ background-color: var(--smui-onSurfaceVariant);
4981
+ opacity: 0.4;
4982
+ transition: opacity 0.15s ease-in-out;
4983
+ }
4984
+ .smwb-sheet__drag-handle:hover .smwb-sheet__drag-handle-bar,
4985
+ .smwb-sheet__drag-handle:active .smwb-sheet__drag-handle-bar {
4986
+ opacity: 0.7;
4987
+ }
4988
+ .smwb-sheet_resizable.smwb-bottom {
4989
+ padding-top: 20px;
4990
+ }
4991
+ .smwb-sheet_resizable.smwb-top {
4992
+ padding-bottom: 20px;
4993
+ }
4994
+ .smwb-sheet_resizable.smwb-left {
4995
+ padding-right: 20px;
4996
+ }
4997
+ .smwb-sheet_resizable.smwb-right {
4998
+ padding-left: 20px;
4999
+ }
5000
+ .smwb-sheet.smwb-bottom .smwb-sheet__drag-handle,
5001
+ .smwb-sheet.smwb-top .smwb-sheet__drag-handle {
5002
+ left: 0;
5003
+ right: 0;
5004
+ height: 20px;
5005
+ cursor: ns-resize;
5006
+ }
5007
+ .smwb-sheet.smwb-bottom .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar,
5008
+ .smwb-sheet.smwb-top .smwb-sheet__drag-handle .smwb-sheet__drag-handle-bar {
5009
+ width: 36px;
5010
+ height: 4px;
5011
+ }
5012
+ .smwb-sheet.smwb-bottom .smwb-sheet__drag-handle {
5013
+ top: 0;
4207
5014
  }
4208
5015
  .smwb-sheet.smwb-top .smwb-sheet__drag-handle {
4209
5016
  bottom: 0;
@@ -4626,6 +5433,13 @@
4626
5433
  pointer-events: none;
4627
5434
  opacity: 0.38;
4628
5435
  }
5436
+ .smwb-card__content {
5437
+ display: flex;
5438
+ flex-direction: column;
5439
+ }
5440
+ .smwb-card__content:focus-visible {
5441
+ outline: none;
5442
+ }
4629
5443
  .smwb-card__title {
4630
5444
  font-size: 1.25rem;
4631
5445
  font-weight: 500;
@@ -4636,7 +5450,7 @@
4636
5450
  .smwb-card_interactive {
4637
5451
  cursor: pointer;
4638
5452
  }
4639
- .smwb-card_interactive:focus-visible {
5453
+ .smwb-card:has( > .smwb-card__content:focus-visible) {
4640
5454
  outline: 2px solid var(--smui-primaryColor);
4641
5455
  outline-offset: 2px;
4642
5456
  }
@@ -5804,6 +6618,14 @@
5804
6618
  .smwb-table__cell.smwb-head-cell .smwb-head-cell__content input {
5805
6619
  font-weight: 500;
5806
6620
  }
6621
+ .smwb-table__cell.smwb-head-cell .smwb-head-cell__actions {
6622
+ align-items: center;
6623
+ display: inline-flex;
6624
+ vertical-align: middle;
6625
+ gap: 5px;
6626
+ margin-inline-start: 5px;
6627
+ cursor: auto;
6628
+ }
5807
6629
  .smwb-table__cell.smwb-head-cell.smwb-align_left {
5808
6630
  text-align: left;
5809
6631
  }
@@ -6179,60 +7001,230 @@
6179
7001
  min-width: 5px;
6180
7002
  flex-shrink: 1;
6181
7003
  }
6182
- .smwb-date-picker {
6183
- border-radius: 4px;
6184
- background-color: var(--smui-surfaceBackground);
6185
- box-shadow: rgba(0, 0, 0, 0.2) 0 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px;
6186
- width: 328px;
6187
- max-height: 428px;
6188
- color: var(--smui-primaryTextColor);
7004
+ .smwb-tab-groups {
7005
+ position: relative;
7006
+ display: grid;
7007
+ width: 100%;
7008
+ height: 100%;
7009
+ min-width: 0;
7010
+ min-height: 0;
6189
7011
  overflow: hidden;
6190
- z-index: 1300;
7012
+ --smwb-tab-groups-separator-size: 4px;
6191
7013
  }
6192
- .smwb-date-picker__inner {
7014
+ .smwb-tab-groups__header {
6193
7015
  display: flex;
6194
- flex-direction: column;
7016
+ align-items: stretch;
7017
+ box-sizing: border-box;
7018
+ min-width: 0;
7019
+ border-bottom: 1px solid var(--smui-dividerColor);
6195
7020
  }
6196
- .smwb-date-picker__header {
6197
- display: flex;
6198
- justify-content: space-between;
6199
- padding: 15px 12px;
7021
+ .smwb-tab-groups--split .smwb-tab-groups__header--active {
7022
+ box-shadow: inset 0 2px 0 0 var(--smui-primaryColor);
6200
7023
  }
6201
- .smwb-date-picker__action {
6202
- display: flex;
6203
- align-items: center;
7024
+ .smwb-tab-groups__tabs {
7025
+ flex: 1 1 auto;
7026
+ min-width: 0;
6204
7027
  }
6205
- .smwb-date-picker__action-label {
6206
- display: flex;
7028
+ .smwb-tab-groups__actions-trigger {
7029
+ display: inline-flex;
6207
7030
  align-items: center;
6208
7031
  justify-content: center;
6209
- min-width: 80px;
6210
- user-select: none;
7032
+ flex: 0 0 auto;
7033
+ width: 40px;
7034
+ padding: 0;
7035
+ border: none;
7036
+ background: none;
7037
+ color: var(--smui-onSurfaceVariant);
6211
7038
  cursor: pointer;
6212
- transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
6213
7039
  }
6214
- .smwb-date-picker__action-label > .smwb-icon__wrapper {
6215
- margin-right: -4px;
6216
- opacity: 1;
6217
- transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
7040
+ .smwb-tab-groups__actions-trigger:hover:not(:disabled) {
7041
+ background-color: var(--smui-onSurfaceHover);
6218
7042
  }
6219
- .smwb-date-picker__action-label--disabled {
6220
- color: var(--smui-disabledTextColor);
6221
- cursor: default;
6222
- pointer-events: none;
7043
+ .smwb-tab-groups__actions-trigger:focus-visible {
7044
+ outline: 2px solid var(--smui-primaryColor);
7045
+ outline-offset: -2px;
6223
7046
  }
6224
- .smwb-date-picker__action-label--disabled > .smwb-icon__wrapper {
6225
- opacity: 0;
6226
- visibility: hidden;
6227
- transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 0ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
7047
+ .smwb-tab-groups__actions-trigger:disabled {
7048
+ opacity: 0.38;
7049
+ cursor: default;
6228
7050
  }
6229
- .smwb-date-picker__action-label--active > .smwb-icon__wrapper {
6230
- transform: rotate(180deg);
7051
+ .smwb-tab-groups__panel {
7052
+ position: relative;
7053
+ min-width: 0;
7054
+ min-height: 0;
7055
+ overflow: auto;
6231
7056
  }
6232
- .smwb-date-picker__action-text {
6233
- font-size: 14px;
6234
- line-height: 19px;
6235
- font-weight: 500;
7057
+ .smwb-tab-groups__separator {
7058
+ position: relative;
7059
+ z-index: 1;
7060
+ box-sizing: border-box;
7061
+ background: var(--smui-primaryContainer);
7062
+ touch-action: none;
7063
+ user-select: none;
7064
+ }
7065
+ .smwb-tab-groups__separator::before {
7066
+ content: "";
7067
+ position: absolute;
7068
+ z-index: 1;
7069
+ }
7070
+ .smwb-tab-groups__separator--vertical {
7071
+ border-left: thin solid var(--smui-primaryColor);
7072
+ border-right: thin solid var(--smui-primaryColor);
7073
+ cursor: col-resize;
7074
+ }
7075
+ .smwb-tab-groups__separator--vertical::before {
7076
+ top: 0;
7077
+ bottom: 0;
7078
+ left: 50%;
7079
+ width: 8px;
7080
+ transform: translateX(-50%);
7081
+ }
7082
+ .smwb-tab-groups__separator--horizontal {
7083
+ border-top: thin solid var(--smui-primaryColor);
7084
+ border-bottom: thin solid var(--smui-primaryColor);
7085
+ cursor: row-resize;
7086
+ }
7087
+ .smwb-tab-groups__separator--horizontal::before {
7088
+ top: 50%;
7089
+ right: 0;
7090
+ left: 0;
7091
+ height: 8px;
7092
+ transform: translateY(-50%);
7093
+ }
7094
+ .smwb-tab-groups__separator:hover,
7095
+ .smwb-tab-groups__separator--dragging {
7096
+ background: var(--smui-primaryColor);
7097
+ }
7098
+ .smwb-tab-groups__separator:focus-visible {
7099
+ outline: 2px solid var(--smui-primaryColor);
7100
+ outline-offset: -2px;
7101
+ }
7102
+ .smwb-tab-groups__drop-target {
7103
+ position: relative;
7104
+ z-index: 2;
7105
+ }
7106
+ .smwb-tab-groups__drop-target::before {
7107
+ content: "";
7108
+ position: absolute;
7109
+ background: color-mix(in srgb, var(--smui-primaryColor) 16%, transparent);
7110
+ outline: 2px solid var(--smui-primaryColor);
7111
+ outline-offset: -2px;
7112
+ }
7113
+ .smwb-tab-groups__drop-target--center::before {
7114
+ inset: 0;
7115
+ }
7116
+ .smwb-tab-groups__drop-target--top::before {
7117
+ top: 0;
7118
+ right: 0;
7119
+ left: 0;
7120
+ height: 50%;
7121
+ }
7122
+ .smwb-tab-groups__drop-target--right::before {
7123
+ top: 0;
7124
+ right: 0;
7125
+ bottom: 0;
7126
+ width: 50%;
7127
+ }
7128
+ .smwb-tab-groups__drop-target--bottom::before {
7129
+ right: 0;
7130
+ bottom: 0;
7131
+ left: 0;
7132
+ height: 50%;
7133
+ }
7134
+ .smwb-tab-groups__drop-target--left::before {
7135
+ top: 0;
7136
+ bottom: 0;
7137
+ left: 0;
7138
+ width: 50%;
7139
+ }
7140
+ .smwb-tab-groups__empty {
7141
+ display: flex;
7142
+ align-items: center;
7143
+ justify-content: center;
7144
+ grid-area: 1 / 1 / -1 / -1;
7145
+ min-width: 0;
7146
+ min-height: 0;
7147
+ }
7148
+ .smwb-tab-groups__panel-end {
7149
+ position: absolute;
7150
+ width: 0;
7151
+ height: 0;
7152
+ overflow: hidden;
7153
+ outline: none;
7154
+ }
7155
+ .smwb-tab-groups__focus-guard {
7156
+ position: absolute;
7157
+ width: 1px;
7158
+ height: 1px;
7159
+ overflow: hidden;
7160
+ clip: rect(0 0 0 0);
7161
+ outline: none;
7162
+ }
7163
+ .smwb-tab-groups__status {
7164
+ position: absolute;
7165
+ width: 1px;
7166
+ height: 1px;
7167
+ margin: -1px;
7168
+ padding: 0;
7169
+ overflow: hidden;
7170
+ clip: rect(0 0 0 0);
7171
+ white-space: nowrap;
7172
+ border: 0;
7173
+ }
7174
+ .smwb-date-picker {
7175
+ border-radius: 4px;
7176
+ background-color: var(--smui-surfaceBackground);
7177
+ box-shadow: rgba(0, 0, 0, 0.2) 0 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px;
7178
+ width: 328px;
7179
+ max-height: 428px;
7180
+ color: var(--smui-primaryTextColor);
7181
+ overflow: hidden;
7182
+ z-index: 1300;
7183
+ }
7184
+ .smwb-date-picker__inner {
7185
+ display: flex;
7186
+ flex-direction: column;
7187
+ }
7188
+ .smwb-date-picker__header {
7189
+ display: flex;
7190
+ justify-content: space-between;
7191
+ padding: 15px 12px;
7192
+ }
7193
+ .smwb-date-picker__action {
7194
+ display: flex;
7195
+ align-items: center;
7196
+ }
7197
+ .smwb-date-picker__action-label {
7198
+ display: flex;
7199
+ align-items: center;
7200
+ justify-content: center;
7201
+ min-width: 80px;
7202
+ user-select: none;
7203
+ cursor: pointer;
7204
+ transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
7205
+ }
7206
+ .smwb-date-picker__action-label > .smwb-icon__wrapper {
7207
+ margin-right: -4px;
7208
+ opacity: 1;
7209
+ transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
7210
+ }
7211
+ .smwb-date-picker__action-label--disabled {
7212
+ color: var(--smui-disabledTextColor);
7213
+ cursor: default;
7214
+ pointer-events: none;
7215
+ }
7216
+ .smwb-date-picker__action-label--disabled > .smwb-icon__wrapper {
7217
+ opacity: 0;
7218
+ visibility: hidden;
7219
+ transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, visibility 0ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
7220
+ }
7221
+ .smwb-date-picker__action-label--active > .smwb-icon__wrapper {
7222
+ transform: rotate(180deg);
7223
+ }
7224
+ .smwb-date-picker__action-text {
7225
+ font-size: 14px;
7226
+ line-height: 19px;
7227
+ font-weight: 500;
6236
7228
  margin-right: 10px;
6237
7229
  text-transform: capitalize;
6238
7230
  }
@@ -6483,15 +7475,45 @@
6483
7475
  .smwb-tree__node__label > .smwb-icon__wrapper {
6484
7476
  flex: none;
6485
7477
  }
6486
- .smwb-tree__node__content {
7478
+ .smwb-tree__node__row {
6487
7479
  display: flex;
6488
7480
  align-items: center;
6489
7481
  gap: 10px;
6490
7482
  min-height: 40px;
7483
+ }
7484
+ .smwb-tree__node__toggle {
7485
+ display: inline-flex;
7486
+ flex: none;
7487
+ align-items: center;
7488
+ justify-content: center;
7489
+ width: 24px;
7490
+ cursor: pointer;
7491
+ user-select: none;
7492
+ }
7493
+ .smwb-tree__node__toggle:empty {
7494
+ cursor: default;
7495
+ }
7496
+ .smwb-tree__node__content {
7497
+ display: flex;
7498
+ align-items: center;
7499
+ flex: 1 1 auto;
7500
+ min-width: 0;
7501
+ align-self: stretch;
6491
7502
  cursor: pointer;
6492
7503
  user-select: none;
7504
+ border-radius: 4px;
7505
+ }
7506
+ .smwb-tree__node__content:focus-visible {
7507
+ outline: 2px solid var(--smui-primaryColor);
7508
+ outline-offset: -2px;
7509
+ }
7510
+ .smwb-tree__node__actions {
7511
+ display: inline-flex;
7512
+ flex: none;
7513
+ align-items: center;
7514
+ gap: 4px;
6493
7515
  }
6494
- .smwb-tree__node_selected > .smwb-tree__node__content {
7516
+ .smwb-tree__node_selected > .smwb-tree__node__row {
6495
7517
  background-color: var(--smui-onSurfaceHover);
6496
7518
  border-radius: 4px;
6497
7519
  }
@@ -6851,10 +7873,51 @@
6851
7873
  display: inline-flex;
6852
7874
  flex-direction: row;
6853
7875
  align-items: center;
7876
+ isolation: isolate;
6854
7877
  }
6855
7878
  .smwb-avatar-group > :not(:first-child) {
6856
7879
  margin-left: -8px;
6857
7880
  }
7881
+ .smwb-avatar-group > :nth-child(1) {
7882
+ z-index: 12;
7883
+ }
7884
+ .smwb-avatar-group > :nth-child(2) {
7885
+ z-index: 11;
7886
+ }
7887
+ .smwb-avatar-group > :nth-child(3) {
7888
+ z-index: 10;
7889
+ }
7890
+ .smwb-avatar-group > :nth-child(4) {
7891
+ z-index: 9;
7892
+ }
7893
+ .smwb-avatar-group > :nth-child(5) {
7894
+ z-index: 8;
7895
+ }
7896
+ .smwb-avatar-group > :nth-child(6) {
7897
+ z-index: 7;
7898
+ }
7899
+ .smwb-avatar-group > :nth-child(7) {
7900
+ z-index: 6;
7901
+ }
7902
+ .smwb-avatar-group > :nth-child(8) {
7903
+ z-index: 5;
7904
+ }
7905
+ .smwb-avatar-group > :nth-child(9) {
7906
+ z-index: 4;
7907
+ }
7908
+ .smwb-avatar-group > :nth-child(10) {
7909
+ z-index: 3;
7910
+ }
7911
+ .smwb-avatar-group > :nth-child(11) {
7912
+ z-index: 2;
7913
+ }
7914
+ .smwb-avatar-group > :nth-child(12) {
7915
+ z-index: 1;
7916
+ }
7917
+ .smwb-avatar-group > :focus-visible,
7918
+ .smwb-avatar-group > :has(:focus-visible) {
7919
+ z-index: 13;
7920
+ }
6858
7921
  .smwb-avatar-group .smwb-avatar {
6859
7922
  border: 2px solid var(--smui-surfaceBackground);
6860
7923
  box-sizing: content-box;
@@ -6877,7 +7940,7 @@
6877
7940
  color: inherit;
6878
7941
  text-decoration: none;
6879
7942
  }
6880
- .smwb-person-chip__avatar {
7943
+ .smwb-avatar.smwb-person-chip__avatar {
6881
7944
  flex-shrink: 0;
6882
7945
  color: #fff;
6883
7946
  }
@@ -7126,14 +8189,23 @@
7126
8189
  }
7127
8190
  .smwb-rating {
7128
8191
  display: inline-flex;
7129
- align-items: center;
7130
- gap: 2px;
8192
+ flex-direction: column;
8193
+ align-items: flex-start;
7131
8194
  color: var(--smui-primaryColor);
7132
8195
  }
7133
8196
  .smwb-rating_disabled {
7134
8197
  opacity: 0.38;
7135
8198
  pointer-events: none;
7136
8199
  }
8200
+ .smwb-rating__control {
8201
+ display: inline-flex;
8202
+ align-items: center;
8203
+ gap: 2px;
8204
+ }
8205
+ .smwb-rating__control:focus-visible {
8206
+ outline: 2px solid var(--smui-primaryColor);
8207
+ outline-offset: 2px;
8208
+ }
7137
8209
  .smwb-rating__item {
7138
8210
  position: relative;
7139
8211
  display: inline-flex;
@@ -7280,43 +8352,567 @@
7280
8352
  --smwb-chart-series-6: #f27c3c;
7281
8353
  --smwb-chart-series-7: #a8b0bc;
7282
8354
  }
7283
- .smwb-stepper {
7284
- display: flex;
8355
+ .smwb-dag-view {
8356
+ --smwb-dag-view-node-bg: var(--smui-surfaceBackground);
8357
+ --smwb-dag-view-node-border: var(--smui-outlineColor);
8358
+ --smwb-dag-view-edge-color: var(--smui-outlineColor);
8359
+ --smwb-dag-view-edge-active-color: var(--smui-primaryColor);
8360
+ --smwb-dag-view-selected-ring: var(--smui-primaryColor);
8361
+ --smwb-dag-view-status-idle: var(--smui-outlineColor);
8362
+ --smwb-dag-view-status-pending: var(--smui-onSurfaceVariant);
8363
+ --smwb-dag-view-status-running: var(--smui-infoColor);
8364
+ --smwb-dag-view-status-success: var(--smui-successColor);
8365
+ --smwb-dag-view-status-warning: var(--smui-warningColor);
8366
+ --smwb-dag-view-status-error: var(--smui-errorColor);
8367
+ --smwb-dag-view-status-skipped: var(--smui-disabledTextColor);
8368
+ --smwb-dag-view-dim-opacity: 0.35;
8369
+ position: relative;
7285
8370
  width: 100%;
8371
+ height: 480px;
8372
+ min-width: 0;
8373
+ box-sizing: border-box;
8374
+ overflow: hidden;
8375
+ overflow: clip;
8376
+ border: 1px solid var(--smui-dividerColor);
8377
+ border-radius: 12px;
8378
+ background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 2%, var(--smui-surfaceBackground));
8379
+ color: var(--smui-onSurfaceColor);
8380
+ touch-action: none;
8381
+ overscroll-behavior: contain;
8382
+ user-select: none;
8383
+ -webkit-user-select: none;
8384
+ cursor: grab;
7286
8385
  }
7287
- .smwb-stepper_horizontal {
7288
- flex-direction: row;
7289
- align-items: center;
8386
+ .smwb-dag-view[data-interacting] {
8387
+ cursor: grabbing;
7290
8388
  }
7291
- .smwb-stepper_vertical {
7292
- flex-direction: column;
7293
- align-items: stretch;
8389
+ .smwb-dag-view__world {
8390
+ position: absolute;
8391
+ top: 0;
8392
+ left: 0;
8393
+ transform-origin: 0 0;
7294
8394
  }
7295
- .smwb-stepper_vertical .smwb-stepper__step {
7296
- flex-direction: row;
7297
- flex: 0 0 auto;
7298
- align-items: flex-start;
7299
- gap: 8px;
7300
- min-width: 0;
7301
- text-align: start;
8395
+ .smwb-dag-view[data-interacting] .smwb-dag-view__world {
8396
+ will-change: transform;
7302
8397
  }
7303
- .smwb-stepper_vertical .smwb-stepper__text {
7304
- align-items: flex-start;
8398
+ .smwb-dag-view__edges {
8399
+ position: absolute;
8400
+ top: 0;
8401
+ left: 0;
8402
+ overflow: visible;
8403
+ pointer-events: none;
7305
8404
  }
7306
- .smwb-stepper_vertical .smwb-stepper__connector {
7307
- width: 1px;
7308
- height: auto;
7309
- min-width: 0;
7310
- min-height: 24px;
7311
- margin: 4px 0 4px 12px;
7312
- background-color: var(--smui-dividerColor);
7313
- flex: 0 0 auto;
8405
+ .smwb-dag-view__edge {
8406
+ fill: none;
8407
+ stroke: var(--smwb-dag-view-edge-color);
8408
+ stroke-width: 1.5px;
8409
+ transition: stroke 0.12s, opacity 0.12s;
7314
8410
  }
7315
- .smwb-stepper__step {
8411
+ .smwb-dag-view__edge--active {
8412
+ stroke: var(--smwb-dag-view-edge-active-color);
8413
+ stroke-width: 2.5px;
8414
+ }
8415
+ .smwb-dag-view__edge--reversed {
8416
+ stroke-dasharray: 6 4;
8417
+ }
8418
+ .smwb-dag-view__edge--dimmed {
8419
+ opacity: var(--smwb-dag-view-dim-opacity);
8420
+ }
8421
+ .smwb-dag-view__arrow {
8422
+ fill: var(--smwb-dag-view-edge-color);
8423
+ }
8424
+ .smwb-dag-view__arrow--active {
8425
+ fill: var(--smwb-dag-view-edge-active-color);
8426
+ }
8427
+ .smwb-dag-view__node {
8428
+ --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-idle));
8429
+ position: absolute;
8430
+ box-sizing: border-box;
7316
8431
  display: flex;
7317
8432
  align-items: center;
7318
8433
  gap: 8px;
7319
- flex-shrink: 0;
8434
+ padding: 0 12px 0 10px;
8435
+ border: 1px solid var(--smwb-dag-view-node-border);
8436
+ border-left: 4px solid var(--smwb-dag-view-accent);
8437
+ border-radius: 8px;
8438
+ background-color: var(--smwb-dag-view-node-bg);
8439
+ color: var(--smui-onSurfaceColor);
8440
+ font-size: 0.875rem;
8441
+ line-height: 1.3;
8442
+ overflow: hidden;
8443
+ contain: layout paint;
8444
+ cursor: pointer;
8445
+ transition: box-shadow 0.12s, border-color 0.12s, opacity 0.12s;
8446
+ }
8447
+ .smwb-dag-view__node[data-status="pending"] {
8448
+ --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-pending));
8449
+ }
8450
+ .smwb-dag-view__node[data-status="running"] {
8451
+ --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-running));
8452
+ }
8453
+ .smwb-dag-view__node[data-status="success"] {
8454
+ --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-success));
8455
+ }
8456
+ .smwb-dag-view__node[data-status="warning"] {
8457
+ --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-warning));
8458
+ }
8459
+ .smwb-dag-view__node[data-status="error"] {
8460
+ --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-error));
8461
+ }
8462
+ .smwb-dag-view__node[data-status="skipped"] {
8463
+ --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-skipped));
8464
+ }
8465
+ .smwb-dag-view__node:hover {
8466
+ border-color: color-mix(in srgb, var(--smwb-dag-view-edge-active-color) 45%, var(--smwb-dag-view-node-border));
8467
+ border-left-color: var(--smwb-dag-view-accent);
8468
+ }
8469
+ .smwb-dag-view__node:focus-visible {
8470
+ outline: 2px solid var(--smui-primaryColor);
8471
+ outline-offset: 2px;
8472
+ }
8473
+ .smwb-dag-view__node--selected {
8474
+ box-shadow: 0 0 0 2px var(--smwb-dag-view-selected-ring);
8475
+ }
8476
+ .smwb-dag-view__node--upstream,
8477
+ .smwb-dag-view__node--downstream {
8478
+ border-color: var(--smwb-dag-view-edge-active-color);
8479
+ border-left-color: var(--smwb-dag-view-accent);
8480
+ }
8481
+ .smwb-dag-view__node--dimmed {
8482
+ opacity: var(--smwb-dag-view-dim-opacity);
8483
+ }
8484
+ .smwb-dag-view__node--disabled {
8485
+ cursor: default;
8486
+ color: var(--smui-disabledTextColor);
8487
+ }
8488
+ .smwb-dag-view__dot {
8489
+ flex-shrink: 0;
8490
+ width: 8px;
8491
+ height: 8px;
8492
+ border-radius: 50%;
8493
+ background-color: var(--smwb-dag-view-accent);
8494
+ }
8495
+ .smwb-dag-view__label {
8496
+ flex: 1 1 auto;
8497
+ min-width: 0;
8498
+ overflow: hidden;
8499
+ font-weight: 500;
8500
+ text-overflow: ellipsis;
8501
+ white-space: nowrap;
8502
+ }
8503
+ .smwb-dag-view__status {
8504
+ flex-shrink: 0;
8505
+ font-size: 0.75rem;
8506
+ color: var(--smui-onSurfaceVariant);
8507
+ }
8508
+ .smwb-dag-view[data-zoom="far"] .smwb-dag-view__status,
8509
+ .smwb-dag-view[data-zoom="far"] .smwb-dag-view__detail {
8510
+ display: none;
8511
+ }
8512
+ .smwb-dag-view__summary {
8513
+ position: absolute;
8514
+ width: 1px;
8515
+ height: 1px;
8516
+ margin: -1px;
8517
+ padding: 0;
8518
+ overflow: hidden;
8519
+ clip: rect(0 0 0 0);
8520
+ white-space: nowrap;
8521
+ border: 0;
8522
+ }
8523
+ .smwb-dag-view__controls {
8524
+ position: absolute;
8525
+ right: 8px;
8526
+ bottom: 8px;
8527
+ display: flex;
8528
+ flex-direction: column;
8529
+ gap: 4px;
8530
+ cursor: default;
8531
+ }
8532
+ .smwb-dag-view__control {
8533
+ display: inline-flex;
8534
+ align-items: center;
8535
+ justify-content: center;
8536
+ width: 32px;
8537
+ height: 32px;
8538
+ padding: 0;
8539
+ border: 1px solid var(--smui-dividerColor);
8540
+ border-radius: 8px;
8541
+ background-color: var(--smui-surfaceBackground);
8542
+ color: var(--smui-onSurfaceVariant);
8543
+ cursor: pointer;
8544
+ }
8545
+ .smwb-dag-view__control svg {
8546
+ width: 18px;
8547
+ height: 18px;
8548
+ fill: none;
8549
+ stroke: currentColor;
8550
+ stroke-width: 2;
8551
+ stroke-linecap: round;
8552
+ stroke-linejoin: round;
8553
+ }
8554
+ .smwb-dag-view__control:hover {
8555
+ background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 8%, var(--smui-surfaceBackground));
8556
+ color: var(--smui-onSurfaceColor);
8557
+ }
8558
+ .smwb-dag-view__control:focus-visible {
8559
+ outline: 2px solid var(--smui-primaryColor);
8560
+ outline-offset: 2px;
8561
+ }
8562
+ @media (prefers-reduced-motion: no-preference) {
8563
+ .smwb-dag-view__node[data-status="running"] .smwb-dag-view__dot {
8564
+ animation: smwb-dag-view-pulse 1.4s ease-in-out infinite;
8565
+ }
8566
+ }
8567
+ @keyframes smwb-dag-view-pulse {
8568
+ 50% {
8569
+ opacity: 0.35;
8570
+ }
8571
+ }
8572
+ .smwb-swimlanes {
8573
+ position: relative;
8574
+ box-sizing: border-box;
8575
+ width: 100%;
8576
+ height: 480px;
8577
+ min-width: 0;
8578
+ overflow: auto;
8579
+ overscroll-behavior: contain;
8580
+ border: 1px solid var(--smui-dividerColor);
8581
+ border-radius: 12px;
8582
+ background-color: var(--smui-surfaceBackground);
8583
+ color: var(--smui-onSurfaceColor);
8584
+ }
8585
+ .smwb-swimlanes_empty {
8586
+ display: grid;
8587
+ place-items: center;
8588
+ }
8589
+ .smwb-swimlanes__empty {
8590
+ padding: 32px 16px;
8591
+ color: var(--smui-onSurfaceVariant);
8592
+ text-align: center;
8593
+ }
8594
+ .smwb-swimlanes__sizer {
8595
+ position: relative;
8596
+ min-width: calc(var(--smwb-swimlanes-header-width, 240px) + var(--smwb-swimlanes-content-min-width, 0px));
8597
+ }
8598
+ .smwb-swimlanes__row {
8599
+ --smwb-swimlanes-tint: transparent;
8600
+ position: absolute;
8601
+ right: 0;
8602
+ left: 0;
8603
+ display: grid;
8604
+ grid-template-columns: var(--smwb-swimlanes-header-width, 240px) minmax(0, 1fr);
8605
+ box-sizing: border-box;
8606
+ height: var(--smwb-swimlanes-row-height);
8607
+ border-bottom: 1px solid var(--smui-dividerColor);
8608
+ }
8609
+ .smwb-swimlanes__row:where(:hover) {
8610
+ --smwb-swimlanes-tint: var(--smui-onSurfaceHover);
8611
+ }
8612
+ .smwb-swimlanes__row_selected {
8613
+ --smwb-swimlanes-tint: color-mix(in srgb, var(--smui-primaryColor) 12%, transparent);
8614
+ }
8615
+ .smwb-swimlanes__row_disabled {
8616
+ --smwb-swimlanes-tint: transparent;
8617
+ color: var(--smui-disabledTextColor);
8618
+ }
8619
+ .smwb-swimlanes__header,
8620
+ .smwb-swimlanes__content {
8621
+ display: flex;
8622
+ align-items: center;
8623
+ min-width: 0;
8624
+ padding: 8px 12px;
8625
+ overflow: hidden;
8626
+ }
8627
+ .smwb-swimlanes__header {
8628
+ position: sticky;
8629
+ inset-inline-start: 0;
8630
+ z-index: 1;
8631
+ background: linear-gradient(var(--smwb-swimlanes-tint), var(--smwb-swimlanes-tint)), var(--smui-surfaceBackground);
8632
+ box-shadow: inset -1px 0 0 var(--smui-dividerColor);
8633
+ }
8634
+ .smwb-swimlanes__row_selected .smwb-swimlanes__header {
8635
+ box-shadow: inset 3px 0 0 var(--smui-primaryColor), inset -1px 0 0 var(--smui-dividerColor);
8636
+ }
8637
+ .smwb-swimlanes__content {
8638
+ background-color: var(--smwb-swimlanes-tint);
8639
+ }
8640
+ .smwb-swimlanes__header:focus-visible,
8641
+ .smwb-swimlanes__content:focus-visible {
8642
+ outline: 2px solid var(--smui-primaryColor);
8643
+ outline-offset: -2px;
8644
+ }
8645
+ @media (forced-colors: active) {
8646
+ .smwb-swimlanes__header {
8647
+ background: Canvas;
8648
+ }
8649
+ .smwb-swimlanes__row_selected .smwb-swimlanes__header:not(:focus-visible),
8650
+ .smwb-swimlanes__row_selected .smwb-swimlanes__content:not(:focus-visible) {
8651
+ outline: 2px solid Highlight;
8652
+ outline-offset: -2px;
8653
+ }
8654
+ }
8655
+ .smwb-composer {
8656
+ position: relative;
8657
+ display: grid;
8658
+ grid-template-columns: auto minmax(0, 1fr) auto auto;
8659
+ align-items: center;
8660
+ box-sizing: border-box;
8661
+ width: 100%;
8662
+ min-width: 0;
8663
+ padding: 8px;
8664
+ border: 1px solid var(--smui-outlineColor);
8665
+ border-radius: 12px;
8666
+ background-color: var(--smui-surfaceBackground);
8667
+ color: var(--smui-onSurfaceColor);
8668
+ }
8669
+ .smwb-composer__attachments {
8670
+ grid-area: attachments;
8671
+ min-width: 0;
8672
+ margin-bottom: 4px;
8673
+ }
8674
+ .smwb-composer__field {
8675
+ grid-area: field;
8676
+ display: grid;
8677
+ min-width: 0;
8678
+ }
8679
+ .smwb-composer__field::after {
8680
+ box-sizing: border-box;
8681
+ margin: 0;
8682
+ border: 0;
8683
+ padding: 6px 8px;
8684
+ font: inherit;
8685
+ letter-spacing: inherit;
8686
+ line-height: 1.5rem;
8687
+ overflow-wrap: anywhere;
8688
+ min-height: calc(var(--smwb-composer-min-rows, 1) * 1.5rem + 2 * 6px);
8689
+ max-height: calc(var(--smwb-composer-max-rows, 8) * 1.5rem + 2 * 6px);
8690
+ content: attr(data-value) " ";
8691
+ grid-area: 1 / 1;
8692
+ visibility: hidden;
8693
+ pointer-events: none;
8694
+ white-space: pre-wrap;
8695
+ overflow: hidden;
8696
+ }
8697
+ .smwb-composer__input {
8698
+ box-sizing: border-box;
8699
+ margin: 0;
8700
+ border: 0;
8701
+ padding: 6px 8px;
8702
+ font: inherit;
8703
+ letter-spacing: inherit;
8704
+ line-height: 1.5rem;
8705
+ overflow-wrap: anywhere;
8706
+ min-height: calc(var(--smwb-composer-min-rows, 1) * 1.5rem + 2 * 6px);
8707
+ max-height: calc(var(--smwb-composer-max-rows, 8) * 1.5rem + 2 * 6px);
8708
+ grid-area: 1 / 1;
8709
+ display: block;
8710
+ width: 100%;
8711
+ resize: none;
8712
+ overflow-y: auto;
8713
+ outline: 0;
8714
+ background: transparent;
8715
+ color: var(--smui-onSurfaceColor);
8716
+ caret-color: var(--smui-onSurfaceColor);
8717
+ }
8718
+ .smwb-composer__input::placeholder {
8719
+ color: var(--smui-onSurfaceVariant);
8720
+ opacity: 1;
8721
+ }
8722
+ .smwb-composer__icon-button {
8723
+ display: inline-flex;
8724
+ align-items: center;
8725
+ justify-content: center;
8726
+ box-sizing: border-box;
8727
+ flex: none;
8728
+ width: 36px;
8729
+ height: 36px;
8730
+ margin: 0;
8731
+ padding: 0;
8732
+ border: 0;
8733
+ border-radius: 50%;
8734
+ background-color: transparent;
8735
+ color: var(--smui-onSurfaceColor);
8736
+ font: inherit;
8737
+ cursor: pointer;
8738
+ user-select: none;
8739
+ -webkit-user-select: none;
8740
+ transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
8741
+ }
8742
+ .smwb-composer__icon-button:hover:not(:disabled):not([aria-disabled="true"]) {
8743
+ background-color: var(--smui-onSurfaceHover);
8744
+ }
8745
+ .smwb-composer__icon-button:active:not(:disabled):not([aria-disabled="true"]) {
8746
+ background-color: var(--smui-onSurfaceActive);
8747
+ }
8748
+ .smwb-composer__icon-button:focus-visible {
8749
+ outline: 2px solid var(--smui-primaryColor);
8750
+ outline-offset: 2px;
8751
+ }
8752
+ .smwb-composer__icon-button:disabled {
8753
+ cursor: default;
8754
+ pointer-events: none;
8755
+ }
8756
+ .smwb-composer__attach {
8757
+ grid-area: attach;
8758
+ color: var(--smui-onSurfaceVariant);
8759
+ }
8760
+ .smwb-composer__toolbar {
8761
+ grid-area: toolbar;
8762
+ display: flex;
8763
+ flex-wrap: wrap;
8764
+ align-items: center;
8765
+ gap: 4px;
8766
+ min-width: 0;
8767
+ }
8768
+ .smwb-composer__attach ~ .smwb-composer__toolbar {
8769
+ margin-inline-start: 4px;
8770
+ }
8771
+ .smwb-composer__counter {
8772
+ grid-area: counter;
8773
+ margin-inline-start: 4px;
8774
+ color: var(--smui-onSurfaceVariant);
8775
+ font-size: 0.75rem;
8776
+ line-height: 1rem;
8777
+ font-variant-numeric: tabular-nums;
8778
+ white-space: nowrap;
8779
+ }
8780
+ .smwb-composer__counter_error {
8781
+ color: var(--smui-errorColor);
8782
+ font-weight: 500;
8783
+ }
8784
+ .smwb-composer__action {
8785
+ grid-area: action;
8786
+ margin-inline-start: 4px;
8787
+ }
8788
+ .smwb-composer__action:not([aria-disabled="true"]):not(:disabled) {
8789
+ background-color: var(--smui-primaryColor);
8790
+ color: var(--smui-onPrimaryColor);
8791
+ }
8792
+ .smwb-composer__action:not([aria-disabled="true"]):not(:disabled):hover {
8793
+ background-color: color-mix(in srgb, var(--smui-onPrimaryColor) 12%, var(--smui-primaryColor));
8794
+ }
8795
+ .smwb-composer__action:not([aria-disabled="true"]):not(:disabled):active {
8796
+ background-color: color-mix(in srgb, var(--smui-onPrimaryColor) 20%, var(--smui-primaryColor));
8797
+ }
8798
+ .smwb-composer__action[aria-disabled="true"],
8799
+ .smwb-composer__action:disabled {
8800
+ background-color: var(--smui-disabledBgColor);
8801
+ color: var(--smui-disabledTextColor);
8802
+ cursor: default;
8803
+ }
8804
+ .smwb-composer__action_stop:not([aria-disabled="true"]):not(:disabled) {
8805
+ background-color: var(--smui-onSurfaceColor);
8806
+ color: var(--smui-surfaceBackground);
8807
+ }
8808
+ .smwb-composer__action_stop:not([aria-disabled="true"]):not(:disabled):hover {
8809
+ background-color: var(--smui-onSurfaceColor);
8810
+ opacity: 0.88;
8811
+ }
8812
+ .smwb-composer__action_stop:not([aria-disabled="true"]):not(:disabled):active {
8813
+ background-color: var(--smui-onSurfaceColor);
8814
+ opacity: 0.76;
8815
+ }
8816
+ .smwb-composer__status {
8817
+ position: absolute;
8818
+ width: 1px;
8819
+ height: 1px;
8820
+ margin: -1px;
8821
+ padding: 0;
8822
+ border: 0;
8823
+ overflow: hidden;
8824
+ clip-path: inset(50%);
8825
+ white-space: nowrap;
8826
+ }
8827
+ .smwb-composer_stacked {
8828
+ grid-template-areas: "attachments attachments attachments attachments" "field field field field" "attach toolbar counter action";
8829
+ }
8830
+ .smwb-composer_stacked .smwb-composer__field {
8831
+ margin-bottom: 4px;
8832
+ }
8833
+ .smwb-composer_stacked .smwb-composer__action {
8834
+ justify-self: end;
8835
+ }
8836
+ .smwb-composer_inline {
8837
+ grid-template-areas: "attachments attachments attachments attachments" "attach field counter action" "toolbar toolbar toolbar toolbar";
8838
+ align-items: end;
8839
+ }
8840
+ .smwb-composer_inline .smwb-composer__toolbar {
8841
+ margin-top: 4px;
8842
+ }
8843
+ .smwb-composer_inline .smwb-composer__counter {
8844
+ align-self: end;
8845
+ padding-bottom: calc((36px - 1rem) / 2);
8846
+ }
8847
+ .smwb-composer_inline .smwb-composer__attach ~ .smwb-composer__toolbar {
8848
+ margin-inline-start: 0;
8849
+ }
8850
+ .smwb-composer_focused {
8851
+ border-color: var(--smui-primaryColor);
8852
+ box-shadow: inset 0 0 0 1px var(--smui-primaryColor);
8853
+ }
8854
+ .smwb-composer_drag-active {
8855
+ border-style: dashed;
8856
+ border-color: var(--smui-primaryColor);
8857
+ background-color: var(--smui-primaryContainer);
8858
+ }
8859
+ .smwb-composer_disabled {
8860
+ opacity: 0.6;
8861
+ cursor: default;
8862
+ }
8863
+ .smwb-composer_over-limit:not(.smwb-composer_focused) {
8864
+ border-color: var(--smui-errorColor);
8865
+ }
8866
+ @media (forced-colors: active) {
8867
+ .smwb-composer_focused {
8868
+ outline: 2px solid Highlight;
8869
+ outline-offset: -2px;
8870
+ }
8871
+ .smwb-composer__action:not([aria-disabled="true"]):not(:disabled) {
8872
+ border: 1px solid ButtonText;
8873
+ }
8874
+ .smwb-composer__action[aria-disabled="true"],
8875
+ .smwb-composer__action:disabled {
8876
+ color: GrayText;
8877
+ }
8878
+ }
8879
+ .smwb-stepper {
8880
+ display: flex;
8881
+ width: 100%;
8882
+ }
8883
+ .smwb-stepper_horizontal {
8884
+ flex-direction: row;
8885
+ align-items: center;
8886
+ }
8887
+ .smwb-stepper_vertical {
8888
+ flex-direction: column;
8889
+ align-items: stretch;
8890
+ }
8891
+ .smwb-stepper_vertical .smwb-stepper__step {
8892
+ flex-direction: row;
8893
+ flex: 0 0 auto;
8894
+ align-items: flex-start;
8895
+ gap: 8px;
8896
+ min-width: 0;
8897
+ text-align: start;
8898
+ }
8899
+ .smwb-stepper_vertical .smwb-stepper__text {
8900
+ align-items: flex-start;
8901
+ }
8902
+ .smwb-stepper_vertical .smwb-stepper__connector {
8903
+ width: 1px;
8904
+ height: auto;
8905
+ min-width: 0;
8906
+ min-height: 24px;
8907
+ margin: 4px 0 4px 12px;
8908
+ background-color: var(--smui-dividerColor);
8909
+ flex: 0 0 auto;
8910
+ }
8911
+ .smwb-stepper__step {
8912
+ display: flex;
8913
+ align-items: center;
8914
+ gap: 8px;
8915
+ flex-shrink: 0;
7320
8916
  color: var(--smui-onSurfaceVariant);
7321
8917
  }
7322
8918
  .smwb-stepper__step_active {
@@ -7787,16 +9383,15 @@
7787
9383
  font-size: 12px;
7788
9384
  font-weight: 600;
7789
9385
  line-height: 1.4;
9386
+ text-transform: var(--smui-font-overline-transform, uppercase);
9387
+ letter-spacing: var(--smui-font-overline-letter-spacing, 0.06em);
7790
9388
  }
7791
9389
  .smwb-typography_button {
7792
9390
  font-size: 14px;
7793
9391
  font-weight: 500;
7794
9392
  line-height: 1.75;
7795
- }
7796
- .smwb-typography_overline,
7797
- .smwb-typography_button {
7798
- text-transform: uppercase;
7799
- letter-spacing: 0.06em;
9393
+ text-transform: var(--smui-font-button-transform, uppercase);
9394
+ letter-spacing: var(--smui-font-button-letter-spacing, 0.06em);
7800
9395
  }
7801
9396
  .smwb-typography_color-primary {
7802
9397
  color: var(--smui-primaryColor);
@@ -8158,10 +9753,14 @@
8158
9753
  background: blue;
8159
9754
  opacity: 1;
8160
9755
  }
9756
+ .smwb-head-cell .smwb-head-cell__actions:has(> .smwb-rt-table--resizer:only-child) {
9757
+ margin-inline-start: 0;
9758
+ }
8161
9759
  @media (hover: hover) {
8162
9760
  .smwb-rt-table--resizer {
8163
9761
  opacity: 0.5;
8164
9762
  }
9763
+ .smwb-head-cell:hover .smwb-rt-table--resizer,
8165
9764
  *:hover > .smwb-rt-table--resizer {
8166
9765
  opacity: 1;
8167
9766
  }
@@ -8519,6 +10118,9 @@
8519
10118
  --smui-space-xl: 20px;
8520
10119
  --smui-space-xxl: 24px;
8521
10120
  --smui-space-xxxl: 32px;
10121
+ --smui-control-h-sm: 32px;
10122
+ --smui-control-h-md: 40px;
10123
+ --smui-control-h-lg: 48px;
8522
10124
  /* Border-radius scale */
8523
10125
  --smui-radius-xs: 2px;
8524
10126
  --smui-radius-sm: 4px;