@ojiepermana/angular-component 22.0.45 → 22.0.46

package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs

@@ -83,7 +83,7 @@ class AlertDialogComponent {
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogComponent, isStandalone: true, selector: "AlertDialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: AlertDialogComponent, isStandalone: true, selector: "AlertDialog", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, host: { properties: { "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, ngImport: i0, template: `
     <Dialog
       [(open)]="open"
       [role]="role()"
@@ -106,6 +106,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             type: Component,
             args: [{
                     selector: 'AlertDialog',
+                    // `<AlertDialog>` is a roleless host element; the consumer's
+                    // aria-labelledby/aria-describedby are re-applied on the inner dialog surface,
+                    // so strip them from the host (axe `aria-prohibited-attr`).
+                    host: {
+                        '[attr.aria-labelledby]': 'null',
+                        '[attr.aria-describedby]': 'null',
+                    },
                     imports: [DialogComponent],
                     template: `
     <Dialog

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

@@ -23,6 +23,9 @@ class ComboboxComponent {
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     placeholder = input('Select…', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the combobox trigger (its text content is the value, not a name). */
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     searchPlaceholder = input('Search…', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
     emptyText = input('No results found.', /* @ts-ignore */
@@ -119,7 +122,7 @@ class ComboboxComponent {
         this.cvaDisabled.set(state);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ComboboxComponent, isStandalone: true, selector: "Combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class": "classes()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ComboboxComponent, isStandalone: true, selector: "Combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class": "classes()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboboxComponent), multi: true },
         ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
@@ -128,6 +131,8 @@ class ComboboxComponent {
       [attr.id]="triggerId"
       role="combobox"
       aria-haspopup="listbox"
+      [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() ?? placeholder())"
+      [attr.aria-labelledby]="ariaLabelledby()"
       [attr.aria-expanded]="isOpen()"
       [attr.aria-controls]="isOpen() ? panelId : null"
       [class]="triggerClasses()"
@@ -189,7 +194,7 @@ class ComboboxComponent {
         </Command>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: CommandComponent, selector: "Command", inputs: ["query", "class"], outputs: ["queryChange"] }, { kind: "component", type: CommandInputComponent, selector: "input[CommandInput]", inputs: ["placeholder", "class"] }, { kind: "component", type: CommandListComponent, selector: "CommandList", inputs: ["class"] }, { kind: "component", type: CommandEmptyComponent, selector: "CommandEmpty", inputs: ["class"] }, { kind: "component", type: CommandGroupComponent, selector: "CommandGroup", inputs: ["heading", "class"] }, { kind: "component", type: CommandItemComponent, selector: "CommandItem, button[CommandItem]", inputs: ["value", "disabled", "class"], outputs: ["selected"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: CommandComponent, selector: "Command", inputs: ["query", "class"], outputs: ["queryChange"] }, { kind: "component", type: CommandInputComponent, selector: "input[CommandInput]", inputs: ["placeholder", "class"] }, { kind: "component", type: CommandListComponent, selector: "CommandList", inputs: ["class", "aria-label"] }, { kind: "component", type: CommandEmptyComponent, selector: "CommandEmpty", inputs: ["class"] }, { kind: "component", type: CommandGroupComponent, selector: "CommandGroup", inputs: ["heading", "class"] }, { kind: "component", type: CommandItemComponent, selector: "CommandItem, button[CommandItem]", inputs: ["value", "disabled", "class"], outputs: ["selected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -214,6 +219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.id]="triggerId"
       role="combobox"
       aria-haspopup="listbox"
+      [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() ?? placeholder())"
+      [attr.aria-labelledby]="ariaLabelledby()"
       [attr.aria-expanded]="isOpen()"
       [attr.aria-controls]="isOpen() ? panelId : null"
       [class]="triggerClasses()"
@@ -277,7 +284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
 import { Directive, model, input, signal, computed, forwardRef, Component, inject, ElementRef, output, DestroyRef } from '@angular/core';
-import { cn, uniqueId } from '@ojiepermana/angular-component/utils';
+import { uniqueId, cn } from '@ojiepermana/angular-component/utils';
 
 /** Base class exposed to children for context lookup. */
 class CommandContextBase {
+    /** Shared id linking the combobox input (aria-controls) to the listbox. */
+    listboxId = uniqueId('CommandList');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: CommandContextBase, isStandalone: true, ngImport: i0 });
 }
@@ -98,7 +100,7 @@ class CommandInputComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandInputComponent, isStandalone: true, selector: "input[CommandInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "autocomplete": "off" }, listeners: { "input": "onInput($any($event))", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.enter": "onEnter($any($event))" }, properties: { "class": "classes()", "attr.aria-activedescendant": "ctx.activeDescendantId()", "value": "ctx.query()", "placeholder": "placeholder()" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandInputComponent, isStandalone: true, selector: "input[CommandInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "autocomplete": "off" }, listeners: { "input": "onInput($any($event))", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.enter": "onEnter($any($event))" }, properties: { "class": "classes()", "attr.aria-controls": "ctx.listboxId", "attr.aria-activedescendant": "ctx.activeDescendantId()", "value": "ctx.query()", "placeholder": "placeholder()" } }, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandInputComponent, decorators: [{
             type: Component,
@@ -110,6 +112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         role: 'combobox',
                         'aria-autocomplete': 'list',
                         'aria-expanded': 'true',
+                        '[attr.aria-controls]': 'ctx.listboxId',
                         '[attr.aria-activedescendant]': 'ctx.activeDescendantId()',
                         autocomplete: 'off',
                         '[value]': 'ctx.query()',
@@ -123,21 +126,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 class CommandListComponent {
+    ctx = inject(CommandContextBase);
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the listbox (required on role="listbox"). */
+    ariaLabel = input('Suggestions', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     classes = computed(() => cn('max-h-[300px] overflow-y-auto overflow-x-hidden p-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: CommandListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandListComponent, isStandalone: true, selector: "CommandList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandListComponent, isStandalone: true, selector: "CommandList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "classes()", "attr.id": "ctx.listboxId", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandList',
-                    host: { '[class]': 'classes()', role: 'listbox' },
+                    host: {
+                        '[class]': 'classes()',
+                        role: 'listbox',
+                        '[attr.id]': 'ctx.listboxId',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
 class CommandEmptyComponent {
     ctx = inject(CommandComponent);
     class = input('', /* @ts-ignore */
@@ -192,13 +203,14 @@ class CommandSeparatorComponent {
     classes = computed(() => cn('-mx-1 h-px bg-border block', 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: CommandSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandSeparatorComponent, isStandalone: true, selector: "CommandSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: CommandSeparatorComponent, isStandalone: true, selector: "CommandSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CommandSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'CommandSeparator',
-                    host: { '[class]': 'classes()', role: 'separator' },
+                    // Decorative divider — a separator is not an allowed child of role="listbox".
+                    host: { '[class]': 'classes()', 'aria-hidden': 'true' },
                     template: '',
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });

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

@@ -9,16 +9,26 @@ import { NgControl } from '@angular/forms';
  */
 class FormFieldContext {
     controlId = uniqueId('FormField');
+    labelId = `${this.controlId}-label`;
     descriptionId = `${this.controlId}-description`;
     messageId = `${this.controlId}-message`;
     control = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
     manualInvalid = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "manualInvalid" }] : /* istanbul ignore next */ []));
+    hasLabel = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
     hasDescription = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
     hasMessage = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * `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`).
+     */
+    labelledBy = computed(() => (this.hasLabel() ? this.labelId : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
     statusTick = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "statusTick" }] : /* istanbul ignore next */ []));
     invalid = computed(() => {
@@ -222,10 +232,14 @@ class FormLabelComponent {
     ctx = inject(FormFieldContext);
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Let the control reference this label via aria-labelledby.
+        this.ctx.hasLabel.set(true);
+    }
     classes = computed(() => cn('text-sm font-medium leading-none', this.ctx.invalid() ? 'text-destructive' : 'text-foreground', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70', 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: FormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormLabelComponent, isStandalone: true, selector: "FormLabel, label[FormLabel]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "ctx.controlId" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FormLabelComponent, isStandalone: true, selector: "FormLabel, label[FormLabel]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "ctx.labelId", "attr.for": "ctx.controlId" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormLabelComponent, decorators: [{
             type: Component,
@@ -233,11 +247,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     selector: 'FormLabel, label[FormLabel]',
                     host: {
                         '[class]': 'classes()',
+                        '[attr.id]': 'ctx.labelId',
                         '[attr.for]': 'ctx.controlId',
                     },
                     template: `<ng-content />`,
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class FormDescriptionComponent {
     ctx = inject(FormFieldContext, { optional: true });
@@ -334,7 +349,7 @@ class FormControlDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: FormControlDirective, isStandalone: true, selector: "[FormControl]", host: { properties: { "attr.id": "ctx.controlId", "attr.aria-describedby": "ctx.describedBy()", "attr.aria-invalid": "ctx.invalid() ? \"true\" : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: FormControlDirective, isStandalone: true, selector: "[FormControl]", host: { properties: { "attr.id": "ctx.controlId", "attr.aria-labelledby": "ctx.labelledBy()", "attr.aria-describedby": "ctx.describedBy()", "attr.aria-invalid": "ctx.invalid() ? \"true\" : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FormControlDirective, decorators: [{
             type: Directive,
@@ -342,6 +357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     selector: '[FormControl]',
                     host: {
                         '[attr.id]': 'ctx.controlId',
+                        '[attr.aria-labelledby]': 'ctx.labelledBy()',
                         '[attr.aria-describedby]': 'ctx.describedBy()',
                         '[attr.aria-invalid]': 'ctx.invalid() ? "true" : null',
                     },

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

@@ -529,6 +529,8 @@ class PillboxComponent extends PillboxContext {
           <input
             #inlineSearch
             class="min-w-28 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+            [attr.aria-label]="ariaLabel() ?? placeholder()"
+            [attr.aria-labelledby]="ariaLabelledby()"
             [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
             [value]="query()"
             [disabled]="disabledState() || null"
@@ -601,6 +603,7 @@ class PillboxComponent extends PillboxContext {
             <input
               #panelSearch
               class="h-9 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              [attr.aria-label]="searchPlaceholder()"
               [placeholder]="searchPlaceholder()"
               [value]="query()"
               (input)="handleSearchInput($event)"
@@ -715,6 +718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
           <input
             #inlineSearch
             class="min-w-28 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+            [attr.aria-label]="ariaLabel() ?? placeholder()"
+            [attr.aria-labelledby]="ariaLabelledby()"
             [placeholder]="selectedItems().length === 0 ? placeholder() : ''"
             [value]="query()"
             [disabled]="disabledState() || null"
@@ -787,6 +792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             <input
               #panelSearch
               class="h-9 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              [attr.aria-label]="searchPlaceholder()"
               [placeholder]="searchPlaceholder()"
               [value]="query()"
               (input)="handleSearchInput($event)"

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

@@ -97,6 +97,9 @@ class RadioComponent {
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the radio input when no text is projected into `<Radio>`. */
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
     selected = computed(() => this.group.value() === this.value(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.disabled() || this.group.disabled(), /* @ts-ignore */
@@ -118,13 +121,15 @@ class RadioComponent {
         this.ref().nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RadioComponent, isStandalone: true, selector: "Radio", 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: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RadioComponent, isStandalone: true, selector: "Radio", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "ref", first: true, predicate: ["ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <label [class]="labelClasses()">
       <input
         #ref
         type="radio"
         class="peer sr-only"
         [attr.name]="group.resolvedName()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
         [value]="value()"
         [checked]="selected()"
         [disabled]="isDisabled()"
@@ -152,6 +157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         type="radio"
         class="peer sr-only"
         [attr.name]="group.resolvedName()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby()"
         [value]="value()"
         [checked]="selected()"
         [disabled]="isDisabled()"
@@ -167,7 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
     </label>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ref: [{ type: i0.ViewChild, args: ['ref', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -167,7 +167,7 @@ class SheetComponent {
         return this.host.nativeElement.localName === 'drawer';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: SheetComponent, isStandalone: true, selector: "Sheet, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", openedChange: "openedChange" }, host: { properties: { "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"
@@ -201,7 +201,10 @@ class SheetComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Sheet, Drawer', imports: [ButtonComponent], template: `
+            args: [{ selector: 'Sheet, Drawer', host: {
+                        '[attr.aria-labelledby]': 'null',
+                        '[attr.aria-describedby]': 'null',
+                    }, imports: [ButtonComponent], template: `
     <ng-template #tpl>
       <div
         class="sheet-surface fixed z-50 bg-background shadow-lg transition ease-in-out"

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

@@ -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 */
@@ -151,7 +152,7 @@ class TimelineIndicatorComponent {
     }, /* @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 });
+    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,
@@ -159,6 +160,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     selector: 'TimelineIndicator',
                     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()',
@@ -166,7 +171,7 @@ 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 */

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

@@ -176,7 +176,7 @@ 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: [
+    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 });
 }
@@ -191,7 +191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                         '[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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-component",
-  "version": "22.0.45",
+  "version": "22.0.46",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"

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

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

@@ -41,6 +41,9 @@ declare class RadioComponent {
     readonly value: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly class: _angular_core.InputSignal<string>;
+    /** Accessible name for the radio input when no text is projected into `<Radio>`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    readonly ariaLabelledby: _angular_core.InputSignal<string | null>;
     protected readonly selected: _angular_core.Signal<boolean>;
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly hostClasses: _angular_core.Signal<string>;
@@ -51,7 +54,7 @@ declare class RadioComponent {
     protected handleBlur(): void;
     focus(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "Radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "Radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { RadioComponent, RadioGroupComponent };

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

@@ -32,11 +32,12 @@ declare class TimelineIndicatorComponent {
     readonly variant: _angular_core.InputSignal<TimelineIndicatorVariant>;
     readonly status: _angular_core.InputSignal<TimelineStatus | null>;
     readonly color: _angular_core.InputSignal<TimelineIndicatorColor | null>;
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly resolvedStatus: _angular_core.Signal<TimelineStatus>;
     protected readonly classes: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimelineIndicatorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineIndicatorComponent, "TimelineIndicator", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimelineIndicatorComponent, "TimelineIndicator", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class TimelineContentComponent {
     private readonly item;