@flux-ui/components 3.0.0-next.34 → 3.0.0-next.38

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

@@ -157,14 +157,13 @@
     height: 42px;
     width: 100%;
     padding: 0 12px;
-    align-self: start;
     background: var(--surface);
     background-clip: padding-box;
     border: 1px solid var(--surface-stroke);
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     color: var(--foreground);
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, border-color, mixin.focus-ring-transition-properties();
 
     &::placeholder {
@@ -172,10 +171,22 @@
     }
 
     &.isSecondary {
-        background: var(--background);
+        background: var(--gray-100);
         border-color: transparent;
         box-shadow: none;
     }
+
+    &.isCondensed {
+        height: 34px;
+    }
+
+    &.isInvalid {
+        border-color: var(--danger-500);
+    }
+}
+
+.form .formInput {
+    align-self: start;
 }
 
 .formInputDisabled {
@@ -302,7 +313,7 @@
 }
 
 .formInputGroup {
-    composes: formInput;
+    composes: formInputEnabled;
 
     display: flex;
     padding: 0;
@@ -478,13 +489,14 @@
     @include mixin.focus-ring-remove;
 
     .formInputIcon {
+        right: 0;
         margin: 15px;
         font-size: 18px;
     }
 
     .formInputNative {
-        padding-left: 21px;
-        padding-right: 21px;
+        padding-left: 18px;
+        padding-right: 18px;
     }
 }
 
@@ -576,6 +588,32 @@
     flex-shrink: 0;
     gap: 12px;
     outline: 0;
+
+    &.isDisabled {
+        cursor: not-allowed;
+
+        .checkboxElement {
+            background: var(--surface-disabled);
+            border-color: var(--surface-stroke);
+            color: var(--foreground-secondary);
+        }
+
+        .checkboxLabel {
+            color: var(--foreground-secondary);
+        }
+    }
+
+    &.isReadonly {
+        cursor: default;
+
+        .checkboxNative {
+            pointer-events: none;
+        }
+    }
+
+    &.isInvalid .checkboxElement {
+        border-color: var(--danger-500);
+    }
 }
 
 .checkboxElement,
@@ -653,7 +691,7 @@
     border-radius: var(--radius);
     box-shadow: var(--shadow-px);
     overflow: hidden;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: border-color, mixin.focus-ring-transition-properties();
 
     @include mixin.focus-ring(2px, true);
@@ -736,7 +774,7 @@
     line-height: 3.3ch;
     outline: 0;
     text-align: center;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: border-color, mixin.focus-ring-transition-properties();
 }
 
@@ -769,7 +807,7 @@
     flex: 0 0 auto;
     background: var(--gray-50);
     border: 1px solid var(--gray-200);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     contain: paint;
 
     &.isChecked {
@@ -804,6 +842,14 @@
         cursor: not-allowed;
         opacity: .6;
     }
+
+    &.isReadonly .toggleInput {
+        pointer-events: none;
+    }
+
+    &.isInvalid {
+        border-color: var(--danger-500);
+    }
 }
 
 .toggleIcon {
@@ -853,7 +899,7 @@
         content: '';
         background: var(--surface);
         border: 1px solid var(--surface-stroke);
-        border-radius: 99px;
+        border-radius: var(--radius-full);
         box-shadow: var(--shadow-sm);
     }
 }

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

@@ -3,7 +3,7 @@
 .item {
     display: flex;
     flex-flow: row nowrap;
-    gap: 21px;
+    gap: 18px;
     text-align: left;
 }
 
@@ -54,15 +54,15 @@
     position: relative;
 
     .item + .item {
-        margin-top: 21px;
-        padding-top: 21px;
+        margin-top: 18px;
+        padding-top: 18px;
         border-top: 1px solid var(--surface-stroke);
     }
 }
 
 .basePaneStructure > .item,
 .basePaneStructure > .itemStack > .item {
-    padding: 21px;
+    padding: 18px;
 }
 
 .basePaneStructure > .itemStack > .item {

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

@@ -0,0 +1,40 @@
+.layerPane {
+    display: flex;
+    flex-flow: column;
+    border: 1px solid var(--surface-stroke-out);
+    border-radius: var(--radius);
+    background: var(--gray-50);
+    background-clip: padding-box;
+}
+
+.layerPane > .basePaneStructure {
+    border-right-width: 0;
+    border-left-width: 0;
+}
+
+.layerPane > .basePaneStructure:first-child {
+    border-top-width: 0;
+}
+
+.layerPane > .basePaneStructure:last-child {
+    border-bottom-width: 0;
+}
+
+.layerPane > .basePaneStructure + .basePaneStructure {
+    border-top-width: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.layerPane > .basePaneStructure:has(+ .basePaneStructure) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.layerPaneSecondary {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 12px 18px;
+    color: var(--foreground-prominent);
+}

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

@@ -13,10 +13,6 @@
     }
 }
 
-.autoGrid {
-    composes: baseAutoGrid from './base/Grid.module.scss';
-}
-
 .container {
     margin-left: auto;
     margin-right: auto;
@@ -27,6 +23,17 @@
     @include mixin.breakpoint-max-widths;
 }
 
