@ojiepermana/angular 21.1.9 → 21.1.12

package/README.md

@@ -33,6 +33,19 @@ If you install the package with `npm install`, `bun add`, `pnpm add`, or `yarn
 add` directly, peer dependency installation falls back to the package
 manager's own behavior.
 
+## Navigation primitives
+
+`@ojiepermana/angular/navigation` exports the shared sidebar and topbar building blocks used by the demo shells. The vertical navigation selector is now `sidebar` and the projected sidebar slots use `sidebar-header` and `sidebar-footer`.
+
+```html
+<sidebar [ariaLabel]="'Primary'" [appearance]="'default'">
+  <div sidebar-header>Brand</div>
+  <div sidebar-footer>Footer actions</div>
+</sidebar>
+```
+
+Register items through `NavigationService.registerItems(...)`, or pass them directly with the `items` input when composing a local navigation tree.
+
 ## SDK generator in a consumer workspace
 
 After `@ojiepermana/angular` is installed, a consumer workspace can scaffold an

package/brand/etos/README.md

@@ -6,7 +6,6 @@ Use this folder for Etos-specific implementation:
 
 - `core/` contains Etos provider composition and brand defaults.
 - `themes/` contains Etos color, style, layout, and component-facing CSS.
-- `layouts/` contains Etos shell components.
 - `navigation/`, `components/`, `assets/`, and `docs/` can be added when Etos needs brand-specific behavior beyond shared primitives.
 
 Shared services, types, and primitives stay in the generic libraries:
@@ -20,14 +19,7 @@ Shared services, types, and primitives stay in the generic libraries:
 Published consumers should import Etos through the short public entrypoint:
 
 ```ts
-import {
-  type EtosBrandOptions,
-  EtosHorizontalLayoutComponent,
-  EtosThemeSwitcherComponent,
-  EtosVerticalLayoutComponent,
-  provideEtosBrand,
-} from '@ojiepermana/angular/etos';
-import { LayoutService } from '@ojiepermana/angular/layout';
+import { type EtosBrandOptions, EtosThemeSwitcherComponent, provideEtosBrand } from '@ojiepermana/angular/etos';
 
 export const etosBrandConfig = {
   theme: {
@@ -36,7 +28,7 @@ export const etosBrandConfig = {
   },
   layout: {
     mode: 'vertical',
-    width: 'fixed',
+    width: 'container',
   },
 } satisfies EtosBrandOptions;
 
@@ -45,60 +37,7 @@ export const appConfig = {
 };
 ```
 
-`provideEtosBrand()` applies the Etos brand tokens and wires the shared `ThemeService` and `LayoutService` defaults for the app.
-
-```ts
-@Component({
-  imports: [EtosHorizontalLayoutComponent, EtosThemeSwitcherComponent, EtosVerticalLayoutComponent],
-  template: `
-    @switch (layoutMode()) {
-      @case ('horizontal') {
-        <etos-horizontal-layout>
-          <div ui-layout-profile>
-            <etos-theme-switcher
-              [userInfo]="profileInfo"
-              [quickActions]="horizontalQuickActions"
-              [notificationShortcut]="horizontalNotificationShortcut" />
-          </div>
-        </etos-horizontal-layout>
-      }
-      @default {
-        <etos-vertical-layout>
-          <div ui-sidebar-footer class="flex items-center gap-3">
-            <etos-theme-switcher [userInfo]="profileInfo" [quickActions]="verticalQuickActions" popoverAlign="start" />
-
-            <div class="flex flex-col gap-px">
-              <span>Ojie Permana</span>
-              <span>Etos design system navigator</span>
-            </div>
-          </div>
-        </etos-vertical-layout>
-      }
-    }
-  `,
-})
-export class Pages {
-  protected readonly layoutMode = inject(LayoutService).mode;
-  protected readonly profileInfo = {
-    name: 'Ojie Permana',
-    subtitle: 'Etos design system navigator',
-    avatarSrc: '/avatar-ojie.svg',
-    avatarAlt: 'Portrait of Ojie Permana',
-  };
-  protected readonly horizontalQuickActions = [
-    { value: 'sign-out', label: 'Logout', icon: 'logout', tone: 'destructive' },
-  ];
-  protected readonly verticalQuickActions = [
-    { value: 'notifications', label: 'Notifications', icon: 'notifications' },
-    { value: 'sign-out', label: 'Logout', icon: 'logout', tone: 'destructive' },
-  ];
-  protected readonly horizontalNotificationShortcut = {
-    value: 'notifications',
-    icon: 'notifications',
-    ariaLabel: 'Open notifications for Ojie Permana',
-  };
-}
-```
+`provideEtosBrand()` applies the Etos brand tokens and wires the shared `ThemeService` and `LayoutService` defaults for the app. `EtosThemeSwitcherComponent` remains the Etos-owned UI component exported from this entrypoint.
 
 ## Using the brand theme
 
