@ojiepermana/angular-component 22.0.44 → 22.0.46

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { input, booleanAttribute, computed, Component, inject } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 
 const TIMELINE_BASE = [
@@ -53,16 +53,17 @@ class TimelineComponent {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(TIMELINE_BASE, timelineSizeClasses[this.size()], this.horizontal() ? 'flex min-w-0 items-start gap-[var(--timeline-item-gap)] overflow-x-auto pb-1' : 'grid', this.class()), /* @ts-ignore */
+    classes = computed(() => cn(TIMELINE_BASE, timelineSizeClasses[this.size()], this.horizontal()
+        ? 'flex min-w-0 items-start gap-[var(--timeline-item-gap)] overflow-x-auto pb-1'
+        : 'grid', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineComponent, isStandalone: true, selector: "Timeline", inputs: { horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline\"", "attr.data-orientation": "horizontal() ? \"horizontal\" : \"vertical\"", "attr.data-align": "align()", "attr.data-size": "size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineComponent, isStandalone: true, selector: "Timeline", inputs: { horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline\"", "attr.data-orientation": "horizontal() ? \"horizontal\" : \"vertical\"", "attr.data-align": "align()", "attr.data-size": "size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Timeline',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"timeline"',
@@ -108,13 +109,12 @@ class TimelineItemComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineItemComponent, isStandalone: true, selector: "TimelineItem", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-item\"", "attr.data-orientation": "orientation()", "attr.data-align": "resolvedAlign()", "attr.data-size": "resolvedSize()", "attr.data-status": "status() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineItemComponent, isStandalone: true, selector: "TimelineItem", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", 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 } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-item\"", "attr.data-orientation": "orientation()", "attr.data-align": "resolvedAlign()", "attr.data-size": "resolvedSize()", "attr.data-status": "status() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'TimelineItem',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"timeline-item"',
@@ -134,6 +134,7 @@ class TimelineIndicatorComponent {
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     color = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     resolvedStatus = computed(() => this.status() ?? this.item?.status() ?? 'incomplete', /* @ts-ignore */
@@ -144,20 +145,25 @@ class TimelineIndicatorComponent {
             ? 'bg-background text-muted-foreground'
             : [
                 'size-[var(--timeline-indicator-size)] rounded-full border text-xs font-medium shadow-sm',
-                color ? timelineIndicatorColorClasses[color] : timelineIndicatorStatusClasses[this.resolvedStatus()],
+                color
+                    ? timelineIndicatorColorClasses[color]
+                    : timelineIndicatorStatusClasses[this.resolvedStatus()],
             ].join(' '), this.class());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineIndicatorComponent, isStandalone: true, selector: "TimelineIndicator", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-indicator\"", "attr.data-variant": "variant()", "attr.data-status": "resolvedStatus()", "attr.data-color": "color() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineIndicatorComponent, isStandalone: true, selector: "TimelineIndicator", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "ariaLabel() ? \"img\" : null", "attr.aria-label": "ariaLabel()", "attr.data-slot": "\"timeline-indicator\"", "attr.data-variant": "variant()", "attr.data-status": "resolvedStatus()", "attr.data-color": "color() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineIndicatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'TimelineIndicator',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
+                        // A labeled indicator is a status graphic (role="img" so aria-label is valid);
+                        // without a label it stays a decorative marker.
+                        '[attr.role]': 'ariaLabel() ? "img" : null',
+                        '[attr.aria-label]': 'ariaLabel()',
                         '[attr.data-slot]': '"timeline-indicator"',
                         '[attr.data-variant]': 'variant()',
                         '[attr.data-status]': 'resolvedStatus()',
@@ -165,21 +171,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class TimelineContentComponent {
     item = inject(TimelineItemComponent, { optional: true });
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('min-w-0 text-sm leading-6 text-foreground', this.item?.orientation() === 'horizontal' ? 'row-start-2 max-w-40 text-center' : 'col-start-2 row-start-1', this.class()), /* @ts-ignore */
+    classes = computed(() => cn('min-w-0 text-sm leading-6 text-foreground', this.item?.orientation() === 'horizontal'
+        ? 'row-start-2 max-w-40 text-center'
+        : 'col-start-2 row-start-1', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineContentComponent, isStandalone: true, selector: "TimelineContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-content\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineContentComponent, isStandalone: true, selector: "TimelineContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-content\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'TimelineContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"timeline-content"',
@@ -194,13 +201,12 @@ class TimelineBlockComponent {
     classes = computed(() => cn('min-w-0', this.item?.orientation() === 'horizontal' ? 'row-start-2 w-full' : 'col-span-full', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineBlockComponent, isStandalone: true, selector: "TimelineBlock", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-block\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineBlockComponent, isStandalone: true, selector: "TimelineBlock", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-block\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineBlockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'TimelineBlock',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"timeline-block"',
@@ -214,13 +220,12 @@ class TimelineSubgridComponent {
     classes = computed(() => cn('grid min-w-0 grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)]', this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineSubgridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineSubgridComponent, isStandalone: true, selector: "TimelineSubgrid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-subgrid\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: TimelineSubgridComponent, isStandalone: true, selector: "TimelineSubgrid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-subgrid\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TimelineSubgridComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'TimelineSubgrid',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-slot]': '"timeline-subgrid"',

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';
 
@@ -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);
@@ -174,19 +176,23 @@ class ToggleGroupComponent extends ToggleGroupContextBase {
         this.registrationVersion.update((version) => version + 1);
     }
     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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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.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.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"',
                         '[attr.dir]': 'dir() ?? null',
-                        '[attr.aria-orientation]': 'orientation()',
+                        // aria-orientation is not allowed on role="group" (axe aria-allowed-attr);
+                        // data-orientation below drives the visual layout instead.
                         '[attr.data-disabled]': 'disabled() ? "" : null',
                         '[attr.data-orientation]': 'orientation()',
                         '[attr.data-slot]': '"toggle-group"',

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';
 
@@ -52,13 +52,12 @@ class ToggleComponent {
         this.pressed.update((pressed) => !pressed);
     }
     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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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.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';
@@ -18,13 +18,12 @@ class TooltipComponent {
     closeDelay = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeDelay" }] : /* istanbul ignore next */ []));
     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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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.4", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Tooltip',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [{ provide: TOOLTIP_DEFAULTS, useExisting: forwardRef(() => TooltipComponent) }],
                     host: {
                         class: 'contents',
@@ -323,12 +322,11 @@ class TooltipTextComponent {
     text = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
     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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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.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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-component",
-  "version": "22.0.44",
+  "version": "22.0.46",
   "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-combobox.d.ts

@@ -18,6 +18,9 @@ declare class ComboboxComponent<T = unknown> implements ControlValueAccessor {
     readonly options: _angular_core.InputSignal<readonly ComboboxOption<T>[]>;
     readonly value: _angular_core.ModelSignal<T | null>;
     readonly placeholder: _angular_core.InputSignal<string>;
+    /** Accessible name for the combobox trigger (its text content is the value, not a name). */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly ariaLabelledby: _angular_core.InputSignal<string | null>;
     readonly searchPlaceholder: _angular_core.InputSignal<string>;
     readonly emptyText: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.ModelSignal<boolean>;
@@ -46,7 +49,7 @@ declare class ComboboxComponent<T = unknown> implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(state: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ComboboxComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "Combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ComboboxComponent<any>, "Combobox", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 export { ComboboxComponent };

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

@@ -3,6 +3,8 @@ import { model } from '@angular/core';
 
 /** Base class exposed to children for context lookup. */
 declare abstract class CommandContextBase {
+    /** Shared id linking the combobox input (aria-controls) to the listbox. */
+    readonly listboxId: string;
     abstract query: ReturnType<typeof model<string>>;
     abstract matches(text: string): boolean;
     abstract registerItem(item: CommandItemComponent): void;
@@ -48,10 +50,13 @@ declare class CommandInputComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommandInputComponent, "input[CommandInput]", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 declare class CommandListComponent {
+    protected readonly ctx: CommandContextBase;
     readonly class: _angular_core.InputSignal<string>;
+    /** Accessible name for the listbox (required on role="listbox"). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommandListComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommandListComponent, "CommandList", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommandListComponent, "CommandList", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class CommandEmptyComponent {
     protected readonly ctx: CommandComponent;
@@ -80,7 +85,7 @@ declare class CommandItemComponent {
     readonly value: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly class: _angular_core.InputSignal<string>;
-    readonly selected: _angular_core.OutputEmitterRef<MouseEvent | KeyboardEvent>;
+    readonly selected: _angular_core.OutputEmitterRef<KeyboardEvent | MouseEvent>;
     readonly active: _angular_core.WritableSignal<boolean>;
     readonly visible: _angular_core.Signal<boolean>;
     protected readonly classes: _angular_core.Signal<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-form.d.ts

@@ -8,12 +8,20 @@ import { AbstractControl } from '@angular/forms';
  */
 declare class FormFieldContext {
     readonly controlId: string;
+    readonly labelId: string;
     readonly descriptionId: string;
     readonly messageId: string;
     readonly control: _angular_core.WritableSignal<AbstractControl<any, any, any> | null>;
     readonly manualInvalid: _angular_core.WritableSignal<boolean>;
+    readonly hasLabel: _angular_core.WritableSignal<boolean>;
     readonly hasDescription: _angular_core.WritableSignal<boolean>;
     readonly hasMessage: _angular_core.WritableSignal<boolean>;
+    /**
+     * `aria-labelledby` for the control. `<FormLabel>` renders as a custom element,
+     * so the native `for`/`id` pairing does not associate it — point the control at
+     * the label's id explicitly so it has an accessible name (axe `select-name`/`label`).
+     */
+    readonly labelledBy: _angular_core.Signal<string | null>;
     private readonly statusTick;
     readonly invalid: _angular_core.Signal<boolean>;
     readonly firstError: _angular_core.Signal<string | null>;
@@ -84,6 +92,7 @@ declare class FormTitleComponent {
 declare class FormLabelComponent {
     protected readonly ctx: FormFieldContext;
     readonly class: _angular_core.InputSignal<string>;
+    constructor();
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormLabelComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormLabelComponent, "FormLabel, label[FormLabel]", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;