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

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

@@ -1,8 +1,10 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
     };
     refs: {};
     rootEl: any;

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

@@ -1,8 +1,10 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
     };
     refs: {};
     rootEl: any;

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

@@ -1,12 +1,14 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, 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;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
     };
     refs: {};
     rootEl: any;

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

@@ -1,11 +1,13 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly mode?: 'in-out' | 'out-in';
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
     };
     refs: {};
     rootEl: any;

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

@@ -1,11 +1,13 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly mode?: 'in-out' | 'out-in';
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
     };
     refs: {};
     rootEl: any;

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

@@ -1,12 +1,14 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, 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;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
     };
     refs: {};
     rootEl: any;

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

@@ -1,11 +1,13 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly mode?: 'in-out' | 'out-in';
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
     };
     refs: {};
     rootEl: any;

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

@@ -1,11 +1,13 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly mode?: 'in-out' | 'out-in';
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
     };
     refs: {};
     rootEl: any;

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

@@ -1,12 +1,14 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, 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;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
     };
     refs: {};
     rootEl: any;

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

@@ -1,12 +1,14 @@
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { VNode, 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;
+    slots: Readonly<{
+        default(): VNode[];
+    }> & {
+        default(): VNode[];
     };
     refs: {};
     rootEl: any;

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@flux-ui/components",
     "description": "A set of opiniated UI components.",
-    "version": "3.0.0-next.34",
+    "version": "3.0.0-next.38",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
-    "homepage": "https://flux.bas.dev",
+    "homepage": "https://flux-ui.dev",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/basmilius/flux.git",
@@ -23,7 +23,7 @@
     ],
     "scripts": {
         "build": "vue-tsc && vite build",
-        "dev": "vite build --mode dev --watch"
+        "dev": "vite build --watch --mode development"
     },
     "engines": {
         "node": ">=23"
@@ -33,8 +33,7 @@
             "types": "./dist/index.d.ts",
             "default": "./dist/index.js"
         },
-        "./style.css": "./dist/index.css",
-        "./*": "./*"
+        "./style.css": "./dist/index.css"
     },
     "publishConfig": {
         "access": "public",
@@ -42,37 +41,34 @@
     },
     "files": [
         "dist",
-        "src",
-        "tsconfig.json"
+        "src"
     ],
     "main": "./dist/index.js",
     "module": "./dist/index.js",
     "types": "./dist/index.d.ts",
-    "typings": "./dist/index.d.ts",
-    "sideEffects": false,
     "dependencies": {
-        "@basmilius/common": "^3.12.1",
-        "@basmilius/utils": "^3.12.1",
-        "@flux-ui/internals": "3.0.0-next.34",
-        "@flux-ui/types": "3.0.0-next.34",
+        "@basmilius/common": "^3.19.0",
+        "@basmilius/utils": "^3.19.0",
+        "@flux-ui/internals": "3.0.0-next.38",
+        "@flux-ui/types": "3.0.0-next.38",
         "@fortawesome/fontawesome-common-types": "^7.2.0",
         "clsx": "^2.1.1",
         "imask": "^7.6.1",
-        "lodash-es": "^4.17.23",
+        "lodash-es": "^4.18.1",
         "luxon": "^3.7.2",
-        "vue": "^3.6.0-beta.7"
+        "vue": "^3.6.0-beta.10"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.12.1",
+        "@basmilius/vite-preset": "^3.19.0",
         "@types/lodash-es": "^4.17.12",
         "@types/luxon": "^3.7.1",
-        "@types/node": "^25.5.0",
-        "@vitejs/plugin-vue": "^6.0.5",
-        "@vue/tsconfig": "^0.9.0",
+        "@types/node": "^25.6.0",
+        "@vitejs/plugin-vue": "^6.0.6",
+        "@vue/tsconfig": "^0.9.1",
         "pinia": "^3.0.4",
-        "sass-embedded": "^1.98.0",
-        "typescript": "^5.9.3",
-        "vite": "^8.0.0",
-        "vue-tsc": "^3.2.5"
+        "sass-embedded": "^1.99.0",
+        "typescript": "^6.0.3",
+        "vite": "^8.0.10",
+        "vue-tsc": "^3.2.7"
     }
 }

