@joanroucoux/cairn-ui 0.6.0 → 0.6.1

package/fesm2022/joanroucoux-cairn-ui.mjs

@@ -1,115 +1,38 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, input, inject, LOCALE_ID, booleanAttribute, computed, Component, output, ElementRef, DestroyRef, forwardRef, Directive, model, viewChildren, afterRenderEffect, contentChild, viewChild, afterNextRender, effect, contentChildren } from '@angular/core';
+import { Component, input, computed, InjectionToken, signal, inject, LOCALE_ID, booleanAttribute, output, Directive, ElementRef, DestroyRef, forwardRef, model, viewChildren, afterNextRender, afterRenderEffect, contentChild, viewChild, effect, numberAttribute, contentChildren } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { scaleLinear } from 'd3-scale';
 import { curveMonotoneX, line } from 'd3-shape';
 
-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.
+ * Bar of actions fixed above the tab bar on iPhone: the primary actions of a detail screen, within
+ * thumb reach. It sits 52px plus the safe area above the bottom edge, so it clears `ui-tab-bar`, and
+ * it is hidden from `64rem`, where the same actions live in the page itself. Its children share the
+ * width equally.
  *
  * @example
- * <ui-amount [value]="total" currency="EUR" numeric="proportional" />
- * <ui-amount [value]="dayChange" currency="EUR" signed whenMasked="hide" />
+ * <ui-action-bar>
+ *   <button ui-button variant="outline" size="tall">Sell</button>
+ *   <button ui-button size="tall">Buy</button>
+ * </ui-action-bar>
  */
-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 });
+class UiActionBar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiActionBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiActionBar, isStandalone: true, selector: "ui-action-bar", host: { classAttribute: "fixed inset-x-0 bottom-[calc(52px+env(safe-area-inset-bottom))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden" }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAmount, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiActionBar, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ui-amount',
-                    template: '{{ text() }}',
+                    selector: 'ui-action-bar',
+                    template: '<ng-content />',
                     host: {
-                        '[class]': 'classes()',
-                        '[attr.hidden]': 'hidden() || null',
+                        class: 'fixed inset-x-0 bottom-[calc(52px+env(safe-area-inset-bottom))] z-40 grid grid-flow-col auto-cols-fr gap-2 bg-(--background) px-(--gutter) py-3 shadow-[0_-1px_0_var(--hairline)] lg:hidden',
                     },
                 }]
-        }], 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 }] }] } });
+        }] });
 
 const ALERT_VARIANTS = ['error', 'warning'];
-const BASE_CLASSES$7 = 'flex items-start gap-2.5 text-left text-label';
+const BASE_CLASSES$8 = 'flex items-start gap-2.5 text-left text-label';
 const VARIANT_CLASSES$3 = {
     error: 'rounded-control bg-(--card) px-3.5 py-3 shadow-[inset_0_0_0_1px_var(--border)]',
     warning: 'text-(--foreground)',
@@ -125,7 +48,7 @@ class UiAlert {
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     heading = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$7} ${VARIANT_CLASSES$3[this.variant()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$8} ${VARIANT_CLASSES$3[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: UiAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiAlert, isStandalone: true, selector: "ui-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "variant() === 'warning' ? 'status' : 'alert'" } }, ngImport: i0, template: `
@@ -224,9 +147,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }] } });
 
+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) pl-3 pr-4 text-label bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)';
+/** Looks of the error block. `AsyncVariant` is derived from this tuple. */
+const ASYNC_VARIANTS = ['elevated', 'plain', 'emphasis', 'inline'];
+/** Alignments of the error block; `auto` is centred from 64rem. `AsyncAlign` is derived from this tuple. */
+const ASYNC_ALIGNS = ['start', 'center', 'auto'];
+const RETRY_BASE_CLASSES = 'relative inline-flex items-center justify-center 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) text-label';
+const RETRY_OUTLINE_CLASSES = 'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow)';
+const RETRY_PRIMARY_CLASSES = 'bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)';
+const RETRY_BLOCK_CLASSES = 'min-h-(--row-min) gap-2 pl-3 pr-4';
+const RETRY_INLINE_CLASSES = 'h-11 pointer-fine:h-8 flex-none gap-1.5 pl-2.5 pr-3';
+const ELEVATED_SURFACE_CLASSES = 'rounded-control bg-(--elevated)';
+const CARD_SURFACE_CLASSES = 'rounded-container bg-(--card) shadow-[inset_0_0_0_1px_var(--border)]';
+const BLOCK_SPECS = {
+    elevated: {
+        surface: ELEVATED_SURFACE_CLASSES,
+        gap: 'gap-1',
+        padding: { start: 'p-4', center: 'px-4 py-10', auto: 'p-4 lg:py-10' },
+        title: 'text-body font-medium',
+        message: { start: 'text-label', center: 'text-label', auto: 'text-label' },
+        retryMargin: { start: 'mt-2', center: 'mt-2', auto: 'mt-2' },
+        retry: RETRY_OUTLINE_CLASSES,
+    },
+    plain: {
+        surface: '',
+        gap: 'gap-1',
+        padding: { start: 'px-4 py-5', center: 'px-4 py-12', auto: 'px-4 py-5 lg:py-12' },
+        title: 'text-body leading-[normal] font-medium',
+        message: {
+            start: 'text-label leading-[normal]',
+            center: 'text-label leading-[normal]',
+            auto: 'text-label leading-[normal]',
+        },
+        retryMargin: { start: 'mt-2', center: 'mt-2', auto: 'mt-2' },
+        retry: RETRY_OUTLINE_CLASSES,
+    },
+    emphasis: {
+        surface: '',
+        gap: 'gap-3',
+        padding: { start: 'px-4 py-6', center: 'px-4 py-14', auto: 'px-4 py-6 lg:py-14' },
+        title: 'text-title font-semibold',
+        message: {
+            start: 'text-label',
+            center: 'text-body leading-[normal]',
+            auto: 'text-label lg:text-body lg:leading-[normal]',
+        },
+        retryMargin: { start: 'mt-1', center: 'mt-2', auto: 'mt-1 lg:mt-2' },
+        retry: RETRY_PRIMARY_CLASSES,
+    },
+};
+const ALIGN_CLASSES = {
+    start: 'items-start',
+    center: 'items-center text-center',
+    auto: 'items-start lg:items-center lg:text-center',
+};
+const INLINE_BOX_CLASSES = 'flex-row items-center justify-between gap-3 pt-1.5 pr-1.5 pb-2 pl-2.5';
 /**
  * The three states of a block that depends on a service call, next to the ready content.
  *
@@ -246,32 +327,72 @@ class UiAsync {
     ...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     retryLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "retryLabel" }] : /* istanbul ignore next */ []));
