@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/form-select/README.md

@@ -1,64 +1,351 @@
-# FormSelect
+# Form Select (`@egose/shadcn-theme-ng/form-select`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+`EgFormSelect` is a reactive-forms wrapper around the shadcn/ui _Select_ composition (spartan-ng `BrnSelect` + `HlmSelect` parts). It renders a label, a single- or multi-select dropdown bound with `formControlName`, and error/hint text — the Angular equivalent of shadcn/ui's `<FormField> + <Select>` pattern for picking one option (or many) from a list.
 
-## Code scaffolding
+> **Ships as:** `@egose/shadcn-theme-ng/form-select` (plain Tailwind) and `@egose/shadcn-theme-ng-tw/form-select` (`tw:`-prefixed variant). See the [package README](../../README.md) for installation, peer dependencies, and the Tailwind-variant contract. Do not publish this project directory independently.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## Installation
 
 ```bash
-ng generate component component-name
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+Peer dependencies (Angular, CDK, `@spartan-ng/brain`, `rxjs`) are documented in the [package README](../../README.md#peer-dependencies). This subpath additionally pulls in `@egose/shadcn-theme-ng/select` at build time (already re-exported through the select subpath — no extra install needed).
 
-```bash
-ng generate --help
+```ts
+import { EgFormSelect } from '@egose/shadcn-theme-ng/form-select';
+// tw variant:
+// import { EgFormSelect } from '@egose/shadcn-theme-ng-tw/form-select';
 ```
 
-## Building
+## Imports
 
-To build the library, run:
+The public API (`src/public-api.ts`) exports exactly one symbol — the standalone component. There is no `*Imports` array and no `*Module` for this subpath; import the component class directly.
 
-```bash
-ng build form-select
+```ts
+import { EgFormSelect } from '@egose/shadcn-theme-ng/form-select';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormSelect],
+  template: `
+    <form [formGroup]="form">
+      <eg-form-select controlName="country" label="Country" [options]="countries" placeholder="Select…" />
+    </form>
+  `,
+})
+export class MyForm {}
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+Requirements:
 
-### Publishing the Library
+- Must sit inside a `<form [formGroup]>` (it injects `FormGroupDirective` and provides `ControlContainer`).
+- `controlName` is required — forwarded as `[formControlName]` to the inner `brn-select` / `brn-select-multiple`.
+- Single mode binds `string`; multi mode (`multiple`) binds `string[]`.
 
-Once the project is built, you can publish your library by following these steps:
+## Anatomy / Structure
 
-1. Navigate to the `dist` directory:
+```html
+<eg-form-select controlName="country" label="Country" [options]="countries">
+  <!-- rendered internally (single mode) -->
+  <hlm-form-field>
+    <label hlmLabel for="<effectiveId>">Country <span>*</span></label>
+    <brn-select hlmSelect formControlName="country">
+      <hlm-select-trigger buttonId="<effectiveId>" ariaDescribedby="…">
+        <hlm-select-value placeholder="Select…" />
+      </hlm-select-trigger>
+      <hlm-select-content>
+        <hlm-select-label>Fruits</hlm-select-label>
+        <hlm-select-item value="apple">Apple</hlm-select-item>
+      </hlm-select-content>
+    </brn-select>
+    <hlm-error id="<effectiveId>-error">…</hlm-error>
+    <hlm-hint id="<effectiveId>-hint">…</hlm-hint>
+  </hlm-form-field>
+</eg-form-select>
+```
 
-   ```bash
-   cd dist/form-select
-   ```
+In multi mode the inner `brn-select` becomes `brn-select-multiple`; everything else is identical. Real selectors: `eg-form-select`, `hlm-form-field`, `label[hlmLabel]`, `brn-select[hlmSelect]` / `brn-select-multiple[hlmSelect]`, `hlm-select-trigger`, `hlm-select-value`, `hlm-select-content`, `hlm-select-label`, `hlm-select-item`, `hlm-error`, `hlm-hint`.
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+## API reference
 
