@vespera-ui/angular 0.1.0 → 0.3.0

package/dist/fesm2022/vespera-ui-angular.mjs

@@ -0,0 +1,2154 @@
+import * as i0 from '@angular/core';
+import { Input, Component, EventEmitter, Output } from '@angular/core';
+
+class VspButton {
+    variant = 'ghost';
+    size;
+    loading = false;
+    disabled = false;
+    get cls() {
+        return ['btn', `btn-${this.variant}`, this.size === 'sm' ? 'btn-sm' : '']
+            .filter(Boolean)
+            .join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspButton, isStandalone: true, selector: "vsp-button", inputs: { variant: "variant", size: "size", loading: "loading", disabled: "disabled" }, ngImport: i0, template: `<button [class]="cls" [disabled]="disabled || loading">
+    @if (loading) {
+      <span class="ui-spinner" aria-hidden="true"></span>
+    }
+    <ng-content />
+  </button>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-button',
+                    template: `<button [class]="cls" [disabled]="disabled || loading">
+    @if (loading) {
+      <span class="ui-spinner" aria-hidden="true"></span>
+    }
+    <ng-content />
+  </button>`,
+                }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class VspBadge {
+    tone = 'muted';
+    dot = false;
+    get cls() {
+        return `badge badge-${this.tone}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspBadge, isStandalone: true, selector: "vsp-badge", inputs: { tone: "tone", dot: "dot" }, ngImport: i0, template: `<span [class]="cls">
+    @if (dot) {
+      <i></i>
+    }
+    <ng-content />
+  </span>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspBadge, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-badge',
+                    template: `<span [class]="cls">
+    @if (dot) {
+      <i></i>
+    }
+    <ng-content />
+  </span>`,
+                }]
+        }], propDecorators: { tone: [{
+                type: Input
+            }], dot: [{
+                type: Input
+            }] } });
+
+class VspTag {
+    remove = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspTag, isStandalone: true, selector: "vsp-tag", outputs: { remove: "remove" }, ngImport: i0, template: `<span class="ui-tag">
+    <ng-content />
+    <button type="button" aria-label="Remove" (click)="remove.emit()">×</button>
+  </span>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspTag, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-tag',
+                    template: `<span class="ui-tag">
+    <ng-content />
+    <button type="button" aria-label="Remove" (click)="remove.emit()">×</button>
+  </span>`,
+                }]
+        }], propDecorators: { remove: [{
+                type: Output
+            }] } });
+class VspKbd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspKbd, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspKbd, isStandalone: true, selector: "vsp-kbd", ngImport: i0, template: `<kbd class="ui-kbd"><ng-content /></kbd>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspKbd, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-kbd',
+                    template: `<kbd class="ui-kbd"><ng-content /></kbd>`,
+                }]
+        }] });
+class VspDivider {
+    vertical = false;
+    get cls() {
+        return this.vertical ? 'ui-divider v' : 'ui-divider';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspDivider, isStandalone: true, selector: "vsp-divider", inputs: { vertical: "vertical" }, ngImport: i0, template: `<hr [class]="cls" />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspDivider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-divider',
+                    template: `<hr [class]="cls" />`,
+                }]
+        }], propDecorators: { vertical: [{
+                type: Input
+            }] } });
+
+class VspAvatar {
+    name = '';
+    hue = 0;
+    size = 34;
+    get initials() {
+        return this.name
+            .split(' ')
+            .map((s) => s.charAt(0))
+            .slice(0, 2)
+            .join('')
+            .toUpperCase();
+    }
+    get bg() {
+        return `linear-gradient(140deg, oklch(0.62 0.16 ${this.hue}), oklch(0.55 0.17 ${(this.hue + 50) % 360}))`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspAvatar, isStandalone: true, selector: "vsp-avatar", inputs: { name: "name", hue: "hue", size: "size" }, ngImport: i0, template: `<span
+    class="vsp-avatar"
+    [style.width.px]="size"
+    [style.height.px]="size"
+    [style.fontSize.px]="size * 0.38"
+    [style.background]="bg"
+    >{{ initials }}</span
+  >`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspAvatar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-avatar',
+                    template: `<span
+    class="vsp-avatar"
+    [style.width.px]="size"
+    [style.height.px]="size"
+    [style.fontSize.px]="size * 0.38"
+    [style.background]="bg"
+    >{{ initials }}</span
+  >`,
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], hue: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+class VspAvatarGroup {
+    people = [];
+    max = 4;
+    size = 32;
+    get shown() {
+        return this.people.slice(0, this.max);
+    }
+    get extra() {
+        return this.people.length - this.shown.length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspAvatarGroup, isStandalone: true, selector: "vsp-avatar-group", inputs: { people: "people", max: "max", size: "size" }, ngImport: i0, template: `<div style="display: flex; align-items: center">
+    @for (p of shown; track $index) {
+      <span
+        [style.marginLeft.px]="$index ? -10 : 0"
+        [style.zIndex]="shown.length - $index"
+        style="border: 2px solid var(--surface-1); border-radius: 50%; position: relative"
+      >
+        <vsp-avatar [name]="p.name" [hue]="p.hue ?? 0" [size]="size" />
+      </span>
+    }
+    @if (extra > 0) {
+      <span
+        [style.width.px]="size"
+        [style.height.px]="size"
+        [style.fontSize.px]="size * 0.34"
+        style="margin-left: -10px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); border: 2px solid var(--surface-1); font-weight: 700; color: var(--text-dim)"
+        >+{{ extra }}</span
+      >
+    }
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: VspAvatar, selector: "vsp-avatar", inputs: ["name", "hue", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspAvatarGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-avatar-group',
+                    imports: [VspAvatar],
+                    template: `<div style="display: flex; align-items: center">
+    @for (p of shown; track $index) {
+      <span
+        [style.marginLeft.px]="$index ? -10 : 0"
+        [style.zIndex]="shown.length - $index"
+        style="border: 2px solid var(--surface-1); border-radius: 50%; position: relative"
+      >
+        <vsp-avatar [name]="p.name" [hue]="p.hue ?? 0" [size]="size" />
+      </span>
+    }
+    @if (extra > 0) {
+      <span
+        [style.width.px]="size"
+        [style.height.px]="size"
+        [style.fontSize.px]="size * 0.34"
+        style="margin-left: -10px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); border: 2px solid var(--surface-1); font-weight: 700; color: var(--text-dim)"
+        >+{{ extra }}</span
+      >
+    }
+  </div>`,
+                }]
+        }], propDecorators: { people: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+class VspSegmented {
+    value;
+    valueChange = new EventEmitter();
+    options = [];
+    pick(o) {
+        this.value = o;
+        this.valueChange.emit(o);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspSegmented, isStandalone: true, selector: "vsp-segmented", inputs: { value: "value", options: "options" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `<div class="ui-seg">
+    @for (o of options; track o) {
+      <button type="button" [class.on]="value === o" (click)="pick(o)">{{ o }}</button>
+    }
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSegmented, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-segmented',
+                    template: `<div class="ui-seg">
+    @for (o of options; track o) {
+      <button type="button" [class.on]="value === o" (click)="pick(o)">{{ o }}</button>
+    }
+  </div>`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }] } });
+
+class VspSpinner {
+    size;
+    get cls() {
+        return this.size === 'lg' ? 'ui-spinner lg' : 'ui-spinner';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspSpinner, isStandalone: true, selector: "vsp-spinner", inputs: { size: "size" }, ngImport: i0, template: `<span [class]="cls" aria-hidden="true"></span>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSpinner, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-spinner',
+                    template: `<span [class]="cls" aria-hidden="true"></span>`,
+                }]
+        }], propDecorators: { size: [{
+                type: Input
+            }] } });
+class VspIconButton {
+    label;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspIconButton, isStandalone: true, selector: "vsp-icon-button", inputs: { label: "label" }, ngImport: i0, template: `<button type="button" class="vsp-icon-btn" [attr.aria-label]="label">
+    <ng-content />
+  </button>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspIconButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-icon-button',
+                    template: `<button type="button" class="vsp-icon-btn" [attr.aria-label]="label">
+    <ng-content />
+  </button>`,
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }] } });
+class VspProgress {
+    value = 0;
+    tone;
+    height = 6;
+    get clamped() {
+        return Math.min(100, this.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspProgress, isStandalone: true, selector: "vsp-progress", inputs: { value: "value", tone: "tone", height: "height" }, ngImport: i0, template: `<div class="meter" [style.height.px]="height">
+    <i [style.width.%]="clamped" [style.background]="tone" style="transition: width 0.3s"></i>
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspProgress, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-progress',
+                    template: `<div class="meter" [style.height.px]="height">
+    <i [style.width.%]="clamped" [style.background]="tone" style="transition: width 0.3s"></i>
+  </div>`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], tone: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
+class VspSkeleton {
+    w = '100%';
+    h = 12;
+    r = 7;
+    px(v) {
+        return typeof v === 'number' ? `${v}px` : v;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspSkeleton, isStandalone: true, selector: "vsp-skeleton", inputs: { w: "w", h: "h", r: "r" }, ngImport: i0, template: `<div
+    class="skel"
+    [style.width]="px(w)"
+    [style.height]="px(h)"
+    [style.borderRadius]="px(r)"
+  ></div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSkeleton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-skeleton',
+                    template: `<div
+    class="skel"
+    [style.width]="px(w)"
+    [style.height]="px(h)"
+    [style.borderRadius]="px(r)"
+  ></div>`,
+                }]
+        }], propDecorators: { w: [{
+                type: Input
+            }], h: [{
+                type: Input
+            }], r: [{
+                type: Input
+            }] } });
+
+class VspCard {
+    pad = false;
+    get cls() {
+        return this.pad ? 'card card-pad' : 'card';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspCard, isStandalone: true, selector: "vsp-card", inputs: { pad: "pad" }, ngImport: i0, template: `<div [class]="cls"><ng-content /></div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-card',
+                    template: `<div [class]="cls"><ng-content /></div>`,
+                }]
+        }], propDecorators: { pad: [{
+                type: Input
+            }] } });
+class VspCardHead {
+    title;
+    desc;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspCardHead, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspCardHead, isStandalone: true, selector: "vsp-card-head", inputs: { title: "title", desc: "desc" }, ngImport: i0, template: `<div class="card-head">
+    <div style="min-width: 0">
+      <div class="ttl">{{ title }}</div>
+      @if (desc) {
+        <div class="eyebrow" style="margin-top: 3px">{{ desc }}</div>
+      }
+    </div>
+    <div class="vsp-top-spacer"></div>
+    <ng-content select="[slot=right]" />
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspCardHead, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-card-head',
+                    template: `<div class="card-head">
+    <div style="min-width: 0">
+      <div class="ttl">{{ title }}</div>
+      @if (desc) {
+        <div class="eyebrow" style="margin-top: 3px">{{ desc }}</div>
+      }
+    </div>
+    <div class="vsp-top-spacer"></div>
+    <ng-content select="[slot=right]" />
+  </div>`,
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], desc: [{
+                type: Input
+            }] } });
+
+class VspAlert {
+    tone = 'info';
+    title;
+    get cls() {
+        return `ui-alert ${this.tone}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspAlert, isStandalone: true, selector: "vsp-alert", inputs: { tone: "tone", title: "title" }, ngImport: i0, template: `<div [class]="cls">
+    <ng-content select="[slot=icon]" />
+    <div style="flex: 1">
+      @if (title) {
+        <div class="ui-alert-title">{{ title }}</div>
+      }
+      <div class="ui-alert-body"><ng-content /></div>
+    </div>
+    <ng-content select="[slot=action]" />
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspAlert, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-alert',
+                    template: `<div [class]="cls">
+    <ng-content select="[slot=icon]" />
+    <div style="flex: 1">
+      @if (title) {
+        <div class="ui-alert-title">{{ title }}</div>
+      }
+      <div class="ui-alert-body"><ng-content /></div>
+    </div>
+    <ng-content select="[slot=action]" />
+  </div>`,
+                }]
+        }], propDecorators: { tone: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
+class VspField {
+    label;
+    required = false;
+    hint;
+    error;
+    htmlFor;
+    get hintCls() {
+        return this.error ? 'ui-hint err' : 'ui-hint';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspField, isStandalone: true, selector: "vsp-field", inputs: { label: "label", required: "required", hint: "hint", error: "error", htmlFor: "htmlFor" }, ngImport: i0, template: `<div class="ui-field">
+    @if (label) {
+      <label class="ui-label" [attr.for]="htmlFor">
+        <span
+          >{{ label }}
+          @if (required) {
+            <span class="req"> *</span>
+          }
+        </span>
+      </label>
+    }
+    <ng-content />
+    @if (error || hint) {
+      <span [class]="hintCls">{{ error || hint }}</span>
+    }
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-field',
+                    template: `<div class="ui-field">
+    @if (label) {
+      <label class="ui-label" [attr.for]="htmlFor">
+        <span
+          >{{ label }}
+          @if (required) {
+            <span class="req"> *</span>
+          }
+        </span>
+      </label>
+    }
+    <ng-content />
+    @if (error || hint) {
+      <span [class]="hintCls">{{ error || hint }}</span>
+    }
+  </div>`,
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], htmlFor: [{
+                type: Input
+            }] } });
+class VspInput {
+    value = '';
+    valueChange = new EventEmitter();
+    invalid = false;
+    get cls() {
+        return this.invalid ? 'ui-input invalid' : 'ui-input';
+    }
+    onInput(e) {
+        this.value = e.target.value;
+        this.valueChange.emit(this.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspInput, isStandalone: true, selector: "vsp-input", inputs: { value: "value", invalid: "invalid" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `<input [class]="cls" [value]="value" (input)="onInput($event)" />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-input',
+                    template: `<input [class]="cls" [value]="value" (input)="onInput($event)" />`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], invalid: [{
+                type: Input
+            }] } });
+class VspTextarea {
+    value = '';
+    valueChange = new EventEmitter();
+    onInput(e) {
+        this.value = e.target.value;
+        this.valueChange.emit(this.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspTextarea, isStandalone: true, selector: "vsp-textarea", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `<textarea class="ui-textarea" [value]="value" (input)="onInput($event)"></textarea>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspTextarea, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-textarea',
+                    template: `<textarea class="ui-textarea" [value]="value" (input)="onInput($event)"></textarea>`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class VspSwitch {
+    checked = false;
+    checkedChange = new EventEmitter();
+    size;
+    disabled = false;
+    get cls() {
+        return ['ui-switch', this.size === 'sm' && 'sm', this.checked && 'on']
+            .filter(Boolean)
+            .join(' ');
+    }
+    toggle() {
+        this.checked = !this.checked;
+        this.checkedChange.emit(this.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspSwitch, isStandalone: true, selector: "vsp-switch", inputs: { checked: "checked", size: "size", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: `<button
+    type="button"
+    [disabled]="disabled"
+    [class]="cls"
+    [attr.aria-pressed]="checked"
+    aria-label="Toggle"
+    (click)="toggle()"
+  ></button>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSwitch, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-switch',
+                    template: `<button
+    type="button"
+    [disabled]="disabled"
+    [class]="cls"
+    [attr.aria-pressed]="checked"
+    aria-label="Toggle"
+    (click)="toggle()"
+  ></button>`,
+                }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+class VspCheckbox {
+    checked = false;
+    checkedChange = new EventEmitter();
+    label;
+    sub;
+    disabled = false;
+    get checkCls() {
+        return this.checked ? 'ui-check on' : 'ui-check';
+    }
+    toggle() {
+        this.checked = !this.checked;
+        this.checkedChange.emit(this.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspCheckbox, isStandalone: true, selector: "vsp-checkbox", inputs: { checked: "checked", label: "label", sub: "sub", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: `<label class="ui-opt" [style.opacity]="disabled ? 0.5 : 1">
+    <input
+      type="checkbox"
+      [checked]="checked"
+      [disabled]="disabled"
+      (change)="toggle()"
+      style="position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0"
+    />
+    <span [class]="checkCls"></span>
+    <span>
+      <span>{{ label }}</span>
+      @if (sub) {
+        <span class="ui-opt-sub">{{ sub }}</span>
+      }
+    </span>
+  </label>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspCheckbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-checkbox',
+                    template: `<label class="ui-opt" [style.opacity]="disabled ? 0.5 : 1">
+    <input
+      type="checkbox"
+      [checked]="checked"
+      [disabled]="disabled"
+      (change)="toggle()"
+      style="position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0"
+    />
+    <span [class]="checkCls"></span>
+    <span>
+      <span>{{ label }}</span>
+      @if (sub) {
+        <span class="ui-opt-sub">{{ sub }}</span>
+      }
+    </span>
+  </label>`,
+                }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }], label: [{
+                type: Input
+            }], sub: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+const val = (o) => (typeof o === 'string' ? o : o.value);
+const lbl = (o) => (typeof o === 'string' ? o : o.label);
+const subOf = (o) => (typeof o === 'object' ? o.sub : undefined);
+class VspRadio {
+    checked = false;
+    label;
+    sub;
+    name;
+    value;
+    select = new EventEmitter();
+    get dotCls() {
+        return this.checked ? 'ui-radio-dot on' : 'ui-radio-dot';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspRadio, isStandalone: true, selector: "vsp-radio", inputs: { checked: "checked", label: "label", sub: "sub", name: "name", value: "value" }, outputs: { select: "select" }, ngImport: i0, template: `<label class="ui-opt">
+    <input
+      type="radio"
+      [name]="name"
+      [value]="value"
+      [checked]="checked"
+      (change)="select.emit()"
+      style="position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0"
+    />
+    <span [class]="dotCls"></span>
+    <span>
+      <span>{{ label }}</span>
+      @if (sub) {
+        <span class="ui-opt-sub">{{ sub }}</span>
+      }
+    </span>
+  </label>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspRadio, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-radio',
+                    template: `<label class="ui-opt">
+    <input
+      type="radio"
+      [name]="name"
+      [value]="value"
+      [checked]="checked"
+      (change)="select.emit()"
+      style="position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0"
+    />
+    <span [class]="dotCls"></span>
+    <span>
+      <span>{{ label }}</span>
+      @if (sub) {
+        <span class="ui-opt-sub">{{ sub }}</span>
+      }
+    </span>
+  </label>`,
+                }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], sub: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }] } });
+class VspRadioGroup {
+    value;
+    valueChange = new EventEmitter();
+    options = [];
+    name = 'vsp-radio';
+    val = val;
+    lbl = lbl;
+    subOf = subOf;
+    pick(v) {
+        this.value = v;
+        this.valueChange.emit(v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspRadioGroup, isStandalone: true, selector: "vsp-radio-group", inputs: { value: "value", options: "options", name: "name" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `<div style="display: flex; flex-direction: column; gap: 12px">
+    @for (o of options; track val(o)) {
+      <vsp-radio
+        [name]="name"
+        [label]="lbl(o)"
+        [sub]="subOf(o)"
+        [value]="val(o)"
+        [checked]="value === val(o)"
+        (select)="pick(val(o))"
+      />
+    }
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: VspRadio, selector: "vsp-radio", inputs: ["checked", "label", "sub", "name", "value"], outputs: ["select"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspRadioGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-radio-group',
+                    imports: [VspRadio],
+                    template: `<div style="display: flex; flex-direction: column; gap: 12px">
+    @for (o of options; track val(o)) {
+      <vsp-radio
+        [name]="name"
+        [label]="lbl(o)"
+        [sub]="subOf(o)"
+        [value]="val(o)"
+        [checked]="value === val(o)"
+        (select)="pick(val(o))"
+      />
+    }
+  </div>`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+class VspSlider {
+    value = 0;
+    valueChange = new EventEmitter();
+    min = 0;
+    max = 100;
+    step = 1;
+    onInput(e) {
+        this.value = Number(e.target.value);
+        this.valueChange.emit(this.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspSlider, isStandalone: true, selector: "vsp-slider", inputs: { value: "value", min: "min", max: "max", step: "step" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `<input
+    type="range"
+    class="ui-slider"
+    [value]="value"
+    [min]="min"
+    [max]="max"
+    [step]="step"
+    (input)="onInput($event)"
+  />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSlider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-slider',
+                    template: `<input
+    type="range"
+    class="ui-slider"
+    [value]="value"
+    [min]="min"
+    [max]="max"
+    [step]="step"
+    (input)="onInput($event)"
+  />`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }] } });
+class VspNativeSelect {
+    value;
+    valueChange = new EventEmitter();
+    options = [];
+    val = val;
+    lbl = lbl;
+    onChange(e) {
+        this.value = e.target.value;
+        this.valueChange.emit(this.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspNativeSelect, isStandalone: true, selector: "vsp-native-select", inputs: { value: "value", options: "options" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `<select class="ui-select" [value]="value" (change)="onChange($event)">
+    @for (o of options; track val(o)) {
+      <option [value]="val(o)">{{ lbl(o) }}</option>
+    }
+  </select>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspNativeSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-native-select',
+                    template: `<select class="ui-select" [value]="value" (change)="onChange($event)">
+    @for (o of options; track val(o)) {
+      <option [value]="val(o)">{{ lbl(o) }}</option>
+    }
+  </select>`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }] } });
+
+class VspTabs {
+    tabs = [];
+    value;
+    valueChange = new EventEmitter();
+    id(t) {
+        return typeof t === 'string' ? t : t.value;
+    }
+    lbl(t) {
+        return typeof t === 'string' ? t : t.label;
+    }
+    cnt(t) {
+        return typeof t === 'object' ? t.count : undefined;
+    }
+    cls(t) {
+        return 'ui-tab' + (this.value === this.id(t) ? ' on' : '');
+    }
+    pick(v) {
+        this.value = v;
+        this.valueChange.emit(v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspTabs, isStandalone: true, selector: "vsp-tabs", inputs: { tabs: "tabs", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `<div class="ui-tabs" style="align-items: center">
+    @for (t of tabs; track id(t)) {
+      <button type="button" [class]="cls(t)" (click)="pick(id(t))">
+        {{ lbl(t) }}
+        @if (cnt(t) != null) {
+          <span class="badge badge-muted" style="margin-left: 7px">{{ cnt(t) }}</span>
+        }
+      </button>
+    }
+    <div style="flex: 1"></div>
+    <ng-content select="[slot=right]" />
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspTabs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-tabs',
+                    template: `<div class="ui-tabs" style="align-items: center">
+    @for (t of tabs; track id(t)) {
+      <button type="button" [class]="cls(t)" (click)="pick(id(t))">
+        {{ lbl(t) }}
+        @if (cnt(t) != null) {
+          <span class="badge badge-muted" style="margin-left: 7px">{{ cnt(t) }}</span>
+        }
+      </button>
+    }
+    <div style="flex: 1"></div>
+    <ng-content select="[slot=right]" />
+  </div>`,
+                }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+class VspBreadcrumb {
+    items = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspBreadcrumb, isStandalone: true, selector: "vsp-breadcrumb", inputs: { items: "items" }, ngImport: i0, template: `<nav style="display: flex; align-items: center; gap: 7px; font-size: 12.5px">
+    @for (it of items; track $index; let i = $index, last = $last) {
+      @if (i > 0) {
+        <svg
+          viewBox="0 0 24 24"
+          width="13"
+          height="13"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          style="color: var(--text-faint)"
+        >
+          <path d="M9 18l6-6-6-6" />
+        </svg>
+      }
+      <span
+        [style.color]="last ? 'var(--text)' : 'var(--text-dim)'"
+        [style.fontWeight]="last ? 600 : 500"
+        >{{ it }}</span
+      >
+    }
+  </nav>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspBreadcrumb, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-breadcrumb',
+                    template: `<nav style="display: flex; align-items: center; gap: 7px; font-size: 12.5px">
+    @for (it of items; track $index; let i = $index, last = $last) {
+      @if (i > 0) {
+        <svg
+          viewBox="0 0 24 24"
+          width="13"
+          height="13"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          style="color: var(--text-faint)"
+        >
+          <path d="M9 18l6-6-6-6" />
+        </svg>
+      }
+      <span
+        [style.color]="last ? 'var(--text)' : 'var(--text-dim)'"
+        [style.fontWeight]="last ? 600 : 500"
+        >{{ it }}</span
+      >
+    }
+  </nav>`,
+                }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+class VspPagination {
+    page = 0;
+    pageChange = new EventEmitter();
+    pages = 1;
+    get nums() {
+        const r = [];
+        for (let i = 0; i < this.pages; i++) {
+            if (i === 0 || i === this.pages - 1 || Math.abs(i - this.page) <= 1)
+                r.push({ gap: false, n: i });
+            else if (!r[r.length - 1]?.gap)
+                r.push({ gap: true, n: -1 });
+        }
+        return r;
+    }
+    numCls(n) {
+        return 'btn btn-sm ' + (n === this.page ? 'btn-primary' : 'btn-subtle');
+    }
+    go(p) {
+        this.page = p;
+        this.pageChange.emit(p);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspPagination, isStandalone: true, selector: "vsp-pagination", inputs: { page: "page", pages: "pages" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: `<div style="display: flex; gap: 4px; align-items: center">
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm"
+      [disabled]="page === 0"
+      aria-label="Previous page"
+      (click)="go(page - 1)"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="14"
+        height="14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M15 18l-6-6 6-6" />
+      </svg>
+    </button>
+    @for (item of nums; track $index) {
+      @if (item.gap) {
+        <span class="mono" style="padding: 0 6px; color: var(--text-faint)">…</span>
+      } @else {
+        <button
+          type="button"
+          [class]="numCls(item.n)"
+          style="min-width: 32px; padding: 0"
+          (click)="go(item.n)"
+        >
+          {{ item.n + 1 }}
+        </button>
+      }
+    }
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm"
+      [disabled]="page >= pages - 1"
+      aria-label="Next page"
+      (click)="go(page + 1)"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="14"
+        height="14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M9 18l6-6-6-6" />
+      </svg>
+    </button>
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspPagination, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-pagination',
+                    template: `<div style="display: flex; gap: 4px; align-items: center">
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm"
+      [disabled]="page === 0"
+      aria-label="Previous page"
+      (click)="go(page - 1)"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="14"
+        height="14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M15 18l-6-6 6-6" />
+      </svg>
+    </button>
+    @for (item of nums; track $index) {
+      @if (item.gap) {
+        <span class="mono" style="padding: 0 6px; color: var(--text-faint)">…</span>
+      } @else {
+        <button
+          type="button"
+          [class]="numCls(item.n)"
+          style="min-width: 32px; padding: 0"
+          (click)="go(item.n)"
+        >
+          {{ item.n + 1 }}
+        </button>
+      }
+    }
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm"
+      [disabled]="page >= pages - 1"
+      aria-label="Next page"
+      (click)="go(page + 1)"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="14"
+        height="14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M9 18l6-6-6-6" />
+      </svg>
+    </button>
+  </div>`,
+                }]
+        }], propDecorators: { page: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], pages: [{
+                type: Input
+            }] } });
+class VspStepper {
+    steps = [];
+    current = 0;
+    barCls(i) {
+        return 'ui-step-bar' + (i <= this.current ? ' done' : '');
+    }
+    stepCls(i) {
+        return 'ui-step ' + (i < this.current ? 'done' : i === this.current ? 'active' : 'pending');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspStepper, isStandalone: true, selector: "vsp-stepper", inputs: { steps: "steps", current: "current" }, ngImport: i0, template: `<div class="ui-steps">
+    @for (s of steps; track $index; let i = $index) {
+      @if (i > 0) {
+        <div [class]="barCls(i)"></div>
+      }
+      <div [class]="stepCls(i)">
+        <span class="ui-step-dot">
+          @if (i < current) {
+            <svg
+              viewBox="0 0 24 24"
+              width="14"
+              height="14"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M20 6L9 17l-5-5" />
+            </svg>
+          } @else {
+            {{ i + 1 }}
+          }
+        </span>
+        <span class="ui-step-label">{{ s }}</span>
+      </div>
+    }
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspStepper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-stepper',
+                    template: `<div class="ui-steps">
+    @for (s of steps; track $index; let i = $index) {
+      @if (i > 0) {
+        <div [class]="barCls(i)"></div>
+      }
+      <div [class]="stepCls(i)">
+        <span class="ui-step-dot">
+          @if (i < current) {
+            <svg
+              viewBox="0 0 24 24"
+              width="14"
+              height="14"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M20 6L9 17l-5-5" />
+            </svg>
+          } @else {
+            {{ i + 1 }}
+          }
+        </span>
+        <span class="ui-step-label">{{ s }}</span>
+      </div>
+    }
+  </div>`,
+                }]
+        }], propDecorators: { steps: [{
+                type: Input
+            }], current: [{
+                type: Input
+            }] } });
+
+class VspCircularProgress {
+    value = 0;
+    size = 76;
+    thickness = 7;
+    color = 'var(--accent)';
+    label;
+    get r() {
+        return (this.size - this.thickness) / 2;
+    }
+    get circ() {
+        return 2 * Math.PI * this.r;
+    }
+    get offset() {
+        return this.circ * (1 - Math.min(100, this.value) / 100);
+    }
+    get display() {
+        return this.label ?? `${Math.round(this.value)}%`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspCircularProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: VspCircularProgress, isStandalone: true, selector: "vsp-circular-progress", inputs: { value: "value", size: "size", thickness: "thickness", color: "color", label: "label" }, ngImport: i0, template: `<div style="position: relative" [style.width.px]="size" [style.height.px]="size">
+    <svg [attr.width]="size" [attr.height]="size" style="transform: rotate(-90deg)">
+      <circle
+        [attr.cx]="size / 2"
+        [attr.cy]="size / 2"
+        [attr.r]="r"
+        fill="none"
+        stroke="var(--surface-3)"
+        [attr.stroke-width]="thickness"
+      />
+      <circle
+        [attr.cx]="size / 2"
+        [attr.cy]="size / 2"
+        [attr.r]="r"
+        fill="none"
+        [attr.stroke]="color"
+        [attr.stroke-width]="thickness"
+        stroke-linecap="round"
+        [attr.stroke-dasharray]="circ"
+        [attr.stroke-dashoffset]="offset"
+        style="transition: stroke-dashoffset 0.5s cubic-bezier(0.3, 0.7, 0.3, 1)"
+      />
+    </svg>
+    <div
+      class="tnum"
+      [style.fontSize.px]="size * 0.24"
+      style="position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800"
+    >
+      {{ display }}
+    </div>
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspCircularProgress, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-circular-progress',
+                    template: `<div style="position: relative" [style.width.px]="size" [style.height.px]="size">
+    <svg [attr.width]="size" [attr.height]="size" style="transform: rotate(-90deg)">
+      <circle
+        [attr.cx]="size / 2"
+        [attr.cy]="size / 2"
+        [attr.r]="r"
+        fill="none"
+        stroke="var(--surface-3)"
+        [attr.stroke-width]="thickness"
+      />
+      <circle
+        [attr.cx]="size / 2"
+        [attr.cy]="size / 2"
+        [attr.r]="r"
+        fill="none"
+        [attr.stroke]="color"
+        [attr.stroke-width]="thickness"
+        stroke-linecap="round"
+        [attr.stroke-dasharray]="circ"
+        [attr.stroke-dashoffset]="offset"
+        style="transition: stroke-dashoffset 0.5s cubic-bezier(0.3, 0.7, 0.3, 1)"
+      />
+    </svg>
+    <div
+      class="tnum"
+      [style.fontSize.px]="size * 0.24"
+      style="position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800"
+    >
+      {{ display }}
+    </div>
+  </div>`,
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], thickness: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+class VspStat {
+    label;
+    value;
+    delta;
+    deltaDir = 'up';
+    tone = 'var(--accent)';
+    get deltaCls() {
+        return 'badge ' + (this.deltaDir === 'up' ? 'badge-pos' : 'badge-neg');
+    }
+    get arrow() {
+        return this.deltaDir === 'up' ? 'M12 19V5M5 12l7-7 7 7' : 'M12 5v14M5 12l7 7 7-7';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspStat, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspStat, isStandalone: true, selector: "vsp-stat", inputs: { label: "label", value: "value", delta: "delta", deltaDir: "deltaDir", tone: "tone" }, ngImport: i0, template: `<div class="card card-pad" style="display: flex; align-items: center; gap: 13px">
+    <span
+      #ic
+      [style.display]="ic.childElementCount ? '' : 'none'"
+      [style.background]="'color-mix(in oklab, ' + tone + ' 14%, transparent)'"
+      [style.color]="tone"
+      style="width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0; display: grid; place-items: center"
+    >
+      <ng-content select="[slot=icon]" />
+    </span>
+    <div style="min-width: 0">
+      <div class="eyebrow">{{ label }}</div>
+      <div style="display: flex; align-items: baseline; gap: 8px; margin-top: 3px">
+        <span class="tnum" style="font-size: 22px; font-weight: 800; letter-spacing: -0.02em">{{
+          value
+        }}</span>
+        @if (delta != null) {
+          <span [class]="deltaCls" style="padding: 1px 6px">
+            <svg
+              viewBox="0 0 24 24"
+              width="10"
+              height="10"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path [attr.d]="arrow" />
+            </svg>
+            {{ delta }}
+          </span>
+        }
+      </div>
+    </div>
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspStat, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-stat',
+                    template: `<div class="card card-pad" style="display: flex; align-items: center; gap: 13px">
+    <span
+      #ic
+      [style.display]="ic.childElementCount ? '' : 'none'"
+      [style.background]="'color-mix(in oklab, ' + tone + ' 14%, transparent)'"
+      [style.color]="tone"
+      style="width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0; display: grid; place-items: center"
+    >
+      <ng-content select="[slot=icon]" />
+    </span>
+    <div style="min-width: 0">
+      <div class="eyebrow">{{ label }}</div>
+      <div style="display: flex; align-items: baseline; gap: 8px; margin-top: 3px">
+        <span class="tnum" style="font-size: 22px; font-weight: 800; letter-spacing: -0.02em">{{
+          value
+        }}</span>
+        @if (delta != null) {
+          <span [class]="deltaCls" style="padding: 1px 6px">
+            <svg
+              viewBox="0 0 24 24"
+              width="10"
+              height="10"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path [attr.d]="arrow" />
+            </svg>
+            {{ delta }}
+          </span>
+        }
+      </div>
+    </div>
+  </div>`,
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], delta: [{
+                type: Input
+            }], deltaDir: [{
+                type: Input
+            }], tone: [{
+                type: Input
+            }] } });
+const TL_TONE = {
+    pos: 'var(--success)',
+    neg: 'var(--danger)',
+    warn: 'var(--warning)',
+    info: 'var(--accent)',
+};
+class VspTimeline {
+    items = [];
+    dotStyle(tone) {
+        if (!tone)
+            return '';
+        const c = TL_TONE[tone];
+        return `background:color-mix(in oklab, ${c} 14%, transparent);color:${c};border-color:color-mix(in oklab, ${c} 30%, transparent)`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspTimeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspTimeline, isStandalone: true, selector: "vsp-timeline", inputs: { items: "items" }, ngImport: i0, template: `<div class="ui-tl">
+    @for (it of items; track $index) {
+      <div class="ui-tl-item">
+        <span class="ui-tl-dot" [style]="dotStyle(it.tone)">
+          <svg
+            viewBox="0 0 24 24"
+            width="14"
+            height="14"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" />
+          </svg>
+        </span>
+        <div class="ui-tl-body">
+          <div style="display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap">
+            <span style="font-weight: 600; font-size: 13.5px">{{ it.title }}</span>
+            @if (it.time) {
+              <span class="eyebrow" style="margin-left: auto">{{ it.time }}</span>
+            }
+          </div>
+          @if (it.body) {
+            <div style="font-size: 12.5px; color: var(--text-dim); margin-top: 3px">
+              {{ it.body }}
+            </div>
+          }
+        </div>
+      </div>
+    }
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspTimeline, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-timeline',
+                    template: `<div class="ui-tl">
+    @for (it of items; track $index) {
+      <div class="ui-tl-item">
+        <span class="ui-tl-dot" [style]="dotStyle(it.tone)">
+          <svg
+            viewBox="0 0 24 24"
+            width="14"
+            height="14"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" />
+          </svg>
+        </span>
+        <div class="ui-tl-body">
+          <div style="display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap">
+            <span style="font-weight: 600; font-size: 13.5px">{{ it.title }}</span>
+            @if (it.time) {
+              <span class="eyebrow" style="margin-left: auto">{{ it.time }}</span>
+            }
+          </div>
+          @if (it.body) {
+            <div style="font-size: 12.5px; color: var(--text-dim); margin-top: 3px">
+              {{ it.body }}
+            </div>
+          }
+        </div>
+      </div>
+    }
+  </div>`,
+                }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+class VspDescriptionList {
+    items = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspDescriptionList, isStandalone: true, selector: "vsp-description-list", inputs: { items: "items" }, ngImport: i0, template: `<dl class="ui-dl">
+    @for (item of items; track $index; let last = $last) {
+      <dt [class.last]="last">{{ item[0] }}</dt>
+      <dd [class.last]="last">{{ item[1] }}</dd>
+    }
+  </dl>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspDescriptionList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-description-list',
+                    template: `<dl class="ui-dl">
+    @for (item of items; track $index; let last = $last) {
+      <dt [class.last]="last">{{ item[0] }}</dt>
+      <dd [class.last]="last">{{ item[1] }}</dd>
+    }
+  </dl>`,
+                }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
+const BANNER_ICON = {
+    info: 'M12 3l1.6 5L19 9.6l-5 1.6L12 16l-1.6-4.8L5 9.6l5.4-1.6z',
+    warn: 'M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9',
+    accent: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
+};
+class VspBanner {
+    tone = 'info';
+    dismissible = false;
+    dismiss = new EventEmitter();
+    get cls() {
+        return 'ui-banner ' + this.tone;
+    }
+    get iconPath() {
+        return BANNER_ICON[this.tone];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspBanner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspBanner, isStandalone: true, selector: "vsp-banner", inputs: { tone: "tone", dismissible: "dismissible" }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: `<div [class]="cls">
+    <span #ic style="display: contents"><ng-content select="[slot=icon]" /></span>
+    @if (!ic.childElementCount) {
+      <svg
+        viewBox="0 0 24 24"
+        width="18"
+        height="18"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path [attr.d]="iconPath" />
+      </svg>
+    }
+    <div style="flex: 1; font-size: 13px; font-weight: 500"><ng-content /></div>
+    <ng-content select="[slot=action]" />
+    @if (dismissible) {
+      <button type="button" class="ui-banner-x" aria-label="Dismiss" (click)="dismiss.emit()">
+        <svg
+          viewBox="0 0 24 24"
+          width="15"
+          height="15"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    }
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspBanner, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-banner',
+                    template: `<div [class]="cls">
+    <span #ic style="display: contents"><ng-content select="[slot=icon]" /></span>
+    @if (!ic.childElementCount) {
+      <svg
+        viewBox="0 0 24 24"
+        width="18"
+        height="18"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path [attr.d]="iconPath" />
+      </svg>
+    }
+    <div style="flex: 1; font-size: 13px; font-weight: 500"><ng-content /></div>
+    <ng-content select="[slot=action]" />
+    @if (dismissible) {
+      <button type="button" class="ui-banner-x" aria-label="Dismiss" (click)="dismiss.emit()">
+        <svg
+          viewBox="0 0 24 24"
+          width="15"
+          height="15"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    }
+  </div>`,
+                }]
+        }], propDecorators: { tone: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], dismiss: [{
+                type: Output
+            }] } });
+class VspEmptyState {
+    title;
+    desc;
+    compact = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspEmptyState, isStandalone: true, selector: "vsp-empty-state", inputs: { title: "title", desc: "desc", compact: "compact" }, ngImport: i0, template: `<div
+    style="display: grid; place-items: center; text-align: center"
+    [style.padding]="compact ? '32px 20px' : '56px 24px'"
+  >
+    <div style="max-width: 340px">
+      <span
+        style="width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 18px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent)"
+      >
+        <span #ic style="display: contents"><ng-content select="[slot=icon]" /></span>
+        @if (!ic.childElementCount) {
+          <svg
+            viewBox="0 0 24 24"
+            width="26"
+            height="26"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M22 12h-6l-2 3h-4l-2-3H2M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"
+            />
+          </svg>
+        }
+      </span>
+      <div style="font-size: 17px; font-weight: 700">{{ title }}</div>
+      @if (desc) {
+        <p style="margin: 7px 0 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.6">
+          {{ desc }}
+        </p>
+      }
+      <div
+        #ac
+        [style.display]="ac.childElementCount ? 'flex' : 'none'"
+        style="margin-top: 20px; gap: 8px; justify-content: center"
+      >
+        <ng-content select="[slot=action]" />
+      </div>
+    </div>
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspEmptyState, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-empty-state',
+                    template: `<div
+    style="display: grid; place-items: center; text-align: center"
+    [style.padding]="compact ? '32px 20px' : '56px 24px'"
+  >
+    <div style="max-width: 340px">
+      <span
+        style="width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 18px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent)"
+      >
+        <span #ic style="display: contents"><ng-content select="[slot=icon]" /></span>
+        @if (!ic.childElementCount) {
+          <svg
+            viewBox="0 0 24 24"
+            width="26"
+            height="26"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M22 12h-6l-2 3h-4l-2-3H2M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"
+            />
+          </svg>
+        }
+      </span>
+      <div style="font-size: 17px; font-weight: 700">{{ title }}</div>
+      @if (desc) {
+        <p style="margin: 7px 0 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.6">
+          {{ desc }}
+        </p>
+      }
+      <div
+        #ac
+        [style.display]="ac.childElementCount ? 'flex' : 'none'"
+        style="margin-top: 20px; gap: 8px; justify-content: center"
+      >
+        <ng-content select="[slot=action]" />
+      </div>
+    </div>
+  </div>`,
+                }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], desc: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }] } });
+class VspAccordion {
+    items = [];
+    multiple = false;
+    defaultOpen = [];
+    open = new Set();
+    ngOnInit() {
+        this.open = new Set(this.defaultOpen);
+    }
+    toggle(i) {
+        const n = new Set(this.multiple ? this.open : []);
+        if (this.open.has(i))
+            n.delete(i);
+        else
+            n.add(i);
+        this.open = n;
+    }
+    itemCls(i) {
+        return 'ui-acc-item' + (this.open.has(i) ? ' open' : '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspAccordion, isStandalone: true, selector: "vsp-accordion", inputs: { items: "items", multiple: "multiple", defaultOpen: "defaultOpen" }, ngImport: i0, template: `<div class="ui-acc">
+    @for (it of items; track $index; let i = $index) {
+      <div [class]="itemCls(i)">
+        <button type="button" class="ui-acc-head" (click)="toggle(i)">
+          {{ it.title }}
+          <svg
+            class="chev"
+            viewBox="0 0 24 24"
+            width="17"
+            height="17"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M9 18l6-6-6-6" />
+          </svg>
+        </button>
+        <div class="ui-acc-bodywrap">
+          <div>
+            <div class="ui-acc-body">{{ it.body }}</div>
+          </div>
+        </div>
+      </div>
+    }
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspAccordion, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-accordion',
+                    template: `<div class="ui-acc">
+    @for (it of items; track $index; let i = $index) {
+      <div [class]="itemCls(i)">
+        <button type="button" class="ui-acc-head" (click)="toggle(i)">
+          {{ it.title }}
+          <svg
+            class="chev"
+            viewBox="0 0 24 24"
+            width="17"
+            height="17"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M9 18l6-6-6-6" />
+          </svg>
+        </button>
+        <div class="ui-acc-bodywrap">
+          <div>
+            <div class="ui-acc-body">{{ it.body }}</div>
+          </div>
+        </div>
+      </div>
+    }
+  </div>`,
+                }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], defaultOpen: [{
+                type: Input
+            }] } });
+
+function smoothPath(pts) {
+    if (pts.length < 2)
+        return '';
+    let d = `M ${pts[0][0]} ${pts[0][1]}`;
+    for (let i = 0; i < pts.length - 1; i++) {
+        const [x0, y0] = pts[i];
+        const [x1, y1] = pts[i + 1];
+        const cx = (x0 + x1) / 2;
+        d += ` C ${cx} ${y0} ${cx} ${y1} ${x1} ${y1}`;
+    }
+    return d;
+}
+let sparkUid = 0;
+class VspSparkline {
+    data = [];
+    color = 'var(--accent)';
+    w = 110;
+    h = 34;
+    fill = true;
+    gid = 'spk' + ++sparkUid;
+    get pts() {
+        const min = Math.min(...this.data);
+        const max = Math.max(...this.data);
+        const rng = max - min || 1;
+        return this.data.map((v, i) => [
+            (i / (this.data.length - 1)) * this.w,
+            this.h - 3 - ((v - min) / rng) * (this.h - 6),
+        ]);
+    }
+    get d() {
+        return smoothPath(this.pts);
+    }
+    get areaD() {
+        return `${this.d} L ${this.w} ${this.h} L 0 ${this.h} Z`;
+    }
+    get last() {
+        return this.pts[this.pts.length - 1] ?? [0, 0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspSparkline, isStandalone: true, selector: "vsp-sparkline", inputs: { data: "data", color: "color", w: "w", h: "h", fill: "fill" }, ngImport: i0, template: `<svg
+    [attr.width]="w"
+    [attr.height]="h"
+    [attr.viewBox]="'0 0 ' + w + ' ' + h"
+    style="display: block; overflow: visible"
+  >
+    @if (fill) {
+      <defs>
+        <linearGradient [id]="gid" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0" [attr.stop-color]="color" stop-opacity="0.28" />
+          <stop offset="1" [attr.stop-color]="color" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <path [attr.d]="areaD" [attr.fill]="'url(#' + gid + ')'" />
+    }
+    <path [attr.d]="d" fill="none" [attr.stroke]="color" stroke-width="2" stroke-linecap="round" />
+    <circle [attr.cx]="last[0]" [attr.cy]="last[1]" r="2.6" [attr.fill]="color" />
+  </svg>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspSparkline, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-sparkline',
+                    template: `<svg
+    [attr.width]="w"
+    [attr.height]="h"
+    [attr.viewBox]="'0 0 ' + w + ' ' + h"
+    style="display: block; overflow: visible"
+  >
+    @if (fill) {
+      <defs>
+        <linearGradient [id]="gid" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0" [attr.stop-color]="color" stop-opacity="0.28" />
+          <stop offset="1" [attr.stop-color]="color" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <path [attr.d]="areaD" [attr.fill]="'url(#' + gid + ')'" />
+    }
+    <path [attr.d]="d" fill="none" [attr.stroke]="color" stroke-width="2" stroke-linecap="round" />
+    <circle [attr.cx]="last[0]" [attr.cy]="last[1]" r="2.6" [attr.fill]="color" />
+  </svg>`,
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], w: [{
+                type: Input
+            }], h: [{
+                type: Input
+            }], fill: [{
+                type: Input
+            }] } });
+class VspDonut {
+    data = [];
+    size = 168;
+    thickness = 22;
+    get total() {
+        return this.data.reduce((s, d) => s + d.value, 0) || 1;
+    }
+    get r() {
+        return (this.size - this.thickness) / 2;
+    }
+    get c() {
+        return this.size / 2;
+    }
+    get circ() {
+        return 2 * Math.PI * this.r;
+    }
+    get segs() {
+        let acc = 0;
+        return this.data.map((d) => {
+            const len = (d.value / this.total) * this.circ;
+            const seg = { color: d.color, dash: `${len - 2.5} ${this.circ - len + 2.5}`, offset: -acc };
+            acc += len;
+            return seg;
+        });
+    }
+    pct(v) {
+        return Math.round((v / this.total) * 100);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspDonut, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspDonut, isStandalone: true, selector: "vsp-donut", inputs: { data: "data", size: "size", thickness: "thickness" }, ngImport: i0, template: `<div style="display: flex; align-items: center; gap: 22px">
+    <svg [attr.width]="size" [attr.height]="size" style="transform: rotate(-90deg); flex-shrink: 0">
+      <circle
+        [attr.cx]="c"
+        [attr.cy]="c"
+        [attr.r]="r"
+        fill="none"
+        stroke="var(--surface-3)"
+        [attr.stroke-width]="thickness"
+      />
+      @for (s of segs; track $index) {
+        <circle
+          [attr.cx]="c"
+          [attr.cy]="c"
+          [attr.r]="r"
+          fill="none"
+          [attr.stroke]="s.color"
+          [attr.stroke-width]="thickness"
+          [attr.stroke-dasharray]="s.dash"
+          [attr.stroke-dashoffset]="s.offset"
+          stroke-linecap="round"
+        />
+      }
+    </svg>
+    <div style="display: flex; flex-direction: column; gap: 9px; flex: 1">
+      @for (d of data; track $index) {
+        <div style="display: flex; align-items: center; gap: 9px; font-size: 12.5px">
+          <i
+            [style.background]="d.color"
+            style="width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0"
+          ></i>
+          <span style="color: var(--text-dim); flex: 1">{{ d.label }}</span>
+          <span class="mono tnum" style="font-weight: 600">{{ pct(d.value) }}%</span>
+        </div>
+      }
+    </div>
+  </div>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspDonut, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-donut',
+                    template: `<div style="display: flex; align-items: center; gap: 22px">
+    <svg [attr.width]="size" [attr.height]="size" style="transform: rotate(-90deg); flex-shrink: 0">
+      <circle
+        [attr.cx]="c"
+        [attr.cy]="c"
+        [attr.r]="r"
+        fill="none"
+        stroke="var(--surface-3)"
+        [attr.stroke-width]="thickness"
+      />
+      @for (s of segs; track $index) {
+        <circle
+          [attr.cx]="c"
+          [attr.cy]="c"
+          [attr.r]="r"
+          fill="none"
+          [attr.stroke]="s.color"
+          [attr.stroke-width]="thickness"
+          [attr.stroke-dasharray]="s.dash"
+          [attr.stroke-dashoffset]="s.offset"
+          stroke-linecap="round"
+        />
+      }
+    </svg>
+    <div style="display: flex; flex-direction: column; gap: 9px; flex: 1">
+      @for (d of data; track $index) {
+        <div style="display: flex; align-items: center; gap: 9px; font-size: 12.5px">
+          <i
+            [style.background]="d.color"
+            style="width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0"
+          ></i>
+          <span style="color: var(--text-dim); flex: 1">{{ d.label }}</span>
+          <span class="mono tnum" style="font-weight: 600">{{ pct(d.value) }}%</span>
+        </div>
+      }
+    </div>
+  </div>`,
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], thickness: [{
+                type: Input
+            }] } });
+class VspStatCard {
+    label;
+    value;
+    delta;
+    deltaDir = 'up';
+    spark;
+    sparkColor = 'var(--accent)';
+    get deltaCls() {
+        return 'badge ' + (this.deltaDir === 'up' ? 'badge-pos' : 'badge-neg');
+    }
+    get arrow() {
+        return this.deltaDir === 'up' ? 'M12 19V5M5 12l7-7 7 7' : 'M12 5v14M5 12l7 7 7-7';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspStatCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VspStatCard, isStandalone: true, selector: "vsp-stat-card", inputs: { label: "label", value: "value", delta: "delta", deltaDir: "deltaDir", spark: "spark", sparkColor: "sparkColor" }, ngImport: i0, template: `<div
+    class="card card-pad vsp-rise"
+    style="display: flex; flex-direction: column; gap: 14px"
+  >
+    <div style="display: flex; align-items: center; justify-content: space-between">
+      <div style="display: flex; align-items: center; gap: 10px">
+        <span
+          style="width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 13%, transparent); color: var(--accent)"
+        >
+          <ng-content select="[slot=icon]" />
+        </span>
+        <span class="eyebrow">{{ label }}</span>
+      </div>
+      @if (delta != null) {
+        <span [class]="deltaCls">
+          <svg
+            viewBox="0 0 24 24"
+            width="11"
+            height="11"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path [attr.d]="arrow" />
+          </svg>
+          {{ delta }}
+        </span>
+      }
+    </div>
+    <div style="display: flex; align-items: flex-end; justify-content: space-between; gap: 12px">
+      <div
+        class="tnum"
+        style="font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1"
+      >
+        {{ value }}
+      </div>
+      @if (spark) {
+        <vsp-sparkline [data]="spark" [color]="sparkColor" />
+      }
+    </div>
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: VspSparkline, selector: "vsp-sparkline", inputs: ["data", "color", "w", "h", "fill"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VspStatCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vsp-stat-card',
+                    imports: [VspSparkline],
+                    template: `<div
+    class="card card-pad vsp-rise"
+    style="display: flex; flex-direction: column; gap: 14px"
+  >
+    <div style="display: flex; align-items: center; justify-content: space-between">
+      <div style="display: flex; align-items: center; gap: 10px">
+        <span
+          style="width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 13%, transparent); color: var(--accent)"
+        >
+          <ng-content select="[slot=icon]" />
+        </span>
+        <span class="eyebrow">{{ label }}</span>
+      </div>
+      @if (delta != null) {
+        <span [class]="deltaCls">
+          <svg
+            viewBox="0 0 24 24"
+            width="11"
+            height="11"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path [attr.d]="arrow" />
+          </svg>
+          {{ delta }}
+        </span>
+      }
+    </div>
+    <div style="display: flex; align-items: flex-end; justify-content: space-between; gap: 12px">
+      <div
+        class="tnum"
+        style="font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1"
+      >
+        {{ value }}
+      </div>
+      @if (spark) {
+        <vsp-sparkline [data]="spark" [color]="sparkColor" />
+      }
+    </div>
+  </div>`,
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], delta: [{
+                type: Input
+            }], deltaDir: [{
+                type: Input
+            }], spark: [{
+                type: Input
+            }], sparkColor: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { VspAccordion, VspAlert, VspAvatar, VspAvatarGroup, VspBadge, VspBanner, VspBreadcrumb, VspButton, VspCard, VspCardHead, VspCheckbox, VspCircularProgress, VspDescriptionList, VspDivider, VspDonut, VspEmptyState, VspField, VspIconButton, VspInput, VspKbd, VspNativeSelect, VspPagination, VspProgress, VspRadio, VspRadioGroup, VspSegmented, VspSkeleton, VspSlider, VspSparkline, VspSpinner, VspStat, VspStatCard, VspStepper, VspSwitch, VspTabs, VspTag, VspTextarea, VspTimeline };
+//# sourceMappingURL=vespera-ui-angular.mjs.map