@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-theme-component-settings.mjs

@@ -1,410 +1,492 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, signal, effect, Service, computed, Component, model, input } from '@angular/core';
-import { DrawerCloseDirective, DrawerComponent, DrawerContentComponent, DrawerHeaderComponent, DrawerTitleComponent } from '@ojiepermana/angular/component/drawer';
-import { IconComponent } from '@ojiepermana/angular/component/icon';
-import { SegmentedControlComponent } from '@ojiepermana/angular/component/segmented-control';
-import { globalLocalStorage, injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
-import { LAYOUT_TYPE_STORAGE_KEY, LAYOUT_LOCKED_WIDTH } from '@ojiepermana/angular/theme/layout/types';
-import { ShellService } from '@ojiepermana/angular/theme/shell/services';
-import { isPlatformBrowser } from '@angular/common';
-import { LayoutService } from '@ojiepermana/angular/theme/layout/services';
-import { resolveShellDeviceForMode, shellDevicesForMode, SHELL_MODES, isShellDeviceForMode, SHELL_FRAMES, SHELL_COLORS } from '@ojiepermana/angular/theme/shell/types';
-import { ThemeModeService, ThemeColorService, ThemeBrandService, ThemeRadiusService, ThemeSpaceService, THEME_COLORS, THEME_NEUTRALS, isThemeMode, isThemeRadius, isThemeSpace } from '@ojiepermana/angular/theme/styles';
-
-/** Provide this from an application's persisted layout-settings facade. */
-const THEME_SETTINGS_ADAPTER = new InjectionToken('THEME_SETTINGS_ADAPTER');
-
-/** Storage key for the persisted navigation type. Owned by the package. */
-const NAV_TYPE_STORAGE_KEY = 'nav-type';
-/** Storage key for the persisted navigation presentation mode. Owned by the package. */
-const NAV_TYPE_MODE_STORAGE_KEY = 'nav-type-mode';
+import * as i0 from "@angular/core";
+import { Component, InjectionToken, PLATFORM_ID, Service, computed, effect, inject, input, model, signal } from "@angular/core";
+import { DrawerCloseDirective, DrawerComponent, DrawerContentComponent, DrawerHeaderComponent, DrawerTitleComponent } from "@ojiepermana/angular/component/drawer";
+import { IconComponent } from "@ojiepermana/angular/component/icon";
+import { SegmentedControlComponent } from "@ojiepermana/angular/component/segmented-control";
+import { cn, globalLocalStorage, injectUniqueId } from "@ojiepermana/angular/component/utils/core";
+import { LAYOUT_LOCKED_WIDTH, LAYOUT_TYPE_STORAGE_KEY } from "@ojiepermana/angular/theme/layout/types";
+import { ShellService } from "@ojiepermana/angular/theme/shell/services";
+import { isPlatformBrowser } from "@angular/common";
+import { LayoutService } from "@ojiepermana/angular/theme/layout/services";
+import { SHELL_COLORS, SHELL_FRAMES, SHELL_MODES, isShellDeviceForMode, resolveShellDeviceForMode, shellDevicesForMode } from "@ojiepermana/angular/theme/shell/types";
+import { THEME_COLORS, THEME_NEUTRALS, ThemeBrandService, ThemeColorService, ThemeModeService, ThemeRadiusService, ThemeSpaceService, isThemeMode, isThemeRadius, isThemeSpace } from "@ojiepermana/angular/theme/styles";
+const THEME_SETTINGS_ADAPTER = new InjectionToken("THEME_SETTINGS_ADAPTER");
+const NAV_TYPE_STORAGE_KEY = "nav-type";
+const NAV_TYPE_MODE_STORAGE_KEY = "nav-type-mode";
 const NAV_TYPES = [
-    'sidebar',
-    'dockbar',
-    'navbar',
-    'flyout',
-    'desktop',
+	"sidebar",
+	"dockbar",
+	"navbar",
+	"flyout",
+	"desktop"
 ];
-const NAV_TYPE_MODES = ['default', 'collapsed', 'drawer'];
-/**
- * Nav types valid for a layout/shell pair — mirrors `LayoutWrapperDefault`
- * (`navbar`/`flyout` → web horizontal, `sidebar`/`dockbar` → vertical).
- * A desktop-mode horizontal shell owns exactly one navigation shape: `desktop`.
- * `empty` and `fluid` shells are brand-only, so no nav type applies.
- */
-function allowedNavTypes$1(layoutType, shellMode) {
-    switch (layoutType) {
-        case 'vertical':
-            return ['sidebar', 'dockbar'];
-        case 'horizontal':
-            return shellMode === 'desktop' ? ['desktop'] : ['navbar', 'flyout'];
-        default:
-            return [];
-    }
+const NAV_TYPE_MODES = [
+	"default",
+	"collapsed",
+	"drawer"
+];
+function allowedNavTypes(layoutType, shellMode) {
+	switch (layoutType) {
+		case "vertical": return ["sidebar", "dockbar"];
+		case "horizontal": return shellMode === "desktop" ? ["desktop"] : ["navbar", "flyout"];
+		default: return [];
+	}
 }
-/**
- * Presentation modes meaningful to a navigation type: sidebar collapses, dockbar
- * turns into a drawer, and every other type has one presentation only.
- */
 function allowedNavTypeModes(navType) {
-    switch (navType) {
-        case 'sidebar':
-            return ['default', 'collapsed'];
-        case 'dockbar':
-            return ['default', 'drawer'];
-        default:
-            return ['default'];
-    }
+	switch (navType) {
+		case "sidebar": return ["default", "collapsed"];
+		case "dockbar": return ["default", "drawer"];
+		default: return ["default"];
+	}
 }
-/** `fluid` width only has an effect when the layout type is also `fluid`. */
 function isWidthEnabled(layoutType, width) {
-    return width !== 'fluid' || layoutType === 'fluid';
+	return width !== "fluid" || layoutType === "fluid";
 }
-/**
- * Default `ThemeSettingsAdapter`: the axis coherence rules that make runtime
- * layout and navigation switching safe, published so every consumer shares one
- * tested implementation instead of copying it.
- *
- * - `surface` / `appearance` / `width` delegate to the library `LayoutService`
- *   (already reactive and persisted, with no nav-derived override to drift from).
- * - `layoutType` / `navType` / `navTypeMode` are owned here: `<Layout>` writes
- *   `type` back to the service (`persist: false`) to follow nav orientation, so
- *   reading `layout.type()` would drift from the operator's choice. Nav type is
- *   not `LayoutService` territory at all.
- *
- * Incoherent axis pairs auto-correct, so the shell never renders an impossible
- * state. Only presentation choices are stored, never identity or session data,
- * and storage that is unavailable or holds a foreign value falls back to the
- * default without throwing.
- *
- * Install with {@link provideThemeSettingsAdapter}.
- */
-class ThemeSettingsDefaultAdapter {
-    platformId = inject(PLATFORM_ID);
-    storage = globalLocalStorage(isPlatformBrowser(this.platformId));
-    layout = inject(LayoutService);
-    shell = inject(ShellService);
-    surface = this.layout.surface;
-    appearance = this.layout.appearance;
-    width = this.layout.width;
-    layoutTypeState = signal(this.layout.getStoredType(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layoutTypeState" }] : /* istanbul ignore next */ []));
-    navTypeState = signal(this.readStoredNavType(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navTypeState" }] : /* istanbul ignore next */ []));
-    navTypeModeState = signal(this.readStoredNavTypeMode(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navTypeModeState" }] : /* istanbul ignore next */ []));
-    layoutType = this.layoutTypeState.asReadonly();
-    navType = this.navTypeState.asReadonly();
-    navTypeMode = this.navTypeModeState.asReadonly();
-    /** Shell mode the nav-type constraints are resolved against. */
-    shellMode = this.shell.mode;
-    constructor() {
-        // Keep external shell-mode changes coherent too: desktop+horizontal owns
-        // exactly `desktop`, while that nav type cannot survive another shell mode.
-        effect(() => this.enforceConstraints(this.layoutTypeState(), this.shell.mode()));
-    }
-    setSurface(surface) {
-        this.layout.setSurface(surface);
-    }
-    setAppearance(appearance) {
-        this.layout.setAppearance(appearance);
-    }
-    setWidth(width) {
-        this.layout.setWidth(width);
-    }
-    setLayoutType(type) {
-        this.layoutTypeState.set(type);
-        this.storage.write(LAYOUT_TYPE_STORAGE_KEY, type);
-        this.enforceConstraints(type, this.shell.mode());
-    }
-    setNavType(type) {
-        if (!allowedNavTypes$1(this.layoutTypeState(), this.shell.mode()).includes(type)) {
-            return;
-        }
-        this.navTypeState.set(type);
-        this.storage.write(NAV_TYPE_STORAGE_KEY, type);
-        this.enforceNavTypeMode();
-    }
-    setNavTypeMode(mode) {
-        if (!allowedNavTypeModes(this.navTypeState()).includes(mode)) {
-            return;
-        }
-        this.navTypeModeState.set(mode);
-        this.storage.write(NAV_TYPE_MODE_STORAGE_KEY, mode);
-    }
-    /**
-     * Auto-correct the lower-priority axes a layout type invalidates, so the
-     * rendered shell never lands in an inconsistent state (e.g. `vertical` +
-     * `navbar`). Idempotent — only writes when a value is actually out of range.
-     */
-    enforceConstraints(type, shellMode) {
-        const navs = allowedNavTypes$1(type, shellMode);
-        if (navs.length && !navs.includes(this.navTypeState())) {
-            this.setNavType(navs[0]);
-        }
-        this.enforceNavTypeMode();
-        if (type === 'fluid' && this.width() !== 'fluid') {
-            this.setWidth('fluid');
-        }
-        else if (type !== 'fluid' && this.width() === 'fluid') {
-            this.setWidth('wide');
-        }
-    }
-    enforceNavTypeMode() {
-        const available = allowedNavTypeModes(this.navTypeState());
-        if (!available.includes(this.navTypeModeState())) {
-            this.setNavTypeMode(available[0]);
-        }
-    }
-    readStoredNavType() {
-        const stored = this.storage.read(NAV_TYPE_STORAGE_KEY);
-        return stored && NAV_TYPES.includes(stored)
-            ? stored
-            : 'dockbar';
-    }
-    readStoredNavTypeMode() {
-        const stored = this.storage.read(NAV_TYPE_MODE_STORAGE_KEY);
-        return stored && NAV_TYPE_MODES.includes(stored)
-            ? stored
-            : 'default';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsDefaultAdapter, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsDefaultAdapter });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsDefaultAdapter, decorators: [{
-            type: Service
-        }], ctorParameters: () => [] });
-/**
- * Install the published {@link ThemeSettingsDefaultAdapter} on
- * `THEME_SETTINGS_ADAPTER`, which turns on the layout and navigation sections of
- * `<ThemeSettings>`:
- *
- * ```ts
- * providers: [provideThemeSettingsAdapter()];
- * ```
- *
- * Additive: consumers that provide their own adapter, or none at all, are
- * unaffected.
- */
+var ThemeSettingsDefaultAdapter = class ThemeSettingsDefaultAdapter {
+	platformId = inject(PLATFORM_ID);
+	storage = globalLocalStorage(isPlatformBrowser(this.platformId));
+	layout = inject(LayoutService);
+	shell = inject(ShellService);
+	surface = this.layout.surface;
+	appearance = this.layout.appearance;
+	width = this.layout.width;
+	layoutTypeState = signal(this.layout.getStoredType(), ...ngDevMode ? [{ debugName: "layoutTypeState" }] : /* istanbul ignore next */ []);
+	navTypeState = signal(this.readStoredNavType(), ...ngDevMode ? [{ debugName: "navTypeState" }] : /* istanbul ignore next */ []);
+	navTypeModeState = signal(this.readStoredNavTypeMode(), ...ngDevMode ? [{ debugName: "navTypeModeState" }] : /* istanbul ignore next */ []);
+	layoutType = this.layoutTypeState.asReadonly();
+	navType = this.navTypeState.asReadonly();
+	navTypeMode = this.navTypeModeState.asReadonly();
+	shellMode = this.shell.mode;
+	constructor() {
+		effect(() => this.enforceConstraints(this.layoutTypeState(), this.shell.mode()));
+	}
+	setSurface(surface) {
+		this.layout.setSurface(surface);
+	}
+	setAppearance(appearance) {
+		this.layout.setAppearance(appearance);
+	}
+	setWidth(width) {
+		this.layout.setWidth(width);
+	}
+	setLayoutType(type) {
+		this.layoutTypeState.set(type);
+		this.storage.write(LAYOUT_TYPE_STORAGE_KEY, type);
+		this.enforceConstraints(type, this.shell.mode());
+	}
+	setNavType(type) {
+		if (!allowedNavTypes(this.layoutTypeState(), this.shell.mode()).includes(type)) return;
+		this.navTypeState.set(type);
+		this.storage.write(NAV_TYPE_STORAGE_KEY, type);
+		this.enforceNavTypeMode();
+	}
+	setNavTypeMode(mode) {
+		if (!allowedNavTypeModes(this.navTypeState()).includes(mode)) return;
+		this.navTypeModeState.set(mode);
+		this.storage.write(NAV_TYPE_MODE_STORAGE_KEY, mode);
+	}
+	enforceConstraints(type, shellMode) {
+		const navs = allowedNavTypes(type, shellMode);
+		if (navs.length && !navs.includes(this.navTypeState())) this.setNavType(navs[0]);
+		this.enforceNavTypeMode();
+		if (type === "fluid" && this.width() !== "fluid") this.setWidth("fluid");
+		else if (type !== "fluid" && this.width() === "fluid") this.setWidth("wide");
+	}
+	enforceNavTypeMode() {
+		const available = allowedNavTypeModes(this.navTypeState());
+		if (!available.includes(this.navTypeModeState())) this.setNavTypeMode(available[0]);
+	}
+	readStoredNavType() {
+		const stored = this.storage.read(NAV_TYPE_STORAGE_KEY);
+		return stored && NAV_TYPES.includes(stored) ? stored : "dockbar";
+	}
+	readStoredNavTypeMode() {
+		const stored = this.storage.read(NAV_TYPE_MODE_STORAGE_KEY);
+		return stored && NAV_TYPE_MODES.includes(stored) ? stored : "default";
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeSettingsDefaultAdapter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeSettingsDefaultAdapter
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeSettingsDefaultAdapter,
+	decorators: [{ type: Service }],
+	ctorParameters: () => []
+});
 function provideThemeSettingsAdapter() {
-    return [{ provide: THEME_SETTINGS_ADAPTER, useExisting: ThemeSettingsDefaultAdapter }];
+	return [{
+		provide: THEME_SETTINGS_ADAPTER,
+		useExisting: ThemeSettingsDefaultAdapter
+	}];
 }
-
-/**
- * The one rule the settings sections share.
- *
- * Two of the four sections change something that can invalidate the navigation
- * type: the layout section (layout type) and the shell section (shell mode). Both
- * have to run the same correction, and before the split they called one private
- * method. Pure functions here, so neither section owns it and neither can drift.
- */
-/** Nav types the active layout and shell pair allows. Empty without an adapter. */
-function allowedNavTypes(adapter, shellMode) {
-    const layoutType = adapter?.layoutType();
-    return layoutType ? allowedNavTypes$1(layoutType, shellMode) : [];
+function allowedNavTypes$1(adapter, shellMode) {
+	const layoutType = adapter?.layoutType();
+	return layoutType ? allowedNavTypes(layoutType, shellMode) : [];
 }
-/**
- * Correct a navigation type the new layout or shell pair no longer allows.
- * Idempotent, and a no-op without an adapter.
- */
 function normalizeNavType(adapter, shellMode) {
-    const current = adapter?.navType();
-    const allowed = allowedNavTypes(adapter, shellMode);
-    if (current && allowed.length && !allowed.includes(current)) {
-        adapter?.setNavType(allowed[0]);
-    }
+	const current = adapter?.navType();
+	const allowed = allowedNavTypes$1(adapter, shellMode);
+	if (current && allowed.length && !allowed.includes(current)) adapter?.setNavType(allowed[0]);
 }
-
-/*
- * Option tables and swatch palettes for `ThemeSettings`.
- *
- * Pure data, extracted from the component so the drawer stays inside the
- * 700-line source-unit budget (scripts/check-library-boundaries.mjs) as axes are
- * added. Each option list is the full domain of one axis; the component decides
- * which entries are `disabled` in the current combination.
- */
-const DEFAULT_BRAND_COLOR = '262 83% 58%';
-const DEFAULT_BRAND_HSL = [262, 83, 58];
+const DEFAULT_BRAND_HSL = [
+	262,
+	83,
+	58
+];
 const MODE_OPTIONS = [
-    { value: 'light', label: 'Light', icon: 'light_mode' },
-    { value: 'dark', label: 'Dark', icon: 'dark_mode' },
-    { value: 'system', label: 'System', icon: 'desktop_windows' },
+	{
+		value: "light",
+		label: "Light",
+		icon: "light_mode"
+	},
+	{
+		value: "dark",
+		label: "Dark",
+		icon: "dark_mode"
+	},
+	{
+		value: "system",
+		label: "System",
+		icon: "desktop_windows"
+	}
 ];
-/**
- * Shell delivery targets (`@ojiepermana/angular/theme/shell`). Everything but
- * `web` owns its whole surface, which is what locks the layout width to `full`.
- */
 const SHELL_MODE_OPTIONS = [
-    { value: 'web', label: 'Web', icon: 'public' },
-    { value: 'desktop', label: 'Desktop', icon: 'desktop_windows' },
-    { value: 'tablet', label: 'Tablet', icon: 'tablet' },
-    { value: 'mobile', label: 'Mobile', icon: 'smartphone' },
-];
-/**
- * Where the shell's own chrome takes its colors from. `sync` follows the theme
- * axes above; `default` paints the active device's native titlebar instead.
- */
-const SHELL_COLOR_OPTIONS = [
-    { value: 'sync', label: 'Sync', icon: 'palette' },
-    { value: 'default', label: 'Native', icon: 'desktop_mac' },
+	{
+		value: "web",
+		label: "Web",
+		icon: "public"
+	},
+	{
+		value: "desktop",
+		label: "Desktop",
+		icon: "desktop_windows"
+	},
+	{
+		value: "tablet",
+		label: "Tablet",
+		icon: "tablet"
+	},
+	{
+		value: "mobile",
+		label: "Mobile",
+		icon: "smartphone"
+	}
 ];
-/**
- * How the app sits in its window. `modern` insets it as a panel and fuses the
- * titlebar with the surround; only a desktop window has a frame to shape.
- */
-const SHELL_FRAME_OPTIONS = [
-    { value: 'classic', label: 'Classic', icon: 'crop_din' },
-    { value: 'modern', label: 'Modern', icon: 'fullscreen_exit' },
-];
-/**
- * Host devices, keyed so the drawer can offer only the ones the active shell mode
- * can actually run on (`SHELL_MODE_DEVICES`) — with `web` that is a single entry,
- * so a flat 7-option control would be mostly disabled noise.
- */
+const SHELL_COLOR_OPTIONS = [{
+	value: "sync",
+	label: "Sync",
+	icon: "palette"
+}, {
+	value: "default",
+	label: "Native",
+	icon: "desktop_mac"
+}];
+const SHELL_FRAME_OPTIONS = [{
+	value: "classic",
+	label: "Classic",
+	icon: "crop_din"
+}, {
+	value: "modern",
+	label: "Modern",
+	icon: "fullscreen_exit"
+}];
 const SHELL_DEVICE_OPTIONS = {
-    browser: { value: 'browser', label: 'Browser', icon: 'language' },
-    macos: { value: 'macos', label: 'macOS', icon: 'laptop_mac' },
-    windows: { value: 'windows', label: 'Windows', icon: 'laptop_windows' },
-    linux: { value: 'linux', label: 'Linux', icon: 'terminal' },
-    ipad: { value: 'ipad', label: 'iPad', icon: 'tablet_mac' },
-    android: { value: 'android', label: 'Android', icon: 'android' },
-    ios: { value: 'ios', label: 'iOS', icon: 'phone_iphone' },
+	browser: {
+		value: "browser",
+		label: "Browser",
+		icon: "language"
+	},
+	macos: {
+		value: "macos",
+		label: "macOS",
+		icon: "laptop_mac"
+	},
+	windows: {
+		value: "windows",
+		label: "Windows",
+		icon: "laptop_windows"
+	},
+	linux: {
+		value: "linux",
+		label: "Linux",
+		icon: "terminal"
+	},
+	ipad: {
+		value: "ipad",
+		label: "iPad",
+		icon: "tablet_mac"
+	},
+	android: {
+		value: "android",
+		label: "Android",
+		icon: "android"
+	},
+	ios: {
+		value: "ios",
+		label: "iOS",
+		icon: "phone_iphone"
+	}
 };
-/** Corner radius axis; each preset carries Tailwind's stock value for its name. */
 const RADIUS_OPTIONS = [
-    { value: 'none', label: 'None', icon: 'crop_square' },
-    { value: 'xs', label: 'Xs', icon: 'rounded_corner' },
-    { value: 'sm', label: 'Sm', icon: 'rounded_corner' },
-    { value: 'md', label: 'Md', icon: 'rounded_corner' },
-    { value: 'xl', label: 'Xl', icon: 'rounded_corner' },
-    { value: 'full', label: 'Full', icon: 'circle' },
-];
-const SPACE_OPTIONS = [
-    { value: 'compact', label: 'Compact', icon: 'density_small' },
-    { value: 'normal', label: 'Normal', icon: 'density_medium' },
-];
-const APPEARANCE_OPTIONS = [
-    { value: 'flat', label: 'Flat', icon: 'web_asset' },
-    { value: 'border-rail', label: 'Border rail', icon: 'border_outer' },
+	{
+		value: "none",
+		label: "None",
+		icon: "crop_square"
+	},
+	{
+		value: "xs",
+		label: "Xs",
+		icon: "rounded_corner"
+	},
+	{
+		value: "sm",
+		label: "Sm",
+		icon: "rounded_corner"
+	},
+	{
+		value: "md",
+		label: "Md",
+		icon: "rounded_corner"
+	},
+	{
+		value: "xl",
+		label: "Xl",
+		icon: "rounded_corner"
+	},
+	{
+		value: "full",
+		label: "Full",
+		icon: "circle"
+	}
 ];
+const SPACE_OPTIONS = [{
+	value: "compact",
+	label: "Compact",
+	icon: "density_small"
+}, {
+	value: "normal",
+	label: "Normal",
+	icon: "density_medium"
+}];
+const APPEARANCE_OPTIONS = [{
+	value: "flat",
+	label: "Flat",
+	icon: "web_asset"
+}, {
+	value: "border-rail",
+	label: "Border rail",
+	icon: "border_outer"
+}];
 const SURFACE_OPTIONS = [
-    { value: 'flat', label: 'Flat', icon: 'format_color_reset' },
-    { value: 'grid', label: 'Grid', icon: 'grid_4x4' },
-    { value: 'grid-line', label: 'Grid line', icon: 'grid_view' },
-    { value: 'honeycomb', label: 'Honeycomb', icon: 'hexagon' },
-    { value: 'matrix', label: 'Matrix', icon: 'data_object' },
-    { value: 'circuit', label: 'Circuit', icon: 'memory' },
-    { value: 'line-vertical', label: 'Vertical lines', icon: 'view_column' },
-    { value: 'line-horizontal', label: 'Horizontal lines', icon: 'view_agenda' },
+	{
+		value: "flat",
+		label: "Flat",
+		icon: "format_color_reset"
+	},
+	{
+		value: "grid",
+		label: "Grid",
+		icon: "grid_4x4"
+	},
+	{
+		value: "grid-line",
+		label: "Grid line",
+		icon: "grid_view"
+	},
+	{
+		value: "honeycomb",
+		label: "Honeycomb",
+		icon: "hexagon"
+	},
+	{
+		value: "matrix",
+		label: "Matrix",
+		icon: "data_object"
+	},
+	{
+		value: "circuit",
+		label: "Circuit",
+		icon: "memory"
+	},
+	{
+		value: "line-vertical",
+		label: "Vertical lines",
+		icon: "view_column"
+	},
+	{
+		value: "line-horizontal",
+		label: "Horizontal lines",
+		icon: "view_agenda"
+	}
 ];
 const LAYOUT_TYPE_OPTIONS = [
-    { value: 'vertical', label: 'Vertical', icon: 'view_sidebar' },
-    { value: 'horizontal', label: 'Horizontal', icon: 'view_stream' },
-    { value: 'empty', label: 'Empty', icon: 'crop_free' },
-    { value: 'fluid', label: 'Fluid', icon: 'fit_screen' },
+	{
+		value: "vertical",
+		label: "Vertical",
+		icon: "view_sidebar"
+	},
+	{
+		value: "horizontal",
+		label: "Horizontal",
+		icon: "view_stream"
+	},
+	{
+		value: "empty",
+		label: "Empty",
+		icon: "crop_free"
+	},
+	{
+		value: "fluid",
+		label: "Fluid",
+		icon: "fit_screen"
+	}
 ];
 const WIDTH_OPTIONS = [
-    { value: 'full', label: 'Full', icon: 'width_full' },
-    { value: 'wide', label: 'Wide', icon: 'width_wide' },
-    { value: 'container', label: 'Container', icon: 'width_normal' },
-    { value: 'fluid', label: 'Fluid', icon: 'aspect_ratio' },
+	{
+		value: "full",
+		label: "Full",
+		icon: "width_full"
+	},
+	{
+		value: "wide",
+		label: "Wide",
+		icon: "width_wide"
+	},
+	{
+		value: "container",
+		label: "Container",
+		icon: "width_normal"
+	},
+	{
+		value: "fluid",
+		label: "Fluid",
+		icon: "aspect_ratio"
+	}
 ];
 const NAV_TYPE_OPTIONS = [
-    { value: 'sidebar', label: 'Sidebar', icon: 'left_panel_open' },
-    { value: 'dockbar', label: 'Dockbar', icon: 'dock_to_left' },
-    { value: 'navbar', label: 'Navbar', icon: 'menu' },
-    { value: 'flyout', label: 'Flyout', icon: 'open_in_new' },
-    { value: 'desktop', label: 'Desktop', icon: 'desktop_windows' },
+	{
+		value: "sidebar",
+		label: "Sidebar",
+		icon: "left_panel_open"
+	},
+	{
+		value: "dockbar",
+		label: "Dockbar",
+		icon: "dock_to_left"
+	},
+	{
+		value: "navbar",
+		label: "Navbar",
+		icon: "menu"
+	},
+	{
+		value: "flyout",
+		label: "Flyout",
+		icon: "open_in_new"
+	},
+	{
+		value: "desktop",
+		label: "Desktop",
+		icon: "desktop_windows"
+	}
 ];
 const ACCENT_SWATCH = {
-    base: 'hsl(240 6% 10%)',
-    red: 'hsl(0 72% 48%)',
-    orange: 'hsl(24 95% 48%)',
-    amber: 'hsl(38 92% 48%)',
-    yellow: 'hsl(48 96% 48%)',
-    lime: 'hsl(84 78% 44%)',
-    green: 'hsl(142 69% 40%)',
-    emerald: 'hsl(160 78% 38%)',
-    teal: 'hsl(173 75% 38%)',
-    cyan: 'hsl(191 85% 40%)',
-    sky: 'hsl(199 89% 46%)',
-    blue: 'hsl(221 83% 53%)',
-    indigo: 'hsl(239 78% 60%)',
-    violet: 'hsl(258 86% 62%)',
-    purple: 'hsl(271 81% 56%)',
-    fuchsia: 'hsl(292 80% 56%)',
-    pink: 'hsl(330 78% 54%)',
-    rose: 'hsl(349 84% 52%)',
-    brand: 'hsl(var(--brand))',
+	base: "hsl(240 6% 10%)",
+	red: "hsl(0 72% 48%)",
+	orange: "hsl(24 95% 48%)",
+	amber: "hsl(38 92% 48%)",
+	yellow: "hsl(48 96% 48%)",
+	lime: "hsl(84 78% 44%)",
+	green: "hsl(142 69% 40%)",
+	emerald: "hsl(160 78% 38%)",
+	teal: "hsl(173 75% 38%)",
+	cyan: "hsl(191 85% 40%)",
+	sky: "hsl(199 89% 46%)",
+	blue: "hsl(221 83% 53%)",
+	indigo: "hsl(239 78% 60%)",
+	violet: "hsl(258 86% 62%)",
+	purple: "hsl(271 81% 56%)",
+	fuchsia: "hsl(292 80% 56%)",
+	pink: "hsl(330 78% 54%)",
+	rose: "hsl(349 84% 52%)",
+	brand: "hsl(var(--brand))"
 };
 const NEUTRAL_SWATCH = {
-    base: 'hsl(220 9% 46%)',
-    slate: 'hsl(215 16% 47%)',
-    gray: 'hsl(220 9% 46%)',
-    zinc: 'hsl(240 5% 46%)',
-    neutral: 'hsl(0 0% 46%)',
-    stone: 'hsl(30 6% 46%)',
-    mauve: 'hsl(280 6% 47%)',
-    olive: 'hsl(80 8% 42%)',
-    mist: 'hsl(200 14% 50%)',
-    taupe: 'hsl(28 10% 46%)',
+	base: "hsl(220 9% 46%)",
+	slate: "hsl(215 16% 47%)",
+	gray: "hsl(220 9% 46%)",
+	zinc: "hsl(240 5% 46%)",
+	neutral: "hsl(0 0% 46%)",
+	stone: "hsl(30 6% 46%)",
+	mauve: "hsl(280 6% 47%)",
+	olive: "hsl(80 8% 42%)",
+	mist: "hsl(200 14% 50%)",
+	taupe: "hsl(28 10% 46%)"
 };
-
-/**
- * The Layout section of `ThemeSettings`: appearance, surface, layout type, width.
- * Internal, see the Theme section for why.
- *
- * The adapter is injected NON-optionally: the parent only renders this section
- * when an adapter is present, which is what lets a theme-only consumer use
- * `ThemeSettings` with just the Theme and Shell sections.
- */
-class ThemeSettingsLayoutSectionComponent {
-    shell = inject(ShellService);
-    settings = inject(THEME_SETTINGS_ADAPTER);
-    shellMode = this.shell.mode;
-    /** Every mode but `web` owns its surface, which is what locks the width axis. */
-    widthLocked = computed(() => this.shellMode() !== 'web', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "widthLocked" }] : /* istanbul ignore next */ []));
-    appearanceOptions = APPEARANCE_OPTIONS;
-    surfaceOptions = SURFACE_OPTIONS;
-    layoutTypeOptions = LAYOUT_TYPE_OPTIONS;
-    widthOptions = computed(() => WIDTH_OPTIONS.map((option) => ({
-        ...option,
-        disabled: 
-        // The shell mode lock leaves exactly one legal width; `fluid` additionally
-        // needs the fluid layout type to mean anything.
-        (this.widthLocked() && option.value !== LAYOUT_LOCKED_WIDTH) ||
-            (option.value === 'fluid' && this.settings.layoutType() !== 'fluid'),
-    })), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "widthOptions" }] : /* istanbul ignore next */ []));
-    layoutGroupId = injectUniqueId('theme-settings-layout');
-    appearanceLabelId = injectUniqueId('theme-settings-appearance');
-    surfaceLabelId = injectUniqueId('theme-settings-surface');
-    layoutTypeLabelId = injectUniqueId('theme-settings-layout-type');
-    widthLabelId = injectUniqueId('theme-settings-width');
-    setAppearance(value) {
-        if (value === 'flat' || value === 'border-rail')
-            this.settings.setAppearance(value);
-    }
-    setSurface(value) {
-        if (SURFACE_OPTIONS.some((option) => option.value === value))
-            this.settings.setSurface(value);
-    }
-    setLayoutType(value) {
-        if (LAYOUT_TYPE_OPTIONS.some((option) => option.value === value)) {
-            this.settings.setLayoutType(value);
-            normalizeNavType(this.settings, this.shellMode());
-        }
-    }
-    setWidth(value) {
-        // Refuse the change rather than record a preference the lock would hide.
-        if (this.widthLocked())
-            return;
-        if (WIDTH_OPTIONS.some((option) => option.value === value))
-            this.settings.setWidth(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsLayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ThemeSettingsLayoutSectionComponent, isStandalone: true, selector: "ThemeSettingsLayoutSection", host: { classAttribute: "contents" }, ngImport: i0, template: `
+var ThemeSettingsLayoutSectionComponent = class ThemeSettingsLayoutSectionComponent {
+	shell = inject(ShellService);
+	settings = inject(THEME_SETTINGS_ADAPTER);
+	shellMode = this.shell.mode;
+	widthLocked = computed(() => this.shellMode() !== "web", ...ngDevMode ? [{ debugName: "widthLocked" }] : /* istanbul ignore next */ []);
+	appearanceOptions = APPEARANCE_OPTIONS;
+	surfaceOptions = SURFACE_OPTIONS;
+	layoutTypeOptions = LAYOUT_TYPE_OPTIONS;
+	widthOptions = computed(() => WIDTH_OPTIONS.map((option) => ({
+		...option,
+		disabled: this.widthLocked() && option.value !== LAYOUT_LOCKED_WIDTH || option.value === "fluid" && this.settings.layoutType() !== "fluid"
+	})), ...ngDevMode ? [{ debugName: "widthOptions" }] : /* istanbul ignore next */ []);
+	layoutGroupId = injectUniqueId("theme-settings-layout");
+	appearanceLabelId = injectUniqueId("theme-settings-appearance");
+	surfaceLabelId = injectUniqueId("theme-settings-surface");
+	layoutTypeLabelId = injectUniqueId("theme-settings-layout-type");
+	widthLabelId = injectUniqueId("theme-settings-width");
+	setAppearance(value) {
+		if (value === "flat" || value === "border-rail") this.settings.setAppearance(value);
+	}
+	setSurface(value) {
+		if (SURFACE_OPTIONS.some((option) => option.value === value)) this.settings.setSurface(value);
+	}
+	setLayoutType(value) {
+		if (LAYOUT_TYPE_OPTIONS.some((option) => option.value === value)) {
+			this.settings.setLayoutType(value);
+			normalizeNavType(this.settings, this.shellMode());
+		}
+	}
+	setWidth(value) {
+		if (this.widthLocked()) return;
+		if (WIDTH_OPTIONS.some((option) => option.value === value)) this.settings.setWidth(value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeSettingsLayoutSectionComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ThemeSettingsLayoutSectionComponent,
+		isStandalone: true,
+		selector: "ThemeSettingsLayoutSection",
+		host: { classAttribute: "contents" },
+		ngImport: i0,
+		template: `
     <section
       class="flex flex-col gap-5 border-t border-border pt-7"
       [attr.aria-labelledby]="layoutGroupId"
@@ -463,15 +545,39 @@ class ThemeSettingsLayoutSectionComponent {
         }
       </div>
     </section>
-  `, isInline: true, dependencies: [{ kind: "component", type: SegmentedControlComponent, selector: "SegmentedControl", inputs: ["options", "value", "appearance", "space", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "class"], outputs: ["valueChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsLayoutSectionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ThemeSettingsLayoutSection',
-                    imports: [SegmentedControlComponent],
-                    host: { class: 'contents' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: SegmentedControlComponent,
+			selector: "SegmentedControl",
+			inputs: [
+				"options",
+				"value",
+				"appearance",
+				"space",
+				"disabled",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"class"
+			],
+			outputs: ["valueChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeSettingsLayoutSectionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ThemeSettingsLayoutSection",
+			imports: [SegmentedControlComponent],
+			host: { class: "contents" },
+			template: `
     <section
       class="flex flex-col gap-5 border-t border-border pt-7"
       [attr.aria-labelledby]="layoutGroupId"
@@ -530,57 +636,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         }
       </div>
     </section>
-  `,
-                }]
-        }] });
-
-/**
- * The Navigation section of `ThemeSettings`: navigation type and its mode.
- * Internal, see the Theme section for why.
- */
-class ThemeSettingsNavigationSectionComponent {
-    shell = inject(ShellService);
-    settings = inject(THEME_SETTINGS_ADAPTER);
-    navTypeOptions = computed(() => NAV_TYPE_OPTIONS.map((option) => ({
-        ...option,
-        disabled: !allowedNavTypes(this.settings, this.shell.mode()).includes(option.value),
-    })), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navTypeOptions" }] : /* istanbul ignore next */ []));
-    // Mirrors `allowedNavTypeModes` in the default adapter, which decides which of
-    // these the adapter will actually accept; here they also carry their labels,
-    // and dockbar names its default "Sticky".
-    navTypeModeOptions = computed(() => {
-        switch (this.settings.navType()) {
-            case 'sidebar':
-                return [
-                    { value: 'default', label: 'Default', icon: 'view_sidebar' },
-                    { value: 'collapsed', label: 'Collapsed', icon: 'first_page' },
-                ];
-            case 'dockbar':
-                return [
-                    { value: 'default', label: 'Sticky', icon: 'dock_to_left' },
-                    { value: 'drawer', label: 'Drawer', icon: 'side_navigation' },
-                ];
-            default:
-                return [{ value: 'default', label: 'Default', icon: 'tune' }];
-        }
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navTypeModeOptions" }] : /* istanbul ignore next */ []));
-    navigationGroupId = injectUniqueId('theme-settings-navigation');
-    navTypeLabelId = injectUniqueId('theme-settings-nav-type');
-    navTypeModeLabelId = injectUniqueId('theme-settings-nav-type-mode');
-    setNavType(value) {
-        if (value &&
-            allowedNavTypes(this.settings, this.shell.mode()).includes(value)) {
-            this.settings.setNavType(value);
-        }
-    }
-    setNavTypeMode(value) {
-        if (value === 'default' || value === 'collapsed' || value === 'drawer')
-            this.settings.setNavTypeMode(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsNavigationSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: ThemeSettingsNavigationSectionComponent, isStandalone: true, selector: "ThemeSettingsNavigationSection", host: { classAttribute: "contents" }, ngImport: i0, template: `
+  `
+		}]
+	}]
+});
+var ThemeSettingsNavigationSectionComponent = class ThemeSettingsNavigationSectionComponent {
+	shell = inject(ShellService);
+	settings = inject(THEME_SETTINGS_ADAPTER);
+	navTypeOptions = computed(() => NAV_TYPE_OPTIONS.map((option) => ({
+		...option,
+		disabled: !allowedNavTypes$1(this.settings, this.shell.mode()).includes(option.value)
+	})), ...ngDevMode ? [{ debugName: "navTypeOptions" }] : /* istanbul ignore next */ []);
+	navTypeModeOptions = computed(() => {
+		switch (this.settings.navType()) {
+			case "sidebar": return [{
+				value: "default",
+				label: "Default",
+				icon: "view_sidebar"
+			}, {
+				value: "collapsed",
+				label: "Collapsed",
+				icon: "first_page"
+			}];
+			case "dockbar": return [{
+				value: "default",
+				label: "Sticky",
+				icon: "dock_to_left"
+			}, {
+				value: "drawer",
+				label: "Drawer",
+				icon: "side_navigation"
+			}];
+			default: return [{
+				value: "default",
+				label: "Default",
+				icon: "tune"
+			}];
+		}
+	}, ...ngDevMode ? [{ debugName: "navTypeModeOptions" }] : /* istanbul ignore next */ []);
+	navigationGroupId = injectUniqueId("theme-settings-navigation");
+	navTypeLabelId = injectUniqueId("theme-settings-nav-type");
+	navTypeModeLabelId = injectUniqueId("theme-settings-nav-type-mode");
+	setNavType(value) {
+		if (value && allowedNavTypes$1(this.settings, this.shell.mode()).includes(value)) this.settings.setNavType(value);
+	}
+	setNavTypeMode(value) {
+		if (value === "default" || value === "collapsed" || value === "drawer") this.settings.setNavTypeMode(value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeSettingsNavigationSectionComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: ThemeSettingsNavigationSectionComponent,
+		isStandalone: true,
+		selector: "ThemeSettingsNavigationSection",
+		host: { classAttribute: "contents" },
+		ngImport: i0,
+		template: `
     <section
       class="flex flex-col gap-5 border-t border-border pt-7"
       [attr.aria-labelledby]="navigationGroupId"
@@ -609,15 +728,39 @@ class ThemeSettingsNavigationSectionComponent {
         />
       </div>
     </section>
-  `, isInline: true, dependencies: [{ kind: "component", type: SegmentedControlComponent, selector: "SegmentedControl", inputs: ["options", "value", "appearance", "space", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "class"], outputs: ["valueChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsNavigationSectionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ThemeSettingsNavigationSection',
-                    imports: [SegmentedControlComponent],
-                    host: { class: 'contents' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: SegmentedControlComponent,
+			selector: "SegmentedControl",
+			inputs: [
+				"options",
+				"value",
+				"appearance",
+				"space",
+				"disabled",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"class"
+			],
+			outputs: ["valueChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeSettingsNavigationSectionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ThemeSettingsNavigationSection",
+			imports: [SegmentedControlComponent],
+			host: { class: "contents" },
+			template: `
     <section
       class="flex flex-col gap-5 border-t border-border pt-7"
       [attr.aria-labelledby]="navigationGroupId"
@@ -646,73 +789,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         />
       </div>
     </section>
-  `,
-                }]
-        }] });
-
-/**
- * The Shell section of `ThemeSettings`: delivery mode, device, frame, chrome
- * colour. Internal, see the Theme section for why.
- *
- * It injects the adapter optionally because a theme-only consumer has none, and
- * it only needs it to run the shared navigation-type correction after a mode
- * change.
- */
-class ThemeSettingsShellSectionComponent {
-    shell = inject(ShellService);
-    settings = inject(THEME_SETTINGS_ADAPTER, { optional: true });
-    shellMode = this.shell.mode;
-    shellColor = this.shell.color;
-    shellFrame = this.shell.frame;
-    /** Only a desktop window has a frame to shape, so `modern` is offered only there. */
-    shellFrameOptions = computed(() => SHELL_FRAME_OPTIONS.map((option) => ({
-        ...option,
-        disabled: option.value === 'modern' && this.shellMode() !== 'desktop',
-    })), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "shellFrameOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * The device actually in effect: `ShellService.device()` is a preference that may
-     * belong to another form factor (it deliberately survives a temporary mode change),
-     * so the control shows the value `<Shell>` would render for the active mode.
-     */
-    shellDevice = computed(() => resolveShellDeviceForMode(this.shellMode(), this.shell.device()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "shellDevice" }] : /* istanbul ignore next */ []));
-    shellDeviceOptions = computed(() => shellDevicesForMode(this.shellMode()).map((device) => SHELL_DEVICE_OPTIONS[device]), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "shellDeviceOptions" }] : /* istanbul ignore next */ []));
-    shellModeOptions = SHELL_MODE_OPTIONS;
-    shellColorOptions = SHELL_COLOR_OPTIONS;
-    shellGroupId = injectUniqueId('theme-settings-shell');
-    shellModeLabelId = injectUniqueId('theme-settings-shell-mode');
-    shellDeviceLabelId = injectUniqueId('theme-settings-shell-device');
-    shellColorLabelId = injectUniqueId('theme-settings-shell-color');
-    shellFrameLabelId = injectUniqueId('theme-settings-shell-frame');
-    setShellMode(value) {
-        if (SHELL_MODES.includes(value)) {
-            this.shell.setMode(value);
-            normalizeNavType(this.settings, this.shellMode());
-        }
-    }
-    setShellDevice(value) {
-        // Guard on the active mode, not just the union: a device from another form
-        // factor would be corrected away on render anyway.
-        if (value && isShellDeviceForMode(this.shellMode(), value)) {
-            this.shell.setDevice(value);
-        }
-    }
-    setShellFrame(value) {
-        // Refuse `modern` off desktop rather than store a preference the shell would
-        // coerce away on render.
-        if (value === 'modern' && this.shellMode() !== 'desktop')
-            return;
-        if (SHELL_FRAMES.includes(value))
-            this.shell.setFrame(value);
-    }
-    setShellColor(value) {
-        if (SHELL_COLORS.includes(value))
-            this.shell.setColor(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsShellSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ThemeSettingsShellSectionComponent, isStandalone: true, selector: "ThemeSettingsShellSection", host: { classAttribute: "contents" }, ngImport: i0, template: `
+  `
+		}]
+	}]
+});
+var ThemeSettingsShellSectionComponent = class ThemeSettingsShellSectionComponent {
+	shell = inject(ShellService);
+	settings = inject(THEME_SETTINGS_ADAPTER, { optional: true });
+	shellMode = this.shell.mode;
+	shellColor = this.shell.color;
+	shellFrame = this.shell.frame;
+	shellFrameOptions = computed(() => SHELL_FRAME_OPTIONS.map((option) => ({
+		...option,
+		disabled: option.value === "modern" && this.shellMode() !== "desktop"
+	})), ...ngDevMode ? [{ debugName: "shellFrameOptions" }] : /* istanbul ignore next */ []);
+	shellDevice = computed(() => resolveShellDeviceForMode(this.shellMode(), this.shell.device()), ...ngDevMode ? [{ debugName: "shellDevice" }] : /* istanbul ignore next */ []);
+	shellDeviceOptions = computed(() => shellDevicesForMode(this.shellMode()).map((device) => SHELL_DEVICE_OPTIONS[device]), ...ngDevMode ? [{ debugName: "shellDeviceOptions" }] : /* istanbul ignore next */ []);
+	shellModeOptions = SHELL_MODE_OPTIONS;
+	shellColorOptions = SHELL_COLOR_OPTIONS;
+	shellGroupId = injectUniqueId("theme-settings-shell");
+	shellModeLabelId = injectUniqueId("theme-settings-shell-mode");
+	shellDeviceLabelId = injectUniqueId("theme-settings-shell-device");
+	shellColorLabelId = injectUniqueId("theme-settings-shell-color");
+	shellFrameLabelId = injectUniqueId("theme-settings-shell-frame");
+	setShellMode(value) {
+		if (SHELL_MODES.includes(value)) {
+			this.shell.setMode(value);
+			normalizeNavType(this.settings, this.shellMode());
+		}
+	}
+	setShellDevice(value) {
+		if (value && isShellDeviceForMode(this.shellMode(), value)) this.shell.setDevice(value);
+	}
+	setShellFrame(value) {
+		if (value === "modern" && this.shellMode() !== "desktop") return;
+		if (SHELL_FRAMES.includes(value)) this.shell.setFrame(value);
+	}
+	setShellColor(value) {
+		if (SHELL_COLORS.includes(value)) this.shell.setColor(value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeSettingsShellSectionComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ThemeSettingsShellSectionComponent,
+		isStandalone: true,
+		selector: "ThemeSettingsShellSection",
+		host: { classAttribute: "contents" },
+		ngImport: i0,
+		template: `
     <section
       class="flex flex-col gap-5 border-t border-border pt-7"
       [attr.aria-labelledby]="shellGroupId"
@@ -784,15 +916,39 @@ class ThemeSettingsShellSectionComponent {
         </p>
       </div>
     </section>
-  `, isInline: true, dependencies: [{ kind: "component", type: SegmentedControlComponent, selector: "SegmentedControl", inputs: ["options", "value", "appearance", "space", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "class"], outputs: ["valueChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsShellSectionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ThemeSettingsShellSection',
-                    imports: [SegmentedControlComponent],
-                    host: { class: 'contents' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: SegmentedControlComponent,
+			selector: "SegmentedControl",
+			inputs: [
+				"options",
+				"value",
+				"appearance",
+				"space",
+				"disabled",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"class"
+			],
+			outputs: ["valueChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeSettingsShellSectionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ThemeSettingsShellSection",
+			imports: [SegmentedControlComponent],
+			host: { class: "contents" },
+			template: `
     <section
       class="flex flex-col gap-5 border-t border-border pt-7"
       [attr.aria-labelledby]="shellGroupId"
@@ -864,158 +1020,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </p>
       </div>
     </section>
-  `,
-                }]
-        }] });
-
-/*
- * Brand-color math for `ThemeSettings`.
- *
- * The drawer's brand picker is a native `<input type="color">`, which speaks hex,
- * while the design system's tokens are HSL triplets (`H S% L%`). These pure
- * conversions bridge the two, plus pick a readable foreground for a chosen brand.
- *
- * Extracted from the component so the drawer stays inside the 700-line source-unit
- * budget (scripts/check-library-boundaries.mjs) as shell axes are added.
- */
+  `
+		}]
+	}]
+});
 function hslToHex(color) {
-    const match = /^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/.exec(color);
-    const [hue, saturation, lightness] = match
-        ? [Number(match[1]), Number(match[2]), Number(match[3])]
-        : DEFAULT_BRAND_HSL;
-    const chroma = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);
-    const segment = hue / 60;
-    const x = chroma * (1 - Math.abs((segment % 2) - 1));
-    const matchLightness = lightness / 100 - chroma / 2;
-    const [red, green, blue] = segment < 1
-        ? [chroma, x, 0]
-        : segment < 2
-            ? [x, chroma, 0]
-            : segment < 3
-                ? [0, chroma, x]
-                : segment < 4
-                    ? [0, x, chroma]
-                    : segment < 5
-                        ? [x, 0, chroma]
-                        : [chroma, 0, x];
-    const channel = (value) => Math.round((value + matchLightness) * 255)
-        .toString(16)
-        .padStart(2, '0');
-    return `#${channel(red)}${channel(green)}${channel(blue)}`;
+	const match = /^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/.exec(color);
+	const [hue, saturation, lightness] = match ? [
+		Number(match[1]),
+		Number(match[2]),
+		Number(match[3])
+	] : DEFAULT_BRAND_HSL;
+	const chroma = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);
+	const segment = hue / 60;
+	const x = chroma * (1 - Math.abs(segment % 2 - 1));
+	const matchLightness = lightness / 100 - chroma / 2;
+	const [red, green, blue] = segment < 1 ? [
+		chroma,
+		x,
+		0
+	] : segment < 2 ? [
+		x,
+		chroma,
+		0
+	] : segment < 3 ? [
+		0,
+		chroma,
+		x
+	] : segment < 4 ? [
+		0,
+		x,
+		chroma
+	] : segment < 5 ? [
+		x,
+		0,
+		chroma
+	] : [
+		chroma,
+		0,
+		x
+	];
+	const channel = (value) => Math.round((value + matchLightness) * 255).toString(16).padStart(2, "0");
+	return `#${channel(red)}${channel(green)}${channel(blue)}`;
 }
 function hexToHsl(color) {
-    const match = /^#([0-9a-f]{6})$/i.exec(color);
-    if (!match)
-        return null;
-    const hex = match[1];
-    const [red, green, blue] = [0, 2, 4].map((index) => Number.parseInt(hex.slice(index, index + 2), 16) / 255);
-    const max = Math.max(red, green, blue);
-    const min = Math.min(red, green, blue);
-    const delta = max - min;
-    const lightness = (max + min) / 2;
-    let hue = 0;
-    if (delta !== 0)
-        hue =
-            max === red
-                ? 60 * (((green - blue) / delta) % 6)
-                : max === green
-                    ? 60 * ((blue - red) / delta + 2)
-                    : 60 * ((red - green) / delta + 4);
-    if (hue < 0)
-        hue += 360;
-    const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
-    return `${Math.round(hue)} ${Math.round(saturation * 100)}% ${Math.round(lightness * 100)}%`;
+	const match = /^#([0-9a-f]{6})$/i.exec(color);
+	if (!match) return null;
+	const hex = match[1];
+	const [red, green, blue] = [
+		0,
+		2,
+		4
+	].map((index) => Number.parseInt(hex.slice(index, index + 2), 16) / 255);
+	const max = Math.max(red, green, blue);
+	const min = Math.min(red, green, blue);
+	const delta = max - min;
+	const lightness = (max + min) / 2;
+	let hue = 0;
+	if (delta !== 0) hue = max === red ? 60 * ((green - blue) / delta % 6) : max === green ? 60 * ((blue - red) / delta + 2) : 60 * ((red - green) / delta + 4);
+	if (hue < 0) hue += 360;
+	const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
+	return `${Math.round(hue)} ${Math.round(saturation * 100)}% ${Math.round(lightness * 100)}%`;
 }
 function brandForeground(color) {
-    const match = /^#([0-9a-f]{6})$/i.exec(color);
-    if (!match)
-        return '0 0% 100%';
-    const channels = [0, 2, 4].map((index) => Number.parseInt(match[1].slice(index, index + 2), 16));
-    const linear = (channel) => {
-        const value = channel / 255;
-        return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
-    };
-    const luminance = linear(channels[0]) * 0.2126 + linear(channels[1]) * 0.7152 + linear(channels[2]) * 0.0722;
-    return luminance > 0.179 ? '0 0% 0%' : '0 0% 100%';
+	const match = /^#([0-9a-f]{6})$/i.exec(color);
+	if (!match) return "0 0% 100%";
+	const channels = [
+		0,
+		2,
+		4
+	].map((index) => Number.parseInt(match[1].slice(index, index + 2), 16));
+	const linear = (channel) => {
+		const value = channel / 255;
+		return value <= .04045 ? value / 12.92 : ((value + .055) / 1.055) ** 2.4;
+	};
+	return linear(channels[0]) * .2126 + linear(channels[1]) * .7152 + linear(channels[2]) * .0722 > .179 ? "0 0% 0%" : "0 0% 100%";
 }
