@ojiepermana/angular 22.2.0 → 22.2.2

package/theme/styles/css/base/tailwind.css

@@ -90,6 +90,30 @@
   --shadow-lg: var(--theme-shadow-lg);
   --shadow-xl: var(--theme-shadow-xl);
 
+  /* Motion. Every transition utility reads the motion tokens, so one
+   * --duration-base / --ease-base change retimes the whole kit. The Tailwind
+   * names differ from the token names on purpose: re-emitting a token under
+   * its own name would be a var() cycle (see the shadow note in tokens.css). */
+  --default-transition-duration: var(--duration-normal);
+  --default-transition-timing-function: var(--ease-standard);
+  --transition-duration-fast: var(--duration-fast);
+  --transition-duration-normal: var(--duration-normal);
+  --transition-duration-slow: var(--duration-slow);
+  --ease-in: var(--ease-exit);
+  --ease-out: var(--ease-enter);
+  --ease-in-out: var(--ease-standard);
+
+  /* Stacking layers: z-dropdown, z-sticky, z-overlay, z-modal, z-popover,
+   * z-tooltip, z-toast. Local z-10/z-20 inside a component's own stacking
+   * context stay allowed. */
+  --z-index-dropdown: var(--z-dropdown);
+  --z-index-sticky: var(--z-sticky);
+  --z-index-overlay: var(--z-overlay);
+  --z-index-modal: var(--z-modal);
+  --z-index-popover: var(--z-popover);
+  --z-index-tooltip: var(--z-tooltip);
+  --z-index-toast: var(--z-toast);
+
   --text-2xs: var(--font-size-2xs);
   --text-2xs--line-height: var(--line-height-2xs);
   --text-2xs-plus: var(--font-size-2xs-plus);
@@ -163,3 +187,22 @@
 @utility rounded-base {
   border-radius: var(--radius-base);
 }
+
+/* One keyboard focus indicator for every interactive primitive: an outline,
+ * so it never moves layout and survives forced-colors mode. Mouse focus
+ * draws nothing (:focus-visible only). */
+@utility focus-ring {
+  &:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+}
+
+/* The same indicator on a composite's container while its inner input has
+ * keyboard focus (Command, Combobox). */
+@utility focus-ring-within {
+  &:has(:focus-visible) {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+}

package/theme/styles/css/base/theme.css

@@ -20,8 +20,6 @@
 
     --border-width-base: 1px;
 
-    --shadow-base: 0 1px 2px hsl(0 0% 3.9% / 0.08);
-
     --duration-base: 200ms;
     --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
 
@@ -85,19 +83,7 @@
     --border-width-medium: calc(var(--border-width-base) * 2);
     --border-width-thick: calc(var(--border-width-base) * 3);
 
-    /* Concrete values live in the *-base primitives. The --shadow-* aliases are
-     * re-emitted by the Tailwind @theme mapping as var(--theme-shadow-*) in the
-     * later `theme` layer, so pointing either alias back at --shadow-* would
-     * create a var() cycle that invalidates the whole chain. */
-    --shadow-xs-base: 0 1px 1px hsl(0 0% 3.9% / 0.05);
-    --shadow-md-base: 0 4px 6px hsl(0 0% 3.9% / 0.08);
-    --shadow-lg-base: 0 10px 15px hsl(0 0% 3.9% / 0.1);
-    --shadow-xl-base: 0 20px 25px hsl(0 0% 3.9% / 0.12);
-    --shadow-xs: var(--shadow-xs-base);
-    --shadow-sm: var(--shadow-base);
-    --shadow-md: var(--shadow-md-base);
-    --shadow-lg: var(--shadow-lg-base);
-    --shadow-xl: var(--shadow-xl-base);
+    /* Shadow and elevation tokens are defined once, in tokens.css. */
 
     --duration-fast: calc(var(--duration-base) * 0.5);
     --duration-normal: var(--duration-base);
@@ -304,17 +290,10 @@
     --font-size-2xs-plus: 0.6875rem;
     --line-height-2xs-plus: 1rem;
 
-    /* Deprecated: use the new primitive token names instead.
-     * Must reference the *-base primitives, never --shadow-* — the Tailwind
-     * @theme mapping re-emits --shadow-*: var(--theme-shadow-*), so an alias
-     * back to --shadow-* forms a var() cycle. */
-    --theme-shadow-xs: var(--shadow-xs-base);
+    /* Deprecated: use --border-width-base instead. The deprecated
+     * --theme-shadow-* aliases now live beside the shadow primitives in
+     * tokens.css. */
     --border-width: var(--border-width-base);
-    --theme-shadow-sm: var(--shadow-base);
-    --theme-shadow: var(--shadow-base);
-    --theme-shadow-md: var(--shadow-md-base);
-    --theme-shadow-lg: var(--shadow-lg-base);
-    --theme-shadow-xl: var(--shadow-xl-base);
   }
 
   :root,