@@ -127,7 +66,7 @@ export const etosBrandConfig = {
   },
   layout: {
     mode: 'vertical',
-    width: 'fixed',
+    width: 'container',
   },
 } satisfies EtosBrandOptions;
 
@@ -136,7 +75,7 @@ export const appConfig = {
 };
 ```
 
-From there, switch between `EtosHorizontalLayoutComponent` and `EtosVerticalLayoutComponent` based on the current `LayoutService.mode()` value, as shown above.
+From there, mount Etos-specific UI such as `EtosThemeSwitcherComponent` inside your existing application shell.
 
 ## Using the theme switcher
 
@@ -166,7 +105,7 @@ In this mode the trigger shows only the avatar or initials plus the standalone n
 Vertical usage:
 
 ```html
-<div ui-sidebar-footer class="flex h-full w-full min-w-0 items-center justify-start gap-3 px-0 py-0">
+<div sidebar-footer class="flex h-full w-full min-w-0 items-center justify-start gap-3 px-0 py-0">
   <etos-theme-switcher [userInfo]="profileInfo" [quickActions]="verticalQuickActions" popoverAlign="start" />
 
   <div class="min-w-0 flex flex-col gap-px">
@@ -178,6 +117,15 @@ Vertical usage:
 
 Use `popoverAlign="start"` in the vertical sidebar so the popup opens toward the content area instead of clipping against the left viewport edge.
 