package/src/component/FluxActionBar.vue

@@ -48,6 +48,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import { useTranslate } from '$flux/composable/private';
     import FluxButtonGroup from './FluxButtonGroup.vue';
     import FluxDestructiveButton from './FluxDestructiveButton.vue';
@@ -67,12 +68,12 @@
     }>();
 
     const slots = defineSlots<{
-        primary?(): any;
-        actionsEnd?(): any;
-        actionsStart?(): any;
-        actionsAfterSearch?(): any;
-        actionsBeforeSearch?(): any;
-        search?(): any;
+        primary?(): VNode[];
+        actionsEnd?(): VNode[];
+        actionsStart?(): VNode[];
+        actionsAfterSearch?(): VNode[];
+        actionsBeforeSearch?(): VNode[];
+        search?(): VNode[];
 
         filter?(props: {
             close(): void;
@@ -81,13 +82,13 @@
             readonly paneY: number;
             readonly openerWidth: number;
             readonly openerHeight: number;
-        }): any;
+        }): VNode[];
 
         filterOpener?(props: {
             close(): void;
             open(): void;
             toggle(): void;
-        }): any;
+        }): VNode[];
     }>();
 
     const translate = useTranslate();

package/src/component/FluxActionPane.vue

@@ -23,6 +23,7 @@
 <script
     lang="ts"
     setup>
+    import type { VNode } from 'vue';
     import FluxButtonStack from './FluxButtonStack.vue';
     import FluxPane from './FluxPane.vue';
     import FluxPaneBody from './FluxPaneBody.vue';
@@ -33,8 +34,8 @@
     }>();
 
     const slots = defineSlots<{
-        default?(): any;
-        buttons?(): any;
-        base?(): any;
+        default?(): VNode[];
+        buttons?(): VNode[];
+        base?(): VNode[];
     }>();
 </script>

package/src/component/{FluxActions.vue → FluxActionStack.vue}

@@ -12,11 +12,11 @@
     lang="ts"
     setup>
     import { useFocusZone } from '@flux-ui/internals';
-    import { useTemplateRef } from 'vue';
+    import { useTemplateRef, type VNode } from 'vue';
     import FluxStack from './FluxStack.vue';
 
     defineSlots<{
-        default(): any;
+        default(): VNode[];
     }>();
 
     const elementRef = useTemplateRef('element');

package/src/component/FluxAdaptiveGroup.vue