+    variant = input('elevated', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    card = input(false, { ...(ngDevMode ? { debugName: "card" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fill = input(false, { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     retry = output();
-    retryButtonClasses = RETRY_BUTTON_CLASSES;
+    filling = computed(() => this.fill() && this.state() === 'error', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filling" }] : /* istanbul ignore next */ []));
+    iconSize = computed(() => (this.variant() === 'inline' ? 16 : 18), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    #spec = computed(() => {
+        const variant = this.variant();
+        return variant === 'inline' ? null : BLOCK_SPECS[variant];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#spec" }] : /* istanbul ignore next */ []));
+    boxClasses = computed(() => {
+        const spec = this.#spec();
+        const fill = this.fill() ? ' flex-1 justify-center' : '';
+        if (spec === null) {
+            return `flex ${INLINE_BOX_CLASSES}${this.card() ? ` ${CARD_SURFACE_CLASSES}` : ''}${this.fill() ? ' flex-1' : ''}`;
+        }
+        const surface = this.card() ? CARD_SURFACE_CLASSES : spec.surface;
+        return `flex flex-col ${surface} ${spec.gap} ${ALIGN_CLASSES[this.align()]} ${spec.padding[this.align()]}${fill}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => this.#spec()?.title ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    messageClasses = computed(() => this.#spec()?.message[this.align()] ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messageClasses" }] : /* istanbul ignore next */ []));
+    retryButtonClasses = computed(() => {
+        const spec = this.#spec();
+        if (spec === null) {
+            return `${RETRY_BASE_CLASSES} ${RETRY_OUTLINE_CLASSES} ${RETRY_INLINE_CLASSES}`;
+        }
+        return `${RETRY_BASE_CLASSES} ${spec.retry} ${RETRY_BLOCK_CLASSES} ${spec.retryMargin[this.align()]}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "retryButtonClasses" }] : /* istanbul ignore next */ []));
     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: `
+    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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, host: { properties: { "attr.aria-busy": "state() === 'loading' || null", "class.flex": "filling()", "class.flex-col": "filling()" } }, 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-4"
-          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()">
+        <div aria-live="polite" role="alert" [class]="boxClasses()">
+          @if (variant() === 'inline') {
+            <span class="text-label text-(--muted-foreground)">{{ errorMessage() }}</span>
+          } @else {
+            @if (variant() === 'emphasis') {
+              <h2 [class]="titleClasses()">{{ errorTitle() }}</h2>
+            } @else {
+              <span [class]="titleClasses()">{{ errorTitle() }}</span>
+            }
+            <span class="text-(--muted-foreground)" [class]="messageClasses()">{{ errorMessage() }}</span>
+          }
+          <button type="button" [class]="retryButtonClasses()" (click)="retry.emit()">
             <svg
               aria-hidden="true"
               class="block flex-none fill-none stroke-current"
-              height="18"
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="1.75"
               viewBox="0 0 24 24"
-              width="18"
+              [attr.height]="iconSize()"
+              [attr.width]="iconSize()"
             >
               <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
               <path d="M21 3v5h-5" />
@@ -299,23 +420,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         <ng-content select="[asyncLoading]" />
       }
       @case ('error') {
-        <div
-          aria-live="polite"
-          class="rounded-control flex flex-col items-start gap-1 bg-(--elevated) p-4"
-          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()">
+        <div aria-live="polite" role="alert" [class]="boxClasses()">
+          @if (variant() === 'inline') {
+            <span class="text-label text-(--muted-foreground)">{{ errorMessage() }}</span>
+          } @else {
+            @if (variant() === 'emphasis') {
+              <h2 [class]="titleClasses()">{{ errorTitle() }}</h2>
+            } @else {
+              <span [class]="titleClasses()">{{ errorTitle() }}</span>
+            }
+            <span class="text-(--muted-foreground)" [class]="messageClasses()">{{ errorMessage() }}</span>
+          }
+          <button type="button" [class]="retryButtonClasses()" (click)="retry.emit()">
             <svg
               aria-hidden="true"
               class="block flex-none fill-none stroke-current"
-              height="18"
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="1.75"
               viewBox="0 0 24 24"
-              width="18"
+              [attr.height]="iconSize()"
+              [attr.width]="iconSize()"
             >
               <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
               <path d="M21 3v5h-5" />
@@ -334,17 +459,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
   `,
                     host: {
                         '[attr.aria-busy]': "state() === 'loading' || null",
+                        '[class.flex]': 'filling()',
+                        '[class.flex-col]': 'filling()',
                     },
                 }]
-        }], 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"] }] } });
+        }], 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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
 
 /** Available avatar sizes. `AvatarSize` is derived from this tuple. */
-const AVATAR_SIZES = ['sm', 'md', 'lg'];
-const BASE_CLASSES$6 = 'inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums';
-const SIZE_CLASSES$3 = {
+const AVATAR_SIZES = ['sm', 'md', 'lg', 'auto'];
+const BASE_CLASSES$7 = 'inline-flex items-center justify-center rounded-pill bg-(--muted) font-medium tabular-nums';
+const SIZE_CLASSES$7 = {
     sm: 'size-8 text-caption',
     md: 'size-[34px] text-label',
     lg: 'size-14 text-title',
+    auto: 'size-[34px] text-label lg:size-8 lg:text-caption',
 };
 /**
  * Initials in a disc, standing in for a person. Single-user application: there is exactly one.
@@ -359,7 +487,7 @@ class UiAvatar {
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$6} ${SIZE_CLASSES$3[this.size()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$7} ${SIZE_CLASSES$7[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 });
@@ -376,12 +504,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     },
                 }]
         }], propDecorators: { initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+/**
+ * Round hit area around a `ui-avatar` that links somewhere: 44px on touch, 40px from 64rem, with a
+ * glow on hover and the press scale. The avatar itself keeps its own size.
+ *
+ * @example
+ * <a uiAvatarLink routerLink="/profile"><ui-avatar initials="JR" label="Profile" size="auto" /></a>
+ */
+class UiAvatarLink {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiAvatarLink, isStandalone: true, selector: "a[uiAvatarLink], button[uiAvatarLink]", host: { classAttribute: "rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiAvatarLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[uiAvatarLink], button[uiAvatarLink]',
+                    host: {
+                        class: 'rounded-pill grid size-11 lg:size-10 place-items-center cursor-pointer select-none touch-manipulation transition-[transform,background-color] duration-(--duration-press) ease-out hover:bg-(--glow) active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)',
+                    },
+                }]
+        }] });
+
+/** Available back link sizes. `BackLinkSize` is derived from this tuple. */
+const BACK_LINK_SIZES = ['md', 'sm', 'header'];
+const BASE_CLASSES$6 = 'inline-flex items-center gap-0.5 rounded-control text-body font-medium whitespace-nowrap cursor-pointer select-none touch-manipulation transition-[transform,background-color,color] duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:outline-(--ring)';
+const SIZE_CLASSES$6 = {
+    md: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:outline-offset-2',
+    sm: 'h-9 pr-2 pl-0.5 text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground) focus-visible:outline-offset-2',
+    header: 'h-11 pr-3 pl-1 text-(--foreground) focus-visible:-outline-offset-2',
+};
+const CHEVRON = { md: 22, sm: 22, header: 24 };
+/**
+ * Link back to the parent screen: a chevron and the name of the destination.
+ *
+ * @example
+ * <a ui-back-link routerLink="/accounts">Accounts</a>
+ */
+class UiBackLink {
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    chevron = computed(() => CHEVRON[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chevron" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES$6} ${SIZE_CLASSES$6[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: UiBackLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiBackLink, isStandalone: true, selector: "a[ui-back-link]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <svg
+      aria-hidden="true"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.75"
+      viewBox="0 0 24 24"
+      [attr.height]="chevron()"
+      [attr.width]="chevron()"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+    <ng-content />
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiBackLink, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[ui-back-link]',
+                    template: `
+    <svg
+      aria-hidden="true"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.75"
+      viewBox="0 0 24 24"
+      [attr.height]="chevron()"
+      [attr.width]="chevron()"
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+    <ng-content />
+  `,
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /** Available badge variants. `BadgeVariant` is derived from this tuple. */
 const BADGE_VARIANTS = ['neutral', 'outline'];
 const BADGE_SIZES = ['md', 'sm'];
 const BASE_CLASSES$5 = 'inline-flex items-center rounded-pill text-caption font-medium';
-const SIZE_CLASSES$2 = {
+const SIZE_CLASSES$5 = {
     md: 'h-6 px-2.5',
     sm: 'h-[22px] px-2',
 };
@@ -400,7 +614,7 @@ class UiBadge {
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$5} ${SIZE_CLASSES$2[this.size()]} ${VARIANT_CLASSES$2[this.variant()]}`, /* @ts-ignore */
+    classes = computed(() => `${BASE_CLASSES$5} ${SIZE_CLASSES$5[this.size()]} ${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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
@@ -417,22 +631,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /** Available button variants. `ButtonVariant` is derived from this tuple. */
-const BUTTON_VARIANTS = ['primary', 'outline', 'ghost', 'destructive'];
+const BUTTON_VARIANTS = [
+    'primary',
+    'outline',
+    'ghost',
+    'destructive',
+    'quiet',
+    'quiet-destructive',
+    'outline-destructive',
+    'quiet-glow',
+    'tonal',
+];
 /** Available button sizes. */
-const BUTTON_SIZES = ['md', 'lg', 'xl', 'xxl', 'icon'];
-const BASE_CLASSES$4 = 'relative inline-flex items-center justify-center 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 BUTTON_SIZES = [
+    'compact',
+    'slim',
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    'xxl',
+    'tall',
+    'block',
+    'icon',
+    'icon-sm',
+];
+const BASE_CLASSES$4 = 'relative inline-flex items-center justify-center 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-(--ring) disabled:pointer-events-none disabled:opacity-40 aria-disabled:not-aria-busy:opacity-40';
+const RING_OUTSIDE = 'focus-visible:outline-offset-2';
+const RING_INSIDE = 'focus-visible:-outline-offset-2';
+const OUTLINE = 'bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow) active:bg-(--soft)';
 const VARIANT_CLASSES$1 = {
-    primary: 'bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)',
-    outline: 'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] hover:bg-(--glow) active:bg-(--soft)',
-    ghost: 'bg-transparent text-(--foreground) hover:bg-(--glow) active:bg-(--soft)',
-    destructive: 'bg-(--destructive) text-(--destructive-foreground)',
+    primary: `${RING_OUTSIDE} bg-(--primary) text-(--primary-foreground) hover:bg-(--primary-to)`,
+    outline: `${RING_OUTSIDE} ${OUTLINE} text-(--foreground)`,
+    ghost: `${RING_OUTSIDE} bg-transparent text-(--foreground) hover:bg-(--glow) active:bg-(--soft)`,
+    destructive: `${RING_OUTSIDE} bg-(--destructive) text-(--destructive-foreground)`,
+    tonal: `${RING_OUTSIDE} bg-(--muted) text-(--foreground) lg:bg-transparent lg:hover:bg-(--glow)`,
+    'quiet-glow': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--foreground)`,
+    quiet: `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--soft) hover:text-(--foreground) active:bg-(--soft)`,
+    'quiet-destructive': `${RING_INSIDE} bg-transparent text-(--muted-foreground) hover:bg-(--glow) hover:text-(--negative) active:bg-(--soft)`,
+    'outline-destructive': `${RING_OUTSIDE} ${OUTLINE} text-(--negative)`,
 };
-const SIZE_CLASSES$1 = {
+const SIZE_CLASSES$4 = {
+    compact: 'h-8 lg:h-7 gap-1.5 px-2.5 lg:px-2 text-label before:absolute before:-inset-x-1 before:-inset-y-1.5 lg:before:hidden',
+    slim: 'h-11 lg:h-8 gap-1.5 px-2.5 text-label',
+    xs: 'h-8 gap-1.5 px-2.5 text-label',
+    sm: 'h-9 gap-2 px-3 text-label',
     md: 'min-h-(--row-min) gap-2 px-4 text-label has-[>svg:first-child]:pl-3',
     lg: 'h-11 gap-2 px-[18px] text-label',
     xl: 'h-[50px] gap-2 px-6 text-body',
-    xxl: 'h-[52px] gap-2.5 px-6 text-body',
+    xxl: 'h-[52px] lg:h-11 gap-2.5 px-6 lg:px-5 text-body lg:has-[>svg:first-child]:pl-4',
+    tall: 'h-12 lg:h-10 gap-2 px-4 text-body',
+    block: 'h-[50px] lg:h-11 gap-2 px-4 text-body',
     icon: 'size-(--row-min) gap-2 p-0',
+    'icon-sm': 'size-11 pointer-fine:size-9 gap-2 p-0',
 };
 /**
  * Styled native button or anchor, applied as an attribute so the host keeps every native behavior.
@@ -447,12 +699,15 @@ 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$4} ${VARIANT_CLASSES$1[this.variant()]} ${SIZE_CLASSES$1[this.size()]}${this.loading() ? ' pointer-events-none opacity-70' : ''}`, /* @ts-ignore */
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    inactive = computed(() => this.loading() || this.busy(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inactive" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES$4} ${VARIANT_CLASSES$1[this.variant()]} ${SIZE_CLASSES$4[this.size()]}${this.inactive() ? ' pointer-events-none opacity-70' : ''}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     constructor() {
         const host = inject(ElementRef).nativeElement;
         const guard = (event) => {
-            if (this.loading()) {
+            if (this.inactive()) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
             }
@@ -461,7 +716,7 @@ class UiButton {
         inject(DestroyRef).onDestroy(() => host.removeEventListener('click', guard, { capture: true }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiButton, isStandalone: true, selector: "button[ui-button], a[ui-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-busy": "loading() || null", "attr.aria-disabled": "loading() || null" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiButton, isStandalone: true, selector: "button[ui-button], a[ui-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-busy": "inactive() || null", "attr.aria-disabled": "inactive() || null" } }, ngImport: i0, template: `
     @if (loading()) {
       <span
         aria-hidden="true"
@@ -486,42 +741,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
   `,
                     host: {
                         '[class]': 'classes()',
-                        '[attr.aria-busy]': 'loading() || null',
-                        '[attr.aria-disabled]': 'loading() || null',
+                        '[attr.aria-busy]': 'inactive() || null',
+                        '[attr.aria-disabled]': 'inactive() || null',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }] } });
 
 /** Available card variants. `CardVariant` is derived from this tuple. */
 const CARD_VARIANTS = ['default', 'elevated'];
 /** Available card paddings. `CardPadding` is derived from this tuple. */
-const CARD_PADDINGS = ['none', 'sm', 'md', 'list'];
-const BASE_CLASSES$3 = 'block rounded-container';
+const CARD_PADDINGS = ['none', 'sm', 'md', 'list', 'rows'];
+/** Where the card surface (fill, border, radius) and its padding apply. `CardSurface` is derived from this tuple. */
+const CARD_SURFACES = ['always', 'lg', 'max-lg'];
+const BASE_CLASSES$3 = 'block';
 const VARIANT_CLASSES = {
-    default: 'bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] text-(--card-foreground)',
-    elevated: 'bg-(--elevated) shadow-[inset_0_0_0_1px_var(--hairline)] text-(--foreground)',
+    default: {
+        always: 'rounded-container bg-(--card) shadow-[inset_0_0_0_1px_var(--border)] text-(--card-foreground)',
+        lg: 'lg:rounded-container lg:bg-(--card) lg:shadow-[inset_0_0_0_1px_var(--border)] lg:text-(--card-foreground)',
+        'max-lg': 'max-lg:rounded-container max-lg:bg-(--card) max-lg:shadow-[inset_0_0_0_1px_var(--border)] max-lg:text-(--card-foreground)',
+    },
+    elevated: {
+        always: 'rounded-container bg-(--elevated) shadow-[inset_0_0_0_1px_var(--hairline)] text-(--foreground)',
+        lg: 'lg:rounded-container lg:bg-(--elevated) lg:shadow-[inset_0_0_0_1px_var(--hairline)] lg:text-(--foreground)',
+        'max-lg': 'max-lg:rounded-container max-lg:bg-(--elevated) max-lg:shadow-[inset_0_0_0_1px_var(--hairline)] max-lg:text-(--foreground)',
+    },
 };
 const PADDING_CLASSES$1 = {
-    none: 'p-0',
-    sm: 'p-3',
-    md: 'p-(--inset-card)',
-    list: 'px-2 py-3',
+    none: {
+        always: 'p-0',
+        lg: 'lg:p-0',
+        'max-lg': 'max-lg:p-0',
+    },
+    sm: {
+        always: 'p-3',
+        lg: 'lg:p-3',
+        'max-lg': 'max-lg:p-3',
+    },
+    md: {
+        always: 'p-(--inset-card)',
+        lg: 'lg:p-(--inset-card)',
+        'max-lg': 'max-lg:p-(--inset-card)',
+    },
+    list: {
+        always: 'px-2 py-3',
+        lg: 'lg:px-2 lg:py-3',
+        'max-lg': 'max-lg:px-2 max-lg:py-3',
+    },
+    rows: {
+        always: 'px-(--inset-card) py-1',
+        lg: 'lg:px-(--inset-card) lg:py-1',
+        'max-lg': 'max-lg:px-(--inset-card) max-lg:py-1',
+    },
 };
 /**
- * Surface that groups related content: a summary block, a table, a side panel.
+ * Surface that groups related content: a summary block, a table, a side panel. `surface` limits the
+ * fill, border, radius and padding to one side of `64rem`, for a block that is a card on a desktop and
+ * plain on an iPhone, or the reverse.
  *
  * @example
  * <ui-card variant="elevated" padding="sm">Total</ui-card>
+ * <ui-card surface="max-lg">Card on an iPhone, plain on a desktop</ui-card>
  */
 class UiCard {
     variant = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     padding = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES$3} ${VARIANT_CLASSES[this.variant()]} ${PADDING_CLASSES$1[this.padding()]}`, /* @ts-ignore */
+    surface = input('always', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES$3} ${VARIANT_CLASSES[this.variant()][this.surface()]} ${PADDING_CLASSES$1[this.padding()][this.surface()]}`, /* @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 });
+    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 }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiCard, decorators: [{
             type: Component,
@@ -532,7 +823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[class]': 'classes()',
                     },
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }] } });
 
 /**
  * Resolves to the styled control projected into a field.
@@ -544,8 +835,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  */
 const UI_CONTROL = new InjectionToken('UI_CONTROL');
 
-/** Available control sizes. `md` is the 44/40px touch target. */
-const CONTROL_SIZES = ['sm', 'md'];
+/** Available control sizes. `md` is the 44/40px touch target; `lg` and `xl` are the 48px sheet and sign-in fields. */
+const CONTROL_SIZES = ['sm', 'md', 'lg', 'xl'];
 const CONTROL_BASE_CLASSES = 'w-full rounded-control px-3 text-body text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)] transition-shadow duration-(--duration-fast) ease-out placeholder:text-(--muted-foreground) focus-visible:shadow-[inset_0_0_0_2px_var(--ring)] aria-invalid:shadow-[inset_0_0_0_2px_var(--negative)] disabled:cursor-not-allowed disabled:opacity-50';
 const CONTROL_SURFACES = ['background', 'card'];
 const CONTROL_SURFACE_CLASSES = {
@@ -555,7 +846,10 @@ const CONTROL_SURFACE_CLASSES = {
 const CONTROL_SIZE_CLASSES = {
     sm: 'h-9',
     md: 'min-h-(--row-min)',
+    lg: 'min-h-12 lg:min-h-(--row-min)',
+    xl: 'h-12 lg:h-11',
 };
+const SEARCH_CLASSES = '[&::-webkit-search-cancel-button]:appearance-none';
 /**
  * Styled native text input. A directive (not a wrapper component) so the host
  * stays a plain <input>: every forms flavor (ngModel, reactive, signal forms)
@@ -576,7 +870,7 @@ class UiInput {
     ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     touched = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${CONTROL_BASE_CLASSES} ${CONTROL_SURFACE_CLASSES[this.surface()]} ${CONTROL_SIZE_CLASSES[this.size()]}`, /* @ts-ignore */
+    classes = computed(() => `${CONTROL_BASE_CLASSES} ${SEARCH_CLASSES} ${CONTROL_SURFACE_CLASSES[this.surface()]} ${CONTROL_SIZE_CLASSES[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: UiInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiInput, isStandalone: true, selector: "input[uiInput]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [{ provide: UI_CONTROL, useExisting: forwardRef(() => UiInput) }], ngImport: i0 });
@@ -621,10 +915,10 @@ 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 CHIP_CLASSES = 'h-10 px-3.5 pointer-fine:h-8 pointer-fine:px-3 rounded-pill text-label font-medium cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)';
+const CHIP_CLASSES$1 = 'h-10 px-3.5 pointer-fine:h-8 pointer-fine:px-3 rounded-pill text-label font-medium cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring)';
 const SELECTED_CLASSES$2 = 'bg-(--primary) text-(--primary-foreground)';
 const UNSELECTED_CLASSES$1 = 'text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)]';
-const nextId$3 = (() => {
+const nextId$4 = (() => {
     let count = 0;
     return () => `ui-choice-chips-${++count}`;
 })();
@@ -659,7 +953,7 @@ class UiChoiceChips {
     touched = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     touch = output();
-    labelId = nextId$3();
+    labelId = nextId$4();
     #host = inject(ElementRef);
     radios = viewChildren('radio', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "radios" }] : /* istanbul ignore next */ []));
@@ -669,7 +963,7 @@ class UiChoiceChips {
         const state = optionValue === this.value()
             ? SELECTED_CLASSES$2
             : `${CONTROL_SURFACE_CLASSES[this.surface()]} ${UNSELECTED_CLASSES$1}`;
-        return `${CHIP_CLASSES} ${state}`;
+        return `${CHIP_CLASSES$1} ${state}`;
     }
     tabIndexFor(optionValue) {
         const opts = this.options();
@@ -784,8 +1078,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 
 /** Available delta emphases. `DeltaEmphasis` is derived from this tuple. */
 const DELTA_EMPHASES = ['text', 'pill'];
-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';
+/** Type sizes. `DeltaSize` is derived from this tuple. */
+const DELTA_SIZES = ['label', 'inherit'];
+/** Font weights. `DeltaWeight` is derived from this tuple. */
+const DELTA_WEIGHTS = ['medium', 'regular'];
+const BASE_CLASSES$2 = 'inline-flex items-center gap-1 tabular-nums';
+const SIZE_CLASSES$3 = {
+    label: 'text-label',
+    inherit: '',
+};
+const WEIGHT_CLASSES = {
+    medium: 'font-medium',
+    regular: 'font-normal',
+};
+const PILL_CLASSES$1 = 'h-6 rounded-pill px-2';
 const TEXT_CLASSES = {
     positive: 'text-(--positive)',
     negative: 'text-(--negative)',
@@ -812,6 +1118,10 @@ class UiDelta {
     ...(ngDevMode ? [{ debugName: "unknownLabel" }] : /* istanbul ignore next */ []));
     emphasis = input('text', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emphasis" }] : /* istanbul ignore next */ []));
+    size = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    weight = input('medium', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
     sign = computed(() => {
         const value = this.value();
         if (value === null || value === undefined) {
@@ -828,12 +1138,12 @@ class UiDelta {
     ...(ngDevMode ? [{ debugName: "sign" }] : /* istanbul ignore next */ []));
     classes = computed(() => {
         const sign = this.sign();
-        const background = this.emphasis() === 'pill' ? `${PILL_CLASSES} ${PILL_BACKGROUND_CLASS}` : 'bg-transparent';
-        return `${BASE_CLASSES$2} ${TEXT_CLASSES[sign]} ${background}`;
+        const background = this.emphasis() === 'pill' ? `${PILL_CLASSES$1} ${PILL_BACKGROUND_CLASS}` : 'bg-transparent';
+        return `${BASE_CLASSES$2} ${SIZE_CLASSES$3[this.size()]} ${WEIGHT_CLASSES[this.weight()]} ${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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDelta, isStandalone: true, selector: "ui-delta", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unknownLabel: { classPropertyName: "unknownLabel", publicName: "unknownLabel", isSignal: true, isRequired: true, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDelta, isStandalone: true, selector: "ui-delta", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unknownLabel: { classPropertyName: "unknownLabel", publicName: "unknownLabel", isSignal: true, isRequired: true, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
     @if (sign() === 'unknown') {
       <span aria-hidden="true">&mdash;</span>
       <span class="sr-only">{{ unknownLabel() }}</span>
@@ -858,7 +1168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[class]': 'classes()',
                     },
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unknownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unknownLabel", required: true }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unknownLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unknownLabel", required: true }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }] } });
 
 /** Named dialog widths; any other CSS length is accepted as is. `DialogWidth` is derived from this tuple. */
 const DIALOG_WIDTHS = ['md', 'lg'];
@@ -910,7 +1220,7 @@ const LAYOUTS = {
         footer: 'max-lg:pb-[calc(8px+env(safe-area-inset-bottom))] lg:pb-6',
     },
 };
-const nextId$2 = (() => {
+const nextId$3 = (() => {
     let count = 0;
     return () => `ui-dialog-${++count}`;
 })();
@@ -938,8 +1248,18 @@ class UiDialog {
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     dismissed = output();
-    headingId = nextId$2();
+    headingId = nextId$3();
     descriptionId = `${this.headingId}-description`;
+    bodyId = `${this.headingId}-body`;
+    scrollable = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        if (this.description()) {
+            return this.descriptionId;
+        }
+        return this.layout() === 'confirm' ? this.bodyId : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     widthValue = computed(() => {
         const width = this.width();
         return Object.hasOwn(WIDTH_VALUES, width) ? WIDTH_VALUES[width] : width;
@@ -961,6 +1281,17 @@ class UiDialog {
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     #host = inject(ElementRef);
     constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            if (typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const body = this.#host.nativeElement.querySelector('[data-dialog-body]');
+            const observer = new ResizeObserver(() => this.scrollable.set(body.scrollHeight > body.clientHeight));
+            observer.observe(body);
+            observer.observe(body.firstElementChild);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
         afterRenderEffect(() => {
             // viewChild.required can't target a #private field (NG1053); safe because the template has exactly one <dialog>.
             const dialog = this.#host.nativeElement.querySelector('dialog');
@@ -999,7 +1330,7 @@ class UiDialog {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDialog, isStandalone: true, selector: "ui-dialog", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, truncateDescription: { classPropertyName: "truncateDescription", publicName: "truncateDescription", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "click": "onClick($event)" } }, ngImport: i0, template: `
     <dialog
       #dlg
-      [attr.aria-describedby]="description() ? descriptionId : null"
+      [attr.aria-describedby]="describedBy()"
       [attr.aria-labelledby]="headingId"
       [attr.role]="layout() === 'confirm' ? 'alertdialog' : 'dialog'"
       [class]="classes()"
@@ -1042,7 +1373,14 @@ class UiDialog {
         }
       </div>
 
-      <div class="min-h-0 flex-1 overflow-y-auto px-4 lg:px-6" data-dialog-body>
+      <div
+        class="min-h-0 flex-1 overflow-y-auto px-4 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) lg:px-6"
+        data-dialog-body
+        [attr.aria-labelledby]="scrollable() ? headingId : null"
+        [attr.role]="scrollable() ? 'region' : null"
+        [attr.tabindex]="scrollable() ? 0 : null"
+        [id]="bodyId"
+      >
         <!-- empty:hidden keeps a body-less dialog from carrying the body's vertical padding. -->
         <div class="flex flex-col gap-4 empty:hidden" [class]="spec().body">
           <ng-content />
@@ -1060,7 +1398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             args: [{ selector: 'ui-dialog', host: { '(pointerdown)': 'onPointerDown($event)', '(click)': 'onClick($event)' }, template: `
     <dialog
       #dlg
-      [attr.aria-describedby]="description() ? descriptionId : null"
+      [attr.aria-describedby]="describedBy()"
       [attr.aria-labelledby]="headingId"
       [attr.role]="layout() === 'confirm' ? 'alertdialog' : 'dialog'"
       [class]="classes()"
@@ -1103,7 +1441,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }
       </div>
 
-      <div class="min-h-0 flex-1 overflow-y-auto px-4 lg:px-6" data-dialog-body>
+      <div
+        class="min-h-0 flex-1 overflow-y-auto px-4 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) lg:px-6"
+        data-dialog-body
+        [attr.aria-labelledby]="scrollable() ? headingId : null"
+        [attr.role]="scrollable() ? 'region' : null"
+        [attr.tabindex]="scrollable() ? 0 : null"
+        [id]="bodyId"
+      >
         <!-- empty:hidden keeps a body-less dialog from carrying the body's vertical padding. -->
         <div class="flex flex-col gap-4 empty:hidden" [class]="spec().body">
           <ng-content />
@@ -1166,7 +1511,7 @@ function rankSlices(slices, othersLabel) {
 
 const identityValue$1 = (value) => `${value}`;
 const identityShare = (share) => `${Math.round(share * 100)}%`;
-const ROW_CLASSES$1 = 'flex w-full items-center gap-3 min-h-14 px-2 py-1 [font-variant-numeric:var(--numeric)] rounded-control text-left transition-colors duration-(--duration-fast) ease-out hover:bg-(--glow) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
+const ROW_CLASSES$1 = 'flex w-full items-center gap-3 min-h-14 px-2 py-1 [font-variant-numeric:var(--numeric)] rounded-control text-left transition-colors duration-(--duration-fast) ease-out hover:bg-(--glow) active:bg-(--soft) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
 const RAMP_DOT_CLASSES = {
     1: 'bg-(--ramp-1)',
     2: 'bg-(--ramp-2)',
@@ -1193,6 +1538,8 @@ class UiDonut {
     ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
     shareFormat = input(identityShare, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shareFormat" }] : /* istanbul ignore next */ []));
+    legendHref = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "legendHref" }] : /* istanbul ignore next */ []));
     sliceSelect = output();
     activeId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
@@ -1241,12 +1588,22 @@ class UiDonut {
             this.activeId.set(null);
         }
     }
+    hrefFor(id) {
+        return this.legendHref()?.(id) ?? null;
+    }
+    follow(event, slice) {
+        if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
+            return;
+        }
+        event.preventDefault();
+        this.select(slice);
+    }
     select(slice) {
         this.activeId.set(slice.id);
         this.sliceSelect.emit(slice.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDonut, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDonut, isStandalone: true, selector: "ui-donut", inputs: { slices: { classPropertyName: "slices", publicName: "slices", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, othersLabel: { classPropertyName: "othersLabel", publicName: "othersLabel", isSignal: true, isRequired: true, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, shareFormat: { classPropertyName: "shareFormat", publicName: "shareFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliceSelect: "sliceSelect" }, host: { classAttribute: "flex flex-col items-center gap-3 sm:flex-row sm:items-center sm:gap-8" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDonut, isStandalone: true, selector: "ui-donut", inputs: { slices: { classPropertyName: "slices", publicName: "slices", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, othersLabel: { classPropertyName: "othersLabel", publicName: "othersLabel", isSignal: true, isRequired: true, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, shareFormat: { classPropertyName: "shareFormat", publicName: "shareFormat", isSignal: true, isRequired: false, transformFunction: null }, legendHref: { classPropertyName: "legendHref", publicName: "legendHref", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliceSelect: "sliceSelect" }, host: { classAttribute: "flex flex-col items-center gap-3 sm:flex-row sm:items-center sm:gap-8" }, ngImport: i0, template: `
     <div class="relative size-[232px] flex-none sm:size-60">
       <svg class="block h-full w-full -rotate-90" role="img" viewBox="0 0 200 200" [attr.aria-label]="ariaLabel()">
         <circle
@@ -1294,30 +1651,48 @@ class UiDonut {
 
     <div class="flex w-full min-w-0 flex-1 flex-col sm:w-auto" data-testid="donut-legend">
       @for (slice of ranked(); track slice.id) {
-        <button
-          type="button"
-          [class]="rowClasses(slice)"
-          (blur)="clearHighlight(slice.id)"
-          (click)="select(slice)"
-          (focus)="highlight(slice.id)"
-          (pointerenter)="highlight(slice.id)"
-          (pointerleave)="clearHighlight(slice.id)"
-        >
-          <span [class]="dotClasses(slice)"></span>
-          <span class="flex min-w-0 flex-1 flex-col">
-            <span class="text-body truncate font-medium">{{ slice.label }}</span>
-            <span class="text-caption truncate tracking-(--tracking-caption) text-(--subtle-foreground)">{{
-              subLabel(slice)
-            }}</span>
-          </span>
-          <span class="flex flex-none flex-col items-end whitespace-nowrap">
-            <span class="text-body font-medium">{{ shareFormat()(slice.share) }}</span>
-            <span class="text-caption tracking-normal text-(--muted-foreground)">{{ valueFormat()(slice.value) }}</span>
-          </span>
-        </button>
+        @if (hrefFor(slice.id); as href) {
+          <a
+            [attr.href]="href"
+            [class]="rowClasses(slice)"
+            (blur)="clearHighlight(slice.id)"
+            (click)="follow($event, slice)"
+            (focus)="highlight(slice.id)"
+            (pointerenter)="highlight(slice.id)"
+            (pointerleave)="clearHighlight(slice.id)"
+          >
+            <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: slice }" />
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="rowClasses(slice)"
+            (blur)="clearHighlight(slice.id)"
+            (click)="select(slice)"
+            (focus)="highlight(slice.id)"
+            (pointerenter)="highlight(slice.id)"
+            (pointerleave)="clearHighlight(slice.id)"
+          >
+            <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: slice }" />
+          </button>
+        }
       }
     </div>
-  `, isInline: true });
+
+    <ng-template #rowContent let-slice>
+      <span [class]="dotClasses(slice)"></span>
+      <span class="flex min-w-0 flex-1 flex-col">
+        <span class="text-body truncate font-medium">{{ slice.label }}</span>
+        <span class="text-caption truncate tracking-(--tracking-caption) text-(--subtle-foreground)">{{
+          subLabel(slice)
+        }}</span>
+      </span>
+      <span class="flex flex-none flex-col items-end whitespace-nowrap">
+        <span class="text-body font-medium">{{ shareFormat()(slice.share) }}</span>
+        <span class="text-caption tracking-normal text-(--muted-foreground)">{{ valueFormat()(slice.value) }}</span>
+      </span>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDonut, decorators: [{
             type: Component,
@@ -1371,37 +1746,201 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 
     <div class="flex w-full min-w-0 flex-1 flex-col sm:w-auto" data-testid="donut-legend">
       @for (slice of ranked(); track slice.id) {
-        <button
-          type="button"
-          [class]="rowClasses(slice)"
-          (blur)="clearHighlight(slice.id)"
-          (click)="select(slice)"
-          (focus)="highlight(slice.id)"
-          (pointerenter)="highlight(slice.id)"
-          (pointerleave)="clearHighlight(slice.id)"
-        >
-          <span [class]="dotClasses(slice)"></span>
-          <span class="flex min-w-0 flex-1 flex-col">
-            <span class="text-body truncate font-medium">{{ slice.label }}</span>
-            <span class="text-caption truncate tracking-(--tracking-caption) text-(--subtle-foreground)">{{
-              subLabel(slice)
-            }}</span>
-          </span>
-          <span class="flex flex-none flex-col items-end whitespace-nowrap">
-            <span class="text-body font-medium">{{ shareFormat()(slice.share) }}</span>
-            <span class="text-caption tracking-normal text-(--muted-foreground)">{{ valueFormat()(slice.value) }}</span>
-          </span>
-        </button>
+        @if (hrefFor(slice.id); as href) {
+          <a
+            [attr.href]="href"
+            [class]="rowClasses(slice)"
+            (blur)="clearHighlight(slice.id)"
+            (click)="follow($event, slice)"
+            (focus)="highlight(slice.id)"
+            (pointerenter)="highlight(slice.id)"
+            (pointerleave)="clearHighlight(slice.id)"
+          >
+            <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: slice }" />
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="rowClasses(slice)"
+            (blur)="clearHighlight(slice.id)"
+            (click)="select(slice)"
+            (focus)="highlight(slice.id)"
+            (pointerenter)="highlight(slice.id)"
+            (pointerleave)="clearHighlight(slice.id)"
+          >
+            <ng-container *ngTemplateOutlet="rowContent; context: { $implicit: slice }" />
+          </button>
+        }
       }
     </div>
+
+    <ng-template #rowContent let-slice>
+      <span [class]="dotClasses(slice)"></span>
+      <span class="flex min-w-0 flex-1 flex-col">
+        <span class="text-body truncate font-medium">{{ slice.label }}</span>
+        <span class="text-caption truncate tracking-(--tracking-caption) text-(--subtle-foreground)">{{
+          subLabel(slice)
+        }}</span>
+      </span>
+      <span class="flex flex-none flex-col items-end whitespace-nowrap">
+        <span class="text-body font-medium">{{ shareFormat()(slice.share) }}</span>
+        <span class="text-caption tracking-normal text-(--muted-foreground)">{{ valueFormat()(slice.value) }}</span>
+      </span>
+    </ng-template>
   `,
+                    imports: [NgTemplateOutlet],
                     host: {
                         class: 'flex flex-col items-center gap-3 sm:flex-row sm:items-center sm:gap-8',
                     },
                 }]
-        }], propDecorators: { slices: [{ type: i0.Input, args: [{ isSignal: true, alias: "slices", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], othersLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "othersLabel", required: true }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], shareFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareFormat", required: false }] }], sliceSelect: [{ type: i0.Output, args: ["sliceSelect"] }] } });
+        }], propDecorators: { slices: [{ type: i0.Input, args: [{ isSignal: true, alias: "slices", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], othersLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "othersLabel", required: true }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], shareFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "shareFormat", required: false }] }], legendHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendHref", required: false }] }], sliceSelect: [{ type: i0.Output, args: ["sliceSelect"] }] } });
 
-const nextId$1 = (() => {
+/**
+ * Link to another site: the label followed by an external-link icon. A 44px target on touch,
+ * an underline on hover with a mouse.
+ *
+ * @example
+ * <a ui-external-link href="https://example.com" target="_blank" rel="noopener">Page on example.com</a>
+ */
+class UiExternalLink {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiExternalLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: UiExternalLink, isStandalone: true, selector: "a[ui-external-link]", host: { classAttribute: "inline-flex min-h-11 items-center gap-1.5 rounded-[4px] text-label leading-[17px] font-medium lg:min-h-0 hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) [&>svg]:flex-none" }, ngImport: i0, template: `
+    <ng-content />
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="14"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.75"
+      viewBox="0 0 24 24"
+      width="14"
+    >
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </svg>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiExternalLink, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[ui-external-link]',
+                    template: `
+    <ng-content />
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="14"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.75"
+      viewBox="0 0 24 24"
+      width="14"
+    >
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </svg>
+  `,
+                    host: {
+                        class: 'inline-flex min-h-11 items-center gap-1.5 rounded-[4px] text-label leading-[17px] font-medium lg:min-h-0 hover:underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ring) [&>svg]:flex-none',
+                    },
+                }]
+        }] });
+
+/** Available fact row sizes. `FactSize` is derived from this tuple. */
+const FACT_SIZES = ['md', 'sm', 'auto'];
+/** Colour of the line under a fact value. `stale` flags an out-of-date figure. */
+const FACT_SUB_TONES = ['subtle', 'stale'];
+const SIZE_CLASSES$2 = {
+    md: { row: 'py-3 [&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]', value: 'text-body' },
+    sm: { row: 'py-2.5', value: 'text-label' },
+    auto: {
+        row: 'py-3 lg:py-2.5 max-lg:[&:not(:first-child)]:shadow-[inset_0_1px_0_var(--hairline)]',
+        value: 'text-body lg:text-label',
+    },
+};
+const SUB_TONE_CLASSES$1 = {
+    subtle: 'text-(--subtle-foreground)',
+    stale: 'text-(--stale)',
+};
+/**
+ * The list that holds `div[ui-fact]` rows, as a native description list.
+ *
+ * @example
+ * <dl uiFacts>
+ *   <div ui-fact label="Quantity">500</div>
+ *   <div ui-fact label="Price" sub="24/09 · Yahoo">28,64 €</div>
+ * </dl>
+ */
+class UiFacts {
+    ruled = input(false, { ...(ngDevMode ? { debugName: "ruled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => `m-0 flex flex-col${this.ruled() ? ' shadow-[inset_0_1px_0_var(--hairline)]' : ''}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFacts, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiFacts, isStandalone: true, selector: "dl[uiFacts]", inputs: { ruled: { classPropertyName: "ruled", publicName: "ruled", 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: UiFacts, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dl[uiFacts]',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { ruled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ruled", required: false }] }] } });
+/**
+ * One fact of a `dl[uiFacts]`: a label on the left, its value on the right, an optional sub-line
+ * under the value, and a hairline above every row but the first at the `md` size (the `sm` desktop list is separated by space only). The projected content is the value.
+ *
+ * @example
+ * <div ui-fact label="Price" sub="24/09 · Yahoo" subTone="stale">28,64 €</div>
+ */
+class UiFact {
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    sub = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "sub" }] : /* istanbul ignore next */ []));
+    subTone = input('subtle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subTone" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `flex items-baseline justify-between gap-4 ${SIZE_CLASSES$2[this.size()].row}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    valueClasses = computed(() => `${SIZE_CLASSES$2[this.size()].value} tabular-nums`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueClasses" }] : /* istanbul ignore next */ []));
+    subClasses = computed(() => `text-caption ${SUB_TONE_CLASSES$1[this.subTone()]}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFact, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiFact, isStandalone: true, selector: "div[ui-fact]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sub: { classPropertyName: "sub", publicName: "sub", isSignal: true, isRequired: false, transformFunction: null }, subTone: { classPropertyName: "subTone", publicName: "subTone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <dt class="text-label text-(--muted-foreground)">{{ label() }}</dt>
+    <dd class="m-0 flex flex-col items-end text-right">
+      <span [class]="valueClasses()"><ng-content /></span>
+      @if (sub()) {
+        <span [class]="subClasses()">{{ sub() }}</span>
+      }
+    </dd>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFact, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[ui-fact]',
+                    template: `
+    <dt class="text-label text-(--muted-foreground)">{{ label() }}</dt>
+    <dd class="m-0 flex flex-col items-end text-right">
+      <span [class]="valueClasses()"><ng-content /></span>
+      @if (sub()) {
+        <span [class]="subClasses()">{{ sub() }}</span>
+      }
+    </dd>
+  `,
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], sub: [{ type: i0.Input, args: [{ isSignal: true, alias: "sub", required: false }] }], subTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+const nextId$2 = (() => {
     let count = 0;
     return () => `ui-field-${++count}`;
 })();
@@ -1430,6 +1969,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     },
                 }]
         }] });
+/**
+ * Marks an element, typically an icon button, as the trailing action of a `ui-field`: it sits on the
+ * control's right edge, square to the control's height, and the control's text is padded to clear it.
+ *
+ * @example
+ * <ui-field label="Password">
+ *   <input uiInput type="password" size="xl" />
+ *   <button uiFieldTrailing type="button" aria-label="Show the password" [attr.aria-pressed]="shown()">...</button>
+ * </ui-field>
+ *
+ * A toggle such as this one should carry `aria-pressed`. The slot shares the right edge with `unit`:
+ * set one or the other, not both.
+ */
+class UiFieldTrailing {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFieldTrailing, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFieldTrailing, isStandalone: true, selector: "[uiFieldTrailing]", host: { classAttribute: "absolute right-0 grid h-full aspect-square place-items-center rounded-control cursor-pointer text-(--muted-foreground) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-(--ring)" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFieldTrailing, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiFieldTrailing]',
+                    host: {
+                        class: 'absolute right-0 grid h-full aspect-square place-items-center rounded-control cursor-pointer text-(--muted-foreground) hover:text-(--foreground) focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-(--ring)',
+                    },
+                }]
+        }] });
 /**
  * Label, control, hint and error as one unit. The control stays a plain native element:
  * the field finds it in its own projected content and wires the ARIA attributes onto it.
@@ -1462,7 +2027,10 @@ class UiField {
     ...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
     unit = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "unit" }] : /* istanbul ignore next */ []));
-    #id = nextId$1();
+    optional = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optional" }] : /* istanbul ignore next */ []));
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    #id = nextId$2();
     hintId = `${this.#id}-hint`;
     errorId = `${this.#id}-error`;
     #host = inject(ElementRef);
@@ -1470,7 +2038,9 @@ class UiField {
     ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
     leading = contentChild(UiFieldLeading, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "leading" }] : /* istanbul ignore next */ []));
-    rowClasses = computed(() => this.leading() ? 'relative flex items-center [&>input]:pl-[38px]' : 'relative flex items-center', /* @ts-ignore */
+    trailing = contentChild(UiFieldTrailing, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trailing" }] : /* istanbul ignore next */ []));
+    rowClasses = computed(() => `relative flex items-center${this.leading() ? ' [&>input]:pl-[38px]' : ''}${this.trailing() ? ' [&>input]:pr-12 lg:[&>input]:pr-11' : ''}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowClasses" }] : /* istanbul ignore next */ []));
     labelClasses = computed(() => this.labelHidden() ? 'sr-only' : 'text-label leading-[17px] font-medium text-(--muted-foreground)', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
@@ -1491,6 +2061,7 @@ class UiField {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     constructor() {
+        let markedByField = false;
         afterRenderEffect(() => {
             // querySelector, not viewChild.required, so the "no control found" guard below stays reachable and testable.
             const control = this.#host.nativeElement.querySelector('input, select, textarea');
@@ -1506,24 +2077,31 @@ class UiField {
             else {
                 control.removeAttribute('aria-describedby');
             }
-            if (this.message()) {
+            if (this.message() || this.invalid()) {
                 control.setAttribute('aria-invalid', 'true');
+                markedByField = true;
             }
-            else {
+            else if (markedByField) {
                 control.removeAttribute('aria-invalid');
+                markedByField = false;
             }
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiField, isStandalone: true, selector: "ui-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelHidden: { classPropertyName: "labelHidden", publicName: "labelHidden", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: UI_CONTROL, descendants: true, isSignal: true }, { propertyName: "leading", first: true, predicate: UiFieldLeading, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiField, isStandalone: true, selector: "ui-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, labelHidden: { classPropertyName: "labelHidden", publicName: "labelHidden", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: UI_CONTROL, descendants: true, isSignal: true }, { propertyName: "leading", first: true, predicate: UiFieldLeading, descendants: true, isSignal: true }, { propertyName: "trailing", first: true, predicate: UiFieldTrailing, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="group flex flex-col gap-1.5">
       <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- htmlFor is wired at runtime, once the projected control's id is known -->
-      <label [class]="labelClasses()">{{ label() }}</label>
+      <label [class]="labelClasses()"
+        >{{ label() }}
+        @if (optional()) {
+          {{ ' ' }}<span class="font-normal text-(--subtle-foreground)">{{ optional() }}</span>
+        }
+      </label>
 
       <div [class]="rowClasses()">
         <ng-content select="[uiFieldLeading]" />
         <ng-content />
-
+        <ng-content select="[uiFieldTrailing]" />
         @if (unit()) {
           <span class="text-label pointer-events-none absolute right-3 text-(--subtle-foreground)">{{ unit() }}</span>
         }
@@ -1542,32 +2120,117 @@ class UiField {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiField, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ui-field',
+                    selector: 'ui-field',
+                    template: `
+    <div class="group flex flex-col gap-1.5">
+      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- htmlFor is wired at runtime, once the projected control's id is known -->
+      <label [class]="labelClasses()"
+        >{{ label() }}
+        @if (optional()) {
+          {{ ' ' }}<span class="font-normal text-(--subtle-foreground)">{{ optional() }}</span>
+        }
+      </label>
+
+      <div [class]="rowClasses()">
+        <ng-content select="[uiFieldLeading]" />
+        <ng-content />
+        <ng-content select="[uiFieldTrailing]" />
+        @if (unit()) {
+          <span class="text-label pointer-events-none absolute right-3 text-(--subtle-foreground)">{{ unit() }}</span>
+        }
+      </div>
+
+      @if (hint()) {
+        <span class="text-label text-(--muted-foreground)" [id]="hintId">{{ hint() }}</span>
+      }
+
+      @if (message()) {
+        <p class="text-label font-medium text-(--negative)" role="alert" [id]="errorId">{{ message() }}</p>
+      }
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], labelHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelHidden", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UI_CONTROL), { isSignal: true }] }], leading: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UiFieldLeading), { isSignal: true }] }], trailing: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UiFieldTrailing), { isSignal: true }] }] } });
+
+const CHIP_CLASSES = 'flex-none flex h-11 items-center rounded-pill border-0 bg-transparent p-0 font-[inherit] cursor-pointer transition-transform duration-(--duration-press) ease-out active:scale-(--press-scale) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) pointer-fine:h-8 pointer-fine:focus-visible:outline-offset-2';
+const PILL_CLASSES = 'flex h-[34px] items-center gap-1.5 rounded-pill px-3.5 text-label font-medium whitespace-nowrap pointer-fine:h-8 pointer-fine:px-3 pointer-fine:group-hover/chip:shadow-[inset_0_0_0_1px_var(--muted-foreground)]';
+const SELECTED_PILL_CLASSES = 'bg-(--primary) text-(--primary-foreground)';
+const UNSELECTED_PILL_CLASSES = 'bg-(--card) text-(--foreground) shadow-[inset_0_0_0_1px_var(--border)]';
+/**
+ * A row of single-choice filter pills, each with an optional count, that narrows a list in place:
+ * an asset class, a status. On touch it scrolls on one line, bleeding to the screen edges; with a
+ * fine pointer it wraps.
+ *
+ * @example
+ * <ui-filter-chips ariaLabel="Filter by class" [options]="classes()" [(value)]="selectedClass" />
+ */
+class UiFilterChips {
+    options = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    ariaLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    chipClasses = CHIP_CLASSES;
+    pillClasses(optionValue) {
+        return `${PILL_CLASSES} ${optionValue === this.value() ? SELECTED_PILL_CLASSES : UNSELECTED_PILL_CLASSES}`;
+    }
+    countClasses(optionValue) {
+        return optionValue === this.value() ? 'text-(--primary-foreground)' : 'text-(--subtle-foreground)';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFilterChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiFilterChips, isStandalone: true, selector: "ui-filter-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "flex gap-2 overflow-x-auto [scrollbar-width:none] -mt-1 -mx-(--gutter) px-(--gutter) pointer-fine:m-0 pointer-fine:flex-wrap pointer-fine:overflow-visible pointer-fine:p-0" }, ngImport: i0, template: `
+    @for (option of options(); track option.value) {
+      <button
+        class="group/chip"
+        type="button"
+        [attr.aria-pressed]="option.value === value()"
+        [class]="chipClasses"
+        (click)="value.set(option.value)"
+      >
+        <span data-chip [class]="pillClasses(option.value)"
+          >{{ option.label }}
+          @if (option.count !== undefined && option.count !== null) {
+            &ngsp;<span class="[font-variant-numeric:var(--numeric)]" data-count [class]="countClasses(option.value)">{{
+              option.count
+            }}</span>
+          }
+        </span>
+      </button>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFilterChips, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-filter-chips',
                     template: `
-    <div class="group flex flex-col gap-1.5">
-      <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- htmlFor is wired at runtime, once the projected control's id is known -->
-      <label [class]="labelClasses()">{{ label() }}</label>
-
-      <div [class]="rowClasses()">
-        <ng-content select="[uiFieldLeading]" />
-        <ng-content />
-
-        @if (unit()) {
-          <span class="text-label pointer-events-none absolute right-3 text-(--subtle-foreground)">{{ unit() }}</span>
-        }
-      </div>
-
-      @if (hint()) {
-        <span class="text-label text-(--muted-foreground)" [id]="hintId">{{ hint() }}</span>
-      }
-
-      @if (message()) {
-        <p class="text-label font-medium text-(--negative)" role="alert" [id]="errorId">{{ message() }}</p>
-      }
-    </div>
+    @for (option of options(); track option.value) {
+      <button
+        class="group/chip"
+        type="button"
+        [attr.aria-pressed]="option.value === value()"
+        [class]="chipClasses"
+        (click)="value.set(option.value)"
+      >
+        <span data-chip [class]="pillClasses(option.value)"
+          >{{ option.label }}
+          @if (option.count !== undefined && option.count !== null) {
+            &ngsp;<span class="[font-variant-numeric:var(--numeric)]" data-count [class]="countClasses(option.value)">{{
+              option.count
+            }}</span>
+          }
+        </span>
+      </button>
+    }
   `,
+                    host: {
+                        role: 'group',
+                        class: 'flex gap-2 overflow-x-auto [scrollbar-width:none] -mt-1 -mx-(--gutter) px-(--gutter) pointer-fine:m-0 pointer-fine:flex-wrap pointer-fine:overflow-visible pointer-fine:p-0',
+                        '[attr.aria-label]': 'ariaLabel()',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], labelHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelHidden", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UI_CONTROL), { isSignal: true }] }], leading: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UiFieldLeading), { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }] } });
 
 const axisTicks = (points, maxTicks = 5) => {
     if (points.length <= maxTicks) {
@@ -1824,6 +2487,8 @@ class UiLineChart {
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     valueFormat = input(identityValue, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    tooltipFormat = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipFormat" }] : /* istanbul ignore next */ []));
     deltaFormat = input(identityDelta, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "deltaFormat" }] : /* istanbul ignore next */ []));
     timeFormat = input(identityTime, /* @ts-ignore */
@@ -1986,7 +2651,7 @@ class UiLineChart {
         this.activeIndex.set(navigation.index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiLineChart, isStandalone: true, selector: "ui-line-chart", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, deltaFormat: { classPropertyName: "deltaFormat", publicName: "deltaFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, valueColumnLabel: { classPropertyName: "valueColumnLabel", publicName: "valueColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, sparkline: { classPropertyName: "sparkline", publicName: "sparkline", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelta: { classPropertyName: "tooltipDelta", publicName: "tooltipDelta", isSignal: true, isRequired: false, transformFunction: null }, axisGap: { classPropertyName: "axisGap", publicName: "axisGap", isSignal: true, isRequired: false, transformFunction: null }, axisTicks: { classPropertyName: "axisTicks", publicName: "axisTicks", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, viewQueries: [{ propertyName: "svgRef", first: true, predicate: ["svgRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiLineChart, isStandalone: true, selector: "ui-line-chart", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormat: { classPropertyName: "tooltipFormat", publicName: "tooltipFormat", isSignal: true, isRequired: false, transformFunction: null }, deltaFormat: { classPropertyName: "deltaFormat", publicName: "deltaFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, valueColumnLabel: { classPropertyName: "valueColumnLabel", publicName: "valueColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, sparkline: { classPropertyName: "sparkline", publicName: "sparkline", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelta: { classPropertyName: "tooltipDelta", publicName: "tooltipDelta", isSignal: true, isRequired: false, transformFunction: null }, axisGap: { classPropertyName: "axisGap", publicName: "axisGap", isSignal: true, isRequired: false, transformFunction: null }, axisTicks: { classPropertyName: "axisTicks", publicName: "axisTicks", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, viewQueries: [{ propertyName: "svgRef", first: true, predicate: ["svgRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="relative h-full">
       <svg
         #svgRef
@@ -2097,36 +2762,35 @@ class UiLineChart {
           [class]="tooltipClasses().box"
           [style]="tooltipStyle(point)"
         >
-          <p class="font-medium text-(--foreground)" [class]="tooltipClasses().value">{{ valueFormat()(point.v) }}</p>
+          <p class="font-medium text-(--foreground)" [class]="tooltipClasses().value">
+            {{ tooltipFormat()?.(point) ?? valueFormat()(point.v) }}
+          </p>
           @if (tooltipDelta()) {
             <p data-chart-delta [class]="deltaClasses(point)">{{ deltaFormat()(deltaFor(point)) }}</p>
           }
           <p class="text-caption text-(--subtle-foreground)" data-chart-date>{{ timeFormat()(point.t) }}</p>
         </div>
       }
-
       @if (points().length > 0) {
-        <table class="sr-only">
-          <caption>
-            {{
-              label()
-            }}
-          </caption>
-          <thead>
-            <tr>
-              <th scope="col">{{ timeColumnLabel() }}</th>
-              <th scope="col">{{ valueColumnLabel() }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (point of points(); track point.t) {
+        <div class="sr-only">
+          <table>
+            <caption [textContent]="label()"></caption>
+            <thead>
               <tr>
-                <td>{{ timeFormat()(point.t) }}</td>
-                <td>{{ valueFormat()(point.v) }}</td>
+                <th scope="col">{{ timeColumnLabel() }}</th>
+                <th scope="col">{{ valueColumnLabel() }}</th>
               </tr>
-            }
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              @for (point of points(); track point.t) {
+                <tr>
+                  <td>{{ timeFormat()(point.t) }}</td>
+                  <td>{{ valueFormat()(point.v) }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
       }
     </div>
   `, isInline: true });
@@ -2246,36 +2910,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
           [class]="tooltipClasses().box"
           [style]="tooltipStyle(point)"
         >
-          <p class="font-medium text-(--foreground)" [class]="tooltipClasses().value">{{ valueFormat()(point.v) }}</p>
+          <p class="font-medium text-(--foreground)" [class]="tooltipClasses().value">
+            {{ tooltipFormat()?.(point) ?? valueFormat()(point.v) }}
+          </p>
           @if (tooltipDelta()) {
             <p data-chart-delta [class]="deltaClasses(point)">{{ deltaFormat()(deltaFor(point)) }}</p>
           }
           <p class="text-caption text-(--subtle-foreground)" data-chart-date>{{ timeFormat()(point.t) }}</p>
         </div>
       }
-
       @if (points().length > 0) {
-        <table class="sr-only">
-          <caption>
-            {{
-              label()
-            }}
-          </caption>
-          <thead>
-            <tr>
-              <th scope="col">{{ timeColumnLabel() }}</th>
-              <th scope="col">{{ valueColumnLabel() }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (point of points(); track point.t) {
+        <div class="sr-only">
+          <table>
+            <caption [textContent]="label()"></caption>
+            <thead>
               <tr>
-                <td>{{ timeFormat()(point.t) }}</td>
-                <td>{{ valueFormat()(point.v) }}</td>
+                <th scope="col">{{ timeColumnLabel() }}</th>
+                <th scope="col">{{ valueColumnLabel() }}</th>
               </tr>
-            }
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              @for (point of points(); track point.t) {
+                <tr>
+                  <td>{{ timeFormat()(point.t) }}</td>
+                  <td>{{ valueFormat()(point.v) }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
       }
     </div>
   `,
@@ -2283,11 +2946,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         class: 'block h-full',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], deltaFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaFormat", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], timeColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeColumnLabel", required: false }] }], valueColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColumnLabel", required: false }] }], sparkline: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkline", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelta", required: false }] }], axisGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisGap", required: false }] }], axisTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisTicks", required: false }] }], svgRef: [{ type: i0.ViewChild, args: ['svgRef', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], tooltipFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFormat", required: false }] }], deltaFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaFormat", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], timeColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeColumnLabel", required: false }] }], valueColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColumnLabel", required: false }] }], sparkline: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkline", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelta", required: false }] }], axisGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisGap", required: false }] }], axisTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisTicks", required: false }] }], svgRef: [{ type: i0.ViewChild, args: ['svgRef', { isSignal: true }] }] } });
 
 const MENU_CLASSES = 'm-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16),inset_0_0_0_1px_var(--border)] 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-3 pointer-fine:gap-2.5 min-h-11 pointer-fine:min-h-9 px-3 pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-4px)] text-body pointer-fine:text-label hover:bg-(--glow) focus-visible:bg-(--glow) outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring)';
-const nextId = (() => {
+const SHEET_CLASSES = 'max-lg:fixed max-lg:inset-x-4 max-lg:top-auto max-lg:w-auto max-lg:bottom-[calc(76px+env(safe-area-inset-bottom))] max-lg:min-w-0 max-lg:p-1.5 max-lg:bg-(--card) max-lg:shadow-[0_12px_32px_rgb(0_0_0/0.2),inset_0_0_0_1px_var(--border)] max-lg:backdrop:bg-[rgb(0_0_0/0.36)] max-lg:transition-[opacity,translate,overlay,display] max-lg:scale-100 max-lg:translate-y-4 max-lg:open:translate-y-0 max-lg:starting:open:scale-100 max-lg:starting:open:translate-y-4';
+const SHEET_ITEM_CLASSES = 'flex w-full items-center gap-3 lg:pointer-fine:gap-2.5 min-h-12 lg:min-h-11 lg:pointer-fine:min-h-9 px-3 lg:pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-6px)] lg:rounded-[calc(var(--radius-container)-4px)] text-body lg:pointer-fine:text-label hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-5 [:where(&>svg)]:flex-none lg:[:where(&>svg)]:size-[18px] lg:pointer-fine:[:where(&>svg)]:size-4';
+const ITEM_CLASSES = 'flex w-full items-center gap-3 pointer-fine:gap-2.5 min-h-11 pointer-fine:min-h-9 px-3 pointer-fine:px-2.5 rounded-[calc(var(--radius-container)-4px)] text-body pointer-fine:text-label hover:bg-(--glow) focus-visible:bg-(--glow) active:bg-(--soft) outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) [:where(&>svg)]:size-[18px] [:where(&>svg)]:flex-none pointer-fine:[:where(&>svg)]:size-4';
+const nextId$1 = (() => {
     let count = 0;
     return () => `ui-menu-${++count}`;
 })();
@@ -2301,7 +2966,7 @@ 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 */
+    classes = computed(() => `${this.#menu.sheet() ? SHEET_ITEM_CLASSES : ITEM_CLASSES}${this.destructive() ? ' text-(--negative)' : ''}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     focus() {
         this.#host.focus();
@@ -2328,7 +2993,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { destructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "destructive", required: false }] }] } });
 /**
- * Secondary actions menu, opened from its trigger through the native Popover API.
+ * Secondary actions menu, opened from its trigger through the native Popover API. With `sheet`, below
+ * 64rem it opens as a bottom action sheet above the tab bar instead of beside its trigger, and
+ * `heading` names what the actions apply to. `width` fixes the outer popover width in pixels (the sheet
+ * always spans the screen below 64rem); without it the menu fits its content.
  *
  * @example
  * <button ui-button size="icon" aria-label="More" [uiMenuTrigger]="menu">...</button>
@@ -2340,10 +3008,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 class UiMenu {
     label = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    menuId = nextId();
+    sheet = input(false, { ...(ngDevMode ? { debugName: "sheet" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    heading = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "heading" }] : /* istanbul ignore next */ []));
+    width = input(undefined, { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    menuId = nextId$1();
     isOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-    classes = MENU_CLASSES;
+    hasWidth = computed(() => Number.isFinite(this.width()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasWidth" }] : /* istanbul ignore next */ []));
+    widthVar = computed(() => (this.hasWidth() ? `${this.width()}px` : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthVar" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const width = !this.hasWidth() ? '' : this.sheet() ? ' lg:w-(--ui-menu-width)' : ' w-(--ui-menu-width)';
+        return `${MENU_CLASSES}${this.sheet() ? ` ${SHEET_CLASSES}` : ''}${width}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     items = contentChildren(UiMenuItem, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     #host = inject(ElementRef).nativeElement;
@@ -2354,7 +3034,14 @@ class UiMenu {
         if (typeof this.#host.showPopover === 'function') {
             this.#host.showPopover();
         }
-        this.#position(trigger);
+        if (this.#isSheet()) {
+            this.#host.style.position = '';
+            this.#host.style.top = '';
+            this.#host.style.left = '';
+        }
+        else {
+            this.#position(trigger);
+        }
         this.items()[0]?.focus();
     }
     close() {
@@ -2404,6 +3091,9 @@ class UiMenu {
         event.preventDefault();
         items[nextIndex]?.focus();
     }
+    #isSheet() {
+        return this.sheet() && typeof window.matchMedia === 'function' && !window.matchMedia('(min-width: 64rem)').matches;
+    }
     #position(trigger) {
         const margin = 8;
         const triggerRect = trigger.getBoundingClientRect();
@@ -2417,24 +3107,39 @@ class UiMenu {
         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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiMenu, isStandalone: true, selector: "ui-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sheet: { classPropertyName: "sheet", publicName: "sheet", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menu", "popover": "auto" }, listeners: { "toggle": "onToggle($event)", "keydown": "onKeydown($event)" }, properties: { "id": "menuId", "style.--ui-menu-width": "widthVar()", "class": "classes()", "attr.aria-label": "label()" } }, queries: [{ propertyName: "items", predicate: UiMenuItem, isSignal: true }], ngImport: i0, template: `
+    @if (sheet() && heading()) {
+      <div aria-hidden="true" class="text-label px-3 pt-2 pb-1.5 leading-[17px] text-(--muted-foreground) lg:hidden">
+        {{ heading() }}
+      </div>
+    }
+    <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 />',
+                    template: `
+    @if (sheet() && heading()) {
+      <div aria-hidden="true" class="text-label px-3 pt-2 pb-1.5 leading-[17px] text-(--muted-foreground) lg:hidden">
+        {{ heading() }}
+      </div>
+    }
+    <ng-content />
+  `,
                     host: {
                         role: 'menu',
                         popover: 'auto',
                         '[id]': 'menuId',
-                        '[class]': 'classes',
+                        '[style.--ui-menu-width]': 'widthVar()',
+                        '[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 }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], sheet: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheet", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], 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.
@@ -2471,6 +3176,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { uiMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiMenuTrigger", required: true }] }] } });
 
+/** Track thicknesses. `MeterSize` is derived from this tuple. */
+const METER_SIZES = ['md', 'sm'];
+const TRACK_CLASSES = {
+    md: 'h-1.5',
+    sm: 'h-1',
+};
 /** 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 = {
@@ -2497,20 +3208,25 @@ class UiMeter {
     ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
     tone = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    trackClasses = computed(() => TRACK_CLASSES[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
     percent = computed(() => Math.min(100, Math.max(0, this.value() * 100)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
     fillClasses = computed(() => `h-full rounded-pill ${TONE_CLASSES[this.tone()]}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fillClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiMeter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiMeter, isStandalone: true, selector: "ui-meter", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiMeter, isStandalone: true, selector: "ui-meter", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div
-      class="rounded-pill h-1.5 w-full overflow-hidden bg-(--muted)"
+      class="rounded-pill w-full overflow-hidden bg-(--muted)"
       role="meter"
       [attr.aria-label]="label()"
       [attr.aria-valuemax]="1"
       [attr.aria-valuemin]="0"
       [attr.aria-valuenow]="value()"
       [attr.aria-valuetext]="valueText()"
+      [class]="trackClasses()"
     >
       <div data-testid="meter-fill" [class]="fillClasses()" [style.width.%]="percent()"></div>
     </div>
@@ -2522,23 +3238,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: 'ui-meter',
                     template: `
     <div
-      class="rounded-pill h-1.5 w-full overflow-hidden bg-(--muted)"
+      class="rounded-pill w-full overflow-hidden bg-(--muted)"
       role="meter"
       [attr.aria-label]="label()"
       [attr.aria-valuemax]="1"
       [attr.aria-valuemin]="0"
       [attr.aria-valuenow]="value()"
       [attr.aria-valuetext]="valueText()"
+      [class]="trackClasses()"
     >
       <div data-testid="meter-fill" [class]="fillClasses()" [style.width.%]="percent()"></div>
     </div>
   `,
                 }]
-        }], 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 }] }] } });
+        }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
-const BASE_CLASSES$1 = 'flex items-center gap-3 h-10 px-3 rounded-control text-label font-medium 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 BASE_CLASSES$1 = 'flex items-center gap-3 h-10 px-3 rounded-control text-label leading-normal font-medium 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)';
-const IDLE_CLASSES = 'text-(--muted-foreground)';
+const IDLE_CLASSES = 'text-(--muted-foreground) active:bg-(--soft)';
 /**
  * One destination of the sidebar navigation (Portfolio, Holdings, Allocation, Accounts).
  *
@@ -2567,13 +3284,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
 
-const ROW_SIZES = ['md', 'lg', 'xl'];
+const ROW_SIZES = ['md', 'lg', 'xl', 'card', 'dense'];
 const ROW_PADDINGS = ['md', 'sm', 'none'];
-const SIZE_CLASSES = {
-    md: 'min-h-14 gap-2.5',
-    lg: 'min-h-15 gap-2.5',
-    xl: 'min-h-18 pointer-fine:min-h-17 gap-3',
+const ROW_GAPS = ['default', 'sm'];
+const SIZE_CLASSES$1 = {
+    md: 'min-h-14',
+    lg: 'min-h-15',
+    xl: 'min-h-18 pointer-fine:min-h-17',
+    card: 'min-h-17',
+    dense: 'min-h-14 lg:min-h-12',
 };
+const SIZE_GAPS = { md: 'gap-2.5', lg: 'gap-2.5', xl: 'gap-3', card: 'gap-2', dense: 'gap-3' };
 const PADDING_CLASSES = { md: 'px-2.5', sm: 'px-2', none: 'px-0' };
 const BASE_CLASSES = 'flex w-full items-center 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)';
@@ -2591,10 +3312,12 @@ class UiRow {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     padding = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
-    classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES[this.size()]} ${PADDING_CLASSES[this.padding()]}${this.selected() ? ` ${SELECTED_CLASSES$1}` : ''}`, /* @ts-ignore */
+    gap = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `${BASE_CLASSES} ${SIZE_CLASSES$1[this.size()]} ${this.gap() === 'sm' ? 'gap-2' : SIZE_GAPS[this.size()]} ${PADDING_CLASSES[this.padding()]}${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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-current": "selected() ? 'true' : null" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", 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,
@@ -2606,9 +3329,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.aria-current]': "selected() ? 'true' : null",
                     },
                 }]
-        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
+        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
+/**
+ * Lays out a `ui-row` with a trailing action beside it, such as a "more" icon button: the row takes
+ * the room the action leaves and the action keeps its own size.
+ *
+ * @example
+ * <div uiRowItem>
+ *   <a ui-row size="xl" padding="sm" routerLink="/accounts/1">...</a>
+ *   <button ui-button variant="quiet" size="icon-sm" aria-label="Account actions">...</button>
+ * </div>
+ */
+class UiRowItem {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiRowItem, isStandalone: true, selector: "[uiRowItem]", host: { classAttribute: "flex items-center gap-1 [&>[ui-row]]:w-auto [&>[ui-row]]:min-w-0 [&>[ui-row]]:flex-1 [&>:not([ui-row])]:flex-none" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiRowItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiRowItem]',
+                    host: {
+                        class: 'flex items-center gap-1 [&>[ui-row]]:w-auto [&>[ui-row]]:min-w-0 [&>[ui-row]]:flex-1 [&>:not([ui-row])]:flex-none',
+                    },
+                }]
+        }] });
+/**
+ * Non-interactive row of a list, separated from the next by a hairline: a passkey with its delete
+ * button, a device, a setting. It is a 72px row (68px from 64rem) with a 12px gap; put it on an
+ * `li` or a `div`. Use `ui-row` instead when the whole row is a link or an action.
+ *
+ * @example
+ * <ul>
+ *   <li uiListRow>
+ *     <span class="flex-1">MacBook Air</span>
+ *     <button ui-button variant="quiet-destructive" size="icon-sm" aria-label="Delete MacBook Air">...</button>
+ *   </li>
+ * </ul>
+ */
+class UiListRow {
+    ruled = input(true, { ...(ngDevMode ? { debugName: "ruled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    classes = computed(() => `flex min-h-18 items-center gap-3 py-1.5 lg:min-h-17${this.ruled() ? ' shadow-[inset_0_-1px_0_var(--hairline)]' : ''}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiListRow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiListRow, isStandalone: true, selector: "[uiListRow]", inputs: { ruled: { classPropertyName: "ruled", publicName: "ruled", 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: UiListRow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiListRow]',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { ruled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ruled", required: false }] }] } });
 
-const OPTION_CLASSES = "relative z-10 h-10 pointer-fine:h-8 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) active:scale-(--press-scale)";
+const nextId = (() => {
+    let count = 0;
+    return () => `ui-segmented-${++count}`;
+})();
+const OPTION_CLASSES = "relative z-10 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) active:scale-(--press-scale)";
+const SEGMENTED_SIZES = ['md', 'sm'];
+const SIZE_CLASSES = {
+    md: 'h-10 pointer-fine:h-8',
+    sm: 'h-10 pointer-fine:h-[30px]',
+};
 const SELECTED_CLASSES = 'text-(--foreground)';
 const UNSELECTED_CLASSES = 'text-(--muted-foreground) hover:text-(--foreground)';
 /**
@@ -2623,8 +3405,12 @@ class UiSegmented {
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     label = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    showLabel = input(false, { ...(ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    labelId = nextId();
     value = model.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     radios = viewChildren('radio', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "radios" }] : /* istanbul ignore next */ []));
     thumbIndex = computed(() => {
@@ -2633,7 +3419,7 @@ class UiSegmented {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "thumbIndex" }] : /* istanbul ignore next */ []));
     optionClasses(optionValue) {
-        return `${OPTION_CLASSES} ${optionValue === this.value() ? SELECTED_CLASSES : UNSELECTED_CLASSES}`;
+        return `${OPTION_CLASSES} ${SIZE_CLASSES[this.size()]} ${optionValue === this.value() ? SELECTED_CLASSES : UNSELECTED_CLASSES}`;
     }
     tabIndexFor(optionValue) {
         const opts = this.options();
@@ -2657,37 +3443,45 @@ class UiSegmented {
         this.radios()[nextIndex]?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiSegmented, isStandalone: true, selector: "ui-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "radios", predicate: ["radio"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      class="rounded-control relative grid bg-(--muted) p-0.5"
-      role="radiogroup"
-      [attr.aria-label]="label()"
-      [style.grid-template-columns]="'repeat(' + options().length + ', 1fr)'"
-    >
-      @if (thumbIndex(); as index) {
-        <span
-          aria-hidden="true"
-          class="absolute top-0.5 bottom-0.5 left-0.5 rounded-[calc(var(--radius-control)-2px)] bg-(--card) shadow-[0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_var(--border)] transition-transform duration-(--duration-fast) ease-out"
-          data-thumb
-          [style.transform]="'translateX(' + (index - 1) * 100 + '%)'"
-          [style.width]="'calc((100% - 4px) / ' + options().length + ')'"
-        ></span>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiSegmented, isStandalone: true, selector: "ui-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "radios", predicate: ["radio"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div [class]="showLabel() ? 'flex flex-col gap-1.5' : ''">
+      @if (showLabel()) {
+        <span class="text-label leading-[17px] font-medium text-(--muted-foreground)" [id]="labelId">{{
+          label()
+        }}</span>
       }
+      <div
+        class="rounded-control relative grid bg-(--muted) p-0.5"
+        role="radiogroup"
+        [attr.aria-label]="showLabel() ? null : label()"
+        [attr.aria-labelledby]="showLabel() ? labelId : null"
+        [style.grid-template-columns]="'repeat(' + options().length + ', 1fr)'"
+      >
+        @if (thumbIndex(); as index) {
+          <span
+            aria-hidden="true"
+            class="absolute top-0.5 bottom-0.5 left-0.5 rounded-[calc(var(--radius-control)-2px)] bg-(--card) shadow-[0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_var(--border)] transition-transform duration-(--duration-fast) ease-out"
+            data-thumb
+            [style.transform]="'translateX(' + (index - 1) * 100 + '%)'"
+            [style.width]="'calc((100% - 4px) / ' + options().length + ')'"
+          ></span>
+        }
 
-      @for (option of options(); track option.value) {
-        <button
-          #radio
-          role="radio"
-          type="button"
-          [attr.aria-checked]="option.value === value()"
-          [attr.tabindex]="tabIndexFor(option.value)"
-          [class]="optionClasses(option.value)"
-          (click)="select(option.value)"
-          (keydown)="onKeydown($event)"
-        >
-          {{ option.label }}
-        </button>
-      }
+        @for (option of options(); track option.value) {
+          <button
+            #radio
+            role="radio"
+            type="button"
+            [attr.aria-checked]="option.value === value()"
+            [attr.tabindex]="tabIndexFor(option.value)"
+            [class]="optionClasses(option.value)"
+            (click)="select(option.value)"
+            (keydown)="onKeydown($event)"
+          >
+            {{ option.label }}
+          </button>
+        }
+      </div>
     </div>
   `, isInline: true });
 }
@@ -2696,40 +3490,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             args: [{
                     selector: 'ui-segmented',
                     template: `
-    <div
-      class="rounded-control relative grid bg-(--muted) p-0.5"
-      role="radiogroup"
-      [attr.aria-label]="label()"
-      [style.grid-template-columns]="'repeat(' + options().length + ', 1fr)'"
-    >
-      @if (thumbIndex(); as index) {
-        <span
-          aria-hidden="true"
-          class="absolute top-0.5 bottom-0.5 left-0.5 rounded-[calc(var(--radius-control)-2px)] bg-(--card) shadow-[0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_var(--border)] transition-transform duration-(--duration-fast) ease-out"
-          data-thumb
-          [style.transform]="'translateX(' + (index - 1) * 100 + '%)'"
-          [style.width]="'calc((100% - 4px) / ' + options().length + ')'"
-        ></span>
+    <div [class]="showLabel() ? 'flex flex-col gap-1.5' : ''">
+      @if (showLabel()) {
+        <span class="text-label leading-[17px] font-medium text-(--muted-foreground)" [id]="labelId">{{
+          label()
+        }}</span>
       }
+      <div
+        class="rounded-control relative grid bg-(--muted) p-0.5"
+        role="radiogroup"
+        [attr.aria-label]="showLabel() ? null : label()"
+        [attr.aria-labelledby]="showLabel() ? labelId : null"
+        [style.grid-template-columns]="'repeat(' + options().length + ', 1fr)'"
+      >
+        @if (thumbIndex(); as index) {
+          <span
+            aria-hidden="true"
+            class="absolute top-0.5 bottom-0.5 left-0.5 rounded-[calc(var(--radius-control)-2px)] bg-(--card) shadow-[0_1px_2px_rgb(0_0_0/0.08),inset_0_0_0_1px_var(--border)] transition-transform duration-(--duration-fast) ease-out"
+            data-thumb
+            [style.transform]="'translateX(' + (index - 1) * 100 + '%)'"
+            [style.width]="'calc((100% - 4px) / ' + options().length + ')'"
+          ></span>
+        }
 
-      @for (option of options(); track option.value) {
-        <button
-          #radio
-          role="radio"
-          type="button"
-          [attr.aria-checked]="option.value === value()"
-          [attr.tabindex]="tabIndexFor(option.value)"
-          [class]="optionClasses(option.value)"
-          (click)="select(option.value)"
-          (keydown)="onKeydown($event)"
-        >
-          {{ option.label }}
-        </button>
-      }
+        @for (option of options(); track option.value) {
+          <button
+            #radio
+            role="radio"
+            type="button"
+            [attr.aria-checked]="option.value === value()"
+            [attr.tabindex]="tabIndexFor(option.value)"
+            [class]="optionClasses(option.value)"
+            (click)="select(option.value)"
+            (keydown)="onKeydown($event)"
+          >
+            {{ option.label }}
+          </button>
+        }
+      </div>
     </div>
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], radios: [{ type: i0.ViewChildren, args: ['radio', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radios: [{ type: i0.ViewChildren, args: ['radio', { isSignal: true }] }] } });
 
 const SELECT_CLASSES = 'cursor-pointer appearance-none pr-10 bg-(image:--chevron-down) bg-no-repeat bg-[position:right_0.75rem_center] bg-[size:1.125rem]';
 // Spelled out prefix included: Tailwind scans for literal strings, so a prefix applied in code
@@ -2790,7 +3592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }] } });
 
 /** Available skeleton shapes. `SkeletonShape` is derived from this tuple. */