package/theme/styles/css/base/tokens.css

@@ -77,15 +77,18 @@
      * --shadow-* — the Tailwind @theme mapping re-emits
      * --shadow-*: var(--theme-shadow-*) in the later `theme` layer, which
      * turns that into a var() cycle and invalidates both tokens. */
+    --shadow-xs-base: 0 1px 1px hsl(0 0% 12% / 0.05);
     --shadow-base: 0 1px 0 0 hsl(0 0% 12% / 0.08);
     --shadow-md-base: 0 8px 18px -14px hsl(0 0% 12% / 0.24);
     --shadow-lg-base: 0 18px 36px -28px hsl(0 0% 12% / 0.34);
     --shadow-xl-base: 0 24px 48px -36px hsl(0 0% 12% / 0.4);
+    --shadow-xs: var(--shadow-xs-base);
     --shadow-sm: var(--shadow-base);
     --shadow-md: var(--shadow-md-base);
     --shadow-lg: var(--shadow-lg-base);
     --shadow-xl: var(--shadow-xl-base);
 
+    --theme-shadow-xs: var(--shadow-xs-base);
     --theme-shadow-sm: var(--shadow-base);
     --theme-shadow: 0 2px 4px -2px hsl(0 0% 12% / 0.14);
     --theme-shadow-md: var(--shadow-md-base);
@@ -93,6 +96,19 @@
     --theme-shadow-xl: var(--shadow-xl-base);
     --shadow: var(--theme-shadow);
 
+    /* Keyboard focus indicator, drawn by the focus-ring utility. */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: hsl(var(--ring));
+
+    /* Elevation tiers. Resting surfaces (cards, fields, checkboxes, switches)
+     * sit at tier 0 and separate by a border; only floating layers carry a
+     * shadow: tier 1 for menus, popovers, select panels and tooltips, tier 2
+     * for dialogs, sheets, drawers and toasts. */
+    --elevation-0: none;
+    --elevation-1: var(--shadow-md-base);
+    --elevation-2: var(--shadow-lg-base);
+
     --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     --theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
 
@@ -138,6 +154,11 @@
      * flyout/panel frames, entry borders, and tree rails. */
     --section-border-opacity: 0.666;
 
