@ojiepermana/angular 21.1.13 → 21.1.15

package/brand/etos/README.md

@@ -48,7 +48,7 @@ import {
 Etos ships with these defaults:
 
 - Theme defaults to brand `etos` with light mode.
-- Layout defaults to `vertical` mode with `container` width.
+- Layout defaults to `vertical` mode with `wide` width.
 
 Recommended provider configuration:
 

package/etos/styles/index.css

@@ -3,13 +3,13 @@
  *
  * Import before Tailwind, then import the shared Tailwind token bridge.
  */
-@import '@ojiepermana/angular/theme/styles/themes/library/_layers.css';
-@import '@ojiepermana/angular/theme/styles/themes/mode/index.css';
-@import '@ojiepermana/angular/theme/styles/themes/library/color/index.css';
-@import '@ojiepermana/angular/theme/styles/themes/library/style/index.css';
+@import '../../../theme/src/lib/styles/themes/library/_layers.css';
+@import '../../../theme/src/lib/styles/themes/mode/index.css';
+@import '../../../theme/src/lib/styles/themes/library/color/index.css';
+@import '../../../theme/src/lib/styles/themes/library/style/index.css';
 @import './color.css';
 @import './style.css';
 @import './layout.css';
-@import '@ojiepermana/angular/theme/styles/themes/library/_tokens.css';
-@import '@ojiepermana/angular/theme/styles/themes/library/_material-overrides.css';
-@import '@ojiepermana/angular/theme/styles/themes/library/_components.css';
+@import '../../../theme/src/lib/styles/themes/library/_tokens.css';
+@import '../../../theme/src/lib/styles/themes/library/_material-overrides.css';
+@import '../../../theme/src/lib/styles/themes/library/_components.css';

package/etos/styles/layout.css

@@ -3,19 +3,19 @@
  */
 @layer tokens {
   [theme-brand='etos'] {
-    --etos-layout-shell-padding: clamp(1rem, 2vw, 2rem);
-    --etos-layout-frame-radius: var(--radius-lg);
-    --etos-layout-frame-shadow: var(--shadow-sm);
-    --etos-layout-sidebar-width: 17.5rem;
-    --etos-layout-main-max-width: 80rem;
-    --etos-layout-vertical-shell-max-width: calc(var(--etos-layout-sidebar-width) + var(--etos-layout-main-max-width));
-    --etos-layout-empty-max-width: 24rem;
-    --etos-layout-empty-padding: clamp(1.5rem, 4vw, 3rem);
-    --etos-layout-topbar-inline: 0.875rem;
-    --etos-layout-brand-mark-size: 2rem;
+    --layout-shell-padding: clamp(1rem, 2vw, 2rem);
+    --layout-frame-radius: var(--radius-lg);
+    --layout-frame-shadow: var(--shadow-sm);
+    --layout-sidebar-width: 17.5rem;
+    --layout-main-max-width: 80rem;
+    --layout-vertical-shell-max-width: calc(var(--layout-sidebar-width) + var(--layout-main-max-width));
+    --layout-empty-max-width: 24rem;
+    --layout-empty-padding: clamp(1.5rem, 4vw, 3rem);
+    --layout-topbar-inline: 0.875rem;
+    --layout-brand-mark-size: 2rem;
   }
 
   [data-mode='dark'][theme-brand='etos'] {
-    --etos-layout-frame-shadow: 0 0 0 1px hsl(var(--border));
+    --layout-frame-shadow: 0 0 0 1px hsl(var(--border));
   }
 }

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

@@ -14,7 +14,6 @@ const ETOS_THEME_CONFIG = {
 };
 const ETOS_LAYOUT_CONFIG = {
     mode: 'vertical',
-    width: 'container',
 };
 
 function provideEtosTheme(config = {}, ...features) {
@@ -127,10 +126,10 @@ class EtosThemeSwitcherComponent {
         return cn('relative h-8 w-8 rounded-full p-0 transition-colors duration-150 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', open && 'bg-muted/50');
     }
     notificationButtonClasses() {
-        return cn('h-8 w-8 rounded-[var(--etos-layout-frame-radius)] p-0 text-muted-foreground transition-colors duration-150 hover:bg-muted/50 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background');
+        return cn('h-8 w-8 rounded-[var(--layout-frame-radius)] p-0 text-muted-foreground transition-colors duration-150 hover:bg-muted/50 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background');
     }
     segmentedOptionClasses(active) {
-        return cn('h-10 rounded-[var(--etos-layout-frame-radius)] border border-transparent px-[0.3125rem] py-[0.1875rem] text-foreground transition-colors', active ? 'bg-background shadow-sm' : 'text-muted-foreground hover:bg-background/70');
+        return cn('h-10 rounded-[var(--layout-frame-radius)] border border-transparent px-[0.3125rem] py-[0.1875rem] text-foreground transition-colors', active ? 'bg-background shadow-sm' : 'text-muted-foreground hover:bg-background/70');
     }
     themeOptionClasses(active) {
         return this.segmentedOptionClasses(active);
@@ -139,7 +138,7 @@ class EtosThemeSwitcherComponent {
         return active ? 'text-foreground' : 'text-muted-foreground';
     }
     actionButtonClasses(tone = 'default') {
-        return cn('h-12 w-full justify-start gap-2.5 rounded-[var(--etos-layout-frame-radius)] border border-transparent px-2 py-1.5 text-left transition-colors hover:bg-muted/50', tone === 'destructive' && 'hover:bg-destructive/8 focus-visible:ring-destructive/30');
+        return cn('h-12 w-full justify-start gap-2.5 rounded-[var(--layout-frame-radius)] border border-transparent px-2 py-1.5 text-left transition-colors hover:bg-muted/50', tone === 'destructive' && 'hover:bg-destructive/8 focus-visible:ring-destructive/30');
     }
     actionIconClasses(tone = 'default') {
         return tone === 'destructive' ? 'text-destructive' : 'text-foreground';
@@ -196,8 +195,8 @@ class EtosThemeSwitcherComponent {
         }
         return `${segments[0][0] ?? ''}${segments[1][0] ?? ''}`.toUpperCase();
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EtosThemeSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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"
@@ -269,7 +268,7 @@ class EtosThemeSwitcherComponent {
           <section
             data-setting="theme-scheme"
             [attr.data-current]="themeScheme()"
-            class="rounded-(--etos-layout-frame-radius) bg-muted/65 p-0.5">
+            class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
             <div class="grid grid-cols-3 gap-1">
               @for (option of themeSchemeOptions; track option.value) {
                 <button
@@ -297,7 +296,7 @@ class EtosThemeSwitcherComponent {
             <div class="px-1">
               <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="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
               <div class="grid grid-cols-3 gap-1">
                 @for (option of layoutModeOptions; track option.value) {
                   <button
@@ -326,7 +325,7 @@ class EtosThemeSwitcherComponent {
             <div class="px-1">
               <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="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
               <div class="grid grid-cols-3 gap-1">
                 @for (option of layoutWidthOptions; track option.value) {
                   <button
@@ -381,7 +380,7 @@ class EtosThemeSwitcherComponent {
     </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", "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.11", ngImport: i0, type: EtosThemeSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EtosThemeSwitcherComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'etos-theme-switcher',
@@ -470,7 +469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
           <section
             data-setting="theme-scheme"
             [attr.data-current]="themeScheme()"
-            class="rounded-(--etos-layout-frame-radius) bg-muted/65 p-0.5">
+            class="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
             <div class="grid grid-cols-3 gap-1">
               @for (option of themeSchemeOptions; track option.value) {
                 <button
@@ -498,7 +497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             <div class="px-1">
               <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="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
               <div class="grid grid-cols-3 gap-1">
                 @for (option of layoutModeOptions; track option.value) {
                   <button
@@ -527,7 +526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             <div class="px-1">
               <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="rounded-(--layout-frame-radius) bg-muted/65 p-0.5">
               <div class="grid grid-cols-3 gap-1">
                 @for (option of layoutWidthOptions; track option.value) {
                   <button
@@ -585,8 +584,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         }], 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EmptyLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", 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">
@@ -606,7 +605,7 @@ class EmptyLayout {
     </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.11", ngImport: i0, type: EmptyLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EmptyLayout, decorators: [{
             type: Component,
             args: [{ selector: 'empty', imports: [RouterOutlet], template: `
     <div
@@ -701,8 +700,8 @@ class HorizontalLayout {
         }
         return classes.join(' ');
     }, ...(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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: HorizontalLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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()">
@@ -746,7 +745,7 @@ class HorizontalLayout {
     </div>
   `, 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.11", ngImport: i0, type: HorizontalLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: HorizontalLayout, decorators: [{
             type: Component,
             args: [{ selector: 'horizontal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, RouterOutlet, TopbarComponent], host: {
                         class: 'block',
@@ -814,27 +813,50 @@ class VerticalLayout {
                 return 'relative isolate h-full overflow-hidden py-2  lg:py-18';
         }
     }, ...(ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []));
+    frameClasses = computed(() => {
+        if (this.layoutWidth() === 'wide') {
+            return 'relative h-full border-y border-brand';
+        }
+        return '-mx-18 relative h-full border-y border-brand';
+    }, ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
+    frameBodyClasses = computed(() => {
+        if (this.layoutWidth() === 'wide') {
+            return 'h-full lg:px-10';
+        }
+        return 'h-full px-20';
+    }, ...(ngDevMode ? [{ debugName: "frameBodyClasses" }] : /* istanbul ignore next */ []));
     gridClasses = computed(() => {
+        const classes = [
+            'relative',
+            'mx-auto',
+            'grid',
+            'h-full',
+            'w-full',
+            'max-w-full',
+            'grid-cols-[auto_minmax(0,1fr)]',
+            'items-stretch',
+            'bg-background/65',
+        ];
         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)]';
+            case 'container':
+                classes.push('lg:max-w-[var(--layout-vertical-shell-max-width)]');
+                break;
             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)]';
+                break;
         }
+        return classes.join(' ');
     }, ...(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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: VerticalLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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 [class]="frameClasses()">
           <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]="frameBodyClasses()">
             <div [class]="gridClasses()">
               <div
                 aria-hidden="true"
@@ -883,7 +905,7 @@ class VerticalLayout {
     </div>
   `, 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.11", ngImport: i0, type: VerticalLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: VerticalLayout, decorators: [{
             type: Component,
             args: [{ selector: 'vertical', imports: [NgTemplateOutlet, RouterOutlet, SidebarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'block h-dvh overflow-hidden',
@@ -892,12 +914,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
     <!-- 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 [class]="frameClasses()">
           <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]="frameBodyClasses()">
             <div [class]="gridClasses()">
               <div
                 aria-hidden="true"
@@ -955,8 +977,8 @@ class EtosLayoutComponent {
     layoutProfileTemplate = input(null, ...(ngDevMode ? [{ debugName: "layoutProfileTemplate" }] : /* istanbul ignore next */ []));
     layout = inject(LayoutService);
     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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EtosLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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 />
@@ -972,7 +994,7 @@ class EtosLayoutComponent {
     }
   `, 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.11", ngImport: i0, type: EtosLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: EtosLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'etos-layout',