@flux-ui/components 3.0.0-next.10 → 3.0.0-next.12

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.10",
+    "version": "3.0.0-next.12",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,9 +51,9 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/utils": "^2.4.0",
-        "@flux-ui/internals": "3.0.0-next.10",
-        "@flux-ui/types": "3.0.0-next.10",
+        "@basmilius/utils": "^2.4.1",
+        "@flux-ui/internals": "3.0.0-next.12",
+        "@flux-ui/types": "3.0.0-next.12",
         "@fortawesome/fontawesome-common-types": "^6.7.2",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
@@ -62,10 +62,10 @@
         "vue": "^3.5.17"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^2.4.0",
+        "@basmilius/vite-preset": "^2.4.1",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.6.2",
-        "@types/node": "^24.0.4",
+        "@types/node": "^24.0.7",
         "@vitejs/plugin-vue": "^6.0.0",
         "pinia": "^3.0.3",
         "sass-embedded": "^1.89.2",

package/src/component/FluxGallery.vue

@@ -1,8 +1,8 @@
 <template>
     <FluxDropZone
+        :class="$style.gallery"
         accept="image/*"
         :disabled="!isEditable"
-        :is-empty="items && items.length === 0"
         is-multiple
         placeholder-icon="image"
         :placeholder-button="translate('flux.galleryPlaceholderButton')"
@@ -11,7 +11,7 @@
         @select-multiple="onFilesSelected">
         <template #default="{showPicker}">
             <TransitionGroup
-                :class="$style.gallery"
+                :class="$style.galleryGrid"
                 :move-class="$style.galleryMove"
                 tag="div">
                 <template

package/src/component/FluxPagination.vue

@@ -59,10 +59,7 @@
     import { computed, unref } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import { showPrompt } from '$flux/data';
-    import FluxButton from './FluxButton.vue';
-    import FluxButtonGroup from './FluxButtonGroup.vue';
     import FluxPaginationButton from './FluxPaginationButton.vue';
-    import FluxPrimaryButton from './FluxPrimaryButton.vue';
     import $style from '$flux/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{

package/src/component/FluxPaginationBar.vue

@@ -35,12 +35,9 @@
     import type { FluxFormSelectOption } from '@flux-ui/types';
     import { computed, ref, watch } from 'vue';
     import { useTranslate } from '$flux/composable/private';
-    import FluxFormInputAddition from './FluxFormInputAddition.vue';
-    import FluxFormInputGroup from './FluxFormInputGroup.vue';
     import FluxFormSelect from './FluxFormSelect.vue';
     import FluxPagination from './FluxPagination.vue';
     import FluxSpacer from './FluxSpacer.vue';
