@ojiepermana/angular 21.1.22 → 21.1.24

package/types/ojiepermana-angular-component.d.ts

@@ -1,6 +1,6 @@
 import { ClassValue } from 'clsx';
 import * as _angular_core from '@angular/core';
-import { model, TemplateRef, AfterContentInit, OnInit, OnDestroy } from '@angular/core';
+import { model, TemplateRef, AfterContentInit, OnInit, OnDestroy, InjectionToken, Signal } from '@angular/core';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { ControlValueAccessor, FormControl, AbstractControl } from '@angular/forms';
@@ -11,6 +11,7 @@ import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { MatSnackBarConfig, MatSnackBarRef } from '@angular/material/snack-bar';
 import * as i1 from '@angular/material/tooltip';
 export { TooltipPosition } from '@angular/material/tooltip';
+import { SafeHtml } from '@angular/platform-browser';
 
 /**
  * Concatenate and dedupe Tailwind class names.
@@ -769,6 +770,12 @@ declare class PopoverContentDirective {
 
 type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
 type PopoverAlign = 'start' | 'center' | 'end';
+interface PopoverTriggerDefaults {
+    readonly side?: Signal<PopoverSide>;
+    readonly align?: Signal<PopoverAlign>;
+    readonly sideOffset?: Signal<number>;
+}
+declare const POPOVER_TRIGGER_DEFAULTS: InjectionToken<PopoverTriggerDefaults>;
 /**
  * Toggle a `<ng-template uiPopoverContent>` anchored to the host element.
  *
@@ -783,18 +790,21 @@ declare class PopoverTriggerDirective {
     private readonly vcr;
     private readonly el;
     private readonly destroyRef;
+    private readonly defaults;
     readonly uiPopoverTrigger: _angular_core.InputSignal<PopoverContentDirective>;
-    readonly side: _angular_core.InputSignal<PopoverSide>;
-    readonly align: _angular_core.InputSignal<PopoverAlign>;
-    readonly sideOffset: _angular_core.InputSignal<number>;
+    readonly side: _angular_core.InputSignal<PopoverSide | undefined>;
+    readonly align: _angular_core.InputSignal<PopoverAlign | undefined>;
+    readonly sideOffset: _angular_core.InputSignal<number | undefined>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly openedChange: _angular_core.OutputEmitterRef<boolean>;
     private overlayRef;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     toggle(): void;
+    onKeyboardToggle(event: Event): void;
     open(): void;
     close(): void;
     private oppositeSide;
+    private usesNativeKeyboardActivation;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverTriggerDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[uiPopoverTrigger]", ["uiPopoverTrigger"], { "uiPopoverTrigger": { "alias": "uiPopoverTrigger"; "required": true; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "sideOffset": { "alias": "sideOffset"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "openedChange": "openedChange"; }, never, never, true, never>;
 }
@@ -1173,5 +1183,204 @@ declare class TooltipDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[uiTooltip]", ["uiTooltip"], { "uiTooltip": { "alias": "uiTooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.MatTooltip; inputs: { "matTooltipPosition": "uiTooltipPosition"; "matTooltipDisabled": "uiTooltipDisabled"; "matTooltipShowDelay": "uiTooltipShowDelay"; "matTooltipHideDelay": "uiTooltipHideDelay"; "matTooltipTouchGestures": "uiTooltipTouchGestures"; }; outputs: {}; }]>;
 }
 
-export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AlertDescriptionComponent, AlertTitleComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbEllipsisComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbListComponent, BreadcrumbPageComponent, BreadcrumbSeparatorComponent, ButtonComponent, CalendarComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, ComboboxComponent, CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent, ContextMenuTriggerDirective, DatePickerComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, FormControlDirective, FormDescriptionComponent, FormFieldComponent, FormFieldContext, FormLabelComponent, FormMessageComponent, InputComponent, LabelComponent, MenuContentDirective, MenuItemComponent, MenuLabelComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective, OptionComponent, PaginationComponent, PopoverContentDirective, PopoverTriggerDirective, ProgressComponent, RadioComponent, RadioGroupComponent, ScrollAreaComponent, SelectComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent, SkeletonComponent, SliderComponent, SwitchComponent, TableBodyComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsTriggerComponent, TextareaComponent, ToastService, TooltipDirective, alertVariants, badgeVariants, buttonVariants, cn };
-export type { AccordionType, AlertVariant, BadgeVariant, ButtonSize, ButtonVariant, ComboboxOption, MenuAlign, MenuSide, PopoverAlign, PopoverSide, SeparatorOrientation, SheetSide, ToastOptions, ToastVariant };
+type ThemePanelColor = 'base' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
+type ThemePanelMode = 'light' | 'dark' | 'system';
+type ThemePanelStyle = 'default' | 'sharp' | 'brutal' | 'soft';
+type ThemePanelLayoutMode = 'vertical' | 'horizontal' | 'empty';
+type ThemePanelLayoutWidth = 'full' | 'container' | 'wide';
+interface ThemePanelThemePort {
+    readonly color: Signal<ThemePanelColor>;
+    readonly scheme: Signal<ThemePanelMode>;
+    readonly style: Signal<ThemePanelStyle>;
+    setColor(color: ThemePanelColor): void;
+    setScheme(mode: ThemePanelMode): void;
+    setStyle(style: ThemePanelStyle): void;
+}
+interface ThemePanelLayoutPort {
+    readonly mode: Signal<ThemePanelLayoutMode>;
+    readonly width: Signal<ThemePanelLayoutWidth>;
+    setMode(mode: ThemePanelLayoutMode): void;
+    setWidth(width: ThemePanelLayoutWidth): void;
+}
+declare const THEME_PANEL_THEME_PORT: InjectionToken<ThemePanelThemePort>;
+declare const THEME_PANEL_LAYOUT_PORT: InjectionToken<ThemePanelLayoutPort>;
+type ThemePanelIconName = 'sun' | 'moon' | 'system' | 'default-style' | 'sharp-style' | 'brutal-style' | 'soft-style' | 'vertical-layout' | 'horizontal-layout' | 'empty-layout' | 'full-width' | 'container-width' | 'wide-width';
+declare class ThemePanelComponent {
+    private readonly sanitizer;
+    private readonly themePort;
+    private readonly layoutPort;
+    readonly connected: _angular_core.InputSignal<boolean>;
+    readonly class: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly userName: _angular_core.InputSignal<string>;
+    readonly userSubtitle: _angular_core.InputSignal<string>;
+    readonly userInitials: _angular_core.InputSignal<string>;
+    readonly themeColor: _angular_core.InputSignal<ThemePanelColor>;
+    readonly themeMode: _angular_core.InputSignal<ThemePanelMode>;
+    readonly themeStyle: _angular_core.InputSignal<ThemePanelStyle>;
+    readonly layoutMode: _angular_core.InputSignal<ThemePanelLayoutMode>;
+    readonly layoutWidth: _angular_core.InputSignal<ThemePanelLayoutWidth>;
+    readonly themeColorChange: _angular_core.OutputEmitterRef<ThemePanelColor>;
+    readonly themeModeChange: _angular_core.OutputEmitterRef<ThemePanelMode>;
+    readonly themeStyleChange: _angular_core.OutputEmitterRef<ThemePanelStyle>;
+    readonly layoutModeChange: _angular_core.OutputEmitterRef<ThemePanelLayoutMode>;
+    readonly layoutWidthChange: _angular_core.OutputEmitterRef<ThemePanelLayoutWidth>;
+    protected readonly currentThemeColor: _angular_core.WritableSignal<ThemePanelColor>;
+    protected readonly currentThemeMode: _angular_core.WritableSignal<ThemePanelMode>;
+    protected readonly currentThemeStyle: _angular_core.WritableSignal<ThemePanelStyle>;
+    protected readonly currentLayoutMode: _angular_core.WritableSignal<ThemePanelLayoutMode>;
+    protected readonly currentLayoutWidth: _angular_core.WritableSignal<ThemePanelLayoutWidth>;
+    protected readonly themeColorOptions: readonly [{
+        readonly value: "base";
+        readonly label: "Base";
+        readonly swatchClass: "bg-zinc-800";
+    }, {
+        readonly value: "red";
+        readonly label: "Red";
+        readonly swatchClass: "bg-red-500";
+    }, {
+        readonly value: "orange";
+        readonly label: "Orange";
+        readonly swatchClass: "bg-orange-500";
+    }, {
+        readonly value: "amber";
+        readonly label: "Amber";
+        readonly swatchClass: "bg-amber-400";
+    }, {
+        readonly value: "yellow";
+        readonly label: "Yellow";
+        readonly swatchClass: "bg-yellow-400";
+    }, {
+        readonly value: "lime";
+        readonly label: "Lime";
+        readonly swatchClass: "bg-lime-400";
+    }, {
+        readonly value: "green";
+        readonly label: "Green";
+        readonly swatchClass: "bg-green-600";
+    }, {
+        readonly value: "emerald";
+        readonly label: "Emerald";
+        readonly swatchClass: "bg-emerald-600";
+    }, {
+        readonly value: "teal";
+        readonly label: "Teal";
+        readonly swatchClass: "bg-teal-600";
+    }, {
+        readonly value: "cyan";
+        readonly label: "Cyan";
+        readonly swatchClass: "bg-cyan-600";
+    }, {
+        readonly value: "sky";
+        readonly label: "Sky";
+        readonly swatchClass: "bg-sky-600";
+    }, {
+        readonly value: "blue";
+        readonly label: "Blue";
+        readonly swatchClass: "bg-blue-500";
+    }, {
+        readonly value: "indigo";
+        readonly label: "Indigo";
+        readonly swatchClass: "bg-indigo-500";
+    }, {
+        readonly value: "violet";
+        readonly label: "Violet";
+        readonly swatchClass: "bg-violet-500";
+    }, {
+        readonly value: "purple";
+        readonly label: "Purple";
+        readonly swatchClass: "bg-purple-500";
+    }, {
+        readonly value: "fuchsia";
+        readonly label: "Fuchsia";
+        readonly swatchClass: "bg-fuchsia-600";
+    }, {
+        readonly value: "pink";
+        readonly label: "Pink";
+        readonly swatchClass: "bg-pink-600";
+    }, {
+        readonly value: "rose";
+        readonly label: "Rose";
+        readonly swatchClass: "bg-rose-500";
+    }];
+    protected readonly themeModeOptions: readonly [{
+        readonly value: "light";
+        readonly label: "Light";
+        readonly icon: "sun";
+    }, {
+        readonly value: "dark";
+        readonly label: "Dark";
+        readonly icon: "moon";
+    }, {
+        readonly value: "system";
+        readonly label: "System";
+        readonly icon: "system";
+    }];
+    protected readonly themeStyleOptions: readonly [{
+        readonly value: "default";
+        readonly label: "Default";
+        readonly icon: "default-style";
+    }, {
+        readonly value: "sharp";
+        readonly label: "Sharp";
+        readonly icon: "sharp-style";
+    }, {
+        readonly value: "brutal";
+        readonly label: "Brutal";
+        readonly icon: "brutal-style";
+    }, {
+        readonly value: "soft";
+        readonly label: "Soft";
+        readonly icon: "soft-style";
+    }];
+    protected readonly layoutModeOptions: readonly [{
+        readonly value: "vertical";
+        readonly label: "Vertical";
+        readonly icon: "vertical-layout";
+    }, {
+        readonly value: "horizontal";
+        readonly label: "Horizontal";
+        readonly icon: "horizontal-layout";
+    }, {
+        readonly value: "empty";
+        readonly label: "Empty";
+        readonly icon: "empty-layout";
+    }];
+    protected readonly layoutWidthOptions: readonly [{
+        readonly value: "full";
+        readonly label: "Full";
+        readonly icon: "full-width";
+    }, {
+        readonly value: "container";
+        readonly label: "Container";
+        readonly icon: "container-width";
+    }, {
+        readonly value: "wide";
+        readonly label: "Wide";
+        readonly icon: "wide-width";
+    }];
+    protected readonly hostClasses: Signal<string>;
+    protected readonly hasUserHeader: Signal<boolean>;
+    protected readonly resolvedUserInitials: Signal<string>;
+    protected readonly currentThemeColorLabel: Signal<"" | "Base" | "Red" | "Orange" | "Amber" | "Yellow" | "Lime" | "Green" | "Emerald" | "Teal" | "Cyan" | "Sky" | "Blue" | "Indigo" | "Violet" | "Purple" | "Fuchsia" | "Pink" | "Rose">;
+    constructor();
+    protected setThemeColor(color: ThemePanelColor): void;
+    protected setThemeMode(mode: ThemePanelMode): void;
+    protected setThemeStyle(style: ThemePanelStyle): void;
+    protected setLayoutMode(mode: ThemePanelLayoutMode): void;
+    protected setLayoutWidth(width: ThemePanelLayoutWidth): void;
+    protected sectionEyebrowClasses(): string;
+    protected segmentedOptionClasses(active: boolean): string;
+    protected swatchButtonClasses(active: boolean): string;
+    protected optionIconClasses(active: boolean): string;
+    protected colorSwatchClasses(swatchClass: string | undefined, isActive: boolean): string;
+    protected iconSvg(name: ThemePanelIconName): SafeHtml;
+    private rawIconSvg;
+    private toInitials;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemePanelComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemePanelComponent, "ui-theme-panel", never, { "connected": { "alias": "connected"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "userSubtitle": { "alias": "userSubtitle"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": false; "isSignal": true; }; "themeColor": { "alias": "themeColor"; "required": false; "isSignal": true; }; "themeMode": { "alias": "themeMode"; "required": false; "isSignal": true; }; "themeStyle": { "alias": "themeStyle"; "required": false; "isSignal": true; }; "layoutMode": { "alias": "layoutMode"; "required": false; "isSignal": true; }; "layoutWidth": { "alias": "layoutWidth"; "required": false; "isSignal": true; }; }, { "themeColorChange": "themeColorChange"; "themeModeChange": "themeModeChange"; "themeStyleChange": "themeStyleChange"; "layoutModeChange": "layoutModeChange"; "layoutWidthChange": "layoutWidthChange"; }, never, never, true, never>;
+}
+
+export { AccordionComponent, AccordionContentComponent, AccordionContextBase, AccordionItemComponent, AccordionTriggerComponent, AlertComponent, AlertDescriptionComponent, AlertTitleComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbEllipsisComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbListComponent, BreadcrumbPageComponent, BreadcrumbSeparatorComponent, ButtonComponent, CalendarComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, ComboboxComponent, CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent, ContextMenuTriggerDirective, DatePickerComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, FormControlDirective, FormDescriptionComponent, FormFieldComponent, FormFieldContext, FormLabelComponent, FormMessageComponent, InputComponent, LabelComponent, MenuContentDirective, MenuItemComponent, MenuLabelComponent, MenuSeparatorComponent, MenuShortcutComponent, MenuSurfaceComponent, MenuTriggerDirective, OptionComponent, POPOVER_TRIGGER_DEFAULTS, PaginationComponent, PopoverContentDirective, PopoverTriggerDirective, ProgressComponent, RadioComponent, RadioGroupComponent, ScrollAreaComponent, SelectComponent, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetTitleComponent, SkeletonComponent, SliderComponent, SwitchComponent, THEME_PANEL_LAYOUT_PORT, THEME_PANEL_THEME_PORT, TableBodyComponent, TableCaptionComponent, TableCellComponent, TableComponent, TableFooterComponent, TableHeadComponent, TableHeaderComponent, TableRowComponent, TabsComponent, TabsContentComponent, TabsContextBase, TabsListComponent, TabsTriggerComponent, TextareaComponent, ThemePanelComponent, ToastService, TooltipDirective, alertVariants, badgeVariants, buttonVariants, cn };
+export type { AccordionType, AlertVariant, BadgeVariant, ButtonSize, ButtonVariant, ComboboxOption, MenuAlign, MenuSide, PopoverAlign, PopoverSide, PopoverTriggerDefaults, SeparatorOrientation, SheetSide, ThemePanelColor, ThemePanelLayoutMode, ThemePanelLayoutPort, ThemePanelLayoutWidth, ThemePanelMode, ThemePanelStyle, ThemePanelThemePort, ToastOptions, ToastVariant };

package/types/ojiepermana-angular-layout.d.ts

@@ -1,6 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { InjectionToken, EnvironmentProviders } from '@angular/core';
 import { SidebarAppearance, SidebarPosition, SidebarMode, TopbarAppearance } from '@ojiepermana/angular/navigation';
+import { PopoverTriggerDefaults, PopoverSide, PopoverAlign } from '@ojiepermana/angular/component';
 
 /**
  * Vertical layout — sidebar + main (scrollable).
@@ -12,7 +13,8 @@ import { SidebarAppearance, SidebarPosition, SidebarMode, TopbarAppearance } fro
  * Markup:
  * ```html
  * <vertical>
- *   <!-- sidebar + router-outlet dirender oleh komponen -->
+ *   <a ui-layout-brand>Brand</a>
+ *   <button ui-layout-profile type="button">Profile</button>
  * </vertical>
  * ```
  */