@@ -0,0 +1,112 @@
+<template>
+    <div
+        ref="element"
+        :class="$style.adaptiveGroup"
+        :style="{'--gap': `${gap}px`}">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { animationFrameDebounce, unrefTemplateElement } from '@flux-ui/internals';
+    import { provide, shallowReactive, useTemplateRef, watch, watchEffect } from 'vue';
+    import { type FluxAdaptiveGroupChild, FluxAdaptiveGroupInjectionKey } from '$flux/data';
+    import $style from '$flux/css/component/AdaptiveSlot.module.scss';
+
+    const {
+        gap = 9
+    } = defineProps<{
+        readonly gap?: number;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const elementRef = useTemplateRef('element');
+    const children = shallowReactive(new Map<number, FluxAdaptiveGroupChild>());
+
+    const reflow = animationFrameDebounce(() => {
+        const element = unrefTemplateElement(elementRef);
+
+        if (!element) {
+            return;
+        }
+
+        const available = element.clientWidth;
+        const entries = Array.from(children.entries());
+        const states = new Map<number, boolean>(entries.map(([uid]) => [uid, true]));
+
+        const sorted = [...entries].sort(([, a], [, b]) => a.priority.value - b.priority.value);
+
+        const currentTotal = () => {
+            let total = 0;
+            let visible = 0;
+
+            for (const [uid, child] of entries) {
+                const width = states.get(uid)
+                    ? child.desiredDefaultWidth.value
+                    : child.desiredFallbackWidth.value;
+
+                if (width === 0) {
+                    continue;
+                }
+
+                total += width;
+                visible++;
+            }
+
+            return total + Math.max(0, visible - 1) * gap;
+        };
+
+        while (currentTotal() > available) {
+            const victim = sorted.find(([uid]) => states.get(uid));
+
+            if (!victim) {
+                break;
+            }
+
+            states.set(victim[0], false);
+        }
+
+        for (const [uid, child] of entries) {
+            child.isDefaultVisible.value = !!states.get(uid);
+        }
+    });
+
+    watchEffect(() => {
+        for (const child of children.values()) {
+            // Touch reactive refs so this effect tracks them.
+            void child.priority.value;
+            void child.desiredDefaultWidth.value;
+            void child.desiredFallbackWidth.value;
+        }
+
+        reflow();
+    });
+
+    provide(FluxAdaptiveGroupInjectionKey, {
+        register(uid, child) {
+            children.set(uid, child);
+        },
+        unregister(uid) {
+            children.delete(uid);
+        }
+    });
+
+    watch(elementRef, (element, _, onCleanup) => {
+        if (!element) {
+            return;
+        }
+
+        const observer = new ResizeObserver(reflow);
+        observer.observe(element);
+        observer.observe(document.documentElement);
+
+        onCleanup(() => {
+            observer.disconnect();
+        });
+    }, {immediate: true});
+</script>

package/src/component/FluxAdaptiveSlot.vue

@@ -0,0 +1,159 @@
+<template>
+    <div
+        ref="element"
+        :class="$style.adaptiveSlot"
+        :style="group ? 'flex-shrink: 0' : undefined">
+        <slot v-if="isDefaultVisible"/>
+        <slot
+            v-else
+            name="fallback"/>
+    </div>
+
+    <div
+        ref="defaultMeasurer"
+        :class="$style.adaptiveSlotMeasurer"
+        aria-hidden="true">
+        <slot/>
+    </div>
+
+    <div
+        ref="fallbackMeasurer"
+        :class="$style.adaptiveSlotMeasurer"
+        aria-hidden="true">
+        <slot name="fallback"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { animationFrameDebounce, unrefTemplateElement } from '@flux-ui/internals';
+    import { getCurrentInstance, onMounted, onUnmounted, ref, toRef, useTemplateRef, watch } from 'vue';
+    import { useAdaptiveGroupInjection } from '$flux/composable';
+    import $style from '$flux/css/component/AdaptiveSlot.module.scss';
+
+    const props = withDefaults(defineProps<{
+        readonly priority?: number;
+    }>(), {
+        priority: 1
+    });
+
+    defineSlots<{
+        default(): any;
+        fallback?(): any;
+    }>();
+
+    const group = useAdaptiveGroupInjection();
+    const instance = getCurrentInstance()!;
+
+    const elementRef = useTemplateRef('element');
+    const defaultMeasurerRef = useTemplateRef('defaultMeasurer');
+    const fallbackMeasurerRef = useTemplateRef('fallbackMeasurer');
+
+    const isDefaultVisible = ref(true);
+    const desiredDefaultWidth = ref(0);
+    const desiredFallbackWidth = ref(0);
+
+    const priorityRef = toRef(props, 'priority');
+
+    // Keep both desired widths in sync with the hidden measurers.
+    watch([defaultMeasurerRef, fallbackMeasurerRef], ([def, fb], _, onCleanup) => {
+        if (!def) {
+            return;
+        }
+
+        const update = () => {
+            desiredDefaultWidth.value = def.offsetWidth;
+            desiredFallbackWidth.value = fb?.offsetWidth ?? 0;
+        };
+
+        const observer = new ResizeObserver(update);
+        observer.observe(def);
+
+        if (fb) {
+            observer.observe(fb);
+        }
+
+        observer.observe(document.documentElement);
+
+        update();
+
+        onCleanup(() => {
+            observer.disconnect();
+        });
+    }, {immediate: true});
+
+    if (group) {
+        onMounted(() => {
+            group.register(instance.uid, {
+                priority: priorityRef,
+                desiredDefaultWidth,
+                desiredFallbackWidth,
+                isDefaultVisible
+            });
+        });
+
+        onUnmounted(() => {
+            group.unregister(instance.uid);
+        });
+    } else {
+        // Standalone: self-measurement with parent-observer hysteresis.
+        let lastFailedParentWidth = -1;
+
+        const reflow = animationFrameDebounce(() => {
+            const element = unrefTemplateElement(elementRef);
+
+            if (!element || !isDefaultVisible.value) {
+                return;
+            }
+
+            const desired = desiredDefaultWidth.value;
+            const available = element.clientWidth;
+
+            if (desired > available) {
+                lastFailedParentWidth = element.parentElement?.clientWidth ?? -1;
+                isDefaultVisible.value = false;
+            } else {
+                lastFailedParentWidth = -1;
+            }
+        });
+
+        watch(elementRef, (element, _, onCleanup) => {
+            if (!element) {
+                return;
+            }
+
+            const parent = element.parentElement;
+
+            const observer = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    if (entry.target === parent && !isDefaultVisible.value) {
+                        if (parent.clientWidth > lastFailedParentWidth) {
+                            isDefaultVisible.value = true;
+                        }
+                    }
+                }
+
+                reflow();
+            });
+
+            observer.observe(element);
+
+            if (parent) {
+                observer.observe(parent);
+            }
+
+            observer.observe(document.documentElement);
+
+            onCleanup(() => {
+                observer.disconnect();
+            });
+        }, {immediate: true});
+
+        // Default content size changed: forget failure history and retry.
+        watch(desiredDefaultWidth, () => {
+            lastFailedParentWidth = -1;
+            isDefaultVisible.value = true;
+        });
+    }
+</script>

