@joanroucoux/cairn-ui 0.8.2 → 0.9.1

package/fesm2022/joanroucoux-cairn-ui-table.mjs

@@ -1,321 +1,1047 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, Directive, Component } from '@angular/core';
-import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
-
-/** Breakpoints a secondary column can be held back until. */
-const CELL_BREAKPOINTS = ['md', 'lg'];
-/** Body row heights. */
-const TABLE_ROWS = ['48', '52', '60'];
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, Directive, booleanAttribute, computed, inject, input, model } from "@angular/core";
+import { holdTransitionsUntilRendered } from "@joanroucoux/cairn-ui/motion";
+const CELL_BREAKPOINTS = ["md", "lg"];
+const TABLE_ROWS = [
+	"48",
+	"52",
+	"60"
+];
 const ROW_CLASSES = {
-    '48': '[--table-row:3rem]',
-    '52': '[--table-row:3.25rem]',
-    '60': '[--table-row:3.75rem]',
+	"48": "[--table-row:3rem]",
+	"52": "[--table-row:3.25rem]",
+	"60": "[--table-row:3.75rem]"
 };
 const FROM_CLASSES = {
-    md: 'hidden md:table-cell',
-    lg: 'hidden lg:table-cell',
+	md: "hidden md:table-cell",
+	lg: "hidden lg:table-cell"
 };
