@joanroucoux/cairn-ui 0.7.2 → 0.8.0

package/fesm2022/joanroucoux-cairn-ui-stale-link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-stale-link.mjs","sources":["../../../projects/ui/stale-link/stale-link.ts","../../../projects/ui/stale-link/joanroucoux-cairn-ui-stale-link.ts"],"sourcesContent":["import { Directive, booleanAttribute, computed, input } from '@angular/core';\n\n/** Available stale link sizes. `StaleLinkSize` is derived from this tuple. */\nexport const STALE_LINK_SIZES = ['caption', 'label'] as const;\nexport type StaleLinkSize = (typeof STALE_LINK_SIZES)[number];\n\nconst BASE_CLASSES =\n  \"relative inline-flex items-center gap-0.5 rounded-[4px] font-medium text-(--stale) hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:h-11 pointer-fine:before:h-10 before:-translate-y-1/2 before:content-['']\";\n\nconst SIZE_CLASSES: Record<StaleLinkSize, string> = {\n  caption: 'text-caption',\n  label: 'text-label',\n};\n\nconst CHEVRON_CLASSES =\n  \"after:size-4 after:flex-none after:bg-current after:content-[''] after:mask-center after:mask-no-repeat after:mask-[url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.75%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2018%206-6-6-6%27%2F%3E%3C%2Fsvg%3E)]\";\n\n/**\n * Link in the stale tone, for a caption about data that is late or left out of a total, such as\n * \"1 ligne sans cours, non comptée\". Weight 500, underlined on hover, with an optional trailing\n * chevron. `size` is `caption` (12/17, the default) or `label` (14/20, the dashboard total's\n * \"1 cours en retard\").\n *\n * @example\n * <a uiStaleLink chevron size=\"label\" routerLink=\"/holdings\">1 cours en retard</a>\n */\n@Directive({\n  selector: 'a[uiStaleLink]',\n  host: { '[class]': 'classes()' },\n})\nexport class UiStaleLink {\n  readonly chevron = input(false, { transform: booleanAttribute });\n  readonly size = input<StaleLinkSize>('caption');\n\n  protected readonly classes = computed(\n    () => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]}${this.chevron() ? ` ${CHEVRON_CLASSES}` : ''}`,\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;MACa,gBAAgB,GAAG,CAAC,SAAS,EAAE,OAAO;AAGnD,MAAM,YAAY,GAChB,8UAA8U;AAEhV,MAAM,YAAY,GAAkC;AAClD,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,KAAK,EAAE,YAAY;CACpB;AAED,MAAM,eAAe,GACnB,4aAA4a;AAE9a;;;;;;;;AAQG;MAKU,WAAW,CAAA;IACb,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IACvD,IAAI,GAAG,KAAK,CAAgB,SAAS;6EAAC;AAE5B,IAAA,OAAO,GAAG,QAAQ,CACnC,MAAM,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA,EAAG,IAAI,CAAC,OAAO,EAAE,GAAG,CAAA,CAAA,EAAI,eAAe,CAAA,CAAE,GAAG,EAAE,CAAA,CAAE;gFACnG;uGANU,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBAJvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AACjC,iBAAA;;;AC7BD;;AAEG;;;;"}

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