-## Running unit tests
+### `eg-form-select` — `EgFormSelect`
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+| Input                 | Type                  | Default     | Description                                                                                               |
+| --------------------- | --------------------- | ----------- | --------------------------------------------------------------------------------------------------------- |
+| `label`               | `string \| undefined` | `undefined` | Field label rendered as `<label hlmLabel>` bound to the trigger button id.                                |
+| `controlName`         | `string`              | `''`        | **Required.** Control name in the parent `FormGroup`; forwarded as `formControlName`.                     |
+| `controlId`           | `string \| undefined` | `undefined` | Explicit id; falls back to `id`, then generated `eg-form-select-…`.                                       |
+| `id`                  | `string \| undefined` | `undefined` | Alias for an explicit id (same fallback chain). Forwarded as `buttonId` to the select trigger.            |
+| `error`               | `string \| undefined` | `undefined` | Error text rendered in `<hlm-error>`.                                                                     |
+| `hint`                | `string \| undefined` | `undefined` | Hint text rendered in `<hlm-hint>`.                                                                       |
+| `placeholder`         | `string`              | `''`        | Placeholder forwarded to `<hlm-select-value>`.                                                            |
+| `disabled`            | `boolean`             | `false`     | Forwarded as `wrapperDisabled` to `<hlm-select-trigger>`.                                                 |
+| `required`            | `boolean`             | `false`     | Renders a red `*` next to the label (pair with `Validators.required`).                                    |
+| `multiple`            | `boolean`             | `false`     | When `true`, renders `brn-select-multiple` (value is `string[]`).                                         |
+| `options`             | `SelectOption[]`      | `[]`        | `{ value: string; label: string }[]` rendered as `<hlm-select-item>` rows. Local interface, not exported. |
+| `optionsLabel`        | `string \| undefined` | `undefined` | Optional group heading rendered once as `<hlm-select-label>`.                                             |
+| `class` (`userClass`) | `ClassValue`          | `''`        | Extra host classes (merged over `tw:flex tw:flex-col`).                                                   |
+| `labelClass`          | `string`              | `''`        | Extra label classes (merged over `tw:mb-1 tw:gap-0`).                                                     |
+| `selectClass`         | `string`              | `''`        | Extra trigger classes (merged over `tw:w-full`).                                                          |
+| `errorClass`          | `string`              | `''`        | Extra error classes (merged over `tw:mt-0`).                                                              |
+| `hintClass`           | `string`              | `''`        | Extra hint classes (merged over `tw:mt-0`).                                                               |
 
