@flux-ui/components 3.0.0-next.2 → 3.0.0-next.4

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.2",
+    "version": "3.0.0-next.4",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -52,9 +52,9 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/utils": "^1.12.0",
-        "@flux-ui/internals": "3.0.0-next.0",
-        "@flux-ui/types": "3.0.0-next.0",
+        "@basmilius/utils": "^1.13.0",
+        "@flux-ui/internals": "3.0.0-next.4",
+        "@flux-ui/types": "3.0.0-next.4",
         "@fortawesome/fontawesome-common-types": "^6.7.2",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
@@ -63,15 +63,15 @@
         "vue": "^3.5.13"
     },
     "devDependencies": {
-        "@basmilius/vite-vue-preset": "^2.6.0",
+        "@basmilius/vite-vue-preset": "^3.0.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.6.2",
         "@types/node": "^22.14.1",
         "@vitejs/plugin-vue": "^5.2.3",
         "pinia": "^3.0.2",
-        "sass-embedded": "^1.86.3",
+        "sass-embedded": "^1.87.0",
         "typescript": "^5.8.3",
-        "vite": "^6.2.6",
-        "vue-tsc": "^2.2.8"
+        "vite": "^6.3.2",
+        "vue-tsc": "^2.2.10"
     }
 }

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

@@ -1,10 +1,7 @@
 @use '$flux/css/mixin';
 
-@value button, buttonIcon, buttonLabel from './base/Button.module.scss';
-@value basePaneStructure from './base/Pane.module.scss';
-
 .action {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     height: 30px;
     width: 30px;
@@ -28,7 +25,7 @@
 }
 
 .actionIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: var(--foreground);
     font-size: 18px;
@@ -39,7 +36,7 @@
 }
 
 .actionLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 
     color: var(--foreground);
 }
@@ -59,7 +56,7 @@
     }
 }
 
-:local(.basePaneStructure) > .actionBar {
+.basePaneStructure > .actionBar {
     padding: 15px 21px;
     background: rgb(var(--gray-1));
     border: 1px solid rgb(var(--gray-2));

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

@@ -1,9 +1,7 @@
 @use '$flux/css/mixin';
 
-@value button, buttonIcon, buttonLabel, isSmall, isMedium, isLarge, isXl from './base/Button.module.scss';
-
 .primaryButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     background: rgb(var(--primary-7));
     border-color: rgb(var(--primary-9));
@@ -26,17 +24,17 @@
 }
 
 .primaryButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: rgb(var(--primary-0));
 }
 
 .primaryButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .secondaryButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     background: rgb(var(--gray-0));
     border-color: rgb(var(--gray-3));
@@ -54,17 +52,17 @@
 }
 
 .secondaryButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: var(--foreground-prominent);
 }
 
 .secondaryButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .destructiveButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     background: rgb(var(--gray-0));
     border-color: rgb(var(--gray-3));
@@ -86,13 +84,13 @@
 }
 
 .destructiveButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: rgb(var(--danger-7));
 }
 
 .destructiveButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 
     &:only-child {
         color: rgb(var(--danger-7));
@@ -119,7 +117,7 @@
 }
 
 .linkButton {
-    composes: button;
+    composes: button from './base/Button.module.scss';
 
     display: inline-flex;
     height: unset;
@@ -143,7 +141,7 @@
 }
 
 .linkButtonIcon {
-    composes: buttonIcon;
+    composes: buttonIcon from './base/Button.module.scss';
 
     color: rgb(var(--primary-7));
     transition: inherit;
@@ -155,7 +153,7 @@
 }
 
 .linkButtonLabel {
-    composes: buttonLabel;
+    composes: buttonLabel from './base/Button.module.scss';
 }
 
 .publishButton {

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

@@ -1,7 +1,7 @@
-@value basePaneStructure, basePaneLoader from './base/Pane.module.scss';
+@use '$flux/css/mixin';
 
 .calendar {
-    composes: basePaneStructure;
+    composes: basePaneStructure from './base/Pane.module.scss';
 
     display: flex;
     flex-flow: column;
@@ -14,7 +14,7 @@
 }
 
 .calendarLoader {
-    composes: basePaneLoader;
+    composes: basePaneLoader from './base/Pane.module.scss';
 }
 
 .calendarCurrent {
@@ -32,10 +32,8 @@
     line-height: 1.5em;
     text-transform: capitalize;
 
-    @media (hover: hover) {
-        &:hover {
-            color: rgb(var(--primary-7));
-        }
+    @include mixin.hover {
+        color: rgb(var(--primary-7));
     }
 }
 
@@ -163,9 +161,7 @@
         }
     }
 
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-3));
-        }
+    @include mixin.hover {
+        background: rgb(var(--primary-3));
     }
 }

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

