@ojiepermana/angular 22.1.14 → 22.2.0

package/fesm2022/ojiepermana-angular-theme-shell.mjs

@@ -1,45 +1,71 @@
-import * as i0 from '@angular/core';
-import { inject, input, computed, Component, booleanAttribute } from '@angular/core';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-import { ShellService } from '@ojiepermana/angular/theme/shell/services';
-export { SHELL_WINDOW_BRIDGE, ShellService, WEB_SHELL_WINDOW_BRIDGE, createTauriShellWindowBridge, isTauriRuntime, provideShellWindowBridge, provideTauriShellWindowBridge } from '@ojiepermana/angular/theme/shell/services';
-import { SHELL_DEFAULT_DEVICE, SHELL_DEFAULT_COLOR, SHELL_DEFAULT_FRAME, resolveShellDeviceForMode, resolveShellFrameForMode } from '@ojiepermana/angular/theme/shell/types';
-export { SHELL_COLORS, SHELL_COLOR_STORAGE_KEY, SHELL_DEFAULT_COLOR, SHELL_DEFAULT_DEVICE, SHELL_DEFAULT_FRAME, SHELL_DEFAULT_MODE, SHELL_DEFAULT_PLATFORM, SHELL_DEFAULT_WINDOW_STATE, SHELL_DEVICES, SHELL_DEVICE_STORAGE_KEY, SHELL_FRAMES, SHELL_FRAME_STORAGE_KEY, SHELL_MODES, SHELL_MODE_DEVICES, SHELL_MODE_STORAGE_KEY, SHELL_PLATFORMS, SHELL_WINDOW_STATES, defaultShellDeviceForMode, isShellColor, isShellDevice, isShellDeviceForMode, isShellFrame, isShellMode, isShellPlatform, isShellWindowState, normalizeShellColor, normalizeShellDevice, normalizeShellFrame, normalizeShellMode, resolveShellDeviceForMode, resolveShellFrameForMode, shellDevicesForMode } from '@ojiepermana/angular/theme/shell/types';
-import { NavigationContainerComponent, NavigationFlyoutComponent, NavigationHeaderComponent, NavigationFooterComponent } from '@ojiepermana/angular/navigation';
-import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
-import { LayoutService } from '@ojiepermana/angular/theme/layout/services';
-import { LayoutIdentityService, LAYOUT_DESKTOP_NAVIGATION_DATA_ID, LayoutBrand, LayoutUser } from '@ojiepermana/angular/theme/layout/wrapper';
-
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, inject, input } from "@angular/core";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { SHELL_WINDOW_BRIDGE, ShellService, ShellService as ShellService$1, WEB_SHELL_WINDOW_BRIDGE, createTauriShellWindowBridge, isTauriRuntime, provideShellWindowBridge, provideTauriShellWindowBridge } from "@ojiepermana/angular/theme/shell/services";
+import { SHELL_COLORS, SHELL_COLOR_STORAGE_KEY, SHELL_DEFAULT_COLOR, SHELL_DEFAULT_COLOR as SHELL_DEFAULT_COLOR$1, SHELL_DEFAULT_DEVICE, SHELL_DEFAULT_DEVICE as SHELL_DEFAULT_DEVICE$1, SHELL_DEFAULT_FRAME, SHELL_DEFAULT_FRAME as SHELL_DEFAULT_FRAME$1, SHELL_DEFAULT_MODE, SHELL_DEFAULT_PLATFORM, SHELL_DEFAULT_WINDOW_STATE, SHELL_DEVICES, SHELL_DEVICE_STORAGE_KEY, SHELL_FRAMES, SHELL_FRAME_STORAGE_KEY, SHELL_MODES, SHELL_MODE_DEVICES, SHELL_MODE_STORAGE_KEY, SHELL_PLATFORMS, SHELL_WINDOW_STATES, defaultShellDeviceForMode, isShellColor, isShellDevice, isShellDeviceForMode, isShellFrame, isShellMode, isShellPlatform, isShellWindowState, normalizeShellColor, normalizeShellDevice, normalizeShellFrame, normalizeShellMode, resolveShellDeviceForMode, resolveShellDeviceForMode as resolveShellDeviceForMode$1, resolveShellFrameForMode, resolveShellFrameForMode as resolveShellFrameForMode$1, shellDevicesForMode } from "@ojiepermana/angular/theme/shell/types";
+import { NavigationContainerComponent, NavigationFlyoutComponent, NavigationFooterComponent, NavigationHeaderComponent } from "@ojiepermana/angular/navigation";
+import { NAVIGATION_ADAPTER } from "@ojiepermana/angular/navigation/core";
+import { LayoutService } from "@ojiepermana/angular/theme/layout/services";
+import { LAYOUT_DESKTOP_NAVIGATION_DATA_ID, LayoutBrand, LayoutIdentityService, LayoutUser } from "@ojiepermana/angular/theme/layout/wrapper";
 let shellNavigationFlyoutInstanceId = 0;