@@ -32,7 +34,7 @@ declare class VerticalLayoutComponent {
     protected readonly frameClasses: _angular_core.Signal<string>;
     protected readonly mainClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<VerticalLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VerticalLayoutComponent, "vertical", never, { "sidebarAppearance": { "alias": "sidebarAppearance"; "required": false; "isSignal": true; }; "sidebarPosition": { "alias": "sidebarPosition"; "required": false; "isSignal": true; }; "sidebarMode": { "alias": "sidebarMode"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VerticalLayoutComponent, "vertical", never, { "sidebarAppearance": { "alias": "sidebarAppearance"; "required": false; "isSignal": true; }; "sidebarPosition": { "alias": "sidebarPosition"; "required": false; "isSignal": true; }; "sidebarMode": { "alias": "sidebarMode"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["[ui-layout-brand],[sidebar-header]", "[ui-layout-profile],[sidebar-footer]"], true, never>;
 }
 
 /**
@@ -86,6 +88,11 @@ declare class EmptyLayoutComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyLayoutComponent, "empty", never, {}, {}, never, never, true, never>;
 }
 
+declare class ShellPagesComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShellPagesComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShellPagesComponent, "shell-pages", never, {}, {}, never, ["[shell-pages-header]", "[shell-pages-main]", "[shell-pages-footer]"], true, never>;
+}
+
 declare const LAYOUT_MODES: readonly ["vertical", "horizontal", "empty"];
 type LayoutMode = (typeof LAYOUT_MODES)[number];
 declare const LAYOUT_WIDTHS: readonly ["full", "container", "wide"];
@@ -141,7 +148,16 @@ declare class LayoutService {
 
 declare function provideMaterialLayout(config?: MaterialLayoutConfig): EnvironmentProviders;
 
+declare class LayoutProfilePopoverDefaultsDirective implements PopoverTriggerDefaults {
+    private readonly layout;
+    readonly side: _angular_core.Signal<PopoverSide>;
+    readonly align: _angular_core.Signal<PopoverAlign>;
+    readonly sideOffset: _angular_core.Signal<-20 | 12>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutProfilePopoverDefaultsDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LayoutProfilePopoverDefaultsDirective, "[ui-layout-profile][uiPopoverTrigger]", never, {}, {}, never, never, true, never>;
+}
+
 declare const LAYOUT_VERSION = "0.0.1";
 
-export { DEFAULT_MATERIAL_LAYOUT_CONFIG, EmptyLayoutComponent, HorizontalLayoutComponent, LAYOUT_MODES, LAYOUT_VERSION, LAYOUT_WIDTHS, LayoutService, MATERIAL_LAYOUT_CONFIG, VerticalLayoutComponent, isLayoutMode, isLayoutWidth, normalizeLayoutWidth, provideMaterialLayout };
+export { DEFAULT_MATERIAL_LAYOUT_CONFIG, EmptyLayoutComponent, HorizontalLayoutComponent, LAYOUT_MODES, LAYOUT_VERSION, LAYOUT_WIDTHS, LayoutProfilePopoverDefaultsDirective, LayoutService, MATERIAL_LAYOUT_CONFIG, ShellPagesComponent, VerticalLayoutComponent, isLayoutMode, isLayoutWidth, normalizeLayoutWidth, provideMaterialLayout };
 export type { ConfiguredLayoutWidth, LayoutMode, LayoutWidth, LegacyLayoutWidth, MaterialLayoutConfig, ResolvedMaterialLayoutConfig };

package/types/ojiepermana-angular-navigation.d.ts

@@ -117,11 +117,14 @@ type SidebarAppearance = 'default' | 'thin';
  * - megamenu: full-width panel multi-kolom untuk item `mega`
  */
 type TopbarAppearance = 'default' | 'megamenu';
+/** Sidebar desktop border ownership */
+type SidebarBorderSource = 'component' | 'layout';
 /** Sidebar position */
 type SidebarPosition = 'left' | 'right';
 /** Sidebar display mode */
 type SidebarMode = 'over' | 'side';
 type VerticalNavigationAppearance = SidebarAppearance;
+type VerticalNavigationBorderSource = SidebarBorderSource;
 type VerticalNavigationMode = SidebarMode;
 type VerticalNavigationPosition = SidebarPosition;
 
@@ -284,6 +287,8 @@ declare class SidebarComponent {
     /** Registry key di `NavigationService`. Default `'main'`. */
     readonly navigationId: _angular_core.InputSignal<string>;
     readonly appearance: _angular_core.InputSignal<SidebarAppearance>;
+    /** Desktop border can be owned by the sidebar or by the surrounding layout shell. */
+    readonly borderSource: _angular_core.InputSignal<SidebarBorderSource>;
     readonly position: _angular_core.InputSignal<SidebarPosition>;
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly header: _angular_core.InputSignal<boolean>;
@@ -326,7 +331,7 @@ declare class SidebarComponent {
     private openDrawer;
     private closeDrawer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoMobile": { "alias": "autoMobile"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; }, {}, never, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "borderSource": { "alias": "borderSource"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "autoMobile": { "alias": "autoMobile"; "required": false; "isSignal": true; }; "autoRegister": { "alias": "autoRegister"; "required": false; "isSignal": true; }; }, {}, never, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
 }
 
 /**
@@ -380,4 +385,4 @@ declare const DemoNavigationData: NavigationItem[];
 declare const NAVIGATION_VERSION = "0.0.1";
 
 export { DEFAULT_NAVIGATION_ID, DemoNavigationData, NAVIGATION_VERSION, NavigationService, SidebarComponent, TopbarComponent, UiNavIconComponent, UiNavItemComponent };
-export type { NavigationActionHandler, NavigationAsideItem, NavigationBasicItem, NavigationBranchItem, NavigationCollapsableItem, NavigationDividerItem, NavigationGroupItem, NavigationItem, NavigationItemBadge, NavigationItemBase, NavigationItemClasses, NavigationItemType, NavigationLeafItem, NavigationMegaItem, NavigationRoutableItemBase, NavigationSpacerItem, NavigationStructuredItem, NavigationVisibilityHandler, SidebarAppearance, SidebarMode, SidebarPosition, TopbarAppearance, VerticalNavigationAppearance, VerticalNavigationMode, VerticalNavigationPosition };
+export type { NavigationActionHandler, NavigationAsideItem, NavigationBasicItem, NavigationBranchItem, NavigationCollapsableItem, NavigationDividerItem, NavigationGroupItem, NavigationItem, NavigationItemBadge, NavigationItemBase, NavigationItemClasses, NavigationItemType, NavigationLeafItem, NavigationMegaItem, NavigationRoutableItemBase, NavigationSpacerItem, NavigationStructuredItem, NavigationVisibilityHandler, SidebarAppearance, SidebarBorderSource, SidebarMode, SidebarPosition, TopbarAppearance, VerticalNavigationAppearance, VerticalNavigationBorderSource, VerticalNavigationMode, VerticalNavigationPosition };

package/types/ojiepermana-angular-theme.d.ts

@@ -5,7 +5,7 @@ declare const MODES: readonly ["light", "dark"];
 type ThemeMode = (typeof MODES)[number];
 declare const COLOR_SCHEMES: readonly ["light", "dark", "system"];
 type ColorScheme = (typeof COLOR_SCHEMES)[number];
-declare const COLORS: readonly ["blue", "red", "green", "purple", "amber"];
+declare const COLORS: readonly ["base", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
 type ThemeColor = (typeof COLORS)[number];
 declare const STYLES: readonly ["default", "sharp", "brutal", "soft"];
 type ThemeStyle = (typeof STYLES)[number];
@@ -84,8 +84,8 @@ declare class ThemeService {
     private readonly _systemPrefersDark;
     readonly scheme: _angular_core.Signal<"light" | "dark" | "system">;
     readonly brand: _angular_core.Signal<"etos" | null>;
-    readonly color: _angular_core.Signal<"blue" | "red" | "green" | "purple" | "amber">;
-    readonly theme: _angular_core.Signal<"blue" | "red" | "green" | "purple" | "amber">;
+    readonly color: _angular_core.Signal<"base" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose">;
+    readonly theme: _angular_core.Signal<"base" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose">;
     readonly style: _angular_core.Signal<"default" | "sharp" | "brutal" | "soft">;
     readonly mode: _angular_core.Signal<"light" | "dark">;
     readonly snapshot: _angular_core.Signal<ThemeConfig>;
@@ -147,7 +147,7 @@ interface MaterialThemeFeature {
  *     provideMaterialTheme(
  *       {
  *         mode: 'system',
- *         color: 'blue',
+ *         color: 'base',
  *         style: 'soft',
  *       },
  *       withMaterialDefaults(),