@egose/shadcn-theme-ng 0.5.3 → 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/utils';
+import { classes, hlm } from '@egose/shadcn-theme-ng/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(() => "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50");
+        classes(() => hlm("dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", this.size() === 'sm' ? "h-8" : this.size() === 'lg' ? "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

@@ -169,7 +169,7 @@ class EgLayoutSearch {
             buttons[Math.min(index, buttons.length - 1)]?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgLayoutSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgLayoutSearch, isStandalone: true, selector: "eg-layout-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, retryText: { classPropertyName: "retryText", publicName: "retryText", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, resultLabel: { classPropertyName: "resultLabel", publicName: "resultLabel", isSignal: true, isRequired: false, transformFunction: null }, resultTemplate: { classPropertyName: "resultTemplate", publicName: "resultTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resultSelected: "resultSelected" }, host: { classAttribute: "block min-w-0" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "resultButtons", predicate: ["resultButton"], descendants: true, isSignal: true }], ngImport: i0, template: "\n    <hlm-popover\n      [state]=\"isOpen() ? 'open' : 'closed'\"\n      (stateChanged)=\"setOpen($event === 'open')\"\n      (closed)=\"setOpen(false)\"\n    >\n      <button\n        hlmPopoverTrigger\n        type=\"button\"\n        class=\"flex min-h-11 w-full items-center gap-2 rounded-lg border border-border bg-foreground/3 px-3 text-left text-sm text-foreground/75 cursor-pointer hover:bg-foreground/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring md:w-56\"\n      >\n        <ng-icon [svg]=\"searchIcon\" size=\"16px\" aria-hidden=\"true\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ placeholder() }}</span>\n      </button>\n      <hlm-popover-content *hlmPopoverPortal class=\"w-80 max-w-[calc(100vw-2rem)] p-2\">\n        <input\n          #searchInput\n          hlmInput\n          type=\"search\"\n          autocomplete=\"off\"\n          [value]=\"query()\"\n          (input)=\"query.set($any($event.target).value)\"\n          [placeholder]=\"placeholder()\"\n          [attr.aria-label]=\"placeholder()\"\n          (keydown.arrowdown)=\"focusResult(0, $event)\"\n          class=\"mb-2 min-h-11\"\n        />\n        <div [attr.aria-busy]=\"isLoading()\" class=\"max-h-72 overflow-y-auto overscroll-contain\">\n          @if (isLoading()) {\n            <p role=\"status\" class=\"px-3 py-6 text-center text-sm text-foreground/75\">\n              {{ loadingText() }}\n            </p>\n          } @else if (hasError()) {\n            <div role=\"status\" class=\"space-y-3 px-3 py-4 text-sm\">\n              <p>{{ errorText() }}</p>\n              <button\n                type=\"button\"\n                (click)=\"retry()\"\n                class=\"min-h-11 rounded-md border border-border px-3 font-medium cursor-pointer focus-visible:outline-2 focus-visible:outline-ring\"\n              >\n                {{ retryText() }}\n              </button>\n            </div>\n          } @else if (!results().length) {\n            <p role=\"status\" class=\"px-3 py-6 text-center text-sm text-foreground/75\">\n              {{ emptyText() }}\n            </p>\n          } @else {\n            @for (result of results(); track $index; let index = $index) {\n              <button\n                #resultButton\n                type=\"button\"\n                (click)=\"selectResult(result)\"\n                (keydown.arrowdown)=\"focusResult(index + 1, $event)\"\n                (keydown.arrowup)=\"focusResult(index - 1, $event)\"\n                (keydown.home)=\"focusResult(0, $event)\"\n                (keydown.end)=\"focusResult(results().length - 1, $event)\"\n                class=\"flex min-h-11 w-full items-center rounded-md px-3 py-2 text-left text-sm cursor-pointer hover:bg-foreground/5 focus-visible:bg-foreground/10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n              >\n                @if (resultTemplate(); as template) {\n                  <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: result }\" />\n                } @else {\n                  {{ labelFor(result) }}\n                }\n              </button>\n            }\n          }\n        </div>\n      </hlm-popover-content>\n    </hlm-popover>\n  ", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgLayoutSearch, isStandalone: true, selector: "eg-layout-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, retryText: { classPropertyName: "retryText", publicName: "retryText", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, resultLabel: { classPropertyName: "resultLabel", publicName: "resultLabel", isSignal: true, isRequired: false, transformFunction: null }, resultTemplate: { classPropertyName: "resultTemplate", publicName: "resultTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resultSelected: "resultSelected" }, host: { classAttribute: "block min-w-0" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "resultButtons", predicate: ["resultButton"], descendants: true, isSignal: true }], ngImport: i0, template: "\n    <hlm-popover\n      [state]=\"isOpen() ? 'open' : 'closed'\"\n      (stateChanged)=\"setOpen($event === 'open')\"\n      (closed)=\"setOpen(false)\"\n    >\n      <button\n        hlmPopoverTrigger\n        type=\"button\"\n        class=\"flex min-h-11 w-full items-center gap-2 rounded-lg border border-border bg-foreground/3 px-3 text-left text-sm text-foreground/75 cursor-pointer hover:bg-foreground/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring md:w-56\"\n      >\n        <ng-icon [svg]=\"searchIcon\" size=\"16px\" aria-hidden=\"true\" class=\"shrink-0\" />\n        <span class=\"truncate\">{{ placeholder() }}</span>\n      </button>\n      <hlm-popover-content *hlmPopoverPortal class=\"w-80 max-w-[calc(100vw-2rem)] p-2\">\n        <input\n          #searchInput\n          hlmInput\n          type=\"search\"\n          autocomplete=\"off\"\n          [value]=\"query()\"\n          (input)=\"query.set($any($event.target).value)\"\n          [placeholder]=\"placeholder()\"\n          [attr.aria-label]=\"placeholder()\"\n          (keydown.arrowdown)=\"focusResult(0, $event)\"\n          class=\"mb-2 min-h-11\"\n        />\n        <div [attr.aria-busy]=\"isLoading()\" class=\"max-h-72 overflow-y-auto overscroll-contain\">\n          @if (isLoading()) {\n            <p role=\"status\" class=\"px-3 py-6 text-center text-sm text-foreground/75\">\n              {{ loadingText() }}\n            </p>\n          } @else if (hasError()) {\n            <div role=\"status\" class=\"space-y-3 px-3 py-4 text-sm\">\n              <p>{{ errorText() }}</p>\n              <button\n                type=\"button\"\n                (click)=\"retry()\"\n                class=\"min-h-11 rounded-md border border-border px-3 font-medium cursor-pointer focus-visible:outline-2 focus-visible:outline-ring\"\n              >\n                {{ retryText() }}\n              </button>\n            </div>\n          } @else if (!results().length) {\n            <p role=\"status\" class=\"px-3 py-6 text-center text-sm text-foreground/75\">\n              {{ emptyText() }}\n            </p>\n          } @else {\n            @for (result of results(); track $index; let index = $index) {\n              <button\n                #resultButton\n                type=\"button\"\n                (click)=\"selectResult(result)\"\n                (keydown.arrowdown)=\"focusResult(index + 1, $event)\"\n                (keydown.arrowup)=\"focusResult(index - 1, $event)\"\n                (keydown.home)=\"focusResult(0, $event)\"\n                (keydown.end)=\"focusResult(results().length - 1, $event)\"\n                class=\"flex min-h-11 w-full items-center rounded-md px-3 py-2 text-left text-sm cursor-pointer hover:bg-foreground/5 focus-visible:bg-foreground/10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring\"\n              >\n                @if (resultTemplate(); as template) {\n                  <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: result }\" />\n                } @else {\n                  {{ labelFor(result) }}\n                }\n              </button>\n            }\n          }\n        </div>\n      </hlm-popover-content>\n    </hlm-popover>\n  ", 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",
