@egose/shadcn-theme-ng-tw 0.5.2 → 0.6.0

package/input/README.md

@@ -58,11 +58,12 @@ The directive matches `input[hlmInput]` usage in practice (selector `[hlmInput]`
 
 ### `[hlmInput]` — `HlmInput`
 
-| Input             | Type             | Default | Description                                                                                                         |
-| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
-| `ariaDescribedby` | `string \| null` | `null`  | Bound to `aria-describedby`. Combine with `<hlm-error>`/`<hlm-hint>` ids (the form wrappers do this automatically). |
-| `id`              | (via `BrnInput`) | —       | Forwarded to the `BrnInput` host directive.                                                                         |
-| `forceInvalid`    | (via `BrnInput`) | —       | Forwarded to the `BrnInput` host directive; forces the `data-matches-spartan-invalid` error styles.                 |
+| Input             | Type                  | Default   | Description                                                                                                         |
+| ----------------- | --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------- |
+| `ariaDescribedby` | `string \| null`      | `null`    | Bound to `aria-describedby`. Combine with `<hlm-error>`/`<hlm-hint>` ids (the form wrappers do this automatically). |
+| `id`              | (via `BrnInput`)      | —         | Forwarded to the `BrnInput` host directive.                                                                         |
+| `forceInvalid`    | (via `BrnInput`)      | —         | Forwarded to the `BrnInput` host directive; forces the `data-matches-spartan-invalid` error styles.                 |
+| `size`            | `sm \| default \| lg` | `default` | Height density: `h-8` / `h-9` / `h-10`.                                                                             |
 
 No outputs. Visual states are attribute-driven: `data-matches-spartan-invalid=true` switches the border/ring to destructive; `disabled` applies `pointer-events-none`, `cursor-not-allowed`, `opacity-50`. Base geometry: `h-9`, `rounded-md`, `text-base` (`md:text-sm`), full width.
 
@@ -180,13 +181,7 @@ import { HlmError, HlmHint } from '@egose/shadcn-theme-ng/form-field';
   template: `
     <form [formGroup]="form">
       <label for="handle">Handle</label>
-      <input
-        hlmInput
-        id="handle"
-        formControlName="handle"
-        placeholder="@jane"
-        [ariaDescribedby]="describedBy()"
-      />
+      <input hlmInput id="handle" formControlName="handle" placeholder="@jane" [ariaDescribedby]="describedBy()" />
       @if (showError()) {
         <hlm-error id="handle-error">Use 3+ lowercase letters.</hlm-error>
       } @else {

package/input/fesm2022/input.mjs

@@ -4,16 +4,19 @@ import * as i2 from '@spartan-ng/brain/field';
 import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
 import * as i1 from '@spartan-ng/brain/input';
 import { BrnInput } from '@spartan-ng/brain/input';
-import { classes } from '@egose/shadcn-theme-ng-tw/utils';
+import { classes, hlm } from '@egose/shadcn-theme-ng-tw/utils';
 
 class HlmInput {
     ariaDescribedby = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Height density. Merged after the base height class, so it wins via `twMerge`. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'tw:dark:bg-input/30 tw:border-input tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:data-[matches-spartan-invalid=true]:ring-destructive/20 tw:dark:data-[matches-spartan-invalid=true]:ring-destructive/40 tw:data-[matches-spartan-invalid=true]:border-destructive tw:dark:data-[matches-spartan-invalid=true]:border-destructive/50 tw:h-9 tw:rounded-md tw:border tw:bg-transparent tw:px-2.5 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:file:h-7 tw:file:text-sm tw:file:font-medium tw:focus-visible:ring-3 tw:data-[matches-spartan-invalid=true]:ring-3 tw:md:text-sm tw:file:text-foreground tw:placeholder:text-muted-foreground tw:w-full tw:min-w-0 tw:outline-none tw:file:inline-flex tw:file:border-0 tw:file:bg-transparent tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50');
+        classes(() => hlm('tw:dark:bg-input/30 tw:border-input tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:data-[matches-spartan-invalid=true]:ring-destructive/20 tw:dark:data-[matches-spartan-invalid=true]:ring-destructive/40 tw:data-[matches-spartan-invalid=true]:border-destructive tw:dark:data-[matches-spartan-invalid=true]:border-destructive/50 tw:h-9 tw:rounded-md tw:border tw:bg-transparent tw:px-2.5 tw:py-1 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:file:h-7 tw:file:text-sm tw:file:font-medium tw:focus-visible:ring-3 tw:data-[matches-spartan-invalid=true]:ring-3 tw:md:text-sm tw:file:text-foreground tw:placeholder:text-muted-foreground tw:w-full tw:min-w-0 tw:outline-none tw:file:inline-flex tw:file:border-0 tw:file:bg-transparent tw:disabled:pointer-events-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50', this.size() === 'sm' ? 'tw:h-8' : this.size() === 'lg' ? 'tw:h-10' : ''));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmInput, isStandalone: true, selector: "[hlmInput]", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input" }, properties: { "attr.aria-describedby": "ariaDescribedby()" } }, hostDirectives: [{ directive: i1.BrnInput, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmInput, isStandalone: true, selector: "[hlmInput]", inputs: { ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "input" }, properties: { "attr.aria-describedby": "ariaDescribedby()" } }, hostDirectives: [{ directive: i1.BrnInput, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmInput, decorators: [{
             type: Directive,
@@ -25,7 +28,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         '[attr.aria-describedby]': 'ariaDescribedby()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /*
  * Public API Surface of input

package/input/types/input.d.ts

@@ -4,9 +4,11 @@ import * as i2 from '@spartan-ng/brain/field';
 
 declare class HlmInput {
     readonly ariaDescribedby: i0.InputSignal<string | null>;
+    /** Height density. Merged after the base height class, so it wins via `twMerge`. */
+    readonly size: i0.InputSignal<"sm" | "default" | "lg">;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInput, "[hlmInput]", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnInput; inputs: { "id": "id"; "forceInvalid": "forceInvalid"; }; outputs: {}; }, { directive: typeof i2.BrnFieldControlDescribedBy; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmInput, "[hlmInput]", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnInput; inputs: { "id": "id"; "forceInvalid": "forceInvalid"; }; outputs: {}; }, { directive: typeof i2.BrnFieldControlDescribedBy; inputs: {}; outputs: {}; }]>;
 }
 
 declare const HlmInputImports: readonly [typeof HlmInput];

package/layout-simple/fesm2022/layout-simple.mjs

@@ -435,7 +435,7 @@ class EgLayoutSearch {
         </div>
       </hlm-popover-content>
     </hlm-popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: HlmPopoverTrigger, selector: "button[hlmPopoverTrigger],button[hlmPopoverTriggerFor]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: HlmPopover, selector: "[hlmPopover],hlm-popover" }, { kind: "directive", type: HlmPopoverTrigger, selector: "button[hlmPopoverTrigger],button[hlmPopoverTriggerFor]" }, { kind: "directive", type: HlmPopoverContent, selector: "[hlmPopoverContent],hlm-popover-content" }, { kind: "directive", type: HlmPopoverPortal, selector: "[hlmPopoverPortal]" }, { kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby", "size"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgLayoutSearch, decorators: [{
             type: Component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egose/shadcn-theme-ng-tw",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Angular shadcn UI theme",
   "author": "Junmin Ahn",
   "bundles": [
@@ -31,6 +31,7 @@
     "@angular/router": ">=22.0.0 <23.0.0",
     "@ng-icons/core": ">=35.0.1 <36.0.0",
     "@spartan-ng/brain": ">=1.3.2 <2.0.0",
+    "@tanstack/angular-table": ">=9.1.2 <10.0.0",
     "rxjs": ">=7.8.0 <8.0.0"
   },
   "files": [
@@ -126,6 +127,10 @@
       "types": "./context-menu/types/context-menu.d.ts",
       "default": "./context-menu/fesm2022/context-menu.mjs"
     },
+    "./data-table": {
+      "types": "./data-table/types/data-table.d.ts",
+      "default": "./data-table/fesm2022/data-table.mjs"
+    },
     "./date-picker": {
       "types": "./date-picker/types/date-picker.d.ts",
       "default": "./date-picker/fesm2022/date-picker.mjs"

package/phone-input/fesm2022/phone-input.mjs

@@ -143,7 +143,7 @@ class HlmPhoneInput {
       (input)="_handleInput($event)"
       (blur)="_handleBlur()"
     />
-  `, isInline: true, dependencies: [{ kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmPhoneInput, decorators: [{
             type: Component,

package/stepper/README.md

@@ -1,6 +1,6 @@
 # Stepper (`@egose/shadcn-theme-ng/stepper`)
 
-Multi-step workflow navigation, ported from the spartan stepper blocks. This subpath ships seven pieces — `HlmStepper` (root), `HlmStep` (step), `HlmStepHeader` (clickable header with indicator), `HlmStepLabel` (rich label template), `HlmStepContent` (lazy body), `HlmStepperNext` / `HlmStepperPrevious` (navigation buttons) — plus `provideHlmStepperConfig` / `injectHlmStepperConfig` for global defaults. All are thin shadcn-styled components over Angular CDK's `@angular/cdk/stepper` primitives (`CdkStepper`, `CdkStep`, `CdkStepHeader`, `CdkStepLabel`).
+Multi-step workflow navigation, ported from the spartan stepper blocks. This subpath ships seven pieces — `HlmStepper` (root), `HlmStep` (step), `HlmStepHeader` (clickable header with indicator), `HlmStepLabel` (rich label template), `HlmStepContent` (lazy body), `HlmStepperNext` / `HlmStepperPrevious` (navigation buttons) — plus `provideHlmStepperConfig` / `injectHlmStepperConfig` for global defaults. Headers automatically show the full label in a styled tooltip on hover/focus (overridable per step via `tooltip`). All are thin shadcn-styled components over Angular CDK's `@angular/cdk/stepper` primitives (`CdkStepper`, `CdkStep`, `CdkStepHeader`, `CdkStepLabel`).
 
 > **Ships as:** `@egose/shadcn-theme-ng/stepper` and `@egose/shadcn-theme-ng-tw/stepper` (the `tw:`-prefixed Tailwind variant). See the [package README](../../README.md) for install steps, peer dependencies, Tailwind setup, and testing/release guidance. Do not publish this project directory independently.
 
@@ -33,6 +33,7 @@ import {
   HlmStepperPrevious,
   injectHlmStepperConfig,
   provideHlmStepperConfig,
+  type HlmStepTooltipPosition,
 } from '@egose/shadcn-theme-ng/stepper';
 // tw variant: swap to '@egose/shadcn-theme-ng-tw/stepper'
 ```
@@ -62,19 +63,19 @@ import { HlmStepperModule } from '@egose/shadcn-theme-ng/stepper';
 export class FeatureModule {}
 ```
 
-| Symbol                   | Kind          | Description                                                              |
-| ------------------------ | ------------- | ------------------------------------------------------------------------ |
-| `HlmStepper`             | Component     | Root: `<hlm-stepper>` — extends `CdkStepper`.                            |
-| `HlmStep`                | Component     | Step: `<hlm-step label="…">` — extends `CdkStep`, adds `icon` input.      |
-| `HlmStepHeader`          | Component     | Header: `<hlm-step-header>` — extends `CdkStepHeader`, renders indicator. |
-| `HlmStepLabel`           | Directive     | Rich label: `<ng-template hlmStepLabel>` — extends `CdkStepLabel`.        |
-| `HlmStepContent`         | Directive     | Lazy body: `<ng-template hlmStepContent>` — attached on first selection.  |
-| `HlmStepperNext`         | Directive     | Next button: `button[hlmStepperNext]` — extends `CdkStepperNext`.         |
-| `HlmStepperPrevious`     | Directive     | Back button: `button[hlmStepperPrevious]` — extends `CdkStepperPrevious`. |
-| `HlmStepperImports`      | `const` array | All seven, spread into `imports: [...]`.                                 |
-| `HlmStepperModule`       | NgModule      | Imports + re-exports all seven.                                          |
-| `provideHlmStepperConfig`| Function      | Global defaults for animations + indicator mode.                         |
-| `injectHlmStepperConfig` | Function      | Reads the (optionally provided) global config.                           |
+| Symbol                    | Kind          | Description                                                               |
+| ------------------------- | ------------- | ------------------------------------------------------------------------- |
+| `HlmStepper`              | Component     | Root: `<hlm-stepper>` — extends `CdkStepper`.                             |
+| `HlmStep`                 | Component     | Step: `<hlm-step label="…">` — extends `CdkStep`, adds `icon` input.      |
+| `HlmStepHeader`           | Component     | Header: `<hlm-step-header>` — extends `CdkStepHeader`, renders indicator. |
+| `HlmStepLabel`            | Directive     | Rich label: `<ng-template hlmStepLabel>` — extends `CdkStepLabel`.        |
+| `HlmStepContent`          | Directive     | Lazy body: `<ng-template hlmStepContent>` — attached on first selection.  |
+| `HlmStepperNext`          | Directive     | Next button: `button[hlmStepperNext]` — extends `CdkStepperNext`.         |
+| `HlmStepperPrevious`      | Directive     | Back button: `button[hlmStepperPrevious]` — extends `CdkStepperPrevious`. |
+| `HlmStepperImports`       | `const` array | All seven, spread into `imports: [...]`.                                  |
+| `HlmStepperModule`        | NgModule      | Imports + re-exports all seven.                                           |
+| `provideHlmStepperConfig` | Function      | Global defaults for animations + indicator mode.                          |
+| `injectHlmStepperConfig`  | Function      | Reads the (optionally provided) global config.                            |
 
 ## Anatomy / Structure
 
@@ -122,47 +123,50 @@ Lazy body (attached only when the step is first selected):
 
 ### `HlmStepper` — selector `hlm-stepper` (component, extends `CdkStepper`)
 
-| Input                | Type                          | Default    | Description                                                        |
-| -------------------- | ----------------------------- | ---------- | ------------------------------------------------------------------ |
-| `orientation`        | forwarded to `CdkStepper`     | —          | `'horizontal' \| 'vertical'`.                                      |
-| `linear`             | forwarded to `CdkStepper`     | —          | Current step must be valid (via `stepControl`) before advancing.   |
-| `selectedIndex`      | forwarded to `CdkStepper`     | —          | Controlled selected-step index.                                    |
-| `labelPosition`      | `'end' \| 'bottom'`           | `'end'`    | Horizontal layout: label beside vs. below the indicator.           |
-| `headerPosition`     | `'top' \| 'bottom'`           | `'top'`    | Horizontal layout: headers above vs. below the content panel.      |
-| `indicatorMode`      | `'number' \| 'state' \| 'icon'` | from config (`'state'`) | Indicator rendering (see below).                                   |
-| `stepperAriaLabel`   | `string \| null`              | `'Progress'` | `aria-label` for the tablist (ignored when labelledby is set).   |
-| `stepperAriaLabelledby` | `string \| null`           | `null`     | `aria-labelledby` for the tablist.                                 |
-| `animationsEnabled`  | `boolean`                     | from config (`true`) | Toggle step transitions per instance.                 |
-| `animationDuration`  | `number` (ms)                 | from config (`300`)  | Transition duration per instance.                     |
+| Input                   | Type                            | Default                 | Description                                                      |
+| ----------------------- | ------------------------------- | ----------------------- | ---------------------------------------------------------------- |
+| `orientation`           | forwarded to `CdkStepper`       | —                       | `'horizontal' \| 'vertical'`.                                    |
+| `linear`                | forwarded to `CdkStepper`       | —                       | Current step must be valid (via `stepControl`) before advancing. |
+| `selectedIndex`         | forwarded to `CdkStepper`       | —                       | Controlled selected-step index.                                  |
+| `labelPosition`         | `'end' \| 'bottom'`             | `'end'`                 | Horizontal layout: label beside vs. below the indicator.         |
+| `headerPosition`        | `'top' \| 'bottom'`             | `'top'`                 | Horizontal layout: headers above vs. below the content panel.    |
+| `indicatorMode`         | `'number' \| 'state' \| 'icon'` | from config (`'state'`) | Indicator rendering (see below).                                 |
+| `stepperAriaLabel`      | `string \| null`                | `'Progress'`            | `aria-label` for the tablist (ignored when labelledby is set).   |
+| `stepperAriaLabelledby` | `string \| null`                | `null`                  | `aria-labelledby` for the tablist.                               |
+| `animationsEnabled`     | `boolean`                       | from config (`true`)    | Toggle step transitions per instance.                            |
+| `animationDuration`     | `number` (ms)                   | from config (`300`)     | Transition duration per instance.                                |
 
 `next()` is overridden to `markAllAsTouched()` + `updateValueAndValidity()` on the current `stepControl` first, so linear steppers surface validation errors before denying the transition.
 
 ### `HlmStep` — selector `hlm-step` (component, extends `CdkStep`)
 
-| Input         | Type             | Default | Description                                              |
-| ------------- | ---------------- | ------- | -------------------------------------------------------- |
-| `label`       | forwarded to `CdkStep` | —  | Step title (string, or rich template via `hlmStepLabel`). |
-| `icon`        | `string \| null` | `null`  | Icon name rendered when `indicatorMode="icon"`.           |
-| `stepControl` | forwarded to `CdkStep` | —  | Form group driving `linear` validation.                  |
-| `optional`    | forwarded to `CdkStep` | —  | Shows an "Optional" caption in the header.               |
-| `errorMessage`| forwarded to `CdkStep` | —  | Header error caption when the step state is `error`.     |
-| `hasError`    | forwarded to `CdkStep` | —  | Forces the error state (pair with `STEPPER_GLOBAL_OPTIONS` `showError`). |
+| Input             | Type                                     | Default                                      | Description                                                              |
+| ----------------- | ---------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------ |
+| `label`           | forwarded to `CdkStep`                   | —                                            | Step title (string, or rich template via `hlmStepLabel`).                |
+| `icon`            | `string \| null`                         | `null`                                       | Icon name rendered when `indicatorMode="icon"`.                          |
+| `stepControl`     | forwarded to `CdkStep`                   | —                                            | Form group driving `linear` validation.                                  |
+| `optional`        | forwarded to `CdkStep`                   | —                                            | Shows an "Optional" caption in the header.                               |
+| `errorMessage`    | forwarded to `CdkStep`                   | —                                            | Header error caption when the step state is `error`.                     |
+| `hasError`        | forwarded to `CdkStep`                   | —                                            | Forces the error state (pair with `STEPPER_GLOBAL_OPTIONS` `showError`). |
+| `tooltip`         | `string \| TemplateRef<unknown> \| null` | `null` (falls back to the full string label) | Styled header tooltip override; rich templates allowed.                  |
+| `tooltipPosition` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'`                                   | Tooltip side.                                                            |
+| `tooltipDisabled` | `boolean`                                | `false`                                      | Disables the header tooltip for this step.                               |
 
 ### `HlmStepHeader` — selector `hlm-step-header` (component, extends `CdkStepHeader`)
 
 Usually rendered by `HlmStepper` itself; use directly only for custom layouts.
 
-| Input           | Type                                        | Default | Description                                  |
-| --------------- | ------------------------------------------- | ------- | -------------------------------------------- |
-| `index`         | `number`                                    | `0`     | Step index (drives the number indicator).    |
-| `state`         | `StepState`                                 | `'number'` | CDK step state (`number`, `edit`, `done`, `error`, …). |
-| `label`         | `HlmStepLabel \| string \| null`            | `null`  | Resolved label content.                      |
-| `selected` / `reached` / `active` | `boolean`                  | `false` | Visual state flags.                          |
-| `optional` / `disabled` | `boolean`                         | `false` | Optional caption / disabled styling.         |
-| `icon`          | `string \| null`                            | `null`  | Icon name for `indicatorMode="icon"`.        |
-| `indicatorMode` | `'number' \| 'state' \| 'icon'`             | from config (`'state'`) | Indicator rendering.            |
-| `labelPosition` | `'end' \| 'bottom'`                         | `'end'` | Label beside vs. below the indicator.        |
-| `errorMessage`  | `string`                                    | `''`    | Error caption shown when `state === 'error'`.|
+| Input                             | Type                             | Default                 | Description                                            |
+| --------------------------------- | -------------------------------- | ----------------------- | ------------------------------------------------------ |
+| `index`                           | `number`                         | `0`                     | Step index (drives the number indicator).              |
+| `state`                           | `StepState`                      | `'number'`              | CDK step state (`number`, `edit`, `done`, `error`, …). |
+| `label`                           | `HlmStepLabel \| string \| null` | `null`                  | Resolved label content.                                |
+| `selected` / `reached` / `active` | `boolean`                        | `false`                 | Visual state flags.                                    |
+| `optional` / `disabled`           | `boolean`                        | `false`                 | Optional caption / disabled styling.                   |
+| `icon`                            | `string \| null`                 | `null`                  | Icon name for `indicatorMode="icon"`.                  |
+| `indicatorMode`                   | `'number' \| 'state' \| 'icon'`  | from config (`'state'`) | Indicator rendering.                                   |
+| `labelPosition`                   | `'end' \| 'bottom'`              | `'end'`                 | Label beside vs. below the indicator.                  |
+| `errorMessage`                    | `string`                         | `''`                    | Error caption shown when `state === 'error'`.          |
 
 Indicator modes: `number` always renders `1, 2, 3`; `state` (default) renders a check icon for selected/reached steps and an alert icon for errors; `icon` renders the per-step `icon` name (provide icons via `@ng-icons/core` `provideIcons` in your app).
 
@@ -177,7 +181,9 @@ import { provideHlmStepperConfig } from '@egose/shadcn-theme-ng/stepper';
 
 @Component({
   // ...
-  providers: [provideHlmStepperConfig({ animationEnabled: true, animationDuration: 300, defaultIndicatorMode: 'state' })],
+  providers: [
+    provideHlmStepperConfig({ animationEnabled: true, animationDuration: 300, defaultIndicatorMode: 'state' }),
+  ],
 })
 export class FeatureComponent {}
 ```
@@ -239,13 +245,14 @@ import { Component, computed, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs/operators';
 
-@Component({ /* … */ })
+@Component({
+  /* … */
+})
 export class DemoResponsive {
   private readonly _breakpoints = inject(BreakpointObserver);
-  private readonly _isSmall = toSignal(
-    this._breakpoints.observe('(max-width: 767.98px)').pipe(map((s) => s.matches)),
-    { initialValue: false },
-  );
+  private readonly _isSmall = toSignal(this._breakpoints.observe('(max-width: 767.98px)').pipe(map((s) => s.matches)), {
+    initialValue: false,
+  });
   protected readonly orientation = computed(() => (this._isSmall() ? 'vertical' : 'horizontal'));
 }
 ```
@@ -262,7 +269,9 @@ With `linear`, the current step must be valid before advancing — `HlmStepper.n
 import { Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
-@Component({ /* …, imports: [ReactiveFormsModule, ...HlmStepperImports, ...HlmButtonImports] */ })
+@Component({
+  /* …, imports: [ReactiveFormsModule, ...HlmStepperImports, ...HlmButtonImports] */
+})
 export class DemoLinear {
   private readonly _fb = inject(FormBuilder);
   protected readonly identity = this._fb.group({ name: ['', Validators.required] });
@@ -334,6 +343,20 @@ Or set global defaults with `provideHlmStepperConfig` and override per instance.
 
 Per-step `icon` names resolve through `@ng-icons/core` — register them with `provideIcons` in your app.
 
+### 9. Header tooltips
+
+Headers carry the styled `HlmTooltip` automatically: hovering or focusing a header shows the step's full string label (useful when labels truncate). Override per step with `tooltip` (plain text or a `TemplateRef`), adjust the side with `tooltipPosition`, or opt out with `tooltipDisabled`:
+
+```html
+<hlm-stepper>
+  <hlm-step label="An especially long account setup label that truncates"><!-- falls back to the label --></hlm-step>
+  <hlm-step label="Profile" tooltip="Add a photo so teammates recognize you"><!-- … --></hlm-step>
+  <hlm-step label="Review" [tooltipDisabled]="true"><!-- … --></hlm-step>
+</hlm-stepper>
+```
+
+Steps using `<ng-template hlmStepLabel>` have no string to fall back to — pass `tooltip` explicitly if they need one. Custom `HlmStepHeader` layouts can apply `hlmTooltip` directly.
+
 ## Accessibility notes
 
 - Horizontal headers get `role="tab"` semantics inside a `role="tablist"` (labelled `Progress` by default — override with `stepperAriaLabel` / `stepperAriaLabelledby`); panels get `role="tabpanel"` wired via `aria-labelledby` / `aria-controls`.

package/stepper/fesm2022/stepper.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, input, contentChild, effect, untracked, ChangeDetectionStrategy, Component, InjectionToken, numberAttribute, booleanAttribute, computed, signal, NgModule } from '@angular/core';
+import { inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, input, booleanAttribute, contentChild, effect, untracked, ChangeDetectionStrategy, Component, InjectionToken, numberAttribute, computed, signal, NgModule } from '@angular/core';
 import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/stepper';
 import { CdkStepLabel, CdkStep, CdkStepHeader, CdkStepper, CdkStepperModule, CdkStepperNext, CdkStepperPrevious } from '@angular/cdk/stepper';
@@ -9,6 +9,7 @@ import { lucideCircleAlert, lucideCheck } from '@ng-icons/lucide';
 import { buttonVariants } from '@egose/shadcn-theme-ng-tw/button';
 import { classes, hlm } from '@egose/shadcn-theme-ng-tw/utils';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { HlmTooltip } from '@egose/shadcn-theme-ng-tw/tooltip';
 import { cva } from 'class-variance-authority';
 import { tap } from 'rxjs/operators';
 
@@ -43,6 +44,12 @@ class HlmStep extends CdkStep {
     _destroyRef = inject(DestroyRef);
     icon = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Styled header tooltip override. Falls back to the full string label when unset. */
+    tooltip = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    tooltipPosition = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    tooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "tooltipDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Content for step label given by `<ng-template hlmStepLabel>`. */
     stepLabelContent = contentChild(HlmStepLabel, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "stepLabelContent" }] : /* istanbul ignore next */ []));
@@ -69,7 +76,7 @@ class HlmStep extends CdkStep {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmStep, isStandalone: true, selector: "hlm-step", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "hidden": "" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmStep, isStandalone: true, selector: "hlm-step", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "hidden": "" } }, providers: [
             {
                 provide: CdkStep,
                 useExisting: HlmStep,
@@ -104,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], stepLabelContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HlmStepLabel), { isSignal: true }] }], _lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HlmStepContent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }], stepLabelContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HlmStepLabel), { isSignal: true }] }], _lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HlmStepContent), { isSignal: true }] }] } });
 
 const defaultConfig = {
     animationEnabled: true,
@@ -329,6 +336,23 @@ class HlmStepper extends CdkStepper {
     stepIcon(step) {
         return step instanceof HlmStep ? step.icon() : null;
     }
+    _headerTooltip(step) {
+        const override = step instanceof HlmStep ? step.tooltip() : null;
+        if (override === null || override === undefined) {
+            return step.label || null;
+        }
+        // BrnTooltip types templates as TemplateRef<void>; any template renders the same at runtime.
+        return override;
+    }
+    _headerTooltipPosition(step) {
+        return step instanceof HlmStep ? step.tooltipPosition() : 'bottom';
+    }
+    _headerTooltipDisabled(step) {
+        if (step instanceof HlmStep && step.tooltipDisabled()) {
+            return true;
+        }
+        return !this._headerTooltip(step);
+    }
     _enterAnimationClass() {
         if (!this._hasSelectionChanged()) {
             return '';
@@ -426,6 +450,9 @@ class HlmStepper extends CdkStepper {
         [labelPosition]="orientation === 'horizontal' ? labelPosition() : 'end'"
         [indicatorMode]="indicatorMode()"
         [icon]="stepIcon(step)"
+        [hlmTooltip]="_headerTooltip(step)"
+        [position]="_headerTooltipPosition(step)"
+        [tooltipDisabled]="_headerTooltipDisabled(step)"
       />
     </ng-template>
 
@@ -472,13 +499,13 @@ class HlmStepper extends CdkStepper {
         }
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CdkStepperModule }, { kind: "directive", type: i1.CdkStepHeader, selector: "[cdkStepHeader]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HlmStepHeader, selector: "hlm-step-header", inputs: ["state", "label", "errorMessage", "index", "selected", "reached", "active", "optional", "disabled", "icon", "indicatorMode", "labelPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CdkStepperModule }, { kind: "directive", type: i1.CdkStepHeader, selector: "[cdkStepHeader]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HlmStepHeader, selector: "hlm-step-header", inputs: ["state", "label", "errorMessage", "index", "selected", "reached", "active", "optional", "disabled", "icon", "indicatorMode", "labelPosition"] }, { kind: "directive", type: HlmTooltip, selector: "[hlmTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepper, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-stepper',
-                    imports: [CdkStepperModule, NgTemplateOutlet, HlmStepHeader],
+                    imports: [CdkStepperModule, NgTemplateOutlet, HlmStepHeader, HlmTooltip],
                     providers: [{ provide: CdkStepper, useExisting: HlmStepper }],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
@@ -556,6 +583,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
         [labelPosition]="orientation === 'horizontal' ? labelPosition() : 'end'"
         [indicatorMode]="indicatorMode()"
         [icon]="stepIcon(step)"
+        [hlmTooltip]="_headerTooltip(step)"
+        [position]="_headerTooltipPosition(step)"
+        [tooltipDisabled]="_headerTooltipDisabled(step)"
       />
     </ng-template>
 

package/stepper/types/stepper.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, ValueProvider } from '@angular/core';
+import { ValueProvider, TemplateRef } from '@angular/core';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CdkStepLabel, CdkStep, CdkStepHeader, CdkStepper, CdkStepperNext, CdkStepperPrevious } from '@angular/cdk/stepper';
 
@@ -8,10 +8,26 @@ declare class HlmStepLabel extends CdkStepLabel {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmStepLabel, "[hlmStepLabel]", never, {}, {}, never, never, true, never>;
 }
 
+type HlmStepperLabelPosition = 'end' | 'bottom';
+type HlmStepperHeaderPosition = 'top' | 'bottom';
+type HlmStepperIndicatorMode = 'number' | 'state' | 'icon';
+type HlmStepTooltipPosition = 'top' | 'right' | 'bottom' | 'left';
+interface HlmStepperConfig {
+    animationEnabled: boolean;
+    animationDuration: number;
+    defaultIndicatorMode: HlmStepperIndicatorMode;
+}
+declare function provideHlmStepperConfig(config: Partial<HlmStepperConfig>): ValueProvider;
+declare function injectHlmStepperConfig(): HlmStepperConfig;
+
 declare class HlmStep extends CdkStep {
     private readonly _viewContainerRef;
     private readonly _destroyRef;
     readonly icon: _angular_core.InputSignal<string | null>;
+    /** Styled header tooltip override. Falls back to the full string label when unset. */
+    readonly tooltip: _angular_core.InputSignal<string | TemplateRef<unknown> | null>;
+    readonly tooltipPosition: _angular_core.InputSignal<HlmStepTooltipPosition>;
+    readonly tooltipDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Content for step label given by `<ng-template hlmStepLabel>`. */
     readonly stepLabelContent: _angular_core.Signal<HlmStepLabel | undefined>;
     /** Content that will be rendered lazily. */
@@ -20,7 +36,7 @@ declare class HlmStep extends CdkStep {
     portal: TemplatePortal<unknown> | null;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmStep, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmStep, "hlm-step", ["hlmStep"], { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, ["stepLabelContent", "_lazyContent"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmStep, "hlm-step", ["hlmStep"], { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipDisabled": { "alias": "tooltipDisabled"; "required": false; "isSignal": true; }; }, {}, ["stepLabelContent", "_lazyContent"], ["*"], true, never>;
 }
 
 /**
@@ -32,17 +48,6 @@ declare class HlmStepContent<C> {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmStepContent<any>, "ng-template[hlmStepContent]", never, {}, {}, never, never, true, never>;
 }
 
-type HlmStepperLabelPosition = 'end' | 'bottom';
-type HlmStepperHeaderPosition = 'top' | 'bottom';
-type HlmStepperIndicatorMode = 'number' | 'state' | 'icon';
-interface HlmStepperConfig {
-    animationEnabled: boolean;
-    animationDuration: number;
-    defaultIndicatorMode: HlmStepperIndicatorMode;
-}
-declare function provideHlmStepperConfig(config: Partial<HlmStepperConfig>): ValueProvider;
-declare function injectHlmStepperConfig(): HlmStepperConfig;
-
 declare class HlmStepHeader extends CdkStepHeader {
     private readonly _config;
     readonly state: _angular_core.InputSignal<string>;
@@ -84,6 +89,9 @@ declare class HlmStepper extends CdkStepper {
     constructor();
     next(): void;
     protected stepIcon(step: CdkStep): string | null;
+    protected _headerTooltip(step: CdkStep): string | TemplateRef<void> | null;
+    protected _headerTooltipPosition(step: CdkStep): HlmStepTooltipPosition;
+    protected _headerTooltipDisabled(step: CdkStep): boolean;
     protected _enterAnimationClass(): string;
     protected _leaveAnimationClass(): string;
     protected _gridContainerClass(expanded: boolean): string;
@@ -113,4 +121,4 @@ declare class HlmStepperModule {
 }
 
 export { HlmStep, HlmStepContent, HlmStepHeader, HlmStepLabel, HlmStepper, HlmStepperImports, HlmStepperModule, HlmStepperNext, HlmStepperPrevious, injectHlmStepperConfig, provideHlmStepperConfig };
-export type { HlmStepperConfig, HlmStepperHeaderPosition, HlmStepperIndicatorMode, HlmStepperLabelPosition };
+export type { HlmStepTooltipPosition, HlmStepperConfig, HlmStepperHeaderPosition, HlmStepperIndicatorMode, HlmStepperLabelPosition };

package/table/README.md

@@ -130,6 +130,8 @@ There are **no inputs, outputs, or methods** on any table directive. Each direct
 
 User `class` attributes on the same element are preserved and merged (the `classes()` helper keeps base classes).
 
+`HlmTh`/`HlmTd` take a `size` input (`HlmTableSize`: `sm` / `default` / `lg`) scaling density one step down/up: header height `h-8` / `h-10` / `h-12`, cell padding `p-1` / `p-2` / `p-3`.
+
 ## Examples
 
 ### 1. Basic invoice table

package/table/fesm2022/table.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Directive, NgModule } from '@angular/core';
-import { classes } from '@egose/shadcn-theme-ng-tw/utils';
+import { Directive, input, NgModule } from '@angular/core';
+import { classes, hlm } from '@egose/shadcn-theme-ng-tw/utils';
 
 class HlmTableContainer {
     constructor() {
@@ -110,11 +110,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
  * within an HlmTable context.
  */
 class HlmTh {
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'tw:text-foreground tw:h-10 tw:px-2 tw:text-start tw:align-middle tw:font-medium tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pe-0');
+        classes(() => hlm('tw:text-foreground tw:h-10 tw:px-2 tw:text-start tw:align-middle tw:font-medium tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pe-0', this.size() === 'sm' ? 'tw:h-8' : this.size() === 'lg' ? 'tw:h-12' : ''));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTh, isStandalone: true, selector: "th[hlmTh],th[hlmTableHead]", host: { attributes: { "data-slot": "table-head" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmTh, isStandalone: true, selector: "th[hlmTh],th[hlmTableHead]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "table-head" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTh, decorators: [{
             type: Directive,
@@ -122,17 +124,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'th[hlmTh],th[hlmTableHead]',
                     host: { 'data-slot': 'table-head' },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /**
  * Directive to apply Shadcn-like styling to a <td> element
  * within an HlmTable context.
  */
 class HlmTd {
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'tw:p-2 tw:align-middle tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pe-0');
+        classes(() => hlm('tw:p-2 tw:align-middle tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pe-0', this.size() === 'sm' ? 'tw:p-1' : this.size() === 'lg' ? 'tw:p-3' : ''));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTd, isStandalone: true, selector: "td[hlmTd],td[hlmTableCell]", host: { attributes: { "data-slot": "table-cell" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmTd, isStandalone: true, selector: "td[hlmTd],td[hlmTableCell]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "table-cell" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTd, decorators: [{
             type: Directive,
@@ -140,7 +144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'td[hlmTd],td[hlmTableCell]',
                     host: { 'data-slot': 'table-cell' },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /**
  * Directive to apply Shadcn-like styling to a <caption> element
  * within an HlmTable context.