package/src/component/FluxAlert.vue

@@ -1,20 +1,15 @@
 <template>
-    <FluxPane>
-        <FluxPaneHeader
-            :icon="alert.icon"
-            :title="alert.title"/>
-
-        <FluxPaneBody v-html="alert.message"/>
-
-        <FluxPaneFooter>
-            <FluxSpacer/>
-
+    <DialogLayout
+        :icon="alert.icon"
+        :message="alert.message"
+        :title="alert.title">
+        <template #footer>
             <FluxPrimaryButton
                 icon-leading="circle-check"
                 :label="translate('flux.ok')"
                 @click="alert.onClose()"/>
-        </FluxPaneFooter>
-    </FluxPane>
+        </template>
+    </DialogLayout>
 </template>
 
 <script
@@ -22,12 +17,8 @@
     setup>
     import type { FluxAlertObject } from '@flux-ui/types';
     import { useTranslate } from '$flux/composable/private';
-    import FluxPane from './FluxPane.vue';
-    import FluxPaneBody from './FluxPaneBody.vue';
-    import FluxPaneFooter from './FluxPaneFooter.vue';
-    import FluxPaneHeader from './FluxPaneHeader.vue';
     import FluxPrimaryButton from './FluxPrimaryButton.vue';
-    import FluxSpacer from './FluxSpacer.vue';
+    import { DialogLayout } from './primitive';
 
     defineProps<{
         readonly alert: FluxAlertObject;

package/src/component/FluxAnimatedColors.vue

@@ -41,7 +41,7 @@
             return [];
         }
 
-        const mulberry = mulberry32(seed ?? unref(componentId));
+        const mulberry = mulberry32(seed ?? componentId.value);
         const polygons: Polygon[] = [];
 
         for (const color of colors) {