-    import FluxStack from './FluxStack.vue';
     import $style from '$flux/css/component/Pagination.module.scss';
 
     const emit = defineEmits<{

package/src/component/FluxTabBar.vue

@@ -3,14 +3,16 @@
         :class="$style.tabBar"
         role="tablist"
         aria-orientation="horizontal">
-        <button
-            v-if="isStartArrowVisible"
-            :class="$style.tabBarArrowStart"
-            tabindex="-1"
-            type="button"
-            @click="scrollToStart">
-            <FluxIcon name="angle-left"/>
-        </button>
+        <FluxFadeTransition>
+            <button
+                v-if="isStartArrowVisible"
+                :class="$style.tabBarArrowStart"
+                tabindex="-1"
+                type="button"
+                @click="scrollToStart">
+                <FluxIcon name="angle-left"/>
+            </button>
+        </FluxFadeTransition>
 
         <div
             ref="tabBar"
@@ -22,14 +24,16 @@
             <slot/>
         </div>
 
-        <button
-            v-if="isEndArrowVisible"
-            :class="$style.tabBarArrowEnd"
-            tabindex="-1"
-            type="button"
-            @click="scrollToEnd">
-            <FluxIcon name="angle-right"/>
-        </button>
+        <FluxFadeTransition>
+            <button
+                v-if="isEndArrowVisible"
+                :class="$style.tabBarArrowEnd"
+                tabindex="-1"
+                type="button"
+                @click="scrollToEnd">
+                <FluxIcon name="angle-right"/>
+            </button>
+        </FluxFadeTransition>
     </nav>
 </template>
 
@@ -39,6 +43,7 @@
     import { unrefTemplateElement, useEventListener, useMutationObserver } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { onMounted, ref, useTemplateRef } from 'vue';
+    import { FluxFadeTransition } from '$flux/transition';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Tab.module.scss';
 

package/src/css/base.scss

@@ -1,16 +1,18 @@
 @use 'variables';
 
 @layer flux-base {
-    :root, [light] {
+    :root {
         @include variables.animation;
+        @include variables.defaults;
+    }
+
+    :root, [light] {
         @include variables.color-light;
-        @include variables.default-light;
         @include variables.shadow-light;
     }
 
     [dark] {
         @include variables.color-dark;
-        @include variables.default-dark;
         @include variables.shadow-dark;
     }
 

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

@@ -8,15 +8,15 @@
     padding-left: 6px;
     padding-right: 6px;
     border: 0;
-    border-radius: calc(var(--radius) / 2);
+    border-radius: var(--radius);
     box-shadow: none;
 
     @include mixin.hover {
-        background: rgb(var(--gray-3));
+        background: var(--gray-2);
     }
 
     &:active {
-        background: rgb(var(--gray-2));
+        background: var(--gray-3);
     }
 
     .spinner {
@@ -32,7 +32,7 @@
 }
 
 .action.isDestructive .actionIcon {
-    color: rgb(var(--danger-7));
+    color: var(--danger-7);
 }
 
 .actionLabel {
@@ -58,8 +58,8 @@
 
 .basePaneStructure > .actionBar {
     padding: 15px 21px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-2));
+    background: var(--gray-1);
+    border: 1px solid var(--gray-2);
     border-left: 0;
     border-right: 0;
 
@@ -95,14 +95,13 @@
     @container actionPane (max-width: 540px) {
         grid-template-columns: 1fr;
     }
-
-    .paneBody + .paneBody {
-        padding-top: 21px;
-    }
 }
 
 .actionPaneBody {
     position: relative;
-    padding: 0;
     text-wrap: pretty;
+
+    &:local(.paneBody) {
+        padding: 0;
+    }
 }

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

@@ -14,9 +14,9 @@
     display: block;
     height: inherit;
     width: inherit;
-    background: rgb(var(--gray-1));
+    background: var(--gray-1);
     border-radius: inherit;
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-2));
+    box-shadow: inset 0 0 0 1px var(--gray-2);
 }
 
 .avatarFallback {
@@ -41,18 +41,18 @@
 .avatarFallbackColorized {
     composes: avatarFallback;
 
-    background: color-mix(in srgb, var(--color), rgb(var(--gray-0)) 80%);
+    background: color-mix(in srgb, var(--color), var(--gray-0) 80%);
     color: var(--color);
 }
 
 [dark] .avatarFallbackColorized {
-    background: color-mix(in srgb, var(--color), rgb(var(--gray-0)) 70%);
+    background: color-mix(in srgb, var(--color), var(--gray-0) 70%);
 }
 
 .avatarFallbackNeutral {
     composes: avatarFallback;
 
-    background: rgb(var(--gray-3));
+    background: var(--gray-2);
     color: var(--foreground-secondary);
 }
 
@@ -62,8 +62,8 @@
     inset: 0;
     align-items: center;
     justify-content: center;
-    background: rgb(var(--gray-1) / .84);
-    box-shadow: inset 0 0 0 1px rgb(var(--gray-2));
+    background: oklch(from var(--gray-1) l c h / .84);
+    box-shadow: inset 0 0 0 1px var(--gray-2);
     border-radius: inherit;
     backdrop-filter: blur(3px) saturate(180%);
 
@@ -86,37 +86,37 @@
 .avatarStatusGray {
     composes: avatarStatus;
 
-    background: rgb(var(--gray-6));
+    background: var(--gray-6);
 }
 
 .avatarStatusPrimary {
     composes: avatarStatus;
 
-    background: rgb(var(--primary-7));
+    background: var(--primary-7);
 }
 
 .avatarStatusDanger {
     composes: avatarStatus;
 
-    background: rgb(var(--danger-7));
+    background: var(--danger-7);
 }
 
 .avatarStatusInfo {
     composes: avatarStatus;
 
-    background: rgb(var(--info-7));
+    background: var(--info-7);
 }
 
 .avatarStatusSuccess {
     composes: avatarStatus;
 
-    background: rgb(var(--success-7));
+    background: var(--success-7);
 }
 
 .avatarStatusWarning {
     composes: avatarStatus;
 
-    background: rgb(var(--warning-7));
+    background: var(--warning-7);
 }
 
 .avatarClickable {
@@ -154,7 +154,7 @@
     @include mixin.focus-ring(2px);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
     }
 }
 

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

