@flux-ui/components 3.0.0-next.35 → 3.0.0-next.39

package/src/css/component/Pane.module.scss

@@ -40,15 +40,15 @@
     composes: basePaneElement from './base/Pane.module.scss';
 
     display: flex;
-    padding: 21px 21px 0;
+    padding: 18px 18px 0;
     gap: 15px;
 
     &:only-child {
-        padding: 21px;
+        padding: 18px;
     }
 
     &:has(+ .basePaneElement:not(.paneBody)) {
-        padding: 21px;
+        padding: 18px;
     }
 }
 
@@ -80,7 +80,7 @@
 .paneBody {
     composes: basePaneElement from './base/Pane.module.scss';
 
-    padding: 21px;
+    padding: 18px;
 }
 
 .paneBody + .paneBody {
@@ -91,7 +91,7 @@
     composes: basePaneElement from './base/Pane.module.scss';
 
     display: flex;
-    padding: 21px;
+    padding: 18px;
     gap: 9px;
     background: var(--gray-50);
     border-top: 1px solid var(--gray-100);
@@ -129,6 +129,10 @@
         border-radius: inherit;
         z-index: 1;
     }
+}
+
+.paneMediaDefault {
+    composes: paneMedia;
 
     &:first-child {
         margin: -1px;
@@ -149,7 +153,7 @@
 .paneMediaInset {
     composes: paneMedia;
 
-    margin: 21px;
+    margin: 18px;
     border-radius: var(--radius-half);
 
     &:not(:first-child) {
@@ -171,23 +175,6 @@
     object-position: center;
 }
 
-.paneDeck {
-    composes: paneDefault;
-
-    overflow: hidden;
-
-    > .baseAutoGrid {
-        margin-right: -1px;
-        margin-bottom: -1px;
-
-        > .pane {
-            border-top: 0;
-            border-left: 0;
-            border-radius: 0;
-        }
-    }
-}
-
 .paneGroup {
     position: relative;
 }

package/src/css/component/PercentageBar.module.scss

@@ -7,7 +7,7 @@
 .percentageBarSegment {
     height: 12px;
     border-radius: calc(var(--radius) / 3);
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: height, margin, flex-grow;
 
     &:hover {

package/src/css/component/Remove.module.scss

@@ -11,7 +11,7 @@
     justify-content: center;
     background: var(--danger-600);
     border: 3px solid var(--surface);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--danger-25);
     cursor: pointer;
     transition: 300ms var(--swift-out);

package/src/css/component/SegmentedControl.module.scss

@@ -33,6 +33,7 @@
     pointer-events: none;
     transition: 300ms var(--swift-out);
     transition-property: left, width;
+    translate: -1px 0;
 }
 
 .segmentedControlItem {

package/src/css/component/Snackbar.module.scss

@@ -70,7 +70,7 @@
     font-weight: 500;
     outline: 0;
     text-align: center;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, color;
 
     &:hover {

package/src/css/component/Statistic.module.scss

@@ -1,8 +1,8 @@
 .statistic {
-    padding: 21px;
+    padding: 18px;
     flex-basis: 0;
     flex-grow: 1;
-    gap: 21px;
+    gap: 18px;
 }
 
 .statisticChange {

package/src/css/component/Stepper.module.scss

@@ -50,7 +50,7 @@
     justify-content: center;
     background: var(--gray-100);
     border: 0;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground);
     cursor: default;
     font-size: 14px;

package/src/css/component/Tab.module.scss

@@ -26,13 +26,11 @@
     color: var(--foreground);
     cursor: pointer;
     outline: 0;
-    transition: background 180ms var(--swift-out);
+    transition: background var(--transition-default);
     z-index: 1;
 
-    @media (hover: hover) {
-        &:hover {
-            background: var(--surface-stroke);
-        }
+    @include mixin.hover {
+        background: var(--surface-stroke);
     }
 }
 
@@ -58,8 +56,8 @@
     margin-right: -3px;
     padding-left: 3px;
     padding-right: 3px;
-    align-items: flex-end;
-    gap: 30px;
+    align-items: center;
+    gap: 27px;
     overflow: auto;
     scrollbar-width: none;
 
@@ -88,7 +86,7 @@
     cursor: pointer;
     font-weight: 500;
     outline: 0;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: border-color, color;
     white-space: nowrap;
 
@@ -98,15 +96,13 @@
         content: '';
         border-radius: var(--radius);
         pointer-events: none;
-        transition: 180ms var(--swift-out) mixin.focus-ring-transition-properties();
+        transition: var(--transition-default) mixin.focus-ring-transition-properties();
     }
 
     @include mixin.focus-ring-pseudo(before);
 
-    @media (hover: hover) {
-        &:hover {
-            border-color: var(--foreground);
-        }
+    @include mixin.hover {
+        border-color: var(--foreground);
     }
 
     &:disabled,
@@ -140,8 +136,8 @@
 .basePaneStructure > .form > .tabs > .tabBar {
     --tab-padding: 18px;
 
-    padding-left: 21px;
-    padding-right: 21px;
+    padding-left: 18px;
+    padding-right: 18px;
     background: var(--gray-50);
 
     &:first-child {

package/src/css/component/Table.module.scss

@@ -1,3 +1,5 @@
+@use '$flux/css/mixin';
+
 .table {
     composes: basePaneElement from './base/Pane.module.scss';
 
@@ -127,11 +129,11 @@ tfoot .tableCell {
     position: relative;
     background: var(--gray-50);
     box-shadow: 0 0 24px var(--gray-50),
-                0 0 24px var(--gray-50),
-                0 0 24px var(--gray-50),
-                0 0 24px var(--gray-50),
-                0 0 24px var(--gray-50),
-                0 0 24px var(--gray-50);
+    0 0 24px var(--gray-50),
+    0 0 24px var(--gray-50),
+    0 0 24px var(--gray-50),
+    0 0 24px var(--gray-50),
+    0 0 24px var(--gray-50);
     z-index: 2;
 }
 
@@ -171,20 +173,18 @@ tfoot .tableCell {
     cursor: pointer;
     outline: 0;
 
-    @media (hover: hover) {
-        &:hover {
-            background: var(--gray-100);
-            color: var(--foreground);
-        }
+    @include mixin.hover {
+        background: var(--gray-100);
+        color: var(--foreground);
     }
 }
 
 .basePaneStructure > .table .tableCell:first-child .tableCellContent {
-    padding-left: 21px;
+    padding-left: 18px;
 }
 
 .basePaneStructure > .table .tableCell:last-child .tableCellContent {
-    padding-right: 21px;
+    padding-right: 18px;
 }
 
 .basePaneStructure > .table .tableActions {
@@ -192,7 +192,7 @@ tfoot .tableCell {
 }
 
 .basePaneStructure > .table :is(caption) {
-    padding: 12px 21px;
+    padding: 12px 18px;
     border-top: 1px solid var(--gray-100);
 }
 

package/src/css/component/Timeline.module.scss

@@ -17,7 +17,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     outline: 6px solid var(--surface);
 }
 
@@ -42,7 +42,7 @@
     align-items: center;
     justify-content: center;
     background: var(--gray-25);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
 }
 
 .timelineItemPhotoImage {

package/src/css/component/Toolbar.module.scss

@@ -44,12 +44,12 @@
 
     &.isTopEnd,
     &.isBottomEnd {
-        right: 21px;
+        right: 18px;
     }
 
     &.isTopStart,
     &.isBottomStart {
-        left: 21px;
+        left: 18px;
     }
 }
 
@@ -81,5 +81,5 @@
 }
 
 .paneHeader + .toolbarFlat {
-    margin-top: 21px;
+    margin-top: 18px;
 }

package/src/css/component/Tooltip.module.scss

@@ -6,8 +6,8 @@
     max-width: 360px;
     padding: 9px 15px;
     flex-flow: column;
-    background: rgb(from var(--gray-950) r g b / .9);
-    backdrop-filter: blur(6px) saturate(180%);
+    background: var(--overlay-strong);
+    backdrop-filter: blur(3px) saturate(180%);
     border-radius: var(--radius);
     color: var(--gray-25);
     font-size: 14px;
@@ -35,8 +35,7 @@
 }
 
 [dark] .tooltip {
-    background: rgb(0 0 0 / .9);
-    color: white;
+    color: var(--gray-700);
 }
 
 .tooltipAbove {

package/src/css/component/Transition.module.scss

@@ -32,7 +32,7 @@
 
 .fadeTransitionEnterActive,
 .fadeTransitionLeaveActive {
-    transition: opacity 180ms var(--swift-out) !important;
+    transition: opacity var(--transition-default) !important;
 }
 
 .fadeTransitionEnterFrom,

package/src/css/component/TreeView.module.scss

@@ -7,20 +7,9 @@
 }
 
 .treeNode {
-    display: flex;
-    width: 100%;
-    min-height: 36px;
-    padding: 0 8px;
-    align-items: center;
-    border-radius: var(--radius-half);
-    color: var(--foreground);
+    composes: treeNode from './primitive/TreeNode.module.scss';
+
     cursor: pointer;
-    font-size: 14px;
-    gap: 8px;
-    outline: 0;
-    transition: 150ms var(--swift-out);
-    transition-property: background, color;
-    user-select: none;
 
     @include mixin.hover {
         background: var(--surface-hover);
@@ -30,5 +19,3 @@
         background: var(--surface-hover);
     }
 }
-
-@include mixin.tree-node-classes();

package/src/css/component/TreeViewSelect.module.scss

@@ -21,19 +21,7 @@
 }
 
 .treeNode {
-    display: flex;
-    width: 100%;
-    min-height: 36px;
-    padding: 0 8px;
-    align-items: center;
-    border-radius: var(--radius-half);
-    color: var(--foreground);
-    font-size: 14px;
-    gap: 8px;
-    outline: 0;
-    transition: 150ms var(--swift-out);
-    transition-property: background, color;
-    user-select: none;
+    composes: treeNode from './primitive/TreeNode.module.scss';
 
     &.isSelectable,
     &.isExpandable {
@@ -69,5 +57,3 @@
     color: var(--primary-600);
     flex-shrink: 0;
 }
-
-@include mixin.tree-node-classes();

package/src/css/component/base/Button.module.scss

@@ -3,8 +3,6 @@
 @layer flux-base {
     .button {
         display: inline-flex;
-        height: 42px;
-        padding: 0 12px;
         align-items: center;
         flex-grow: 0;
         flex-shrink: 0;
@@ -17,7 +15,7 @@
         cursor: pointer;
         font: inherit;
         text-decoration: none;
-        transition: 180ms var(--swift-out);
+        transition: var(--transition-default);
         transition-property: background, border, box-shadow, color, scale, mixin.focus-ring-transition-properties();
         user-select: none;
 
@@ -64,12 +62,13 @@
     }
 
     .buttonIcon {
+        margin: 1px;
         flex-shrink: 0;
-        font-size: 20px;
+        font-size: 18px;
 
         &:only-child {
-            margin-left: -2px;
-            margin-right: -2px;
+            margin-left: -1px;
+            margin-right: -1px;
         }
     }
 
@@ -85,7 +84,7 @@
         }
     }
 
-    .badge {
+    .button .badge {
         &:first-child {
             margin-left: -6px;
         }

package/src/css/component/base/Effect.module.scss

@@ -31,7 +31,8 @@ $-sparkle-r: .5 * $-sparkle-d;
             $-xs: $-xg + $-sparkle-d * cos($-sparkle-curr-angle);
             $-ys: $-yg + $-sparkle-d * sin($-sparkle-curr-angle);
 
-            $-shadow-list: $-shadow-list, $-xs $-ys 0 $-spread-r hsl(($i + $j) * $-group-base-angle, 100%, 75%);
+            $-hue: ($i + $j) * $-group-base-angle;
+            $-shadow-list: $-shadow-list, $-xs $-ys 0 $-spread-r hsl($-hue, 100%, 75%);
         }
     }
 

package/src/css/component/primitive/Slider.module.scss

@@ -26,7 +26,7 @@
     background: var(--surface);
     background-clip: padding-box;
     border: 1px solid var(--surface-stroke-out);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     box-shadow: var(--shadow-sm);
     cursor: grab;
     outline: 0;
@@ -34,10 +34,8 @@
 
     @include mixin.focus-ring-transition(2px);
 
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--surface-hover);
-        }
+    @include mixin.hover {
+        background-color: var(--surface-hover);
     }
 
     &.isDisabled {
@@ -56,8 +54,9 @@
     position: relative;
     height: 12px;
     background: var(--gray-50);
+    background-clip: padding-box;
     border-radius: var(--radius-half);
-    box-shadow: inset 0 0 0 1px var(--surface-stroke);
+    box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
 }
 
 .sliderTrackValue {
@@ -80,7 +79,7 @@
     height: 9px;
     width: 2px;
     background: var(--gray-300);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground-prominent);
     font-size: 10px;
     font-weight: 600;

package/src/css/component/primitive/TreeNode.module.scss

@@ -0,0 +1,19 @@
+@use '$flux/css/mixin';
+
+.treeNode {
+    display: flex;
+    width: 100%;
+    min-height: 36px;
+    padding: 0 8px;
+    align-items: center;
+    border-radius: var(--radius-half);
+    color: var(--foreground);
+    font-size: 14px;
+    gap: 8px;
+    outline: 0;
+    transition: 150ms var(--swift-out);
+    transition-property: background, color;
+    user-select: none;
+}
+
+@include mixin.tree-node-classes();

package/src/css/mixin/button-active.scss

@@ -0,0 +1,6 @@
+@mixin button-active($background) {
+    &:active {
+        background: $background;
+        scale: .9875;
+    }
+}

package/src/css/mixin/focus-ring.scss

@@ -45,7 +45,7 @@
 }
 
 @mixin focus-ring-transition($offset: 0, $within: false) {
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: focus-ring-transition-properties();
 
     @include focus-ring($offset, $within);

package/src/css/mixin/index.scss

@@ -1,4 +1,5 @@
 @forward 'breakpoints';
+@forward 'button-active';
 @forward 'focus-ring';
 @forward 'hover';
 @forward 'tree-node';

package/src/css/typography.scss

@@ -1,6 +1,6 @@
 @layer flux-base {
     h1, h2, h3, h4, h5, h6 {
-        font-weight: 700;
+        font-weight: 600;
         line-height: 1.6;
         text-wrap: balance;
     }
@@ -33,9 +33,10 @@
     }
 
     a:not([class]), a[class=""] {
+        align-self: start;
         color: var(--primary-600);
         text-decoration: underline;
-        text-decoration-color: var(--primary-400);
+        text-decoration-color: currentColor;
         text-decoration-skip: auto;
         text-decoration-thickness: 1px;
         text-underline-offset: 2px;

package/src/css/variables.scss

@@ -174,9 +174,12 @@
     --font-size: 15px;
     --radius: 12px;
     --radius-double: 24px;
+    --radius-full: 9999px;
     --radius-half: 6px;
 
-    --background: var(--gray-50);
+    --transition-default: 180ms var(--swift-out);
+
+    --background: var(--gray-25);
     --foreground: var(--gray-700);
     --foreground-prominent: var(--gray-900);
     --foreground-secondary: var(--gray-500);
@@ -190,13 +193,15 @@
     --surface-active: var(--gray-100);
     --surface-disabled: var(--gray-100);
 
-    --overlay: rgb(from var(--gray-950) r g b / .3);
+    --overlay: rgb(from var(--gray-950) r g b / .5);
     --overlay-secondary: rgb(from var(--gray-950) r g b / .15);
+    --overlay-strong: rgb(from var(--gray-950) r g b / .9);
 }
 
 @mixin defaults-dark {
     --overlay: rgb(0 0 0 / .6);
     --overlay-secondary: rgb(0 0 0 / .4);
+    --overlay-strong: rgb(0 0 0 / .9);
 }
 
 @mixin shadow-light {

package/src/data/di.ts

@@ -1,6 +1,7 @@
 import type { FluxFilterState, FluxFilterValue } from '@flux-ui/types';
 import type { ComponentInternalInstance, InjectionKey, Ref } from 'vue';
 
+export const FluxAdaptiveGroupInjectionKey: InjectionKey<FluxAdaptiveGroupInjection> = Symbol();
 export const FluxDisabledInjectionKey: InjectionKey<Ref<boolean>> = Symbol();
 export const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandableGroupInjection> = Symbol();
 export const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection> = Symbol();
@@ -9,6 +10,18 @@ export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = S
 export const FluxTableInjectionKey: InjectionKey<FluxTableInjection> = Symbol();
 export const FluxTooltipInjectionKey: InjectionKey<FluxTooltipInjection> = Symbol();
 
+export type FluxAdaptiveGroupChild = {
+    readonly priority: Ref<number>;
+    readonly desiredDefaultWidth: Ref<number>;
+    readonly desiredFallbackWidth: Ref<number>;
+    readonly isDefaultVisible: Ref<boolean>;
+};
+
+export type FluxAdaptiveGroupInjection = {
+    register(uid: number, child: FluxAdaptiveGroupChild): void;
+    unregister(uid: number): void;
+};
+
 export type FluxExpandableGroupInjection = {
     closeAll(): void;
     register(uid: number, expandable: ComponentInternalInstance): void;