-```bash
-ng test
+No outputs. Readonly computeds/methods: `effectiveId()`, `errorId()`, `hintId()`, `describedBy(): string | null` (error id when invalid + dirty/touched, else hint id, else `null`).
+
+## Examples
+
+### 1. Basic single select
+
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { EgFormSelect } from '@egose/shadcn-theme-ng/form-select';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormSelect],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="save()">
+      <eg-form-select controlName="fruit" label="Fruit" placeholder="Select a fruit" [options]="fruits" />
+      <button type="submit">Save</button>
+    </form>
+  `,
+})
+export class BasicExample {
+  readonly form = new FormGroup({
+    fruit: new FormControl<string>('', { nonNullable: true }),
+  });
+  readonly fruits = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+  ];
+
+  save() {
+    console.log(this.form.value.fruit); // e.g. 'banana'
+  }
+}
 ```
 
-## Running end-to-end tests
+### 2. Grouped options with `optionsLabel`
 
-For end-to-end (e2e) testing, run:
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { EgFormSelect } from '@egose/shadcn-theme-ng/form-select';
 
-```bash
-ng e2e
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormSelect],
+  template: `
+    <form [formGroup]="form">
+      <eg-form-select
+        controlName="city"
+        label="City"
+        placeholder="Select a city"
+        optionsLabel="Germany"
+        [options]="cities"
+        hint="Grouped under one heading"
+      />
+    </form>
+  `,
+})
+export class GroupedExample {
+  readonly form = new FormGroup({
+    city: new FormControl<string>('', { nonNullable: true }),
+  });
+  readonly cities = [
+    { value: 'berlin', label: 'Berlin' },
+    { value: 'munich', label: 'Munich' },
+    { value: 'hamburg', label: 'Hamburg' },
+  ];
+}
+```
+
+> Note: `optionsLabel` renders a single `<hlm-select-label>` heading above all options. For multiple groups, use the raw `HlmSelect*` parts from `@egose/shadcn-theme-ng/select` instead.
+
+### 3. Multi-select (`multiple`)
+
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { EgFormSelect } from '@egose/shadcn-theme-ng/form-select';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormSelect],
+  template: `
+    <form [formGroup]="form">
+      <eg-form-select
+        controlName="toppings"
+        label="Toppings"
+        placeholder="Pick toppings"
+        [multiple]="true"
+        [options]="toppings"
+        hint="Hold Ctrl/Cmd or tap to toggle several"
+      />
+      <p>Selected: {{ form.value.toppings?.join(', ') || 'none' }}</p>
+    </form>
+  `,
+})
+export class MultiExample {
+  readonly form = new FormGroup({
+    toppings: new FormControl<string[]>([], { nonNullable: true }),
+  });
+  readonly toppings = [
+    { value: 'cheese', label: 'Extra cheese' },
+    { value: 'mushrooms', label: 'Mushrooms' },
+    { value: 'olives', label: 'Olives' },
+  ];
+}
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+### 4. Required + validation error
+
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { EgFormSelect } from '@egose/shadcn-theme-ng/form-select';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormSelect],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      <eg-form-select
+        controlName="country"
+        label="Country"
+        placeholder="Select a country"
+        [options]="countries"
+        error="Country is required"
+        required
+      />
+      <button type="submit">Continue</button>
+    </form>
+  `,
+})
+export class RequiredExample {
+  readonly form = new FormGroup({
+    country: new FormControl<string>('', { nonNullable: true, validators: Validators.required }),
+  });
+  readonly countries = [
+    { value: 'de', label: 'Germany' },
+    { value: 'fr', label: 'France' },
+  ];
+
+  submit() {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched(); // reveals the <hlm-error>
+      return;
+    }
+  }
+}
+```
+
+### 5. Disabled + empty-options state
+
+```ts
+import { Component, signal } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { EgFormSelect } from '@egose/shadcn-theme-ng/form-select';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormSelect],
+  template: `
+    <form [formGroup]="form">
+      <eg-form-select
+        controlName="plan"
+        label="Plan"
+        placeholder="Select a plan"
+        [options]="plans()"
+        [disabled]="loading()"
+        hint="Options arrive asynchronously"
+      />
+      <button type="button" (click)="load()">Load plans</button>
+    </form>
+  `,
+})
+export class DisabledExample {
+  readonly form = new FormGroup({
+    plan: new FormControl<string>('', { nonNullable: true }),
+  });
+  readonly loading = signal(true);
+  readonly plans = signal<{ value: string; label: string }[]>([]);
+
+  load() {
+    setTimeout(() => {
+      this.plans.set([
+        { value: 'free', label: 'Free' },
+        { value: 'pro', label: 'Pro' },
+      ]);
+      this.loading.set(false);
+    }, 800);
+  }
+}
+```
+
+### 6. Programmatic control + custom ids/classes
+
+```ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { EgFormSelect } from '@egose/shadcn-theme-ng/form-select';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormSelect],
+  template: `
+    <form [formGroup]="form">
+      <eg-form-select
+        #roleField
+        controlName="role"
+        controlId="user-role"
+        label="Role"
+        placeholder="Select a role"
+        [options]="roles"
+        class="tw:max-w-sm"
+        selectClass="tw:h-11"
+      />
+      <div class="tw:flex tw:gap-2">
+        <button type="button" (click)="form.controls.role.setValue('admin')">Make admin</button>
+        <button type="button" (click)="form.controls.role.reset()">Reset</button>
+      </div>
+      <p>Trigger id: {{ roleField.effectiveId() }}</p>
+    </form>
+  `,
+})
+export class ProgrammaticExample {
+  readonly form = new FormGroup({
+    role: new FormControl<string>('editor', { nonNullable: true }),
+  });
+  readonly roles = [
+    { value: 'admin', label: 'Admin' },
+    { value: 'editor', label: 'Editor' },
+    { value: 'viewer', label: 'Viewer' },
+  ];
+}
+```
+
+## Accessibility notes
+
+- The `<label [for]>` targets the trigger button (`buttonId`), so clicking the label opens the listbox.
+- `aria-describedby` on the trigger points at the error element when invalid + dirty/touched, else the hint element — screen readers announce the right message without extra wiring.
+- The dropdown itself is a spartan-ng listbox (roving `aria-activedescendant`, Escape to close, type-ahead). Keep option `label`s distinct and avoid stuffing status text into them.
+- `required` only decorates the label with `*`; add `Validators.required` so the invalid state (and error announcement) actually triggers.
+
+## Theming / CSS variables
+
+No component-specific CSS variables; visuals come from the shared theme tokens via the `HlmSelect*` parts. Use `selectClass` / `labelClass` / `errorClass` / `hintClass` / `class` to adjust sizing and spacing.
 
-## Additional Resources
+## Related subpaths
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+- `@egose/shadcn-theme-ng/select` — raw `HlmSelect`, `HlmSelectTrigger`, `HlmSelectValue`, `HlmSelectContent`, `HlmSelectItem`, `HlmSelectLabel` for custom layouts and grouped sections.
+- `@egose/shadcn-theme-ng/form-field` — `HlmFormField`, `HlmError`, `HlmHint`, `HlmFormIdGenerator`.
+- `@egose/shadcn-theme-ng/label` — `HlmLabel`.
+- `@egose/shadcn-theme-ng/form-searchable-multiselect` — searchable checkbox-popover alternative for long option lists.

package/form-select/fesm2022/form-select.mjs

@@ -1,15 +1,17 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component } from '@angular/core';
+import { inject, input, computed, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { ReactiveFormsModule, FormGroupDirective, ControlContainer } from '@angular/forms';
-import { HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng-tw/form-field';
+import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
+import { HlmFormIdGenerator, HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng-tw/form-field';
 import { HlmLabel } from '@egose/shadcn-theme-ng-tw/label';
 import { hlm } from '@egose/shadcn-theme-ng-tw/utils';
 import { BrnSelectImports } from '@spartan-ng/brain/select';
 import * as i2 from '@egose/shadcn-theme-ng-tw/select';
-import { HlmSelectImports, HlmSelect, HlmSelectTrigger, HlmSelectValue, HlmSelectContent, HlmSelectItem, HlmSelectLabel, HlmSelectPlaceholder } from '@egose/shadcn-theme-ng-tw/select';
+import { HlmSelectImports, HlmSelect, HlmSelectTrigger, HlmSelectValue, HlmSelectContent, HlmSelectItem, HlmSelectLabel } from '@egose/shadcn-theme-ng-tw/select';
 
 class EgFormSelect {
+    formGroupDirective = inject(FormGroupDirective);
+    generatedId = inject(HlmFormIdGenerator).generate('eg-form-select');
     label = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     controlId = input(undefined, /* @ts-ignore */
@@ -21,7 +23,7 @@ class EgFormSelect {
     hint = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     // HTML/select attributes
-    id = input(crypto.randomUUID(), /* @ts-ignore */
+    id = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     placeholder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -29,6 +31,20 @@ class EgFormSelect {
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     required = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    effectiveId = computed(() => this.controlId() || this.id() || this.generatedId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => `${this.effectiveId()}-error`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => `${this.effectiveId()}-hint`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    describedBy() {
+        const control = this.formGroupDirective.form.get(this.controlName());
+        return this.error() && control?.invalid && (control.dirty || control.touched)
+            ? this.errorId()
+            : this.hint()
+                ? this.hintId()
+                : null;
+    }
     // Select-specific
     multiple = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
@@ -57,10 +73,9 @@ class EgFormSelect {
     ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
     $hintClass = computed(() => hlm('tw:mt-0', this.hintClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EgFormSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: EgFormSelect, isStandalone: true, selector: "eg-form-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsLabel: { classPropertyName: "optionsLabel", publicName: "optionsLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tw:w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgFormSelect, isStandalone: true, selector: "eg-form-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, controlId: { classPropertyName: "controlId", publicName: "controlId", isSignal: true, isRequired: false, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionsLabel: { classPropertyName: "optionsLabel", publicName: "optionsLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, selectClass: { classPropertyName: "selectClass", publicName: "selectClass", isSignal: true, isRequired: false, transformFunction: null }, errorClass: { classPropertyName: "errorClass", publicName: "errorClass", isSignal: true, isRequired: false, transformFunction: null }, hintClass: { classPropertyName: "hintClass", publicName: "hintClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tw:w-full" }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
     @let lbl = label();
-    @let cid = controlId();
     @let cnm = controlName();
     @let err = error();
     @let hnt = hint();
@@ -68,17 +83,22 @@ class EgFormSelect {
 
     <hlm-form-field>
       @if (lbl) {
-        <span hlmLabel [class]="$labelClass()"
+        <label hlmLabel [for]="effectiveId()" [class]="$labelClass()"
           >{{ lbl }}
           @if (rqrd) {
             <span class="tw:text-red-500">*</span>
           }
-        </span>
+        </label>
       }
 
       @if (multiple()) {
-        <brn-select-multiple hlmSelect [id]="cid || id()" [formControlName]="cnm">
-          <hlm-select-trigger [class]="$selectClass()">
+        <brn-select-multiple hlmSelect [formControlName]="cnm">
+          <hlm-select-trigger
+            [buttonId]="effectiveId()"
+            [ariaDescribedby]="describedBy()"
+            [wrapperDisabled]="disabled()"
+            [class]="$selectClass()"
+          >
             <hlm-select-value [placeholder]="placeholder()" />
           </hlm-select-trigger>
 
@@ -94,8 +114,13 @@ class EgFormSelect {
           </hlm-select-content>
         </brn-select-multiple>
       } @else {
-        <brn-select hlmSelect [id]="cid || id()" [formControlName]="cnm">
-          <hlm-select-trigger [class]="$selectClass()">
+        <brn-select hlmSelect [formControlName]="cnm">
+          <hlm-select-trigger
+            [buttonId]="effectiveId()"
+            [ariaDescribedby]="describedBy()"
+            [wrapperDisabled]="disabled()"
+            [class]="$selectClass()"
+          >
             <hlm-select-value [placeholder]="placeholder()" />
           </hlm-select-trigger>
 
@@ -113,20 +138,20 @@ class EgFormSelect {
       }
 
       @if (err) {
-        <hlm-error [class]="$errorClass()">
+        <hlm-error [id]="errorId()" [class]="$errorClass()">
           {{ err }}
         </hlm-error>
       }
 
       @if (hnt) {
-        <hlm-hint [class]="$hintClass()">
+        <hlm-hint [id]="hintId()" [class]="$hintClass()">
           {{ hnt }}
         </hlm-hint>
       }
     </hlm-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectLabel, selector: "[hlmSelectLabel],hlm-select-label" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: HlmFormField, selector: "hlm-form-field", inputs: ["class"] }, { kind: "directive", type: HlmError, selector: "hlm-error", inputs: ["class"] }, { kind: "directive", type: HlmHint, selector: "hlm-hint", inputs: ["class"] }, { kind: "directive", type: HlmLabel, selector: "[hlmLabel]", inputs: ["class"] }, { kind: "directive", type: i2.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i2.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "component", type: i2.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i2.HlmSelectLabel, selector: "[hlmSelectLabel],hlm-select-label" }, { kind: "component", type: i2.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i2.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EgFormSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'eg-form-select',
@@ -148,12 +173,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         HlmSelectContent,
                         HlmSelectItem,
                         HlmSelectLabel,
-                        HlmSelectPlaceholder,
                     ],
                     providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }],
                     template: `
     @let lbl = label();
