@joanroucoux/cairn-ui 0.2.0 → 0.3.0

package/fesm2022/joanroucoux-cairn-ui.mjs

@@ -1,9 +1,202 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, booleanAttribute, inject, ElementRef, DestroyRef, InjectionToken, output, effect, contentChild, afterRenderEffect, forwardRef, Directive, model, viewChildren } from '@angular/core';
+import { InjectionToken, signal, input, inject, LOCALE_ID, booleanAttribute, computed, Component, output, ElementRef, DestroyRef, effect, contentChild, afterRenderEffect, forwardRef, Directive, contentChildren, model, viewChildren } from '@angular/core';
+
+const MINUS = '−';
+const EM_DASH = '—';
+const BULLETS = '••••';
+/** Formats a number or an amount for the locale, with a missing value as an em dash and masking behind four bullets. */
+function formatAmount(value, options, masked = false) {
+    if (value === null || value === undefined || Number.isNaN(value)) {
+        return EM_DASH;
+    }
+    const digits = options.fractionDigits ?? 2;
+    const format = new Intl.NumberFormat(options.locale, {
+        ...(options.currency ? { style: 'currency', currency: options.currency } : {}),
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits,
+    });
+    const magnitude = Math.abs(value);
+    const parts = format.formatToParts(magnitude);
+    if (masked) {
+        let replaced = false;
+        return parts
+            .map((part) => {
+            if (['integer', 'group', 'decimal', 'fraction'].includes(part.type)) {
+                if (replaced) {
+                    return '';
+                }
+                replaced = true;
+                return BULLETS;
+            }
+            return part.value;
+        })
+            .join('');
+    }
+    const text = parts.map((part) => part.value).join('');
+    const isZero = Number(format.format(magnitude).replace(/[^\d]/g, '')) === 0;
+    if (!options.signed || isZero) {
+        return value < 0 && !isZero ? `${MINUS}${text}` : text;
+    }
+    return `${value > 0 ? '+' : MINUS}${text}`;
+}
+
+/** App-wide "amounts are hidden" state. Defaults to never masked; the app overrides it. */
+const UI_AMOUNT_MASKED = new InjectionToken('UI_AMOUNT_MASKED', {
+    providedIn: 'root',
+    factory: () => signal(false),
+});
+/** Available figure styles. `AmountNumeric` is derived from this tuple. */
+const AMOUNT_NUMERICS = ['tabular', 'proportional'];
+/** Available masking behaviors. `AmountMasking` is derived from this tuple. */
+const AMOUNT_MASKINGS = ['dots', 'hide'];
+/**
+ * A number or an amount of money, formatted for the locale and masked when the app hides amounts.
+ *
+ * @example
+ * <ui-amount [value]="total" currency="EUR" numeric="proportional" />
+ * <ui-amount [value]="dayChange" currency="EUR" signed whenMasked="hide" />
+ */
+class UiAmount {
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    currency = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "currency" }] : /* istanbul ignore next */ []));
+    locale = input(inject(LOCALE_ID), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    signed = input(false, { ...(ngDevMode ? { debugName: "signed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fractionDigits = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fractionDigits" }] : /* istanbul ignore next */ []));
+    numeric = input('tabular', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numeric" }] : /* istanbul ignore next */ []));
+    whenMasked = input('dots', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "whenMasked" }] : /* istanbul ignore next */ []));
+    #masked = inject(UI_AMOUNT_MASKED);
+    hidden = computed(() => this.#masked() && this.whenMasked() === 'hide', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    text = computed(() => formatAmount(this.value(), {
+        locale: this.locale(),
+        currency: this.currency(),
+        signed: this.signed(),
+        fractionDigits: this.fractionDigits(),
+    }, this.#masked()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const missing = this.value() === null || this.value() === undefined;
+        return [
+            'whitespace-nowrap',
+            this.numeric() === 'tabular' ? 'tabular-nums' : '',
+            missing ? 'text-(--subtle-foreground)' : '',
+        ]
+            .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: UiAmount, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiAmount, isStandalone: true, selector: "ui-amount", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, signed: { classPropertyName: "signed", publicName: "signed", isSignal: true, isRequired: false, transformFunction: null }, fractionDigits: { classPropertyName: "fractionDigits", publicName: "fractionDigits", isSignal: true, isRequired: false, transformFunction: null }, numeric: { classPropertyName: "numeric", publicName: "numeric", isSignal: true, isRequired: false, transformFunction: null }, whenMasked: { classPropertyName: "whenMasked", publicName: "whenMasked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.hidden": "hidden() || null" } }, ngImport: i0, template: '{{ text() }}', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAmount, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-amount',
+                    template: '{{ text() }}',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.hidden]': 'hidden() || null',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], signed: [{ type: i0.Input, args: [{ isSignal: true, alias: "signed", required: false }] }], fractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "fractionDigits", required: false }] }], numeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeric", required: false }] }], whenMasked: [{ type: i0.Input, args: [{ isSignal: true, alias: "whenMasked", required: false }] }] } });
+
+/** Available async block states. `AsyncState` is derived from this tuple. */
+const ASYNC_STATES = ['loading', 'error', 'empty', 'ready'];
+const RETRY_BUTTON_CLASSES = 'mt-2 relative inline-flex items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,opacity] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) min-h-(--row-min) px-4 text-label bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)';
+/**
+ * The three states of a block that depends on a service call, next to the ready content.
+ *
+ * @example
+ * <ui-async [state]="totalState()" errorTitle="Total could not be loaded" errorMessage="The server did not answer." retryLabel="Retry" (retry)="reload()">
+ *   <span asyncLoading><ui-skeleton shape="figure" /></span>
+ *   <span asyncEmpty>Add a holding to see your total.</span>
+ *   <span>{{ total() }}</span>
+ * </ui-async>
+ */
+class UiAsync {
+    state = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    errorTitle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorTitle" }] : /* istanbul ignore next */ []));
+    errorMessage = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    retryLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "retryLabel" }] : /* istanbul ignore next */ []));
+    retry = output();
+    retryButtonClasses = RETRY_BUTTON_CLASSES;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAsync, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiAsync, isStandalone: true, selector: "ui-async", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, errorTitle: { classPropertyName: "errorTitle", publicName: "errorTitle", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, host: { properties: { "attr.aria-busy": "state() === 'loading' || null" } }, ngImport: i0, template: `
+    @switch (state()) {
+      @case ('loading') {
+        <ng-content select="[asyncLoading]" />
+      }
+      @case ('error') {
+        <div
+          aria-live="polite"
+          class="rounded-control flex flex-col items-start gap-1 bg-(--elevated) p-(--inset-card)"
+          role="alert"
+        >
+          <span class="text-body font-medium">{{ errorTitle() }}</span>
+          <span class="text-label text-(--muted-foreground)">{{ errorMessage() }}</span>
+          <button type="button" [class]="retryButtonClasses" (click)="retry.emit()">
+            {{ retryLabel() }}
+          </button>
+        </div>
+      }
+      @case ('empty') {
+        <ng-content select="[asyncEmpty]" />
+      }
+      @default {
+        <ng-content />
+      }
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAsync, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-async',
+                    template: `
+    @switch (state()) {
+      @case ('loading') {
+        <ng-content select="[asyncLoading]" />
+      }
+      @case ('error') {
+        <div
+          aria-live="polite"
+          class="rounded-control flex flex-col items-start gap-1 bg-(--elevated) p-(--inset-card)"
+          role="alert"
+        >
+          <span class="text-body font-medium">{{ errorTitle() }}</span>
+          <span class="text-label text-(--muted-foreground)">{{ errorMessage() }}</span>
+          <button type="button" [class]="retryButtonClasses" (click)="retry.emit()">
+            {{ retryLabel() }}
+          </button>
+        </div>
+      }
+      @case ('empty') {
+        <ng-content select="[asyncEmpty]" />
+      }
+      @default {
+        <ng-content />
+      }
+    }
+  `,
+                    host: {
+                        '[attr.aria-busy]': "state() === 'loading' || null",
+                    },
+                }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], errorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTitle", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], retryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "retryLabel", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
 
 /** Available avatar sizes. `AvatarSize` is derived from this tuple. */
 const AVATAR_SIZES = ['sm', 'md'];
-const BASE_CLASSES$4 = 'inline-flex items-center justify-center rounded-pill border border-(--primary) bg-(--soft) font-semibold tabular-nums text-(--primary)';
+const BASE_CLASSES$6 = 'inline-flex items-center justify-center rounded-pill border border-(--primary) bg-(--soft) font-semibold tabular-nums text-(--primary)';
 const SIZE_CLASSES$1 = {
     sm: 'size-8 text-caption',
     md: 'size-11 text-label',
@@ -21,7 +214,7 @@ class UiAvatar {
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$4} ${SIZE_CLASSES$1[this.size()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$6} ${SIZE_CLASSES$1[this.size()]}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiAvatar, isStandalone: true, selector: "ui-avatar", inputs: { initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "label()", "class": "classes()" } }, ngImport: i0, template: '<span aria-hidden="true">{{ initials() }}</span>', isInline: true });
@@ -41,7 +234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 
 /** Available badge variants. `BadgeVariant` is derived from this tuple. */
 const BADGE_VARIANTS = ['neutral', 'outline'];
-const BASE_CLASSES$3 = 'inline-flex h-6 items-center rounded-pill px-2.5 text-caption font-medium';
+const BASE_CLASSES$5 = 'inline-flex h-6 items-center rounded-pill px-2.5 text-caption font-medium';
 const VARIANT_CLASSES$2 = {
     neutral: 'bg-(--muted) text-(--foreground)',
     outline: 'shadow-[inset_0_0_0_1px_var(--border)] text-(--foreground)',
@@ -55,7 +248,7 @@ const VARIANT_CLASSES$2 = {
 class UiBadge {
     variant = input('neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$3} ${VARIANT_CLASSES$2[this.variant()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$5} ${VARIANT_CLASSES$2[this.variant()]}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiBadge, isStandalone: true, selector: "ui-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
@@ -75,9 +268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 const BUTTON_VARIANTS = ['primary', 'outline', 'ghost', 'destructive'];
 /** Available button sizes. `md` is the touch target Cairn asks for everywhere. */
 const BUTTON_SIZES = ['md', 'lg', 'xl', 'icon'];
-const BASE_CLASSES$2 = 
-// Tailwind's preflight gives buttons cursor: default; the hand cursor is what users expect here.
-'relative inline-flex items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,opacity] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40';
+const BASE_CLASSES$4 = 'relative inline-flex items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,opacity] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40';
 const VARIANT_CLASSES$1 = {
     primary: 'bg-(--primary) text-(--primary-foreground) hover:opacity-90',
     outline: 'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)',
@@ -91,16 +282,7 @@ const SIZE_CLASSES = {
     icon: 'size-(--row-min) p-0',
 };
 /**
- * Styled native button. Applied as an attribute so the host keeps every native
- * button behavior (type, disabled, form submission, accessibility) for free.
- *
- * Also applies to an anchor, for the one case where the action really is a navigation:
- * a download the browser has to perform itself.
- *
- * `size="icon"` has no visible text: give it an `aria-label`.
- *
- * A `loading` button shows a spinner before its label and swallows clicks, so a slow first
- * response cannot turn into a double submission.
+ * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.
  *
  * @example
  * <button ui-button variant="destructive">Delete</button>
@@ -112,12 +294,9 @@ class UiButton {
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    classes = computed(() => `${BASE_CLASSES$2} ${VARIANT_CLASSES$1[this.variant()]} ${SIZE_CLASSES[this.size()]}${this.loading() ? ' pointer-events-none opacity-70' : ''}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$4} ${VARIANT_CLASSES$1[this.variant()]} ${SIZE_CLASSES[this.size()]}${this.loading() ? ' pointer-events-none opacity-70' : ''}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     constructor() {
-        // A host `(click)` binding runs after the template's own listener, so a loading button would
-        // still fire the consumer's handler once before this guard got a say. Capturing from the
-        // constructor puts this listener first regardless of binding order.
         const host = inject(ElementRef).nativeElement;
         const guard = (event) => {
             if (this.loading()) {
@@ -164,7 +343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 const CARD_VARIANTS = ['default', 'elevated'];
 /** Available card paddings. `CardPadding` is derived from this tuple. */
 const CARD_PADDINGS = ['none', 'sm', 'md'];
-const BASE_CLASSES$1 = 'block rounded-container border';
+const BASE_CLASSES$3 = 'block rounded-container border';
 const VARIANT_CLASSES = {
     default: 'bg-(--card) border-(--border) text-(--card-foreground)',
     elevated: 'bg-(--elevated) border-(--hairline) text-(--foreground)',
@@ -185,7 +364,7 @@ class UiCard {
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     padding = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$1} ${VARIANT_CLASSES[this.variant()]} ${PADDING_CLASSES[this.padding()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$3} ${VARIANT_CLASSES[this.variant()]} ${PADDING_CLASSES[this.padding()]}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiCard, isStandalone: true, selector: "ui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
@@ -213,7 +392,7 @@ const UI_CONTROL = new InjectionToken('UI_CONTROL');
 
 /** Available delta emphases. `DeltaEmphasis` is derived from this tuple. */
 const DELTA_EMPHASES = ['text', 'pill'];
-const BASE_CLASSES = 'inline-flex items-center gap-1 text-label font-medium tabular-nums';
+const BASE_CLASSES$2 = 'inline-flex items-center gap-1 text-label font-medium tabular-nums';
 const PILL_CLASSES = 'h-6 rounded-pill px-2';
 const TEXT_CLASSES = {
     positive: 'text-(--positive)',
@@ -221,9 +400,6 @@ const TEXT_CLASSES = {
     neutral: 'text-(--muted-foreground)',
     unknown: 'text-(--subtle-foreground)',
 };
-// The handoff's `Cairn Composants.dc.html` uses --soft here, but --positive text on --soft only
-// reaches 4.33:1 (axe flags it): --soft is a touch darker than --background, and --positive sits
-// right at the edge of AA at 4.77:1 against --background alone. --muted keeps the chip legible.
 const PILL_BACKGROUND_CLASS = 'bg-(--muted)';
 /**
  * Signed amount whose sign carries meaning: a gain, a loss, or an unknown.
@@ -261,7 +437,7 @@ class UiDelta {
     classes = computed(() => {
         const sign = this.sign();
         const background = this.emphasis() === 'pill' ? `${PILL_CLASSES} ${PILL_BACKGROUND_CLASS}` : 'bg-transparent';
-        return `${BASE_CLASSES} ${TEXT_CLASSES[sign]} ${background}`;
+        return `${BASE_CLASSES$2} ${TEXT_CLASSES[sign]} ${background}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDelta, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -296,15 +472,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 const DIALOG_WIDTHS = ['md', 'lg'];
 const WIDTH_CLASSES = {
     md: 'max-w-md',
-    lg: 'max-w-lg',
+    lg: 'max-w-[560px]',
 };
-const nextId$1 = (() => {
+const nextId$2 = (() => {
     let count = 0;
     return () => `ui-dialog-${++count}`;
 })();
 /**
- * Modal dialog on the native <dialog>: focus trap, focus return, Escape and the top layer
- * come from the platform. Two projection slots - the body, and [dialogActions] for the footer.
+ * Modal dialog on the native <dialog>: a sheet rising from the bottom under `64rem`, centered
+ * above it. Two projection slots - the body, and [dialogActions] for the footer.
  *
  * @example
  * <ui-dialog heading="Delete this holding?" [open]="confirming()" (dismissed)="confirming.set(false)">
@@ -319,12 +495,11 @@ class UiDialog {
     ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
     width = input('lg', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    open = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     dismissed = output();
-    headingId = nextId$1();
+    headingId = nextId$2();
     descriptionId = `${this.headingId}-description`;
-    classes = computed(() => `w-full m-auto ${WIDTH_CLASSES[this.width()]} rounded-container border border-(--border) bg-(--card) p-6 text-(--foreground) backdrop:bg-black/60`, /* @ts-ignore */
+    classes = computed(() => `flex w-full flex-col m-auto mt-auto max-h-[calc(100dvh-2rem)] max-lg:mb-0 max-lg:max-w-none max-lg:rounded-b-none rounded-container ${WIDTH_CLASSES[this.width()]} border border-(--border) bg-(--card) text-(--foreground) backdrop:bg-black/60`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     #host = inject(ElementRef);
     constructor() {
@@ -353,54 +528,73 @@ class UiDialog {
       [class]="classes()"
       (close)="onNativeClose()"
     >
-      <h2 class="text-title font-semibold" [id]="headingId">{{ heading() }}</h2>
+      <div aria-hidden="true" class="flex h-7 items-center justify-center lg:hidden" data-dialog-handle>
+        <span class="rounded-pill h-1.5 w-9 bg-(--border)"></span>
+      </div>
 
-      @if (description()) {
-        <p class="text-label mt-2 text-(--muted-foreground)" [id]="descriptionId">{{ description() }}</p>
-      }
+      <div class="px-6 pt-1 lg:pt-6">
+        <h2 class="text-title font-semibold" [id]="headingId">{{ heading() }}</h2>
 
-      <!-- empty:hidden keeps a body-less dialog from carrying the body's top margin. -->
-      <div class="mt-4 flex flex-col gap-4 empty:hidden">
-        <ng-content />
+        @if (description()) {
+          <p class="text-label mt-2 text-(--muted-foreground)" [id]="descriptionId">{{ description() }}</p>
+        }
+      </div>
+
+      <div class="min-h-0 flex-1 overflow-y-auto px-6" data-dialog-body tabindex="0">
+        <!-- empty:hidden keeps a body-less dialog from carrying the body's top margin. -->
+        <div class="mt-4 flex flex-col gap-4 empty:hidden">
+          <ng-content />
+        </div>
       </div>
 
-      <div class="mt-6 flex justify-end gap-3">
+      <div
+        class="flex justify-end gap-3 px-6 pt-6 pb-6 max-lg:pb-[calc(1rem+env(safe-area-inset-bottom))]"
+        data-dialog-footer
+      >
         <ng-content select="[dialogActions]" />
       </div>
     </dialog>
-  `, isInline: true });
+  `, isInline: true, styles: ["dialog{transition:opacity var(--duration-base) var(--ease-sheet),transform var(--duration-base) var(--ease-sheet),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:translateY(0)}dialog:not([open]){opacity:0;transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{opacity:0;transform:translateY(100%)}}@media(min-width:64rem){dialog{transform:scale(1)}dialog:not([open]){transform:scale(var(--enter-scale))}@starting-style{dialog[open]{transform:scale(var(--enter-scale))}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDialog, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ui-dialog',
-                    template: `
+            args: [{ selector: 'ui-dialog', template: `
     <dialog
       [attr.aria-describedby]="description() ? descriptionId : null"
       [attr.aria-labelledby]="headingId"
       [class]="classes()"
       (close)="onNativeClose()"
     >
-      <h2 class="text-title font-semibold" [id]="headingId">{{ heading() }}</h2>
+      <div aria-hidden="true" class="flex h-7 items-center justify-center lg:hidden" data-dialog-handle>
+        <span class="rounded-pill h-1.5 w-9 bg-(--border)"></span>
+      </div>
 
-      @if (description()) {
-        <p class="text-label mt-2 text-(--muted-foreground)" [id]="descriptionId">{{ description() }}</p>
-      }
+      <div class="px-6 pt-1 lg:pt-6">
+        <h2 class="text-title font-semibold" [id]="headingId">{{ heading() }}</h2>
 
-      <!-- empty:hidden keeps a body-less dialog from carrying the body's top margin. -->
-      <div class="mt-4 flex flex-col gap-4 empty:hidden">
-        <ng-content />
+        @if (description()) {
+          <p class="text-label mt-2 text-(--muted-foreground)" [id]="descriptionId">{{ description() }}</p>
+        }
       </div>
 
-      <div class="mt-6 flex justify-end gap-3">
+      <div class="min-h-0 flex-1 overflow-y-auto px-6" data-dialog-body tabindex="0">
+        <!-- empty:hidden keeps a body-less dialog from carrying the body's top margin. -->
+        <div class="mt-4 flex flex-col gap-4 empty:hidden">
+          <ng-content />
+        </div>
+      </div>
+
+      <div
+        class="flex justify-end gap-3 px-6 pt-6 pb-6 max-lg:pb-[calc(1rem+env(safe-area-inset-bottom))]"
+        data-dialog-footer
+      >
         <ng-content select="[dialogActions]" />
       </div>
     </dialog>
-  `,
-                }]
+  `, styles: ["dialog{transition:opacity var(--duration-base) var(--ease-sheet),transform var(--duration-base) var(--ease-sheet),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:translateY(0)}dialog:not([open]){opacity:0;transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{opacity:0;transform:translateY(100%)}}@media(min-width:64rem){dialog{transform:scale(1)}dialog:not([open]){transform:scale(var(--enter-scale))}@starting-style{dialog[open]{transform:scale(var(--enter-scale))}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
 
-const nextId = (() => {
+const nextId$1 = (() => {
     let count = 0;
     return () => `ui-field-${++count}`;
 })();
@@ -434,10 +628,9 @@ class UiField {
     ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
     error = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
-    /** Unit shown inside the control's right edge, such as `EUR` or `parts`. Not part of the control's value. */
     unit = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "unit" }] : /* istanbul ignore next */ []));
-    #id = nextId();
+    #id = nextId$1();
     hintId = `${this.#id}-hint`;
     errorId = `${this.#id}-error`;
     #host = inject(ElementRef);
@@ -608,6 +801,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }] } });
 
+const MENU_CLASSES = 'm-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16)] text-(--foreground) transition-[opacity,transform,overlay,display] transition-discrete duration-(--duration-fast) ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100';
+const ITEM_CLASSES = 'flex w-full items-center gap-2 min-h-(--row-min) px-3 rounded-control text-label hover:bg-(--soft) focus-visible:bg-(--soft) outline-none';
+const nextId = (() => {
+    let count = 0;
+    return () => `ui-menu-${++count}`;
+})();
+/**
+ * One action of a `ui-menu`; `destructive` paints it in `--negative`.
+ *
+ * @example
+ * <button uiMenuItem destructive (click)="remove()">Delete the line</button>
+ */
+class UiMenuItem {
+    destructive = input(false, { ...(ngDevMode ? { debugName: "destructive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    #host = inject(ElementRef).nativeElement;
+    #menu = inject(UiMenu);
+    classes = computed(() => `${ITEM_CLASSES}${this.destructive() ? ' text-(--negative)' : ''}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    focus() {
+        this.#host.focus();
+    }
+    hasFocus() {
+        return this.#host === document.activeElement;
+    }
+    onClick() {
+        this.#menu.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiMenuItem, isStandalone: true, selector: "button[uiMenuItem]", inputs: { destructive: { classPropertyName: "destructive", publicName: "destructive", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, listeners: { "click": "onClick()" }, properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[uiMenuItem]',
+                    host: {
+                        role: 'menuitem',
+                        tabindex: '-1',
+                        '[class]': 'classes()',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], propDecorators: { destructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "destructive", required: false }] }] } });
+/**
+ * Secondary actions menu, opened from its trigger through the native Popover API.
+ *
+ * @example
+ * <button ui-button size="icon" aria-label="More" [uiMenuTrigger]="menu">...</button>
+ * <ui-menu #menu label="Line actions">
+ *   <button uiMenuItem (click)="edit()">Edit</button>
+ *   <button uiMenuItem destructive (click)="remove()">Delete the line</button>
+ * </ui-menu>
+ */
+class UiMenu {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    menuId = nextId();
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    classes = MENU_CLASSES;
+    items = contentChildren(UiMenuItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    #host = inject(ElementRef).nativeElement;
+    #trigger = null;
+    open(trigger) {
+        this.#trigger = trigger;
+        this.isOpen.set(true);
+        if (typeof this.#host.showPopover === 'function') {
+            this.#host.showPopover();
+        }
+        this.#position(trigger);
+        this.items()[0]?.focus();
+    }
+    close() {
+        const wasOpen = this.isOpen();
+        this.#applyClosed();
+        if (wasOpen && typeof this.#host.hidePopover === 'function') {
+            this.#host.hidePopover();
+        }
+    }
+    #applyClosed() {
+        this.isOpen.set(false);
+        this.#trigger?.focus();
+        this.#trigger = null;
+    }
+    onToggle(event) {
+        if (event.newState === 'closed') {
+            this.#applyClosed();
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Tab' || event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        const items = this.items();
+        const currentIndex = items.findIndex((item) => item.hasFocus());
+        const lastIndex = items.length - 1;
+        let nextIndex;
+        switch (event.key) {
+            case 'ArrowDown':
+                nextIndex = currentIndex >= lastIndex ? 0 : currentIndex + 1;
+                break;
+            case 'ArrowUp':
+                nextIndex = currentIndex <= 0 ? lastIndex : currentIndex - 1;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = lastIndex;
+                break;
+        }
+        if (nextIndex === undefined) {
+            return;
+        }
+        event.preventDefault();
+        items[nextIndex]?.focus();
+    }
+    #position(trigger) {
+        const margin = 8;
+        const triggerRect = trigger.getBoundingClientRect();
+        const menuRect = this.#host.getBoundingClientRect();
+        const fitsBelow = window.innerHeight - triggerRect.bottom >= menuRect.height + margin;
+        const top = fitsBelow ? triggerRect.bottom + 4 : Math.max(margin, triggerRect.top - menuRect.height - 4);
+        const left = Math.min(Math.max(triggerRect.right - menuRect.width, margin), window.innerWidth - menuRect.width - margin);
+        this.#host.style.position = 'fixed';
+        this.#host.style.top = `${Math.min(top, window.innerHeight - menuRect.height - margin)}px`;
+        this.#host.style.left = `${left}px`;
+        this.#host.style.transformOrigin = fitsBelow ? 'top right' : 'bottom right';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: UiMenu, isStandalone: true, selector: "ui-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "menu", "popover": "auto" }, listeners: { "toggle": "onToggle($event)", "keydown": "onKeydown($event)" }, properties: { "id": "menuId", "class": "classes", "attr.aria-label": "label()" } }, queries: [{ propertyName: "items", predicate: UiMenuItem, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-menu',
+                    template: '<ng-content />',
+                    host: {
+                        role: 'menu',
+                        popover: 'auto',
+                        '[id]': 'menuId',
+                        '[class]': 'classes',
+                        '[attr.aria-label]': 'label()',
+                        '(toggle)': 'onToggle($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UiMenuItem), { isSignal: true }] }] } });
+/**
+ * Opens a `ui-menu` from a trigger element and wires `aria-haspopup`, `aria-expanded` and
+ * `aria-controls` on it.
+ *
+ * @example
+ * <button ui-button size="icon" aria-label="More" [uiMenuTrigger]="menu">...</button>
+ */
+class UiMenuTrigger {
+    uiMenuTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uiMenuTrigger" }] : /* istanbul ignore next */ []));
+    #host = inject(ElementRef).nativeElement;
+    toggle() {
+        const menu = this.uiMenuTrigger();
+        if (menu.isOpen()) {
+            menu.close();
+        }
+        else {
+            menu.open(this.#host);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiMenuTrigger, isStandalone: true, selector: "[uiMenuTrigger]", inputs: { uiMenuTrigger: { classPropertyName: "uiMenuTrigger", publicName: "uiMenuTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "click": "toggle()" }, properties: { "attr.aria-expanded": "uiMenuTrigger().isOpen()", "attr.aria-controls": "uiMenuTrigger().menuId" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiMenuTrigger]',
+                    host: {
+                        'aria-haspopup': 'menu',
+                        '[attr.aria-expanded]': 'uiMenuTrigger().isOpen()',
+                        '[attr.aria-controls]': 'uiMenuTrigger().menuId',
+                        '(click)': 'toggle()',
+                    },
+                }]
+        }], propDecorators: { uiMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiMenuTrigger", required: true }] }] } });
+
 /** Ramp step used to paint the fill. `MeterTone` is derived from this tuple. */
 const METER_TONES = [1, 2, 3, 4, 5, 6];
 const TONE_CLASSES = {
@@ -673,11 +1052,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
 
-const OPTION_CLASSES = 
-// The visible track stays the handoff's 36px; the hit area still reaches --row-min (44px touch,
-// 40px pointer: fine) through an ::after enlarged only vertically, centered on the option, and
-// constrained to its own horizontal bounds so it never reaches into a neighboring option.
-"relative z-10 min-h-9 flex-1 cursor-pointer text-label font-medium transition-colors after:absolute after:inset-x-0 after:top-1/2 after:h-(--row-min) after:-translate-y-1/2 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)";
+const BASE_CLASSES$1 = 'flex items-center gap-3 h-10 px-3 rounded-control text-label font-medium text-(--muted-foreground) transition-colors duration-(--duration-press) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+const ACTIVE_CLASSES = 'bg-(--soft) text-(--foreground)';
+/**
+ * One destination of the sidebar navigation (Portfolio, Holdings, Allocation, Accounts).
+ *
+ * @example
+ * <a ui-nav-item [active]="url === '/'" routerLink="/">
+ *   <lucide-icon navIcon name="house" />
+ *   Portfolio
+ * </a>
+ */
+class UiNavItem {
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => `${BASE_CLASSES$1}${this.active() ? ` ${ACTIVE_CLASSES}` : ''}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiNavItem, isStandalone: true, selector: "a[ui-nav-item]", 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: '<ng-content select="[navIcon]" /><ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiNavItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[ui-nav-item]',
+                    template: '<ng-content select="[navIcon]" /><ng-content />',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-current]': "active() ? 'page' : null",
+                    },
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
+
+const BASE_CLASSES = 'flex w-full items-center gap-2.5 min-h-14 px-2.5 py-1.5 rounded-control text-left select-none touch-manipulation transition-colors duration-(--duration-press) hover:bg-(--glow) active:bg-(--soft) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+const SELECTED_CLASSES$1 = 'bg-(--soft)';
+/**
+ * Clickable row of a list: a holding, an envelope, an account.
+ *
+ * @example
+ * <a ui-row [selected]="holding.id === openId()" [routerLink]="['/holdings', holding.id]">
+ *   {{ holding.name }}
+ * </a>
+ */
+class UiRow {
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => `${BASE_CLASSES}${this.selected() ? ` ${SELECTED_CLASSES$1}` : ''}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiRow, isStandalone: true, selector: "a[ui-row], button[ui-row]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-current": "selected() ? 'true' : null" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[ui-row], button[ui-row]',
+                    template: '<ng-content />',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-current]': "selected() ? 'true' : null",
+                    },
+                }]
+        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
+
+const OPTION_CLASSES = "relative z-10 min-h-9 flex-1 cursor-pointer px-3 text-label font-medium transition-colors after:absolute after:inset-x-0 after:top-1/2 after:h-(--row-min) after:-translate-y-1/2 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)";
 const SELECTED_CLASSES = 'text-(--foreground)';
 const UNSELECTED_CLASSES = 'text-(--muted-foreground) hover:text-(--foreground)';
 /**
@@ -696,7 +1130,6 @@ class UiSegmented {
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     radios = viewChildren('radio', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "radios" }] : /* istanbul ignore next */ []));
-    // 1-based so 0 (falsy) reliably means "no match", letting @if skip the thumb entirely.
     thumbIndex = computed(() => {
         const index = this.options().findIndex((option) => option.value === this.value());
         return index === -1 ? 0 : index + 1;
@@ -864,16 +1297,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 /** Available skeleton shapes. `SkeletonShape` is derived from this tuple. */
 const SKELETON_SHAPES = ['text', 'figure', 'row', 'chart', 'ring'];
 const LAST_LINE_WIDTH = '62%';
-// Declared here, not in tokens.css (a pure token sheet holds no element styles or keyframes).
 const PULSE_ANIMATION = 'cairn-pulse var(--pulse-duration) var(--ease-out) infinite alternate';
 const BAR_CLASSES = 'block rounded-control bg-(--muted)';
 /**
- * Decorative placeholder for content that is still loading, at the shape of the content it stands
- * in for. Deliberately hidden from assistive technology: the calling screen keeps its own
- * `role="status"` sentence.
- *
- * Pulses opacity from 1 to 0.45 and back over `--pulse-duration`, which `tokens.css` sets to `0ms`
- * under `prefers-reduced-motion: reduce`: the pulse stops there with no branching in this component.
+ * Decorative, pulsing placeholder for content that is still loading, at the shape of the content
+ * it stands in for.
  *
  * @example
  * <ui-skeleton shape="figure" />
@@ -1011,6 +1439,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
+const CLASSES = "relative shrink-0 w-[51px] h-[31px] appearance-none cursor-pointer rounded-pill bg-(--muted) checked:bg-(--primary) transition-colors 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] 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]";
+/**
+ * Native checkbox styled as an iOS-style switch, exposed to assistive technology as `role="switch"`.
+ *
+ * @example
+ * <input type="checkbox" uiSwitch [checked]="hidden()" (change)="toggle()" aria-label="Hide amounts" />
+ */
+class UiSwitch {
+    classes = CLASSES;
+    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',
+                    },
+                }]
+        }] });
+
 /** Breakpoints a secondary column can be held back until. */
 const CELL_BREAKPOINTS = ['md', 'lg'];
 const FROM_CLASSES = {
@@ -1105,6 +1556,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { numeric: [{ type: i0.Input, args: [{ isSignal: true, alias: "numeric", required: false }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }] } });
 
+const TAB_CLASSES = 'flex h-[52px] flex-col items-center justify-center gap-0.5 touch-manipulation select-none text-(--muted-foreground) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+const ACTIVE_TAB_CLASSES = 'font-semibold text-(--foreground)';
+/**
+ * Bottom navigation bar for iPhone: 52px of tabs plus the home indicator's safe area.
+ *
+ * @example
+ * <nav ui-tab-bar>
+ *   <a ui-tab [active]="url === '/'" routerLink="/"><lucide-icon tabIcon name="house" />Portfolio</a>
+ * </nav>
+ */
+class UiTabBar {
+    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)]',
+                    },
+                }]
+        }] });
+/**
+ * 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}` : ''}`, /* @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" 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" 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 }] }] } });
+
 /*
  * Public API surface of the ui library.
  */
@@ -1113,5 +1619,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AVATAR_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, DELTA_EMPHASES, DIALOG_WIDTHS, METER_TONES, STAT_SIZES, UiAvatar, UiBadge, UiButton, UiCard, UiDelta, UiDialog, UiField, UiInput, UiMeter, UiSegmented, UiSelect, UiSkeleton, UiStat, UiTable, UiTd, UiTextarea, UiTh, UiTr };
+export { AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_STATES, AVATAR_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, DELTA_EMPHASES, DIALOG_WIDTHS, METER_TONES, STAT_SIZES, UI_AMOUNT_MASKED, UiAmount, UiAsync, UiAvatar, UiBadge, UiButton, UiCard, UiDelta, UiDialog, UiField, UiInput, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
 //# sourceMappingURL=joanroucoux-cairn-ui.mjs.map