@@ -1,7 +1,5 @@
 @use '$flux/css/mixin';
 
-@value basePane from './base/Pane.module.scss';
-
 .expandable {
     display: flex;
     flex-flow: column;
@@ -71,15 +69,15 @@
     padding: 0 21px 21px;
 }
 
-:local(.basePane) > .expandable {
+.basePane > .expandable {
     border-radius: inherit;
 }
 
-:local(.basePane) > .expandable .expandableHeader {
+.basePane > .expandable .expandableHeader {
     border-radius: inherit;
 }
 
-:local(.basePane) > .expandableOpened .expandableHeader {
+.basePane > .expandableOpened .expandableHeader {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -101,12 +99,12 @@
     }
 }
 
-:local(.basePane) > .expandableGroup:first-child .expandable:first-child .expandableHeader {
+.basePane > .expandableGroup:first-child .expandable:first-child .expandableHeader {
     border-top-left-radius: var(--radius);
     border-top-right-radius: var(--radius);
 }
 
-:local(.basePane) > .expandableGroup:last-child .expandable:not(.expandableOpened):last-child .expandableHeader {
+.basePane > .expandableGroup:last-child .expandable:not(.expandableOpened):last-child .expandableHeader {
     border-bottom-left-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
 }

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

@@ -1,5 +1,3 @@
-@value basePaneStructure from './base/Pane.module.scss';
-
 .filter {
     max-height: 50dvh;
     max-width: 100%;

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

@@ -1,8 +1,5 @@
 @use '$flux/css/mixin';
 
-@value button, buttonLabel from './base/Button.module.scss';
-@value basePaneStructure from './base/Pane.module.scss';
-
 %-form-input-group-inner-styles {
     height: 100%;
     min-height: unset;
@@ -29,6 +26,7 @@
 
 .form {
     composes: formStructureElement;
+
     gap: 42px;
 }
 
@@ -40,13 +38,14 @@
 .formColumn,
 .formSection {
     composes: formStructureElement;
+
     gap: 18px;
 }
 
 .form,
 .formColumn,
 .formSection {
-    > :local(.button) {
+    > .button {
         align-self: flex-start;
     }
 }
@@ -63,6 +62,13 @@
     font-weight: 800;
 }
 
+@include mixin.breakpoint-down(sm) {
+    .formRow {
+        flex-flow: column;
+        gap: 18px;
+    }
+}
+
 .formField {
     display: flex;
     flex: 1 1 0;
@@ -106,12 +112,15 @@
 
 .formFieldAddition {
     display: flex;
+    margin-top: 3px;
+    margin-bottom: 3px;
     gap: 9px;
     font-size: 14px;
+    line-height: 24px;
 }
 
 .formFieldAdditionIcon {
-    margin-top: 3px;
+    margin-top: 4px;
 }
 
 .formFieldAdditionError {
@@ -126,6 +135,10 @@
     color: var(--foreground-secondary);
 }
 
+.formFieldAddition + .formFieldAddition {
+    margin-top: 0;
+}
+
 .formInput {
     position: relative;
     display: block;
@@ -283,25 +296,25 @@
 
     @include mixin.focus-ring(-1px, true);
 
-    > :is(.formInput, .formSelect, :local(.button)) {
+    > :is(.formInput, .formSelect, .button) {
         @extend %-form-input-group-inner-styles;
 
-        + :is(:local(.button), :local(.buttonGroup)) {
+        + :is(.button, .buttonGroup) {
             margin: 0;
             border-left: 1px solid rgb(var(--gray-3));
         }
     }
 
-    > :local(.buttonGroup) > :local(.button) {
+    > .buttonGroup > .button {
         @extend %-form-input-group-inner-styles;
 
-        + :local(.button) {
+        + .button {
             margin: 0;
             border-left: 1px solid rgb(var(--gray-3));
         }
     }
 
-    > :local(.buttonGroup):not(:first-child) > :local(.button):first-child {
+    > .buttonGroup:not(:first-child) > .button:first-child {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
     }
@@ -446,7 +459,7 @@
 }
 
 .formSelectPopup {
-    composes: basePaneStructure;
+    composes: basePaneStructure from './base/Pane.module.scss';
 
     position: fixed;
     display: block;
@@ -482,7 +495,7 @@
     inset: -1px;
     pointer-events: none;
 
-    :local(.buttonLabel) {
+    .buttonLabel {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -595,6 +608,7 @@
 }
 
 .quantitySelector {
+    min-width: max-content;
     align-self: center;
     justify-self: center;
     border: 1px solid rgb(var(--gray-3));

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

@@ -1,7 +1,5 @@
 @use '$flux/css/mixin';
 
-@value placeholder from './Placeholder.module.scss';
-
 .gallery {
     display: grid;
     gap: 9px;
@@ -9,7 +7,7 @@
 }
 
 .galleryAdd {
-    composes: placeholder;
+    composes: placeholder from './Placeholder.module.scss';
 
     aspect-ratio: 1 / 1;
     color: rgb(var(--gray-7));

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

@@ -1,104 +1,100 @@
-@value basePane from './base/Pane.module.scss';
-
-@layer flux-base {
-    .icon {
-        height: 1em;
-        width: 1em;
-        flex-shrink: 0;
-        font-size: 20px;
-        line-height: 1;
-    }
+.icon {
+    height: 1em;
+    width: 1em;
+    flex-shrink: 0;
+    font-size: 20px;
+    line-height: 1;
+}
 
-    .fontAwesomeIcon {
-        composes: icon;
+.fontAwesomeIcon {
+    composes: icon;
 
-        display: inline-block;
-    }
+    display: inline-block;
+}
 
-    .materialSymbolIcon {
-        composes: icon;
-
-        display: inline-flex;
-        color: currentColor;
-        font-family: 'Material Symbols Outlined', sans-serif;
-        font-weight: 400;
-        font-style: normal;
-        user-select: none;
-        -webkit-font-feature-settings: 'liga';
-        -webkit-font-smoothing: antialiased;
-    }
+.materialSymbolIcon {
+    composes: icon;
+
+    display: inline-flex;
+    color: currentColor;
+    font-family: 'Material Symbols Outlined', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    user-select: none;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
 
-    .iconBoxed {
-        composes: basePane;
+.iconBoxed {
+    composes: basePane from './base/Pane.module.scss';
 
-        display: flex;
-        height: 1em;
-        width: 1em;
-        align-items: center;
-        flex-shrink: 0;
-        justify-content: center;
-        font-size: 42px;
+    display: flex;
+    height: 1em;
+    width: 1em;
+    align-items: center;
+    flex-shrink: 0;
+    justify-content: center;
+    font-size: 42px;
 
-        .icon {
-            font-size: .33em;
-        }
+    .icon {
+        font-size: .33em;
+    }
 
-        .materialSymbolIcon {
-            font-size: .5em;
-        }
+    .materialSymbolIcon {
+        font-size: .5em;
     }
+}
 
-    .iconBoxedDefault {
-        composes: iconBoxed;
+.iconBoxedDefault {
+    composes: iconBoxed;
 
-        box-shadow: var(--shadow-sm);
-    }
+    box-shadow: var(--shadow-sm);
+}
 
-    .iconBoxedColored {
-        composes: iconBoxed;
+.iconBoxedColored {
+    composes: iconBoxed;
 
-        border: 0;
-    }
+    border: 0;
+}
 
-    .iconBoxedGray {
-        composes: iconBoxedColored;
+.iconBoxedGray {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--gray-2));
-        color: var(--foreground);
-    }
+    background: rgb(var(--gray-2));
+    color: var(--foreground);
+}
 
-    .iconBoxedPrimary {
-        composes: iconBoxedColored;
+.iconBoxedPrimary {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--primary-2));
-        color: rgb(var(--primary-10));
-    }
+    background: rgb(var(--primary-2));
+    color: rgb(var(--primary-10));
+}
 
-    .iconBoxedDanger {
-        composes: iconBoxedColored;
+.iconBoxedDanger {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--danger-2));
-        color: rgb(var(--danger-10));
-    }
+    background: rgb(var(--danger-2));
+    color: rgb(var(--danger-10));
+}
 
-    .iconBoxedInfo {
-        composes: iconBoxedColored;
+.iconBoxedInfo {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--info-2));
-        color: rgb(var(--info-10));
-    }
+    background: rgb(var(--info-2));
+    color: rgb(var(--info-10));
+}
 
-    .iconBoxedSuccess {
-        composes: iconBoxedColored;
+.iconBoxedSuccess {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--success-2));
-        color: rgb(var(--success-10));
-    }
+    background: rgb(var(--success-2));
+    color: rgb(var(--success-10));
+}
 
-    .iconBoxedWarning {
-        composes: iconBoxedColored;
+.iconBoxedWarning {
+    composes: iconBoxedColored;
 
-        background: rgb(var(--warning-2));
-        color: rgb(var(--warning-10));
-    }
+    background: rgb(var(--warning-2));
+    color: rgb(var(--warning-10));
 }