@flux-ui/components 3.0.0-next.25 → 3.0.0-next.28

package/dist/transition/FluxAutoHeightTransition.vue.d.ts

@@ -0,0 +1,18 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition/FluxAutoWidthTransition.vue.d.ts

@@ -0,0 +1,18 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition/FluxBreakthroughTransition.vue.d.ts

@@ -0,0 +1,22 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly isBack?: boolean;
+    readonly mode?: 'in-out' | 'out-in';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition/FluxFadeTransition.vue.d.ts

@@ -0,0 +1,21 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly mode?: 'in-out' | 'out-in';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition/FluxOverlayTransition.vue.d.ts

@@ -0,0 +1,21 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly mode?: 'in-out' | 'out-in';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition/FluxRouteTransition.vue.d.ts

@@ -0,0 +1,22 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly isBack?: boolean;
+    readonly mode?: 'in-out' | 'out-in';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition/FluxSlideOverTransition.vue.d.ts

@@ -0,0 +1,21 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly mode?: 'in-out' | 'out-in';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition/FluxTooltipTransition.vue.d.ts

@@ -0,0 +1,21 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly mode?: 'in-out' | 'out-in';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition/FluxVerticalWindowTransition.vue.d.ts

@@ -0,0 +1,22 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly isBack?: boolean;
+    readonly mode?: 'in-out' | 'out-in';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition/FluxWindowTransition.vue.d.ts

@@ -0,0 +1,22 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly isBack?: boolean;
+    readonly mode?: 'in-out' | 'out-in';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition/index.d.ts

@@ -1,10 +1,10 @@
-export { default as FluxAutoHeightTransition } from './FluxAutoHeightTransition';
-export { default as FluxAutoWidthTransition } from './FluxAutoWidthTransition';
-export { default as FluxBreakthroughTransition } from './FluxBreakthroughTransition';
-export { default as FluxFadeTransition } from './FluxFadeTransition';
-export { default as FluxOverlayTransition } from './FluxOverlayTransition';
-export { default as FluxRouteTransition } from './FluxRouteTransition';
-export { default as FluxSlideOverTransition } from './FluxSlideOverTransition';
-export { default as FluxTooltipTransition } from './FluxTooltipTransition';
-export { default as FluxVerticalWindowTransition } from './FluxVerticalWindowTransition';
-export { default as FluxWindowTransition } from './FluxWindowTransition';
+export { default as FluxAutoHeightTransition } from './FluxAutoHeightTransition.vue';
+export { default as FluxAutoWidthTransition } from './FluxAutoWidthTransition.vue';
+export { default as FluxBreakthroughTransition } from './FluxBreakthroughTransition.vue';
+export { default as FluxFadeTransition } from './FluxFadeTransition.vue';
+export { default as FluxOverlayTransition } from './FluxOverlayTransition.vue';
+export { default as FluxRouteTransition } from './FluxRouteTransition.vue';
+export { default as FluxSlideOverTransition } from './FluxSlideOverTransition.vue';
+export { default as FluxTooltipTransition } from './FluxTooltipTransition.vue';
+export { default as FluxVerticalWindowTransition } from './FluxVerticalWindowTransition.vue';
+export { default as FluxWindowTransition } from './FluxWindowTransition.vue';

package/dist/vite.d.ts

@@ -0,0 +1,7 @@
+declare module '*.scss' {
+    export = string;
+}
+
+declare module '*.svg' {
+    export = string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.25",
+    "version": "3.0.0-next.28",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,9 +51,10 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/utils": "^2.25.1",
-        "@flux-ui/internals": "3.0.0-next.25",
-        "@flux-ui/types": "3.0.0-next.25",
+        "@basmilius/common": "^3.8.0",
+        "@basmilius/utils": "^3.8.0",
+        "@flux-ui/internals": "3.0.0-next.28",
+        "@flux-ui/types": "3.0.0-next.28",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
@@ -62,16 +63,16 @@
         "vue": "^3.6.0-beta.6"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^2.25.1",
+        "@basmilius/vite-preset": "^3.8.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
-        "@types/node": "^25.3.0",
+        "@types/node": "^25.3.1",
         "@vitejs/plugin-vue": "^6.0.4",
         "@vue/tsconfig": "^0.8.1",
         "pinia": "^3.0.4",
         "sass-embedded": "^1.97.3",
         "typescript": "^5.9.3",
         "vite": "^8.0.0-beta.15",
-        "vue-tsc": "^3.2.4"
+        "vue-tsc": "^3.2.5"
     }
 }

