@egose/shadcn-theme-ng 0.5.2 → 0.6.0

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/button';
 import { classes, hlm } from '@egose/shadcn-theme-ng/utils';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { HlmTooltip } from '@egose/shadcn-theme-ng/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,
@@ -281,6 +288,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 '';
@@ -303,16 +327,16 @@ class HlmStepper extends CdkStepper {
         return hlm("ms-4 overflow-hidden ps-6", showConnector && "border-s", this.animationsEnabled() && this.selectedIndex === index && stepTransition({ motion: 'enter-bottom' }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmStepper, isStandalone: true, selector: "hlm-stepper", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, indicatorMode: { classPropertyName: "indicatorMode", publicName: "indicatorMode", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabel: { classPropertyName: "stepperAriaLabel", publicName: "stepperAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabelledby: { classPropertyName: "stepperAriaLabelledby", publicName: "stepperAriaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, animationsEnabled: { classPropertyName: "animationsEnabled", publicName: "animationsEnabled", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStepper, useExisting: HlmStepper }], usesInheritance: true, ngImport: i0, template: "\n    @switch (orientation) {\n      @case ('horizontal') {\n        <div class=\"flex w-full flex-col gap-6\">\n          @if (headerPosition() === 'top') {\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n          }\n        </div>\n      }\n\n      @case ('vertical') {\n        <div class=\"flex w-full flex-col gap-3\">\n          @for (step of steps; track step; let i = $index) {\n            <div class=\"flex flex-col gap-2\">\n              <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n              <div\n                [class]=\"_gridContainerClass(selectedIndex === i)\"\n                [style.transition-duration.ms]=\"animationDuration()\"\n              >\n                <section\n                  [class]=\"_verticalStepClass(!$last, i)\"\n                  role=\"region\"\n                  [id]=\"_getStepContentId(i)\"\n                  [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                >\n                  <ng-container [ngTemplateOutlet]=\"step.content\" />\n                </section>\n              </div>\n\n              @if (!$last) {\n                <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n                  <span [class]=\"_connectorClass(step.index())\"></span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <ng-template #stepHeaderTemplate let-step=\"step\">\n      <hlm-step-header\n        cdkStepHeader\n        class=\"min-w-0\"\n        (click)=\"step.select()\"\n        (keydown)=\"_onKeydown($event)\"\n        [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n        [id]=\"_getStepLabelId(step.index())\"\n        [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n        [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n        [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n        [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n        [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n        [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n        [attr.aria-controls]=\"_getStepContentId(step.index())\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n        [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n        [index]=\"step.index()\"\n        [state]=\"step.indicatorType()\"\n        [label]=\"step.stepLabelContent() || step.label\"\n        [selected]=\"step.isSelected()\"\n        [reached]=\"step.index() < selectedIndex\"\n        [active]=\"step.isNavigable()\"\n        [optional]=\"step.optional\"\n        [errorMessage]=\"step.errorMessage\"\n        [disabled]=\"linear && !step.isNavigable()\"\n        [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n        [indicatorMode]=\"indicatorMode()\"\n        [icon]=\"stepIcon(step)\"\n      />\n    </ng-template>\n\n    <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n      <ol\n        class=\"flex w-full items-center\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n        [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n      >\n        @for (step of steps; track step) {\n          <li class=\"flex min-w-0 items-center\">\n            <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n          </li>\n\n          @if (!$last) {\n            <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n              <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n                <span\n                  class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n                  [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n                ></span>\n              </span>\n            </li>\n          }\n        }\n      </ol>\n    </ng-template>\n\n    <ng-template #horizontalPanelTemplate>\n      <div class=\"relative min-h-0 overflow-hidden\">\n        @for (activeIndex of [selectedIndex]; track activeIndex) {\n          <section\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId(activeIndex)\"\n            [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n            [style.animation-duration.ms]=\"animationDuration()\"\n            [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n            [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n          >\n            <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n          </section>\n        }\n      </div>\n    </ng-template>\n  ", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmStepper, isStandalone: true, selector: "hlm-stepper", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, indicatorMode: { classPropertyName: "indicatorMode", publicName: "indicatorMode", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabel: { classPropertyName: "stepperAriaLabel", publicName: "stepperAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabelledby: { classPropertyName: "stepperAriaLabelledby", publicName: "stepperAriaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, animationsEnabled: { classPropertyName: "animationsEnabled", publicName: "animationsEnabled", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStepper, useExisting: HlmStepper }], usesInheritance: true, ngImport: i0, template: "\n    @switch (orientation) {\n      @case ('horizontal') {\n        <div class=\"flex w-full flex-col gap-6\">\n          @if (headerPosition() === 'top') {\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n          }\n        </div>\n      }\n\n      @case ('vertical') {\n        <div class=\"flex w-full flex-col gap-3\">\n          @for (step of steps; track step; let i = $index) {\n            <div class=\"flex flex-col gap-2\">\n              <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n              <div\n                [class]=\"_gridContainerClass(selectedIndex === i)\"\n                [style.transition-duration.ms]=\"animationDuration()\"\n              >\n                <section\n                  [class]=\"_verticalStepClass(!$last, i)\"\n                  role=\"region\"\n                  [id]=\"_getStepContentId(i)\"\n                  [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                >\n                  <ng-container [ngTemplateOutlet]=\"step.content\" />\n                </section>\n              </div>\n\n              @if (!$last) {\n                <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n                  <span [class]=\"_connectorClass(step.index())\"></span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <ng-template #stepHeaderTemplate let-step=\"step\">\n      <hlm-step-header\n        cdkStepHeader\n        class=\"min-w-0\"\n        (click)=\"step.select()\"\n        (keydown)=\"_onKeydown($event)\"\n        [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n        [id]=\"_getStepLabelId(step.index())\"\n        [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n        [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n        [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n        [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n        [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n        [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n        [attr.aria-controls]=\"_getStepContentId(step.index())\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n        [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n        [index]=\"step.index()\"\n        [state]=\"step.indicatorType()\"\n        [label]=\"step.stepLabelContent() || step.label\"\n        [selected]=\"step.isSelected()\"\n        [reached]=\"step.index() < selectedIndex\"\n        [active]=\"step.isNavigable()\"\n        [optional]=\"step.optional\"\n        [errorMessage]=\"step.errorMessage\"\n        [disabled]=\"linear && !step.isNavigable()\"\n        [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n        [indicatorMode]=\"indicatorMode()\"\n        [icon]=\"stepIcon(step)\"\n        [hlmTooltip]=\"_headerTooltip(step)\"\n        [position]=\"_headerTooltipPosition(step)\"\n        [tooltipDisabled]=\"_headerTooltipDisabled(step)\"\n      />\n    </ng-template>\n\n    <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n      <ol\n        class=\"flex w-full items-center\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n        [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n      >\n        @for (step of steps; track step) {\n          <li class=\"flex min-w-0 items-center\">\n            <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n          </li>\n\n          @if (!$last) {\n            <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n              <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n                <span\n                  class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n                  [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n                ></span>\n              </span>\n            </li>\n          }\n        }\n      </ol>\n    </ng-template>\n\n    <ng-template #horizontalPanelTemplate>\n      <div class=\"relative min-h-0 overflow-hidden\">\n        @for (activeIndex of [selectedIndex]; track activeIndex) {\n          <section\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId(activeIndex)\"\n            [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n            [style.animation-duration.ms]=\"animationDuration()\"\n            [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n            [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n          >\n            <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n          </section>\n        }\n      </div>\n    </ng-template>\n  ", 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: "\n    @switch (orientation) {\n      @case ('horizontal') {\n        <div class=\"flex w-full flex-col gap-6\">\n          @if (headerPosition() === 'top') {\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n          }\n        </div>\n      }\n\n      @case ('vertical') {\n        <div class=\"flex w-full flex-col gap-3\">\n          @for (step of steps; track step; let i = $index) {\n            <div class=\"flex flex-col gap-2\">\n              <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n              <div\n                [class]=\"_gridContainerClass(selectedIndex === i)\"\n                [style.transition-duration.ms]=\"animationDuration()\"\n              >\n                <section\n                  [class]=\"_verticalStepClass(!$last, i)\"\n                  role=\"region\"\n                  [id]=\"_getStepContentId(i)\"\n                  [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                >\n                  <ng-container [ngTemplateOutlet]=\"step.content\" />\n                </section>\n              </div>\n\n              @if (!$last) {\n                <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n                  <span [class]=\"_connectorClass(step.index())\"></span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <ng-template #stepHeaderTemplate let-step=\"step\">\n      <hlm-step-header\n        cdkStepHeader\n        class=\"min-w-0\"\n        (click)=\"step.select()\"\n        (keydown)=\"_onKeydown($event)\"\n        [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n        [id]=\"_getStepLabelId(step.index())\"\n        [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n        [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n        [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n        [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n        [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n        [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n        [attr.aria-controls]=\"_getStepContentId(step.index())\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n        [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n        [index]=\"step.index()\"\n        [state]=\"step.indicatorType()\"\n        [label]=\"step.stepLabelContent() || step.label\"\n        [selected]=\"step.isSelected()\"\n        [reached]=\"step.index() < selectedIndex\"\n        [active]=\"step.isNavigable()\"\n        [optional]=\"step.optional\"\n        [errorMessage]=\"step.errorMessage\"\n        [disabled]=\"linear && !step.isNavigable()\"\n        [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n        [indicatorMode]=\"indicatorMode()\"\n        [icon]=\"stepIcon(step)\"\n      />\n    </ng-template>\n\n    <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n      <ol\n        class=\"flex w-full items-center\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n        [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n      >\n        @for (step of steps; track step) {\n          <li class=\"flex min-w-0 items-center\">\n            <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n          </li>\n\n          @if (!$last) {\n            <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n              <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n                <span\n                  class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n                  [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n                ></span>\n              </span>\n            </li>\n          }\n        }\n      </ol>\n    </ng-template>\n\n    <ng-template #horizontalPanelTemplate>\n      <div class=\"relative min-h-0 overflow-hidden\">\n        @for (activeIndex of [selectedIndex]; track activeIndex) {\n          <section\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId(activeIndex)\"\n            [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n            [style.animation-duration.ms]=\"animationDuration()\"\n            [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n            [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n          >\n            <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n          </section>\n        }\n      </div>\n    </ng-template>\n  ",
+                    template: "\n    @switch (orientation) {\n      @case ('horizontal') {\n        <div class=\"flex w-full flex-col gap-6\">\n          @if (headerPosition() === 'top') {\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n          }\n        </div>\n      }\n\n      @case ('vertical') {\n        <div class=\"flex w-full flex-col gap-3\">\n          @for (step of steps; track step; let i = $index) {\n            <div class=\"flex flex-col gap-2\">\n              <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n              <div\n                [class]=\"_gridContainerClass(selectedIndex === i)\"\n                [style.transition-duration.ms]=\"animationDuration()\"\n              >\n                <section\n                  [class]=\"_verticalStepClass(!$last, i)\"\n                  role=\"region\"\n                  [id]=\"_getStepContentId(i)\"\n                  [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                >\n                  <ng-container [ngTemplateOutlet]=\"step.content\" />\n                </section>\n              </div>\n\n              @if (!$last) {\n                <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n                  <span [class]=\"_connectorClass(step.index())\"></span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <ng-template #stepHeaderTemplate let-step=\"step\">\n      <hlm-step-header\n        cdkStepHeader\n        class=\"min-w-0\"\n        (click)=\"step.select()\"\n        (keydown)=\"_onKeydown($event)\"\n        [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n        [id]=\"_getStepLabelId(step.index())\"\n        [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n        [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n        [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n        [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n        [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n        [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n        [attr.aria-controls]=\"_getStepContentId(step.index())\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n        [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n        [index]=\"step.index()\"\n        [state]=\"step.indicatorType()\"\n        [label]=\"step.stepLabelContent() || step.label\"\n        [selected]=\"step.isSelected()\"\n        [reached]=\"step.index() < selectedIndex\"\n        [active]=\"step.isNavigable()\"\n        [optional]=\"step.optional\"\n        [errorMessage]=\"step.errorMessage\"\n        [disabled]=\"linear && !step.isNavigable()\"\n        [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n        [indicatorMode]=\"indicatorMode()\"\n        [icon]=\"stepIcon(step)\"\n        [hlmTooltip]=\"_headerTooltip(step)\"\n        [position]=\"_headerTooltipPosition(step)\"\n        [tooltipDisabled]=\"_headerTooltipDisabled(step)\"\n      />\n    </ng-template>\n\n    <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n      <ol\n        class=\"flex w-full items-center\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n        [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n      >\n        @for (step of steps; track step) {\n          <li class=\"flex min-w-0 items-center\">\n            <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n          </li>\n\n          @if (!$last) {\n            <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n              <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n                <span\n                  class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n                  [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n                ></span>\n              </span>\n            </li>\n          }\n        }\n      </ol>\n    </ng-template>\n\n    <ng-template #horizontalPanelTemplate>\n      <div class=\"relative min-h-0 overflow-hidden\">\n        @for (activeIndex of [selectedIndex]; track activeIndex) {\n          <section\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId(activeIndex)\"\n            [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n            [style.animation-duration.ms]=\"animationDuration()\"\n            [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n            [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n          >\n            <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n          </section>\n        }\n      </div>\n    </ng-template>\n  ",
                 }]
         }], ctorParameters: () => [], propDecorators: { labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], indicatorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorMode", required: false }] }], stepperAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperAriaLabel", required: false }] }], stepperAriaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperAriaLabelledby", required: false }] }], animationsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationsEnabled", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
 

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/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 };