@luzmo/ngx-lucero 2.4.2 → 2.5.1

package/README.md

@@ -86,6 +86,69 @@ Angular 17–19 do not recognize custom elements as anchor-like. On those
 versions, use `routerLink` without a separate `href` for client-side navigation,
 or upgrade to Angular 20+ when native link behavior is required.
 
+## Template inputs
+
+Properties marked with `@templateProperty` accept nested named templates through
+`LuzmoTemplate`. Import both the component and `LuzmoTemplate` into your standalone
+component's `imports` array:
+
+```ts
+import { LuzmoTable, LuzmoTableCell, LuzmoTemplate } from '@luzmo/ngx-lucero';
+```
+
+```html
+<luzmo-table [items]="rows" [columns]="columns">
+  <ng-template luzmoTemplate="row" let-item let-index="index">
+    <luzmo-table-cell>{{ index }}: {{ item.name }}</luzmo-table-cell>
+  </ng-template>
+  <ng-template luzmoTemplate="details" let-item>
+    Details: {{ item.name }}
+  </ng-template>
+</luzmo-table>
+```
+
+The directive must be a direct content child of the wrapper (Angular `@if` and
+`@for` blocks are supported). Templates inside nested components belong to those
+components. Duplicate or unknown slot names throw an error.
+
+Explicit inputs remain supported: `[renderItem]="callbackOrTemplate"` takes
+precedence over the `row` slot. A `null` or `undefined` input falls back to the
+nested template; removing that template restores the component's initial renderer.
+
+The table context exposes `$implicit`/`item` and the source `index`. Angular views
+refresh when their declaring component is checked, including bindings, events and
+control flow. Each mounted Lit render location owns one view. Changing templates,
+removing content or destroying the wrapper releases the affected views. Unchanged
+templates retain their views across Angular checks. Temporary Lit disconnection
+releases views; reconnecting creates them again.
+
+### Declaring a template property
+
+In a web component, replace the renderer's `@property({ attribute: false })`
+with the shared decorator:
+
+```ts
+@templateProperty({ slot: 'row', context: ['item', 'index'], implicit: 'item' })
+public renderItem: ((item: Item, index: number) => unknown) | undefined;
+```
+
+The optional `slot` names the projected template; without it, the property name
+is used. Slot names must be unique within a component.
+
+Import `templateProperty` from the core utilities. Continue calling the renderer
+inside a Lit child expression. The analyzer writes the literal context names and
+implicit argument to the Custom Elements Manifest; the Angular generator uses
+that metadata to produce its input and shared adapter. Neither layer branches on
+a component name. This contract requires the renderer result to reach a Lit child
+expression; it does not apply to callbacks that require a string or a DOM element.
+
+The wrappers generate typed `TemplateRef` inputs but do not generate
+component-specific context guards to infer `let-item` inside an `ng-template`,
+including templates marked with the generic `LuzmoTemplate` directive.
+The existing callback API remains typed. Decorator options must be literal
+`slot`, `context` and `implicit` values so the analyzer can read them without executing
+component code.
+
 ## Notes
 
 - This package depends on `@luzmo/lucero` for the underlying custom elements.

package/esm/components/action-button.d.ts

@@ -18,7 +18,7 @@ export declare class LuzmoActionButton implements OnChanges, ControlValueAccesso
     holdAffordance?: boolean;
     /** Whether the Action Button should show in a quiet state */
     quiet?: boolean;
-    /** The surface treatment for neutral action buttons. `outline` preserves the standard surface; `fill` uses highlighted neutral surface tokens. Quiet, selected, and static-color appearances take precedence. Other variants retain their existing appearance. */
+    /** The surface treatment for neutral and primary action buttons. `outline` preserves the standard surface; `fill` uses highlighted neutral surface tokens. Primary fill uses primary surface and inverse content colors. Quiet, selected, and static-color appearances take precedence. Other variants retain their existing appearance. */
     treatment?: ActionButtonTreatments;
     /** The role for the Action Button */
     role?: string;