-const TH_CLASSES = 'h-[calc(var(--table-head)+var(--table-head-gap))] border-b-(length:--table-head-gap) border-transparent px-2 align-middle text-caption font-medium text-(--subtle-foreground) shadow-(--table-rule)';
-const TD_CLASSES = 'h-(--table-row) px-2 align-middle text-body';
-const NUMERIC_CLASSES = 'text-right tabular-nums whitespace-nowrap';
-const TEXTUAL_CLASSES = 'text-left';
-const PRIMARY_CLASSES = 'w-full max-w-0';
-/**
- * Styled native table. The rows and cells stay plain <tr> and <td>. `row` sets the height of every
- * body row, `rule` draws or drops the hairline under the header, `spaced` leaves 4px between the
- * header and the first row.
- *
- * @example
- * <table uiTable row="60" [rule]="false">
- */
-class UiTable {
-    row = input('48', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
-    rule = input(true, { ...(ngDevMode ? { debugName: "rule" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    spaced = input(false, { ...(ngDevMode ? { debugName: "spaced" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    classes = computed(() => [
-        'w-full border-separate border-spacing-0',
-        ROW_CLASSES[this.row()],
-        this.rule() ? '[--table-rule:inset_0_-1px_0_var(--hairline)]' : '[--table-rule:none]',
-        this.spaced() ? '[--table-head-gap:0.25rem]' : '[--table-head-gap:0px]',
-    ].join(' '), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        holdTransitionsUntilRendered();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiTable, isStandalone: true, selector: "table[uiTable]", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: false, transformFunction: null }, spaced: { classPropertyName: "spaced", publicName: "spaced", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTable, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'table[uiTable]',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], rule: [{ type: i0.Input, args: [{ isSignal: true, alias: "rule", required: false }] }], spaced: [{ type: i0.Input, args: [{ isSignal: true, alias: "spaced", required: false }] }] } });
-/** Body of one group of rows: leaves a 4px tail after its last row. */
-class UiGroup {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiGroup, isStandalone: true, selector: "tbody[uiGroup]", host: { classAttribute: "after:table-row after:h-1 after:content-[\"\"]" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiGroup, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'tbody[uiGroup]',
-                    host: { class: 'after:table-row after:h-1 after:content-[""]' },
-                }]
-        }] });
-/**
- * Body or group row. An ordinary row glows on hover and takes the soft fill when `selected`; an
- * `interactive` row (one that opens something) also presses to the soft fill. A row with no action keeps a
- * plain name: `<td uiTd primary class="truncate font-medium">`.
- * `group` marks the row that holds a group band: it carries no hover state.
- *
- * @example
- * <tr uiTr [selected]="open">...
- * <tr uiTr group><td ui-group-cell name="Brokerage">...
- */
-class UiTr {
-    group = input(false, { ...(ngDevMode ? { debugName: "group" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    classes = computed(() => {
-        if (this.group()) {
-            return '';
-        }
-        return [
-            'relative [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control',
-            this.selected() ? '[&>td]:bg-(--soft)' : '',
-            'hover:[&>td]:bg-(--glow) [&>td]:transition-colors [&>td]:duration-(--duration-fast) [&>td]:ease-out',
-            this.interactive()
-                ? 'active:[&>td]:bg-(--soft) transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale)'
-                : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiTr, isStandalone: true, selector: "tr[uiTr]", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-selected": "selected() ? \"true\" : null" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTr, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'tr[uiTr]',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.aria-selected]': 'selected() ? "true" : null',
-                    },
-                }]
-        }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
+const TH_CLASSES = "h-[calc(var(--table-head)+var(--table-head-gap))] border-b-(length:--table-head-gap) border-transparent px-2 align-middle text-caption font-medium text-(--subtle-foreground) shadow-(--table-rule)";
+const TD_CLASSES = "h-(--table-row) px-2 align-middle text-body";
+const NUMERIC_CLASSES = "text-right tabular-nums whitespace-nowrap";
+const TEXTUAL_CLASSES = "text-left";
+const PRIMARY_CLASSES = "w-full max-w-0";
+var UiTable = class UiTable {
+	row = input("48", ...ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []);
+	rule = input(true, {
+		...ngDevMode ? { debugName: "rule" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	spaced = input(false, {
+		...ngDevMode ? { debugName: "spaced" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => [
+		"w-full border-separate border-spacing-0",
+		ROW_CLASSES[this.row()],
+		this.rule() ? "[--table-rule:inset_0_-1px_0_var(--hairline)]" : "[--table-rule:none]",
+		this.spaced() ? "[--table-head-gap:0.25rem]" : "[--table-head-gap:0px]"
+	].join(" "), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		holdTransitionsUntilRendered();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiTable,
+		isStandalone: true,
+		selector: "table[uiTable]",
+		inputs: {
+			row: {
+				classPropertyName: "row",
+				publicName: "row",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rule: {
+				classPropertyName: "rule",
+				publicName: "rule",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			spaced: {
+				classPropertyName: "spaced",
+				publicName: "spaced",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiTable,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "table[uiTable]",
+			host: { "[class]": "classes()" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		row: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "row",
+				required: false
+			}]
+		}],
+		rule: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rule",
+				required: false
+			}]
+		}],
+		spaced: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "spaced",
+				required: false
+			}]
+		}]
+	}
+});
+var UiGroup = class UiGroup {
+	collapsed = input(false, {
+		...ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiGroup,
+		isStandalone: true,
+		selector: "tbody[uiGroup]",
+		inputs: { collapsed: {
+			classPropertyName: "collapsed",
+			publicName: "collapsed",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { classAttribute: "after:table-row after:h-1 after:content-[\"\"]" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "tbody[uiGroup]",
+			host: { class: "after:table-row after:h-1 after:content-[\"\"]" }
+		}]
+	}],
+	propDecorators: { collapsed: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "collapsed",
+			required: false
+		}]
+	}] }
+});
+var UiTr = class UiTr {
+	body = inject(UiGroup, { optional: true });
+	group = input(false, {
+		...ngDevMode ? { debugName: "group" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selected = input(false, {
+		...ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	interactive = input(false, {
+		...ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => {
+		if (this.group()) return "";
+		return [
+			"relative [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control",
+			this.selected() ? "[&>td]:bg-(--soft)" : "",
+			"hover:[&>td]:bg-(--glow) [&>td]:transition-colors [&>td]:duration-(--duration-fast) [&>td]:ease-out",
+			this.interactive() ? "active:[&>td]:bg-(--soft) transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale)" : ""
+		].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiTr,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiTr,
+		isStandalone: true,
+		selector: "tr[uiTr]",
+		inputs: {
+			group: {
+				classPropertyName: "group",
+				publicName: "group",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			interactive: {
+				classPropertyName: "interactive",
+				publicName: "interactive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.aria-selected": "selected() ? \"true\" : null",
+			"hidden": "!group() && body?.collapsed()"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiTr,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "tr[uiTr]",
+			host: {
+				"[class]": "classes()",
+				"[attr.aria-selected]": "selected() ? \"true\" : null",
+				"[hidden]": "!group() && body?.collapsed()"
+			}
+		}]
+	}],
+	propDecorators: {
+		group: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "group",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}],
+		interactive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "interactive",
+				required: false
+			}]
+		}]
+	}
+});
 const cellClasses = (base, numeric, primary, from, secondary) => {
-    const breakpoint = from ?? (secondary ? 'lg' : null);
-    return [
-        base,
-        numeric ? NUMERIC_CLASSES : TEXTUAL_CLASSES,
-        primary ? PRIMARY_CLASSES : '',
-        breakpoint ? FROM_CLASSES[breakpoint] : '',
-    ]
-        .filter(Boolean)
-        .join(' ');
+	const breakpoint = from ?? (secondary ? "lg" : null);
+	return [
+		base,
+		numeric ? NUMERIC_CLASSES : TEXTUAL_CLASSES,
+		primary ? PRIMARY_CLASSES : "",
+		breakpoint ? FROM_CLASSES[breakpoint] : ""
+	].filter(Boolean).join(" ");
 };