+.column {
+    display: flex;
+    flex-flow: column;
+    gap: var(--gap, 0);
+}
+
+.row {
+    display: flex;
+    gap: var(--gap, 0);
+}
+
 .spacer {
     flex-grow: 1;
 }

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

@@ -1,7 +1,7 @@
 .legendHorizontal {
     composes: stackHorizontal from './Layout.module.scss';
 
-    gap: 12px 21px;
+    gap: 12px 18px;
 }
 
 .legendVertical {
@@ -25,6 +25,6 @@
         content: '';
         flex: 0 0 12px;
         background: var(--color);
-        border-radius: 99px;
+        border-radius: var(--radius-full);
     }
 }

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

@@ -41,7 +41,6 @@
 
     height: unset;
     min-height: 42px;
-    padding: 6px 12px;
     gap: 15px;
     justify-content: flex-start;
     border: 0;
@@ -64,11 +63,6 @@
 
 .menuItemIcon {
     composes: buttonIcon from './base/Button.module.scss';
-
-    margin-left: 2px;
-    margin-right: 2px;
-    color: var(--foreground-prominent);
-    font-size: 16px;
 }
 
 .menuItemLabel {
@@ -137,6 +131,55 @@
     margin-left: 33px;
 }
 
+.menuCollapsible {
+    display: flex;
+    flex-flow: column;
+}
+
+.menuCollapsibleOpened {
+    composes: menuCollapsible;
+}
+
+.menuCollapsibleBody {
+    position: relative;
+    min-height: 0;
+    transition: height 300ms var(--swift-out), opacity 200ms var(--swift-out);
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 3px;
+        bottom: 3px;
+        left: 21px;
+        width: 2px;
+        background: var(--surface-stroke);
+    }
+
+    &:global(.v-enter-from),
+    &:global(.v-leave-to) {
+        opacity: 0;
+    }
+
+    &:global(.v-enter-to),
+    &:global(.v-leave-from) {
+        opacity: 1;
+    }
+
+    &:global(.v-enter-active),
+    &:global(.v-leave-active) {
+        overflow: hidden;
+    }
+}
+
+.menuCollapsibleContent {
+    display: flex;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    padding-left: 35px;
+    flex-flow: column;
+    gap: 3px;
+}
+
 .menuItemSelectableIcon {
     composes: buttonIcon from './base/Button.module.scss';
 }
@@ -181,6 +224,11 @@
     border-radius: 3px;
 }
 
+.menuItem :local(.avatar) {
+    margin: -3px;
+    font-size: 24px;
+}
+
 .menuGroupHorizontal .menuItem {
     flex-basis: 0;
     flex-grow: 1;
@@ -207,7 +255,6 @@
     align-items: center;
     gap: 9px;
     background: linear-gradient(to bottom, var(--surface) 75%, transparent);
-    font-size: 14px;
     pointer-events: none;
     z-index: 1;
 }
@@ -223,6 +270,7 @@
 
 .menuSubHeaderLabel {
     flex-grow: 1;
+    font-size: 14px;
 }
 
 .menuItem + .menuSubHeader {
@@ -243,9 +291,9 @@
         width: 4px;
         content: '';
         background: var(--primary-600);
-        border-radius: 99px;
+        border-radius: var(--radius-full);
         opacity: 0;
-        transition: opacity 180ms var(--swift-out);
+        transition: opacity var(--transition-default);
     }
 }
 
@@ -298,7 +346,7 @@
     }
 
     > :where(.divider, .separator) {
-        margin-left: 21px;
-        margin-right: 21px;
+        margin-left: 18px;
+        margin-right: 18px;
     }
 }

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

@@ -135,7 +135,7 @@
 
     .noticePrefix,
     .noticeTitle {
-        color: var(--primary-600);
+        color: var(--primary-800);
     }
 
     :local(.button) {
@@ -165,7 +165,7 @@
 
     .noticePrefix,
     .noticeTitle {
-        color: var(--danger-600);
+        color: var(--danger-800);
     }
 
     :local(.button) {
@@ -195,7 +195,7 @@
 
     .noticePrefix,
     .noticeTitle {
-        color: var(--info-600);
+        color: var(--info-800);
     }
 
     :local(.button) {
@@ -225,7 +225,7 @@
 
     .noticePrefix,
     .noticeTitle {
-        color: var(--success-600);
+        color: var(--success-800);
     }
 
     :local(.button) {
@@ -255,7 +255,7 @@
 
     .noticePrefix,
     .noticeTitle {
-        color: var(--warning-600);
+        color: var(--warning-800);
     }
 
     :local(.button) {
@@ -273,6 +273,6 @@
 }
 
 .basePane > .notice {
-    padding-left: 21px;
-    padding-right: 21px;
+    padding-left: 18px;
+    padding-right: 18px;
 }

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

@@ -121,7 +121,7 @@
 
         > .paneHeader {
             top: 0;
-            padding-bottom: 21px;
+            padding-bottom: 18px;
             border-bottom: 1px solid var(--gray-100);
             box-shadow: var(--shadow-xs);
 
@@ -143,7 +143,7 @@
         }
 
         > .paneHeader:has(.paneHeaderCaption > :is(span)) + .tabBar {
-            top: 69px;
+            top: 66px;
         }
 
         > .paneFooter {

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 {