@@ -0,0 +1,96 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component } from '@angular/core';
+
+/** Available stat sizes. `StatSize` is derived from this tuple. */
+const STAT_SIZES = ['hero', 'tile'];
+const VALUE_CLASSES = {
+    hero: 'text-display font-semibold tracking-(--tracking-display) text-(--foreground)',
+    tile: 'text-title font-semibold tabular-nums text-(--foreground)',
+};
+const LABEL_CLASSES = {
+    hero: 'text-label font-medium text-(--muted-foreground)',
+    tile: 'text-label font-normal text-(--muted-foreground)',
+};
+const STACK_CLASSES = {
+    hero: 'flex flex-col gap-1',
+    tile: 'flex flex-col gap-0.5',
+};
+/**
+ * Label, figure and a named period of change, at two sizes: a `hero` for a screen's single
+ * headline number, or a smaller `tile` repeated in a grid. The figure itself, its delta and its
+ * caption are all projected, so the component carries no formatting and no currency of its own.
+ *
+ * The `hero` size never sets `tabular-nums` on the figure: a lone headline number reads better
+ * with its digits at their natural width, unlike a column of aligned figures.
+ *
+ * @example
+ * <ui-stat label="Net worth" size="hero">
+ *   <span uiStatValue>128,656 EUR</span>
+ *   <ui-delta uiStatDelta [value]="dayChange()" unknownLabel="Not available">+316.54 EUR</ui-delta>
+ *   <span uiStatCaption>today</span>
+ * </ui-stat>
+ */
+class UiStat {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    size = input('tile', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    labelClasses = computed(() => LABEL_CLASSES[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    stackClasses = computed(() => STACK_CLASSES[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stackClasses" }] : /* istanbul ignore next */ []));
+    valueClasses = computed(() => VALUE_CLASSES[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiStat, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiStat, isStandalone: true, selector: "ui-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="flex items-start justify-between gap-4">
+      <div [class]="stackClasses()">
+        <dl [class]="stackClasses()">
+          <dt [class]="labelClasses()">{{ label() }}</dt>
+          <dd [class]="valueClasses()">
+            <ng-content select="[uiStatValue]" />
+          </dd>
+        </dl>
+
+        <div class="text-label flex flex-wrap items-center gap-x-1.5 gap-y-1 text-(--muted-foreground)">
+          <ng-content select="[uiStatDelta]" />
+          <ng-content select="[uiStatCaption]" />
+        </div>
+      </div>
+
+      <ng-content select="[uiStatAside]" />
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiStat, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-stat',
+                    template: `
+    <div class="flex items-start justify-between gap-4">
+      <div [class]="stackClasses()">
+        <dl [class]="stackClasses()">
+          <dt [class]="labelClasses()">{{ label() }}</dt>
+          <dd [class]="valueClasses()">
+            <ng-content select="[uiStatValue]" />
+          </dd>
+        </dl>
+
+        <div class="text-label flex flex-wrap items-center gap-x-1.5 gap-y-1 text-(--muted-foreground)">
+          <ng-content select="[uiStatDelta]" />
+          <ng-content select="[uiStatCaption]" />
+        </div>
+      </div>
+
+      <ng-content select="[uiStatAside]" />
+    </div>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { STAT_SIZES, UiStat };
+//# sourceMappingURL=joanroucoux-cairn-ui-stat.mjs.map

package/fesm2022/joanroucoux-cairn-ui-stat.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-stat.mjs","sources":["../../../projects/ui/stat/stat.ts","../../../projects/ui/stat/joanroucoux-cairn-ui-stat.ts"],"sourcesContent":["import { Component, computed, input } from '@angular/core';\n\n/** Available stat sizes. `StatSize` is derived from this tuple. */\nexport const STAT_SIZES = ['hero', 'tile'] as const;\nexport type StatSize = (typeof STAT_SIZES)[number];\n\nconst VALUE_CLASSES: Record<StatSize, string> = {\n  hero: 'text-display font-semibold tracking-(--tracking-display) text-(--foreground)',\n  tile: 'text-title font-semibold tabular-nums text-(--foreground)',\n};\n\nconst LABEL_CLASSES: Record<StatSize, string> = {\n  hero: 'text-label font-medium text-(--muted-foreground)',\n  tile: 'text-label font-normal text-(--muted-foreground)',\n};\n\nconst STACK_CLASSES: Record<StatSize, string> = {\n  hero: 'flex flex-col gap-1',\n  tile: 'flex flex-col gap-0.5',\n};\n\n/**\n * Label, figure and a named period of change, at two sizes: a `hero` for a screen's single\n * headline number, or a smaller `tile` repeated in a grid. The figure itself, its delta and its\n * caption are all projected, so the component carries no formatting and no currency of its own.\n *\n * The `hero` size never sets `tabular-nums` on the figure: a lone headline number reads better\n * with its digits at their natural width, unlike a column of aligned figures.\n *\n * @example\n * <ui-stat label=\"Net worth\" size=\"hero\">\n *   <span uiStatValue>128,656 EUR</span>\n *   <ui-delta uiStatDelta [value]=\"dayChange()\" unknownLabel=\"Not available\">+316.54 EUR</ui-delta>\n *   <span uiStatCaption>today</span>\n * </ui-stat>\n */\n@Component({\n  selector: 'ui-stat',\n  template: `\n    <div class=\"flex items-start justify-between gap-4\">\n      <div [class]=\"stackClasses()\">\n        <dl [class]=\"stackClasses()\">\n          <dt [class]=\"labelClasses()\">{{ label() }}</dt>\n          <dd [class]=\"valueClasses()\">\n            <ng-content select=\"[uiStatValue]\" />\n          </dd>\n        </dl>\n\n        <div class=\"text-label flex flex-wrap items-center gap-x-1.5 gap-y-1 text-(--muted-foreground)\">\n          <ng-content select=\"[uiStatDelta]\" />\n          <ng-content select=\"[uiStatCaption]\" />\n        </div>\n      </div>\n\n      <ng-content select=\"[uiStatAside]\" />\n    </div>\n  `,\n})\nexport class UiStat {\n  readonly label = input.required<string>();\n  readonly size = input<StatSize>('tile');\n\n  protected readonly labelClasses = computed(() => LABEL_CLASSES[this.size()]);\n\n  protected readonly stackClasses = computed(() => STACK_CLASSES[this.size()]);\n\n  protected readonly valueClasses = computed(() => VALUE_CLASSES[this.size()]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;MACa,UAAU,GAAG,CAAC,MAAM,EAAE,MAAM;AAGzC,MAAM,aAAa,GAA6B;AAC9C,IAAA,IAAI,EAAE,8EAA8E;AACpF,IAAA,IAAI,EAAE,2DAA2D;CAClE;AAED,MAAM,aAAa,GAA6B;AAC9C,IAAA,IAAI,EAAE,kDAAkD;AACxD,IAAA,IAAI,EAAE,kDAAkD;CACzD;AAED,MAAM,aAAa,GAA6B;AAC9C,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,IAAI,EAAE,uBAAuB;CAC9B;AAED;;;;;;;;;;;;;;AAcG;MAuBU,MAAM,CAAA;IACR,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;IAChC,IAAI,GAAG,KAAK,CAAW,MAAM;6EAAC;AAEpB,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;qFAAC;AAEzD,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;qFAAC;AAEzD,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;qFAAC;uGARjE,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EApBP;;;;;;;;;;;;;;;;;;AAkBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAEU,MAAM,EAAA,UAAA,EAAA,CAAA;kBAtBlB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,SAAS;AACnB,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;AAkBT,EAAA,CAAA;AACF,iBAAA;;;ACzDD;;AAEG;;;;"}

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

@@ -0,0 +1,37 @@
+import * as i0 from '@angular/core';
+import { Directive } from '@angular/core';
+import { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';
+
+const CLASSES = "relative shrink-0 w-[51px] h-[31px] pointer-fine:w-10 pointer-fine:h-6 appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-[background-color] duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] pointer-fine:after:size-5 after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px] pointer-fine:checked:after:translate-x-4";
+/**
+ * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role="switch"`.
+ * 51 by 31 on touch, 40 by 24 with a mouse.
+ *
+ * @example
+ * <input type="checkbox" uiSwitch [checked]="hidden()" (change)="toggle()" aria-label="Hide amounts" />
+ */
+class UiSwitch {
+    classes = CLASSES;
+    constructor() {
+        holdTransitionsUntilRendered();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSwitch, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiSwitch, isStandalone: true, selector: "input[type=checkbox][uiSwitch]", host: { attributes: { "role": "switch" }, properties: { "class": "classes" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSwitch, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type=checkbox][uiSwitch]',
+                    host: {
+                        role: 'switch',
+                        '[class]': 'classes',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiSwitch };
+//# sourceMappingURL=joanroucoux-cairn-ui-switch.mjs.map

package/fesm2022/joanroucoux-cairn-ui-switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-switch.mjs","sources":["../../../projects/ui/switch/switch.ts","../../../projects/ui/switch/joanroucoux-cairn-ui-switch.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\nimport { holdTransitionsUntilRendered } from '@joanroucoux/cairn-ui/motion';\n\nconst CLASSES =\n  \"relative shrink-0 w-[51px] h-[31px] pointer-fine:w-10 pointer-fine:h-6 appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-[background-color] duration-(--duration-fast) ease-out disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) before:absolute before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-(--row-min) before:content-[''] after:absolute after:top-0.5 after:left-0.5 after:size-[27px] pointer-fine:after:size-5 after:rounded-pill after:bg-(--card) after:shadow-[0_1px_3px_rgb(0_0_0/0.2)] after:transition-transform after:duration-(--duration-fast) after:ease-out after:content-[''] checked:after:translate-x-[20px] pointer-fine:checked:after:translate-x-4\";\n\n/**\n * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role=\"switch\"`.\n * 51 by 31 on touch, 40 by 24 with a mouse.\n *\n * @example\n * <input type=\"checkbox\" uiSwitch [checked]=\"hidden()\" (change)=\"toggle()\" aria-label=\"Hide amounts\" />\n */\n@Directive({\n  selector: 'input[type=checkbox][uiSwitch]',\n  host: {\n    role: 'switch',\n    '[class]': 'classes',\n  },\n})\nexport class UiSwitch {\n  protected readonly classes = CLASSES;\n\n  constructor() {\n    holdTransitionsUntilRendered();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA,MAAM,OAAO,GACX,+xBAA+xB;AAEjyB;;;;;;AAMG;MAQU,QAAQ,CAAA;IACA,OAAO,GAAG,OAAO;AAEpC,IAAA,WAAA,GAAA;AACE,QAAA,4BAA4B,EAAE;IAChC;uGALW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAR,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAR,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAPpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gCAAgC;AAC1C,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,SAAS,EAAE,SAAS;AACrB,qBAAA;AACF,iBAAA;;;ACpBD;;AAEG;;;;"}

package/fesm2022/joanroucoux-cairn-ui-tab-bar.mjs

@@ -0,0 +1,75 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, Component, input, booleanAttribute, computed } from '@angular/core';
+
+const HEIGHT_PROPERTY = '--tab-bar-height';
+const HEIGHT = 'calc(52px + env(safe-area-inset-bottom))';
+const TAB_CLASSES = 'flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+const INACTIVE_TAB_CLASSES = 'font-medium text-(--muted-foreground)';
+const ACTIVE_TAB_CLASSES = 'font-semibold text-(--foreground)';
+/**
+ * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area. While it is on the
+ * page it publishes that height as `--tab-bar-height` on the root element, which `ui-action-bar` and
+ * `ui-toaster` sit above; use it rather than restating 52px for anything that must clear the bar.
+ *
+ * @example
+ * <nav ui-tab-bar>
+ *   <a ui-tab [active]="url === '/'" routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
+ * </nav>
+ */
+class UiTabBar {
+    constructor() {
+        const root = inject(DOCUMENT).documentElement;
+        root.style.setProperty(HEIGHT_PROPERTY, HEIGHT);
+        inject(DestroyRef).onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTabBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiTabBar, isStandalone: true, selector: "nav[ui-tab-bar]", host: { classAttribute: "grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]" }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTabBar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nav[ui-tab-bar]',
+                    template: '<ng-content />',
+                    host: {
+                        class: 'grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * One destination of `ui-tab-bar`.
+ *
+ * @example
+ * <a ui-tab active routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
+ */
+class UiTab {
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => `${TAB_CLASSES} ${this.active() ? ACTIVE_TAB_CLASSES : INACTIVE_TAB_CLASSES}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiTab, isStandalone: true, selector: "a[ui-tab]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-current": "active() ? 'page' : null" } }, ngImport: i0, template: `
+    <span class="size-6" data-tab-icon><ng-content select="[tabIcon]" /></span>
+    <span class="text-caption leading-none" data-tab-label><ng-content /></span>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[ui-tab]',
+                    template: `
+    <span class="size-6" data-tab-icon><ng-content select="[tabIcon]" /></span>
+    <span class="text-caption leading-none" data-tab-label><ng-content /></span>
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-current]': "active() ? 'page' : null",
+                    },
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiTab, UiTabBar };
+//# sourceMappingURL=joanroucoux-cairn-ui-tab-bar.mjs.map

package/fesm2022/joanroucoux-cairn-ui-tab-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"joanroucoux-cairn-ui-tab-bar.mjs","sources":["../../../projects/ui/tab-bar/tab-bar.ts","../../../projects/ui/tab-bar/joanroucoux-cairn-ui-tab-bar.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Component, DestroyRef, booleanAttribute, computed, inject, input } from '@angular/core';\n\nconst HEIGHT_PROPERTY = '--tab-bar-height';\n\nconst HEIGHT = 'calc(52px + env(safe-area-inset-bottom))';\n\nconst TAB_CLASSES =\n  'flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';\n\nconst INACTIVE_TAB_CLASSES = 'font-medium text-(--muted-foreground)';\n\nconst ACTIVE_TAB_CLASSES = 'font-semibold text-(--foreground)';\n\n/**\n * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area. While it is on the\n * page it publishes that height as `--tab-bar-height` on the root element, which `ui-action-bar` and\n * `ui-toaster` sit above; use it rather than restating 52px for anything that must clear the bar.\n *\n * @example\n * <nav ui-tab-bar>\n *   <a ui-tab [active]=\"url === '/'\" routerLink=\"/\"><lucide-icon tabIcon name=\"house\" />Portfolio</a>\n * </nav>\n */\n@Component({\n  selector: 'nav[ui-tab-bar]',\n  template: '<ng-content />',\n  host: {\n    class:\n      'grid grid-flow-col auto-cols-fr items-stretch bg-(--background)/90 backdrop-blur [@media(prefers-reduced-transparency:reduce)]:bg-(--background) shadow-[inset_0_1px_0_var(--hairline)] pb-[env(safe-area-inset-bottom)]',\n  },\n})\nexport class UiTabBar {\n  constructor() {\n    const root = inject(DOCUMENT).documentElement;\n\n    root.style.setProperty(HEIGHT_PROPERTY, HEIGHT);\n    inject(DestroyRef).onDestroy(() => root.style.removeProperty(HEIGHT_PROPERTY));\n  }\n}\n\n/**\n * One destination of `ui-tab-bar`.\n *\n * @example\n * <a ui-tab active routerLink=\"/\"><lucide-icon tabIcon name=\"house\" />Portfolio</a>\n */\n@Component({\n  selector: 'a[ui-tab]',\n  template: `\n    <span class=\"size-6\" data-tab-icon><ng-content select=\"[tabIcon]\" /></span>\n    <span class=\"text-caption leading-none\" data-tab-label><ng-content /></span>\n  `,\n  host: {\n    '[class]': 'classes()',\n    '[attr.aria-current]': \"active() ? 'page' : null\",\n  },\n})\nexport class UiTab {\n  readonly active = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(\n    () => `${TAB_CLASSES} ${this.active() ? ACTIVE_TAB_CLASSES : INACTIVE_TAB_CLASSES}`,\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA,MAAM,eAAe,GAAG,kBAAkB;AAE1C,MAAM,MAAM,GAAG,0CAA0C;AAEzD,MAAM,WAAW,GACf,2QAA2Q;AAE7Q,MAAM,oBAAoB,GAAG,uCAAuC;AAEpE,MAAM,kBAAkB,GAAG,mCAAmC;AAE9D;;;;;;;;;AASG;MASU,QAAQ,CAAA;AACnB,IAAA,WAAA,GAAA;QACE,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,eAAe;QAE7C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,EAAE,MAAM,CAAC;AAC/C,QAAA,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAChF;uGANW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,iUANT,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAMf,QAAQ,EAAA,UAAA,EAAA,CAAA;kBARpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,IAAI,EAAE;AACJ,wBAAA,KAAK,EACH,0NAA0N;AAC7N,qBAAA;AACF,iBAAA;;AAUD;;;;;AAKG;MAYU,KAAK,CAAA;IACP,MAAM,GAAG,KAAK,CAAC,KAAK,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAE5C,OAAO,GAAG,QAAQ,CACnC,MAAM,CAAA,EAAG,WAAW,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,GAAG,kBAAkB,GAAG,oBAAoB,CAAA,CAAE;gFACpF;uGALU,KAAK,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAL,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAK,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EATN;;;AAGT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;2FAMU,KAAK,EAAA,UAAA,EAAA,CAAA;kBAXjB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,QAAQ,EAAE;;;AAGT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,WAAW;AACtB,wBAAA,qBAAqB,EAAE,0BAA0B;AAClD,qBAAA;AACF,iBAAA;;;ACzDD;;AAEG;;;;"}

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

@@ -0,0 +1,321 @@
+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'];
+const ROW_CLASSES = {
+    '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',
+};
+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 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(' ');
+};
+/**
+ * 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>
+        }
+      </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'];
+const SUB_TONE_CLASSES = {
+    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.
+ */
+
+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