@@ -28,7 +28,7 @@ export declare class LuzmoActionButton implements OnChanges, ControlValueAccesso
     toggles?: boolean;
     /** The static color variant to use for the action button. */
     staticColor?: 'white' | 'black';
-    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `primary`: a primary-colored outline action button. - `negative`: a destructive tool with negative text and icon colors. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
+    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `primary`: a primary-colored outline or filled action button. - `negative`: a destructive tool with negative text and icon colors. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
     variant?: ActionButtonVariants;
     /** The value of the Action Button */
     value?: string;

package/esm/components/action-button.js

@@ -25,7 +25,7 @@ export class LuzmoActionButton {
     holdAffordance;
     /** Whether the Action Button should show in a quiet state */
     quiet;
-    /** The surface treatment for neutral action buttons. `outline` preserves the standard surface; `fill` uses highlighted neutral surface tokens. Quiet, selected, and static-color appearances take precedence. Other variants retain their existing appearance. */
+    /** The surface treatment for neutral and primary action buttons. `outline` preserves the standard surface; `fill` uses highlighted neutral surface tokens. Primary fill uses primary surface and inverse content colors. Quiet, selected, and static-color appearances take precedence. Other variants retain their existing appearance. */
     treatment;
     /** The role for the Action Button */
     role;
@@ -35,7 +35,7 @@ export class LuzmoActionButton {
     toggles;
     /** The static color variant to use for the action button. */
     staticColor;
-    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `primary`: a primary-colored outline action button. - `negative`: a destructive tool with negative text and icon colors. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
+    /** The appearance preset to apply to this action button. - `neutral` (default): the standard action button. - `primary`: a primary-colored outline or filled action button. - `negative`: a destructive tool with negative text and icon colors. - `pill`: a content-width chip using the standard action-button radius. - `accent`: a content-width chip with a soft, primary-tinted theme. */
     variant;
     /** The value of the Action Button */
     value;

package/esm/components/action-menu.d.ts

@@ -1,8 +1,9 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import '@luzmo/lucero/action-menu';
-import type { LuzmoActionMenu as LuzmoActionMenuHostElement } from '@luzmo/lucero/action-menu';
+import type { LuzmoActionMenu as LuzmoActionMenuHostElement, ActionButtonTreatments, ActionButtonVariants } from '@luzmo/lucero/action-menu';
 import * as i0 from "@angular/core";
+export type { ActionButtonTreatments, ActionButtonVariants } from '@luzmo/lucero/action-menu';
 export declare class LuzmoActionMenu implements OnChanges, ControlValueAccessor {
     private readonly elementRef;
     private readonly renderer;
@@ -13,6 +14,10 @@ export declare class LuzmoActionMenu implements OnChanges, ControlValueAccessor
     get nativeElement(): LuzmoActionMenuHostElement;
     selects?: never | 'single';
     staticColor?: 'white' | 'black';
+    /** The appearance preset for the trigger, independent of the menu variant. When omitted, the trigger uses its neutral variant. */
+    buttonVariant?: ActionButtonVariants;
+    /** The surface treatment for the trigger, including primary filled actions. When omitted, the trigger uses its outline treatment. */
+    buttonTreatment?: ActionButtonTreatments;
     handleSlottableRequest?: unknown;
     managePresenceObservedSlot?: unknown;
     size?: ('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl');
@@ -76,7 +81,7 @@ export declare class LuzmoActionMenu implements OnChanges, ControlValueAccessor
     toggle(target?: boolean): void;
     close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoActionMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionMenu, "luzmo-action-menu", ["luzmoActionMenu"], { "selects": { "alias": "selects"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "handleSlottableRequest": { "alias": "handleSlottableRequest"; "required": false; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "size": { "alias": "size"; "required": false; }; "appliedLabel": { "alias": "appliedLabel"; "required": false; }; "button": { "alias": "button"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "labelAlignment": { "alias": "labelAlignment"; "required": false; }; "optionsMenu": { "alias": "optionsMenu"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "dependencyManager": { "alias": "dependencyManager"; "required": false; }; "isMobile": { "alias": "isMobile"; "required": false; }; "isTouchDevice": { "alias": "isTouchDevice"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "pendingStateController": { "alias": "pendingStateController"; "required": false; }; "applyFocusElementLabel": { "alias": "applyFocusElementLabel"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "changeEvent"; "scrollEvent": "scrollEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoActionMenu, "luzmo-action-menu", ["luzmoActionMenu"], { "selects": { "alias": "selects"; "required": false; }; "staticColor": { "alias": "staticColor"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "buttonTreatment": { "alias": "buttonTreatment"; "required": false; }; "handleSlottableRequest": { "alias": "handleSlottableRequest"; "required": false; }; "managePresenceObservedSlot": { "alias": "managePresenceObservedSlot"; "required": false; }; "size": { "alias": "size"; "required": false; }; "appliedLabel": { "alias": "appliedLabel"; "required": false; }; "button": { "alias": "button"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "icons": { "alias": "icons"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "pending": { "alias": "pending"; "required": false; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; }; "label": { "alias": "label"; "required": false; }; "open": { "alias": "open"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "labelAlignment": { "alias": "labelAlignment"; "required": false; }; "optionsMenu": { "alias": "optionsMenu"; "required": false; }; "overlayElement": { "alias": "overlayElement"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "quiet": { "alias": "quiet"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selectedItem": { "alias": "selectedItem"; "required": false; }; "dependencyManager": { "alias": "dependencyManager"; "required": false; }; "isMobile": { "alias": "isMobile"; "required": false; }; "isTouchDevice": { "alias": "isTouchDevice"; "required": false; }; "strategy": { "alias": "strategy"; "required": false; }; "pendingStateController": { "alias": "pendingStateController"; "required": false; }; "applyFocusElementLabel": { "alias": "applyFocusElementLabel"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "changeEvent": "changeEvent"; "scrollEvent": "scrollEvent"; "keydownEvent": "keydownEvent"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoActionMenu */
 export type LuzmoActionMenuElement = LuzmoActionMenuHostElement;

package/esm/components/action-menu.js

@@ -24,6 +24,10 @@ export class LuzmoActionMenu {
     }
     selects;
     staticColor;
+    /** The appearance preset for the trigger, independent of the menu variant. When omitted, the trigger uses its neutral variant. */
+    buttonVariant;
+    /** The surface treatment for the trigger, including primary filled actions. When omitted, the trigger uses its outline treatment. */
+    buttonTreatment;
     handleSlottableRequest;
     managePresenceObservedSlot;
     size;
@@ -82,6 +86,12 @@ export class LuzmoActionMenu {
                 case 'staticColor':
                     this.setHostProperty('staticColor', changes['staticColor'].currentValue);
                     break;
+                case 'buttonVariant':
+                    this.setHostProperty('buttonVariant', changes['buttonVariant'].currentValue);
+                    break;
+                case 'buttonTreatment':
+                    this.setHostProperty('buttonTreatment', changes['buttonTreatment'].currentValue);
+                    break;
                 case 'handleSlottableRequest':
                     this.setHostProperty('handleSlottableRequest', changes['handleSlottableRequest'].currentValue);
                     break;
@@ -249,7 +259,7 @@ export class LuzmoActionMenu {
         return this.host.close();
     }
     static ɵfac = function LuzmoActionMenu_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoActionMenu)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionMenu, selectors: [["luzmo-action-menu"]], inputs: { selects: "selects", staticColor: "staticColor", handleSlottableRequest: "handleSlottableRequest", managePresenceObservedSlot: "managePresenceObservedSlot", size: "size", appliedLabel: "appliedLabel", button: "button", disabled: "disabled", focused: "focused", icons: "icons", variant: "variant", invalid: "invalid", pending: "pending", pendingLabel: "pendingLabel", label: "label", open: "open", readonly: "readonly", labelAlignment: "labelAlignment", optionsMenu: "optionsMenu", overlayElement: "overlayElement", placement: "placement", quiet: "quiet", value: "value", selectedItem: "selectedItem", dependencyManager: "dependencyManager", isMobile: "isMobile", isTouchDevice: "isTouchDevice", strategy: "strategy", pendingStateController: "pendingStateController", applyFocusElementLabel: "applyFocusElementLabel", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", scrollEvent: "scrollEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoActionMenu"], features: [i0.ɵɵProvidersFeature([
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoActionMenu, selectors: [["luzmo-action-menu"]], inputs: { selects: "selects", staticColor: "staticColor", buttonVariant: "buttonVariant", buttonTreatment: "buttonTreatment", handleSlottableRequest: "handleSlottableRequest", managePresenceObservedSlot: "managePresenceObservedSlot", size: "size", appliedLabel: "appliedLabel", button: "button", disabled: "disabled", focused: "focused", icons: "icons", variant: "variant", invalid: "invalid", pending: "pending", pendingLabel: "pendingLabel", label: "label", open: "open", readonly: "readonly", labelAlignment: "labelAlignment", optionsMenu: "optionsMenu", overlayElement: "overlayElement", placement: "placement", quiet: "quiet", value: "value", selectedItem: "selectedItem", dependencyManager: "dependencyManager", isMobile: "isMobile", isTouchDevice: "isTouchDevice", strategy: "strategy", pendingStateController: "pendingStateController", applyFocusElementLabel: "applyFocusElementLabel", tabIndex: "tabIndex" }, outputs: { changeEvent: "changeEvent", scrollEvent: "scrollEvent", keydownEvent: "keydownEvent" }, exportAs: ["luzmoActionMenu"], features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALUE_ACCESSOR,
                     useExisting: forwardRef(() => LuzmoActionMenu),
@@ -282,6 +292,12 @@ export class LuzmoActionMenu {
         }], staticColor: [{
             type: Input,
             args: [{ alias: 'staticColor' }]
+        }], buttonVariant: [{
+            type: Input,
+            args: [{ alias: 'buttonVariant' }]
+        }], buttonTreatment: [{
+            type: Input,
+            args: [{ alias: 'buttonTreatment' }]
         }], handleSlottableRequest: [{
             type: Input,
             args: [{ alias: 'handleSlottableRequest' }]
@@ -370,4 +386,4 @@ export class LuzmoActionMenu {
             type: Input,
             args: [{ alias: 'tabIndex' }]
         }], changeEvent: [{ type: i0.Output, args: ["changeEvent"] }], scrollEvent: [{ type: i0.Output, args: ["scrollEvent"] }], keydownEvent: [{ type: i0.Output, args: ["keydownEvent"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionMenu, { className: "LuzmoActionMenu", filePath: "components/action-menu.ts", lineNumber: 29 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoActionMenu, { className: "LuzmoActionMenu", filePath: "components/action-menu.ts", lineNumber: 30 }); })();

package/esm/components/progress-steps.d.ts

@@ -19,7 +19,6 @@ export declare class LuzmoProgressSteps implements OnChanges {
     collapsed?: boolean;
     /** 'detailed' (default): the history lists main steps with their substeps - 'compact': the history lists main steps only */
     displayMode?: ProgressStepsDisplayMode;
-    condensed?: boolean;
     /** Visible and announced copy. Partial overrides are merged over the English defaults. `{{count}}` is replaced in the count labels. */
     labels?: Partial<ProgressStepsLabels>;
     /** Disables the shimmer and transitions. */
@@ -42,7 +41,7 @@ export declare class LuzmoProgressSteps implements OnChanges {
     private setHostProperty;
     private bindEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoProgressSteps, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoProgressSteps, "luzmo-progress-steps", ["luzmoProgressSteps"], { "progress": { "alias": "progress"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "displayMode": { "alias": "displayMode"; "required": false; }; "condensed": { "alias": "condensed"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "noAnimate": { "alias": "noAnimate"; "required": false; }; "open": { "alias": "open"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoStepExpanded": "luzmo-step-expanded"; "luzmoStepCollapsed": "luzmo-step-collapsed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoProgressSteps, "luzmo-progress-steps", ["luzmoProgressSteps"], { "progress": { "alias": "progress"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "displayMode": { "alias": "displayMode"; "required": false; }; "labels": { "alias": "labels"; "required": false; }; "noAnimate": { "alias": "noAnimate"; "required": false; }; "open": { "alias": "open"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoStepExpanded": "luzmo-step-expanded"; "luzmoStepCollapsed": "luzmo-step-collapsed"; }, never, ["*"], true, never>;
 }
 /** The underlying custom element type for LuzmoProgressSteps */
 export type LuzmoProgressStepsElement = LuzmoProgressStepsHostElement;

package/esm/components/progress-steps.js

@@ -23,7 +23,6 @@ export class LuzmoProgressSteps {
     collapsed;
     /** 'detailed' (default): the history lists main steps with their substeps - 'compact': the history lists main steps only */
     displayMode;
-    condensed;
     /** Visible and announced copy. Partial overrides are merged over the English defaults. `{{count}}` is replaced in the count labels. */
     labels;
     /** Disables the shimmer and transitions. */
@@ -58,9 +57,6 @@ export class LuzmoProgressSteps {
                 case 'displayMode':
                     this.setHostProperty('displayMode', changes['displayMode'].currentValue);
                     break;
-                case 'condensed':
-                    this.setHostProperty('condensed', changes['condensed'].currentValue);
-                    break;
                 case 'labels':
                     this.setHostProperty('labels', changes['labels'].currentValue);
                     break;
@@ -96,7 +92,7 @@ export class LuzmoProgressSteps {
         }));
     }
     static ɵfac = function LuzmoProgressSteps_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoProgressSteps)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoProgressSteps, selectors: [["luzmo-progress-steps"]], inputs: { progress: "progress", locale: "locale", collapsed: "collapsed", displayMode: "displayMode", condensed: "condensed", labels: "labels", noAnimate: "noAnimate", open: "open", size: "size" }, outputs: { luzmoStepExpanded: "luzmo-step-expanded", luzmoStepCollapsed: "luzmo-step-collapsed" }, exportAs: ["luzmoProgressSteps"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoProgressSteps_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoProgressSteps, selectors: [["luzmo-progress-steps"]], inputs: { progress: "progress", locale: "locale", collapsed: "collapsed", displayMode: "displayMode", labels: "labels", noAnimate: "noAnimate", open: "open", size: "size" }, outputs: { luzmoStepExpanded: "luzmo-step-expanded", luzmoStepCollapsed: "luzmo-step-collapsed" }, exportAs: ["luzmoProgressSteps"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoProgressSteps_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
         } }, encapsulation: 2 });
@@ -122,9 +118,6 @@ export class LuzmoProgressSteps {
         }], displayMode: [{
             type: Input,
             args: [{ alias: 'displayMode' }]
-        }], condensed: [{
-            type: Input,
-            args: [{ alias: 'condensed' }]
         }], labels: [{
             type: Input,
             args: [{ alias: 'labels' }]

package/esm/components/table-body.d.ts

@@ -0,0 +1,30 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/table';
+import type { LuzmoTableBody as LuzmoTableBodyHostElement } from '@luzmo/lucero/table';
+import * as i0 from "@angular/core";
+export declare class LuzmoTableBody implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoTableBodyHostElement;
+    role?: string;
+    /** The body scroll position changed. */
+    readonly luzmoTableBodyScroll: import("@angular/core").OutputEmitterRef<CustomEvent<unknown>>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTableBody, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTableBody, "luzmo-table-body", ["luzmoTableBody"], { "role": { "alias": "role"; "required": false; }; }, { "luzmoTableBodyScroll": "luzmo-table-body-scroll"; }, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoTableBody */
+export type LuzmoTableBodyElement = LuzmoTableBodyHostElement;

package/esm/components/table-body.js

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, output, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/table';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-table-body>
+ *
+ * @slot (default) - `luzmo-table-row` elements.
+ */
+export class LuzmoTableBody {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    role;
+    /** The body scroll position changed. */
+    luzmoTableBodyScroll = output({ alias: 'luzmo-table-body-scroll' });
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'role':
+                    this.setHostProperty('role', changes['role'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        this.listenerCleanup.push(this.renderer.listen(this.host, 'luzmo-table-body-scroll', (event) => {
+            this.luzmoTableBodyScroll.emit(event);
+        }));
+    }
+    static ɵfac = function LuzmoTableBody_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTableBody)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTableBody, selectors: [["luzmo-table-body"]], inputs: { role: "role" }, outputs: { luzmoTableBodyScroll: "luzmo-table-body-scroll" }, exportAs: ["luzmoTableBody"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTableBody_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTableBody, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-table-body',
+                exportAs: 'luzmoTableBody',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { role: [{
+            type: Input,
+            args: [{ alias: 'role' }]
+        }], luzmoTableBodyScroll: [{ type: i0.Output, args: ["luzmo-table-body-scroll"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTableBody, { className: "LuzmoTableBody", filePath: "components/table-body.ts", lineNumber: 17 }); })();

package/esm/components/table-cell.d.ts

@@ -0,0 +1,30 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/table';
+import type { LuzmoTableCell as LuzmoTableCellHostElement } from '@luzmo/lucero/table';
+import * as i0 from "@angular/core";
+export declare class LuzmoTableCell implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoTableCellHostElement;
+    role?: string;
+    /** Maximum number of lines before the cell truncates. Unset wraps. Overrides the column's `lineClamp`. */
+    lineClamp?: number;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTableCell, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTableCell, "luzmo-table-cell", ["luzmoTableCell"], { "role": { "alias": "role"; "required": false; }; "lineClamp": { "alias": "lineClamp"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoTableCell */
+export type LuzmoTableCellElement = LuzmoTableCellHostElement;

package/esm/components/table-cell.js

@@ -0,0 +1,79 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/table';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-table-cell>
+ *
+ * @slot (default) - Cell content.
+ */
+export class LuzmoTableCell {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    role;
+    /** Maximum number of lines before the cell truncates. Unset wraps. Overrides the column's `lineClamp`. */
+    lineClamp;
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'role':
+                    this.setHostProperty('role', changes['role'].currentValue);
+                    break;
+                case 'lineClamp':
+                    this.setHostProperty('lineClamp', changes['lineClamp'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        // No custom events for this wrapper.
+    }
+    static ɵfac = function LuzmoTableCell_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTableCell)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTableCell, selectors: [["luzmo-table-cell"]], inputs: { role: "role", lineClamp: "lineClamp" }, exportAs: ["luzmoTableCell"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTableCell_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTableCell, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-table-cell',
+                exportAs: 'luzmoTableCell',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { role: [{
+            type: Input,
+            args: [{ alias: 'role' }]
+        }], lineClamp: [{
+            type: Input,
+            args: [{ alias: 'lineClamp' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTableCell, { className: "LuzmoTableCell", filePath: "components/table-cell.ts", lineNumber: 17 }); })();

package/esm/components/table-checkbox-cell.d.ts

@@ -0,0 +1,37 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import '@luzmo/lucero/table';
+import type { LuzmoTableCheckboxCell as LuzmoTableCheckboxCellHostElement } from '@luzmo/lucero/table';
+import * as i0 from "@angular/core";
+export declare class LuzmoTableCheckboxCell implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly host;
+    private readonly listenerCleanup;
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement(): LuzmoTableCheckboxCellHostElement;
+    role?: string;
+    /** Whether this is the select-all cell of the header row. */
+    headCell?: boolean;
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    selectsSingle?: boolean;
+    emphasized?: boolean;
+    /** Accessible name of the checkbox. */
+    label?: string;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    private setHostProperty;
+    private bindEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LuzmoTableCheckboxCell, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LuzmoTableCheckboxCell, "luzmo-table-checkbox-cell", ["luzmoTableCheckboxCell"], { "role": { "alias": "role"; "required": false; }; "headCell": { "alias": "headCell"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectsSingle": { "alias": "selectsSingle"; "required": false; }; "emphasized": { "alias": "emphasized"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The underlying custom element type for LuzmoTableCheckboxCell */
+export type LuzmoTableCheckboxCellElement = LuzmoTableCheckboxCellHostElement;

package/esm/components/table-checkbox-cell.js

@@ -0,0 +1,120 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, Input, Renderer2 } from '@angular/core';
+import '@luzmo/lucero/table';
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+/**
+ * Angular wrapper component for <luzmo-table-checkbox-cell>
+ */
+export class LuzmoTableCheckboxCell {
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    host = this.elementRef.nativeElement;
+    listenerCleanup = [];
+    /** The underlying custom element instance. Use to call imperative methods. */
+    get nativeElement() {
+        return this.host;
+    }
+    role;
+    /** Whether this is the select-all cell of the header row. */
+    headCell;
+    checked;
+    indeterminate;
+    disabled;
+    selectsSingle;
+    emphasized;
+    /** Accessible name of the checkbox. */
+    label;
+    constructor() {
+        this.bindEvents();
+        this.destroyRef.onDestroy(() => {
+            for (const cleanup of this.listenerCleanup) {
+                cleanup();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        for (const key of Object.keys(changes)) {
+            switch (key) {
+                case 'role':
+                    this.setHostProperty('role', changes['role'].currentValue);
+                    break;
+                case 'headCell':
+                    this.setHostProperty('headCell', changes['headCell'].currentValue);
+                    break;
+                case 'checked':
+                    this.setHostProperty('checked', changes['checked'].currentValue);
+                    break;
+                case 'indeterminate':
+                    this.setHostProperty('indeterminate', changes['indeterminate'].currentValue);
+                    break;
+                case 'disabled':
+                    this.setHostProperty('disabled', changes['disabled'].currentValue);
+                    break;
+                case 'selectsSingle':
+                    this.setHostProperty('selectsSingle', changes['selectsSingle'].currentValue);
+                    break;
+                case 'emphasized':
+                    this.setHostProperty('emphasized', changes['emphasized'].currentValue);
+                    break;
+                case 'label':
+                    this.setHostProperty('label', changes['label'].currentValue);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    /**
+     * Forward a wrapper @Input to the underlying host element via Renderer2 so
+     * the wrapper stays compatible with non-DOM Angular platforms (SSR, tests).
+     * Unlike a "skip undefined" guard, this lets consumers reset values back to
+     * undefined / null by clearing their bindings.
+     */
+    setHostProperty(key, value) {
+        this.renderer.setProperty(this.host, key, value);
+    }
+    bindEvents() {
+        // No custom events for this wrapper.
+    }
+    static ɵfac = function LuzmoTableCheckboxCell_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LuzmoTableCheckboxCell)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LuzmoTableCheckboxCell, selectors: [["luzmo-table-checkbox-cell"]], inputs: { role: "role", headCell: "headCell", checked: "checked", indeterminate: "indeterminate", disabled: "disabled", selectsSingle: "selectsSingle", emphasized: "emphasized", label: "label" }, exportAs: ["luzmoTableCheckboxCell"], features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 1, vars: 0, template: function LuzmoTableCheckboxCell_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵprojection(0);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LuzmoTableCheckboxCell, [{
+        type: Component,
+        args: [{
+                selector: 'luzmo-table-checkbox-cell',
+                exportAs: 'luzmoTableCheckboxCell',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: '<ng-content />'
+            }]
+    }], () => [], { role: [{
+            type: Input,
+            args: [{ alias: 'role' }]
+        }], headCell: [{
+            type: Input,
+            args: [{ alias: 'headCell' }]
+        }], checked: [{
+            type: Input,
+            args: [{ alias: 'checked' }]
+        }], indeterminate: [{
+            type: Input,
+            args: [{ alias: 'indeterminate' }]
+        }], disabled: [{
+            type: Input,
+            args: [{ alias: 'disabled' }]
+        }], selectsSingle: [{
+            type: Input,
+            args: [{ alias: 'selectsSingle' }]
+        }], emphasized: [{
+            type: Input,
+            args: [{ alias: 'emphasized' }]
+        }], label: [{
+            type: Input,
+            args: [{ alias: 'label' }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LuzmoTableCheckboxCell, { className: "LuzmoTableCheckboxCell", filePath: "components/table-checkbox-cell.ts", lineNumber: 15 }); })();