@egose/shadcn-theme-ng-tw 0.6.1 → 0.6.3

package/data-table/README.md

@@ -156,7 +156,7 @@ Key `EgDataTable` inputs: `columns` (required), `gridColumns`, `data` (array, or
 
 Outputs: `selectionChange` (also fires once on init, mirroring React's mount effect), `pageChange`, `pageSizeChange`, `rowClick`, `sortingChange`, `columnFiltersChange`, `filterChange` (toolbar input string), `columnVisibilityChange`.
 
-The toolbar (`showToolbar`) always renders the filter input: with `filterColumnId` it filters that column client-side (and `filterChange` mirrors the string); without it, keystrokes only emit `filterChange` so the caller can filter server-side. The column-visibility dropdown is opt-in via `showColumnToggle` (default `false`). `toolbarActions` takes an `ng-template` rendered on the right side of the toolbar row (built-ins stay left) — it renders the row even when `showToolbar` is false.
+The toolbar (`showToolbar`) always renders the filter input: with `filterColumnId` it filters that column client-side (and `filterChange` mirrors the string); without it, keystrokes only emit `filterChange` so the caller can filter server-side. The column-visibility dropdown is opt-in via `showColumnToggle` (default `false`, requires `showToolbar`). `showColumnToggle` also enables hiding: the `Hide` item in `EgDataTableColumnHeader` only renders when it is true (TanStack `column.getCanHide()`), so a hidden column always has a way back via View; per-column `enableHiding: false` disables individual columns even then. `toolbarActions` takes an `ng-template` rendered on the right side of the toolbar row (built-ins stay left) — it renders the row even when `showToolbar` is false.
 
 `size` scales spatial density one step down/up (`sm`: `h-8` headers, `p-1` cells, `h-7` buttons; `lg`: `h-12` headers, `p-3` cells, `h-9` buttons; filter input, page-size trigger, and pager meta texts follow). `EgDataTableColumnHeader` (consumer-instantiated via `flexRenderComponent`) takes the same `size` — for reactive updates put every input in `bindings` (`inputBinding('size', ...)`, plus `column`/`title`, since `bindings` cannot mix with `inputs`).
 

package/data-table/fesm2022/data-table.mjs

@@ -368,7 +368,7 @@ class EgDataTableViewOptions {
       type="button"
       [hlmDropdownMenuTrigger]="_menu"
     >
-      <ng-icon hlm name="lucideSettings2" />
+      <ng-icon hlm size="sm" name="lucideSettings2" />
       View
     </button>
     <ng-template #_menu>
@@ -406,7 +406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       type="button"
       [hlmDropdownMenuTrigger]="_menu"
     >
-      <ng-icon hlm name="lucideSettings2" />
+      <ng-icon hlm size="sm" name="lucideSettings2" />
       View
     </button>
     <ng-template #_menu>
@@ -560,7 +560,7 @@ class EgDataTable {
     ...(ngDevMode ? [{ debugName: "filterColumnId" }] : /* istanbul ignore next */ []));
     filterPlaceholder = input('Filter...', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
-    /** Show the column-visibility dropdown inside the toolbar. Off by default; opt in per table. */
+    /** Show the column-visibility dropdown inside the toolbar (requires `showToolbar`). Off by default; opt in per table. Also enables hiding — the `Hide` item in `EgDataTableColumnHeader` only renders when this is true, so hidden columns always have a way back. Per-column `enableHiding: false` further disables individual columns. */
     showColumnToggle = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showColumnToggle" }] : /* istanbul ignore next */ []));
     /** Custom right-side toolbar content (e.g. action buttons) as a template. Renders the toolbar row even when `showToolbar` is false; built-ins stay on the left. */
@@ -722,6 +722,10 @@ class EgDataTable {
             columns: this._finalColumns(),
             data: this._tableItems(),
             getRowId: this.getRowId(),
+            // Hiding is only allowed when the View menu can bring columns back.
+            // This drives `column.getCanHide()` for both `EgDataTableColumnHeader`
+            // (Hide item) and `EgDataTableViewOptions` (toggle list).
+            enableHiding: this.showColumnToggle(),
             manualPagination: server,
             manualSorting: server,
             manualFiltering: server,
@@ -1324,7 +1328,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
  *
  * Render via `flexRenderComponent(EgDataTableColumnHeader, { inputs: { column, title } })`
  * so the extra `title` input flows alongside the flex-render `column` context.
- * Non-sortable columns render a plain label.
+ * Non-sortable columns render a plain label. The `Hide` menu item only renders
+ * when `column.getCanHide()` is true — `EgDataTable` ties table-level
+ * `enableHiding` to its `showColumnToggle` input so there is always a way back
+ * via the View menu, and per-column `enableHiding: false` further disables it.
  */
 class EgDataTableColumnHeader {
     column = input.required(/* @ts-ignore */
@@ -1336,6 +1343,9 @@ class EgDataTableColumnHeader {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _sorted = computed(() => this.column().getIsSorted(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_sorted" }] : /* istanbul ignore next */ []));
+    /** Hideable only when TanStack allows it (table + column `enableHiding`). Absent `getCanHide` (legacy mocks) means hideable. */
+    _canHide = computed(() => this.column().getCanHide?.() ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canHide" }] : /* istanbul ignore next */ []));
     /** Height per density. Merged by `hlmButton`. */
     _buttonClass = computed(() => hlm('tw:-ml-3', this.size() === 'sm' ? 'tw:h-7' : this.size() === 'lg' ? 'tw:h-9' : 'tw:h-8'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_buttonClass" }] : /* istanbul ignore next */ []));
@@ -1374,11 +1384,13 @@ class EgDataTableColumnHeader {
               <ng-icon hlm size="sm" name="lucideArrowDown" />
               Desc
             </button>
-            <div hlmDropdownMenuSeparator></div>
-            <button hlmDropdownMenuItem type="button" (click)="column().toggleVisibility(false)">
-              <ng-icon hlm size="sm" name="lucideEyeOff" />
-              Hide
-            </button>
+            @if (_canHide()) {
+              <div hlmDropdownMenuSeparator></div>
+              <button hlmDropdownMenuItem type="button" (click)="column().toggleVisibility(false)">
+                <ng-icon hlm size="sm" name="lucideEyeOff" />
+                Hide
+              </button>
+            }
           </div>
         </ng-template>
       </div>
@@ -1427,11 +1439,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
               <ng-icon hlm size="sm" name="lucideArrowDown" />
               Desc
             </button>
-            <div hlmDropdownMenuSeparator></div>
-            <button hlmDropdownMenuItem type="button" (click)="column().toggleVisibility(false)">
-              <ng-icon hlm size="sm" name="lucideEyeOff" />
-              Hide
-            </button>
+            @if (_canHide()) {
+              <div hlmDropdownMenuSeparator></div>
+              <button hlmDropdownMenuItem type="button" (click)="column().toggleVisibility(false)">
+                <ng-icon hlm size="sm" name="lucideEyeOff" />
+                Hide
+              </button>
+            }
           </div>
         </ng-template>
       </div>

package/data-table/types/data-table.d.ts

@@ -237,7 +237,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     /** Column id the toolbar filter input writes to (e.g. `'email'`). Empty means client-side filtering is skipped and keystrokes only emit `filterChange` (server-side pattern). */
     readonly filterColumnId: _angular_core.InputSignal<string>;
     readonly filterPlaceholder: _angular_core.InputSignal<string>;
-    /** Show the column-visibility dropdown inside the toolbar. Off by default; opt in per table. */
+    /** Show the column-visibility dropdown inside the toolbar (requires `showToolbar`). Off by default; opt in per table. Also enables hiding — the `Hide` item in `EgDataTableColumnHeader` only renders when this is true, so hidden columns always have a way back. Per-column `enableHiding: false` further disables individual columns. */
     readonly showColumnToggle: _angular_core.InputSignal<boolean>;
     /** Custom right-side toolbar content (e.g. action buttons) as a template. Renders the toolbar row even when `showToolbar` is false; built-ins stay on the left. */
     readonly toolbarActions: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
@@ -381,13 +381,18 @@ interface EgSortableColumn {
     getIsSorted(): false | SortDirection;
     toggleSorting(desc?: boolean): void;
     toggleVisibility(value?: boolean): void;
+    /** Whether the column can be hidden (`columnDef.enableHiding` and table `enableHiding`). Optional for back-compat mocks — absent means hideable. */
+    getCanHide?(): boolean;
 }
 /**
  * Sortable + hideable column header.
  *
  * Render via `flexRenderComponent(EgDataTableColumnHeader, { inputs: { column, title } })`
  * so the extra `title` input flows alongside the flex-render `column` context.
- * Non-sortable columns render a plain label.
+ * Non-sortable columns render a plain label. The `Hide` menu item only renders
+ * when `column.getCanHide()` is true — `EgDataTable` ties table-level
+ * `enableHiding` to its `showColumnToggle` input so there is always a way back
+ * via the View menu, and per-column `enableHiding: false` further disables it.
  */
 declare class EgDataTableColumnHeader {
     readonly column: _angular_core.InputSignal<EgSortableColumn>;
@@ -395,6 +400,8 @@ declare class EgDataTableColumnHeader {
     /** Density of the trigger button. */
     readonly size: _angular_core.InputSignal<HlmTableSize>;
     protected readonly _sorted: _angular_core.Signal<false | SortDirection>;
+    /** Hideable only when TanStack allows it (table + column `enableHiding`). Absent `getCanHide` (legacy mocks) means hideable. */
+    protected readonly _canHide: _angular_core.Signal<boolean>;
     /** Height per density. Merged by `hlmButton`. */
     protected readonly _buttonClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgDataTableColumnHeader, never>;

package/form-select/README.md

@@ -44,8 +44,9 @@ 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`.
+- `controlName` is required — forwarded as `[formControlName]` to the inner `hlm-select` / `hlm-select-multiple`.
 - Single mode binds `string`; multi mode (`multiple`) binds `string[]`.
+- The closed trigger always shows the option `label` (single: via `itemToString`; multi: comma-joined labels). The form value stays the raw `value` string(s).
 
 ## Anatomy / Structure
 
@@ -54,7 +55,7 @@ Requirements:
   <!-- rendered internally (single mode) -->
   <hlm-form-field>
     <label hlmLabel for="<effectiveId>">Country <span>*</span></label>
-    <brn-select hlmSelect formControlName="country">
+    <hlm-select formControlName="country" itemToString="…">
       <hlm-select-trigger buttonId="<effectiveId>" ariaDescribedby="…">
         <hlm-select-value placeholder="Select…" />
       </hlm-select-trigger>
@@ -62,14 +63,14 @@ Requirements:
         <hlm-select-label>Fruits</hlm-select-label>
         <hlm-select-item value="apple">Apple</hlm-select-item>
       </hlm-select-content>
-    </brn-select>
+    </hlm-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`.
+In multi mode the inner `hlm-select` becomes `hlm-select-multiple` and the trigger renders `<hlm-select-placeholder>` plus an `hlmSelectValues` template with comma-joined labels inside `<hlm-select-values-content>`; everything else is identical. Real selectors: `eg-form-select`, `hlm-form-field`, `label[hlmLabel]`, `hlm-select` / `hlm-select-multiple`, `hlm-select-trigger`, `hlm-select-value` (single) / `hlm-select-placeholder` + `hlm-select-values-content` (multi), `hlm-select-content`, `hlm-select-label`, `hlm-select-item`, `hlm-error`, `hlm-hint`.
 
 ## API reference
 
@@ -84,11 +85,11 @@ In multi mode the inner `brn-select` becomes `brn-select-multiple`; everything e
 | `error`               | `string \| undefined` | `undefined` | Error text rendered in `<hlm-error>`.                                                                                                                                                            |
 | `autoError`           | `boolean`             | `true`      | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`. |
 | `hint`                | `string \| undefined` | `undefined` | Hint text rendered in `<hlm-hint>`.                                                                                                                                                              |
-| `placeholder`         | `string`              | `''`        | Placeholder forwarded to `<hlm-select-value>`.                                                                                                                                                   |
+| `placeholder`         | `string`              | `''`        | Placeholder forwarded to `<hlm-select-value>` (single) / `<hlm-select-placeholder>` (multi).                                                                                                     |
 | `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.                                                                                        |
+| `multiple`            | `boolean`             | `false`     | When `true`, renders `hlm-select-multiple` (value is `string[]`, trigger shows comma-joined labels).                                                                                             |
+| `options`             | `SelectOption[]`      | `[]`        | `{ value: string; label: string }[]` rendered as `<hlm-select-item>` rows. `label` is shown in the list and the closed trigger; `value` is the form value. 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`).                                                                                                                                            |

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

@@ -7,7 +7,7 @@ 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 } from '@egose/shadcn-theme-ng-tw/select';
+import { HlmSelectImports, HlmSelect, HlmSelectMultiple, HlmSelectTrigger, HlmSelectValue, HlmSelectPlaceholder, HlmSelectValues, HlmSelectValuesContent, HlmSelectContent, HlmSelectItem, HlmSelectLabel } from '@egose/shadcn-theme-ng-tw/select';
 
 const EgFormSelectConfigToken = new InjectionToken('EgFormSelectConfig');
 function provideEgFormSelectConfig(config) {
@@ -91,6 +91,32 @@ class EgFormSelect {
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     optionsLabel = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "optionsLabel" }] : /* istanbul ignore next */ [])); // optional group label
+    /**
+     * Maps a stored `value` to its human-readable `label` for the closed trigger
+     * (and listbox type-ahead). Spartan's `BrnSelectValue` renders
+     * `stringifyAsLabel(value, itemToString)` — without this it would show the raw
+     * value (e.g. `jahn` instead of `J. Hahn`). Unknown IDs fall back to the raw
+     * value so async/programmatic values stay visible. Plain arrow-function
+     * property (stable identity); reads `options()` at call time so Spartan's
+     * display computed re-evaluates when options arrive.
+     */
+    itemToString = (value) => {
+        if (value === null || value === undefined)
+            return '';
+        return this.options().find((option) => option.value === value)?.label ?? String(value);
+    };
+    /**
+     * Comma-joined labels for multi-select trigger content. Plain method (not a
+     * computed): `values` comes from the `hlmSelectValues` template context, while
+     * `options()` is read fresh so late-arriving options refresh labels without
+     * touching selection — mirroring the React `FormMultiSelect` fallback.
+     */
+    formatMultipleLabels(values) {
+        if (!values?.length)
+            return '';
+        const labels = new Map(this.options().map((option) => [option.value, option.label]));
+        return values.map((value) => labels.get(value) ?? String(value)).join(', ');
+    }
     // Styling classes
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     labelClass = input('', /* @ts-ignore */
@@ -130,14 +156,19 @@ class EgFormSelect {
       }
 
       @if (multiple()) {
-        <brn-select-multiple hlmSelect [formControlName]="cnm">
+        <hlm-select-multiple [formControlName]="cnm" [itemToString]="itemToString">
           <hlm-select-trigger
             [buttonId]="effectiveId()"
             [ariaDescribedby]="describedBy()"
             [wrapperDisabled]="disabled()"
             [class]="$selectClass()"
           >
-            <hlm-select-value [placeholder]="placeholder()" />
+            <hlm-select-placeholder>{{ placeholder() }}</hlm-select-placeholder>
+            <ng-template hlmSelectValues let-values>
+              <hlm-select-values-content>
+                {{ formatMultipleLabels(values) }}
+              </hlm-select-values-content>
+            </ng-template>
           </hlm-select-trigger>
 
           <hlm-select-content *hlmSelectPortal>
@@ -150,9 +181,9 @@ class EgFormSelect {
               }
             }
           </hlm-select-content>
-        </brn-select-multiple>
+        </hlm-select-multiple>
       } @else {
-        <brn-select hlmSelect [formControlName]="cnm">
+        <hlm-select [formControlName]="cnm" [itemToString]="itemToString">
           <hlm-select-trigger
             [buttonId]="effectiveId()"
             [ariaDescribedby]="describedBy()"
@@ -172,7 +203,7 @@ class EgFormSelect {
               }
             }
           </hlm-select-content>
-        </brn-select>
+        </hlm-select>
       }
 
       @if (showError()) {
@@ -187,7 +218,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: "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" }] });
+  `, 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.HlmSelectMultiple, selector: "[hlmSelectMultiple],hlm-select-multiple" }, { kind: "directive", type: i2.HlmSelectPlaceholder, selector: "[hlmSelectPlaceholder],hlm-select-placeholder" }, { 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" }, { kind: "directive", type: i2.HlmSelectValues, selector: "[hlmSelectValues]" }, { kind: "directive", type: i2.HlmSelectValuesContent, selector: "[hlmSelectValuesContent],hlm-select-values-content" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormSelect, decorators: [{
             type: Component,
@@ -206,8 +237,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         BrnSelectImports,
                         HlmSelectImports,
                         HlmSelect,
+                        HlmSelectMultiple,
                         HlmSelectTrigger,
                         HlmSelectValue,
+                        HlmSelectPlaceholder,
+                        HlmSelectValues,
+                        HlmSelectValuesContent,
                         HlmSelectContent,
                         HlmSelectItem,
                         HlmSelectLabel,
@@ -230,14 +265,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       }
 
       @if (multiple()) {
-        <brn-select-multiple hlmSelect [formControlName]="cnm">
+        <hlm-select-multiple [formControlName]="cnm" [itemToString]="itemToString">
           <hlm-select-trigger
             [buttonId]="effectiveId()"
             [ariaDescribedby]="describedBy()"
             [wrapperDisabled]="disabled()"
             [class]="$selectClass()"
           >
-            <hlm-select-value [placeholder]="placeholder()" />
+            <hlm-select-placeholder>{{ placeholder() }}</hlm-select-placeholder>
+            <ng-template hlmSelectValues let-values>
+              <hlm-select-values-content>
+                {{ formatMultipleLabels(values) }}
+              </hlm-select-values-content>
+            </ng-template>
           </hlm-select-trigger>
 
           <hlm-select-content *hlmSelectPortal>
@@ -250,9 +290,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
               }
             }
           </hlm-select-content>
-        </brn-select-multiple>
+        </hlm-select-multiple>
       } @else {
-        <brn-select hlmSelect [formControlName]="cnm">
+        <hlm-select [formControlName]="cnm" [itemToString]="itemToString">
           <hlm-select-trigger
             [buttonId]="effectiveId()"
             [ariaDescribedby]="describedBy()"
@@ -272,7 +312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
               }
             }
           </hlm-select-content>
-        </brn-select>
+        </hlm-select>
       }
 
       @if (showError()) {

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

@@ -47,6 +47,23 @@ declare class EgFormSelect {
     multiple: _angular_core.InputSignal<boolean>;
     options: _angular_core.InputSignal<SelectOption[]>;
     optionsLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Maps a stored `value` to its human-readable `label` for the closed trigger
+     * (and listbox type-ahead). Spartan's `BrnSelectValue` renders
+     * `stringifyAsLabel(value, itemToString)` — without this it would show the raw
+     * value (e.g. `jahn` instead of `J. Hahn`). Unknown IDs fall back to the raw
+     * value so async/programmatic values stay visible. Plain arrow-function
+     * property (stable identity); reads `options()` at call time so Spartan's
+     * display computed re-evaluates when options arrive.
+     */
+    readonly itemToString: (value: string | null | undefined) => string;
+    /**
+     * Comma-joined labels for multi-select trigger content. Plain method (not a
+     * computed): `values` comes from the `hlmSelectValues` template context, while
+     * `options()` is read fresh so late-arriving options refresh labels without
+     * touching selection — mirroring the React `FormMultiSelect` fallback.
+     */
+    protected formatMultipleLabels(values: string[] | null | undefined): string;
     userClass: _angular_core.InputSignal<ClassValue>;
     labelClass: _angular_core.InputSignal<string>;
     selectClass: _angular_core.InputSignal<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egose/shadcn-theme-ng-tw",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Angular shadcn UI theme",
   "author": "Junmin Ahn",
   "bundles": [

package/select/README.md

@@ -100,16 +100,15 @@ Single select:
 </div>
 ```
 
-Multi select (same skeleton, `hlmSelectMultiple` + `hlmSelectValues`):
+Multi select (same skeleton, `hlmSelectMultiple` + `hlmSelectValues` template):
 
 ```html
 <div hlmSelectMultiple [(value)]="toppings">
   <hlm-select-trigger>
-    <span hlmSelectValues>
-      <span hlmSelectValuesContent>
-        <span hlmSelectValue placeholder="Pick toppings" />
-      </span>
-    </span>
+    <hlm-select-placeholder>Pick toppings</hlm-select-placeholder>
+    <ng-template hlmSelectValues let-values>
+      <hlm-select-values-content> {{ formatToppings(values) }} </hlm-select-values-content>
+    </ng-template>
   </hlm-select-trigger>
 
   <hlm-select-content *hlmSelectPortal>
@@ -119,6 +118,8 @@ Multi select (same skeleton, `hlmSelectMultiple` + `hlmSelectValues`):
 </div>
 ```
 
+> Display rule: the closed trigger does **not** read the item content — single mode renders `itemToString(value)` (raw `value` when unset), so whenever the label differs from the value (e.g. `jahn` → `J. Hahn`) pass `[itemToString]` that maps values to labels. Multi mode renders whatever the `hlmSelectValues` template outputs, so map each id to its label there (see examples 1 and 4).
+
 Selector/slot summary:
 
 | Selector                                             | `data-slot`                        | Notes                                                         |
@@ -145,13 +146,13 @@ Selector/slot summary:
 
 Thin wrappers. Forwarded `BrnSelect` / `BrnSelectMultiple` bindings:
 
-| Binding              | Kind   | Description                                                  |
-| -------------------- | ------ | ------------------------------------------------------------ |
-| `disabled`           | input  | Disables the select                                          |
-| `value`              | input  | Selected value (single) / values (multiple); use `[(value)]` |
-| `isItemEqualToValue` | input  | Custom equality fn for object values                         |
-| `itemToString`       | input  | Custom label fn for object values                            |
-| `valueChange`        | output | Emits on selection change                                    |
+| Binding              | Kind   | Description                                                                                                                        |
+| -------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled`           | input  | Disables the select                                                                                                                |
+| `value`              | input  | Selected value (single) / values (multiple); use `[(value)]`                                                                       |
+| `isItemEqualToValue` | input  | Custom equality fn for object values                                                                                               |
+| `itemToString`       | input  | Maps a value to its trigger/type-ahead label. Required whenever the label differs from the value — without it the raw value shows. |
+| `valueChange`        | output | Emits on selection change                                                                                                          |
 
 Forwarded `BrnPopover` bindings (positioning of the floating panel):
 
@@ -194,18 +195,18 @@ Forwarded `BrnSelectItem` inputs: `id`, `disabled`, `value`. Shows a `lucideChec
 
 ### Remaining pieces
 
-| Class                    | Forwarded inputs                             | Notes                                           |
-| ------------------------ | -------------------------------------------- | ----------------------------------------------- |
-| `HlmSelectGroup`         | — (plain `BrnSelectGroup`)                   | Padding wrapper                                 |
-| `HlmSelectLabel`         | `id` (via `BrnSelectLabel`)                  | Muted small-caps-ish heading                    |
-| `HlmSelectValue`         | `placeholder` (via `BrnSelectValue`)         | Hides itself (`data-hidden`) when a value shows |
-| `HlmSelectValues`        | — (plain `BrnSelectValues`)                  | Multi-value host                                |
-| `HlmSelectValuesContent` | —                                            | Flex row with gap                               |
-| `HlmSelectPlaceholder`   | — (plain `BrnSelectPlaceholder`)             | Hides when a value shows (`data-hidden`)        |
-| `HlmSelectSeparator`     | `orientation` (via `BrnSelectSeparator`)     | 1px divider                                     |
-| `HlmSelectScrollUp/Down` | —                                            | Sticky chevron affordances                      |
-| `HlmSelectPortal`        | `context`, `class` (via `BrnPopoverContent`) | Structural use: `*hlmSelectPortal="let ctx"`    |
-| `HlmSelectValueTemplate` | — (plain `BrnSelectValueTemplate`)           | Marker for custom value rendering               |
+| Class                    | Forwarded inputs                             | Notes                                                                                   |
+| ------------------------ | -------------------------------------------- | --------------------------------------------------------------------------------------- |
+| `HlmSelectGroup`         | — (plain `BrnSelectGroup`)                   | Padding wrapper                                                                         |
+| `HlmSelectLabel`         | `id` (via `BrnSelectLabel`)                  | Muted small-caps-ish heading                                                            |
+| `HlmSelectValue`         | `placeholder` (via `BrnSelectValue`)         | Renders `itemToString(value)` or the placeholder; hidden when empty with no placeholder |
+| `HlmSelectValues`        | — (plain `BrnSelectValues`)                  | Multi-value template host (`<ng-template hlmSelectValues let-values>`)                  |
+| `HlmSelectValuesContent` | —                                            | Flex row with gap                                                                       |
+| `HlmSelectPlaceholder`   | — (plain `BrnSelectPlaceholder`)             | Hides when a value shows (`data-hidden`)                                                |
+| `HlmSelectSeparator`     | `orientation` (via `BrnSelectSeparator`)     | 1px divider                                                                             |
+| `HlmSelectScrollUp/Down` | —                                            | Sticky chevron affordances                                                              |
+| `HlmSelectPortal`        | `context`, `class` (via `BrnPopoverContent`) | Structural use: `*hlmSelectPortal="let ctx"`                                            |
+| `HlmSelectValueTemplate` | — (plain `BrnSelectValueTemplate`)           | Marker for custom value rendering                                                       |
 
 ## Examples
 
@@ -220,14 +221,14 @@ import { HlmSelectImports } from '@egose/shadcn-theme-ng/select';
   standalone: true,
   imports: [HlmSelectImports],
   template: `
-    <div hlmSelect [(value)]="fruit">
+    <div hlmSelect [(value)]="fruit" [itemToString]="fruitToString">
       <hlm-select-trigger>
         <hlm-select-value placeholder="Pick a fruit" />
       </hlm-select-trigger>
       <hlm-select-content *hlmSelectPortal>
-        <hlm-select-item value="apple">Apple</hlm-select-item>
-        <hlm-select-item value="banana">Banana</hlm-select-item>
-        <hlm-select-item value="orange">Orange</hlm-select-item>
+        @for (option of fruits; track option.value) {
+          <hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
+        }
       </hlm-select-content>
     </div>
     <p>Selected: {{ fruit() ?? 'none' }}</p>
@@ -235,13 +236,22 @@ import { HlmSelectImports } from '@egose/shadcn-theme-ng/select';
 })
 export class BasicSelectComponent {
   readonly fruit = signal<string | null>(null);
+  readonly fruits = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'orange', label: 'Orange' },
+  ];
+
+  // Without this the trigger would show `apple` instead of `Apple`.
+  readonly fruitToString = (value: string | null) =>
+    this.fruits.find((option) => option.value === value)?.label ?? value ?? '';
 }
 ```
 
 ### 2. Grouped options with labels, separator, disabled item, scroll buttons
 
 ```html
-<div hlmSelect [(value)]="city">
+<div hlmSelect [(value)]="city" [itemToString]="cityToString">
   <hlm-select-trigger>
     <hlm-select-value placeholder="Pick a city" />
   </hlm-select-trigger>
@@ -264,6 +274,19 @@ export class BasicSelectComponent {
 </div>
 ```
 
+```ts
+// Component companion: map every grouped value to its label so the trigger
+// shows `Berlin`, not `berlin`.
+readonly cities = [
+  { value: 'berlin', label: 'Berlin' },
+  { value: 'munich', label: 'Munich' },
+  { value: 'paris', label: 'Paris' },
+  { value: 'lyon', label: 'Lyon (unavailable)' },
+];
+readonly cityToString = (value: string | null) =>
+  this.cities.find((option) => option.value === value)?.label ?? value ?? '';
+```
+
 ### 3. Reactive forms + small trigger + forced invalid demo
 
 `BrnSelect` is a `ControlValueAccessor`: bind `formControlName` on the `hlmSelect` host.
@@ -279,14 +302,14 @@ import { HlmSelectImports } from '@egose/shadcn-theme-ng/select';
   imports: [HlmSelectImports, ReactiveFormsModule],
   template: `
     <form [formGroup]="form" (ngSubmit)="submit()">
-      <div hlmSelect formControlName="country">
+      <div hlmSelect formControlName="country" [itemToString]="countryToString">
         <hlm-select-trigger size="sm" ariaDescribedby="country-hint">
           <hlm-select-value placeholder="Country" />
         </hlm-select-trigger>
         <hlm-select-content *hlmSelectPortal>
-          <hlm-select-item value="de">Germany</hlm-select-item>
-          <hlm-select-item value="fr">France</hlm-select-item>
-          <hlm-select-item value="es">Spain</hlm-select-item>
+          @for (option of countries; track option.value) {
+            <hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
+          }
         </hlm-select-content>
       </div>
       <p id="country-hint" class="tw:text-muted-foreground tw:text-xs">Used for shipping.</p>
@@ -298,6 +321,13 @@ export class FormSelectComponent {
   readonly form = new FormGroup({
     country: new FormControl<string | null>(null, Validators.required),
   });
+  readonly countries = [
+    { value: 'de', label: 'Germany' },
+    { value: 'fr', label: 'France' },
+    { value: 'es', label: 'Spain' },
+  ];
+  readonly countryToString = (value: string | null) =>
+    this.countries.find((option) => option.value === value)?.label ?? value ?? '';
 
   submit(): void {
     this.form.markAllAsTouched();
@@ -318,16 +348,17 @@ import { HlmSelectImports } from '@egose/shadcn-theme-ng/select';
   template: `
     <div hlmSelectMultiple [(value)]="toppings">
       <hlm-select-trigger>
-        <span hlmSelectValues>
-          <span hlmSelectValuesContent>
-            <span hlmSelectValue placeholder="Pick toppings" />
-          </span>
-        </span>
+        <hlm-select-placeholder>Pick toppings</hlm-select-placeholder>
+        <ng-template hlmSelectValues let-values>
+          <hlm-select-values-content>
+            {{ formatToppings(values) }}
+          </hlm-select-values-content>
+        </ng-template>
       </hlm-select-trigger>
       <hlm-select-content *hlmSelectPortal>
-        <hlm-select-item value="cheese">Extra cheese</hlm-select-item>
-        <hlm-select-item value="bacon">Bacon</hlm-select-item>
-        <hlm-select-item value="mushrooms">Mushrooms</hlm-select-item>
+        @for (option of options; track option.value) {
+          <hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
+        }
       </hlm-select-content>
     </div>
     <p>{{ toppings().length }} selected</p>
@@ -335,6 +366,17 @@ import { HlmSelectImports } from '@egose/shadcn-theme-ng/select';
 })
 export class MultiSelectComponent {
   readonly toppings = signal<string[]>([]);
+  readonly options = [
+    { value: 'cheese', label: 'Extra cheese' },
+    { value: 'bacon', label: 'Bacon' },
+    { value: 'mushrooms', label: 'Mushrooms' },
+  ];
+
+  // The values template renders raw ids — map them to labels explicitly.
+  formatToppings(values: string[]): string {
+    const labels = new Map(this.options.map((option) => [option.value, option.label]));
+    return values.map((value) => labels.get(value) ?? value).join(', ');
+  }
 }
 ```
 
@@ -400,11 +442,12 @@ import { HlmSelectImports } from '@egose/shadcn-theme-ng/select';
       (closed)="onClosed()"
     >
       <hlm-select-trigger>
-        <span hlmSelectValueTemplate>⭐ {{ plan() ?? 'Pick a plan' }}</span>
+        <span hlmSelectValueTemplate>⭐ {{ planLabel() }}</span>
       </hlm-select-trigger>
       <hlm-select-content *hlmSelectPortal="let ctx">
-        <hlm-select-item value="hobby">Hobby</hlm-select-item>
-        <hlm-select-item value="pro">Pro</hlm-select-item>
+        @for (option of plans; track option.value) {
+          <hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
+        }
       </hlm-select-content>
     </div>
   `,
@@ -412,6 +455,15 @@ import { HlmSelectImports } from '@egose/shadcn-theme-ng/select';
 export class AdvancedSelectComponent {
   readonly plan = signal<string | null>(null);
   readonly open = signal(false);
+  readonly plans = [
+    { value: 'hobby', label: 'Hobby' },
+    { value: 'pro', label: 'Pro' },
+  ];
+
+  // Custom templates bypass itemToString — resolve the label explicitly.
+  planLabel(): string {
+    return this.plans.find((option) => option.value === this.plan())?.label ?? 'Pick a plan';
+  }
 
   onClosed(): void {
     console.log('panel closed');