+When composing the shared navigation shell directly, use the renamed sidebar API:
+
+```html
+<sidebar [ariaLabel]="'Primary'">
+  <div sidebar-header>Brand</div>
+  <div sidebar-footer>Footer actions</div>
+</sidebar>
+```
+
 Input shape examples:
 
 ```ts
@@ -225,10 +173,9 @@ onThemeSwitcherAction(action: string): void {
 
 ## Workspace usage in this repository
 
-The Etos demo under `projects/demo/etos` already uses the short TypeScript entrypoint:
+The Etos demo under `projects/demo/etos` already uses the short TypeScript entrypoint for provider setup:
 
 - `src/app/app.config.ts` imports `provideEtosBrand` from `@ojiepermana/angular/etos`.
-- `src/pages/pages.ts` imports `EtosHorizontalLayoutComponent`, `EtosVerticalLayoutComponent`, and `EtosThemeSwitcherComponent` from `@ojiepermana/angular/etos`.
 
 For CSS, the workspace demo currently imports the Etos source stylesheet directly:
 

package/etos/styles/color.css

@@ -3,6 +3,27 @@
  */
 @layer tokens {
   [theme-brand='etos'] {
+    --brand: 0 0% 64%;
+    --brand-border-alpha: 0.7;
+    --brand-background-alpha: 0.7;
+
+    --background: 210 38% 98%;
+    --surface: 0 0% 89.8%;
+    --surface-foreground: 211 56% 12%;
+    --foreground: 211 56% 12%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 211 56% 12%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 211 56% 12%;
+
+    --muted: 211 34% 94%;
+    --muted-foreground: 211 24% 38%;
+
+    --border: 211 28% 82%;
+    --input: 211 28% 82%;
+
     --primary: 211 95% 29%;
     --primary-foreground: 0 0% 100%;
     --accent: 211 95% 96%;
@@ -13,9 +34,40 @@
   }
 
   [data-mode='dark'][theme-brand='etos'] {
+    --brand: 0 0% 64%;
+    --brand-border-alpha: 0.45;
+    --brand-background-alpha: 0.55;
+
+    --background: 211 38% 9%;
+    --surface: 211 22% 18%;
+    --surface-foreground: 210 40% 96%;
+    --foreground: 210 40% 96%;
+
+    --card: 211 34% 11%;
+    --card-foreground: 210 40% 96%;
+
+    --popover: 211 34% 11%;
+    --popover-foreground: 210 40% 96%;
+
+    --muted: 211 22% 18%;
+    --muted-foreground: 211 18% 70%;
+
+    --border: 211 24% 24%;
+    --input: 211 24% 24%;
+
     --accent: 211 58% 18%;
     --accent-foreground: 211 90% 84%;
     --secondary: 211 24% 18%;
     --secondary-foreground: 211 82% 84%;
   }
 }
+
+@layer utilities {
+  .border-brand {
+    border-color: hsl(var(--brand, var(--border)) / var(--brand-border-alpha, 0.7));
+  }
+
+  .bg-brand {
+    background-color: hsl(var(--brand, var(--border)) / var(--brand-background-alpha, 0.7));
+  }
+}

package/etos/styles/layout.css

@@ -19,168 +19,3 @@
     --etos-layout-frame-shadow: 0 0 0 1px hsl(var(--border));
   }
 }
-
-@layer components {
-  .etos-layout-host {
-    display: block;
-    height: 100dvh;
-    width: 100%;
-    overflow: hidden;
-    background: hsl(var(--background));
-    color: hsl(var(--foreground));
-  }
-
-  .etos-layout-host--fixed {
-    box-sizing: border-box;
-  }
-
-  .etos-layout-frame {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    background: hsl(var(--background));
-  }
-
-  .etos-layout-frame--horizontal {
-    flex-direction: column;
-  }
-
-  .etos-layout-main {
-    min-width: 0;
-    flex: 1 1 0%;
-    overflow: auto;
-  }
-
-  .etos-layout-main--fixed {
-    width: 100%;
-    max-width: var(--etos-layout-main-max-width);
-    margin-inline: auto;
-  }
-
-  .etos-layout-topbar {
-    width: 100%;
-    flex-shrink: 0;
-    border-bottom: var(--border-width) solid hsl(var(--border));
-  }
-
-  .etos-layout-topbar-slot {
-    display: flex;
-    min-width: 0;
-    align-items: center;
-  }
-
-  .etos-layout-topbar-slot--end {
-    justify-content: flex-end;
-  }
-
-  .etos-layout-empty-host {
-    display: flex;
-    min-height: 100dvh;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    padding: var(--etos-layout-empty-padding);
-    background: hsl(var(--background));
-    color: hsl(var(--foreground));
-  }
-
-  .etos-layout-empty-main {
-    width: 100%;
-    max-width: var(--etos-layout-empty-max-width);
-  }
-
-  .etos-brand-link,
-  .etos-profile-trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.75rem;
-    min-height: 2.5rem;
-    padding: 0.375rem 0.5rem;
-    color: hsl(var(--foreground));
-    text-decoration: none;
-    transition:
-      color 160ms ease,
-      background-color 160ms ease;
-  }
-
-  .etos-brand-link:focus-visible,
-  .etos-profile-trigger:focus-visible {
-    outline: 2px solid hsl(var(--ring));
-    outline-offset: 2px;
-  }
-
-  .etos-brand-mark,
-  .etos-profile-mark {
-    display: inline-flex;
-    height: var(--etos-layout-brand-mark-size);
-    width: var(--etos-layout-brand-mark-size);
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-md);
-    background: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    font-size: 0.7rem;
-    font-weight: 700;
-    letter-spacing: 0.18em;
-    line-height: 1;
-  }
-
-  .etos-profile-mark {
-    border-radius: 999px;
-    letter-spacing: 0;
-  }
-
-  .etos-brand-copy {
-    display: none;
-    min-width: 0;
-    flex-direction: column;
-    gap: 0.125rem;
-  }
-
-  .etos-brand-name {
-    font-size: var(--text-sm);
-    font-weight: 700;
-    line-height: 1;
-  }
-
-  .etos-brand-subtitle,
-  .etos-profile-name {
-    font-size: var(--text-xs);
-    line-height: 1;
-    color: hsl(var(--muted-foreground));
-  }
-
-  .etos-profile-name {
-    display: none;
-    font-weight: 600;
-  }
-
-  @media (min-width: 40rem) {
-    .etos-brand-copy,
-    .etos-profile-name {
-      display: flex;
-    }
-  }
-
-  @media (min-width: 64rem) {
-    .etos-layout-host--fixed {
-      padding: var(--etos-layout-shell-padding);
-    }
-
-    .etos-layout-frame--vertical-fixed {
-      max-width: var(--etos-layout-vertical-shell-max-width);
-      margin-inline: auto;
-    }
-
-    .etos-layout-frame--fixed {
-      border: var(--border-width) solid hsl(var(--border));
-      border-radius: var(--etos-layout-frame-radius);
-      box-shadow: var(--etos-layout-frame-shadow);
-    }
-
-    .etos-layout-main--vertical-fixed {
-      margin-inline: 0;
-    }
-  }
-}