@egose/shadcn-theme-ng-tw 0.1.0 → 0.3.0

package/form-select/README.md

@@ -1,3 +1,361 @@
-# Form Select Subpath
+# Form Select (`@egose/shadcn-theme-ng/form-select`)
 
-This project ships only as `@egose/shadcn-theme-ng/form-select` or `@egose/shadcn-theme-ng-tw/form-select`. See the [package README](../../README.md) for installation, compatibility, Tailwind variant, test, and release guidance. Do not publish this project directory independently.
+`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.
+
+> **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.
+
+## Installation
+
+```bash
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+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).
+
+```ts
+import { EgFormSelect } from '@egose/shadcn-theme-ng/form-select';
+// tw variant:
+// import { EgFormSelect } from '@egose/shadcn-theme-ng-tw/form-select';
+```
+
+## Imports
+
+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.
+
+```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 {}
+```
+
+Requirements:
+
+- 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[]`.
+
+## Anatomy / Structure
+
+```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>
+```
+
+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`.
+
+## API reference
+
+### `eg-form-select` — `EgFormSelect`
+
+| 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`).                                                               |
+
+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'
+  }
+}
+```
+
+### 2. Grouped options with `optionsLabel`
+
+```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="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' },
+  ];
+}
+```
+
+### 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.
+
+Global defaults per styling slot via the wrapper config (precedence: library base < global config < per-instance):
+
+```ts
+import { provideEgFormSelectConfig } from '@egose/shadcn-theme-ng/form-select';
+
+await bootstrapApplication(App, {
+  providers: [provideEgFormSelectConfig({ selectClass: 'tw:text-sm', labelClass: 'tw:font-medium' })],
+});
+```
+
+## Related subpaths
+
+- `@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,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, Component } from '@angular/core';
+import { InjectionToken, inject, input, computed, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroupDirective, ReactiveFormsModule, ControlContainer } from '@angular/forms';
 import { HlmFormIdGenerator, HlmFormField, HlmError, HlmHint } from '@egose/shadcn-theme-ng-tw/form-field';
@@ -9,9 +9,18 @@ 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 } from '@egose/shadcn-theme-ng-tw/select';
 
+const EgFormSelectConfigToken = new InjectionToken('EgFormSelectConfig');
+function provideEgFormSelectConfig(config) {
+    return { provide: EgFormSelectConfigToken, useValue: { ...config } };
+}
+function injectEgFormSelectConfig() {
+    return inject(EgFormSelectConfigToken, { optional: true }) ?? {};
+}
+
 class EgFormSelect {
     formGroupDirective = inject(FormGroupDirective);
     generatedId = inject(HlmFormIdGenerator).generate('eg-form-select');
+    _config = injectEgFormSelectConfig();
     label = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     controlId = input(undefined, /* @ts-ignore */
@@ -62,19 +71,19 @@ class EgFormSelect {
     ...(ngDevMode ? [{ debugName: "errorClass" }] : /* istanbul ignore next */ []));
     hintClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hintClass" }] : /* istanbul ignore next */ []));
-    // Computed classes
-    $userClass = computed(() => hlm('tw:flex tw:flex-col', this.userClass()), /* @ts-ignore */
+    // Computed classes (library base < global config < per-instance)
+    $userClass = computed(() => hlm('tw:w-full', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$userClass" }] : /* istanbul ignore next */ []));
-    $labelClass = computed(() => hlm('tw:mb-1 tw:gap-0', this.labelClass()), /* @ts-ignore */
+    $labelClass = computed(() => hlm('tw:mb-1 tw:gap-0', this._config.labelClass, this.labelClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$labelClass" }] : /* istanbul ignore next */ []));
-    $selectClass = computed(() => hlm('tw:w-full', this.selectClass()), /* @ts-ignore */
+    $selectClass = computed(() => hlm('tw:w-full', this._config.selectClass, this.selectClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$selectClass" }] : /* istanbul ignore next */ []));
-    $errorClass = computed(() => hlm('tw:mt-0', this.errorClass()), /* @ts-ignore */
+    $errorClass = computed(() => hlm('tw:mt-0', this._config.errorClass, this.errorClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$errorClass" }] : /* istanbul ignore next */ []));
-    $hintClass = computed(() => hlm('tw:mt-0', this.hintClass()), /* @ts-ignore */
+    $hintClass = computed(() => hlm('tw:mt-0', this._config.hintClass, this.hintClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "$hintClass" }] : /* istanbul ignore next */ []));
     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: `
