@ojiepermana/angular 21.1.9 → 21.1.12

package/fesm2022/ojiepermana-angular-brand-etos.mjs

@@ -5,6 +5,7 @@ import { NavigationService, DEFAULT_NAVIGATION_ID, UiNavIconComponent, TopbarCom
 import { provideMaterialTheme, withMaterialDefaults, ThemeService } from '@ojiepermana/angular/theme';
 import { cn, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, ButtonComponent, PopoverContentDirective, PopoverTriggerDirective } from '@ojiepermana/angular/component';
 import { RouterOutlet } from '@angular/router';
+import { NgTemplateOutlet } from '@angular/common';
 
 const ETOS_BRAND_NAME = 'etos';
 const ETOS_THEME_CONFIG = {
@@ -13,7 +14,7 @@ const ETOS_THEME_CONFIG = {
 };
 const ETOS_LAYOUT_CONFIG = {
     mode: 'vertical',
-    width: 'fixed',
+    width: 'container',
 };
 
 function provideEtosTheme(config = {}, ...features) {
@@ -52,11 +53,14 @@ const THEME_SCHEME_OPTIONS = [
 const LAYOUT_MODE_OPTIONS = [
     { value: 'horizontal', label: 'Horizontal', icon: 'view_column' },
     { value: 'vertical', label: 'Vertical', icon: 'view_sidebar' },
+    { value: 'empty', label: 'Empty', icon: 'crop_square' },
 ];
 const LAYOUT_WIDTH_OPTIONS = [
     { value: 'full', label: 'Full', icon: 'fit_screen' },
-    { value: 'fixed', label: 'Fixed', icon: 'center_focus_strong' },
+    { value: 'container', label: 'Container', icon: 'center_focus_strong' },
+    { value: 'wide', label: 'Wide', icon: 'width_wide' },
 ];
+const SWITCHER_PANEL_OVERLAP_OFFSET = -32;
 class EtosThemeSwitcherComponent {
     theme = inject(ThemeService);
     layout = inject(LayoutService);
@@ -70,8 +74,9 @@ class EtosThemeSwitcherComponent {
     quickActions = input.required(...(ngDevMode ? [{ debugName: "quickActions" }] : /* istanbul ignore next */ []));
     notificationShortcut = input(null, ...(ngDevMode ? [{ debugName: "notificationShortcut" }] : /* istanbul ignore next */ []));
     showNotificationShortcut = input(false, ...(ngDevMode ? [{ debugName: "showNotificationShortcut" }] : /* istanbul ignore next */ []));
-    popoverSide = input('bottom', ...(ngDevMode ? [{ debugName: "popoverSide" }] : /* istanbul ignore next */ []));
-    popoverAlign = input('end', ...(ngDevMode ? [{ debugName: "popoverAlign" }] : /* istanbul ignore next */ []));
+    popoverSide = input(null, ...(ngDevMode ? [{ debugName: "popoverSide" }] : /* istanbul ignore next */ []));
+    popoverAlign = input(null, ...(ngDevMode ? [{ debugName: "popoverAlign" }] : /* istanbul ignore next */ []));
+    popoverSideOffset = input(null, ...(ngDevMode ? [{ debugName: "popoverSideOffset" }] : /* istanbul ignore next */ []));
     actionSelected = output();
     themeMode = this.theme.mode;
     themeScheme = this.theme.scheme;
@@ -106,6 +111,9 @@ class EtosThemeSwitcherComponent {
         return this.quickActions().filter((action) => action.value !== shortcutValue);
     }, ...(ngDevMode ? [{ debugName: "actionOptions" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => cn('inline-flex shrink-0 items-center gap-2', this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    resolvedPopoverSide = computed(() => this.popoverSide() ?? (this.layoutMode() === 'vertical' ? 'top' : 'bottom'), ...(ngDevMode ? [{ debugName: "resolvedPopoverSide" }] : /* istanbul ignore next */ []));
+    resolvedPopoverAlign = computed(() => this.popoverAlign() ?? (this.layoutMode() === 'vertical' ? 'start' : 'end'), ...(ngDevMode ? [{ debugName: "resolvedPopoverAlign" }] : /* istanbul ignore next */ []));
+    resolvedPopoverSideOffset = computed(() => this.popoverSideOffset() ?? SWITCHER_PANEL_OVERLAP_OFFSET, ...(ngDevMode ? [{ debugName: "resolvedPopoverSideOffset" }] : /* istanbul ignore next */ []));
     resolvedUserName = computed(() => this.userInfo()?.name?.trim() || this.userName(), ...(ngDevMode ? [{ debugName: "resolvedUserName" }] : /* istanbul ignore next */ []));
     resolvedUserSubtitle = computed(() => this.userInfo()?.subtitle ?? this.userSubtitle(), ...(ngDevMode ? [{ debugName: "resolvedUserSubtitle" }] : /* istanbul ignore next */ []));
     resolvedAvatarSrc = computed(() => this.userInfo()?.avatarSrc ?? this.avatarSrc(), ...(ngDevMode ? [{ debugName: "resolvedAvatarSrc" }] : /* istanbul ignore next */ []));
@@ -161,10 +169,22 @@ class EtosThemeSwitcherComponent {
         this.actionSelected.emit(shortcut.value);
     }
     labelForLayoutMode(mode) {
-        return mode === 'horizontal' ? 'Horizontal' : 'Vertical';
+        if (mode === 'horizontal') {
+            return 'Horizontal';
+        }
+        if (mode === 'empty') {
+            return 'Empty';
+        }
+        return 'Vertical';
     }
     labelForLayoutWidth(width) {
-        return width === 'full' ? 'Full' : 'Fixed';
+        if (width === 'container') {
+            return 'Container';
+        }
+        if (width === 'wide') {
+            return 'Wide';
+        }
+        return 'Full';
     }
     toInitials(name) {
         const segments = name.trim().split(/\s+/).filter(Boolean);
@@ -176,8 +196,8 @@ class EtosThemeSwitcherComponent {
         }
         return `${segments[0][0] ?? ''}${segments[1][0] ?? ''}`.toUpperCase();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosThemeSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: EtosThemeSwitcherComponent, isStandalone: true, selector: "etos-theme-switcher", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userSubtitle: { classPropertyName: "userSubtitle", publicName: "userSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, quickActions: { classPropertyName: "quickActions", publicName: "quickActions", isSignal: true, isRequired: true, transformFunction: null }, notificationShortcut: { classPropertyName: "notificationShortcut", publicName: "notificationShortcut", isSignal: true, isRequired: false, transformFunction: null }, showNotificationShortcut: { classPropertyName: "showNotificationShortcut", publicName: "showNotificationShortcut", isSignal: true, isRequired: false, transformFunction: null }, popoverSide: { classPropertyName: "popoverSide", publicName: "popoverSide", isSignal: true, isRequired: false, transformFunction: null }, popoverAlign: { classPropertyName: "popoverAlign", publicName: "popoverAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelected: "actionSelected" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EtosThemeSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EtosThemeSwitcherComponent, isStandalone: true, selector: "etos-theme-switcher", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, userInfo: { classPropertyName: "userInfo", publicName: "userInfo", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userSubtitle: { classPropertyName: "userSubtitle", publicName: "userSubtitle", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, quickActions: { classPropertyName: "quickActions", publicName: "quickActions", isSignal: true, isRequired: true, transformFunction: null }, notificationShortcut: { classPropertyName: "notificationShortcut", publicName: "notificationShortcut", isSignal: true, isRequired: false, transformFunction: null }, showNotificationShortcut: { classPropertyName: "showNotificationShortcut", publicName: "showNotificationShortcut", isSignal: true, isRequired: false, transformFunction: null }, popoverSide: { classPropertyName: "popoverSide", publicName: "popoverSide", isSignal: true, isRequired: false, transformFunction: null }, popoverAlign: { classPropertyName: "popoverAlign", publicName: "popoverAlign", isSignal: true, isRequired: false, transformFunction: null }, popoverSideOffset: { classPropertyName: "popoverSideOffset", publicName: "popoverSideOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionSelected: "actionSelected" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "popoverTrigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (notificationShortcutConfig(); as shortcut) {
       <button
         type="button"
@@ -200,8 +220,9 @@ class EtosThemeSwitcherComponent {
       variant="ghost"
       size="icon"
       [uiPopoverTrigger]="preferencesPanel"
-      [side]="popoverSide()"
-      [align]="popoverAlign()"
+      [side]="resolvedPopoverSide()"
+      [align]="resolvedPopoverAlign()"
+      [sideOffset]="resolvedPopoverSideOffset()"
       [attr.aria-label]="triggerLabel()"
       [class]="triggerButtonClasses(trigger.isOpen())">
       <ui-avatar class="h-8 w-8 border border-border/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]">
@@ -219,7 +240,7 @@ class EtosThemeSwitcherComponent {
         data-etos-theme-switcher-panel
         role="dialog"
         aria-label="User Info"
-        class="w-[min(21rem,calc(100vw-1.5rem))] overflow-hidden rounded-(--etos-layout-frame-radius) border border-border/70 bg-background text-foreground shadow-[0_18px_48px_rgba(15,23,42,0.12)]">
+        class="w-[min(21rem,calc(100vw-1.5rem))] overflow-hidden  border border-border/70 bg-background text-foreground shadow-[0_18px_48px_rgba(15,23,42,0.12)]">
         <header class="p-5 pb-4">
           <div class="flex items-center gap-4">
             <ui-avatar class="h-14 w-14 border border-border/60 shadow-sm">
@@ -277,7 +298,7 @@ class EtosThemeSwitcherComponent {
               <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Layout</p>
             </div>
             <div class="rounded-(--etos-layout-frame-radius) bg-muted/65 p-0.5">
-              <div class="grid grid-cols-2 gap-1">
+              <div class="grid grid-cols-3 gap-1">
                 @for (option of layoutModeOptions; track option.value) {
                   <button
                     type="button"
@@ -306,7 +327,7 @@ class EtosThemeSwitcherComponent {
               <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Width</p>
             </div>
             <div class="rounded-(--etos-layout-frame-radius) bg-muted/65 p-0.5">
-              <div class="grid grid-cols-2 gap-1">
+              <div class="grid grid-cols-3 gap-1">
                 @for (option of layoutWidthOptions; track option.value) {
                   <button
                     type="button"
@@ -358,9 +379,9 @@ class EtosThemeSwitcherComponent {
         </div>
       </section>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "ui-avatar-fallback", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "ui-avatar-image", inputs: ["src", "alt", "class"] }, { kind: "component", type: ButtonComponent, selector: "button[ui-button], a[ui-button]", inputs: ["variant", "size", "class"] }, { kind: "directive", type: PopoverContentDirective, selector: "ng-template[uiPopoverContent]", exportAs: ["uiPopoverContent"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[uiPopoverTrigger]", inputs: ["uiPopoverTrigger", "side", "align", "disabled"], outputs: ["openedChange"], exportAs: ["uiPopoverTrigger"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AvatarComponent, selector: "ui-avatar", inputs: ["class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "ui-avatar-fallback", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "ui-avatar-image", inputs: ["src", "alt", "class"] }, { kind: "component", type: ButtonComponent, selector: "button[ui-button], a[ui-button]", inputs: ["variant", "size", "class"] }, { kind: "directive", type: PopoverContentDirective, selector: "ng-template[uiPopoverContent]", exportAs: ["uiPopoverContent"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[uiPopoverTrigger]", inputs: ["uiPopoverTrigger", "side", "align", "sideOffset", "disabled"], outputs: ["openedChange"], exportAs: ["uiPopoverTrigger"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosThemeSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EtosThemeSwitcherComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'etos-theme-switcher',
@@ -400,8 +421,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       variant="ghost"
       size="icon"
       [uiPopoverTrigger]="preferencesPanel"
-      [side]="popoverSide()"
-      [align]="popoverAlign()"
+      [side]="resolvedPopoverSide()"
+      [align]="resolvedPopoverAlign()"
+      [sideOffset]="resolvedPopoverSideOffset()"
       [attr.aria-label]="triggerLabel()"
       [class]="triggerButtonClasses(trigger.isOpen())">
       <ui-avatar class="h-8 w-8 border border-border/60 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]">
@@ -419,7 +441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         data-etos-theme-switcher-panel
         role="dialog"
         aria-label="User Info"
-        class="w-[min(21rem,calc(100vw-1.5rem))] overflow-hidden rounded-(--etos-layout-frame-radius) border border-border/70 bg-background text-foreground shadow-[0_18px_48px_rgba(15,23,42,0.12)]">
+        class="w-[min(21rem,calc(100vw-1.5rem))] overflow-hidden  border border-border/70 bg-background text-foreground shadow-[0_18px_48px_rgba(15,23,42,0.12)]">
         <header class="p-5 pb-4">
           <div class="flex items-center gap-4">
             <ui-avatar class="h-14 w-14 border border-border/60 shadow-sm">
@@ -477,7 +499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
               <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Layout</p>
             </div>
             <div class="rounded-(--etos-layout-frame-radius) bg-muted/65 p-0.5">
-              <div class="grid grid-cols-2 gap-1">
+              <div class="grid grid-cols-3 gap-1">
                 @for (option of layoutModeOptions; track option.value) {
                   <button
                     type="button"
@@ -506,7 +528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
               <p class="text-[0.72rem] font-semibold uppercase tracking-[0.22em] text-muted-foreground">Width</p>
             </div>
             <div class="rounded-(--etos-layout-frame-radius) bg-muted/65 p-0.5">
-              <div class="grid grid-cols-2 gap-1">
+              <div class="grid grid-cols-3 gap-1">
                 @for (option of layoutWidthOptions; track option.value) {
                   <button
                     type="button"
@@ -560,281 +582,423 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { popoverTrigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], userSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "userSubtitle", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], quickActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActions", required: true }] }], notificationShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationShortcut", required: false }] }], showNotificationShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotificationShortcut", required: false }] }], popoverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverSide", required: false }] }], popoverAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverAlign", required: false }] }], actionSelected: [{ type: i0.Output, args: ["actionSelected"] }] } });
+        }], propDecorators: { popoverTrigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], userInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInfo", required: false }] }], userName: [{ type: i0.Input, args: [{ isSignal: true, alias: "userName", required: false }] }], userSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "userSubtitle", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarAlt", required: false }] }], quickActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickActions", required: true }] }], notificationShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationShortcut", required: false }] }], showNotificationShortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotificationShortcut", required: false }] }], popoverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverSide", required: false }] }], popoverAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverAlign", required: false }] }], popoverSideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverSideOffset", required: false }] }], actionSelected: [{ type: i0.Output, args: ["actionSelected"] }] } });
+
+class EmptyLayout {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EmptyLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: EmptyLayout, isStandalone: true, selector: "empty", ngImport: i0, template: `
+    <div
+      class="h-dvh overflow-hidden bg-neutral-200  bg-[linear-gradient(rgba(212,212,212,0.45)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.45)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
+      <div class="relative isolate box-border h-full overflow-hidden py-3">
+        <div aria-hidden="true" class="pointer-events-none absolute inset-y-0 inset-x-0 px-3">
+          <div class="relative mx-auto h-full w-full">
+            <div class="absolute inset-y-0 left-0 w-px bg-brand"></div>
+            <div class="absolute inset-y-0 right-0 w-px bg-brand"></div>
+          </div>
+        </div>
 
-class EtosEmptyLayoutComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosEmptyLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: EtosEmptyLayoutComponent, isStandalone: true, selector: "etos-empty-layout", host: { attributes: { "data-brand-layout": "etos-empty" }, classAttribute: "etos-layout-empty-host" }, ngImport: i0, template: `
-    <main class="etos-layout-empty-main">
-      <router-outlet />
-    </main>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        <div class="h-full min-h-0 border border-brand px-3">
+          <main class="mx-auto w-full h-full min-h-0 overflow-y-auto bg-background/65">
+            <router-outlet />
+          </main>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosEmptyLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EmptyLayout, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'etos-empty-layout',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [RouterOutlet],
-                    host: {
-                        class: 'etos-layout-empty-host',
-                        'data-brand-layout': 'etos-empty',
-                    },
-                    template: `
-    <main class="etos-layout-empty-main">
-      <router-outlet />
-    </main>
-  `,
-                }]
+            args: [{ selector: 'empty', imports: [RouterOutlet], template: `
+    <div
+      class="h-dvh overflow-hidden bg-neutral-200  bg-[linear-gradient(rgba(212,212,212,0.45)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.45)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
+      <div class="relative isolate box-border h-full overflow-hidden py-3">
+        <div aria-hidden="true" class="pointer-events-none absolute inset-y-0 inset-x-0 px-3">
+          <div class="relative mx-auto h-full w-full">
+            <div class="absolute inset-y-0 left-0 w-px bg-brand"></div>
+            <div class="absolute inset-y-0 right-0 w-px bg-brand"></div>
+          </div>
+        </div>
+
+        <div class="h-full min-h-0 border border-brand px-3">
+          <main class="mx-auto w-full h-full min-h-0 overflow-y-auto bg-background/65">
+            <router-outlet />
+          </main>
+        </div>
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
-class EtosHorizontalLayoutComponent {
+class HorizontalLayout {
     layout = inject(LayoutService);
-    topbarAppearance = input('default', ...(ngDevMode ? [{ debugName: "topbarAppearance" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    brandLayout = 'etos-horizontal';
+    brandTemplate = input(null, ...(ngDevMode ? [{ debugName: "brandTemplate" }] : /* istanbul ignore next */ []));
+    profileTemplate = input(null, ...(ngDevMode ? [{ debugName: "profileTemplate" }] : /* istanbul ignore next */ []));
     layoutWidth = this.layout.width;
-    dividerBorderWidth = computed(() => 'var(--border-width)', ...(ngDevMode ? [{ debugName: "dividerBorderWidth" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => {
-        const classes = ['etos-layout-host', 'etos-layout-host--horizontal'];
-        if (this.layoutWidth() === 'fixed') {
-            classes.push('etos-layout-host--fixed');
+    shellClasses = computed(() => {
+        switch (this.layoutWidth()) {
+            case 'full':
+                return 'relative isolate box-border h-dvh overflow-hidden py-3';
+            case 'wide':
+                return 'relative isolate box-border h-dvh overflow-hidden py-3 lg:py-10';
+            default:
+                return 'relative isolate box-border h-dvh overflow-hidden py-3 lg:py-20';
+        }
+    }, ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
+    railOverlayClasses = computed(() => {
+        const classes = ['pointer-events-none', 'absolute', 'inset-y-0', 'inset-x-0', 'z-20'];
+        if (this.layoutWidth() === 'full') {
+            classes.push('px-3');
+        }
+        else if (this.layoutWidth() === 'wide') {
+            classes.push('px-3', 'lg:px-10');
+        }
+        else {
+            classes.push('px-3', 'lg:px-10');
         }
         return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "railOverlayClasses" }] : /* istanbul ignore next */ []));
+    railGuideClasses = computed(() => this.layoutWidth() === 'container' ? 'relative mx-auto h-full w-full max-w-7xl' : 'relative mx-auto h-full w-full', ...(ngDevMode ? [{ debugName: "railGuideClasses" }] : /* istanbul ignore next */ []));
     frameClasses = computed(() => {
-        const classes = ['etos-layout-frame', 'etos-layout-frame--horizontal'];
-        if (this.layoutWidth() === 'fixed') {
-            classes.push('etos-layout-frame--fixed');
+        const classes = ['relative', 'z-10', 'h-full', 'min-h-0', 'border', 'border-brand'];
+        if (this.layoutWidth() === 'full') {
+            classes.push('px-3');
+        }
+        else if (this.layoutWidth() === 'wide') {
+            classes.push('px-3', 'lg:px-10');
+        }
+        else {
+            classes.push('px-3', 'lg:px-10');
         }
         return classes.join(' ');
     }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
-    mainClasses = computed(() => {
-        const classes = ['etos-layout-main'];
+    maskClasses = computed(() => {
+        const classes = ['h-full', 'bg-position-[center_center]', 'bg-size-[2.775rem_2.775rem]'];
+        if (this.layoutWidth() === 'container') {
+            classes.unshift('mx-auto', 'w-full', 'max-w-7xl');
+        }
+        else {
+            classes.unshift('mx-auto', 'w-full');
+        }
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "maskClasses" }] : /* istanbul ignore next */ []));
+    contentClasses = computed(() => {
+        const classes = [
+            'relative',
+            'z-20',
+            'mx-auto',
+            'flex',
+            'h-full',
+            'min-h-0',
+            'flex-col',
+            'overflow-hidden',
+            'bg-background/65',
+        ];
+        if (this.layoutWidth() === 'container') {
+            classes.push('w-full', 'max-w-7xl');
+        }
+        else {
+            classes.push('w-full');
+        }
         return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosHorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: EtosHorizontalLayoutComponent, isStandalone: true, selector: "etos-horizontal-layout", inputs: { topbarAppearance: { classPropertyName: "topbarAppearance", publicName: "topbarAppearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-brand-layout": "brandLayout", "attr.data-layout-width": "layoutWidth()" } }, ngImport: i0, template: `
-    <div [class]="frameClasses()">
-      <ui-topbar
-        class="etos-layout-topbar"
-        [appearance]="topbarAppearance()"
-        [ariaLabel]="ariaLabel()"
-        [style.border-bottom-width]="dividerBorderWidth()">
-        <div ui-topbar-start class="etos-layout-topbar-slot etos-layout-topbar-slot--start">
-          <ng-content select="[ui-layout-brand],[ui-topbar-start]" />
+    }, ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: HorizontalLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: HorizontalLayout, isStandalone: true, selector: "horizontal", inputs: { brandTemplate: { classPropertyName: "brandTemplate", publicName: "brandTemplate", isSignal: true, isRequired: false, transformFunction: null }, profileTemplate: { classPropertyName: "profileTemplate", publicName: "profileTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-layout-width": "layoutWidth()" }, classAttribute: "block" }, ngImport: i0, template: `
+    <div
+      class="min-h-screen bg-neutral-200 text-neutral-600 bg-[linear-gradient(rgba(212,212,212,0.45)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.45)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
+      <div [class]="shellClasses()">
+        <div aria-hidden="true" [class]="railOverlayClasses()">
+          <div [class]="railGuideClasses()">
+            <div class="absolute inset-y-0 left-0 w-px bg-brand"></div>
+            <div class="absolute inset-y-0 right-0 w-px bg-brand"></div>
+          </div>
         </div>
-        <div ui-topbar-end class="etos-layout-topbar-slot etos-layout-topbar-slot--end">
-          <ng-content select="[ui-layout-profile],[ui-topbar-end]" />
+
+        <div [class]="frameClasses()">
+          <div aria-hidden="true" class="pointer-events-none absolute inset-0 z-0">
+            <div class="absolute inset-x-0 top-11 h-px bg-brand"></div>
+            <div class="absolute inset-x-0 bottom-11 h-px bg-brand"></div>
+          </div>
+          <div aria-hidden="true" class="pointer-events-none absolute inset-0 z-10">
+            <div [class]="maskClasses()"></div>
+          </div>
+          <div [class]="contentClasses()">
+            <nav class="shrink-0">
+              <topbar class="shrink-0" [showHamburger]="false">
+                @if (brandTemplate(); as brand) {
+                  <div topbar-start class="min-w-0">
+                    <ng-container [ngTemplateOutlet]="brand" />
+                  </div>
+                }
+
+                @if (profileTemplate(); as profile) {
+                  <div topbar-end class="flex min-w-0 items-center">
+                    <ng-container [ngTemplateOutlet]="profile" />
+                  </div>
+                }
+              </topbar>
+            </nav>
+            <main class="min-h-0 flex-1 overflow-auto">
+              <router-outlet />
+            </main>
+          </div>
         </div>
-      </ui-topbar>
-      <main [class]="mainClasses()">
-        <router-outlet />
-      </main>
+      </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TopbarComponent, selector: "ui-topbar", inputs: ["items", "navigationId", "appearance", "ariaLabel", "class", "autoRegister", "showHamburger", "hamburgerLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TopbarComponent, selector: "topbar", inputs: ["items", "navigationId", "appearance", "ariaLabel", "class", "autoRegister", "showHamburger", "hamburgerLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosHorizontalLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: HorizontalLayout, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'etos-horizontal-layout',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [RouterOutlet, TopbarComponent],
-                    host: {
-                        '[class]': 'hostClasses()',
-                        '[attr.data-brand-layout]': 'brandLayout',
+            args: [{ selector: 'horizontal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, RouterOutlet, TopbarComponent], host: {
+                        class: 'block',
                         '[attr.data-layout-width]': 'layoutWidth()',
-                    },
-                    template: `
-    <div [class]="frameClasses()">
-      <ui-topbar
-        class="etos-layout-topbar"
-        [appearance]="topbarAppearance()"
-        [ariaLabel]="ariaLabel()"
-        [style.border-bottom-width]="dividerBorderWidth()">
-        <div ui-topbar-start class="etos-layout-topbar-slot etos-layout-topbar-slot--start">
-          <ng-content select="[ui-layout-brand],[ui-topbar-start]" />
+                    }, template: `
+    <div
+      class="min-h-screen bg-neutral-200 text-neutral-600 bg-[linear-gradient(rgba(212,212,212,0.45)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.45)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
+      <div [class]="shellClasses()">
+        <div aria-hidden="true" [class]="railOverlayClasses()">
+          <div [class]="railGuideClasses()">
+            <div class="absolute inset-y-0 left-0 w-px bg-brand"></div>
+            <div class="absolute inset-y-0 right-0 w-px bg-brand"></div>
+          </div>
         </div>
-        <div ui-topbar-end class="etos-layout-topbar-slot etos-layout-topbar-slot--end">
-          <ng-content select="[ui-layout-profile],[ui-topbar-end]" />
+
+        <div [class]="frameClasses()">
+          <div aria-hidden="true" class="pointer-events-none absolute inset-0 z-0">
+            <div class="absolute inset-x-0 top-11 h-px bg-brand"></div>
+            <div class="absolute inset-x-0 bottom-11 h-px bg-brand"></div>
+          </div>
+          <div aria-hidden="true" class="pointer-events-none absolute inset-0 z-10">
+            <div [class]="maskClasses()"></div>
+          </div>
+          <div [class]="contentClasses()">
+            <nav class="shrink-0">
+              <topbar class="shrink-0" [showHamburger]="false">
+                @if (brandTemplate(); as brand) {
+                  <div topbar-start class="min-w-0">
+                    <ng-container [ngTemplateOutlet]="brand" />
+                  </div>
+                }
+
+                @if (profileTemplate(); as profile) {
+                  <div topbar-end class="flex min-w-0 items-center">
+                    <ng-container [ngTemplateOutlet]="profile" />
+                  </div>
+                }
+              </topbar>
+            </nav>
+            <main class="min-h-0 flex-1 overflow-auto">
+              <router-outlet />
+            </main>
+          </div>
         </div>
-      </ui-topbar>
-      <main [class]="mainClasses()">
-        <router-outlet />
-      </main>
+      </div>
     </div>
-  `,
-                }]
-        }], propDecorators: { topbarAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "topbarAppearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+  ` }]
+        }], propDecorators: { brandTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandTemplate", required: false }] }], profileTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileTemplate", required: false }] }] } });
 