-  "version": "0.5.3",
+  "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/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/utils';
+import { Directive, input, NgModule } from '@angular/core';
+import { classes, hlm } from '@egose/shadcn-theme-ng/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(() => "text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0");
+        classes(() => hlm("text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0", this.size() === 'sm' ? "h-8" : this.size() === 'lg' ? "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(() => "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0");
+        classes(() => hlm("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0", this.size() === 'sm' ? "p-1" : this.size() === 'lg' ? "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.

package/table/types/table.d.ts

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
 
+/** Density scale shared by table parts and higher-level components (e.g. data-table). */
+type HlmTableSize = 'sm' | 'default' | 'lg';
 declare class HlmTableContainer {
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmTableContainer, never>;
@@ -54,18 +56,20 @@ declare class HlmTr {
  * within an HlmTable context.
  */
 declare class HlmTh {
+    readonly size: i0.InputSignal<HlmTableSize>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmTh, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTh, "th[hlmTh],th[hlmTableHead]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTh, "th[hlmTh],th[hlmTableHead]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Directive to apply Shadcn-like styling to a <td> element
  * within an HlmTable context.
  */
 declare class HlmTd {
+    readonly size: i0.InputSignal<HlmTableSize>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<HlmTd, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTd, "td[hlmTd],td[hlmTableCell]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTd, "td[hlmTd],td[hlmTableCell]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Directive to apply Shadcn-like styling to a <caption> element
@@ -85,3 +89,4 @@ declare class HlmTableModule {
 }
 
 export { HlmCaption, HlmTBody, HlmTFoot, HlmTHead, HlmTable, HlmTableContainer, HlmTableImports, HlmTableModule, HlmTd, HlmTh, HlmTr };
+export type { HlmTableSize };