-/**
- * Internal desktop-titlebar launcher. `LayoutWrapperDefault` publishes the
- * navigation data only while its desktop nav is active, so this component stays
- * absent for desktop windows that still render a navbar, flyout, or side rail.
- */
-class ShellNavigationFlyoutComponent {
-    navigation = inject(NAVIGATION_ADAPTER);
-    layout = inject(LayoutService, { optional: true });
-    identity = inject(LayoutIdentityService, { optional: true });
-    enabled = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
-    icon = input('apps', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    label = input('Open navigation', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    navigationId = `__shell-navigation-${(shellNavigationFlyoutInstanceId += 1)}`;
-    navigationSource = this.navigation.data(LAYOUT_DESKTOP_NAVIGATION_DATA_ID);
-    navigationData = computed(() => this.navigationSource(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navigationData" }] : /* istanbul ignore next */ []));
-    showsFlyout = computed(() => this.enabled() && this.navigationData().length > 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showsFlyout" }] : /* istanbul ignore next */ []));
-    appearance = computed(() => this.layout?.appearance() ?? 'flat', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    brand = computed(() => this.identity?.brand() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
-    user = computed(() => this.identity?.user() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ShellNavigationFlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ShellNavigationFlyoutComponent, isStandalone: true, selector: "ShellNavigationFlyout", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-shell-navigation-flyout": "showsFlyout() ? \"\" : null" }, styleAttribute: "--nav-flyout-floating-width: 100vw; --nav-flyout-floating-max-width: 100vw; --nav-flyout-floating-radius: 0 0 var(--shell-frame-radius) var(--shell-frame-radius);", classAttribute: "contents" }, ngImport: i0, template: `
+var ShellNavigationFlyoutComponent = class ShellNavigationFlyoutComponent {
+	navigation = inject(NAVIGATION_ADAPTER);
+	layout = inject(LayoutService, { optional: true });
+	identity = inject(LayoutIdentityService, { optional: true });
+	enabled = input(true, ...ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []);
+	icon = input("apps", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	label = input("Open navigation", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	navigationId = `__shell-navigation-${shellNavigationFlyoutInstanceId += 1}`;
+	navigationSource = this.navigation.data(LAYOUT_DESKTOP_NAVIGATION_DATA_ID);
+	navigationData = computed(() => this.navigationSource(), ...ngDevMode ? [{ debugName: "navigationData" }] : /* istanbul ignore next */ []);
+	showsFlyout = computed(() => this.enabled() && this.navigationData().length > 0, ...ngDevMode ? [{ debugName: "showsFlyout" }] : /* istanbul ignore next */ []);
+	appearance = computed(() => this.layout?.appearance() ?? "flat", ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+	brand = computed(() => this.identity?.brand() ?? null, ...ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []);
+	user = computed(() => this.identity?.user() ?? null, ...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ShellNavigationFlyoutComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ShellNavigationFlyoutComponent,
+		isStandalone: true,
+		selector: "ShellNavigationFlyout",
+		inputs: {
+			enabled: {
+				classPropertyName: "enabled",
+				publicName: "enabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.data-shell-navigation-flyout": "showsFlyout() ? \"\" : null" },
+			styleAttribute: "--nav-flyout-floating-width: 100vw; --nav-flyout-floating-max-width: 100vw; --nav-flyout-floating-radius: 0 0 var(--shell-frame-radius) var(--shell-frame-radius);",
+			classAttribute: "contents"
+		},
+		ngImport: i0,
+		template: `
     @if (showsFlyout()) {
       <Navigation
         [id]="navigationId"
@@ -71,26 +97,104 @@ class ShellNavigationFlyoutComponent {
         </NavigationFlyout>
       </Navigation>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContainerComponent, selector: "Navigation", inputs: ["id", "data-id", "data", "ariaLabel", "compact", "collapse-tree", "class", "itemClass", "nav-group-class", "activeIds", "activeUrl", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationFlyoutComponent, selector: "NavigationFlyout", inputs: ["label", "icon", "icon-only", "icon-position", "trigger-variant", "trigger-floating", "panel-viewport", "trigger-class", "trigger-button-class", "nav-position", "nav-type-style", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"], outputs: ["logout"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ShellNavigationFlyoutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ShellNavigationFlyout',
-                    imports: [
-                        NavigationContainerComponent,
-                        NavigationFlyoutComponent,
-                        NavigationHeaderComponent,
-                        NavigationFooterComponent,
-                        LayoutBrand,
-                        LayoutUser,
-                    ],
-                    host: {
-                        class: 'contents',
-                        style: '--nav-flyout-floating-width: 100vw; --nav-flyout-floating-max-width: 100vw; --nav-flyout-floating-radius: 0 0 var(--shell-frame-radius) var(--shell-frame-radius);',
-                        '[attr.data-shell-navigation-flyout]': 'showsFlyout() ? "" : null',
-                    },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: NavigationContainerComponent,
+				selector: "Navigation",
+				inputs: [
+					"id",
+					"data-id",
+					"data",
+					"ariaLabel",
+					"compact",
+					"collapse-tree",
+					"class",
+					"itemClass",
+					"nav-group-class",
+					"activeIds",
+					"activeUrl",
+					"openedIds"
+				],
+				outputs: ["openedIdsChange", "itemSelected"]
+			},
+			{
+				kind: "component",
+				type: NavigationFlyoutComponent,
+				selector: "NavigationFlyout",
+				inputs: [
+					"label",
+					"icon",
+					"icon-only",
+					"icon-position",
+					"trigger-variant",
+					"trigger-floating",
+					"panel-viewport",
+					"trigger-class",
+					"trigger-button-class",
+					"nav-position",
+					"nav-type-style",
+					"class"
+				]
+			},
+			{
+				kind: "component",
+				type: NavigationHeaderComponent,
+				selector: "NavigationHeader",
+				inputs: ["toggle", "class"]
+			},
+			{
+				kind: "component",
+				type: NavigationFooterComponent,
+				selector: "NavigationFooter",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: LayoutBrand,
+				selector: "LayoutBrand",
+				inputs: ["brand", "compact"]
+			},
+			{
+				kind: "component",
+				type: LayoutUser,
+				selector: "LayoutUser",
+				inputs: [
+					"user",
+					"detailed",
+					"logoutLabel",
+					"logoutIcon"
+				],
+				outputs: ["logout"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ShellNavigationFlyoutComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ShellNavigationFlyout",
+			imports: [
+				NavigationContainerComponent,
+				NavigationFlyoutComponent,
+				NavigationHeaderComponent,
+				NavigationFooterComponent,
+				LayoutBrand,
+				LayoutUser
+			],
+			host: {
+				class: "contents",
+				style: "--nav-flyout-floating-width: 100vw; --nav-flyout-floating-max-width: 100vw; --nav-flyout-floating-radius: 0 0 var(--shell-frame-radius) var(--shell-frame-radius);",
+				"[attr.data-shell-navigation-flyout]": "showsFlyout() ? \"\" : null"
+			},
+			template: `
     @if (showsFlyout()) {
       <Navigation
         [id]="navigationId"
@@ -122,142 +226,225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </NavigationFlyout>
       </Navigation>
     }
-  `,
-                }]
-        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
-
-/**
- * The titlebar of a `<Shell>` — the app's own window chrome, and its bridge to
- * the desktop runtime.
- *
- * **Internal to the library.** It is not exported from
- * `@ojiepermana/angular/theme/shell`: `<Shell>` decides when a titlebar exists
- * (only `mode='desktop'` has window chrome to draw) and renders this itself,
- * forwarding the `[shellBarStart]` / `[shellBarTitle]` / `[shellBarEnd]` slots.
- * Consumers configure it through `<Shell>`, never directly.
- *
- * Window dragging is declarative, so no JavaScript runs on pointer-down: the host
- * carries `data-tauri-drag-region` for Tauri. Electron uses Shell's frame-wide
- * drag layer below this bar; interactive chrome opts out with `shell-no-drag`,
- * which the slot wrappers and buttons apply for you.
- *
- * Window buttons follow the `device`, not the runtime: macOS keeps painting its
- * own traffic lights over a decoration-less window, so the bar draws none of its
- * own and reserves a leading inset for them instead. Whether those buttons *do*
- * anything is the bridge's business — the shape of the chrome is the device's.
- */
-class ShellBarComponent {
-    shell = inject(ShellService);
-    device = input(SHELL_DEFAULT_DEVICE, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "device" }] : /* istanbul ignore next */ []));
-    color = input(SHELL_DEFAULT_COLOR, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    frame = input(SHELL_DEFAULT_FRAME, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
-    /**
-     * `true` when the runtime still draws its own window buttons, so the app must
-     * not: macOS reserves the leading run for the OS traffic lights and Windows /
-     * Linux draw nothing. Default `false` — a decoration-less window.
-     */
-    nativeWindowControls = input(false, { ...(ngDevMode ? { debugName: "nativeWindowControls" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    drag = input(true, { ...(ngDevMode ? { debugName: "drag" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    landmark = input(true, { ...(ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    ariaLabel = input('Application title bar', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    minimizeLabel = input('Minimize window', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "minimizeLabel" }] : /* istanbul ignore next */ []));
-    maximizeLabel = input('Maximize window', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maximizeLabel" }] : /* istanbul ignore next */ []));
-    restoreLabel = input('Restore window', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "restoreLabel" }] : /* istanbul ignore next */ []));
-    closeLabel = input('Close window', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
-    /** Show the automatic desktop navigation flyout when a desktop layout publishes data. */
-    navigationFlyout = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navigationFlyout" }] : /* istanbul ignore next */ []));
-    navigationFlyoutIcon = input('apps', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navigationFlyoutIcon" }] : /* istanbul ignore next */ []));
-    navigationFlyoutLabel = input('Open navigation', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navigationFlyoutLabel" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    maximizeToggleLabel = computed(() => this.shell.isMaximized() ? this.restoreLabel() : this.maximizeLabel(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maximizeToggleLabel" }] : /* istanbul ignore next */ []));
-    isMacOs = computed(() => this.device() === 'macos', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isMacOs" }] : /* istanbul ignore next */ []));
-    /**
-     * macOS traffic lights, which the app draws itself — the default, because a
-     * `decorations: false` window has no other way to be closed.
-     */
-    showsTrafficLights = computed(() => this.isMacOs() && !this.nativeWindowControls(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showsTrafficLights" }] : /* istanbul ignore next */ []));
-    /** Windows/Linux buttons, on the trailing edge. */
-    showsWindowControls = computed(() => !this.isMacOs() && !this.nativeWindowControls(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showsWindowControls" }] : /* istanbul ignore next */ []));
-    /**
-     * Only reserve an empty leading run when the OS is painting its own lights into
-     * it — Tauri's macOS `titleBarStyle: 'Overlay'`. Drawing ours there instead
-     * occupies the space for real, so no padding is needed.
-     */
-    reservesTrafficLights = computed(() => this.isMacOs() && this.nativeWindowControls(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "reservesTrafficLights" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(
-    // 1fr auto 1fr keeps the title optically centred in the window no matter
-    // how much chrome either flank carries.
-    'relative z-20 grid h-(--shell-bar-height) min-h-(--shell-bar-height) shrink-0', 'grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-(--shell-bar-gap)', 
-    // Surface tokens, not raw colors: `color='sync'` maps them onto the design
-    // system, `color='default'` onto the device's native chrome (base/tokens.css).
-    'bg-[hsl(var(--shell-bar-background))] px-(--shell-bar-inline)', 'text-[hsl(var(--shell-bar-foreground))]', 
-    // `classic` stacks a bordered bar on the app. `modern` shares its background
-    // with the surround, so a divider would draw a seam through what is meant to
-    // read as one continuous frame.
-    this.frame() === 'classic' && 'border-b border-[hsl(var(--shell-bar-border))]', 
-    // Physically top-left on macOS regardless of text direction, so this is
-    // deliberately `pl-`, not the logical `ps-`.
-    this.reservesTrafficLights() && 'pl-(--shell-traffic-light-inset)', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    startSlotClasses = computed(() => cn('shell-no-drag flex min-w-0 items-center gap-(--shell-bar-gap)'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "startSlotClasses" }] : /* istanbul ignore next */ []));
-    endSlotClasses = computed(() => cn('shell-no-drag flex min-w-0 items-center justify-end gap-(--shell-bar-gap)'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "endSlotClasses" }] : /* istanbul ignore next */ []));
-    titleClasses = computed(() => cn('min-w-0 truncate text-center text-xs font-medium', 
-    // An unfocused window recedes — the OS convention for background windows.
-    this.shell.focused() ? 'opacity-100' : 'opacity-60'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
-    controlClasses = computed(() => cn('shell-no-drag inline-grid size-(--shell-control-size) shrink-0 place-items-center rounded-sm', 'opacity-70 transition-[background-color,opacity] hover:opacity-100', 'hover:bg-[hsl(var(--shell-bar-foreground)/0.12)]', 'focus-visible:outline-none focus-visible:ring-2', 'focus-visible:ring-[hsl(var(--shell-bar-foreground))]', 'focus-visible:ring-offset-1 focus-visible:ring-offset-[hsl(var(--shell-bar-background))]'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "controlClasses" }] : /* istanbul ignore next */ []));
-    /**
-     * One macOS traffic light. The fills are that platform's own constants rather
-     * than theme tokens — a traffic light that recolored with the accent would stop
-     * reading as a traffic light. The hairline ring keeps them defined against a
-     * light titlebar and survives forced-colors mode, and each carries an
-     * `aria-label`, so the colour is never the only way to tell them apart.
-     */
-    trafficLightClasses(control) {
-        return cn('shell-no-drag group inline-grid size-(--shell-traffic-light-size) shrink-0', 'cursor-pointer place-items-center rounded-full', 'ring-1 ring-black/15 transition-colors', 'focus-visible:outline-none focus-visible:ring-2', 'focus-visible:ring-[hsl(var(--shell-bar-foreground))]', 'focus-visible:ring-offset-1 focus-visible:ring-offset-[hsl(var(--shell-bar-background))]', 
-        // Each light darkens to its own pressed shade on hover — the same per-light
-        // colour shift macOS uses, so the feedback reads as "this specific control"
-        // rather than a generic highlight. Paired with the glyph appearing below, the
-        // hover state never relies on colour alone.
-        control === 'close' && 'bg-[#ff5f57] hover:bg-[#e0443e]', control === 'minimize' && 'bg-[#febc2e] hover:bg-[#dea123]', control === 'zoom' && 'bg-[#28c840] hover:bg-[#1aad2b]');
-    }
-    /** macOS reveals the glyph inside each light only on hover — and on focus, for keyboards. */
-    trafficGlyphClasses() {
-        return cn('size-(--shell-traffic-light-size) opacity-0 transition-opacity', 'group-hover:opacity-70 group-focus-visible:opacity-70', 'stroke-black/70 [stroke-linecap:round] [stroke-width:1.5] [fill:none]');
-    }
-    closeControlClasses = computed(() => cn(this.controlClasses(), 'hover:bg-destructive hover:text-destructive-foreground'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeControlClasses" }] : /* istanbul ignore next */ []));
-    minimize() {
-        void this.shell.minimize();
-    }
-    toggleMaximize() {
-        void this.shell.toggleMaximize();
-    }
-    close() {
-        void this.shell.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ShellBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ShellBarComponent, isStandalone: true, selector: "ShellBar", inputs: { device: { classPropertyName: "device", publicName: "device", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: false, transformFunction: null }, nativeWindowControls: { classPropertyName: "nativeWindowControls", publicName: "nativeWindowControls", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, landmark: { classPropertyName: "landmark", publicName: "landmark", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, minimizeLabel: { classPropertyName: "minimizeLabel", publicName: "minimizeLabel", isSignal: true, isRequired: false, transformFunction: null }, maximizeLabel: { classPropertyName: "maximizeLabel", publicName: "maximizeLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreLabel: { classPropertyName: "restoreLabel", publicName: "restoreLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyout: { classPropertyName: "navigationFlyout", publicName: "navigationFlyout", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyoutIcon: { classPropertyName: "navigationFlyoutIcon", publicName: "navigationFlyoutIcon", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyoutLabel: { classPropertyName: "navigationFlyoutLabel", publicName: "navigationFlyoutLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-shell-bar": "" }, properties: { "class": "classes()", "attr.data-shell-device": "device()", "attr.data-shell-color": "color()", "attr.data-shell-frame": "frame()", "attr.data-tauri-drag-region": "drag() ? \"\" : null", "attr.data-shell-window": "shell.windowState()", "attr.data-shell-focused": "shell.focused()", "attr.role": "landmark() ? \"banner\" : null", "attr.aria-label": "landmark() ? ariaLabel() || null : null" } }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	propDecorators: {
+		enabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "enabled",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+var ShellBarComponent = class ShellBarComponent {
+	shell = inject(ShellService$1);
+	device = input(SHELL_DEFAULT_DEVICE$1, ...ngDevMode ? [{ debugName: "device" }] : /* istanbul ignore next */ []);
+	color = input(SHELL_DEFAULT_COLOR$1, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	frame = input(SHELL_DEFAULT_FRAME$1, ...ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []);
+	nativeWindowControls = input(false, {
+		...ngDevMode ? { debugName: "nativeWindowControls" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	drag = input(true, {
+		...ngDevMode ? { debugName: "drag" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	landmark = input(true, {
+		...ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaLabel = input("Application title bar", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	minimizeLabel = input("Minimize window", ...ngDevMode ? [{ debugName: "minimizeLabel" }] : /* istanbul ignore next */ []);
+	maximizeLabel = input("Maximize window", ...ngDevMode ? [{ debugName: "maximizeLabel" }] : /* istanbul ignore next */ []);
+	restoreLabel = input("Restore window", ...ngDevMode ? [{ debugName: "restoreLabel" }] : /* istanbul ignore next */ []);
+	closeLabel = input("Close window", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	navigationFlyout = input(true, ...ngDevMode ? [{ debugName: "navigationFlyout" }] : /* istanbul ignore next */ []);
+	navigationFlyoutIcon = input("apps", ...ngDevMode ? [{ debugName: "navigationFlyoutIcon" }] : /* istanbul ignore next */ []);
+	navigationFlyoutLabel = input("Open navigation", ...ngDevMode ? [{ debugName: "navigationFlyoutLabel" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	maximizeToggleLabel = computed(() => this.shell.isMaximized() ? this.restoreLabel() : this.maximizeLabel(), ...ngDevMode ? [{ debugName: "maximizeToggleLabel" }] : /* istanbul ignore next */ []);
+	isMacOs = computed(() => this.device() === "macos", ...ngDevMode ? [{ debugName: "isMacOs" }] : /* istanbul ignore next */ []);
+	showsTrafficLights = computed(() => this.isMacOs() && !this.nativeWindowControls(), ...ngDevMode ? [{ debugName: "showsTrafficLights" }] : /* istanbul ignore next */ []);
+	showsWindowControls = computed(() => !this.isMacOs() && !this.nativeWindowControls(), ...ngDevMode ? [{ debugName: "showsWindowControls" }] : /* istanbul ignore next */ []);
+	reservesTrafficLights = computed(() => this.isMacOs() && this.nativeWindowControls(), ...ngDevMode ? [{ debugName: "reservesTrafficLights" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("relative z-20 grid h-(--shell-bar-height) min-h-(--shell-bar-height) shrink-0", "grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-(--shell-bar-gap)", "bg-[hsl(var(--shell-bar-background))] px-(--shell-bar-inline)", "text-[hsl(var(--shell-bar-foreground))]", this.frame() === "classic" && "border-b border-[hsl(var(--shell-bar-border))]", this.reservesTrafficLights() && "pl-(--shell-traffic-light-inset)", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	startSlotClasses = computed(() => cn("shell-no-drag flex min-w-0 items-center gap-(--shell-bar-gap)"), ...ngDevMode ? [{ debugName: "startSlotClasses" }] : /* istanbul ignore next */ []);
+	endSlotClasses = computed(() => cn("shell-no-drag flex min-w-0 items-center justify-end gap-(--shell-bar-gap)"), ...ngDevMode ? [{ debugName: "endSlotClasses" }] : /* istanbul ignore next */ []);
+	titleClasses = computed(() => cn("min-w-0 truncate text-center text-xs font-medium", this.shell.focused() ? "opacity-100" : "opacity-60"), ...ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []);
+	controlClasses = computed(() => cn("shell-no-drag inline-grid size-(--shell-control-size) shrink-0 place-items-center rounded-sm", "opacity-70 transition-[background-color,opacity] hover:opacity-100", "hover:bg-[hsl(var(--shell-bar-foreground)/0.12)]", "focus-visible:outline-none focus-visible:ring-2", "focus-visible:ring-[hsl(var(--shell-bar-foreground))]", "focus-visible:ring-offset-1 focus-visible:ring-offset-[hsl(var(--shell-bar-background))]"), ...ngDevMode ? [{ debugName: "controlClasses" }] : /* istanbul ignore next */ []);
+	trafficLightClasses(control) {
+		return cn("shell-no-drag group inline-grid size-(--shell-traffic-light-size) shrink-0", "cursor-pointer place-items-center rounded-full", "ring-1 ring-black/15 transition-colors", "focus-visible:outline-none focus-visible:ring-2", "focus-visible:ring-[hsl(var(--shell-bar-foreground))]", "focus-visible:ring-offset-1 focus-visible:ring-offset-[hsl(var(--shell-bar-background))]", control === "close" && "bg-[#ff5f57] hover:bg-[#e0443e]", control === "minimize" && "bg-[#febc2e] hover:bg-[#dea123]", control === "zoom" && "bg-[#28c840] hover:bg-[#1aad2b]");
+	}
+	trafficGlyphClasses() {
+		return cn("size-(--shell-traffic-light-size) opacity-0 transition-opacity", "group-hover:opacity-70 group-focus-visible:opacity-70", "stroke-black/70 [stroke-linecap:round] [stroke-width:1.5] [fill:none]");
+	}
+	closeControlClasses = computed(() => cn(this.controlClasses(), "hover:bg-destructive hover:text-destructive-foreground"), ...ngDevMode ? [{ debugName: "closeControlClasses" }] : /* istanbul ignore next */ []);
+	minimize() {
+		this.shell.minimize();
+	}
+	toggleMaximize() {
+		this.shell.toggleMaximize();
+	}
+	close() {
+		this.shell.close();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ShellBarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ShellBarComponent,
+		isStandalone: true,
+		selector: "ShellBar",
+		inputs: {
+			device: {
+				classPropertyName: "device",
+				publicName: "device",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			frame: {
+				classPropertyName: "frame",
+				publicName: "frame",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nativeWindowControls: {
+				classPropertyName: "nativeWindowControls",
+				publicName: "nativeWindowControls",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			drag: {
+				classPropertyName: "drag",
+				publicName: "drag",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			landmark: {
+				classPropertyName: "landmark",
+				publicName: "landmark",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minimizeLabel: {
+				classPropertyName: "minimizeLabel",
+				publicName: "minimizeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maximizeLabel: {
+				classPropertyName: "maximizeLabel",
+				publicName: "maximizeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			restoreLabel: {
+				classPropertyName: "restoreLabel",
+				publicName: "restoreLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navigationFlyout: {
+				classPropertyName: "navigationFlyout",
+				publicName: "navigationFlyout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navigationFlyoutIcon: {
+				classPropertyName: "navigationFlyoutIcon",
+				publicName: "navigationFlyoutIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navigationFlyoutLabel: {
+				classPropertyName: "navigationFlyoutLabel",
+				publicName: "navigationFlyoutLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-shell-bar": "" },
+			properties: {
+				"class": "classes()",
+				"attr.data-shell-device": "device()",
+				"attr.data-shell-color": "color()",
+				"attr.data-shell-frame": "frame()",
+				"attr.data-tauri-drag-region": "drag() ? \"\" : null",
+				"attr.data-shell-window": "shell.windowState()",
+				"attr.data-shell-focused": "shell.focused()",
+				"attr.role": "landmark() ? \"banner\" : null",
+				"attr.aria-label": "landmark() ? ariaLabel() || null : null"
+			}
+		},
+		ngImport: i0,
+		template: `
     <div data-shell-bar-start [class]="startSlotClasses()">
       @if (!isMacOs()) {
         <ShellNavigationFlyout
@@ -412,26 +599,43 @@ class ShellBarComponent {
         </button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShellNavigationFlyoutComponent, selector: "ShellNavigationFlyout", inputs: ["enabled", "icon", "label"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ShellBarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ShellBar',
-                    imports: [ShellNavigationFlyoutComponent],
-                    host: {
-                        '[class]': 'classes()',
-                        'data-shell-bar': '',
-                        '[attr.data-shell-device]': 'device()',
-                        '[attr.data-shell-color]': 'color()',
-                        '[attr.data-shell-frame]': 'frame()',
-                        '[attr.data-tauri-drag-region]': 'drag() ? "" : null',
-                        '[attr.data-shell-window]': 'shell.windowState()',
-                        '[attr.data-shell-focused]': 'shell.focused()',
-                        '[attr.role]': 'landmark() ? "banner" : null',
-                        '[attr.aria-label]': 'landmark() ? ariaLabel() || null : null',
-                    },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: ShellNavigationFlyoutComponent,
+			selector: "ShellNavigationFlyout",
+			inputs: [
+				"enabled",
+				"icon",
+				"label"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ShellBarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ShellBar",
+			imports: [ShellNavigationFlyoutComponent],
+			host: {
+				"[class]": "classes()",
+				"data-shell-bar": "",
+				"[attr.data-shell-device]": "device()",
+				"[attr.data-shell-color]": "color()",
+				"[attr.data-shell-frame]": "frame()",
+				"[attr.data-tauri-drag-region]": "drag() ? \"\" : null",
+				"[attr.data-shell-window]": "shell.windowState()",
+				"[attr.data-shell-focused]": "shell.focused()",
+				"[attr.role]": "landmark() ? \"banner\" : null",
+				"[attr.aria-label]": "landmark() ? ariaLabel() || null : null"
+			},
+			template: `
     <div data-shell-bar-start [class]="startSlotClasses()">
       @if (!isMacOs()) {
         <ShellNavigationFlyout
@@ -586,130 +790,310 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </button>
       }
     </div>
-  `,
-                }]
-        }], propDecorators: { device: [{ type: i0.Input, args: [{ isSignal: true, alias: "device", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], frame: [{ type: i0.Input, args: [{ isSignal: true, alias: "frame", required: false }] }], nativeWindowControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeWindowControls", required: false }] }], drag: [{ type: i0.Input, args: [{ isSignal: true, alias: "drag", required: false }] }], landmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "landmark", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], minimizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizeLabel", required: false }] }], maximizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizeLabel", required: false }] }], restoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], navigationFlyout: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyout", required: false }] }], navigationFlyoutIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyoutIcon", required: false }] }], navigationFlyoutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyoutLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Root of an application shell: the element that owns the whole surface, whether
- * that is a browser tab, an OS window, a tablet, or a phone.
- *
- * A `<Shell>` holds the app directly — normally a `<Layout>` — plus, on
- * `mode='desktop'`, a titlebar it renders itself:
- *
- * ```html
- * <Shell mode="desktop" device="macos">
- *   <span shellBarTitle>Acme Studio</span>
- *
- *   <Layout>
- *     <LayoutVertical>…</LayoutVertical>
- *   </Layout>
- * </Shell>
- * ```
- *
- * ## Fallback chain
- *
- * Every axis is optional, and each falls back rather than demanding a value:
- *
- * - `mode` — this input, else the stored `shell-mode`, else `desktop` when a
- *   desktop runtime is registered, else `web`.
- * - `device` — this input, else the stored `shell-device`, else whatever the
- *   window bridge reports, else the mode's default device.
- * - `color` — this input, else the stored `shell-color`, else `sync`.
- * - `frame` — this input, else the stored `shell-frame`, else `classic`; only
- *   `desktop` can be `modern`.
- *
- * `mode` and `device` are always resolved as a coherent pair: a device that
- * belongs to another form factor (`mode='desktop' device='ipad'`) is corrected to
- * the mode's default, so `data-shell-device` never describes something the mode
- * cannot be.
- *
- * Inputs are host declarations, not user preferences, so setting them never
- * writes to storage — use `ShellService.setMode()` / `setDevice()` for a choice
- * that should persist.
- */
-class ShellComponent {
-    shell = inject(ShellService);
-    /** Delivery target. `null` follows the stored/derived mode — see the class note. */
-    mode = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    /** Host OS. `null` follows the stored/reported device, corrected to fit `mode`. */
-    device = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "device" }] : /* istanbul ignore next */ []));
-    /**
-     * Where the shell's own chrome takes its colors from. `sync` keeps the titlebar
-     * inside the design system; `default` paints the native look of the active
-     * device.
-     */
-    color = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    /**
-     * How the app sits in its window. `classic` keeps it flush to the window edge
-     * under a bordered titlebar; `modern` insets it as a panel and fuses the titlebar
-     * with the surround into one continuous frame. Only meaningful on
-     * `mode='desktop'` — anything else resolves to `classic`.
-     */
-    frame = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
-    /**
-     * `true` when the runtime still draws its own window buttons, so the shell must
-     * not draw them: on macOS the titlebar reserves the leading run for the OS
-     * traffic lights (Tauri's `titleBarStyle: 'Overlay'`), and Windows / Linux draw
-     * nothing. Leave `false` for a `decorations: false` window, where the app owns
-     * the buttons — otherwise there would be no way to close it.
-     */
-    nativeWindowControls = input(false, { ...(ngDevMode ? { debugName: "nativeWindowControls" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Mark the exposed desktop frame and titlebar as drag surfaces below interactive content. */
-    drag = input(true, { ...(ngDevMode ? { debugName: "drag" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Expose the titlebar as the `banner` landmark. Turn off for a nested preview. */
-    landmark = input(true, { ...(ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    barAriaLabel = input('Application title bar', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "barAriaLabel" }] : /* istanbul ignore next */ []));
-    minimizeLabel = input('Minimize window', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "minimizeLabel" }] : /* istanbul ignore next */ []));
-    maximizeLabel = input('Maximize window', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maximizeLabel" }] : /* istanbul ignore next */ []));
-    restoreLabel = input('Restore window', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "restoreLabel" }] : /* istanbul ignore next */ []));
-    closeLabel = input('Close window', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
-    /**
-     * Automatically surface the desktop layout's primary navigation as an icon
-     * flyout in the titlebar. macOS places it at the trailing edge; Windows and
-     * Linux place it at the leading edge.
-     */
-    navigationFlyout = input(true, { ...(ngDevMode ? { debugName: "navigationFlyout" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    navigationFlyoutIcon = input('apps', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navigationFlyoutIcon" }] : /* istanbul ignore next */ []));
-    navigationFlyoutLabel = input('Open navigation', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navigationFlyoutLabel" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    resolvedMode = computed(() => this.mode() ?? this.shell.mode(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
-    resolvedDevice = computed(() => resolveShellDeviceForMode(this.resolvedMode(), this.device() ?? this.shell.device()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedDevice" }] : /* istanbul ignore next */ []));
-    resolvedColor = computed(() => this.color() ?? this.shell.color(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
-    resolvedFrame = computed(() => resolveShellFrameForMode(this.resolvedMode(), this.frame() ?? this.shell.frame()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedFrame" }] : /* istanbul ignore next */ []));
-    /** Only a desktop window has chrome of its own to draw. */
-    showsBar = computed(() => this.resolvedMode() === 'desktop', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showsBar" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => cn(
-    // h-dvh, not h-full: the shell is the whole surface. `isolate` keeps the
-    // titlebar's stacking context out of the app's, so a bar menu can never be
-    // painted over by content below it.
-    'relative isolate flex h-dvh w-full min-w-0 flex-col overflow-hidden text-foreground', this.showsBar() && this.drag() && 'shell-drag-region', 
-    // A synchronized shell promotes the selected Theme color to the whole shell
-    // background. `modern` also shares the titlebar token with its inset surround,
-    // including when `color='default'` maps that token to native device chrome.
-    this.resolvedColor() === 'sync' || this.resolvedFrame() === 'modern'
-        ? 'bg-[hsl(var(--shell-bar-background))]'
-        : 'bg-layout-canvas', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ShellComponent, isStandalone: true, selector: "Shell", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, device: { classPropertyName: "device", publicName: "device", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: false, transformFunction: null }, nativeWindowControls: { classPropertyName: "nativeWindowControls", publicName: "nativeWindowControls", isSignal: true, isRequired: false, transformFunction: null }, drag: { classPropertyName: "drag", publicName: "drag", isSignal: true, isRequired: false, transformFunction: null }, landmark: { classPropertyName: "landmark", publicName: "landmark", isSignal: true, isRequired: false, transformFunction: null }, barAriaLabel: { classPropertyName: "barAriaLabel", publicName: "barAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, minimizeLabel: { classPropertyName: "minimizeLabel", publicName: "minimizeLabel", isSignal: true, isRequired: false, transformFunction: null }, maximizeLabel: { classPropertyName: "maximizeLabel", publicName: "maximizeLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreLabel: { classPropertyName: "restoreLabel", publicName: "restoreLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyout: { classPropertyName: "navigationFlyout", publicName: "navigationFlyout", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyoutIcon: { classPropertyName: "navigationFlyoutIcon", publicName: "navigationFlyoutIcon", isSignal: true, isRequired: false, transformFunction: null }, navigationFlyoutLabel: { classPropertyName: "navigationFlyoutLabel", publicName: "navigationFlyoutLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-shell-root": "" }, properties: { "class": "hostClasses()", "attr.data-shell-mode": "resolvedMode()", "attr.data-shell-device": "resolvedDevice()", "attr.data-shell-color": "resolvedColor()", "attr.data-shell-frame": "resolvedFrame()", "attr.data-shell-platform": "shell.platform", "attr.data-shell-window": "shell.windowState()" } }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	propDecorators: {
+		device: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "device",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		frame: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "frame",
+				required: false
+			}]
+		}],
+		nativeWindowControls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nativeWindowControls",
+				required: false
+			}]
+		}],
+		drag: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "drag",
+				required: false
+			}]
+		}],
+		landmark: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "landmark",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		minimizeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minimizeLabel",
+				required: false
+			}]
+		}],
+		maximizeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maximizeLabel",
+				required: false
+			}]
+		}],
+		restoreLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "restoreLabel",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		navigationFlyout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigationFlyout",
+				required: false
+			}]
+		}],
+		navigationFlyoutIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigationFlyoutIcon",
+				required: false
+			}]
+		}],
+		navigationFlyoutLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigationFlyoutLabel",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var ShellComponent = class ShellComponent {
+	shell = inject(ShellService$1);
+	mode = input(null, ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	device = input(null, ...ngDevMode ? [{ debugName: "device" }] : /* istanbul ignore next */ []);
+	color = input(null, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	frame = input(null, ...ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []);
+	nativeWindowControls = input(false, {
+		...ngDevMode ? { debugName: "nativeWindowControls" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	drag = input(true, {
+		...ngDevMode ? { debugName: "drag" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	landmark = input(true, {
+		...ngDevMode ? { debugName: "landmark" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	barAriaLabel = input("Application title bar", ...ngDevMode ? [{ debugName: "barAriaLabel" }] : /* istanbul ignore next */ []);
+	minimizeLabel = input("Minimize window", ...ngDevMode ? [{ debugName: "minimizeLabel" }] : /* istanbul ignore next */ []);
+	maximizeLabel = input("Maximize window", ...ngDevMode ? [{ debugName: "maximizeLabel" }] : /* istanbul ignore next */ []);
+	restoreLabel = input("Restore window", ...ngDevMode ? [{ debugName: "restoreLabel" }] : /* istanbul ignore next */ []);
+	closeLabel = input("Close window", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	navigationFlyout = input(true, {
+		...ngDevMode ? { debugName: "navigationFlyout" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	navigationFlyoutIcon = input("apps", ...ngDevMode ? [{ debugName: "navigationFlyoutIcon" }] : /* istanbul ignore next */ []);
+	navigationFlyoutLabel = input("Open navigation", ...ngDevMode ? [{ debugName: "navigationFlyoutLabel" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	resolvedMode = computed(() => this.mode() ?? this.shell.mode(), ...ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []);
+	resolvedDevice = computed(() => resolveShellDeviceForMode$1(this.resolvedMode(), this.device() ?? this.shell.device()), ...ngDevMode ? [{ debugName: "resolvedDevice" }] : /* istanbul ignore next */ []);
+	resolvedColor = computed(() => this.color() ?? this.shell.color(), ...ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []);
+	resolvedFrame = computed(() => resolveShellFrameForMode$1(this.resolvedMode(), this.frame() ?? this.shell.frame()), ...ngDevMode ? [{ debugName: "resolvedFrame" }] : /* istanbul ignore next */ []);
+	showsBar = computed(() => this.resolvedMode() === "desktop", ...ngDevMode ? [{ debugName: "showsBar" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => cn("relative isolate flex h-dvh w-full min-w-0 flex-col overflow-hidden text-foreground", this.showsBar() && this.drag() && "shell-drag-region", this.resolvedColor() === "sync" || this.resolvedFrame() === "modern" ? "bg-[hsl(var(--shell-bar-background))]" : "bg-layout-canvas", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ShellComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ShellComponent,
+		isStandalone: true,
+		selector: "Shell",
+		inputs: {
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			device: {
+				classPropertyName: "device",
+				publicName: "device",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			frame: {
+				classPropertyName: "frame",
+				publicName: "frame",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nativeWindowControls: {
+				classPropertyName: "nativeWindowControls",
+				publicName: "nativeWindowControls",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			drag: {
+				classPropertyName: "drag",
+				publicName: "drag",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			landmark: {
+				classPropertyName: "landmark",
+				publicName: "landmark",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			barAriaLabel: {
+				classPropertyName: "barAriaLabel",
+				publicName: "barAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minimizeLabel: {
+				classPropertyName: "minimizeLabel",
+				publicName: "minimizeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maximizeLabel: {
+				classPropertyName: "maximizeLabel",
+				publicName: "maximizeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			restoreLabel: {
+				classPropertyName: "restoreLabel",
+				publicName: "restoreLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navigationFlyout: {
+				classPropertyName: "navigationFlyout",
+				publicName: "navigationFlyout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navigationFlyoutIcon: {
+				classPropertyName: "navigationFlyoutIcon",
+				publicName: "navigationFlyoutIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navigationFlyoutLabel: {
+				classPropertyName: "navigationFlyoutLabel",
+				publicName: "navigationFlyoutLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-shell-root": "" },
+			properties: {
+				"class": "hostClasses()",
+				"attr.data-shell-mode": "resolvedMode()",
+				"attr.data-shell-device": "resolvedDevice()",
+				"attr.data-shell-color": "resolvedColor()",
+				"attr.data-shell-frame": "resolvedFrame()",
+				"attr.data-shell-platform": "shell.platform",
+				"attr.data-shell-window": "shell.windowState()"
+			}
+		},
+		ngImport: i0,
+		template: `
     @if (showsBar() && drag()) {
       <div
         aria-hidden="true"
@@ -743,24 +1127,53 @@ class ShellComponent {
     }
 
     <ng-content />
-  `, isInline: true, dependencies: [{ kind: "component", type: ShellBarComponent, selector: "ShellBar", inputs: ["device", "color", "frame", "nativeWindowControls", "drag", "landmark", "ariaLabel", "minimizeLabel", "maximizeLabel", "restoreLabel", "closeLabel", "navigationFlyout", "navigationFlyoutIcon", "navigationFlyoutLabel", "class"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ShellComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'Shell',
-                    imports: [ShellBarComponent],
-                    host: {
-                        '[class]': 'hostClasses()',
-                        'data-shell-root': '',
-                        '[attr.data-shell-mode]': 'resolvedMode()',
-                        '[attr.data-shell-device]': 'resolvedDevice()',
-                        '[attr.data-shell-color]': 'resolvedColor()',
-                        '[attr.data-shell-frame]': 'resolvedFrame()',
-                        '[attr.data-shell-platform]': 'shell.platform',
-                        '[attr.data-shell-window]': 'shell.windowState()',
-                    },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: ShellBarComponent,
+			selector: "ShellBar",
+			inputs: [
+				"device",
+				"color",
+				"frame",
+				"nativeWindowControls",
+				"drag",
+				"landmark",
+				"ariaLabel",
+				"minimizeLabel",
+				"maximizeLabel",
+				"restoreLabel",
+				"closeLabel",
+				"navigationFlyout",
+				"navigationFlyoutIcon",
+				"navigationFlyoutLabel",
+				"class"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ShellComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Shell",
+			imports: [ShellBarComponent],
+			host: {
+				"[class]": "hostClasses()",
+				"data-shell-root": "",
+				"[attr.data-shell-mode]": "resolvedMode()",
+				"[attr.data-shell-device]": "resolvedDevice()",
+				"[attr.data-shell-color]": "resolvedColor()",
+				"[attr.data-shell-frame]": "resolvedFrame()",
+				"[attr.data-shell-platform]": "shell.platform",
+				"[attr.data-shell-window]": "shell.windowState()"
+			},
+			template: `
     @if (showsBar() && drag()) {
       <div
         aria-hidden="true"
@@ -794,22 +1207,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
     }
 
     <ng-content />
-  `,
-                }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], device: [{ type: i0.Input, args: [{ isSignal: true, alias: "device", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], frame: [{ type: i0.Input, args: [{ isSignal: true, alias: "frame", required: false }] }], nativeWindowControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "nativeWindowControls", required: false }] }], drag: [{ type: i0.Input, args: [{ isSignal: true, alias: "drag", required: false }] }], landmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "landmark", required: false }] }], barAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "barAriaLabel", required: false }] }], minimizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizeLabel", required: false }] }], maximizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizeLabel", required: false }] }], restoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], navigationFlyout: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyout", required: false }] }], navigationFlyoutIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyoutIcon", required: false }] }], navigationFlyoutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationFlyoutLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/*
- * Public API of @ojiepermana/angular/theme/shell
- *
- * The application shell root: <Shell> owns the whole surface and holds the app
- * (normally a <Layout>) directly. On mode='desktop' it also renders its own
- * titlebar — <ShellBar> is deliberately NOT exported, because when a titlebar
- * exists is <Shell>'s decision, not the consumer's. Configure it through <Shell>
- * and its [shellBarStart] / [shellBarTitle] / [shellBarEnd] slots.
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ShellComponent };
+  `
+		}]
+	}],
+	propDecorators: {
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		device: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "device",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		frame: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "frame",
+				required: false
+			}]
+		}],
+		nativeWindowControls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nativeWindowControls",
+				required: false
+			}]
+		}],
+		drag: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "drag",
+				required: false
+			}]
+		}],
+		landmark: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "landmark",
+				required: false
+			}]
+		}],
+		barAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "barAriaLabel",
+				required: false
+			}]
+		}],
+		minimizeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minimizeLabel",
+				required: false
+			}]
+		}],
+		maximizeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maximizeLabel",
+				required: false
+			}]
+		}],
+		restoreLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "restoreLabel",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		navigationFlyout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigationFlyout",
+				required: false
+			}]
+		}],
+		navigationFlyoutIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigationFlyoutIcon",
+				required: false
+			}]
+		}],
+		navigationFlyoutLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigationFlyoutLabel",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+export { SHELL_COLORS, SHELL_COLOR_STORAGE_KEY, SHELL_DEFAULT_COLOR, SHELL_DEFAULT_DEVICE, SHELL_DEFAULT_FRAME, SHELL_DEFAULT_MODE, SHELL_DEFAULT_PLATFORM, SHELL_DEFAULT_WINDOW_STATE, SHELL_DEVICES, SHELL_DEVICE_STORAGE_KEY, SHELL_FRAMES, SHELL_FRAME_STORAGE_KEY, SHELL_MODES, SHELL_MODE_DEVICES, SHELL_MODE_STORAGE_KEY, SHELL_PLATFORMS, SHELL_WINDOW_BRIDGE, SHELL_WINDOW_STATES, ShellComponent, ShellService, WEB_SHELL_WINDOW_BRIDGE, createTauriShellWindowBridge, defaultShellDeviceForMode, isShellColor, isShellDevice, isShellDeviceForMode, isShellFrame, isShellMode, isShellPlatform, isShellWindowState, isTauriRuntime, normalizeShellColor, normalizeShellDevice, normalizeShellFrame, normalizeShellMode, provideShellWindowBridge, provideTauriShellWindowBridge, resolveShellDeviceForMode, resolveShellFrameForMode, shellDevicesForMode };