+    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: { properties: { "class": "$userClass()" } }, providers: [{ provide: ControlContainer, useExisting: FormGroupDirective }], ngImport: i0, template: `
     @let lbl = label();
     @let cnm = controlName();
     @let err = error();
@@ -102,7 +111,7 @@ class EgFormSelect {
             <hlm-select-value [placeholder]="placeholder()" />
           </hlm-select-trigger>
 
-          <hlm-select-content>
+          <hlm-select-content *hlmSelectPortal>
             @if (options().length) {
               @if (optionsLabel()) {
                 <hlm-select-label>{{ optionsLabel() }}</hlm-select-label>
@@ -124,7 +133,7 @@ class EgFormSelect {
             <hlm-select-value [placeholder]="placeholder()" />
           </hlm-select-trigger>
 
-          <hlm-select-content>
+          <hlm-select-content *hlmSelectPortal>
             @if (options().length) {
               @if (optionsLabel()) {
                 <hlm-select-label>{{ optionsLabel() }}</hlm-select-label>
@@ -149,7 +158,7 @@ class EgFormSelect {
         </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", "ariaDescribedby", "wrapperDisabled", "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: "directive", type: i2.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { 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.1.3", ngImport: i0, type: EgFormSelect, decorators: [{
             type: Component,
@@ -157,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'eg-form-select',
                     standalone: true,
                     host: {
-                        class: 'tw:w-full',
+                        '[class]': '$userClass()',
                     },
                     imports: [
                         ReactiveFormsModule,
@@ -203,7 +212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
             <hlm-select-value [placeholder]="placeholder()" />
           </hlm-select-trigger>
 
-          <hlm-select-content>
+          <hlm-select-content *hlmSelectPortal>
             @if (options().length) {
               @if (optionsLabel()) {
                 <hlm-select-label>{{ optionsLabel() }}</hlm-select-label>
@@ -225,7 +234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
             <hlm-select-value [placeholder]="placeholder()" />
           </hlm-select-trigger>
 
-          <hlm-select-content>
+          <hlm-select-content *hlmSelectPortal>
             @if (options().length) {
               @if (optionsLabel()) {
                 <hlm-select-label>{{ optionsLabel() }}</hlm-select-label>
@@ -262,5 +271,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EgFormSelect };
+export { EgFormSelect, injectEgFormSelectConfig, provideEgFormSelectConfig };
 

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

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { ValueProvider } from '@angular/core';
 import { ClassValue } from 'clsx';
 
 interface SelectOption {
@@ -8,6 +9,7 @@ interface SelectOption {
 declare class EgFormSelect {
     private readonly formGroupDirective;
     private readonly generatedId;
+    private readonly _config;
     label: _angular_core.InputSignal<string | undefined>;
     controlId: _angular_core.InputSignal<string | undefined>;
     controlName: _angular_core.InputSignal<string>;
@@ -38,4 +40,19 @@ declare class EgFormSelect {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgFormSelect, "eg-form-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "controlId": { "alias": "controlId"; "required": false; "isSignal": true; }; "controlName": { "alias": "controlName"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionsLabel": { "alias": "optionsLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "selectClass": { "alias": "selectClass"; "required": false; "isSignal": true; }; "errorClass": { "alias": "errorClass"; "required": false; "isSignal": true; }; "hintClass": { "alias": "hintClass"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { EgFormSelect };
+interface EgFormSelectConfig {
+    /**
+     * Global class defaults for `eg-form-select` styling slots.
+     * Each is merged under the matching per-instance `*Class` input
+     * (library base < global config < per-instance).
+     */
+    labelClass?: string;
+    selectClass?: string;
+    errorClass?: string;
+    hintClass?: string;
+}
+declare function provideEgFormSelectConfig(config: Partial<EgFormSelectConfig>): ValueProvider;
+declare function injectEgFormSelectConfig(): EgFormSelectConfig;
+
+export { EgFormSelect, injectEgFormSelectConfig, provideEgFormSelectConfig };
+export type { EgFormSelectConfig };