@ojiepermana/angular-component 22.0.43 → 22.0.45

package/fesm2022/ojiepermana-angular-component-toggle-group.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, input, model, numberAttribute, inject, ElementRef, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Directive, input, model, numberAttribute, inject, ElementRef, signal, computed, forwardRef, Component } from '@angular/core';
 import { toggleVariants } from '@ojiepermana/angular-component/toggle';
 import { cn } from '@ojiepermana/angular-component/utils';
 
@@ -23,10 +23,10 @@ const connectedItemClasses = {
     ].join(' '),
 };
 class ToggleGroupContextBase {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ToggleGroupContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.3", type: ToggleGroupContextBase, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ToggleGroupContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: ToggleGroupContextBase, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ToggleGroupContextBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ToggleGroupContextBase, decorators: [{
             type: Directive
         }] });
 class ToggleGroupComponent extends ToggleGroupContextBase {
@@ -117,7 +117,9 @@ class ToggleGroupComponent extends ToggleGroupContextBase {
             return;
         this.focusedValue.set(value);
         if (this.type() === 'multiple') {
-            this.values.update((current) => current.includes(value) ? current.filter((itemValue) => itemValue !== value) : [...current, value]);
+            this.values.update((current) => current.includes(value)
+                ? current.filter((itemValue) => itemValue !== value)
+                : [...current, value]);
             return;
         }
         this.value.set(this.value() === value ? null : value);
@@ -173,15 +175,18 @@ class ToggleGroupComponent extends ToggleGroupContextBase {
     bumpRegistrationVersion() {
         this.registrationVersion.update((version) => version + 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ToggleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ToggleGroupComponent, isStandalone: true, selector: "ToggleGroup", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { properties: { "class": "classes()", "attr.role": "\"group\"", "attr.dir": "dir() ?? null", "attr.aria-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-orientation": "orientation()", "attr.data-slot": "\"toggle-group\"", "attr.data-type": "type()" } }, providers: [{ provide: ToggleGroupContextBase, useExisting: forwardRef(() => ToggleGroupComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ToggleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ToggleGroupComponent, isStandalone: true, selector: "ToggleGroup", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange" }, host: { properties: { "class": "classes()", "attr.role": "\"group\"", "attr.dir": "dir() ?? null", "attr.aria-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-orientation": "orientation()", "attr.data-slot": "\"toggle-group\"", "attr.data-type": "type()" } }, providers: [
+            { provide: ToggleGroupContextBase, useExisting: forwardRef(() => ToggleGroupComponent) },
+        ], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ToggleGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ToggleGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ToggleGroup',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: ToggleGroupContextBase, useExisting: forwardRef(() => ToggleGroupComponent) }],
+                    providers: [
+                        { provide: ToggleGroupContextBase, useExisting: forwardRef(() => ToggleGroupComponent) },
+                    ],
                     host: {
                         '[class]': 'classes()',
                         '[attr.role]': '"group"',
@@ -243,10 +248,10 @@ class ToggleGroupItemDirective {
         event.preventDefault();
         this.ctx.focusLast();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ToggleGroupItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: ToggleGroupItemDirective, isStandalone: true, selector: "button[ToggleGroupItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()", "focus": "onFocus()", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowLeft": "onHorizontalArrow($any($event), -1)", "keydown.arrowRight": "onHorizontalArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.end": "onEnd($any($event))", "keydown.home": "onHome($any($event))" }, properties: { "class": "classes()", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.aria-pressed": "selected()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-orientation": "ctx.groupOrientation()", "attr.data-size": "ctx.groupSize()", "attr.data-slot": "\"toggle-group-item\"", "attr.data-state": "selected() ? \"on\" : \"off\"", "attr.data-variant": "ctx.groupVariant()", "attr.tabindex": "ctx.tabindexFor(value(), isDisabled())", "disabled": "isDisabled() || null" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ToggleGroupItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: ToggleGroupItemDirective, isStandalone: true, selector: "button[ToggleGroupItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()", "focus": "onFocus()", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowLeft": "onHorizontalArrow($any($event), -1)", "keydown.arrowRight": "onHorizontalArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.end": "onEnd($any($event))", "keydown.home": "onHome($any($event))" }, properties: { "class": "classes()", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "attr.aria-pressed": "selected()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-orientation": "ctx.groupOrientation()", "attr.data-size": "ctx.groupSize()", "attr.data-slot": "\"toggle-group-item\"", "attr.data-state": "selected() ? \"on\" : \"off\"", "attr.data-variant": "ctx.groupVariant()", "attr.tabindex": "ctx.tabindexFor(value(), isDisabled())", "disabled": "isDisabled() || null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ToggleGroupItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ToggleGroupItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[ToggleGroupItem]',

package/fesm2022/ojiepermana-angular-component-toggle.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { model, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { model, input, computed, Component } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 import { cva } from 'class-variance-authority';
 
@@ -51,14 +51,13 @@ class ToggleComponent {
         }
         this.pressed.update((pressed) => !pressed);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: ToggleComponent, isStandalone: true, selector: "button[Toggle]", inputs: { pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange" }, host: { attributes: { "type": "button" }, listeners: { "click": "toggle()" }, properties: { "class": "classes()", "attr.aria-pressed": "pressed()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-size": "size()", "attr.data-state": "pressed() ? \"on\" : \"off\"", "attr.data-variant": "variant()", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: ToggleComponent, isStandalone: true, selector: "button[Toggle]", inputs: { pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressedChange" }, host: { attributes: { "type": "button" }, listeners: { "click": "toggle()" }, properties: { "class": "classes()", "attr.aria-pressed": "pressed()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-size": "size()", "attr.data-state": "pressed() ? \"on\" : \"off\"", "attr.data-variant": "variant()", "disabled": "disabled() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'button[Toggle]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         type: 'button',

package/fesm2022/ojiepermana-angular-component-tooltip.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, forwardRef, ChangeDetectionStrategy, Component, inject, TemplateRef, computed, Directive, ViewContainerRef, ElementRef, DestroyRef, output, signal, effect } from '@angular/core';
+import { InjectionToken, input, forwardRef, Component, inject, TemplateRef, computed, Directive, ViewContainerRef, ElementRef, DestroyRef, output, signal, effect } from '@angular/core';
 import { radiusBaseValue, densityBaseValue, connectedPositionFor, oppositeSide, uniqueId, overlayDismissals } from '@ojiepermana/angular-component/utils';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
@@ -17,14 +17,13 @@ class TooltipComponent {
     ...(ngDevMode ? [{ debugName: "openDelay" }] : /* istanbul ignore next */ []));
     closeDelay = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", type: TooltipComponent, isStandalone: true, selector: "Tooltip", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, providers: [{ provide: TOOLTIP_DEFAULTS, useExisting: forwardRef(() => TooltipComponent) }], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TooltipComponent, isStandalone: true, selector: "Tooltip", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, providers: [{ provide: TOOLTIP_DEFAULTS, useExisting: forwardRef(() => TooltipComponent) }], ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Tooltip',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: TOOLTIP_DEFAULTS, useExisting: forwardRef(() => TooltipComponent) }],
                     host: {
                         class: 'contents',
@@ -50,10 +49,10 @@ class TooltipContentDirective {
     ...(ngDevMode ? [{ debugName: "radiusBase" }] : /* istanbul ignore next */ []));
     densityBase = computed(() => densityBaseValue(this.density()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "densityBase" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: TooltipContentDirective, isStandalone: true, selector: "ng-template[TooltipContent]", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, exportAs: ["TooltipContent"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TooltipContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: TooltipContentDirective, isStandalone: true, selector: "ng-template[TooltipContent]", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--radius-base": "radiusBase()", "style.--spacing-base": "densityBase()" } }, exportAs: ["TooltipContent"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TooltipContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[TooltipContent]',
@@ -272,10 +271,10 @@ class TooltipTriggerDirective {
             this.closeTimeoutId = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: TooltipTriggerDirective, isStandalone: true, selector: "[TooltipTrigger]", inputs: { TooltipTrigger: { classPropertyName: "TooltipTrigger", publicName: "TooltipTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "pointerenter": "handlePointerEnter()", "pointerleave": "handlePointerLeave($event)", "focusin": "handleFocusIn()", "focusout": "handleFocusOut($event)", "keydown.escape": "close()" }, properties: { "attr.aria-describedby": "contentId()", "attr.data-state": "isOpen() ? \"open\" : \"closed\"" } }, exportAs: ["TooltipTrigger"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: TooltipTriggerDirective, isStandalone: true, selector: "[TooltipTrigger]", inputs: { TooltipTrigger: { classPropertyName: "TooltipTrigger", publicName: "TooltipTrigger", isSignal: true, isRequired: true, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "pointerenter": "handlePointerEnter()", "pointerleave": "handlePointerLeave($event)", "focusin": "handleFocusIn()", "focusout": "handleFocusOut($event)", "keydown.escape": "close()" }, properties: { "attr.aria-describedby": "contentId()", "attr.data-state": "isOpen() ? \"open\" : \"closed\"" } }, exportAs: ["TooltipTrigger"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TooltipTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[TooltipTrigger]',
@@ -322,13 +321,12 @@ const PANEL_CLASSES = [
 class TooltipTextComponent {
     text = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.3", type: TooltipTextComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `{{ text() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TooltipTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: TooltipTextComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `{{ text() }}`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TooltipTextComponent, decorators: [{
             type: Component,
             args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `{{ text() }}`,
                 }]
         }] });
@@ -377,7 +375,10 @@ class TooltipDirective {
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.el)
-            .withPositions([connectedPositionFor(side, 'center', 4), connectedPositionFor(oppositeSide(side), 'center', 4)])
+            .withPositions([
+            connectedPositionFor(side, 'center', 4),
+            connectedPositionFor(oppositeSide(side), 'center', 4),
+        ])
             .withPush(false)
             .withFlexibleDimensions(false);
         this.overlayRef = this.overlay.create({
@@ -424,10 +425,10 @@ class TooltipDirective {
             this.hideTimeoutId = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.3", type: TooltipDirective, isStandalone: true, selector: "[Tooltip]", inputs: { Tooltip: { classPropertyName: "Tooltip", publicName: "Tooltip", isSignal: true, isRequired: false, transformFunction: null }, TooltipPosition: { classPropertyName: "TooltipPosition", publicName: "TooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, TooltipDisabled: { classPropertyName: "TooltipDisabled", publicName: "TooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, TooltipShowDelay: { classPropertyName: "TooltipShowDelay", publicName: "TooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, TooltipHideDelay: { classPropertyName: "TooltipHideDelay", publicName: "TooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "scheduleShow()", "pointerleave": "scheduleHide()", "focusin": "scheduleShow()", "focusout": "scheduleHide()", "keydown.escape": "hide()" } }, exportAs: ["Tooltip"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: TooltipDirective, isStandalone: true, selector: "[Tooltip]", inputs: { Tooltip: { classPropertyName: "Tooltip", publicName: "Tooltip", isSignal: true, isRequired: false, transformFunction: null }, TooltipPosition: { classPropertyName: "TooltipPosition", publicName: "TooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, TooltipDisabled: { classPropertyName: "TooltipDisabled", publicName: "TooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, TooltipShowDelay: { classPropertyName: "TooltipShowDelay", publicName: "TooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, TooltipHideDelay: { classPropertyName: "TooltipHideDelay", publicName: "TooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "scheduleShow()", "pointerleave": "scheduleHide()", "focusin": "scheduleShow()", "focusout": "scheduleHide()", "keydown.escape": "hide()" } }, exportAs: ["Tooltip"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[Tooltip]',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-component",
-  "version": "22.0.43",
+  "version": "22.0.45",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -21,6 +21,15 @@
   "peerDependenciesMeta": {
     "@angular/material": {
       "optional": true
+    },
+    "@angular/forms": {
+      "optional": true
+    },
+    "@angular/platform-browser": {
+      "optional": true
+    },
+    "@angular/router": {
+      "optional": true
     }
   },
   "dependencies": {

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

@@ -3,6 +3,15 @@ import { ButtonVariant, ButtonSize } from '@ojiepermana/angular-component/button
 
 type AlertDialogSize = 'default' | 'sm';
 
+/**
+ * Confirmation dialog with `role="alertdialog"`.
+ *
+ * For the accessible name/description to wire up automatically, project the
+ * matching `AlertDialogTitle` / `AlertDialogDescription` parts (they register
+ * their ids with this component). Plain `DialogTitle` / `DialogDescription` will
+ * not auto-wire here — pass `aria-labelledby` / `aria-describedby` explicitly if
+ * you use custom markup.
+ */
 declare class AlertDialogComponent {
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly closeOnEscape: _angular_core.InputSignal<boolean>;
@@ -11,17 +20,33 @@ declare class AlertDialogComponent {
     readonly closeButtonLabel: _angular_core.InputSignal<string>;
     readonly labelledBy: _angular_core.InputSignal<string | null>;
     readonly describedBy: _angular_core.InputSignal<string | null>;
+    /** ARIA role passed to the underlying dialog surface. `'alertdialog'` by default. */
+    readonly role: _angular_core.InputSignal<string>;
     readonly class: _angular_core.InputSignal<string>;
     readonly radius: _angular_core.InputSignal<"sm" | "inherit" | "none" | "md" | "lg" | "xl" | "full">;
     readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     readonly openedChange: _angular_core.OutputEmitterRef<boolean>;
     private readonly contentSize;
+    private readonly registeredTitleId;
+    private readonly registeredDescriptionId;
     readonly resolvedSize: _angular_core.Signal<AlertDialogSize>;
     protected readonly surfaceClasses: _angular_core.Signal<string>;
+    /** Explicit `aria-labelledby` wins; otherwise a projected `AlertDialogTitle` supplies the id. */
+    protected readonly resolvedLabelledBy: _angular_core.Signal<string | null>;
+    /** Explicit `aria-describedby` wins; otherwise a projected `AlertDialogDescription` supplies the id. */
+    protected readonly resolvedDescribedBy: _angular_core.Signal<string | null>;
     setContentSize(size: AlertDialogSize): void;
+    /** Called by a projected `AlertDialogTitle` so default usage has an accessible name (AXE-safe). */
+    registerTitleId(id: string | null): void;
+    /** Cleared by an `AlertDialogTitle` on destroy so a reopened alert never points at a stale id. */
+    unregisterTitleId(id: string): void;
+    /** Called by a projected `AlertDialogDescription`. */
+    registerDescriptionId(id: string | null): void;
+    /** Cleared by an `AlertDialogDescription` on destroy. */
+    unregisterDescriptionId(id: string): void;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogComponent, "AlertDialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogComponent, "AlertDialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
 }
 
 declare class AlertDialogContentComponent {
@@ -40,16 +65,30 @@ declare class AlertDialogHeaderComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogHeaderComponent, "AlertDialogHeader", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class AlertDialogTitleComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    readonly id: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
+    private readonly autoId;
+    private readonly alertDialog;
+    /** The id rendered on the element, used by the parent alert dialog for aria-labelledby. */
+    readonly resolvedId: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogTitleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogTitleComponent, "AlertDialogTitle, h2[AlertDialogTitle]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogTitleComponent, "AlertDialogTitle, h2[AlertDialogTitle]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class AlertDialogDescriptionComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    readonly id: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
+    private readonly autoId;
+    private readonly alertDialog;
+    /** The id rendered on the element, used by the parent alert dialog for aria-describedby. */
+    readonly resolvedId: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertDialogDescriptionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogDescriptionComponent, "AlertDialogDescription, p[AlertDialogDescription]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertDialogDescriptionComponent, "AlertDialogDescription, p[AlertDialogDescription]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class AlertDialogMediaComponent {
     readonly class: _angular_core.InputSignal<string>;

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

@@ -30,10 +30,26 @@ declare class DialogComponent {
     readonly closeButtonLabel: _angular_core.InputSignal<string>;
     readonly labelledBy: _angular_core.InputSignal<string | null>;
     readonly describedBy: _angular_core.InputSignal<string | null>;
+    /** ARIA role for the surface. `'dialog'` by default; `AlertDialog` sets `'alertdialog'`. */
+    readonly role: _angular_core.InputSignal<string>;
     readonly class: _angular_core.InputSignal<string>;
     readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
     readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     readonly openedChange: _angular_core.OutputEmitterRef<boolean>;
+    private readonly registeredTitleId;
+    private readonly registeredDescriptionId;
+    /** Explicit `aria-labelledby` wins; otherwise a projected `DialogTitle` supplies the id. */
+    protected readonly resolvedLabelledBy: _angular_core.Signal<string | null>;
+    /** Explicit `aria-describedby` wins; otherwise a projected `DialogDescription` supplies the id. */
+    protected readonly resolvedDescribedBy: _angular_core.Signal<string | null>;
+    /** Called by a projected `DialogTitle` so default usage has an accessible name (AXE-safe). */
+    registerTitleId(id: string | null): void;
+    /** Cleared by a `DialogTitle` on destroy so a closed/reopened dialog never points at a stale id. */
+    unregisterTitleId(id: string): void;
+    /** Called by a projected `DialogDescription`. */
+    registerDescriptionId(id: string | null): void;
+    /** Cleared by a `DialogDescription` on destroy. */
+    unregisterDescriptionId(id: string): void;
     private readonly tpl;
     private overlayRef;
     private focusTrap;
@@ -47,7 +63,7 @@ declare class DialogComponent {
     private requestClose;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "Dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogComponent, "Dialog", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
 }
 
 declare class DialogCloseDirective {
@@ -64,16 +80,30 @@ declare class DialogHeaderComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogHeaderComponent, "DialogHeader", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class DialogTitleComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    readonly id: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
+    private readonly autoId;
+    private readonly dialog;
+    /** The id rendered on the element, used by the parent dialog for aria-labelledby. */
+    readonly resolvedId: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogTitleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogTitleComponent, "DialogTitle, h2[DialogTitle]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogTitleComponent, "DialogTitle, h2[DialogTitle]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class DialogDescriptionComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    readonly id: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
+    private readonly autoId;
+    private readonly dialog;
+    /** The id rendered on the element, used by the parent dialog for aria-describedby. */
+    readonly resolvedId: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogDescriptionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogDescriptionComponent, "DialogDescription, p[DialogDescription]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogDescriptionComponent, "DialogDescription, p[DialogDescription]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class DialogContentComponent {
     readonly class: _angular_core.InputSignal<string>;

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { InjectionToken, EnvironmentProviders } from '@angular/core';
 
 declare class IconComponent {
     private readonly materialSymbols;
@@ -20,12 +21,58 @@ declare class IconComponent {
 declare const MATERIAL_SYMBOLS_FONT_ATTR = "data-icon-font";
 declare const MATERIAL_SYMBOLS_FONT_ID = "material-symbols-outlined";
 declare const MATERIAL_SYMBOLS_FONT_HREF = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0";
+/** Configuration for {@link provideMaterialSymbols}. */
+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;
+}
+/**
+ * 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.
+ */
+declare const MATERIAL_SYMBOLS_CONFIG: InjectionToken<MaterialSymbolsConfig>;
 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;
+    /**
+     * 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 } })`).
+     */
+    load(config?: MaterialSymbolsConfig): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MaterialSymbolsService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<MaterialSymbolsService>;
 }
 
-export { IconComponent, MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_HREF, MATERIAL_SYMBOLS_FONT_ID, MaterialSymbolsService };
+/**
+ * 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' });
+ */
+declare function provideMaterialSymbols(config?: MaterialSymbolsConfig): EnvironmentProviders;
+
+export { IconComponent, MATERIAL_SYMBOLS_CONFIG, MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_HREF, MATERIAL_SYMBOLS_FONT_ID, MaterialSymbolsService, provideMaterialSymbols };
+export type { MaterialSymbolsConfig };

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

@@ -25,10 +25,18 @@ declare class SheetComponent {
     readonly closeButtonLabel: _angular_core.InputSignal<string>;
     readonly labelledBy: _angular_core.InputSignal<string | null>;
     readonly describedBy: _angular_core.InputSignal<string | null>;
+    /** ARIA role for the surface. Defaults to `'dialog'`. */
+    readonly role: _angular_core.InputSignal<string>;
     readonly class: _angular_core.InputSignal<string>;
     readonly radius: _angular_core.InputSignal<"inherit" | "none" | "sm" | "md" | "lg" | "xl" | "full">;
     readonly density: _angular_core.InputSignal<"inherit" | "compact" | "normal" | "relaxed" | "spacious">;
     readonly openedChange: _angular_core.OutputEmitterRef<boolean>;
+    private readonly registeredTitleId;
+    private readonly registeredDescriptionId;
+    /** Explicit `aria-labelledby` wins; otherwise a projected `SheetTitle` supplies the id. */
+    protected readonly resolvedLabelledBy: _angular_core.Signal<string | null>;
+    /** Explicit `aria-describedby` wins; otherwise a projected `SheetDescription` supplies the id. */
+    protected readonly resolvedDescribedBy: _angular_core.Signal<string | null>;
     private readonly tpl;
     private overlayRef;
     private focusTrap;
@@ -42,9 +50,17 @@ declare class SheetComponent {
     private attach;
     private detach;
     close(): void;
+    /** Called by a projected `SheetTitle` so default usage has an accessible name (AXE-safe). */
+    registerTitleId(id: string | null): void;
+    /** Cleared by a `SheetTitle` on destroy so a closed/reopened sheet never points at a stale id. */
+    unregisterTitleId(id: string): void;
+    /** Called by a projected `SheetDescription`. */
+    registerDescriptionId(id: string | null): void;
+    /** Cleared by a `SheetDescription` on destroy. */
+    unregisterDescriptionId(id: string): void;
     private isDrawerHost;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SheetComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetComponent, "Sheet, Drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetComponent, "Sheet, Drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "describedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "openedChange": "openedChange"; }, never, ["*"], true, never>;
 }
 
 declare class SheetHeaderComponent {
@@ -54,16 +70,30 @@ declare class SheetHeaderComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetHeaderComponent, "SheetHeader, DrawerHeader", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class SheetTitleComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    readonly id: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
+    private readonly autoId;
+    private readonly sheet;
+    /** The id rendered on the element, used by the parent sheet for aria-labelledby. */
+    readonly resolvedId: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SheetTitleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetTitleComponent, "SheetTitle, DrawerTitle, h2[SheetTitle], h2[DrawerTitle]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetTitleComponent, "SheetTitle, DrawerTitle, h2[SheetTitle], h2[DrawerTitle]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class SheetDescriptionComponent {
+    /** Explicit id override; when omitted a document-unique id is generated. */
+    readonly id: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
+    private readonly autoId;
+    private readonly sheet;
+    /** The id rendered on the element, used by the parent sheet for aria-describedby. */
+    readonly resolvedId: _angular_core.Signal<string>;
     protected readonly classes: _angular_core.Signal<string>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SheetDescriptionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetDescriptionComponent, "SheetDescription, DrawerDescription, p[SheetDescription], p[DrawerDescription]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SheetDescriptionComponent, "SheetDescription, DrawerDescription, p[SheetDescription], p[DrawerDescription]", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class SheetContentComponent {
     readonly class: _angular_core.InputSignal<string>;