-    @let cid = controlId();
     @let cnm = controlName();
     @let err = error();
     @let hnt = hint();
@@ -161,17 +184,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
     <hlm-form-field>
       @if (lbl) {
-        <span hlmLabel [class]="$labelClass()"
+        <label hlmLabel [for]="effectiveId()" [class]="$labelClass()"
           >{{ lbl }}
           @if (rqrd) {
             <span class="tw:text-red-500">*</span>
           }
-        </span>
+        </label>
       }
 
       @if (multiple()) {
-        <brn-select-multiple hlmSelect [id]="cid || id()" [formControlName]="cnm">
-          <hlm-select-trigger [class]="$selectClass()">
+        <brn-select-multiple hlmSelect [formControlName]="cnm">
+          <hlm-select-trigger
+            [buttonId]="effectiveId()"
+            [ariaDescribedby]="describedBy()"
+            [wrapperDisabled]="disabled()"
+            [class]="$selectClass()"
+          >
             <hlm-select-value [placeholder]="placeholder()" />
           </hlm-select-trigger>
 
@@ -187,8 +215,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           </hlm-select-content>
         </brn-select-multiple>
       } @else {
-        <brn-select hlmSelect [id]="cid || id()" [formControlName]="cnm">
-          <hlm-select-trigger [class]="$selectClass()">
+        <brn-select hlmSelect [formControlName]="cnm">
+          <hlm-select-trigger
+            [buttonId]="effectiveId()"
+            [ariaDescribedby]="describedBy()"
+            [wrapperDisabled]="disabled()"
+            [class]="$selectClass()"
+          >
             <hlm-select-value [placeholder]="placeholder()" />
           </hlm-select-trigger>
 
@@ -206,13 +239,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
       }
 
       @if (err) {
-        <hlm-error [class]="$errorClass()">
+        <hlm-error [id]="errorId()" [class]="$errorClass()">
           {{ err }}
         </hlm-error>
       }
 
       @if (hnt) {
-        <hlm-hint [class]="$hintClass()">
+        <hlm-hint [id]="hintId()" [class]="$hintClass()">
           {{ hnt }}
         </hlm-hint>
       }
@@ -230,4 +263,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { EgFormSelect };
-//# sourceMappingURL=form-select.mjs.map
+

package/form-select/types/form-select.d.ts

@@ -6,15 +6,21 @@ interface SelectOption {
     label: string;
 }
 declare class EgFormSelect {
+    private readonly formGroupDirective;
+    private readonly generatedId;
     label: _angular_core.InputSignal<string | undefined>;
     controlId: _angular_core.InputSignal<string | undefined>;
     controlName: _angular_core.InputSignal<string>;
     error: _angular_core.InputSignal<string | undefined>;
     hint: _angular_core.InputSignal<string | undefined>;
-    id: _angular_core.InputSignal<string>;
+    id: _angular_core.InputSignal<string | undefined>;
     placeholder: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     required: _angular_core.InputSignal<boolean>;
+    readonly effectiveId: _angular_core.Signal<string>;
+    readonly errorId: _angular_core.Signal<string>;
+    readonly hintId: _angular_core.Signal<string>;
+    describedBy(): string | null;
     multiple: _angular_core.InputSignal<boolean>;
     options: _angular_core.InputSignal<SelectOption[]>;
     optionsLabel: _angular_core.InputSignal<string | undefined>;