@neuravision/ng-construct 0.5.0 → 0.5.1

package/fesm2022/neuravision-ng-construct.mjs

@@ -1098,6 +1098,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
   `, styles: [":host{display:contents}\n"] }]
         }], propDecorators: { sidebarState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarState", required: false }] }, { type: i0.Output, args: ["sidebarStateChange"] }], panelState: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelState", required: false }] }, { type: i0.Output, args: ["panelStateChange"] }], noSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSidebar", required: false }] }], sidebarRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarRight", required: false }] }], sidebarFullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarFullHeight", required: false }] }], withHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "withHeader", required: false }] }], sidebarBranded: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarBranded", required: false }] }], glass: [{ type: i0.Input, args: [{ isSignal: true, alias: "glass", required: false }] }], sidebarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], mainId: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainId", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }] } });
 
+/**
+ * Number of distinct colors in the seeded avatar palette. Must match the
+ * `[data-seed-color="N"]` selectors shipped by `@neuravision/construct`
+ * (see `components/avatar.css`). Bump together when Construct adds slots.
+ */
+const AVATAR_SEED_PALETTE_SIZE = 8;
 /**
  * Avatar component displaying a user image with fallback to initials.
  *
@@ -1105,9 +1111,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * fails to load or no `src` is given, initials derived from `name` are
  * shown instead.
  *
+ * Set `colorSeed` to give each user a stable, deterministic background
+ * color picked from the Construct DS palette — useful in lists where the
+ * eye should recognize repeat individuals at a glance. The seed is hashed
+ * locally and bound to `data-seed-color`; an empty seed leaves the
+ * attribute off and the avatar keeps the default background.
+ *
  * @example
  * <af-avatar src="/photo.jpg" name="Jane Doe" alt="Jane Doe" size="lg" />
  * <af-avatar name="John Smith" status="online" />
+ * <af-avatar name="Jane Doe" colorSeed="user-uuid-7b3e2a4d" />
  */
 class AfAvatarComponent {
     /** Image URL. Falls back to initials when missing or on load error. */
@@ -1120,6 +1133,12 @@ class AfAvatarComponent {
     alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : []));
     /** Online status indicator. */
     status = input(undefined, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    /**
+     * Stable identifier (e.g. userUUID, email, username) hashed into a
+     * deterministic palette index. The same seed always produces the same
+     * color. Leave empty to keep the default avatar background.
+     */
+    colorSeed = input('', ...(ngDevMode ? [{ debugName: "colorSeed" }] : []));
     /** Tracks whether the image failed to load. */
     imageError = signal(false, ...(ngDevMode ? [{ debugName: "imageError" }] : []));
     /** Whether to render the `<img>` element. */
@@ -1135,6 +1154,18 @@ class AfAvatarComponent {
     }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
     /** Accessible label for the avatar. */
     ariaLabel = computed(() => this.alt() || this.name() || 'Avatar', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Palette index in `[1, AVATAR_SEED_PALETTE_SIZE]` derived from `colorSeed`,
+     * or `null` when no seed is set. Returning `null` causes Angular to omit
+     * the `data-seed-color` attribute, preserving the unseeded default.
+     */
+    seedColorIndex = computed(() => {
+        const seed = this.colorSeed();
+        if (!seed)
+            return null;
+        // Construct's selectors are 1-indexed (data-seed-color="1".."8")
+        return (this.hashSeed(seed) % AVATAR_SEED_PALETTE_SIZE) + 1;
+    }, ...(ngDevMode ? [{ debugName: "seedColorIndex" }] : []));
     avatarClasses = computed(() => {
         const classes = ['ct-avatar'];
         if (this.size() !== 'md') {
@@ -1146,9 +1177,26 @@ class AfAvatarComponent {
     onImageError() {
         this.imageError.set(true);
     }
+    /**
+     * Dependency-free 32-bit string hash (djb2-style). Pure and stable across
+     * runs and environments — same input always yields the same non-negative
+     * integer.
+     */
+    hashSeed(seed) {
+        let hash = 0;
+        for (let i = 0; i < seed.length; i++) {
+            hash = (hash << 5) - hash + seed.charCodeAt(i);
+            hash |= 0; // force 32-bit int
+        }
+        return Math.abs(hash);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfAvatarComponent, isStandalone: true, selector: "af-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <span [class]="avatarClasses()" role="img" [attr.aria-label]="ariaLabel()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfAvatarComponent, isStandalone: true, selector: "af-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, colorSeed: { classPropertyName: "colorSeed", publicName: "colorSeed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      [class]="avatarClasses()"
+      role="img"
+      [attr.aria-label]="ariaLabel()"
+      [attr.data-seed-color]="seedColorIndex()">
       @if (showImage()) {
         <img
           class="ct-avatar__image"
@@ -1172,7 +1220,11 @@ class AfAvatarComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'af-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <span [class]="avatarClasses()" role="img" [attr.aria-label]="ariaLabel()">
+    <span
+      [class]="avatarClasses()"
+      role="img"
+      [attr.aria-label]="ariaLabel()"
+      [attr.data-seed-color]="seedColorIndex()">
       @if (showImage()) {
         <img
           class="ct-avatar__image"
@@ -1192,7 +1244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
       }
     </span>
   `, styles: [":host{display:inline-block}\n"] }]
