@floegence/floe-webapp-core 0.90.1 → 0.90.2
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/dist/components/ui/FloatingWindow.js +37 -37
- package/dist/components/ui/Tabs.js +159 -162
- package/dist/components/ui/tabReorder.d.ts +1 -3
- package/dist/components/ui/tabReorder.js +83 -45
- package/dist/styles.css +1 -1
- package/dist/surface.css +36 -2
- package/package.json +1 -1
package/dist/surface.css
CHANGED
|
@@ -368,11 +368,11 @@
|
|
|
368
368
|
/* A selected tab is a surface sitting proud of its rail: solid fill, the
|
|
369
369
|
* language's hairline and the first elevation step. This is the one place a
|
|
370
370
|
* small control is allowed relief, because the rail sits directly behind it. */
|
|
371
|
-
& [data-floe-surface-part='tab']:not([aria-selected='true']):hover:not(:has(:disabled)) {
|
|
371
|
+
& [data-floe-surface-part='tab']:not([aria-selected='true']):not([data-floe-tab-motion='dragging']):hover:not(:has(:disabled)) {
|
|
372
372
|
background-color: var(--floe-state-hover);
|
|
373
373
|
color: var(--foreground);
|
|
374
374
|
}
|
|
375
|
-
& [data-floe-surface-part='tab'][aria-selected='true'] {
|
|
375
|
+
& [data-floe-surface-part='tab'][aria-selected='true']:not([data-floe-tab-motion='dragging']) {
|
|
376
376
|
background-color: var(--card);
|
|
377
377
|
color: var(--foreground);
|
|
378
378
|
border-color: var(--floe-line);
|
|
@@ -654,3 +654,37 @@
|
|
|
654
654
|
outline-offset: 3px;
|
|
655
655
|
}
|
|
656
656
|
}
|
|
657
|
+
|
|
658
|
+
/* Reordering uses the real tab face, never a second label or a hard insertion bar.
|
|
659
|
+
* Only transforms animate; selection and the retained document stay immediate. */
|
|
660
|
+
[data-floe-surface-part='tab'] {
|
|
661
|
+
outline: none;
|
|
662
|
+
}
|
|
663
|
+
[data-floe-surface-part='tab']:focus-visible {
|
|
664
|
+
box-shadow: inset 0 0 0 1.5px var(--ring), var(--floe-surface-decoration);
|
|
665
|
+
}
|
|
666
|
+
[data-floe-surface-part='tab'][data-floe-tab-motion] {
|
|
667
|
+
transform: translate3d(var(--floe-tab-offset, 0px), 0, 0);
|
|
668
|
+
will-change: transform;
|
|
669
|
+
transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
670
|
+
}
|
|
671
|
+
[data-floe-surface-part='tab'][data-floe-tab-motion='dragging'] {
|
|
672
|
+
z-index: 2;
|
|
673
|
+
cursor: grabbing;
|
|
674
|
+
transition: none;
|
|
675
|
+
background-color: var(--card);
|
|
676
|
+
color: var(--foreground);
|
|
677
|
+
border-color: transparent;
|
|
678
|
+
box-shadow: 0 2px 6px color-mix(in srgb, var(--foreground) 14%, transparent);
|
|
679
|
+
}
|
|
680
|
+
[data-floe-surface-part='tab'][data-floe-tab-motion='settling'] {
|
|
681
|
+
z-index: 1;
|
|
682
|
+
transition: none;
|
|
683
|
+
}
|
|
684
|
+
@media (prefers-reduced-motion: reduce) {
|
|
685
|
+
[data-floe-surface-part='tab'][data-floe-tab-motion] { transition: none; }
|
|
686
|
+
}
|
|
687
|
+
@media (forced-colors: active) {
|
|
688
|
+
[data-floe-surface-part='tab']:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
|
|
689
|
+
[data-floe-surface-part='tab'][data-floe-tab-motion='dragging'] { border-color: Highlight; }
|
|
690
|
+
}
|