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

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

@@ -12,7 +12,7 @@
     gap: 6px;
     background: var(--surface);
     border: 1px solid var(--surface-stroke);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground-prominent);
     font-size: 13px;
     font-weight: 500;
@@ -22,7 +22,7 @@
         color: var(--foreground-prominent);
         cursor: pointer;
         text-decoration: none;
-        transition: background 180ms var(--swift-out);
+        transition: background var(--transition-default);
 
         @include mixin.hover {
             background: var(--gray-50);
@@ -45,7 +45,7 @@
     justify-content: center;
     background: unset;
     border: 0;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground-secondary);
     cursor: pointer;
 
@@ -69,7 +69,7 @@
     height: 9px;
     width: 9px;
     background: var(--color);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
 }
 
 .badgeIcon {

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

@@ -13,10 +13,7 @@
         border-color: var(--primary-800);
     }
 
-    &:active {
-        background: var(--primary-800);
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--primary-800));
 
     .spinner {
         --track: var(--primary-700);
@@ -45,10 +42,7 @@
         background: var(--surface-hover);
     }
 
-    &:active {
-        background: var(--surface-active);
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--surface-active));
 }
 
 .secondaryButtonIcon {
@@ -72,10 +66,7 @@
         background: var(--surface-hover);
     }
 
-    &:active {
-        background: var(--surface-active);
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--surface-active));
 
     .spinner {
         --value: var(--danger-600);
@@ -112,10 +103,7 @@
         background: var(--surface-hover);
     }
 
-    &:active {
-        background: var(--surface-active);
-        scale: .9875;
-    }
+    @include mixin.button-active(var(--surface-active));
 }
 
 .primaryLinkButton {

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

@@ -60,7 +60,7 @@
 }
 
 .calendarCell {
-    padding: 12px 21px;
+    padding: 12px 18px;
     background: var(--gray-25);
 }
 
@@ -102,7 +102,7 @@
 
 .calendarEntryDate {
     position: absolute;
-    right: 21px;
+    right: 18px;
     bottom: 15px;
     color: var(--foreground);
     font-size: 15px;
@@ -144,13 +144,13 @@
     }
 
     &.isStart {
-        margin-right: -21px;
+        margin-right: -18px;
         border-top-left-radius: var(--radius-half);
         border-bottom-left-radius: var(--radius-half);
     }
 
     &.isEnd {
-        margin-left: -21px;
+        margin-left: -18px;
         border-top-right-radius: var(--radius-half);
         border-bottom-right-radius: var(--radius-half);
     }

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

@@ -9,9 +9,9 @@
     gap: 9px;
     background: var(--gray-50);
     border: 1px solid var(--gray-200);
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     color: var(--foreground);
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, border, color, mixin.focus-ring-transition-properties();
 
     &.isSelectable {
@@ -19,10 +19,8 @@
 
         @include mixin.focus-ring(2px);
 
-        @media (hover: hover) {
-            &:hover {
-                background: var(--gray-100);
-            }
+        @include mixin.hover {
+            background: var(--gray-100);
         }
     }
 
@@ -31,10 +29,8 @@
         border-color: var(--primary-200);
         color: var(--primary-600);
 
-        @media (hover: hover) {
-            &:hover {
-                background: var(--primary-100);
-            }
+        @include mixin.hover {
+            background: var(--primary-100);
         }
     }
 

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

@@ -4,7 +4,7 @@
     --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
 
     display: flex;
-    padding: 21px;
+    padding: 18px;
     flex-flow: column;
     gap: 15px;
 }

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

@@ -71,7 +71,7 @@
     cursor: pointer;
     font-size: 14px;
     outline: 0;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, border-radius, color, opacity;
 
     @include mixin.hover {

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

@@ -11,9 +11,9 @@
 
 .expandableHeader {
     display: flex;
-    height: 60px;
-    padding-left: 21px;
-    padding-right: 21px;
+    height: 54px;
+    padding-left: 18px;
+    padding-right: 18px;
     align-items: center;
     gap: 12px;
     background: unset;
@@ -21,7 +21,7 @@
     color: var(--foreground-prominent);
     cursor: pointer;
     text-align: left;
-    transition: background 180ms var(--swift-out);
+    transition: background var(--transition-default);
     transition-property: background, mixin.focus-ring-transition-properties();
     z-index: 1;
 
@@ -66,7 +66,7 @@
 }
 
 .expandableContent {
-    padding: 0 21px 21px;
+    padding: 0 18px 18px;
 }
 
 .basePane > .expandable {

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

@@ -12,7 +12,8 @@
     inset: 0;
     transition: 660ms var(--deceleration-curve);
 
-    &.isCurrent {}
+    &.isCurrent {
+    }
 
     &:not(.isCurrent) {
         opacity: 0;

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

@@ -6,7 +6,7 @@
     top: var(--pane-y);
     left: var(--pane-x);
     margin: 0;
-    padding: 24px;
+    padding: 30px;
     background: unset;
     border: 0;
     font-size: 1rem;

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

@@ -18,7 +18,7 @@
     width: 42px;
     background: rgb(0 0 0 / .1);
     border: 4px solid white;
-    border-radius: 99px;
+    border-radius: var(--radius-full);
     box-shadow: var(--shadow-md);
     cursor: move;
     transform: translate3d(-50%, -50%, 0);

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 {