-const SKELETON_SHAPES = ['text', 'figure', 'row', 'chart', 'ring'];
+const SKELETON_SHAPES = ['text', 'figure', 'row', 'chart', 'ring', 'dot'];
 const LAST_LINE_WIDTH = '62%';
 const PULSE_ANIMATION = 'cairn-pulse var(--pulse-duration) var(--ease-out) infinite alternate';
 const BAR_CLASSES = 'block rounded-control bg-(--muted)';
@@ -2818,7 +3620,7 @@ class UiSkeleton {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiSkeleton, isStandalone: true, selector: "ui-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "flex flex-col gap-2" }, ngImport: i0, template: "\n    @switch (shape()) {\n      @case ('figure') {\n        <span class=\"block rounded-control bg-(--muted) h-10 w-65\" [style.animation]=\"animation\"></span>\n      }\n      @case ('row') {\n        <span class=\"flex h-14 items-center justify-between gap-4\">\n          <span class=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n            <span class=\"block rounded-control bg-(--muted) h-4 w-3/5\" [style.animation]=\"animation\"></span>\n            <span class=\"block rounded-control bg-(--muted) h-3 w-20\" [style.animation]=\"animation\"></span>\n          </span>\n          <span class=\"block rounded-control bg-(--muted) h-4 w-[90px] flex-none\" [style.animation]=\"animation\"></span>\n        </span>\n      }\n      @case ('chart') {\n        <span class=\"rounded-control min-h-50 w-full flex-1 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('ring') {\n        <span\n          class=\"rounded-pill shadow-[inset_0_0_0_30px_var(--muted)]\"\n          [style.animation]=\"animation\"\n          [style.height.px]=\"size()\"\n          [style.width.px]=\"size()\"\n        ></span>\n      }\n      @default {\n        @for (line of bars(); track $index) {\n          <span\n            class=\"block rounded-control bg-(--muted)\"\n            [style.animation]=\"animation\"\n            [style.height.px]=\"height()\"\n            [style.width]=\"line\"\n          ></span>\n        }\n      }\n    }\n  ", isInline: true, styles: ["@keyframes cairn-pulse{0%{opacity:1}to{opacity:.45}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiSkeleton, isStandalone: true, selector: "ui-skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, classAttribute: "flex flex-col gap-2" }, ngImport: i0, template: "\n    @switch (shape()) {\n      @case ('figure') {\n        <span class=\"block rounded-control bg-(--muted) h-10 w-65\" [style.animation]=\"animation\"></span>\n      }\n      @case ('row') {\n        <span class=\"flex h-14 items-center justify-between gap-4\">\n          <span class=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n            <span class=\"block rounded-control bg-(--muted) h-4 w-3/5\" [style.animation]=\"animation\"></span>\n            <span class=\"block rounded-control bg-(--muted) h-3 w-20\" [style.animation]=\"animation\"></span>\n          </span>\n          <span class=\"block rounded-control bg-(--muted) h-4 w-[90px] flex-none\" [style.animation]=\"animation\"></span>\n        </span>\n      }\n      @case ('chart') {\n        <span class=\"rounded-control min-h-50 w-full flex-1 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('dot') {\n        <span class=\"rounded-pill size-3 bg-(--muted)\" [style.animation]=\"animation\"></span>\n      }\n      @case ('ring') {\n        <span\n          class=\"rounded-pill shadow-[inset_0_0_0_30px_var(--muted)]\"\n          [style.animation]=\"animation\"\n          [style.height.px]=\"size()\"\n          [style.width.px]=\"size()\"\n        ></span>\n      }\n      @default {\n        @for (line of bars(); track $index) {\n          <span\n            class=\"block rounded-control bg-(--muted)\"\n            [style.animation]=\"animation\"\n            [style.height.px]=\"height()\"\n            [style.width]=\"line\"\n          ></span>\n        }\n      }\n    }\n  ", isInline: true, styles: ["@keyframes cairn-pulse{0%{opacity:1}to{opacity:.45}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiSkeleton, decorators: [{
             type: Component,
@@ -2839,6 +3641,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       @case ('chart') {
         <span class="rounded-control min-h-50 w-full flex-1 bg-(--muted)" [style.animation]="animation"></span>
       }
+      @case ('dot') {
+        <span class="rounded-pill size-3 bg-(--muted)" [style.animation]="animation"></span>
+      }
       @case ('ring') {
         <span
           class="rounded-pill shadow-[inset_0_0_0_30px_var(--muted)]"
@@ -2975,6 +3780,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }] });
 
+const TAB_CLASSES = 'flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none 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.
+ *
+ * @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 : 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 }] }] } });
+
 /** Breakpoints a secondary column can be held back until. */
 const CELL_BREAKPOINTS = ['md', 'lg'];
 /** Body row heights. */