+    /* Icon geometry — read by the <Icon> primitive (Lucide SVG). The component's
+     * `size` and `strokeWidth` inputs only override these two tokens on the host. */
+    --icon-size: 1.5rem;
+    --icon-stroke-width: 2;
+
     /* Navigation geometry — ONE proportional system for every nav surface
      * (sidebar, dockbar, navbar, flyout, entry grid). Icons are naked glyphs;
      * derived tokens keep alignment exact: --nav-indent places a child's icon

package/theme/styles/css/fonts.css

@@ -0,0 +1,85 @@
+/**
+ * Optional font faces for the theme's type roles.
+ *
+ * The theme declares `--theme-font-sans: 'Inter', …` and
+ * `--theme-font-mono: 'JetBrains Mono', …` but never loads a font: the package
+ * ships no binaries and makes no network request. Import this file to load
+ * them from your own origin:
+ *
+ *   @import '@ojiepermana/angular/theme/theme.css';
+ *   @import '@ojiepermana/angular/theme/styles/css/fonts.css';
+ *
+ * and serve the files at these paths (both families are SIL OFL 1.1):
+ *
+ *   /fonts/inter/InterVariable.woff2                 Inter 4.x, github.com/rsms/inter
+ *   /fonts/inter/InterVariable-Italic.woff2
+ *   /fonts/jetbrains-mono/JetBrainsMono-Regular.woff2   JetBrains Mono 2.x,
+ *   /fonts/jetbrains-mono/JetBrainsMono-Medium.woff2    github.com/JetBrains/JetBrainsMono
+ *   /fonts/jetbrains-mono/JetBrainsMono-Bold.woff2
+ *
+ * Hosting them elsewhere? Copy this file and change the urls. Preload only the
+ * upright Inter file; the browser fetches the other faces only when a page
+ * renders that style or weight.
+ *
+ * `Inter Fallback` is local Arial with Inter's metrics, so swapping in Inter
+ * once it loads (`font-display: swap`) does not shift the layout.
+ */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/fonts/inter/InterVariable.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter Fallback';
+  src: local('Arial'), local('ArialMT');
+  ascent-override: 90.49%;
+  descent-override: 22.56%;
+  line-gap-override: 0%;
+  size-adjust: 107.06%;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
+}
+
+/* The metric-matched fallback only makes sense once the faces are loaded, so
+ * it joins the stack here rather than in base/tokens.css. Same layer as the
+ * tokens, imported after them, so it wins without !important. */
+@layer tokens {
+  :root {
+    --theme-font-sans:
+      'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+}

package/types/ojiepermana-angular-chart-radar.d.ts

@@ -194,4 +194,5 @@ export declare class RadarChart {
   }, {
     "pointClick": "pointClick";
   }, never, ["*", "ChartTooltip", "ChartLegend"], true, never>;
-}
+}
+export {};

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

@@ -107,4 +107,5 @@ export declare class AvatarGroupCountComponent {
       "isSignal": true;
     };
   }, {}, never, ["*"], true, never>;
-}
+}
+export {};

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

@@ -146,4 +146,5 @@ export declare class CalendarComponent implements ControlValueAccessor {
   }, {
     "value": "valueChange";
   }, never, never, true, never>;