-        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], colorSeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorSeed", required: false }] }] } });
 
 /**
  * Button component from the Construct Design System.
@@ -1728,132 +1780,203 @@ class AfInputHarness {
 }
 
 /**
- * Select dropdown component with form control support
+ * Injection token to override select screen-reader announcements
+ * and the fallback `aria-label`.
  *
  * @example
+ * providers: [{
+ *   provide: AF_SELECT_I18N,
+ *   useValue: {
+ *     required: 'Pflichtfeld',
+ *     selectOption: 'Option auswählen',
+ *     selected: '{label} ausgewählt',
+ *   },
+ * }]
+ */
+const AF_SELECT_I18N = new InjectionToken('AfSelectI18n', {
+    factory: () => ({
+        required: 'required',
+        selectOption: 'Select option',
+        selected: '{label} selected',
+    }),
+});
+
+/**
+ * Native select dropdown component with form control support.
+ * Wraps a native `<select>` element with design system styling,
+ * accessible labelling, and Angular forms integration.
+ *
+ * For a custom dropdown with keyboard-navigated listbox, see `af-select-menu`.
+ *
+ * @example Basic usage with ngModel
  * <af-select
  *   label="Role"
  *   [options]="roleOptions"
  *   [(ngModel)]="selectedRole"
  *   hint="Choose your primary role"
- * ></af-select>
+ * />
+ *
+ * @example Reactive forms with error state
+ * <af-select
+ *   label="Country"
+ *   [options]="countries"
+ *   [formControl]="countryControl"
+ *   [error]="countryControl.hasError('required') ? 'Required field' : ''"
+ * />
+ *
+ * @accessibility
+ * - Uses a native `<select>` element for built-in browser accessibility.
+ * - `aria-invalid` is set when an error message is provided.
+ * - `aria-describedby` links to hint or error text.
+ * - Falls back to `aria-label` via {@link AF_SELECT_I18N} when no `label` input is given.
+ * - Screen-reader announcements via {@link AriaLiveAnnouncer} on selection change.
+ * - All user-facing strings are configurable via {@link AF_SELECT_I18N} for i18n.
  */
 class AfSelectComponent {
     static nextId = 0;
-    /** Select label */
+    i18n = inject(AF_SELECT_I18N);
+    announcer = inject(AriaLiveAnnouncer);
+    /** Label shown above the select. */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** Placeholder option */
+    /** Placeholder option shown when no value is selected. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    /** Options array */
+    /** Available options. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    /** Hint text shown below select */
+    /** Hint text shown below the select. */
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
-    /** Error message */
+    /** Error message — shows error state when non-empty. */
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
-    /** Whether select is required */
+    /** Whether the field is required. */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
-    /** Whether select is disabled */
+    /** Whether the select is disabled. */
     disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    /** Value comparison function (for object values) */
+    /** Size variant. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Value comparison function for object values. */
     compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
-    /** Unique select ID */
+    /** Unique select ID. */
     selectId = input(`af-select-${AfSelectComponent.nextId++}`, ...(ngDevMode ? [{ debugName: "selectId" }] : []));
-    value = null;
-    onChangeCallback = () => { };
+    /** Emits when the user changes the selected value. */
+    valueChange = output();
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    onChange = () => { };
     onTouched = () => { };
+    labelId = computed(() => `${this.selectId()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : []));
     hintId = computed(() => `${this.selectId()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : []));
     errorId = computed(() => `${this.selectId()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : []));
-    getAriaDescribedBy() {
+    selectClasses = computed(() => {
+        const classes = ['ct-select'];
+        const s = this.size();
+        if (s === 'sm')
+            classes.push('ct-select--sm');
+        if (s === 'lg')
+            classes.push('ct-select--lg');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "selectClasses" }] : []));
+    ariaDescribedBy = computed(() => {
         if (this.error())
             return this.errorId();
         if (this.hint())
             return this.hintId();
         return null;
-    }
-    get isPlaceholderSelected() {
+    }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    isPlaceholderSelected = computed(() => {
         if (!this.placeholder())
             return false;
-        if (this.value === null || this.value === undefined || this.value === '')
+        const v = this.value();
+        if (v === null || v === undefined || v === '')
             return true;
         return !this.hasMatchingOption();
-    }
-    hasMatchingOption() {
-        return this.options().some(option => this.compareWith()(option.value, this.value));
-    }
+    }, ...(ngDevMode ? [{ debugName: "isPlaceholderSelected" }] : []));
     isOptionSelected(option) {
-        if (this.isPlaceholderSelected)
+        if (this.isPlaceholderSelected())
             return false;
-        return this.compareWith()(option.value, this.value);
+        return this.compareWith()(option.value, this.value());
     }
-    onChange(event) {
+    handleChange(event) {
         const target = event.target;
         const index = target.selectedIndex;
         const offset = this.placeholder() ? 1 : 0;
         if (this.placeholder() && index === 0) {
-            this.value = null;
-            this.onChangeCallback(null);
+            this.value.set(null);
+            this.onChange(null);
+            this.valueChange.emit(null);
             return;
         }
         const option = this.options()[index - offset];
         const nextValue = option ? option.value : null;
-        this.value = nextValue;
-        this.onChangeCallback(nextValue);
+        this.value.set(nextValue);
+        this.onChange(nextValue);
+        this.valueChange.emit(nextValue);
+        if (option) {
+            this.announcer.announce(this.i18n.selected.replace('{label}', option.label));
+        }
     }
-    /** ControlValueAccessor implementation */
+    /** @docs-private */
     writeValue(value) {
-        this.value = value ?? null;
+        this.value.set(value ?? null);
     }
+    /** @docs-private */
     registerOnChange(fn) {
-        this.onChangeCallback = fn;
+        this.onChange = fn;
     }
+    /** @docs-private */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    /** @docs-private */
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
     }
+    hasMatchingOption() {
+        return this.options().some((option) => this.compareWith()(option.value, this.value()));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfSelectComponent, isStandalone: true, selector: "af-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfSelectComponent, isStandalone: true, selector: "af-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, selectId: { classPropertyName: "selectId", publicName: "selectId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", valueChange: "valueChange" }, host: { styleAttribute: "display: block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AfSelectComponent),
-                multi: true
-            }
+                multi: true,
+            },
         ], ngImport: i0, template: `
     <div class="ct-field" [class.ct-field--error]="error()">
       @if (label()) {
-        <label class="ct-field__label" [attr.for]="selectId()">
+        <label class="ct-field__label" [id]="labelId()" [attr.for]="selectId()">
           {{ label() }}
           @if (required()) {
-            <span aria-label="required"> *</span>
+            <span [attr.aria-label]="i18n.required"> *</span>
           }
         </label>
       }
 
-      <select
-        [id]="selectId()"
-        class="ct-select"
-        [disabled]="disabled()"
-        [required]="required()"
-        [attr.aria-invalid]="error() ? true : null"
-        [attr.aria-describedby]="getAriaDescribedBy()"
-        (change)="onChange($event)"
-        (blur)="onTouched()"
-      >
-        @if (placeholder()) {
-          <option value="" [disabled]="true" [selected]="isPlaceholderSelected">
-            {{ placeholder() }}
-          </option>
-        }
-        @for (option of options(); track option.value) {
-          <option
-            [selected]="isOptionSelected(option)"
-            [disabled]="option.disabled || false"
-          >
-            {{ option.label }}
-          </option>
-        }
-      </select>
+      <div class="ct-select-wrap">
+        <select
+          [id]="selectId()"
+          [class]="selectClasses()"
+          [disabled]="disabled()"
+          [required]="required()"
+          [attr.aria-invalid]="error() ? true : null"
+          [attr.aria-describedby]="ariaDescribedBy()"
+          [attr.aria-label]="label() ? null : i18n.selectOption"
+          [attr.aria-labelledby]="label() ? labelId() : null"
+          (change)="handleChange($event)"
+          (blur)="onTouched()"
+        >
+          @if (placeholder()) {
+            <option value="" [disabled]="true" [selected]="isPlaceholderSelected()">
+              {{ placeholder() }}
+            </option>
+          }
+          @for (option of options(); track option.value) {
+            <option
+              [selected]="isOptionSelected(option)"
+              [disabled]="option.disabled || false"
+            >
+              {{ option.label }}
+            </option>
+          }
+        </select>
+      </div>
 
       @if (hint() && !error()) {
         <div class="ct-field__hint" [id]="hintId()">
@@ -1862,56 +1985,67 @@ class AfSelectComponent {
       }
 
       @if (error()) {
-        <div class="ct-field__error" [id]="errorId()">
+        <div class="ct-field__error" role="alert" [id]="errorId()">
           {{ error() }}
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'af-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{
+                    selector: 'af-select',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AfSelectComponent),
-                            multi: true
-                        }
-                    ], template: `
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        style: 'display: block',
+                    },
+                    template: `
     <div class="ct-field" [class.ct-field--error]="error()">
       @if (label()) {
-        <label class="ct-field__label" [attr.for]="selectId()">
+        <label class="ct-field__label" [id]="labelId()" [attr.for]="selectId()">
           {{ label() }}
           @if (required()) {
-            <span aria-label="required"> *</span>
+            <span [attr.aria-label]="i18n.required"> *</span>
           }
         </label>
       }
 
-      <select
-        [id]="selectId()"
-        class="ct-select"
-        [disabled]="disabled()"
-        [required]="required()"
-        [attr.aria-invalid]="error() ? true : null"
-        [attr.aria-describedby]="getAriaDescribedBy()"
-        (change)="onChange($event)"
-        (blur)="onTouched()"
-      >
-        @if (placeholder()) {
-          <option value="" [disabled]="true" [selected]="isPlaceholderSelected">
-            {{ placeholder() }}
-          </option>
-        }
-        @for (option of options(); track option.value) {
-          <option
-            [selected]="isOptionSelected(option)"
-            [disabled]="option.disabled || false"
-          >
-            {{ option.label }}
-          </option>
-        }
-      </select>
+      <div class="ct-select-wrap">
+        <select
+          [id]="selectId()"
+          [class]="selectClasses()"
+          [disabled]="disabled()"
+          [required]="required()"
+          [attr.aria-invalid]="error() ? true : null"
+          [attr.aria-describedby]="ariaDescribedBy()"
+          [attr.aria-label]="label() ? null : i18n.selectOption"
+          [attr.aria-labelledby]="label() ? labelId() : null"
+          (change)="handleChange($event)"
+          (blur)="onTouched()"
+        >
+          @if (placeholder()) {
+            <option value="" [disabled]="true" [selected]="isPlaceholderSelected()">
+              {{ placeholder() }}
+            </option>
+          }
+          @for (option of options(); track option.value) {
+            <option
+              [selected]="isOptionSelected(option)"
+              [disabled]="option.disabled || false"
+            >
+              {{ option.label }}
+            </option>
+          }
+        </select>
+      </div>
 
       @if (hint() && !error()) {
         <div class="ct-field__hint" [id]="hintId()">
@@ -1920,13 +2054,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
       }
 
       @if (error()) {
-        <div class="ct-field__error" [id]="errorId()">
+        <div class="ct-field__error" role="alert" [id]="errorId()">
           {{ error() }}
         </div>
       }
     </div>
-  `, styles: [":host{display:block}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectId", required: false }] }] } });
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], selectId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectId", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Test harness for AfSelectComponent.
+ *
+ * Provides a semantic API for interacting with the native select in tests,
+ * abstracting DOM details behind readable method names.
+ *
+ * @example
+ * const harness = new AfSelectHarness(fixture.nativeElement);
+ * expect(harness.isDisabled()).toBe(false);
+ * harness.selectByIndex(1);
+ * expect(harness.getValue()).toBe('Banana');
+ */
+class AfSelectHarness {
+    hostEl;
+    constructor(container) {
+        const el = container.querySelector('af-select');
+        if (!el) {
+            throw new Error('AfSelectHarness: af-select element not found in container.');
+        }
+        this.hostEl = el;
+    }
+    /** Returns the native `<select>` element. */
+    getSelectElement() {
+        const select = this.hostEl.querySelector('select');
+        if (!select) {
+            throw new Error('AfSelectHarness: <select> element not found.');
+        }
+        return select;
+    }
+    /** Returns the current display value of the select. */
+    getValue() {
+        const select = this.getSelectElement();
+        return select.options[select.selectedIndex]?.text?.trim() ?? '';
+    }
+    /** Returns the current selected index. */
+    getSelectedIndex() {
+        return this.getSelectElement().selectedIndex;
+    }
+    /** Selects an option by index and dispatches a change event. */
+    selectByIndex(index) {
+        const select = this.getSelectElement();
+        select.selectedIndex = index;
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    /** Returns the trimmed label text, or null if no label. */
+    getLabel() {
+        const label = this.hostEl.querySelector('.ct-field__label');
+        return label?.textContent?.trim() ?? null;
+    }
+    /** Returns the trimmed hint text, or null if no hint. */
+    getHint() {
+        const hint = this.hostEl.querySelector('.ct-field__hint');
+        return hint?.textContent?.trim() ?? null;
+    }
+    /** Returns the trimmed error text, or null if no error. */
+    getError() {
+        const error = this.hostEl.querySelector('.ct-field__error');
+        return error?.textContent?.trim() ?? null;
+    }
+    /** Returns whether the select is disabled. */
+    isDisabled() {
+        return this.getSelectElement().disabled;
+    }
+    /** Returns whether the select is required. */
+    isRequired() {
+        return this.getSelectElement().required;
+    }
+    /** Returns whether `aria-invalid="true"` is set. */
+    isInvalid() {
+        return this.getSelectElement().getAttribute('aria-invalid') === 'true';
+    }
+    /** Returns the `aria-describedby` attribute value. */
+    getAriaDescribedBy() {
+        return this.getSelectElement().getAttribute('aria-describedby');
+    }
+    /** Returns the `aria-label` attribute value. */
+    getAriaLabel() {
+        return this.getSelectElement().getAttribute('aria-label');
+    }
+    /** Returns all `<option>` elements. */
+    getOptions() {
+        return Array.from(this.getSelectElement().options);
+    }
+    /** Returns the number of options (including placeholder). */
+    getOptionCount() {
+        return this.getSelectElement().options.length;
+    }
+    /** Returns the trimmed text of the option at the given index. */
+    getOptionText(index) {
+        const options = this.getOptions();
+        if (index < 0 || index >= options.length) {
+            throw new Error(`AfSelectHarness: option index ${index} out of bounds (${options.length} options).`);
+        }
+        return options[index].text.trim();
+    }
+    /** Returns whether the option at the given index is disabled. */
+    isOptionDisabled(index) {
+        return this.getOptions()[index]?.disabled ?? false;
+    }
+    /** Returns whether the option at the given index is selected. */
+    isOptionSelected(index) {
+        return this.getOptions()[index]?.selected ?? false;
+    }
+    /** Returns the select element's ID. */
+    getId() {
+        return this.getSelectElement().id;
+    }
+    /** Returns whether the field wrapper has the error class. */
+    hasFieldError() {
+        return this.hostEl.querySelector('.ct-field--error') !== null;
+    }
+    /** Returns whether the select has the given CSS class. */
+    hasClass(className) {
+        return this.getSelectElement().classList.contains(className);
+    }
+    /** Returns whether the `.ct-select-wrap` wrapper exists. */
+    hasSelectWrap() {
+        return this.hostEl.querySelector('.ct-select-wrap') !== null;
+    }
+    /** Dispatches a blur event on the select. */
+    blur() {
+        this.getSelectElement().dispatchEvent(new Event('blur', { bubbles: true }));
+    }
+}
 
 /**
  * Textarea component with form control support
@@ -10132,5 +10392,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AF_ACCORDION_I18N, AF_ALERT_I18N, AF_INPUT_I18N, AF_SELECT_MENU_I18N, AfAccordionComponent, AfAccordionHarness, AfAccordionItemComponent, AfAccordionItemHarness, AfAlertComponent, AfAlertHarness, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBadgeHarness, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfButtonHarness, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfInputHarness, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectMenuComponent, AfSelectMenuHarness, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective };
+export { AF_ACCORDION_I18N, AF_ALERT_I18N, AF_INPUT_I18N, AF_SELECT_I18N, AF_SELECT_MENU_I18N, AVATAR_SEED_PALETTE_SIZE, AfAccordionComponent, AfAccordionHarness, AfAccordionItemComponent, AfAccordionItemHarness, AfAlertComponent, AfAlertHarness, AfAppShellComponent, AfAppShellPageHeaderComponent, AfAppShellV2Component, AfAppShellV2ToolbarComponent, AfAvatarComponent, AfBadgeComponent, AfBadgeHarness, AfBannerComponent, AfBreadcrumbsComponent, AfButtonComponent, AfButtonHarness, AfCardComponent, AfCellDefDirective, AfCheckboxComponent, AfChipComponent, AfChipInputComponent, AfComboboxComponent, AfDataTableComponent, AfDatepickerComponent, AfDividerComponent, AfDrawerComponent, AfDropdownComponent, AfEmptyStateComponent, AfFieldComponent, AfFileUploadComponent, AfFormatLabelPipe, AfIconComponent, AfInputComponent, AfInputHarness, AfModalComponent, AfNavItemComponent, AfNavTabsComponent, AfNavbarComponent, AfPaginationComponent, AfPopoverComponent, AfPopoverTriggerDirective, AfProgressBarComponent, AfRadioComponent, AfRadioGroupComponent, AfSelectComponent, AfSelectHarness, AfSelectMenuComponent, AfSelectMenuHarness, AfSidebarComponent, AfSkeletonComponent, AfSkipLinkComponent, AfSliderComponent, AfSpinnerComponent, AfSwitchComponent, AfTabPanelComponent, AfTableBodyComponent, AfTableCellComponent, AfTableComponent, AfTableHeaderCellComponent, AfTableHeaderComponent, AfTableRowComponent, AfTabsComponent, AfTextareaComponent, AfToastContainerComponent, AfToastService, AfToggleGroupComponent, AfToolbarComponent, AfTooltipDirective };
 //# sourceMappingURL=neuravision-ng-construct.mjs.map