-/**
- * Column header, centred in its 36px. `numeric` right-aligns and lines the digits up; `secondary`
- * (or `from`) holds a column back until the viewport is wide enough for it; `primary` makes it
- * the column that absorbs the free width and truncates; `tall` is a 40px header; `width` fixes the column width and keeps it from shrinking.
- *
- * @example
- * <th uiTh numeric secondary width="108px">Quantity</th>
- */
-class UiTh {
-    width = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    numeric = input(false, { ...(ngDevMode ? { debugName: "numeric" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    primary = input(false, { ...(ngDevMode ? { debugName: "primary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    secondary = input(false, { ...(ngDevMode ? { debugName: "secondary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    tall = input(false, { ...(ngDevMode ? { debugName: "tall" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    from = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cellClasses(`${this.tall() ? '[--table-head:2.5rem]' : '[--table-head:2.25rem]'} ${TH_CLASSES}`, this.numeric(), this.primary(), this.from(), this.secondary()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiTh, isStandalone: true, selector: "th[uiTh]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, numeric: { classPropertyName: "numeric", publicName: "numeric", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, tall: { classPropertyName: "tall", publicName: "tall", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "style.width": "width()", "style.min-width": "width()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTh, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'th[uiTh]',
-                    host: {
-                        '[class]': 'classes()',
-                        '[style.width]': 'width()',
-                        '[style.min-width]': 'width()',
-                    },
-                }]
-        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], numeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeric", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], tall: [{ type: i0.Input, args: [{ isSignal: true, alias: "tall", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }] } });
-/** Body cell. Same inputs as `UiTh` (bar `tall` and `width`), and they must be set on both to match. */
-class UiTd {
-    numeric = input(false, { ...(ngDevMode ? { debugName: "numeric" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    primary = input(false, { ...(ngDevMode ? { debugName: "primary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    secondary = input(false, { ...(ngDevMode ? { debugName: "secondary" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    from = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cellClasses(TD_CLASSES, this.numeric(), this.primary(), this.from(), this.secondary()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiTd, isStandalone: true, selector: "td[uiTd]", inputs: { numeric: { classPropertyName: "numeric", publicName: "numeric", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, from: { classPropertyName: "from", publicName: "from", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTd, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'td[uiTd]',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                }]
-        }], propDecorators: { numeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeric", required: false }] }], primary: [{ type: i0.Input, args: [{ isSignal: true, alias: "primary", required: false }] }], secondary: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondary", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }] } });
-/** Group band sizes. */
-const GROUP_SIZES = ['md', 'lg'];
-/**
- * The band that opens a group of rows: name in 600 (a heading), meta beside it, the projected
- * total pinned to the right. Spans the whole row through `colspan`.
- *
- * @example
- * <tr uiTr group><td ui-group-cell colspan="4" name="Brokerage" meta="Savings plan">...total...</td></tr>
- */
-class UiGroupCell {
-    name = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    meta = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    size = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => `px-0 ${this.size() === 'lg' ? 'pt-3' : 'pt-2.5'} pb-1 align-middle text-body`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiGroupCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiGroupCell, isStandalone: true, selector: "td[ui-group-cell]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
-    <div
-      class="rounded-control flex items-center justify-between gap-4 bg-(--muted) px-2"
-      [class]="size() === 'lg' ? 'min-h-12' : 'min-h-11'"
-    >
-      <div class="flex min-w-0 items-baseline gap-3">
-        <h2 class="text-body m-0 font-semibold whitespace-nowrap outline-none" data-group-heading tabindex="-1">
-          {{ name() }}
-        </h2>
-        @if (meta()) {
-          <span class="text-label truncate text-(--muted-foreground)">{{ meta() }}</span>
-        }
-      </div>
-      <span class="font-semibold whitespace-nowrap tabular-nums"><ng-content /></span>
-    </div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiGroupCell, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'td[ui-group-cell]',
-                    host: {
-                        '[class]': 'hostClasses()',
-                    },
-                    template: `
-    <div
-      class="rounded-control flex items-center justify-between gap-4 bg-(--muted) px-2"
-      [class]="size() === 'lg' ? 'min-h-12' : 'min-h-11'"
-    >
-      <div class="flex min-w-0 items-baseline gap-3">
-        <h2 class="text-body m-0 font-semibold whitespace-nowrap outline-none" data-group-heading tabindex="-1">
-          {{ name() }}
-        </h2>
-        @if (meta()) {
-          <span class="text-label truncate text-(--muted-foreground)">{{ meta() }}</span>
-        }
+var UiTh = class UiTh {
+	width = input(null, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	numeric = input(false, {
+		...ngDevMode ? { debugName: "numeric" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	primary = input(false, {
+		...ngDevMode ? { debugName: "primary" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	secondary = input(false, {
+		...ngDevMode ? { debugName: "secondary" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	tall = input(false, {
+		...ngDevMode ? { debugName: "tall" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	from = input(null, ...ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cellClasses(`${this.tall() ? "[--table-head:2.5rem]" : "[--table-head:2.25rem]"} ${TH_CLASSES}`, this.numeric(), this.primary(), this.from(), this.secondary()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiTh,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiTh,
+		isStandalone: true,
+		selector: "th[uiTh]",
+		inputs: {
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			numeric: {
+				classPropertyName: "numeric",
+				publicName: "numeric",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			primary: {
+				classPropertyName: "primary",
+				publicName: "primary",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			secondary: {
+				classPropertyName: "secondary",
+				publicName: "secondary",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tall: {
+				classPropertyName: "tall",
+				publicName: "tall",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			from: {
+				classPropertyName: "from",
+				publicName: "from",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"style.width": "width()",
+			"style.min-width": "width()"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiTh,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "th[uiTh]",
+			host: {
+				"[class]": "classes()",
+				"[style.width]": "width()",
+				"[style.min-width]": "width()"
+			}
+		}]
+	}],
+	propDecorators: {
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		numeric: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numeric",
+				required: false
+			}]
+		}],
+		primary: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "primary",
+				required: false
+			}]
+		}],
+		secondary: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "secondary",
+				required: false
+			}]
+		}],
+		tall: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tall",
+				required: false
+			}]
+		}],
+		from: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "from",
+				required: false
+			}]
+		}]
+	}
+});
+var UiTd = class UiTd {
+	numeric = input(false, {
+		...ngDevMode ? { debugName: "numeric" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	primary = input(false, {
+		...ngDevMode ? { debugName: "primary" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	secondary = input(false, {
+		...ngDevMode ? { debugName: "secondary" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	from = input(null, ...ngDevMode ? [{ debugName: "from" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cellClasses(TD_CLASSES, this.numeric(), this.primary(), this.from(), this.secondary()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiTd,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiTd,
+		isStandalone: true,
+		selector: "td[uiTd]",
+		inputs: {
+			numeric: {
+				classPropertyName: "numeric",
+				publicName: "numeric",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			primary: {
+				classPropertyName: "primary",
+				publicName: "primary",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			secondary: {
+				classPropertyName: "secondary",
+				publicName: "secondary",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			from: {
+				classPropertyName: "from",
+				publicName: "from",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiTd,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "td[uiTd]",
+			host: { "[class]": "classes()" }
+		}]
+	}],
+	propDecorators: {
+		numeric: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numeric",
+				required: false
+			}]
+		}],
+		primary: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "primary",
+				required: false
+			}]
+		}],
+		secondary: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "secondary",
+				required: false
+			}]
+		}],
+		from: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "from",
+				required: false
+			}]
+		}]
+	}
+});
+const GROUP_SIZES = ["md", "lg"];
+var UiGroupCell = class UiGroupCell {
+	name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	meta = input(...ngDevMode ? [void 0, { debugName: "meta" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	collapsible = input(false, {
+		...ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	expanded = model(true, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	toggleDisabled = input(false, {
+		...ngDevMode ? { debugName: "toggleDisabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	controls = input(...ngDevMode ? [void 0, { debugName: "controls" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => `px-0 ${this.size() === "lg" ? "pt-3" : "pt-2.5"} pb-1 align-middle text-body`, ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	toggle() {
+		if (!this.toggleDisabled()) this.expanded.update((expanded) => !expanded);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiGroupCell,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiGroupCell,
+		isStandalone: true,
+		selector: "td[ui-group-cell]",
+		inputs: {
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			meta: {
+				classPropertyName: "meta",
+				publicName: "meta",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsible: {
+				classPropertyName: "collapsible",
+				publicName: "collapsible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expanded: {
+				classPropertyName: "expanded",
+				publicName: "expanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			toggleDisabled: {
+				classPropertyName: "toggleDisabled",
+				publicName: "toggleDisabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			controls: {
+				classPropertyName: "controls",
+				publicName: "controls",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { expanded: "expandedChange" },
+		host: { properties: { "class": "hostClasses()" } },
+		ngImport: i0,
+		template: `
+    <ng-template #total><ng-content /></ng-template>
+    @if (collapsible()) {
+      <h2 class="m-0 font-normal">
+        <button
+          class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
+          data-group-heading
+          type="button"
+          [attr.aria-controls]="controls() || null"
+          [attr.aria-disabled]="toggleDisabled() ? 'true' : null"
+          [attr.aria-expanded]="expanded()"
+          [class]="size() === 'lg' ? 'min-h-12' : 'min-h-11'"
+          (click)="toggle()"
+        >
+          <span class="flex min-w-0 items-center gap-2.5">
+            <svg
+              aria-hidden="true"
+              class="flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out"
+              fill="none"
+              height="18"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.75"
+              viewBox="0 0 24 24"
+              width="18"
+              [class.-rotate-90]="!expanded()"
+            >
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+            <span class="flex min-w-0 items-baseline gap-3">
+              <span class="text-body font-semibold whitespace-nowrap">{{ name() }}</span>
+              @if (meta()) {
+                <span class="text-label truncate text-(--muted-foreground)">{{ meta() }}</span>
+              }
+            </span>
+          </span>
+          <span class="text-body font-semibold whitespace-nowrap tabular-nums">
+            <ng-container [ngTemplateOutlet]="total" />
+          </span>
+        </button>
+      </h2>
+    } @else {
+      <div
+        class="rounded-control flex items-center justify-between gap-4 bg-(--muted) px-2"
+        [class]="size() === 'lg' ? 'min-h-12' : 'min-h-11'"
+      >
+        <div class="flex min-w-0 items-baseline gap-3">
+          <h2 class="text-body m-0 font-semibold whitespace-nowrap outline-none" data-group-heading tabindex="-1">
+            {{ name() }}
+          </h2>
+          @if (meta()) {
+            <span class="text-label truncate text-(--muted-foreground)">{{ meta() }}</span>
+          }
+        </div>
+        <span class="font-semibold whitespace-nowrap tabular-nums"><ng-container [ngTemplateOutlet]="total" /></span>
       </div>
-      <span class="font-semibold whitespace-nowrap tabular-nums"><ng-content /></span>
-    </div>
+    }
   `,
-                }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-/**
- * Makes a link or button the way into its row. By default an invisible layer stretches over the
- * whole row, so the row is one target for the pointer, the keyboard and a screen reader, and its
- * focus ring wraps the row. With `[stretch]="false"` only the name is the
- * target: it underlines on hover and takes its own ring. `current` marks the open line.
- *
- * @example
- * <td uiTd primary><a uiRowLink href="/lines/42">Ferrari</a></td>
- * <td uiTd primary><a uiRowLink [stretch]="false" href="/accounts/3">Brokerage</a></td>
- */
-class UiRowLink {
-    stretch = input(true, { ...(ngDevMode ? { debugName: "stretch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    current = input(false, { ...(ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    classes = computed(() => this.stretch()
-        ? 'block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[""] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)'
-        : 'block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiRowLink, isStandalone: true, selector: "a[uiRowLink], button[uiRowLink]", inputs: { stretch: { classPropertyName: "stretch", publicName: "stretch", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-current": "current() ? \"true\" : null" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowLink, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'a[uiRowLink], button[uiRowLink]',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.aria-current]': 'current() ? "true" : null',
-                    },
-                }]
-        }], propDecorators: { stretch: [{ type: i0.Input, args: [{ isSignal: true, alias: "stretch", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }] } });
-/** A control in another cell of a stretched-link row: lifts it above the layer that covers the row. */
-class UiRowAction {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiRowAction, isStandalone: true, selector: "[uiRowAction]", host: { classAttribute: "relative z-1" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowAction, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uiRowAction]',
-                    host: { class: 'relative z-1' },
-                }]
-        }] });
-/** Tones of a subtitle: subtle (default), `--stale` at 500, or the color of the cell. */
-const SUB_TONES = ['subtle', 'stale', 'inherit'];
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiGroupCell,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "td[ui-group-cell]",
+			imports: [NgTemplateOutlet],
+			host: { "[class]": "hostClasses()" },
+			template: `
+    <ng-template #total><ng-content /></ng-template>
+    @if (collapsible()) {
+      <h2 class="m-0 font-normal">
+        <button
+          class="rounded-control flex w-full items-center justify-between gap-4 bg-(--muted) px-2 text-left not-aria-disabled:cursor-pointer not-aria-disabled:hover:bg-(--soft) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)"
+          data-group-heading
+          type="button"
+          [attr.aria-controls]="controls() || null"
+          [attr.aria-disabled]="toggleDisabled() ? 'true' : null"
+          [attr.aria-expanded]="expanded()"
+          [class]="size() === 'lg' ? 'min-h-12' : 'min-h-11'"
+          (click)="toggle()"
+        >
+          <span class="flex min-w-0 items-center gap-2.5">
+            <svg
+              aria-hidden="true"
+              class="flex-none stroke-(--muted-foreground) transition-transform duration-(--duration-fast) ease-out"
+              fill="none"
+              height="18"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.75"
+              viewBox="0 0 24 24"
+              width="18"
+              [class.-rotate-90]="!expanded()"
+            >
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+            <span class="flex min-w-0 items-baseline gap-3">
+              <span class="text-body font-semibold whitespace-nowrap">{{ name() }}</span>
+              @if (meta()) {
+                <span class="text-label truncate text-(--muted-foreground)">{{ meta() }}</span>
+              }
+            </span>
+          </span>
+          <span class="text-body font-semibold whitespace-nowrap tabular-nums">
+            <ng-container [ngTemplateOutlet]="total" />
+          </span>
+        </button>
+      </h2>
+    } @else {
+      <div
+        class="rounded-control flex items-center justify-between gap-4 bg-(--muted) px-2"
+        [class]="size() === 'lg' ? 'min-h-12' : 'min-h-11'"
+      >
+        <div class="flex min-w-0 items-baseline gap-3">
+          <h2 class="text-body m-0 font-semibold whitespace-nowrap outline-none" data-group-heading tabindex="-1">
+            {{ name() }}
+          </h2>
+          @if (meta()) {
+            <span class="text-label truncate text-(--muted-foreground)">{{ meta() }}</span>
+          }
+        </div>
+        <span class="font-semibold whitespace-nowrap tabular-nums"><ng-container [ngTemplateOutlet]="total" /></span>
+      </div>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: true
+			}]
+		}],
+		meta: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "meta",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		collapsible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsible",
+				required: false
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedChange"]
+		}],
+		toggleDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toggleDisabled",
+				required: false
+			}]
+		}],
+		controls: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "controls",
+				required: false
+			}]
+		}]
+	}
+});
+var UiRowLink = class UiRowLink {
+	stretch = input(true, {
+		...ngDevMode ? { debugName: "stretch" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	current = input(false, {
+		...ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => this.stretch() ? "block max-w-full truncate rounded-control text-left font-medium outline-none after:absolute after:inset-0 after:rounded-control after:content-[\"\"] focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-(--ring)" : "block max-w-full truncate rounded-sm text-left font-medium underline-offset-[3px] outline-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)", ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiRowLink,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiRowLink,
+		isStandalone: true,
+		selector: "a[uiRowLink], button[uiRowLink]",
+		inputs: {
+			stretch: {
+				classPropertyName: "stretch",
+				publicName: "stretch",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			current: {
+				classPropertyName: "current",
+				publicName: "current",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.aria-current": "current() ? \"true\" : null"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiRowLink,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "a[uiRowLink], button[uiRowLink]",
+			host: {
+				"[class]": "classes()",
+				"[attr.aria-current]": "current() ? \"true\" : null"
+			}
+		}]
+	}],
+	propDecorators: {
+		stretch: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stretch",
+				required: false
+			}]
+		}],
+		current: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "current",
+				required: false
+			}]
+		}]
+	}
+});
+var UiRowAction = class UiRowAction {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiRowAction,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: UiRowAction,
+		isStandalone: true,
+		selector: "[uiRowAction]",
+		host: { classAttribute: "relative z-1" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiRowAction,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiRowAction]",
+			host: { class: "relative z-1" }
+		}]
+	}]
+});
+const SUB_TONES = [
+	"subtle",
+	"stale",
+	"inherit"
+];
 const SUB_TONE_CLASSES = {
-    subtle: 'font-normal text-(--subtle-foreground)',
-    stale: 'font-medium text-(--stale)',
-    inherit: 'font-normal',
+	subtle: "font-normal text-(--subtle-foreground)",
+	stale: "font-medium text-(--stale)",
+	inherit: "font-normal"
 };