-}
+}
+export {};

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

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
 export type CardSize = 'default' | 'sm';
 export declare class CardComponent {
   protected readonly componentScale: ComponentScaleDirective;
-  readonly radius: import("@angular/core").InputSignal<"inherit" | "none" | "xs" | "sm" | "md" | "xl" | "full">;
+  readonly radius: import("@angular/core").InputSignal<"sm" | "inherit" | "none" | "xs" | "md" | "xl" | "full">;
   readonly density: import("@angular/core").InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
   readonly size: import("@angular/core").InputSignal<CardSize>;
   readonly class: import("@angular/core").InputSignal<string>;
@@ -46,8 +46,13 @@ export declare class CardHeaderComponent {
 export declare class CardTitleComponent {
   private readonly card;
   private readonly element;
+  /** A static `aria-level` the author wrote; the host binding would otherwise overwrite it. */
+  private readonly staticAriaLevel;
   readonly class: import("@angular/core").InputSignal<string>;
-  /** Heading level for custom `<CardTitle>` hosts; native h1-h6 infer their own level. */
+  /**
+   * Heading level for custom `<CardTitle>` hosts; native h1-h6 infer their own level.
+   * Unset, a static `aria-level` attribute is honoured, then the default of 3.
+   */
   readonly level: import("@angular/core").InputSignalWithTransform<number | null, string | number | null | undefined>;
   protected readonly resolvedLevel: import("@angular/core").Signal<number>;
   protected readonly classes: import("@angular/core").Signal<string>;

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

@@ -165,7 +165,7 @@ export declare class CommandItemComponent {
    * on the input instead, which is the listbox pattern.
    */
   readonly selectedState: import("@angular/core").InputSignal<boolean>;
-  readonly selected: import("@angular/core").OutputEmitterRef<MouseEvent | KeyboardEvent>;
+  readonly selected: import("@angular/core").OutputEmitterRef<KeyboardEvent | MouseEvent>;
   /** The highlighted row. Drives styling and `aria-activedescendant`, not `aria-selected`. */
   readonly active: import("@angular/core").WritableSignal<boolean>;
   readonly visible: import("@angular/core").Signal<boolean>;

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

@@ -230,4 +230,5 @@ export type EditorHtmlSanitizer = (html: string) => string;
  * Override this token when an application needs a stricter allow-list than
  * Angular's platform HTML sanitizer.
  */
-export declare const EDITOR_HTML_SANITIZER: InjectionToken<EditorHtmlSanitizer>;
+export declare const EDITOR_HTML_SANITIZER: InjectionToken<EditorHtmlSanitizer>;
+export {};

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

@@ -1,20 +1,22 @@
+import { LucideIcon, LucideIconData } from "@lucide/angular";
 import * as i0 from "@angular/core";
-import { EnvironmentProviders, InjectionToken } from "@angular/core";
+import { InjectionToken, Provider } from "@angular/core";
 export declare class IconComponent {
-  private readonly materialSymbols;
+  private readonly nearest;
+  private readonly registry;
+  /** Lucide kebab name, e.g. `layout-dashboard`. Must be registered with `provideIcons()`. */
   readonly name: import("@angular/core").InputSignal<string>;
   readonly class: import("@angular/core").InputSignal<string>;
-  /** Glyph size in px, or 'inherit' to defer to the surrounding font-size
-   * (lets a CSS token size the glyph — no inline style is emitted). */
+  /** Glyph size in px, or 'inherit' to follow the surrounding font-size (1em).
+   * Writes `--icon-size` on the host; leave unset to use the theme token. */
   readonly size: import("@angular/core").InputSignal<number | "inherit" | null>;
-  readonly fill: import("@angular/core").InputSignal<number>;
-  /** Light strokes + high-emphasis grade at the 48 optical grid — the
-   * system's icon voice. Override per icon only with intent. */
-  readonly weight: import("@angular/core").InputSignal<number>;
-  readonly grade: import("@angular/core").InputSignal<number>;
-  readonly opticalSize: import("@angular/core").InputSignal<number>;
-  protected readonly resolvedSize: import("@angular/core").Signal<number | null>;
-  protected readonly fontVariationSettings: import("@angular/core").Signal<string>;
+  /** Stroke width. Writes `--icon-stroke-width` on the host; unset uses the theme token. */
+  readonly strokeWidth: import("@angular/core").InputSignal<number | null>;
+  /** Accessible name for a functional icon. Without it the icon is decorative and hidden from assistive tech. */
+  readonly label: import("@angular/core").InputSignal<string | null>;
+  protected readonly icon: import("@angular/core").Signal<LucideIconData | undefined>;
+  protected readonly sizeToken: import("@angular/core").Signal<string | null>;
+  protected readonly strokeWidthToken: import("@angular/core").Signal<string | null>;
   protected readonly classes: import("@angular/core").Signal<string>;
   constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
@@ -34,86 +36,69 @@ export declare class IconComponent {
       "required": false;
       "isSignal": true;
     };
-    "fill": {
-      "alias": "fill";
+    "strokeWidth": {
+      "alias": "strokeWidth";
       "required": false;
       "isSignal": true;
     };
-    "weight": {
-      "alias": "weight";
-      "required": false;
-      "isSignal": true;
-    };
-    "grade": {
-      "alias": "grade";
-      "required": false;
-      "isSignal": true;
-    };
-    "opticalSize": {
-      "alias": "opticalSize";
+    "label": {
+      "alias": "label";
       "required": false;
       "isSignal": true;
     };
   }, {}, never, never, true, never>;
 }
-export declare const MATERIAL_SYMBOLS_FONT_ATTR = "data-icon-font";
-export declare const MATERIAL_SYMBOLS_FONT_ID = "material-symbols";
+/** An icon as `provideIcons()` takes it: a Lucide component class or its raw data. */
+type IconInput = LucideIcon | LucideIconData;
 /**
- * Loads BOTH Material Symbols variable families the design system uses:
- * Rounded (the default everywhere) and Sharp (swapped in under
- * `appearance='border-rail'` scopes via the `--icon-font-family` token).
- * Full variable axes are requested so per-icon `fill`/`weight`/`grade`/
- * `opticalSize` inputs keep working.
+ * Register the Lucide icons `<Icon name="...">` may render. Pass the Lucide
+ * components (`LucideHouse`) or their `LucideIconData`; only what you register
+ * ends up in your bundle.
+ *
+ * Works at the application root, in a route's `providers`, and in a
+ * component's `providers`. Every level adds to the levels above it and the
+ * nearest registration wins on a name clash. Keys are the kebab Lucide name
+ * plus its aliases.
+ *
+ * @example
+ * bootstrapApplication(App, { providers: [provideIcons(LucideHouse, LucideSettings)] });
  */
-export declare const MATERIAL_SYMBOLS_FONT_HREF = "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block";
-/** Configuration for {@link provideMaterialSymbols}. */
-export interface MaterialSymbolsConfig {
-  /**
-   * Stylesheet URL to load the Material Symbols font from. Defaults to the
-   * Google Fonts URL ({@link MATERIAL_SYMBOLS_FONT_HREF}). Point this at a
-   * self-hosted stylesheet for offline / CSP / privacy-safe setups.
-   */
-  readonly href?: string;
-}
+export declare function provideIcons(...icons: IconInput[]): Provider;
+/** The icons visible from one injector level: own icons merged over every parent level. */
+type IconSet = ReadonlyMap<string, LucideIconData>;
 /**
- * Presence of this token is what enables {@link IconComponent} to auto-load the
- * font. It is only provided when the app opts in via `provideMaterialSymbols()`;
- * without it, `<Icon>` makes no network request.
+ * What one `provideIcons()` call contributes at its own injector level. Several
+ * calls on the same level add up (multi), so `providers: [provideIcons(a), provideIcons(b)]`
+ * keeps both. Internal: not exported from the entry point.
  */
-export declare const MATERIAL_SYMBOLS_CONFIG: InjectionToken<MaterialSymbolsConfig>;
-export declare class MaterialSymbolsService {
-  private readonly documentRef;
-  private readonly platformId;
-  private readonly config;
-  /**
-   * Token-gated load. No-op unless the app opted in via `provideMaterialSymbols()`
-   * (which provides {@link MATERIAL_SYMBOLS_CONFIG}). Called by `IconComponent`
-   * so rendering an icon never triggers an implicit network request on its own.
-   */
-  ensureLoaded(): void;
+declare const UI_ICON_CONTRIBUTIONS: InjectionToken<readonly IconSet[]>;
+/**
+ * The merged set visible at one injector level. Every `provideIcons()` call also
+ * provides this token with `own + parent`, so a child level never hides an icon
+ * registered above it (route, app root). Nearest wins on a name clash. Internal.
+ */
+declare const UI_ICONS: InjectionToken<IconSet>;
+/**
+ * Root view of the registered icons. The `<Icon>` component resolves from the set
+ * of its nearest injector first, then falls back here, so icons registered with
+ * `provideIcons()` at the application root are always found.
+ *
+ * Also feeds the catalog gallery (`names()`) and de-duplicates the dev mode
+ * warning for unregistered names.
+ */
+export declare class IconRegistry {
+  private readonly rootSet;
+  private readonly warned;
+  /** Look up an icon by its Lucide kebab name or one of its aliases. */
+  resolve(name: string): LucideIconData | undefined;
+  /** Canonical Lucide names of every icon registered at the root, sorted. */
+  names(): string[];
   /**
-   * Explicitly inject the font stylesheet, regardless of whether the config
-   * token is present. Used by integrations that decide to load the font from
-   * their own option surface (e.g. `provideUiTheme({ icons: { materialSymbols: true } })`).
+   * Dev mode only: one `console.warn` per unregistered name. Production logs nothing.
+   * @internal
    */
-  load(config?: MaterialSymbolsConfig): void;
-  static ɵfac: i0.ɵɵFactoryDeclaration<MaterialSymbolsService, never>;
+  ɵwarnUnregistered(name: string): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<IconRegistry, never>;
   static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
-/**
- * Opt in to loading the Material Symbols icon font that `<Icon>` renders with.
- *
- * By default `IconComponent` makes **no** network request — better for privacy,
- * offline, and strict CSP. Add this provider to your bootstrap to fetch the font
- * stylesheet once at startup. Pass `{ href }` to load from a self-hosted source
- * instead of Google Fonts.
- *
- * @example
- * // Google Fonts (default source):
- * bootstrapApplication(App, { providers: [provideMaterialSymbols()] });
- *
- * @example
- * // Self-hosted / offline:
- * provideMaterialSymbols({ href: '/assets/material-symbols.css' });
- */
-export declare function provideMaterialSymbols(config?: MaterialSymbolsConfig): EnvironmentProviders;
+export type { IconInput };

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

@@ -245,4 +245,5 @@ export declare class InputOtpComponent extends InputOtpContextBase implements Co
   }, {
     "valueChange": "valueChange";
   }, ["slots"], ["*"], true, never>;
-}
+}
+export {};

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

@@ -376,4 +376,5 @@ export declare class PillboxComponent extends PillboxContext implements ControlV
     "create": "create";
     "openedChange": "openedChange";
   }, ["options", "createOptions", "emptyOptions"], ["*"], true, never>;
-}
+}
+export {};

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

@@ -133,4 +133,5 @@ export declare class RadioComponent {
       "isSignal": true;
     };
   }, {}, never, ["*"], true, never>;