-class EtosVerticalLayoutComponent {
+class VerticalLayout {
     layout = inject(LayoutService);
     sidebarAppearance = input('default', ...(ngDevMode ? [{ debugName: "sidebarAppearance" }] : /* istanbul ignore next */ []));
     sidebarPosition = input('left', ...(ngDevMode ? [{ debugName: "sidebarPosition" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    brandLayout = 'etos-vertical';
+    sidebarHeaderTemplate = input(null, ...(ngDevMode ? [{ debugName: "sidebarHeaderTemplate" }] : /* istanbul ignore next */ []));
+    sidebarFooterTemplate = input(null, ...(ngDevMode ? [{ debugName: "sidebarFooterTemplate" }] : /* istanbul ignore next */ []));
     layoutWidth = this.layout.width;
-    dividerBorderWidth = computed(() => 'var(--border-width)', ...(ngDevMode ? [{ debugName: "dividerBorderWidth" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => {
-        const classes = ['etos-layout-host', 'etos-layout-host--vertical'];
-        if (this.layoutWidth() === 'fixed') {
-            classes.push('etos-layout-host--fixed');
-        }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    frameClasses = computed(() => {
-        const classes = ['etos-layout-frame', 'etos-layout-frame--vertical'];
-        if (this.layoutWidth() === 'fixed') {
-            classes.push('etos-layout-frame--fixed', 'etos-layout-frame--vertical-fixed');
+    shellClasses = computed(() => {
+        switch (this.layoutWidth()) {
+            case 'full':
+                return 'relative isolate h-full overflow-hidden py-2';
+            case 'wide':
+                return 'relative isolate h-full overflow-hidden py-2 lg:py-10';
+            default:
+                return 'relative isolate h-full overflow-hidden py-2  lg:py-18';
         }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
-    mainClasses = computed(() => {
-        const classes = ['etos-layout-main'];
-        if (this.layoutWidth() === 'fixed') {
-            classes.push('etos-layout-main--fixed', 'etos-layout-main--vertical-fixed');
+    }, ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
+    gridClasses = computed(() => {
+        switch (this.layoutWidth()) {
+            case 'full':
+                return 'relative mx-auto grid h-full w-fit max-w-full grid-cols-[auto_minmax(0,100rem)] items-stretch bg-background/65';
+            case 'wide':
+                return 'relative mx-auto grid h-full w-fit max-w-full grid-cols-[auto_minmax(0,100rem)] items-stretch bg-background/65  lg:grid-cols-[auto_minmax(0,96rem)]';
+            default:
+                return 'relative mx-auto grid h-full w-fit max-w-full grid-cols-[auto_minmax(0,100rem)] items-stretch bg-background/65  lg:grid-cols-[auto_minmax(0,80rem)]';
         }
-        return classes.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosVerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: EtosVerticalLayoutComponent, isStandalone: true, selector: "etos-vertical-layout", inputs: { sidebarAppearance: { classPropertyName: "sidebarAppearance", publicName: "sidebarAppearance", isSignal: true, isRequired: false, transformFunction: null }, sidebarPosition: { classPropertyName: "sidebarPosition", publicName: "sidebarPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-brand-layout": "brandLayout", "attr.data-layout-width": "layoutWidth()" } }, ngImport: i0, template: `
-    <div [class]="frameClasses()">
-      <ui-sidebar
-        class="etos-layout-sidebar"
-        [appearance]="sidebarAppearance()"
-        [position]="sidebarPosition()"
-        [ariaLabel]="ariaLabel()"
-        [style.border-left-width]="dividerBorderWidth()"
-        [style.border-right-width]="dividerBorderWidth()">
-        <div ui-sidebar-header class="flex h-full w-full min-w-0 items-center">
-          <ng-content select="[ui-layout-brand],[ui-topbar-start],[ui-sidebar-header]" />
-        </div>
-
-        <div ui-sidebar-footer class="flex h-full w-full min-w-0 items-center justify-between gap-3 px-3">
-          <ng-content select="[ui-layout-profile],[ui-topbar-end],[ui-sidebar-footer]" />
+    }, ...(ngDevMode ? [{ debugName: "gridClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: VerticalLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: VerticalLayout, isStandalone: true, selector: "vertical", inputs: { sidebarAppearance: { classPropertyName: "sidebarAppearance", publicName: "sidebarAppearance", isSignal: true, isRequired: false, transformFunction: null }, sidebarPosition: { classPropertyName: "sidebarPosition", publicName: "sidebarPosition", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, sidebarHeaderTemplate: { classPropertyName: "sidebarHeaderTemplate", publicName: "sidebarHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarFooterTemplate: { classPropertyName: "sidebarFooterTemplate", publicName: "sidebarFooterTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-layout-width": "layoutWidth()" }, classAttribute: "block h-dvh overflow-hidden" }, ngImport: i0, template: `
+    <!-- prettier-ignore -->
+    <div class="h-full overflow-hidden bg-neutral-200   bg-[linear-gradient(rgba(212,212,212,0.65)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.65)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
+      <div [class]="shellClasses()">
+        <div class="-mx-18 relative h-full border-y border-brand">
+          <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 inset-y-8">
+            <div class="absolute inset-x-0 top-3.75 h-px bg-brand"></div>
+            <div class="absolute inset-x-0 bottom-3.75 h-px bg-brand"></div>
+          </div>
+          <div class="h-full px-20">
+            <div [class]="gridClasses()">
+              <div
+                aria-hidden="true"
+                class="pointer-events-none absolute bottom-[-100vh] left-0 top-[-100vh] z-20 w-px bg-brand"></div>
+              <div
+                aria-hidden="true"
+                class="pointer-events-none absolute bottom-[-100vh] right-0 top-[-100vh] z-20 w-px bg-brand"></div>
+              <nav class="relative h-full min-h-0 shrink-0 overflow-visible border-r border-brand">
+                <div
+                  aria-hidden="true"
+                  class="pointer-events-none absolute bottom-[-100vh] left-full top-[-100vh] -z-10 w-px bg-brand"></div>
+                <sidebar
+                  class="h-full"
+                  [appearance]="sidebarAppearance()"
+                  [position]="sidebarPosition()"
+                  [ariaLabel]="ariaLabel()">
+                  @if (sidebarHeaderTemplate(); as headerTemplate) {
+                    <div sidebar-header class="contents">
+                      <ng-container [ngTemplateOutlet]="headerTemplate" />
+                    </div>
+                  }
+                  @if (sidebarFooterTemplate(); as footerTemplate) {
+                    <div sidebar-footer class="contents">
+                      <ng-container [ngTemplateOutlet]="footerTemplate" />
+                    </div>
+                  }
+                </sidebar>
+              </nav>
+              <main class="relative min-w-0 overflow-y-auto">
+                <router-outlet />
+                <div class="pointer-events-none absolute right-4 top-4 z-30">
+                  <div
+                    class="inline-flex min-w-20 items-center justify-center rounded-full border border-brand bg-white/85 px-3 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-foreground shadow-sm backdrop-blur-sm"
+                    aria-label="Current breakpoint identifier">
+                    <span class="sm:hidden">mobile</span>
+                    <span class="hidden sm:inline md:hidden">sm</span>
+                    <span class="hidden md:inline lg:hidden">md</span>
+                    <span class="hidden lg:inline">lg</span>
+                  </div>
+                </div>
+              </main>
+            </div>
+          </div>
         </div>
-      </ui-sidebar>
-      <main [class]="mainClasses()">
-        <router-outlet />
-      </main>
+      </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidebarComponent, selector: "ui-sidebar", inputs: ["items", "navigationId", "appearance", "position", "ariaLabel", "header", "class", "autoMobile", "autoRegister"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidebarComponent, selector: "sidebar", inputs: ["items", "navigationId", "appearance", "position", "ariaLabel", "header", "class", "autoMobile", "autoRegister"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosVerticalLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: VerticalLayout, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'etos-vertical-layout',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [RouterOutlet, SidebarComponent],
-                    host: {
-                        '[class]': 'hostClasses()',
-                        '[attr.data-brand-layout]': 'brandLayout',
+            args: [{ selector: 'vertical', imports: [NgTemplateOutlet, RouterOutlet, SidebarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'block h-dvh overflow-hidden',
                         '[attr.data-layout-width]': 'layoutWidth()',
-                    },
-                    template: `
-    <div [class]="frameClasses()">
-      <ui-sidebar
-        class="etos-layout-sidebar"
-        [appearance]="sidebarAppearance()"
-        [position]="sidebarPosition()"
-        [ariaLabel]="ariaLabel()"
-        [style.border-left-width]="dividerBorderWidth()"
-        [style.border-right-width]="dividerBorderWidth()">
-        <div ui-sidebar-header class="flex h-full w-full min-w-0 items-center">
-          <ng-content select="[ui-layout-brand],[ui-topbar-start],[ui-sidebar-header]" />
-        </div>
-
-        <div ui-sidebar-footer class="flex h-full w-full min-w-0 items-center justify-between gap-3 px-3">
-          <ng-content select="[ui-layout-profile],[ui-topbar-end],[ui-sidebar-footer]" />
+                    }, template: `
+    <!-- prettier-ignore -->
+    <div class="h-full overflow-hidden bg-neutral-200   bg-[linear-gradient(rgba(212,212,212,0.65)_1px,transparent_1px),linear-gradient(to_right,rgba(212,212,212,0.65)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2.775rem_2.775rem]">
+      <div [class]="shellClasses()">
+        <div class="-mx-18 relative h-full border-y border-brand">
+          <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 inset-y-8">
+            <div class="absolute inset-x-0 top-3.75 h-px bg-brand"></div>
+            <div class="absolute inset-x-0 bottom-3.75 h-px bg-brand"></div>
+          </div>
+          <div class="h-full px-20">
+            <div [class]="gridClasses()">
+              <div
+                aria-hidden="true"
+                class="pointer-events-none absolute bottom-[-100vh] left-0 top-[-100vh] z-20 w-px bg-brand"></div>
+              <div
+                aria-hidden="true"
+                class="pointer-events-none absolute bottom-[-100vh] right-0 top-[-100vh] z-20 w-px bg-brand"></div>
+              <nav class="relative h-full min-h-0 shrink-0 overflow-visible border-r border-brand">
+                <div
+                  aria-hidden="true"
+                  class="pointer-events-none absolute bottom-[-100vh] left-full top-[-100vh] -z-10 w-px bg-brand"></div>
+                <sidebar
+                  class="h-full"
+                  [appearance]="sidebarAppearance()"
+                  [position]="sidebarPosition()"
+                  [ariaLabel]="ariaLabel()">
+                  @if (sidebarHeaderTemplate(); as headerTemplate) {
+                    <div sidebar-header class="contents">
+                      <ng-container [ngTemplateOutlet]="headerTemplate" />
+                    </div>
+                  }
+                  @if (sidebarFooterTemplate(); as footerTemplate) {
+                    <div sidebar-footer class="contents">
+                      <ng-container [ngTemplateOutlet]="footerTemplate" />
+                    </div>
+                  }
+                </sidebar>
+              </nav>
+              <main class="relative min-w-0 overflow-y-auto">
+                <router-outlet />
+                <div class="pointer-events-none absolute right-4 top-4 z-30">
+                  <div
+                    class="inline-flex min-w-20 items-center justify-center rounded-full border border-brand bg-white/85 px-3 py-1 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-foreground shadow-sm backdrop-blur-sm"
+                    aria-label="Current breakpoint identifier">
+                    <span class="sm:hidden">mobile</span>
+                    <span class="hidden sm:inline md:hidden">sm</span>
+                    <span class="hidden md:inline lg:hidden">md</span>
+                    <span class="hidden lg:inline">lg</span>
+                  </div>
+                </div>
+              </main>
+            </div>
+          </div>
         </div>
-      </ui-sidebar>
-      <main [class]="mainClasses()">
-        <router-outlet />
-      </main>
+      </div>
     </div>
-  `,
-                }]
-        }], propDecorators: { sidebarAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarAppearance", required: false }] }], sidebarPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+  ` }]
+        }], propDecorators: { sidebarAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarAppearance", required: false }] }], sidebarPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], sidebarHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarHeaderTemplate", required: false }] }], sidebarFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarFooterTemplate", required: false }] }] } });
 
 class EtosLayoutComponent {
+    mode = input(null, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    sidebarHeaderTemplate = input(null, ...(ngDevMode ? [{ debugName: "sidebarHeaderTemplate" }] : /* istanbul ignore next */ []));
+    sidebarFooterTemplate = input(null, ...(ngDevMode ? [{ debugName: "sidebarFooterTemplate" }] : /* istanbul ignore next */ []));
+    layoutBrandTemplate = input(null, ...(ngDevMode ? [{ debugName: "layoutBrandTemplate" }] : /* istanbul ignore next */ []));
+    layoutProfileTemplate = input(null, ...(ngDevMode ? [{ debugName: "layoutProfileTemplate" }] : /* istanbul ignore next */ []));
     layout = inject(LayoutService);
-    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    layoutMode = this.layout.mode;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: EtosLayoutComponent, isStandalone: true, selector: "etos-layout", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
-    @switch (layoutMode()) {
+    resolvedMode = computed(() => this.mode() ?? this.layout.mode(), ...(ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EtosLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: EtosLayoutComponent, isStandalone: true, selector: "etos-layout", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, sidebarHeaderTemplate: { classPropertyName: "sidebarHeaderTemplate", publicName: "sidebarHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarFooterTemplate: { classPropertyName: "sidebarFooterTemplate", publicName: "sidebarFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, layoutBrandTemplate: { classPropertyName: "layoutBrandTemplate", publicName: "layoutBrandTemplate", isSignal: true, isRequired: false, transformFunction: null }, layoutProfileTemplate: { classPropertyName: "layoutProfileTemplate", publicName: "layoutProfileTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-layout-mode": "resolvedMode()" }, classAttribute: "contents" }, ngImport: i0, template: `
+    @switch (resolvedMode()) {
+      @case ('empty') {
+        <empty />
+      }
       @case ('horizontal') {
-        <etos-horizontal-layout [ariaLabel]="ariaLabel()">
-          <ng-content select="[ui-layout-brand],[ui-topbar-start]" />
-          <ng-content select="[ui-layout-profile],[ui-topbar-end]" />
-        </etos-horizontal-layout>
+        <horizontal [brandTemplate]="layoutBrandTemplate()" [profileTemplate]="layoutProfileTemplate()" />
       }
       @default {
-        <etos-vertical-layout [ariaLabel]="ariaLabel()" />
+        <vertical
+          [sidebarHeaderTemplate]="sidebarHeaderTemplate() ?? layoutBrandTemplate()"
+          [sidebarFooterTemplate]="sidebarFooterTemplate() ?? layoutProfileTemplate()" />
       }
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: EtosHorizontalLayoutComponent, selector: "etos-horizontal-layout", inputs: ["topbarAppearance", "ariaLabel"] }, { kind: "component", type: EtosVerticalLayoutComponent, selector: "etos-vertical-layout", inputs: ["sidebarAppearance", "sidebarPosition", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: EmptyLayout, selector: "empty" }, { kind: "component", type: HorizontalLayout, selector: "horizontal", inputs: ["brandTemplate", "profileTemplate"] }, { kind: "component", type: VerticalLayout, selector: "vertical", inputs: ["sidebarAppearance", "sidebarPosition", "ariaLabel", "sidebarHeaderTemplate", "sidebarFooterTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: EtosLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'etos-layout',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [EtosHorizontalLayoutComponent, EtosVerticalLayoutComponent],
+                    imports: [EmptyLayout, HorizontalLayout, VerticalLayout],
                     host: {
                         class: 'contents',
+                        '[attr.data-layout-mode]': 'resolvedMode()',
                     },
                     template: `
-    @switch (layoutMode()) {
+    @switch (resolvedMode()) {
+      @case ('empty') {
+        <empty />
+      }
       @case ('horizontal') {
-        <etos-horizontal-layout [ariaLabel]="ariaLabel()">
-          <ng-content select="[ui-layout-brand],[ui-topbar-start]" />
-          <ng-content select="[ui-layout-profile],[ui-topbar-end]" />
-        </etos-horizontal-layout>
+        <horizontal [brandTemplate]="layoutBrandTemplate()" [profileTemplate]="layoutProfileTemplate()" />
       }
       @default {
-        <etos-vertical-layout [ariaLabel]="ariaLabel()" />
+        <vertical
+          [sidebarHeaderTemplate]="sidebarHeaderTemplate() ?? layoutBrandTemplate()"
+          [sidebarFooterTemplate]="sidebarFooterTemplate() ?? layoutProfileTemplate()" />
       }
     }
   `,
                 }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
-
-class EtosAppShellComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosAppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: EtosAppShellComponent, isStandalone: true, selector: "etos-app-shell", host: { classAttribute: "flex h-full min-h-0 flex-col" }, ngImport: i0, template: `
-    <header class="flex h-12 shrink-0 items-center border-b border-border bg-card px-4">
-      <ng-content select="[etos-app-shell-header]" />
-    </header>
-    <main class="min-h-0 flex-1 overflow-auto">
-      <ng-content select="[etos-app-shell-main]" />
-    </main>
-    <footer class="flex h-12 shrink-0 items-center border-t border-border bg-card px-4">
-      <ng-content select="[etos-app-shell-footer]" />
-    </footer>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EtosAppShellComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'etos-app-shell',
-                    host: {
-                        class: 'flex h-full min-h-0 flex-col',
-                    },
-                    template: `
-    <header class="flex h-12 shrink-0 items-center border-b border-border bg-card px-4">
-      <ng-content select="[etos-app-shell-header]" />
-    </header>
-    <main class="min-h-0 flex-1 overflow-auto">
-      <ng-content select="[etos-app-shell-main]" />
-    </main>
-    <footer class="flex h-12 shrink-0 items-center border-t border-border bg-card px-4">
-      <ng-content select="[etos-app-shell-footer]" />
-    </footer>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], sidebarHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarHeaderTemplate", required: false }] }], sidebarFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarFooterTemplate", required: false }] }], layoutBrandTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutBrandTemplate", required: false }] }], layoutProfileTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutProfileTemplate", required: false }] }] } });
 
 /*
  * Public API Surface of @ojiepermana/angular/etos
@@ -847,5 +1011,5 @@ const ETOS_BRAND_VERSION = '0.0.1';
  * Generated bundle index. Do not edit.
  */
 
-export { ETOS_BRAND_NAME, ETOS_BRAND_VERSION, ETOS_LAYOUT_CONFIG, ETOS_THEME_CONFIG, EtosAppShellComponent, EtosEmptyLayoutComponent, EtosHorizontalLayoutComponent, EtosLayoutComponent, EtosThemeSwitcherComponent, EtosVerticalLayoutComponent, provideEtosBrand, provideEtosLayout, provideEtosTheme };
+export { ETOS_BRAND_NAME, ETOS_BRAND_VERSION, ETOS_LAYOUT_CONFIG, ETOS_THEME_CONFIG, EtosLayoutComponent, EtosThemeSwitcherComponent, provideEtosBrand, provideEtosLayout, provideEtosTheme };
 //# sourceMappingURL=ojiepermana-angular-brand-etos.mjs.map