-
-/**
- * The Theme section of `ThemeSettings`: mode, brand, accent, neutral, space,
- * radius.
- *
- * Internal. Not exported from the entry point: it exists so `ThemeSettings`
- * stays under the 700-line source guard and so each axis group can be read on
- * its own. Every dependency arrives by injection, so the parent composes it with
- * no inputs and no outputs.
- *
- * `class: 'contents'` keeps the host out of the layout: the parent's flex column
- * spaces the `<section>` inside, and a custom element defaults to `display:
- * inline`, which would break that spacing.
- */
-class ThemeSettingsThemeSectionComponent {
-    themeMode = inject(ThemeModeService);
-    themeColor = inject(ThemeColorService);
-    themeBrand = inject(ThemeBrandService);
-    themeRadius = inject(ThemeRadiusService);
-    themeSpace = inject(ThemeSpaceService);
-    mode = this.themeMode.mode;
-    resolvedMode = this.themeMode.resolvedMode;
-    color = this.themeColor.color;
-    neutralColor = this.themeColor.neutral;
-    brand = this.themeBrand.brand;
-    brandHex = computed(() => hslToHex(this.brand()?.color ?? DEFAULT_BRAND_COLOR), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "brandHex" }] : /* istanbul ignore next */ []));
-    radius = this.themeRadius.radius;
-    space = this.themeSpace.space;
-    accents = THEME_COLORS;
-    neutrals = THEME_NEUTRALS;
-    accentSwatch = ACCENT_SWATCH;
-    neutralSwatch = NEUTRAL_SWATCH;
-    modeOptions = MODE_OPTIONS;
-    radiusOptions = RADIUS_OPTIONS;
-    spaceOptions = SPACE_OPTIONS;
-    themeGroupId = injectUniqueId('theme-settings-theme');
-    modeLabelId = injectUniqueId('theme-settings-mode');
-    brandLabelId = injectUniqueId('theme-settings-brand');
-    accentLabelId = injectUniqueId('theme-settings-accent');
-    neutralLabelId = injectUniqueId('theme-settings-neutral');
-    spaceLabelId = injectUniqueId('theme-settings-space');
-    radiusLabelId = injectUniqueId('theme-settings-radius');
-    swatchClasses(active) {
-        return cn('inline-flex size-[18px] rounded-full ring-1 ring-black/10 transition-[transform,box-shadow] duration-200 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background motion-reduce:transition-none', active
-            ? 'ring-2 ring-ring ring-offset-2 ring-offset-background shadow-sm'
-            : 'hover:scale-105');
-    }
-    setMode(value) {
-        if (isThemeMode(value))
-            this.themeMode.setMode(value);
-    }
-    setColor(value) {
-        this.themeColor.setColor(value);
-    }
-    setNeutral(value) {
-        this.themeColor.setNeutral(value);
-    }
-    setRadius(value) {
-        if (isThemeRadius(value))
-            this.themeRadius.setRadius(value);
-    }
-    setSpace(value) {
-        if (isThemeSpace(value))
-            this.themeSpace.setSpace(value);
-    }
-    setBrandFromPicker(event) {
-        if (!(event.target instanceof HTMLInputElement))
-            return;
-        const color = event.target.value;
-        const hsl = hexToHsl(color);
-        if (!hsl)
-            return;
-        this.themeBrand.setBrand(hsl, brandForeground(color));
-        this.themeColor.setColor('brand');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsThemeSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ThemeSettingsThemeSectionComponent, isStandalone: true, selector: "ThemeSettingsThemeSection", host: { classAttribute: "contents" }, ngImport: i0, template: `
+var ThemeSettingsThemeSectionComponent = class ThemeSettingsThemeSectionComponent {
+	themeMode = inject(ThemeModeService);
+	themeColor = inject(ThemeColorService);
+	themeBrand = inject(ThemeBrandService);
+	themeRadius = inject(ThemeRadiusService);
+	themeSpace = inject(ThemeSpaceService);
+	mode = this.themeMode.mode;
+	resolvedMode = this.themeMode.resolvedMode;
+	color = this.themeColor.color;
+	neutralColor = this.themeColor.neutral;
+	brand = this.themeBrand.brand;
+	brandHex = computed(() => hslToHex(this.brand()?.color ?? "262 83% 58%"), ...ngDevMode ? [{ debugName: "brandHex" }] : /* istanbul ignore next */ []);
+	radius = this.themeRadius.radius;
+	space = this.themeSpace.space;
+	accents = THEME_COLORS;
+	neutrals = THEME_NEUTRALS;
+	accentSwatch = ACCENT_SWATCH;
+	neutralSwatch = NEUTRAL_SWATCH;
+	modeOptions = MODE_OPTIONS;
+	radiusOptions = RADIUS_OPTIONS;
+	spaceOptions = SPACE_OPTIONS;
+	themeGroupId = injectUniqueId("theme-settings-theme");
+	modeLabelId = injectUniqueId("theme-settings-mode");
+	brandLabelId = injectUniqueId("theme-settings-brand");
+	accentLabelId = injectUniqueId("theme-settings-accent");
+	neutralLabelId = injectUniqueId("theme-settings-neutral");
+	spaceLabelId = injectUniqueId("theme-settings-space");
+	radiusLabelId = injectUniqueId("theme-settings-radius");
+	swatchClasses(active) {
+		return cn("inline-flex size-[18px] rounded-full ring-1 ring-black/10 transition-[transform,box-shadow] duration-200 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background motion-reduce:transition-none", active ? "ring-2 ring-ring ring-offset-2 ring-offset-background shadow-sm" : "hover:scale-105");
+	}
+	setMode(value) {
+		if (isThemeMode(value)) this.themeMode.setMode(value);
+	}
+	setColor(value) {
+		this.themeColor.setColor(value);
+	}
+	setNeutral(value) {
+		this.themeColor.setNeutral(value);
+	}
+	setRadius(value) {
+		if (isThemeRadius(value)) this.themeRadius.setRadius(value);
+	}
+	setSpace(value) {
+		if (isThemeSpace(value)) this.themeSpace.setSpace(value);
+	}
+	setBrandFromPicker(event) {
+		if (!(event.target instanceof HTMLInputElement)) return;
+		const color = event.target.value;
+		const hsl = hexToHsl(color);
+		if (!hsl) return;
+		this.themeBrand.setBrand(hsl, brandForeground(color));
+		this.themeColor.setColor("brand");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeSettingsThemeSectionComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ThemeSettingsThemeSectionComponent,
+		isStandalone: true,
+		selector: "ThemeSettingsThemeSection",
+		host: { classAttribute: "contents" },
+		ngImport: i0,
+		template: `
     <section class="flex flex-col gap-5" [attr.aria-labelledby]="themeGroupId">
       <h2 [id]="themeGroupId" class="nav-heading text-foreground">Theme</h2>
       <div class="flex flex-col gap-2">
@@ -1109,15 +1260,39 @@ class ThemeSettingsThemeSectionComponent {
         />
       </div>
     </section>
-  `, isInline: true, dependencies: [{ kind: "component", type: SegmentedControlComponent, selector: "SegmentedControl", inputs: ["options", "value", "appearance", "space", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "class"], outputs: ["valueChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsThemeSectionComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ThemeSettingsThemeSection',
-                    imports: [SegmentedControlComponent],
-                    host: { class: 'contents' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: SegmentedControlComponent,
+			selector: "SegmentedControl",
+			inputs: [
+				"options",
+				"value",
+				"appearance",
+				"space",
+				"disabled",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"class"
+			],
+			outputs: ["valueChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeSettingsThemeSectionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ThemeSettingsThemeSection",
+			imports: [SegmentedControlComponent],
+			host: { class: "contents" },
+			template: `
     <section class="flex flex-col gap-5" [attr.aria-labelledby]="themeGroupId">
       <h2 [id]="themeGroupId" class="nav-heading text-foreground">Theme</h2>
       <div class="flex flex-col gap-2">
@@ -1211,39 +1386,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         />
       </div>
     </section>
-  `,
-                }]
-        }] });
-
-/** A navigation-aligned, right-side inspector for runtime theme and shell settings. */
-class ThemeSettingsComponent {
-    /**
-     * Present only when the app provided an adapter. It is a render gate here: the
-     * Layout and Navigation sections inject the token non-optionally, so a
-     * theme-only consumer simply gets the Theme and Shell sections.
-     */
-    settings = inject(THEME_SETTINGS_ADAPTER, { optional: true });
-    open = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    trigger = input('button', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
-    triggerLabel = input('Theme settings', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
-    triggerIconOnly = input(false, { ...(ngDevMode ? { debugName: "triggerIconOnly" } : /* istanbul ignore next */ {}), alias: 'trigger-icon-only' });
-    showTrigger = input(true, { ...(ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {}), alias: 'show-trigger' });
-    side = input('right', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
-    class = input('', { ...(ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {}), alias: 'class' });
-    triggerClasses = computed(() => cn('inline-flex items-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none', this.trigger() === 'link'
-        ? this.triggerIconOnly()
-            ? 'size-11 p-0 text-primary underline-offset-4 hover:underline'
-            : 'min-h-11 px-1 text-primary underline-offset-4 hover:underline'
-        : this.triggerIconOnly()
-            ? 'size-11 justify-center p-0 text-muted-foreground hover:bg-accent hover:text-foreground'
-            : 'min-h-11 justify-center px-3 text-muted-foreground hover:bg-accent hover:text-accent-foreground', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ThemeSettingsComponent, isStandalone: true, selector: "ThemeSettings", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerIconOnly: { classPropertyName: "triggerIconOnly", publicName: "trigger-icon-only", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "show-trigger", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+  `
+		}]
+	}]
+});
+var ThemeSettingsComponent = class ThemeSettingsComponent {
+	settings = inject(THEME_SETTINGS_ADAPTER, { optional: true });
+	open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	trigger = input("button", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	triggerLabel = input("Theme settings", ...ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []);
+	triggerIconOnly = input(false, {
+		...ngDevMode ? { debugName: "triggerIconOnly" } : /* istanbul ignore next */ {},
+		alias: "trigger-icon-only"
+	});
+	showTrigger = input(true, {
+		...ngDevMode ? { debugName: "showTrigger" } : /* istanbul ignore next */ {},
+		alias: "show-trigger"
+	});
+	side = input("right", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	class = input("", {
+		...ngDevMode ? { debugName: "class" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	triggerClasses = computed(() => cn("inline-flex items-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none", this.trigger() === "link" ? this.triggerIconOnly() ? "size-11 p-0 text-primary underline-offset-4 hover:underline" : "min-h-11 px-1 text-primary underline-offset-4 hover:underline" : this.triggerIconOnly() ? "size-11 justify-center p-0 text-muted-foreground hover:bg-accent hover:text-foreground" : "min-h-11 justify-center px-3 text-muted-foreground hover:bg-accent hover:text-accent-foreground", this.class()), ...ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ThemeSettingsComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: ThemeSettingsComponent,
+		isStandalone: true,
+		selector: "ThemeSettings",
+		inputs: {
+			open: {
+				classPropertyName: "open",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			trigger: {
+				classPropertyName: "trigger",
+				publicName: "trigger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			triggerLabel: {
+				classPropertyName: "triggerLabel",
+				publicName: "triggerLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			triggerIconOnly: {
+				classPropertyName: "triggerIconOnly",
+				publicName: "trigger-icon-only",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTrigger: {
+				classPropertyName: "showTrigger",
+				publicName: "show-trigger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { open: "openChange" },
+		host: { classAttribute: "contents" },
+		ngImport: i0,
+		template: `
     @if (showTrigger()) {
       <button
         type="button"
@@ -1302,26 +1536,113 @@ class ThemeSettingsComponent {
         </DrawerContent>
       </Drawer>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: DrawerCloseDirective, selector: "button[SheetClose], a[SheetClose], button[DrawerClose], a[DrawerClose]" }, { kind: "component", type: DrawerComponent, selector: "Sheet, Drawer", inputs: ["open", "side", "variant", "closeOnEscape", "closeOnBackdropClick", "backdrop", "showCloseButton", "closeButtonLabel", "restoreFocus", "aria-labelledby", "aria-describedby", "role", "class"], outputs: ["openChange", "openedChange"] }, { kind: "component", type: DrawerContentComponent, selector: "SheetContent, DrawerContent", inputs: ["class"] }, { kind: "component", type: DrawerHeaderComponent, selector: "SheetHeader, DrawerHeader", inputs: ["class"] }, { kind: "component", type: DrawerTitleComponent, selector: "SheetTitle, DrawerTitle, h2[SheetTitle], h2[DrawerTitle]", inputs: ["id", "class"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: ThemeSettingsLayoutSectionComponent, selector: "ThemeSettingsLayoutSection" }, { kind: "component", type: ThemeSettingsNavigationSectionComponent, selector: "ThemeSettingsNavigationSection" }, { kind: "component", type: ThemeSettingsShellSectionComponent, selector: "ThemeSettingsShellSection" }, { kind: "component", type: ThemeSettingsThemeSectionComponent, selector: "ThemeSettingsThemeSection" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ThemeSettingsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ThemeSettings',
-                    imports: [
-                        DrawerCloseDirective,
-                        DrawerComponent,
-                        DrawerContentComponent,
-                        DrawerHeaderComponent,
-                        DrawerTitleComponent,
-                        IconComponent,
-                        ThemeSettingsLayoutSectionComponent,
-                        ThemeSettingsNavigationSectionComponent,
-                        ThemeSettingsShellSectionComponent,
-                        ThemeSettingsThemeSectionComponent,
-                    ],
-                    host: { class: 'contents' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: DrawerCloseDirective,
+				selector: "button[SheetClose], a[SheetClose], button[DrawerClose], a[DrawerClose]"
+			},
+			{
+				kind: "component",
+				type: DrawerComponent,
+				selector: "Sheet, Drawer",
+				inputs: [
+					"open",
+					"side",
+					"variant",
+					"closeOnEscape",
+					"closeOnBackdropClick",
+					"backdrop",
+					"showCloseButton",
+					"closeButtonLabel",
+					"restoreFocus",
+					"aria-labelledby",
+					"aria-describedby",
+					"role",
+					"class"
+				],
+				outputs: ["openChange", "openedChange"]
+			},
+			{
+				kind: "component",
+				type: DrawerContentComponent,
+				selector: "SheetContent, DrawerContent",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: DrawerHeaderComponent,
+				selector: "SheetHeader, DrawerHeader",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: DrawerTitleComponent,
+				selector: "SheetTitle, DrawerTitle, h2[SheetTitle], h2[DrawerTitle]",
+				inputs: ["id", "class"]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "Icon",
+				inputs: [
+					"name",
+					"class",
+					"size",
+					"fill",
+					"weight",
+					"grade",
+					"opticalSize"
+				]
+			},
+			{
+				kind: "component",
+				type: ThemeSettingsLayoutSectionComponent,
+				selector: "ThemeSettingsLayoutSection"
+			},
+			{
+				kind: "component",
+				type: ThemeSettingsNavigationSectionComponent,
+				selector: "ThemeSettingsNavigationSection"
+			},
+			{
+				kind: "component",
+				type: ThemeSettingsShellSectionComponent,
+				selector: "ThemeSettingsShellSection"
+			},
+			{
+				kind: "component",
+				type: ThemeSettingsThemeSectionComponent,
+				selector: "ThemeSettingsThemeSection"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ThemeSettingsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ThemeSettings",
+			imports: [
+				DrawerCloseDirective,
+				DrawerComponent,
+				DrawerContentComponent,
+				DrawerHeaderComponent,
+				DrawerTitleComponent,
+				IconComponent,
+				ThemeSettingsLayoutSectionComponent,
+				ThemeSettingsNavigationSectionComponent,
+				ThemeSettingsShellSectionComponent,
+				ThemeSettingsThemeSectionComponent
+			],
+			host: { class: "contents" },
+			template: `
     @if (showTrigger()) {
       <button
         type="button"
@@ -1380,12 +1701,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </DrawerContent>
       </Drawer>
     }
-  `,
-                }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], triggerIconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger-icon-only", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "show-trigger", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { NAV_TYPE_MODE_STORAGE_KEY, NAV_TYPE_STORAGE_KEY, THEME_SETTINGS_ADAPTER, ThemeSettingsComponent, ThemeSettingsDefaultAdapter, allowedNavTypeModes, allowedNavTypes$1 as allowedNavTypes, isWidthEnabled, provideThemeSettingsAdapter };
+  `
+		}]
+	}],
+	propDecorators: {
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		trigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trigger",
+				required: false
+			}]
+		}],
+		triggerLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "triggerLabel",
+				required: false
+			}]
+		}],
+		triggerIconOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trigger-icon-only",
+				required: false
+			}]
+		}],
+		showTrigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "show-trigger",
+				required: false
+			}]
+		}],
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+export { NAV_TYPE_MODE_STORAGE_KEY, NAV_TYPE_STORAGE_KEY, THEME_SETTINGS_ADAPTER, ThemeSettingsComponent, ThemeSettingsDefaultAdapter, allowedNavTypeModes, allowedNavTypes, isWidthEnabled, provideThemeSettingsAdapter };