@ojiepermana/angular 22.2.1 → 22.2.2

package/navigation/README.md

@@ -64,7 +64,7 @@ Type dipilih lewat komponen anak deklaratif (`NavigationSidebar`, `NavigationDoc
   `NavigationItem.badge.source` or route `data.navigationBadge`.
 - `ariaLabel` overrides the host navigation label and defaults to `Primary navigation`.
 - `label` on `NavigationFlyout` sets the single trigger label and defaults to `Menu`.
-- `icon` on `NavigationFlyout` renders a Material Symbols icon on the trigger; `icon-position` (`start`/`end`) sets its placement and `icon-only` hides the label visually while keeping it as the accessible name (compact mode is always icon-only and falls back to the `menu` icon).
+- `icon` on `NavigationFlyout` renders a Lucide icon on the trigger (the name must be registered with `provideIcons()`); `icon-position` (`start`/`end`) sets its placement and `icon-only` hides the label visually while keeping it as the accessible name (compact mode is always icon-only and falls back to the `menu` icon).
 - `nav-position` on `NavigationNavbar`/`NavigationFlyout` accepts `top` (default) or `bottom`. With `bottom`, the navbar grid panel opens upward with squared bottom corners, and the flyout panel anchors to the container's bottom edge with the tab row docked at the bottom — seamless for bars placed below the content.
 - `nav-appearance` on `NavigationNavbar`/`NavigationFlyout` accepts `flat` or `border-rail` (same vocabulary as the layout's `layout-appearance`). `border-rail` squares the panel (no rounding), frames entry icons with dimmed blueprint-style rail lines plus dashed center cross lines (instead of rounded boxes), renders the nested-collapse rail dashed, and replaces hover/active backgrounds with primary-colored text. `flat` keeps the current visuals.
 - The `navbar` type renders root items inline immediately; clicking a group (hover does not open it) opens a full-width grid panel below the bar with the same flyout-style entries, responsive columns, and nested collapse. Root group triggers intentionally render without a chevron; open state remains available through the trigger styling and `aria-expanded`.
@@ -377,7 +377,7 @@ Any other navigation id, such as `erp-navbar`, only keeps its state in memory fo
 
 ## Icons
 
-Saat `item.icon` tersedia, `nav` akan merender Material Symbols secara default melalui `@ojiepermana/angular/component/icon`. Jalankan `provideUiTheme()` untuk preload global, atau biarkan `IconComponent` melakukan lazy-load saat icon pertama dipakai.
+Saat `item.icon` tersedia, `nav` merender ikon Lucide secara default melalui `@ojiepermana/angular/component/icon`. `item.icon` adalah nama kebab Lucide (misalnya `layout-dashboard`) dan harus didaftarkan lewat `provideIcons()` di aplikasi; ikon tetap milik komponen navigasi (toggle header, chevron, tombol tutup dockbar, ikon rute fallback `route`) didaftarkan oleh komponennya sendiri. Nama yang tidak terdaftar tidak merender ikon dan menulis satu warning di dev mode.
 
 ```html
 <Navigation [data]="items">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular",
-  "version": "22.2.1",
+  "version": "22.2.2",
   "description": "Accessible, tree-shakable Angular 22 design system from ojiepermana: UI components, charts, navigation shells, theme tokens, and an OpenAPI SDK generator.",
   "license": "MIT",
   "keywords": [
@@ -43,6 +43,7 @@
     "@angular/material": ">=22.2.0 <23.0.0",
     "@angular/platform-browser": ">=22.2.0 <23.0.0",
     "@angular/router": ">=22.2.0 <23.0.0",
+    "@lucide/angular": ">=1.61.0 <2.0.0",
     "rxjs": ">=7.8.0 <8.0.0"
   },
   "peerDependenciesMeta": {
@@ -502,5 +503,5 @@
   "module": "fesm2022/ojiepermana-angular.mjs",
   "typings": "types/ojiepermana-angular.d.ts",
   "type": "module",
-  "gitHead": "1d9e13ff98804f60ee81765a22a6b5a814d0f374"
+  "gitHead": "915ddb2641dfdf3c3f256276f3c2eafd5ab31e64"
 }

package/theme/README.md

@@ -107,17 +107,11 @@ every accent and neutral palette, so switching needs no runtime CSS loading. The
 lightweight `theme.css` ships base only — import the axis files you need on top of
 it (or use `theme-full.css`) to enable runtime switching.
 
-### Material Symbols icons (opt-in)
+### Icons
 
-`provideUiTheme()` makes **no external network request by default**. To preload the
-Material Symbols font from Google Fonts:
-
-```ts
-provideUiTheme({ icons: { materialSymbols: true } });
-```
-
-Leave it off (the default) for privacy / offline / strict CSP, and self-host the
-font in your own stylesheet if you need it.
+`provideUiTheme()` makes **no external network request** and loads no icon font. Icons are
+Lucide SVGs registered with `provideIcons()` from `{{packageName}}/component/icon`; the theme
+only supplies the `--icon-size` and `--icon-stroke-width` tokens that `<Icon>` reads.
 
 ## Support and security
 

package/theme/page/README.md

@@ -76,6 +76,8 @@ Saat `Page` dirender di dalam layout `empty`, sebuah tombol icon-only tanpa bord
 
 Tombol hanya muncul ketika layout aktif `empty` dan nav target punya data. Di layout lain (`vertical`/`horizontal`/`fluid`) tombol tidak dirender karena navigasi utama sudah terlihat.
 
+Saat `LayoutWrapperDefault` memakai `nav-type="desktop"` dan layout `empty`, data navigasi diterbitkan ke `main` untuk launcher `Page`, bukan ke titlebar `Shell`. Hanya launcher di kanan `PageHeader` (atau di atas konten bila tanpa header) yang tampil. Item mini dock dan navigasinya tetap tersedia.
+
 | Input          | Type      | Default             | Keterangan                                                   |
 | -------------- | --------- | ------------------- | ------------------------------------------------------------ |
 | `appsLauncher` | `boolean` | `true`              | Aktif/nonaktifkan apps-launcher pada layout `empty`.         |

package/theme/shell/README.md

@@ -245,7 +245,11 @@ window-width popover:
 - Windows and Linux — before consumer `[shellBarStart]` content, at the far left
   opposite the window controls.
 
-The trigger is rendered only when desktop navigation data exists. It keeps a real
+The trigger is rendered only when desktop navigation data exists. On an `empty`
+layout, `LayoutWrapperDefault` publishes that data under `main` for the `Page`
+launcher instead, so the titlebar does not add a duplicate button. Other layouts
+keep their titlebar navigation, and minidock items remain independent.
+The trigger keeps a real
 button, `aria-haspopup="menu"`, an explicit accessible name, visible keyboard
 focus, and the established semantic shell/navigation tokens. Its surface stays
 transparent, including hover and open states, while the icon inherits the exact

package/theme/styles/README.md

@@ -33,19 +33,43 @@ export const appConfig = {
 - `brand` mem-bootstrap `ThemeBrandService`; set `--brand` / utility `bg-brand` dan preset
   accent `theme-color='brand'`. Menerima string HSL triplet atau `{ color, foreground }`.
   Bisa diubah runtime via `setBrand()`, persist di storage.
-- `icons.materialSymbols` mengontrol preload stylesheet Material Symbols pada bootstrap aplikasi.
 - Pilihan yang dipersist (`theme-color` / `theme-neutral` / `theme-radius` / `theme-space` /
   `theme-brand`) menang atas default.
 
 ## Default Behavior
 
-- Material Symbols **tidak** di-preload secara default (opt-in). Tanpa konfigurasi,
-  `provideUiTheme()` tidak melakukan request jaringan eksternal apa pun — ramah privasi,
-  offline, dan CSP.
-- Untuk mengaktifkan preload font dari Google Fonts, set `icons.materialSymbols` ke `true`,
-  atau self-host font Material Symbols dan `@import` sendiri di stylesheet Anda.
-- Jika memakai `@ojiepermana/angular/component/icon` tanpa provider tema, aktifkan
-  `provideMaterialSymbols()` dari entrypoint icon atau self-host stylesheet font sendiri.
+- `provideUiTheme()` tidak melakukan request jaringan eksternal apa pun dan tidak memuat font ikon:
+  ikon adalah SVG Lucide dari peer `@lucide/angular`, didaftarkan lewat `provideIcons()` dari
+  `@ojiepermana/angular/component/icon`. Tema hanya menyediakan token `--icon-size` (default `1.5rem`)
+  dan `--icon-stroke-width` (default `2`) yang dibaca komponen `<Icon>`.
+- Opsi `icons` di `provideUiTheme()` (`icons.materialSymbols`) sudah dihapus bersama Material Symbols;
+  hapus opsi itu dari konfigurasi Anda.
+
+## Font
+
+Token `--theme-font-sans` (`'Inter', …`) dan `--theme-font-mono` (`'JetBrains Mono', …`) hanya
+menamai font; tema tidak memuat file font apa pun dan paket tidak membawa biner font. Tanpa langkah
+di bawah, teks memakai font yang kebetulan terpasang di mesin pengunjung.
+
+Untuk memuatnya, impor lembar opsional setelah tema dan sajikan file woff2 dari origin Anda sendiri:
+
+```css
+@import '@ojiepermana/angular/theme/theme.css';
+@import '@ojiepermana/angular/theme/styles/css/fonts.css';
+```
+
+- `fonts.css` mendeklarasikan `@font-face` untuk `/fonts/inter/InterVariable.woff2` (dan varian
+  italic) serta `/fonts/jetbrains-mono/JetBrainsMono-{Regular,Medium,Bold}.woff2`, semuanya
+  `font-display: swap`. Ambil file dari rilis resmi [Inter](https://github.com/rsms/inter) dan
+  [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono) (keduanya SIL OFL 1.1). Path lain?
+  Salin `fonts.css` dan ubah `url()`-nya.
+- Lembar itu juga menambahkan face `Inter Fallback` (Arial lokal dengan metrik Inter) ke
+  `--theme-font-sans`, sehingga pergantian ke Inter tidak menggeser layout.
+- Preload hanya file Inter tegak:
+  `<link rel="preload" href="/fonts/inter/InterVariable.woff2" as="font" type="font/woff2" crossorigin>`.
+  Browser hanya mengunduh face lain (italic, mono 500/700) saat halaman benar-benar memakainya.
+- Showcase memakai persis susunan ini (`apps/showcase/public/fonts/`), dan CSP `font-src 'self'`
+  sudah mengizinkannya.
 
 ## Token Semantik Status
 

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

@@ -91,6 +91,19 @@
     }
   }
 
+  /* Vestibular safety for every component, including the ones without their
+   * own motion-reduce variant: motion collapses to an instant state change. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
   @media (pointer: coarse) {
     :where(
       button,
@@ -107,15 +120,6 @@
 }
 
 @layer components {
-  /* Icon family per appearance: Material Symbols Rounded is the default
-   * (IconComponent's own fallback); any border-rail scope — the layout axis
-   * (data-layout-appearance) or a navigation type-style (data-type-style) —
-   * swaps the inherited token to Sharp so every <Icon> inside follows. */
-  [data-layout-appearance='border-rail'],
-  [data-type-style='border-rail'] {
-    --icon-font-family: 'Material Symbols Sharp';
-  }
-
   .nav-text {
     font-family: var(--nav-font-family, var(--font-sans));
     font-size: var(--nav-text-size, var(--text-base));

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

@@ -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-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 };