@@ -10,8 +10,8 @@
     padding-right: 9px;
     align-items: center;
     gap: 6px;
-    background: rgb(var(--gray-0));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--gray-0);
+    border: 1px solid var(--gray-2);
     border-radius: 99px;
     color: var(--foreground-prominent);
     font-size: 13px;
@@ -24,7 +24,7 @@
         transition: background 180ms var(--swift-out);
 
         @include mixin.hover {
-            background: rgb(var(--gray-1));
+            background: var(--gray-1);
             color: var(--foreground-prominent);
         }
     }
@@ -49,12 +49,12 @@
     cursor: pointer;
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-2);
         color: var(--foreground);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
+        background: var(--gray-3);
         color: var(--foreground);
     }
 
@@ -91,52 +91,52 @@
 .badgeGray {
     composes: badge;
 
-    --color: rgb(var(--gray-8));
+    --color: var(--gray-8);
 
     .badgeLabel {
         color: var(--foreground-prominent);
     }
 
     .spinner {
-        --value: rgb(var(--primary-7));
+        --value: var(--primary-7);
     }
 }
 
 .badgePrimary {
     composes: badge;
 
-    --color: rgb(var(--primary-7));
+    --color: var(--primary-7);
 }
 
 .badgeDanger {
     composes: badge;
 
-    --color: rgb(var(--danger-7));
+    --color: var(--danger-7);
 }
 
 .badgeInfo {
     composes: badge;
 
-    --color: rgb(var(--info-7));
+    --color: var(--info-7);
 }
 
 .badgeSuccess {
     composes: badge;
 
-    --color: rgb(var(--success-7));
+    --color: var(--success-7);
 }
 
 .badgeWarning {
     composes: badge;
 
-    --color: rgb(var(--warning-7));
+    --color: var(--warning-7);
 }
 
 .tag {
     composes: badge;
 
-    background: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-1);
+    border-color: var(--gray-2);
     border-radius: calc(var(--radius) / 2);
     font-weight: 400;
 }

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

@@ -3,30 +3,31 @@
 .primaryButton {
     composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--primary-7));
-    border-color: rgb(var(--primary-9));
-    box-shadow: 0 1px 1px rgb(var(--primary-7) / .25);
-    color: rgb(var(--primary-0));
+    background: var(--primary-7);
+    border-color: var(--primary-8);
+    box-shadow: 0 1px 1px oklch(from var(--primary-7) l c h / .25);
+    color: var(--primary-0);
 
     @include mixin.hover {
-        background: rgb(var(--primary-8));
+        background: var(--primary-8);
+        border-color: var(--primary-9);
     }
 
     &:active {
-        background: rgb(var(--primary-9));
+        background: var(--primary-9);
         scale: .9875;
     }
 
     .spinner {
-        --track: rgb(var(--primary-8));
-        --value: rgb(var(--primary-0));
+        --track: var(--primary-8);
+        --value: var(--primary-0);
     }
 }
 
 .primaryButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--primary-0));
+    color: var(--primary-0);
 }
 
 .primaryButtonLabel {
@@ -36,17 +37,17 @@
 .secondaryButton {
     composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--gray-0));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-0);
+    border-color: var(--gray-2);
     color: var(--foreground);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-1);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
-        border-color: rgb(var(--gray-4));
+        background: var(--gray-2);
+        border-color: var(--gray-3);
         scale: .9875;
     }
 }
@@ -64,56 +65,42 @@
 .destructiveButton {
     composes: button from './base/Button.module.scss';
 
-    background: rgb(var(--gray-0));
-    border-color: rgb(var(--gray-3));
+    background: var(--gray-0);
+    border-color: var(--gray-2);
     color: var(--foreground);
 
     @include mixin.hover {
-        background: rgb(var(--gray-2));
+        background: var(--gray-1);
     }
 
     &:active {
-        background: rgb(var(--gray-3));
-        border-color: rgb(var(--gray-4));
+        background: var(--gray-2);
+        border-color: var(--gray-3);
         scale: .9875;
     }
 
     .spinner {
-        --value: rgb(var(--danger-7));
+        --value: var(--danger-7);
     }
 }
 
 .destructiveButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--danger-7));