@@ -3168,7 +4029,9 @@ class UiGroupCell {
       [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">{{ name() }}</h2>
+        <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>
         }
@@ -3190,7 +4053,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       [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">{{ name() }}</h2>
+        <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>
         }
@@ -3277,62 +4142,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { narrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "narrow", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
 
-const TAB_CLASSES = 'flex h-[52px] flex-col items-center justify-center gap-[3px] touch-manipulation select-none 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.
- *
- * @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 : 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 }] }] } });
-
 /*
  * Public API surface of the ui library.
  */
@@ -3341,5 +4150,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_STATES, AVATAR_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DIALOG_LAYOUTS, DIALOG_WIDTHS, GROUP_SIZES, METER_TONES, ROW_PADDINGS, ROW_SIZES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiAlert, UiAmount, UiAsync, UiAvatar, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiField, UiFieldLeading, UiGroup, UiGroupCell, UiInput, UiLineChart, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowLink, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
+export { ALERT_VARIANTS, AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_ALIGNS, ASYNC_STATES, ASYNC_VARIANTS, AVATAR_SIZES, BACK_LINK_SIZES, BADGE_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, CONTROL_SURFACES, DELTA_EMPHASES, DELTA_SIZES, DELTA_WEIGHTS, DIALOG_LAYOUTS, DIALOG_WIDTHS, FACT_SIZES, FACT_SUB_TONES, GROUP_SIZES, METER_SIZES, METER_TONES, ROW_GAPS, ROW_PADDINGS, ROW_SIZES, SEGMENTED_SIZES, SKELETON_SHAPES, STAT_SIZES, SUB_TONES, TABLE_ROWS, UI_AMOUNT_MASKED, UiActionBar, UiAlert, UiAmount, UiAsync, UiAvatar, UiAvatarLink, UiBackLink, UiBadge, UiButton, UiCard, UiCellSub, UiChoiceChips, UiDelta, UiDialog, UiDonut, UiExternalLink, UiFact, UiFacts, UiField, UiFieldLeading, UiFieldTrailing, UiFilterChips, UiGroup, UiGroupCell, UiInput, UiLineChart, UiListRow, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiRowAction, UiRowItem, UiRowLink, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
 //# sourceMappingURL=joanroucoux-cairn-ui.mjs.map