-/**
- * A second line under a cell's main text. `narrow` shows it only under 1024px, where it carries
- * the quantity, average cost and quote that were held back. Its amounts go through `ui-amount`
- * so they mask.
- *
- * @example
- * <span uiCellSub narrow>10 × 421.26 € · cost 388.10 €</span>
- * <span uiCellSub tone="stale">Quote of 24/09</span>
- */
-class UiCellSub {
-    narrow = input(false, { ...(ngDevMode ? { debugName: "narrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    tone = input('subtle', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${this.narrow() ? 'lg:hidden ' : ''}block truncate text-caption tabular-nums ${SUB_TONE_CLASSES[this.tone()]}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiCellSub, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiCellSub, isStandalone: true, selector: "[uiCellSub]", inputs: { narrow: { classPropertyName: "narrow", publicName: "narrow", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiCellSub, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uiCellSub]',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                }]
-        }], propDecorators: { narrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "narrow", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var UiCellSub = class UiCellSub {
+	narrow = input(false, {
+		...ngDevMode ? { debugName: "narrow" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	tone = input("subtle", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	classes = computed(() => `${this.narrow() ? "lg:hidden " : ""}block truncate text-caption tabular-nums ${SUB_TONE_CLASSES[this.tone()]}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiCellSub,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiCellSub,
+		isStandalone: true,
+		selector: "[uiCellSub]",
+		inputs: {
+			narrow: {
+				classPropertyName: "narrow",
+				publicName: "narrow",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiCellSub,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCellSub]",
+			host: { "[class]": "classes()" }
+		}]
+	}],
+	propDecorators: {
+		narrow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "narrow",
+				required: false
+			}]
+		}],
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}]
+	}
+});
 export { CELL_BREAKPOINTS, GROUP_SIZES, SUB_TONES, TABLE_ROWS, UiCellSub, UiGroup, UiGroupCell, UiRowAction, UiRowLink, UiTable, UiTd, UiTh, UiTr };
-//# sourceMappingURL=joanroucoux-cairn-ui-table.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-table.mjs.map