+    color: var(--danger-7);
 }
 
 .destructiveButtonLabel {
     composes: buttonLabel from './base/Button.module.scss';
 
     &:only-child {
-        color: rgb(var(--danger-7));
-    }
-}
-
-[dark] .secondaryButton,
-[dark] .destructiveButton {
-    background: rgb(var(--gray-1));
-    border-color: rgb(var(--gray-3));
-
-    @include mixin.hover {
-        background: rgb(var(--gray-2));
-    }
-
-    &:active {
-        background: rgb(var(--gray-3));
+        color: var(--danger-7);
     }
 }
 
 .secondaryButton,
 .destructiveButton {
-    box-shadow: var(--shadow-px), inset 0 -1px rgb(var(--gray-3) / .3);
+    box-shadow: var(--shadow-px), inset 0 -1px oklch(from var(--gray-3) l c h / .15);
 }
 
 .linkButton {
@@ -124,7 +111,7 @@
     padding: 0;
     border: 0;
     box-shadow: unset;
-    color: rgb(var(--primary-7));
+    color: var(--primary-7);
     text-decoration: underline;
     text-decoration-thickness: 1px;
     text-underline-offset: 4px;
@@ -132,7 +119,7 @@
     @include mixin.focus-ring(6px);
 
     @include mixin.hover {
-        color: rgb(var(--primary-10));
+        color: var(--primary-10);
 
         .linkButtonIcon {
             transform: translate3d(6px, 0, 0);
@@ -143,7 +130,7 @@
 .linkButtonIcon {
     composes: buttonIcon from './base/Button.module.scss';
 
-    color: rgb(var(--primary-7));
+    color: var(--primary-7);
     transition: inherit;
     transition-property: transform;
 

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

@@ -33,7 +33,7 @@
     text-transform: capitalize;
 
     @include mixin.hover {
-        color: rgb(var(--primary-7));
+        color: var(--primary-7);
     }
 }
 
@@ -56,12 +56,12 @@
     gap: 1px;
     grid-template-columns: repeat(7, 1fr);
     grid-template-rows: min-content repeat(6, auto);
-    background: rgb(var(--gray-2));
+    background: var(--gray-1);
 }
 
 .calendarCell {
     padding: 12px 21px;
-    background: rgb(var(--gray-0));
+    background: var(--gray-0);
 }
 
 .calendarDay {
@@ -85,7 +85,7 @@
     padding-bottom: 39px;
 
     &.isDisabled {
-        background: rgb(var(--gray-1));
+        background: oklch(from var(--gray-0) l c h / .5);
         color: var(--foreground-secondary);
         pointer-events: none;
 
@@ -120,9 +120,9 @@
     margin-left: -9px;
     margin-right: -9px;
     padding: 6px 9px;
-    background: rgb(var(--primary-2));
+    background: var(--primary-2);
     border: 0;
-    color: rgb(var(--primary-9));
+    color: var(--primary-9);
     cursor: pointer;
     font-size: 14px;
     line-height: 1.3em;
@@ -162,6 +162,6 @@
     }
 
     @include mixin.hover {
-        background: rgb(var(--primary-3));
+        background: var(--primary-3);
     }
 }

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

@@ -7,8 +7,8 @@
     align-items: center;
     flex-grow: 0;
     gap: 9px;
-    background: rgb(var(--gray-1));
-    border: 1px solid rgb(var(--gray-3));
+    background: var(--gray-1);
+    border: 1px solid var(--gray-2);
     border-radius: 99px;
     color: var(--foreground);
     transition: 180ms var(--swift-out);
@@ -21,19 +21,21 @@
 
         @media (hover: hover) {
             &:hover {
-                background: rgb(var(--gray-2));
+                background: var(--gray-2);
+                border-color: var(--gray-3);
             }
         }
     }
 
     &.isSelected {
-        background: rgb(var(--primary-2));
-        border-color: rgb(var(--primary-4));
-        color: rgb(var(--primary-7));
+        background: var(--primary-2);
+        border-color: var(--primary-3);
+        color: var(--primary-7);
 
         @media (hover: hover) {
             &:hover {
-                background: rgb(var(--primary-3));
+                background: var(--primary-3);
+                border-color: var(--primary-4);
             }
         }
     }
@@ -44,15 +46,3 @@
         white-space: nowrap;
     }
 }
-
-[dark] .chip.isSelected {
-    background: rgb(var(--primary-11) / .5);
-    border-color: rgb(var(--primary-11));
-    color: rgb(var(--primary-5));
-
-    @media (hover: hover) {
-        &:hover {
-            background: rgb(var(--primary-10) / .5);
-        }
-    }
-}