package/src/component/FluxAnimatedColors.vue

@@ -7,8 +7,8 @@
 <script
     lang="ts"
     setup>
+    import { useComponentId } from '@basmilius/common';
     import { mulberry32 } from '@basmilius/utils';
-    import { useComponentId } from '@flux-ui/internals';
     import { computed, onBeforeUnmount, onMounted, ref, unref, useTemplateRef, watch } from 'vue';
     import $style from '$flux/css/component/Visual.module.scss';
 
@@ -19,12 +19,14 @@
         colors,
         incrementor = 1,
         opacity = .5,
-        seed
+        seed,
+        static: isStatic
     } = defineProps<{
         readonly colors?: string[];
         readonly incrementor?: number;
         readonly opacity?: number;
         readonly seed?: number;
+        readonly static?: boolean;
     }>();
 
     const canvasRef = useTemplateRef('canvas');
@@ -119,7 +121,7 @@
             context.restore();
         }
 
-        schedule();
+        !isStatic && schedule();
     }
 
     watch(canvasRef, canvas => {
@@ -136,6 +138,6 @@
 
     watch(polygons, () => {
         cancel();
-        schedule();
+        !isStatic && schedule();
     });
 </script>

package/src/component/FluxAutoGrid.vue

@@ -15,7 +15,7 @@
     import $style from '$flux/css/component/Layout.module.scss';
 
     const {
-        gap = 30
+        gap = 21
     } = defineProps<{
         readonly gap?: number;
         readonly minColumnWidth: number;

package/src/component/FluxContainer.vue

@@ -12,7 +12,7 @@
     import $style from '$flux/css/component/Layout.module.scss';
 
     const {
-        gutter = 30
+        gutter = 21
     } = defineProps<{
         readonly gutter?: number;
     }>();

package/src/component/FluxExpandable.vue

@@ -50,7 +50,7 @@
 <script
     lang="ts"
     setup>
-    import { useComponentId } from '@flux-ui/internals';
+    import { useComponentId } from '@basmilius/common';
     import type { FluxIconName } from '@flux-ui/types';
     import { computed, getCurrentInstance, onBeforeMount, onUnmounted, ref, unref, useId, watch } from 'vue';
     import { useExpandableGroupInjection } from '$flux/composable';

package/src/component/FluxFader.vue

@@ -9,7 +9,8 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useInterval } from '@flux-ui/internals';
+    import { useInterval } from '@basmilius/common';
+    import { unrefTemplateElement } from '@flux-ui/internals';
     import { computed, ref, unref, useTemplateRef, watch } from 'vue';
     import $style from '$flux/css/component/Fader.module.scss';
 

package/src/component/FluxFilterOptionAsync.vue

@@ -12,11 +12,10 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
+    import { useDebouncedRef, useLoaded } from '@basmilius/common';
     import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
     import { computed, ref, unref, watch } from 'vue';
     import { useFilterInjection } from '$flux/composable';
-    import { useLoaded } from '$flux/composable/private';
     import { isFluxFilterOptionItem } from '$flux/data';
     import { FilterOptionBase } from './primitive';
 

package/src/component/FluxFilterOptionsAsync.vue

@@ -12,11 +12,10 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
+    import { useDebouncedRef, useLoaded } from '@basmilius/common';
     import type { FluxFilterOptionRow, FluxFilterValue, FluxFilterValueSingle, FluxIconName } from '@flux-ui/types';
     import { computed, ref, unref, watch } from 'vue';
     import { useFilterInjection } from '$flux/composable';
-    import { useLoaded } from '$flux/composable/private';
     import { isFluxFilterOptionItem } from '$flux/data';
     import { FilterOptionBase } from './primitive';
 

package/src/component/FluxFormInput.vue

@@ -49,6 +49,11 @@
             :class="$style.formInputIconTrailing"
             :name="iconTrailing"
             :size="18"/>
+
+        <FluxSpinner
+            v-if="isLoading"
+            :class="$style.formInputIconTrailing"
+            :size="18"/>
     </div>
 </template>
 
@@ -63,6 +68,7 @@
     import { useDisabled, useFormFieldInjection } from '$flux/composable';
     import { inputMask } from '$flux/data';
     import FluxIcon from './FluxIcon.vue';
+    import FluxSpinner from './FluxSpinner.vue';
     import $style from '$flux/css/component/Form.module.scss';
 
     const emit = defineEmits<{
@@ -87,6 +93,7 @@
         readonly iconTrailing?: FluxIconName;
         readonly disabled?: boolean;
         readonly isCondensed?: boolean;
+        readonly isLoading?: boolean;
         readonly isReadonly?: boolean;
         readonly isSecondary?: boolean;
         readonly max?: string | number;

package/src/component/FluxFormSelectAsync.vue

@@ -16,12 +16,12 @@
 <script
     lang="ts"
     setup>
-    import { useDebouncedRef } from '@flux-ui/internals';
+    import { useDebouncedRef, useLoaded } from '@basmilius/common';
     import type { FluxFormSelectEntry, FluxFormSelectValue, FluxFormSelectValueSingle } from '@flux-ui/types';
     import { computed, ref, toRef, unref, watch } from 'vue';
     import { SelectBase } from '$flux/component/primitive';
     import { useDisabled } from '$flux/composable';
-    import { useFormSelect, useLoaded } from '$flux/composable/private';
+    import { useFormSelect } from '$flux/composable/private';
     import { isFluxFormSelectOption } from '$flux/data';
 
     const modelSearch = defineModel<string>('searchQuery', {

package/src/component/FluxGrid.vue

@@ -16,7 +16,7 @@
 
     const {
         columns = 12,
-        gap = 30
+        gap = 21
     } = defineProps<{
         readonly columns?: number;
         readonly gap?: number;

package/src/component/FluxIcon.vue

@@ -17,18 +17,6 @@
             fill="currentColor"/>
     </svg>
 
-    <i
-        v-else-if="name"
-        :class="$style.materialSymbolIcon"
-        :style="{
-            fontSize: size && `${size}px`
-        }"
-        role="img"
-        aria-hidden="true"
-        @click="onClick">
-        {{ name }}
-    </i>
-
     <i
         v-else
         :class="$style.icon"/>

package/src/component/FluxItemActions.vue

@@ -1,6 +1,6 @@
 <template>
     <FluxActionBar
-        :class="$style.itemActions"
+        :class="[$style.itemActions, isCenter && $style.isCenter]"
         #primary>
         <slot/>
     </FluxActionBar>
@@ -9,6 +9,10 @@
 <script
     lang="ts"
     setup>
-    import FluxActionBar from './FluxActionBar.vue';
     import $style from '$flux/css/component/Item.module.scss';
+    import FluxActionBar from './FluxActionBar.vue';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+    }>();
 </script>

package/src/component/FluxItemContent.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="$style.itemContent">
+    <div :class="[$style.itemContent, isCenter && $style.isCenter]">
         <slot/>
     </div>
 </template>
@@ -8,4 +8,8 @@
     lang="ts"
     setup>
     import $style from '$flux/css/component/Item.module.scss';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+    }>();
 </script>

package/src/component/FluxItemMedia.vue

@@ -1,5 +1,9 @@
 <template>
-    <div :class="$style.itemMedia">
+    <div
+        :class="[$style.itemMedia, isCenter && $style.isCenter]"
+        :style="{
+            '--size': size && `${size}px`
+        }">
         <slot/>
     </div>
 </template>
@@ -8,4 +12,9 @@
     lang="ts"
     setup>
     import $style from '$flux/css/component/Item.module.scss';
+
+    defineProps<{
+        readonly isCenter?: boolean;
+        readonly size?: number;
+    }>();
 </script>

package/src/component/FluxPressable.vue

@@ -4,7 +4,7 @@
         v-bind="$attrs"
         :rel="rel"
         :target="target"
-        :to="to"
+        :to="to as any"
         @click="onClick($event)"
         @mouseenter="$emit('mouseenter', $event)"
         @mouseleave="$emit('mouseleave', $event)">

package/src/component/FluxStack.vue

@@ -24,7 +24,7 @@
 
     const {
         direction = 'vertical',
-        gap = 30
+        gap = 21
     } = defineProps<{
         readonly direction?: FluxDirection;
         readonly gap?: number;

package/src/component/FluxTabBar.vue

@@ -40,7 +40,8 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useEventListener, useMutationObserver } from '@flux-ui/internals';
+    import { useMutationObserver } from '@basmilius/common';
+    import { unrefTemplateElement, useEventListener } from '@flux-ui/internals';
     import { clsx } from 'clsx';
     import { onMounted, ref, useTemplateRef } from 'vue';
     import { FluxFadeTransition } from '$flux/transition';

package/src/component/FluxTableCell.vue

@@ -12,7 +12,8 @@
             <div
                 :class="$style.tableCellContent"
                 :style="{
-                    flexFlow: contentDirection
+                    flexFlow: contentDirection,
+                    gap: contentGap && `${contentGap}px`
                 }">
                 <slot/>
             </div>
@@ -31,6 +32,7 @@
         contentDirection = 'row'
     } = defineProps<{
         readonly contentDirection?: 'column' | 'row';
+        readonly contentGap?: number;
     }>();
 
     defineSlots<{

package/src/component/primitive/AnchorPopup.vue

@@ -13,8 +13,8 @@
 <script
     lang="ts"
     setup>
+    import { useMutationObserver } from '@basmilius/common';
     import { isHtmlElement } from '@basmilius/utils';
-    import { useMutationObserver } from '@flux-ui/internals';
     import type { FluxDirection } from '@flux-ui/types';
     import { type ComponentPublicInstance, onMounted, onUnmounted, reactive, ref, unref, useTemplateRef, watchEffect } from 'vue';
 

package/src/component/primitive/FilterItem.vue

@@ -12,9 +12,9 @@
 <script
     lang="ts"
     setup>
+    import { useLoaded } from '@basmilius/common';
     import type { FluxFilterItem, FluxFilterValue } from '@flux-ui/types';
     import { computed, ref, unref, watch } from 'vue';
-    import { useLoaded } from '$flux/composable/private';
     import FluxMenuItem from '$flux/component/FluxMenuItem.vue';
 
     const emit = defineEmits<{

package/src/component/primitive/SelectBase.vue

@@ -133,7 +133,8 @@
 <script
     lang="ts"
     setup>
-    import { unrefTemplateElement, useClickOutside } from '@flux-ui/internals';
+    import { useClickOutside } from '@basmilius/common';
+    import { unrefTemplateElement } from '@flux-ui/internals';
     import type { FluxFormSelectOption, FluxFormSelectOptions } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { type ComponentPublicInstance, computed, nextTick, ref, toRef, unref, useTemplateRef, watch } from 'vue';

package/src/composable/private/index.ts

@@ -1,3 +1,2 @@
 export { default as useFormSelect } from './useFormSelect';
-export { default as useLoaded } from './useLoaded';
 export { default as useTranslate } from './useTranslate';

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

@@ -91,7 +91,7 @@
 .badgeGray {
     composes: badge;
 
-    --color: var(--gray-700);
+    --color: var(--foreground);
 
     .badgeLabel {
         color: var(--foreground-prominent);