@flux-ui/application 3.0.0-next.58 → 3.0.0-next.59

package/dist/component/FluxApplicationMenu.vue.d.ts

@@ -1,7 +1,4 @@
 import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-type __VLS_Props = {
-    readonly showPageIndicator?: boolean;
-};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -19,7 +16,7 @@ declare function __VLS_template(): {
     rootEl: HTMLElement;
 };
 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, {}, HTMLElement>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/component/FluxApplicationMenuContext.vue.d.ts

@@ -1,4 +1,4 @@
-import { FluxPressableType, FluxTo } from '@flux-ui/types';
+import { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly subtitle?: string;
@@ -9,6 +9,7 @@ type __VLS_Props = {
     readonly target?: string;
     readonly to?: FluxTo;
     readonly entryTo?: FluxTo;
+    readonly icon?: FluxIconName;
     readonly type?: FluxPressableType;
 };
 declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;

package/dist/composable/index.d.ts

@@ -1,3 +1,4 @@
 export { default as useApplicationContextMenu } from './useApplicationContextMenu';
+export { default as useApplicationContextRegistration } from './useApplicationContextRegistration';
 export { default as useApplicationInjection } from './useApplicationInjection';
 export { default as useApplicationMenu } from './useApplicationMenu';

package/dist/data/index.d.ts

@@ -1,5 +1,5 @@
+import { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
 import { ComputedRef, InjectionKey, Ref } from 'vue';
-import { FluxPressableType, FluxTo } from '@flux-ui/types';
 export declare const FluxApplicationInjectionKey: InjectionKey<FluxApplicationInjection>;
 export type FluxApplicationContextInfo = {
     readonly id: symbol;
@@ -8,6 +8,7 @@ export type FluxApplicationContextInfo = {
     readonly to?: FluxTo;
     readonly entryTo?: FluxTo;
     readonly href?: string;
+    readonly icon?: FluxIconName;
     readonly type?: FluxPressableType;
 };
 export type FluxApplicationInjection = {

package/dist/index.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";:root {
+:root {
   --application-duration: 360ms;
   --application-menu-surface: var(--gray-100);
   --application-menu-surface-stroke: var(--gray-200);
@@ -178,10 +178,10 @@
 }
 
 .application-hero-subtitle {
+  margin: 0;
   color: var(--foreground-secondary);
   font-size: 18px;
-}
-.application-menu {
+}.application-menu {
   position: fixed;
   display: flex;
   top: 0;
@@ -232,30 +232,12 @@
   background: linear-gradient(to top, var(--application-menu-surface), transparent);
   transition: opacity var(--application-duration) var(--swift-out);
 }
-.application-menu-footer {
-  /**
-   * Collapses the footer in sync with the slider track when the
-   * user navigates into a context-menu panel. Animating `max-height`
-   * is the standard hack to transition a height-auto element; 50vh
-   * is far above any realistic footer height yet small enough to
-   * animate smoothly without the leading edge appearing to "wait".
-   */
-}
-.application-menu-footer[data-hidden] {
-  max-height: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  opacity: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-.application-menu-footer[data-hidden]::before {
-  opacity: 0;
-}
 
 .application-menu-header {
   padding-top: max(12px, env(safe-area-inset-top));
   border-bottom: 1px solid var(--application-menu-surface-stroke);
+  overflow: hidden;
+  transition: height var(--application-duration) var(--swift-out);
 }
 .application-menu-header::before {
   top: calc(100% + 1px);
@@ -328,13 +310,6 @@
   border-color: var(--foreground-prominent);
 }
 
-/**
- * No visual animation on enter/leave — just hold the leaving panel in
- * the DOM for the duration of the slider's translate transition so it
- * stays visible while the track slides away from it. Without this the
- * v-for would unmount the panel the moment matches shrinks, leaving
- * the slider sliding over an empty track.
- */
 .application-menu-panel-enter-active,
 .application-menu-panel-enter-from,
 .application-menu-panel-leave-active,
@@ -414,6 +389,11 @@
   font-weight: 500;
 }
 
+.application-menu .menu-item-highlighted {
+  background: var(--gray-200);
+  color: var(--foreground-prominent);
+}
+
 .application-menu-account {
   position: relative;
   pointer-events: none;
@@ -705,7 +685,7 @@
   flex-flow: row;
   gap: 21px;
 }
-.application-top-tabs .tab-bar {
+.application-top-tabs .base-tab-bar {
   --tab-padding: 18px;
   width: 100%;
   box-shadow: unset;

package/dist/index.js

@@ -1,9 +1,9 @@
-import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, customRef, defineComponent, h, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, shallowRef, toDisplayString, toRef, unref, useSlots, watch, withCtx } from "vue";
+import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, customRef, defineComponent, h, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, shallowRef, toDisplayString, toRef, unref, useSlots, watch, withCtx, withDirectives } from "vue";
 import { DateTime } from "luxon";
 import { RouterView, matchedRouteKey, useRoute, viewDepthKey } from "vue-router";
 import { FluxFadeTransition, FluxFlyout, FluxIcon, FluxMenu, FluxMenuItem, FluxPane, FluxRouteTransition, FluxSecondaryButton, FluxSpacer, FluxTabBar } from "@flux-ui/components";
-//#region ../../node_modules/.bun/@basmilius+utils@3.21.0/node_modules/@basmilius/utils/dist/index.mjs
-function x$2(e) {
+//#region ../../node_modules/.bun/@basmilius+utils@3.24.0/node_modules/@basmilius/utils/dist/index.mjs
+function x$1(e) {
 	let t = {};
 	do {
 		if (e.name === ``) break;
@@ -933,7 +933,7 @@ var convertLchToLab = ({ l, c, h, alpha }, mode = "lab") => {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/xyz65/constants.js
-var k$4 = Math.pow(29, 3) / Math.pow(3, 3);
+var k$5 = Math.pow(29, 3) / Math.pow(3, 3);
 var e$2 = Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/constants.js
@@ -951,7 +951,7 @@ Math.pow(29, 3) / Math.pow(3, 3);
 Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab65/convertLab65ToXyz65.js
-var fn$1 = (v) => Math.pow(v, 3) > e$2 ? Math.pow(v, 3) : (116 * v - 16) / k$4;
+var fn$1 = (v) => Math.pow(v, 3) > e$2 ? Math.pow(v, 3) : (116 * v - 16) / k$5;
 var convertLab65ToXyz65 = ({ l, a, b, alpha }) => {
 	if (l === void 0) l = 0;
 	if (a === void 0) a = 0;
@@ -973,7 +973,7 @@ var convertLab65ToXyz65 = ({ l, a, b, alpha }) => {
 var convertLab65ToRgb = (lab) => convertXyz65ToRgb(convertLab65ToXyz65(lab));
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab65/convertXyz65ToLab65.js
-var f$2 = (value) => value > e$2 ? Math.cbrt(value) : (k$4 * value + 16) / 116;
+var f$2 = (value) => value > e$2 ? Math.cbrt(value) : (k$5 * value + 16) / 116;
 var convertXyz65ToLab65 = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -1835,11 +1835,11 @@ var definition$16 = {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/xyz50/constants.js
-var k$2 = Math.pow(29, 3) / Math.pow(3, 3);
+var k$3 = Math.pow(29, 3) / Math.pow(3, 3);
 var e = Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab/convertLabToXyz50.js
-var fn = (v) => Math.pow(v, 3) > e ? Math.pow(v, 3) : (116 * v - 16) / k$2;
+var fn = (v) => Math.pow(v, 3) > e ? Math.pow(v, 3) : (116 * v - 16) / k$3;
 var convertLabToXyz50 = ({ l, a, b, alpha }) => {
 	if (l === void 0) l = 0;
 	if (a === void 0) a = 0;
@@ -1888,7 +1888,7 @@ var convertRgbToXyz50 = (rgb) => {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab/convertXyz50ToLab.js
-var f$1 = (value) => value > e ? Math.cbrt(value) : (k$2 * value + 16) / 116;
+var f$1 = (value) => value > e ? Math.cbrt(value) : (k$3 * value + 16) / 116;
 var convertXyz50ToLab = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -2094,7 +2094,7 @@ var u_fn$1 = (x, y, z) => 4 * x / (x + 15 * y + 3 * z);
 var v_fn$1 = (x, y, z) => 9 * y / (x + 15 * y + 3 * z);
 var un$1 = u_fn$1(D50.X, D50.Y, D50.Z);
 var vn$1 = v_fn$1(D50.X, D50.Y, D50.Z);
-var l_fn = (value) => value <= e ? k$2 * value : 116 * Math.cbrt(value) - 16;
+var l_fn = (value) => value <= e ? k$3 * value : 116 * Math.cbrt(value) - 16;
 var convertXyz50ToLuv = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -2134,7 +2134,7 @@ var convertLuvToXyz50 = ({ l, u, v, alpha }) => {
 	if (v === void 0) v = 0;
 	let up = u / (13 * l) + un;
 	let vp = v / (13 * l) + vn;
-	let y = D50.Y * (l <= 8 ? l / k$2 : Math.pow((l + 16) / 116, 3));
+	let y = D50.Y * (l <= 8 ? l / k$3 : Math.pow((l + 16) / 116, 3));
 	let res = {
 		mode: "xyz50",
 		x: y * (9 * up) / (4 * vp),
@@ -3103,7 +3103,7 @@ useMode(definition$2);
 useMode(definition$1);
 useMode(definition);
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+http-client@3.21.0+96a7401e32316653/node_modules/@basmilius/http-client/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+http-client@3.24.0+96a7401e32316653/node_modules/@basmilius/http-client/dist/index.mjs
 function c(e) {
 	return class extends e {
 		constructor(...e) {
@@ -3118,7 +3118,7 @@ var l = Symbol(), u = Symbol(), d = Symbol(), f = Symbol(), p = Symbol(), m = Sy
 function v(e) {
 	return e && typeof e == `object` && !!e[p];
 }
-function y$1(e) {
+function y(e) {
 	if (!v(e)) throw Error(`@dto assert given object is not a class decorated with @Dto.`);
 }
 var ae = Symbol();
@@ -3139,17 +3139,17 @@ function b(e, t = 0, n) {
 		}
 	};
 }
-function x$1(e) {
-	return y$1(e), e[f];
+function x(e) {
+	return y(e), e[f];
 }
 var S = b(function(e, t, n, r) {
 	let i = e[ie];
 	i(e, t, n, r), e[m] && S(e[m], e[h$1], e[m][e[h$1]]);
-}, 0, 1), C$1 = b(function(e) {
-	y$1(e), e[f] && (e[f] = !1, S(e, f, !1, !0)), !(!e[u] || e[u].length === 0) && e[u].filter(x$1).forEach(C$1);
+}, 0, 1), C = b(function(e) {
+	y(e), e[f] && (e[f] = !1, S(e, f, !1, !0)), !(!e[u] || e[u].length === 0) && e[u].filter(x).forEach(C);
 });
 var w = b(function(e, t) {
-	y$1(e), e[f] || (e[f] = !0, S(e, f, !0, !1)), e[m] && w(e[m], e[h$1]);
+	y(e), e[f] || (e[f] = !0, S(e, f, !0, !1)), e[m] && w(e[m], e[h$1]);
 });
 function T(e, t, n) {
 	t[u] ??= [], !t[u].includes(e) && t[u].push(e), e[m] !== t && (e[m] = t), e[h$1] !== n && (e[h$1] = n);
@@ -3165,7 +3165,7 @@ function le(e, t) {
 	let n = e[re];
 	n(e, t);
 }
-function D(e, t) {
+function D$1(e, t) {
 	if (u in t) {
 		let n = t[u].indexOf(e);
 		n !== -1 && t[u].splice(n, 1);
@@ -3173,14 +3173,14 @@ function D(e, t) {
 	e[m] = void 0, e[h$1] = void 0;
 }
 function ue(e, t) {
-	if (v(t)) D(t, e);
+	if (v(t)) D$1(t, e);
 	else if (Array.isArray(t)) {
-		for (let n of t) v(n) && D(n, e);
+		for (let n of t) v(n) && D$1(n, e);
 		t[m] = void 0, t[h$1] = void 0;
 	}
 }
 var O$1 = {};
-var k$1 = {
+var k$2 = {
 	deleteProperty(e, t) {
 		if (Reflect.deleteProperty(e, t), A$1(e, t)) return !0;
 		let n = e[m];
@@ -3221,7 +3221,7 @@ var de = {
 		let i = e[d][t];
 		if (!i || !i.set) return Reflect.set(e, t, n, r);
 		let a = i.get?.call(e) ?? void 0;
-		return ne(n, a) ? !0 : (ue(e, a), Array.isArray(n) && !n[_] && (n = new Proxy(n, k$1)), i.set.call(e, n), E(e, t, n), w(e, t), S(e, t, n, a), !0);
+		return ne(n, a) ? !0 : (ue(e, a), Array.isArray(n) && !n[_] && (n = new Proxy(n, k$2)), i.set.call(e, n), E(e, t, n), w(e, t), S(e, t, n, a), !0);
 	}
 }, fe$1 = {
 	get(e, t, n) {
@@ -3237,7 +3237,7 @@ var de = {
 		return t in e ? Reflect.set(e, t, n, r) : Reflect.set(e.value, t, n);
 	}
 }, pe$1 = { construct(e, t, n) {
-	t = t.map((e) => Array.isArray(e) ? new Proxy(e, k$1) : e);
+	t = t.map((e) => Array.isArray(e) ? new Proxy(e, k$2) : e);
 	let r = customRef((r, i) => {
 		let a = markRaw(Reflect.construct(e, t, n));
 		a[l] = t, a[f] = !1, a[re] = r, a[ie] = i;
@@ -3251,7 +3251,7 @@ var de = {
 } };
 function me() {
 	let e = this;
-	y$1(e);
+	y(e);
 	let t = O$1[e[p]], n = new t(...e[l]);
 	for (let [e, t] of Object.entries(this[d])) t.set && (n[e] = v(this[e]) ? this[e].clone() : this[e]);
 	return n;
@@ -3270,9 +3270,9 @@ function ge() {
 	}
 	return e;
 }
-function j(e) {
+function j$1(e) {
 	ve(e);
-	let t = Object.freeze(x$2(e)), a = Object.keys(t);
+	let t = Object.freeze(x$1(e)), a = Object.keys(t);
 	return K$1(e.prototype, d, t), K$1(e.prototype, p, e.name), K$1(e.prototype, g, a), K$1(e, Symbol.hasInstance, (t) => typeof t == `object` && t?.[p] === e.name), G$1(e, `clone`, me), G$1(e, `fill`, he), G$1(e, `toJSON`, ge), _e(e);
 }
 function _e(e) {
@@ -3302,7 +3302,7 @@ var V = class {
 		this.#e = e, this.#t = t;
 	}
 };
-V = B([j], V);
+V = B([j$1], V);
 var U = class {
 	get items() {
 		return this.#e;
@@ -3328,7 +3328,7 @@ var U = class {
 		this.#e = e, this.#t = t, this.#n = n, this.#r = r, this.#i = i;
 	}
 };
-U = B([j], U);
+U = B([j$1], U);
 var W = U;
 var G = class {
 	get code() {
@@ -3351,7 +3351,7 @@ var G = class {
 		this.#e = e, this.#t = t, this.#n = n, this.#r = r;
 	}
 };
-G = B([j], G);
+G = B([j$1], G);
 var K = G;
 var q = class {
 	get code() {
@@ -3378,7 +3378,7 @@ var q = class {
 		this.#e = e, this.#t = t, this.#n = n, this.#r = r, this.#i = i;
 	}
 };
-q = B([j], q);
+q = B([j$1], q);
 var J = q, Y;
 var X = Y = class {
 	static parsePaginatedAdapter(e, t) {
@@ -3404,13 +3404,13 @@ X = Y = B([c], X);
 converter(`oklch`);
 RegExp(`[a-z]`), RegExp(`[A-Z]`), RegExp(`[0-9]`), RegExp(`[!"#$%&'()*+,-./:;<=>?@[\\\\\\]^_\`{|}~]`);
 //#endregion
-//#region ../internals/dist/composable-CJXC7sly.js
-function y(e, t, n, r = { passive: !0 }) {
+//#region ../internals/dist/composable-Cp0PgZry.js
+function D(e, t, n, r = { passive: !0 }) {
 	watch(e, (e, i, a) => {
 		e && (e.addEventListener(t, n, r), a(() => e.removeEventListener(t, n)));
 	}, { immediate: !0 });
 }
-function x(e, t) {
+function k(e, t) {
 	let n = `flux/${e}`, r = ref(i() ?? t);
 	function i() {
 		if (n in localStorage) {
@@ -3427,9 +3427,9 @@ function x(e, t) {
 		})]), localStorage.setItem(n, JSON.stringify(t));
 	}), r;
 }
-function C(e) {
+function j(e) {
 	let t = ref(0), n = ref(0);
-	return e ||= ref(document), y(e, `scroll`, () => {
+	return e ||= ref(document), D(e, `scroll`, () => {
 		let r = unref(e);
 		r instanceof Document && (r = r.scrollingElement), t.value = r?.scrollLeft ?? 0, n.value = r?.scrollTop ?? 0;
 	}), {
@@ -3438,6 +3438,42 @@ function C(e) {
 	};
 }
 //#endregion
+//#region ../internals/dist/directive-Dprka-AO.js
+var i = class {
+	#e;
+	#t;
+	constructor(e) {
+		this.#e = e, this.#t = new MutationObserver(this.onMutation.bind(this));
+	}
+	register() {
+		this.#t.observe(this.#e, {
+			childList: !0,
+			subtree: !0
+		}), requestAnimationFrame(this.onMutation.bind(this));
+	}
+	unregister() {
+		this.#t.disconnect();
+	}
+	onMutation() {
+		let { height: e } = getComputedStyle(this.#e);
+		this.#e.style.height = `auto`;
+		let { height: t } = getComputedStyle(this.#e);
+		this.#e.style.height = e, t !== e && (getComputedStyle(this.#e), requestAnimationFrame(() => this.#e.style.height = t));
+	}
+}, a = {
+	beforeUnmount(e) {
+		o.get(e)?.unregister(), o.delete(e);
+	},
+	mounted(e) {
+		let t = new i(e);
+		t.register(), o.set(e, t);
+	},
+	getSSRProps() {
+		return {};
+	}
+};
+var o = /* @__PURE__ */ new WeakMap();
+//#endregion
 //#region src/data/index.ts
 var FluxApplicationInjectionKey = Symbol();
 //#endregion
@@ -3499,7 +3535,7 @@ var FluxApplication_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const route = useRoute_default();
 		const matchedMenuRoutes = useNamedRoutes_default(toRef(() => __props.contextMenuName));
-		const isMenuCollapsed = x("application-menu-collapsed", true);
+		const isMenuCollapsed = k("application-menu-collapsed", true);
 		const layout = ref("default");
 		const totalLevels = computed(() => 1 + matchedMenuRoutes.value.length);
 		const viewIndex = ref(0);
@@ -3605,6 +3641,29 @@ function useApplicationContextMenu_default(name = "menu") {
 	};
 }
 //#endregion
+//#region src/composable/useApplicationContextRegistration.ts
+function useApplicationContextRegistration_default(info) {
+	const injection = inject(FluxApplicationInjectionKey, null);
+	if (!injection) return;
+	const id = Symbol("application-context");
+	onMounted(() => {
+		injection.pushContext({
+			id,
+			...info()
+		});
+	});
+	watch(info, (next) => {
+		injection.removeContext(id);
+		injection.pushContext({
+			id,
+			...next
+		});
+	});
+	onBeforeUnmount(() => {
+		injection.removeContext(id);
+	});
+}
+//#endregion
 //#region src/composable/useApplicationInjection.ts
 function useApplicationInjection_default() {
 	const injection = inject(FluxApplicationInjectionKey);
@@ -3724,6 +3783,7 @@ var ApplicationMenu_module_default = {
 	menuItemIcon: `menu-item-icon`,
 	menuItemLabel: `menu-item-label`,
 	menuItemActive: `menu-item-active`,
+	menuItemHighlighted: `menu-item-highlighted`,
 	applicationMenuAccount: `application-menu-account`,
 	applicationMenuAccountSwitcher: `application-menu-account-switcher application-menu-account`,
 	avatar: `avatar`,
@@ -3740,36 +3800,27 @@ var ApplicationMenu_module_default = {
 //#endregion
 //#region src/component/FluxApplicationMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = ["data-collapsed", "data-collapsible"];
-var _hoisted_2 = [
-	"aria-current",
-	"aria-label",
-	"onClick"
-];
 //#endregion
 //#region src/component/FluxApplicationMenu.vue
 var FluxApplicationMenu_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxApplicationMenu",
-	props: { showPageIndicator: {
-		type: Boolean,
-		default: true
-	} },
 	setup(__props) {
 		const slots = useSlots();
 		const { isMenuCollapsed, showDesktopMenuToggle } = useApplicationInjection_default();
-		const { goToLevel, isMainMenuVisible, totalLevels, viewIndex } = useApplicationMenu_default();
+		const { isMainMenuVisible, viewIndex } = useApplicationMenu_default();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("aside", {
 				class: normalizeClass(unref(ApplicationMenu_module_default).applicationMenu),
 				"data-collapsed": unref(isMenuCollapsed) ? "" : void 0,
 				"data-collapsible": unref(showDesktopMenuToggle) ? "" : void 0
 			}, [
-				slots.header ? (openBlock(), createBlock(unref(FluxMenu), {
+				slots.header ? withDirectives((openBlock(), createBlock(unref(FluxMenu), {
 					key: 0,
 					class: normalizeClass(unref(ApplicationMenu_module_default).applicationMenuHeader)
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
 					_: 3
-				}, 8, ["class"])) : createCommentVNode("", true),
+				}, 8, ["class"])), [[unref(a)]]) : createCommentVNode("", true),
 				createElementVNode("div", { class: normalizeClass(unref(ApplicationMenu_module_default).applicationMenuStage) }, [createElementVNode("div", {
 					class: normalizeClass(unref(ApplicationMenu_module_default).applicationMenuTrack),
 					style: normalizeStyle({ "--view-index": unref(viewIndex) })
@@ -3777,28 +3828,16 @@ var FluxApplicationMenu_default = /* @__PURE__ */ defineComponent({
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 3
 				}, 8, ["class"]), renderSlot(_ctx.$slots, "context")], 6)], 2),
-				__props.showPageIndicator && unref(totalLevels) > 1 ? (openBlock(), createElementBlock("nav", {
-					key: 1,
-					class: normalizeClass(unref(ApplicationMenu_module_default).applicationMenuPageIndicator),
-					"aria-label": "Menu levels"
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(totalLevels), (level) => {
-					return openBlock(), createElementBlock("button", {
-						key: level - 1,
-						type: "button",
-						class: normalizeClass([unref(ApplicationMenu_module_default).applicationMenuPageIndicatorDot, level - 1 === unref(viewIndex) && unref(ApplicationMenu_module_default).applicationMenuPageIndicatorDotActive]),
-						"aria-current": level - 1 === unref(viewIndex) ? "true" : void 0,
-						"aria-label": level - 1 === 0 ? "Hoofdmenu" : `Niveau ${level - 1}`,
-						onClick: ($event) => unref(goToLevel)(level - 1)
-					}, null, 10, _hoisted_2);
-				}), 128))], 2)) : createCommentVNode("", true),
-				slots.footer ? (openBlock(), createBlock(unref(FluxMenu), {
-					key: 2,
-					class: normalizeClass(unref(ApplicationMenu_module_default).applicationMenuFooter),
-					"data-hidden": !unref(isMainMenuVisible) ? "" : void 0
-				}, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
+				createVNode(unref(FluxFadeTransition), null, {
+					default: withCtx(() => [slots.footer && unref(isMainMenuVisible) ? (openBlock(), createBlock(unref(FluxMenu), {
+						key: 0,
+						class: normalizeClass(unref(ApplicationMenu_module_default).applicationMenuFooter)
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
+						_: 3
+					}, 8, ["class"])) : createCommentVNode("", true)]),
 					_: 3
-				}, 8, ["class", "data-hidden"])) : createCommentVNode("", true)
+				})
 			], 10, _hoisted_1$3);
 		};
 	}
@@ -3848,29 +3887,6 @@ var FluxApplicationMenuAccount_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/composable/useApplicationContextRegistration.ts
-function useApplicationContextRegistration_default(info) {
-	const injection = inject(FluxApplicationInjectionKey, null);
-	if (!injection) return;
-	const id = Symbol("application-context");
-	onMounted(() => {
-		injection.pushContext({
-			id,
-			...info()
-		});
-	});
-	watch(info, (next) => {
-		injection.removeContext(id);
-		injection.pushContext({
-			id,
-			...next
-		});
-	});
-	onBeforeUnmount(() => {
-		injection.removeContext(id);
-	});
-}
-//#endregion
 //#region src/component/FluxApplicationMenuContext.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$2 = { key: 0 };
 //#endregion
@@ -3886,6 +3902,7 @@ var FluxApplicationMenuContext_default = /* @__PURE__ */ defineComponent({
 		target: {},
 		to: {},
 		entryTo: {},
+		icon: {},
 		type: {}
 	},
 	setup(__props) {
@@ -3910,6 +3927,7 @@ var FluxApplicationMenuContext_default = /* @__PURE__ */ defineComponent({
 			to: props.to,
 			entryTo: props.entryTo ?? autoEntryTo.value,
 			href: props.href,
+			icon: props.icon,
 			type: props.type
 		}));
 		return (_ctx, _cache) => {
@@ -4081,7 +4099,7 @@ var ApplicationTop_module_default = {
 	separator: `separator`,
 	applicationTopMenuToggleHidden: `application-top-menu-toggle-hidden`,
 	applicationTopTabs: `application-top-tabs`,
-	tabBar: `tab-bar`,
+	baseTabBar: `base-tab-bar`,
 	applicationTopTabsDefault: `application-top-tabs-default application-top-tabs`,
 	applicationTopTabsDashboard: `application-top-tabs-dashboard application-top-tabs`,
 	applicationTopTabsFull: `application-top-tabs-full application-top-tabs`,
@@ -4106,7 +4124,7 @@ var FluxApplicationTop_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const slots = useSlots();
 		const { layout, showDesktopMenuToggle } = useApplicationInjection_default();
-		const { y } = C();
+		const { y } = j();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("header", { class: normalizeClass(unref(y) > 1 ? unref(ApplicationTop_module_default).applicationTopScrolled : unref(ApplicationTop_module_default).applicationTop) }, [createElementVNode("div", { class: normalizeClass(unref(ApplicationTop_module_default).applicationTopBar) }, [
 				createVNode(FluxApplicationMenuToggle_default, { class: normalizeClass(!unref(showDesktopMenuToggle) && unref(ApplicationTop_module_default).applicationTopMenuToggleHidden) }, null, 8, ["class"]),
@@ -4141,6 +4159,6 @@ var FluxApplicationTop_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { FluxApplication_default as FluxApplication, FluxApplicationContent_default as FluxApplicationContent, FluxApplicationHero_default as FluxApplicationHero, FluxApplicationInjectionKey, FluxApplicationMenu_default as FluxApplicationMenu, FluxApplicationMenuAccount_default as FluxApplicationMenuAccount, FluxApplicationMenuContext_default as FluxApplicationMenuContext, FluxApplicationMenuContextStack_default as FluxApplicationMenuContextStack, FluxApplicationMenuPromo_default as FluxApplicationMenuPromo, FluxApplicationMenuToggle_default as FluxApplicationMenuToggle, FluxApplicationSection_default as FluxApplicationSection, FluxApplicationSide_default as FluxApplicationSide, FluxApplicationTop_default as FluxApplicationTop, useApplicationContextMenu_default as useApplicationContextMenu, useApplicationInjection_default as useApplicationInjection, useApplicationMenu_default as useApplicationMenu };
+export { FluxApplication_default as FluxApplication, FluxApplicationContent_default as FluxApplicationContent, FluxApplicationHero_default as FluxApplicationHero, FluxApplicationInjectionKey, FluxApplicationMenu_default as FluxApplicationMenu, FluxApplicationMenuAccount_default as FluxApplicationMenuAccount, FluxApplicationMenuContext_default as FluxApplicationMenuContext, FluxApplicationMenuContextStack_default as FluxApplicationMenuContextStack, FluxApplicationMenuPromo_default as FluxApplicationMenuPromo, FluxApplicationMenuToggle_default as FluxApplicationMenuToggle, FluxApplicationSection_default as FluxApplicationSection, FluxApplicationSide_default as FluxApplicationSide, FluxApplicationTop_default as FluxApplicationTop, useApplicationContextMenu_default as useApplicationContextMenu, useApplicationContextRegistration_default as useApplicationContextRegistration, useApplicationInjection_default as useApplicationInjection, useApplicationMenu_default as useApplicationMenu };
 
 //# sourceMappingURL=index.js.map