-}
+}
+export {};

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

@@ -162,4 +162,5 @@ export declare class ResizablePanelGroupComponent extends ResizableGroupContextB
       "isSignal": true;
     };
   }, {}, ["panels", "handles"], ["*"], true, never>;
-}
+}
+export {};

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

@@ -6,7 +6,7 @@ export interface SegmentedControlOption {
   readonly value: string;
   /** Visible text, or the accessible fallback for an icon-only option. */
   readonly label: string;
-  /** Material Symbols glyph name, used by the `icon-text` and `icon` appearances. */
+  /** Lucide icon name (kebab case, registered with `provideIcons()`), used by the `icon-text` and `icon` appearances. */
   readonly icon?: string;
   readonly disabled?: boolean;
   /** Overrides `label` as the accessible name for an icon-only option. */

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

@@ -136,4 +136,5 @@ export declare class SelectComponent extends SelectMaterialBridge implements Aft
 export declare class OptionComponent extends MatOption {
   static ɵfac: i0.ɵɵFactoryDeclaration<OptionComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<OptionComponent, "SelectItem", ["matOption"], {}, {}, never, ["mat-icon", "*"], true, never>;
-}
+}
+export {};

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

@@ -7,6 +7,7 @@ export declare class NavigationService {
   private readonly persistence;
   private readonly router;
   private readonly urlResolver;
+  private readonly location;
   private readonly routerUrl;
   private readonly states;
   private readonly openPanelKeys;
@@ -35,6 +36,13 @@ export declare class NavigationService {
    * state yang ditulis ke query params).
    */
   private releasePanelsAfterNavigation;
+  /**
+   * Until the first navigation commits, `router.url` is still `/`, so a deep link
+   * resolved as home until its lazy route loaded, and the route-aware dockbar then
+   * opened late and shifted the content. The address bar already holds the
+   * target; `NavigationEnd` replaces this guess with the router's own URL.
+   */
+  private initialUrl;
   private urlPath;
   private readRouteContext;
   private optionalString;

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

@@ -2,7 +2,7 @@ import { Signal } from "@angular/core";
 import { IsActiveMatchOptions, Params, QueryParamsHandling, UrlTree } from "@angular/router";
 import { Observable } from "rxjs";
 export type NavigationOrientation = 'vertical' | 'horizontal';
-export type NavigationVerticalType = 'sidebar' | 'dockbar';
+export type NavigationVerticalType = 'sidebar' | 'dockbar' | 'minidock';
 export type NavigationHorizontalType = 'navbar' | 'flyout';
 export type NavigationType = NavigationVerticalType | NavigationHorizontalType;
 export type NavigationCollapseTree = 'stairs' | 'straight';
@@ -14,7 +14,7 @@ export type NavigationFlyoutIconPosition = 'start' | 'end';
 /** Bentuk visual tombol trigger flyout: `button` (pil), `link` (gaya tautan), `plain` (ghost). */
 export type NavigationFlyoutTriggerVariant = 'button' | 'link' | 'plain';
 export type NavigationDockbarMode = 'drawer' | 'sticky';
-/** Icon Material Symbols bawaan ketika route aktif tidak menyediakan icon lain. */
+/** Nama ikon Lucide bawaan ketika route aktif tidak menyediakan icon lain. */
 export declare const NAVIGATION_DOCKBAR_FALLBACK_ICON = "route";
 export type NavigationBadgeCount = number | null | undefined;
 export type NavigationBadgeValueSource = NavigationBadgeCount | Signal<NavigationBadgeCount> | Observable<NavigationBadgeCount> | (() => NavigationBadgeCount);
@@ -137,4 +137,49 @@ export interface NavigationIconContext {
 }
 export declare function normalizeUiNavItems(items: readonly NavigationItem[]): readonly NavigationNormalizedItem[];
 /** Format visual count badge dockbar. Count nol atau invalid tidak dirender. */
-export declare function formatNavigationBadgeCount(value: NavigationBadgeCount): string | null;
+export declare function formatNavigationBadgeCount(value: NavigationBadgeCount): string | null;
+/**
+ * Memadatkan divider: yang di awal, di akhir, dan yang berurutan dibuang. Dari
+ * satu deret divider berurutan, divider pertama tanpa `isHidden` yang dipertahankan
+ * (atau divider pertama bila semuanya punya `isHidden`), supaya pemisah yang selalu
+ * terlihat tidak kalah oleh pemisah yang bisa tersembunyi saat runtime.
+ *
+ * Dipakai dua kali: oleh `toMinidockItems` atas data mentah, dan oleh jalur render
+ * minidock atas item yang sudah dinormalisasi (item tersembunyi sudah hilang).
+ *
+ * @internal
+ */
+export declare function ɵcompactNavigationDividers<T extends {
+  readonly type?: string;
+  readonly isHidden?: unknown;
+}>(items: readonly T[]): T[];
+/**
+ * Melempar `Error` pertama yang ditemukan bila data minidock berisi item di luar
+ * `basic`, `item`, tanpa type, `divider`, dan `spacer`, atau item mana pun dengan
+ * `children` yang tidak kosong. Berjalan atas data mentah, termasuk item yang
+ * `isHidden`, dan tanpa `isDevMode()`: aturannya sama di dev dan production.
+ *
+ * Cukup memeriksa level atas: item apa pun yang punya children sudah ditolak,
+ * jadi item bersarang tidak pernah bisa lolos.
+ *
+ * @internal
+ */
+export declare function ɵassertMinidockItems(items: readonly NavigationItem[]): void;
+/**
+ * Meratakan data navigasi bergroup menjadi data yang selalu valid untuk
+ * `<NavigationMinidock>`:
+ *
+ * - daun (`basic`, `item`, atau tanpa type, tanpa children) dipertahankan;
+ * - `group` dan `mega` di level mana pun diganti batas divider lalu isinya
+ *   diratakan; group yang isinya kosong tidak menghasilkan divider;
+ * - `collapsible`, `collapsable`, `aside`, dan item lain yang punya children
+ *   dibuang sebagai induk, anak anaknya diratakan rekursif;
+ * - divider di awal, di akhir, atau berurutan dipadatkan; `spacer` hanya
+ *   dipertahankan di level atas;
+ * - daun dengan `id` yang sama hanya muncul sekali (kemunculan pertama).
+ *
+ * Daun dan divider yang diangkat ikut tersembunyi bila salah satu induknya
+ * tersembunyi, dan divider pengganti group ikut tersembunyi bersama group itu. Daun dikembalikan
+ * sebagai objek yang sama kecuali `isHidden` nya perlu digabung. Tidak pernah throw.
+ */
+export declare function toMinidockItems(items: readonly NavigationItem[]): NavigationItem[];