@atomng/ui 1.0.0

package/fesm2022/atomng-ui-atoms.mjs

@@ -0,0 +1,778 @@
+import * as i0 from '@angular/core';
+import { input, signal, computed, ChangeDetectionStrategy, Component, model, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+/**
+ * Avatar Atom
+ * Source: Nuxt UI v3 — ❖ Avatar
+ * Shows: image → initials → icon fallback
+ * Sizes: xs(20) sm(24) md(32) lg(40) xl(48) 2xl(64) 3xl(80)
+ */
+class AvatarComponent {
+    constructor() {
+        this.src = input(null);
+        this.alt = input(null);
+        this.size = input('md');
+        this.initials = input(null);
+        this.chip = input(false);
+        this.chipColor = input('success');
+        this.chipAlt = input(null);
+        this.rounded = input(true);
+        this.imgError = signal(false);
+        this.classes = computed(() => {
+            const cls = ['ui-avatar', `ui-avatar--${this.size()}`];
+            if (!this.rounded())
+                cls.push('ui-avatar--square');
+            return cls.join(' ');
+        });
+    }
+    onImgError() { this.imgError.set(true); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AvatarComponent, isStandalone: true, selector: "ui-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, chip: { classPropertyName: "chip", publicName: "chip", isSignal: true, isRequired: false, transformFunction: null }, chipColor: { classPropertyName: "chipColor", publicName: "chipColor", isSignal: true, isRequired: false, transformFunction: null }, chipAlt: { classPropertyName: "chipAlt", publicName: "chipAlt", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span [class]="classes()" [attr.aria-label]="alt() ?? null">
+      @if (src() && !imgError()) {
+        <img
+          [src]="src()"
+          [alt]="alt() ?? ''"
+          (error)="onImgError()"
+          class="ui-avatar__img"
+        />
+      } @else if (initials()) {
+        <span class="ui-avatar__initials" aria-hidden="true">{{ initials() }}</span>
+      } @else {
+        <span class="ui-avatar__icon" aria-hidden="true">
+          <ng-content />
+        </span>
+      }
+
+      @if (chip()) {
+        <span
+          class="ui-avatar__chip"
+          [class]="'ui-avatar__chip--' + chipColor()"
+          [attr.aria-label]="chipAlt()"
+        ></span>
+      }
+    </span>
+  `, isInline: true, styles: [".ui-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-neutral-100);color:var(--color-neutral-500);overflow:hidden;flex-shrink:0;font-family:var(--font-sans);font-weight:var(--font-medium)}.ui-avatar--square{border-radius:var(--radius-md)}.ui-avatar--xs{width:20px;height:20px;font-size:10px}.ui-avatar--sm{width:24px;height:24px;font-size:11px}.ui-avatar--md{width:32px;height:32px;font-size:13px}.ui-avatar--lg{width:40px;height:40px;font-size:15px}.ui-avatar--xl{width:48px;height:48px;font-size:18px}.ui-avatar--2xl{width:64px;height:64px;font-size:22px}.ui-avatar--3xl{width:80px;height:80px;font-size:28px}.ui-avatar__img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.ui-avatar__initials{line-height:1;letter-spacing:var(--tracking-wide);text-transform:uppercase;-webkit-user-select:none;user-select:none}.ui-avatar__icon{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.ui-avatar__chip{position:absolute;bottom:0;right:0;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;border:2px solid var(--color-bg)}.ui-avatar__chip--online{background:var(--color-success-500)}.ui-avatar__chip--idle{background:var(--color-warning-500)}.ui-avatar__chip--busy{background:var(--color-error-500)}.ui-avatar__chip--offline{background:var(--color-neutral-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span [class]="classes()" [attr.aria-label]="alt() ?? null">
+      @if (src() && !imgError()) {
+        <img
+          [src]="src()"
+          [alt]="alt() ?? ''"
+          (error)="onImgError()"
+          class="ui-avatar__img"
+        />
+      } @else if (initials()) {
+        <span class="ui-avatar__initials" aria-hidden="true">{{ initials() }}</span>
+      } @else {
+        <span class="ui-avatar__icon" aria-hidden="true">
+          <ng-content />
+        </span>
+      }
+
+      @if (chip()) {
+        <span
+          class="ui-avatar__chip"
+          [class]="'ui-avatar__chip--' + chipColor()"
+          [attr.aria-label]="chipAlt()"
+        ></span>
+      }
+    </span>
+  `, styles: [".ui-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-neutral-100);color:var(--color-neutral-500);overflow:hidden;flex-shrink:0;font-family:var(--font-sans);font-weight:var(--font-medium)}.ui-avatar--square{border-radius:var(--radius-md)}.ui-avatar--xs{width:20px;height:20px;font-size:10px}.ui-avatar--sm{width:24px;height:24px;font-size:11px}.ui-avatar--md{width:32px;height:32px;font-size:13px}.ui-avatar--lg{width:40px;height:40px;font-size:15px}.ui-avatar--xl{width:48px;height:48px;font-size:18px}.ui-avatar--2xl{width:64px;height:64px;font-size:22px}.ui-avatar--3xl{width:80px;height:80px;font-size:28px}.ui-avatar__img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.ui-avatar__initials{line-height:1;letter-spacing:var(--tracking-wide);text-transform:uppercase;-webkit-user-select:none;user-select:none}.ui-avatar__icon{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.ui-avatar__chip{position:absolute;bottom:0;right:0;width:30%;height:30%;min-width:8px;min-height:8px;border-radius:50%;border:2px solid var(--color-bg)}.ui-avatar__chip--online{background:var(--color-success-500)}.ui-avatar__chip--idle{background:var(--color-warning-500)}.ui-avatar__chip--busy{background:var(--color-error-500)}.ui-avatar__chip--offline{background:var(--color-neutral-400)}\n"] }]
+        }] });
+
+/**
+ * Badge Atom
+ * Source: Nuxt UI v3 — ❖ Badge
+ * Colors: Neutral | Primary | Secondary | Success | Info | Warning | Error
+ * Variants: Outline | Soft | Solid | Subtle
+ * Sizes: xs | sm | md | lg | xl
+ * RoundedFull: True | False
+ */
+class BadgeComponent {
+    constructor() {
+        this.variant = input('soft');
+        this.color = input('neutral');
+        this.size = input('md');
+        this.rounded = input(false);
+        this.dot = input(false);
+        this.classes = computed(() => {
+            const cls = ['ui-badge', `ui-badge--${this.variant()}`, `ui-badge--${this.color()}`, `ui-badge--${this.size()}`];
+            if (this.rounded())
+                cls.push('ui-badge--rounded');
+            return cls.join(' ');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: BadgeComponent, isStandalone: true, selector: "ui-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span [class]="classes()">
+      @if (dot()) {
+        <span class="ui-badge__dot" aria-hidden="true"></span>
+      }
+      <ng-content />
+    </span>
+  `, isInline: true, styles: [".ui-badge{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-sans);font-weight:var(--font-medium);white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-md)}.ui-badge--rounded{border-radius:var(--radius-full)}.ui-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.ui-badge--xs{padding:0 6px;font-size:var(--text-xs);height:18px}.ui-badge--sm{padding:0 8px;font-size:var(--text-xs);height:20px}.ui-badge--md{padding:0 10px;font-size:var(--text-sm);height:22px}.ui-badge--lg{padding:0 10px;font-size:var(--text-sm);height:24px}.ui-badge--xl{padding:0 12px;font-size:var(--text-md);height:28px}.ui-badge--primary.ui-badge--solid{background:var(--color-primary-500);color:#fff}.ui-badge--primary.ui-badge--outline{color:var(--color-primary-500);border-color:var(--color-primary-500);background:transparent}.ui-badge--primary.ui-badge--soft{background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-700)}.ui-badge--primary.ui-badge--subtle{background:color-mix(in srgb,var(--color-primary-500) 10%,transparent);color:var(--color-primary-600)}.ui-badge--neutral.ui-badge--solid{background:var(--color-neutral-800);color:#fff}.ui-badge--neutral.ui-badge--outline{color:var(--color-neutral-600);border-color:var(--color-neutral-300);background:transparent}.ui-badge--neutral.ui-badge--soft{background:var(--color-neutral-100);color:var(--color-neutral-700)}.ui-badge--neutral.ui-badge--subtle{background:var(--color-neutral-50);color:var(--color-neutral-600)}.ui-badge--success.ui-badge--solid{background:var(--color-success-500);color:#fff}.ui-badge--success.ui-badge--outline{color:var(--color-success-600);border-color:var(--color-success-500);background:transparent}.ui-badge--success.ui-badge--soft{background:color-mix(in srgb,var(--color-success-500) 15%,transparent);color:var(--color-success-700)}.ui-badge--success.ui-badge--subtle{background:color-mix(in srgb,var(--color-success-500) 10%,transparent);color:var(--color-success-600)}.ui-badge--warning.ui-badge--solid{background:var(--color-warning-500);color:#fff}.ui-badge--warning.ui-badge--outline{color:var(--color-warning-600);border-color:var(--color-warning-500);background:transparent}.ui-badge--warning.ui-badge--soft{background:color-mix(in srgb,var(--color-warning-500) 15%,transparent);color:var(--color-warning-700)}.ui-badge--warning.ui-badge--subtle{background:color-mix(in srgb,var(--color-warning-500) 10%,transparent);color:var(--color-warning-600)}.ui-badge--error.ui-badge--solid{background:var(--color-error-500);color:#fff}.ui-badge--error.ui-badge--outline{color:var(--color-error-600);border-color:var(--color-error-500);background:transparent}.ui-badge--error.ui-badge--soft{background:color-mix(in srgb,var(--color-error-500) 15%,transparent);color:var(--color-error-700)}.ui-badge--error.ui-badge--subtle{background:color-mix(in srgb,var(--color-error-500) 10%,transparent);color:var(--color-error-600)}.ui-badge--info.ui-badge--solid{background:var(--color-info-500);color:#fff}.ui-badge--info.ui-badge--outline{color:var(--color-info-600);border-color:var(--color-info-500);background:transparent}.ui-badge--info.ui-badge--soft{background:color-mix(in srgb,var(--color-info-500) 15%,transparent);color:var(--color-info-700)}.ui-badge--info.ui-badge--subtle{background:color-mix(in srgb,var(--color-info-500) 10%,transparent);color:var(--color-info-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span [class]="classes()">
+      @if (dot()) {
+        <span class="ui-badge__dot" aria-hidden="true"></span>
+      }
+      <ng-content />
+    </span>
+  `, styles: [".ui-badge{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-sans);font-weight:var(--font-medium);white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-md)}.ui-badge--rounded{border-radius:var(--radius-full)}.ui-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.ui-badge--xs{padding:0 6px;font-size:var(--text-xs);height:18px}.ui-badge--sm{padding:0 8px;font-size:var(--text-xs);height:20px}.ui-badge--md{padding:0 10px;font-size:var(--text-sm);height:22px}.ui-badge--lg{padding:0 10px;font-size:var(--text-sm);height:24px}.ui-badge--xl{padding:0 12px;font-size:var(--text-md);height:28px}.ui-badge--primary.ui-badge--solid{background:var(--color-primary-500);color:#fff}.ui-badge--primary.ui-badge--outline{color:var(--color-primary-500);border-color:var(--color-primary-500);background:transparent}.ui-badge--primary.ui-badge--soft{background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-700)}.ui-badge--primary.ui-badge--subtle{background:color-mix(in srgb,var(--color-primary-500) 10%,transparent);color:var(--color-primary-600)}.ui-badge--neutral.ui-badge--solid{background:var(--color-neutral-800);color:#fff}.ui-badge--neutral.ui-badge--outline{color:var(--color-neutral-600);border-color:var(--color-neutral-300);background:transparent}.ui-badge--neutral.ui-badge--soft{background:var(--color-neutral-100);color:var(--color-neutral-700)}.ui-badge--neutral.ui-badge--subtle{background:var(--color-neutral-50);color:var(--color-neutral-600)}.ui-badge--success.ui-badge--solid{background:var(--color-success-500);color:#fff}.ui-badge--success.ui-badge--outline{color:var(--color-success-600);border-color:var(--color-success-500);background:transparent}.ui-badge--success.ui-badge--soft{background:color-mix(in srgb,var(--color-success-500) 15%,transparent);color:var(--color-success-700)}.ui-badge--success.ui-badge--subtle{background:color-mix(in srgb,var(--color-success-500) 10%,transparent);color:var(--color-success-600)}.ui-badge--warning.ui-badge--solid{background:var(--color-warning-500);color:#fff}.ui-badge--warning.ui-badge--outline{color:var(--color-warning-600);border-color:var(--color-warning-500);background:transparent}.ui-badge--warning.ui-badge--soft{background:color-mix(in srgb,var(--color-warning-500) 15%,transparent);color:var(--color-warning-700)}.ui-badge--warning.ui-badge--subtle{background:color-mix(in srgb,var(--color-warning-500) 10%,transparent);color:var(--color-warning-600)}.ui-badge--error.ui-badge--solid{background:var(--color-error-500);color:#fff}.ui-badge--error.ui-badge--outline{color:var(--color-error-600);border-color:var(--color-error-500);background:transparent}.ui-badge--error.ui-badge--soft{background:color-mix(in srgb,var(--color-error-500) 15%,transparent);color:var(--color-error-700)}.ui-badge--error.ui-badge--subtle{background:color-mix(in srgb,var(--color-error-500) 10%,transparent);color:var(--color-error-600)}.ui-badge--info.ui-badge--solid{background:var(--color-info-500);color:#fff}.ui-badge--info.ui-badge--outline{color:var(--color-info-600);border-color:var(--color-info-500);background:transparent}.ui-badge--info.ui-badge--soft{background:color-mix(in srgb,var(--color-info-500) 15%,transparent);color:var(--color-info-700)}.ui-badge--info.ui-badge--subtle{background:color-mix(in srgb,var(--color-info-500) 10%,transparent);color:var(--color-info-600)}\n"] }]
+        }] });
+
+/**
+ * Button Atom
+ * Source: Nuxt UI v3 Design Kit — ❖ Button
+ *
+ * Variants: solid | outline | soft | subtle | ghost | link
+ * Sizes:    xs (h:24px) | sm (h:28px) | md (h:32px) | lg (h:36px) | xl (h:40px)
+ * States:   default | hover | focus | disabled | loading
+ *
+ * @example
+ * <ui-button variant="solid" color="primary" size="md">Click me</ui-button>
+ * <ui-button variant="outline" [loading]="true">Loading</ui-button>
+ * <ui-button [square]="true" leadingIcon="plus" />
+ */
+class ButtonComponent {
+    constructor() {
+        /** Visual variant — from Figma: Solid | Outline | Soft | Subtle | Ghost | Link */
+        this.variant = input('solid');
+        /** Color theme */
+        this.color = input('primary');
+        /** Size — from Figma: xs(h:24) sm(h:28) md(h:32) lg(h:36) xl(h:40) */
+        this.size = input('md');
+        /** Disabled state */
+        this.disabled = input(false);
+        /** Loading state — shows spinner */
+        this.loading = input(false);
+        /** Position of the spinner */
+        this.loadingPosition = input('leading');
+        /** Square/icon-only mode */
+        this.square = input(false);
+        /** Full width */
+        this.block = input(false);
+        /** Leading icon name (for aria/slot reference) */
+        this.leadingIcon = input(null);
+        /** Trailing icon name */
+        this.trailingIcon = input(null);
+        /** HTML button type */
+        this.type = input('button');
+        /** Accessible label for icon-only buttons */
+        this.ariaLabel = input(null);
+        this.hostClasses = computed(() => {
+            const classes = [
+                'ui-btn',
+                `ui-btn--${this.variant()}`,
+                `ui-btn--${this.color()}`,
+                `ui-btn--${this.size()}`,
+            ];
+            if (this.square())
+                classes.push('ui-btn--square');
+            if (this.block())
+                classes.push('ui-btn--block');
+            if (this.loading())
+                classes.push('ui-btn--loading');
+            if (this.disabled())
+                classes.push('ui-btn--disabled');
+            return classes.join(' ');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ButtonComponent, isStandalone: true, selector: "ui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingPosition: { classPropertyName: "loadingPosition", publicName: "loadingPosition", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <button
+      [type]="type()"
+      [disabled]="disabled() || loading()"
+      [class]="hostClasses()"
+      [attr.aria-disabled]="disabled() || loading()"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-busy]="loading()"
+    >
+      <!-- Leading icon -->
+      @if (loading() && loadingPosition() === 'leading') {
+        <span class="ui-btn__spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+          </svg>
+        </span>
+      } @else if (leadingIcon() && !square()) {
+        <span class="ui-btn__icon ui-btn__icon--leading" aria-hidden="true">
+          <ng-content select="[slot=leading-icon]" />
+        </span>
+      }
+
+      <!-- Label -->
+      @if (!square()) {
+        <span class="ui-btn__label">
+          <ng-content />
+        </span>
+      }
+
+      <!-- Trailing icon or square icon -->
+      @if (loading() && loadingPosition() === 'trailing') {
+        <span class="ui-btn__spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+          </svg>
+        </span>
+      } @else if (trailingIcon() && !square()) {
+        <span class="ui-btn__icon ui-btn__icon--trailing" aria-hidden="true">
+          <ng-content select="[slot=trailing-icon]" />
+        </span>
+      }
+
+      <!-- Square/icon-only mode -->
+      @if (square()) {
+        <span class="ui-btn__icon" aria-hidden="true">
+          <ng-content select="[slot=icon]" />
+        </span>
+      }
+    </button>
+  `, isInline: true, styles: [".ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--font-medium);text-decoration:none;outline:none;transition:var(--transition-colors);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.ui-btn:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-btn--xs{height:var(--size-xs);padding:4px 8px;font-size:var(--text-xs)}.ui-btn--xs .ui-btn__icon{width:var(--icon-xs);height:var(--icon-xs)}.ui-btn--xs.ui-btn--square{width:var(--size-xs);padding:0}.ui-btn--sm{height:var(--size-sm);padding:6px 10px;font-size:var(--text-xs)}.ui-btn--sm .ui-btn__icon{width:var(--icon-sm);height:var(--icon-sm)}.ui-btn--sm.ui-btn--square{width:var(--size-sm);padding:0}.ui-btn--md{height:var(--size-md);padding:6px 10px;font-size:var(--text-sm)}.ui-btn--md .ui-btn__icon{width:var(--icon-md);height:var(--icon-md)}.ui-btn--md.ui-btn--square{width:var(--size-md);padding:0}.ui-btn--lg{height:var(--size-lg);padding:8px 12px;font-size:var(--text-sm)}.ui-btn--lg .ui-btn__icon{width:var(--icon-md);height:var(--icon-md)}.ui-btn--lg.ui-btn--square{width:var(--size-lg);padding:0}.ui-btn--xl{height:var(--size-xl);padding:8px 12px;font-size:var(--text-md)}.ui-btn--xl .ui-btn__icon{width:var(--icon-lg);height:var(--icon-lg)}.ui-btn--xl.ui-btn--square{width:var(--size-xl);padding:0}.ui-btn--block{width:100%}.ui-btn__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.ui-btn__spinner{display:flex;align-items:center;width:1em;height:1em;flex-shrink:0}.ui-btn__spinner svg{width:100%;height:100%;animation:ui-spin .75s linear infinite}.ui-btn[disabled],.ui-btn--disabled{cursor:not-allowed;opacity:.5}.ui-btn--loading{cursor:wait}.ui-btn--primary.ui-btn--solid{background:var(--color-primary-500);color:var(--color-neutral-0)}.ui-btn--primary.ui-btn--solid:hover:not([disabled]){background:var(--color-primary-600)}.ui-btn--primary.ui-btn--solid:active:not([disabled]){background:var(--color-primary-700)}.ui-btn--primary.ui-btn--outline{background:transparent;color:var(--color-primary-500);border-color:var(--color-primary-500)}.ui-btn--primary.ui-btn--outline:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 10%,transparent)}.ui-btn--primary.ui-btn--soft{background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-700)}.ui-btn--primary.ui-btn--soft:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.ui-btn--primary.ui-btn--subtle{background:transparent;color:var(--color-primary-500)}.ui-btn--primary.ui-btn--subtle:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 10%,transparent)}.ui-btn--primary.ui-btn--ghost{background:transparent;color:var(--color-primary-500)}.ui-btn--primary.ui-btn--ghost:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 8%,transparent)}.ui-btn--primary.ui-btn--link{background:transparent;color:var(--color-primary-500);text-decoration:underline;padding-left:0;padding-right:0;height:auto}.ui-btn--primary.ui-btn--link:hover:not([disabled]){color:var(--color-primary-600)}.ui-btn--neutral.ui-btn--solid{background:var(--color-neutral-900);color:var(--color-neutral-0)}.ui-btn--neutral.ui-btn--solid:hover:not([disabled]){background:var(--color-neutral-800)}.ui-btn--neutral.ui-btn--outline{background:transparent;color:var(--color-neutral-700);border-color:var(--color-neutral-300)}.ui-btn--neutral.ui-btn--outline:hover:not([disabled]){background:var(--color-neutral-50)}.ui-btn--neutral.ui-btn--soft{background:var(--color-neutral-100);color:var(--color-neutral-700)}.ui-btn--neutral.ui-btn--soft:hover:not([disabled]){background:var(--color-neutral-200)}.ui-btn--neutral.ui-btn--subtle{background:transparent;color:var(--color-neutral-600)}.ui-btn--neutral.ui-btn--subtle:hover:not([disabled]){background:var(--color-neutral-100)}.ui-btn--neutral.ui-btn--ghost{background:transparent;color:var(--color-neutral-600)}.ui-btn--neutral.ui-btn--ghost:hover:not([disabled]){background:var(--color-neutral-100)}.ui-btn--neutral.ui-btn--link{background:transparent;color:var(--color-neutral-600);text-decoration:underline;padding-left:0;padding-right:0;height:auto}.ui-btn--success.ui-btn--solid{background:var(--color-success-500);color:var(--color-neutral-0)}.ui-btn--success.ui-btn--solid:hover:not([disabled]){background:var(--color-success-600)}.ui-btn--success.ui-btn--outline{background:transparent;color:var(--color-success-600);border-color:var(--color-success-500)}.ui-btn--success.ui-btn--soft{background:color-mix(in srgb,var(--color-success-500) 15%,transparent);color:var(--color-success-700)}.ui-btn--success.ui-btn--subtle,.ui-btn--success.ui-btn--ghost{background:transparent;color:var(--color-success-600)}.ui-btn--warning.ui-btn--solid{background:var(--color-warning-500);color:var(--color-neutral-0)}.ui-btn--warning.ui-btn--solid:hover:not([disabled]){background:var(--color-warning-600)}.ui-btn--warning.ui-btn--outline{background:transparent;color:var(--color-warning-600);border-color:var(--color-warning-500)}.ui-btn--warning.ui-btn--soft{background:color-mix(in srgb,var(--color-warning-500) 15%,transparent);color:var(--color-warning-700)}.ui-btn--warning.ui-btn--subtle,.ui-btn--warning.ui-btn--ghost{background:transparent;color:var(--color-warning-600)}.ui-btn--error.ui-btn--solid{background:var(--color-error-500);color:var(--color-neutral-0)}.ui-btn--error.ui-btn--solid:hover:not([disabled]){background:var(--color-error-600)}.ui-btn--error.ui-btn--outline{background:transparent;color:var(--color-error-600);border-color:var(--color-error-500)}.ui-btn--error.ui-btn--soft{background:color-mix(in srgb,var(--color-error-500) 15%,transparent);color:var(--color-error-700)}.ui-btn--error.ui-btn--subtle,.ui-btn--error.ui-btn--ghost{background:transparent;color:var(--color-error-600)}.ui-btn--info.ui-btn--solid{background:var(--color-info-500);color:var(--color-neutral-0)}.ui-btn--info.ui-btn--solid:hover:not([disabled]){background:var(--color-info-600)}.ui-btn--info.ui-btn--outline{background:transparent;color:var(--color-info-600);border-color:var(--color-info-500)}.ui-btn--info.ui-btn--soft{background:color-mix(in srgb,var(--color-info-500) 15%,transparent);color:var(--color-info-700)}.ui-btn--info.ui-btn--subtle,.ui-btn--info.ui-btn--ghost{background:transparent;color:var(--color-info-600)}@keyframes ui-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <button
+      [type]="type()"
+      [disabled]="disabled() || loading()"
+      [class]="hostClasses()"
+      [attr.aria-disabled]="disabled() || loading()"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-busy]="loading()"
+    >
+      <!-- Leading icon -->
+      @if (loading() && loadingPosition() === 'leading') {
+        <span class="ui-btn__spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+          </svg>
+        </span>
+      } @else if (leadingIcon() && !square()) {
+        <span class="ui-btn__icon ui-btn__icon--leading" aria-hidden="true">
+          <ng-content select="[slot=leading-icon]" />
+        </span>
+      }
+
+      <!-- Label -->
+      @if (!square()) {
+        <span class="ui-btn__label">
+          <ng-content />
+        </span>
+      }
+
+      <!-- Trailing icon or square icon -->
+      @if (loading() && loadingPosition() === 'trailing') {
+        <span class="ui-btn__spinner" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10" stroke-opacity="0.25"/>
+            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
+          </svg>
+        </span>
+      } @else if (trailingIcon() && !square()) {
+        <span class="ui-btn__icon ui-btn__icon--trailing" aria-hidden="true">
+          <ng-content select="[slot=trailing-icon]" />
+        </span>
+      }
+
+      <!-- Square/icon-only mode -->
+      @if (square()) {
+        <span class="ui-btn__icon" aria-hidden="true">
+          <ng-content select="[slot=icon]" />
+        </span>
+      }
+    </button>
+  `, styles: [".ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;cursor:pointer;border:1px solid transparent;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--font-medium);text-decoration:none;outline:none;transition:var(--transition-colors);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.ui-btn:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-btn--xs{height:var(--size-xs);padding:4px 8px;font-size:var(--text-xs)}.ui-btn--xs .ui-btn__icon{width:var(--icon-xs);height:var(--icon-xs)}.ui-btn--xs.ui-btn--square{width:var(--size-xs);padding:0}.ui-btn--sm{height:var(--size-sm);padding:6px 10px;font-size:var(--text-xs)}.ui-btn--sm .ui-btn__icon{width:var(--icon-sm);height:var(--icon-sm)}.ui-btn--sm.ui-btn--square{width:var(--size-sm);padding:0}.ui-btn--md{height:var(--size-md);padding:6px 10px;font-size:var(--text-sm)}.ui-btn--md .ui-btn__icon{width:var(--icon-md);height:var(--icon-md)}.ui-btn--md.ui-btn--square{width:var(--size-md);padding:0}.ui-btn--lg{height:var(--size-lg);padding:8px 12px;font-size:var(--text-sm)}.ui-btn--lg .ui-btn__icon{width:var(--icon-md);height:var(--icon-md)}.ui-btn--lg.ui-btn--square{width:var(--size-lg);padding:0}.ui-btn--xl{height:var(--size-xl);padding:8px 12px;font-size:var(--text-md)}.ui-btn--xl .ui-btn__icon{width:var(--icon-lg);height:var(--icon-lg)}.ui-btn--xl.ui-btn--square{width:var(--size-xl);padding:0}.ui-btn--block{width:100%}.ui-btn__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.ui-btn__spinner{display:flex;align-items:center;width:1em;height:1em;flex-shrink:0}.ui-btn__spinner svg{width:100%;height:100%;animation:ui-spin .75s linear infinite}.ui-btn[disabled],.ui-btn--disabled{cursor:not-allowed;opacity:.5}.ui-btn--loading{cursor:wait}.ui-btn--primary.ui-btn--solid{background:var(--color-primary-500);color:var(--color-neutral-0)}.ui-btn--primary.ui-btn--solid:hover:not([disabled]){background:var(--color-primary-600)}.ui-btn--primary.ui-btn--solid:active:not([disabled]){background:var(--color-primary-700)}.ui-btn--primary.ui-btn--outline{background:transparent;color:var(--color-primary-500);border-color:var(--color-primary-500)}.ui-btn--primary.ui-btn--outline:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 10%,transparent)}.ui-btn--primary.ui-btn--soft{background:color-mix(in srgb,var(--color-primary-500) 15%,transparent);color:var(--color-primary-700)}.ui-btn--primary.ui-btn--soft:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.ui-btn--primary.ui-btn--subtle{background:transparent;color:var(--color-primary-500)}.ui-btn--primary.ui-btn--subtle:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 10%,transparent)}.ui-btn--primary.ui-btn--ghost{background:transparent;color:var(--color-primary-500)}.ui-btn--primary.ui-btn--ghost:hover:not([disabled]){background:color-mix(in srgb,var(--color-primary-500) 8%,transparent)}.ui-btn--primary.ui-btn--link{background:transparent;color:var(--color-primary-500);text-decoration:underline;padding-left:0;padding-right:0;height:auto}.ui-btn--primary.ui-btn--link:hover:not([disabled]){color:var(--color-primary-600)}.ui-btn--neutral.ui-btn--solid{background:var(--color-neutral-900);color:var(--color-neutral-0)}.ui-btn--neutral.ui-btn--solid:hover:not([disabled]){background:var(--color-neutral-800)}.ui-btn--neutral.ui-btn--outline{background:transparent;color:var(--color-neutral-700);border-color:var(--color-neutral-300)}.ui-btn--neutral.ui-btn--outline:hover:not([disabled]){background:var(--color-neutral-50)}.ui-btn--neutral.ui-btn--soft{background:var(--color-neutral-100);color:var(--color-neutral-700)}.ui-btn--neutral.ui-btn--soft:hover:not([disabled]){background:var(--color-neutral-200)}.ui-btn--neutral.ui-btn--subtle{background:transparent;color:var(--color-neutral-600)}.ui-btn--neutral.ui-btn--subtle:hover:not([disabled]){background:var(--color-neutral-100)}.ui-btn--neutral.ui-btn--ghost{background:transparent;color:var(--color-neutral-600)}.ui-btn--neutral.ui-btn--ghost:hover:not([disabled]){background:var(--color-neutral-100)}.ui-btn--neutral.ui-btn--link{background:transparent;color:var(--color-neutral-600);text-decoration:underline;padding-left:0;padding-right:0;height:auto}.ui-btn--success.ui-btn--solid{background:var(--color-success-500);color:var(--color-neutral-0)}.ui-btn--success.ui-btn--solid:hover:not([disabled]){background:var(--color-success-600)}.ui-btn--success.ui-btn--outline{background:transparent;color:var(--color-success-600);border-color:var(--color-success-500)}.ui-btn--success.ui-btn--soft{background:color-mix(in srgb,var(--color-success-500) 15%,transparent);color:var(--color-success-700)}.ui-btn--success.ui-btn--subtle,.ui-btn--success.ui-btn--ghost{background:transparent;color:var(--color-success-600)}.ui-btn--warning.ui-btn--solid{background:var(--color-warning-500);color:var(--color-neutral-0)}.ui-btn--warning.ui-btn--solid:hover:not([disabled]){background:var(--color-warning-600)}.ui-btn--warning.ui-btn--outline{background:transparent;color:var(--color-warning-600);border-color:var(--color-warning-500)}.ui-btn--warning.ui-btn--soft{background:color-mix(in srgb,var(--color-warning-500) 15%,transparent);color:var(--color-warning-700)}.ui-btn--warning.ui-btn--subtle,.ui-btn--warning.ui-btn--ghost{background:transparent;color:var(--color-warning-600)}.ui-btn--error.ui-btn--solid{background:var(--color-error-500);color:var(--color-neutral-0)}.ui-btn--error.ui-btn--solid:hover:not([disabled]){background:var(--color-error-600)}.ui-btn--error.ui-btn--outline{background:transparent;color:var(--color-error-600);border-color:var(--color-error-500)}.ui-btn--error.ui-btn--soft{background:color-mix(in srgb,var(--color-error-500) 15%,transparent);color:var(--color-error-700)}.ui-btn--error.ui-btn--subtle,.ui-btn--error.ui-btn--ghost{background:transparent;color:var(--color-error-600)}.ui-btn--info.ui-btn--solid{background:var(--color-info-500);color:var(--color-neutral-0)}.ui-btn--info.ui-btn--solid:hover:not([disabled]){background:var(--color-info-600)}.ui-btn--info.ui-btn--outline{background:transparent;color:var(--color-info-600);border-color:var(--color-info-500)}.ui-btn--info.ui-btn--soft{background:color-mix(in srgb,var(--color-info-500) 15%,transparent);color:var(--color-info-700)}.ui-btn--info.ui-btn--subtle,.ui-btn--info.ui-btn--ghost{background:transparent;color:var(--color-info-600)}@keyframes ui-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+/**
+ * Checkbox Atom — Source: Nuxt UI v3 ❖ Checkbox
+ * CVA-compatible, accessible (ARIA), indeterminate state
+ */
+class CheckboxComponent {
+    constructor() {
+        this.size = input('md');
+        this.color = input('primary');
+        this.label = input(null);
+        this.disabled = input(false);
+        this.indeterminate = input(false);
+        this.required = input(false);
+        this.ariaLabel = input(null);
+        this.checked = model(false);
+        this._onChange = () => { };
+        this._onTouched = () => { };
+    }
+    writeValue(v) { this.checked.set(v); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(_) { }
+    onChange(e) {
+        const checked = e.target.checked;
+        this.checked.set(checked);
+        this._onChange(checked);
+        this._onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: CheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }], ngImport: i0, template: `
+    <label class="ui-checkbox" [class.ui-checkbox--disabled]="disabled()">
+      <span class="ui-checkbox__control ui-checkbox__control--{{ size() }} ui-checkbox__control--{{ color() }}"
+        [class.ui-checkbox__control--checked]="checked()"
+        [class.ui-checkbox__control--indeterminate]="indeterminate()">
+        <input
+          type="checkbox"
+          class="ui-checkbox__input"
+          [checked]="checked()"
+          [disabled]="disabled()"
+          [indeterminate]="indeterminate()"
+          [attr.aria-label]="ariaLabel() ?? null"
+          (change)="onChange($event)"
+        />
+        @if (indeterminate()) {
+          <span class="ui-checkbox__icon ui-checkbox__icon--indeterminate" aria-hidden="true">—</span>
+        } @else if (checked()) {
+          <span class="ui-checkbox__icon" aria-hidden="true">✓</span>
+        }
+      </span>
+      @if (label()) {
+        <span class="ui-checkbox__label ui-checkbox__label--{{ size() }}">
+          {{ label() }}
+          @if (required()) { <span class="ui-checkbox__required" aria-hidden="true">*</span> }
+        </span>
+      }
+    </label>
+  `, isInline: true, styles: [".ui-checkbox{display:inline-flex;align-items:flex-start;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ui-checkbox--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-checkbox__input{position:absolute;opacity:0;width:0;height:0}.ui-checkbox__control{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);transition:var(--transition-colors)}.ui-checkbox__control--xs{width:14px;height:14px}.ui-checkbox__control--sm{width:16px;height:16px}.ui-checkbox__control--md{width:18px;height:18px}.ui-checkbox__control--lg{width:20px;height:20px}.ui-checkbox__control--xl{width:22px;height:22px}.ui-checkbox__control--checked.ui-checkbox__control--primary,.ui-checkbox__control--indeterminate.ui-checkbox__control--primary{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--neutral,.ui-checkbox__control--indeterminate.ui-checkbox__control--neutral{background:var(--color-neutral-800);border-color:var(--color-neutral-800);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--success,.ui-checkbox__control--indeterminate.ui-checkbox__control--success{background:var(--color-success-500);border-color:var(--color-success-500);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--error,.ui-checkbox__control--indeterminate.ui-checkbox__control--error{background:var(--color-error-500);border-color:var(--color-error-500);color:#fff}.ui-checkbox__control:focus-within{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-checkbox__icon{font-size:11px;font-weight:700;line-height:1}.ui-checkbox__label{font-family:var(--font-sans);color:var(--color-text)}.ui-checkbox__label--xs,.ui-checkbox__label--sm{font-size:var(--text-xs)}.ui-checkbox__label--md{font-size:var(--text-sm)}.ui-checkbox__label--lg{font-size:var(--text-md)}.ui-checkbox__label--xl{font-size:var(--text-lg)}.ui-checkbox__required{color:var(--color-error-500);margin-left:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-checkbox', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }], template: `
+    <label class="ui-checkbox" [class.ui-checkbox--disabled]="disabled()">
+      <span class="ui-checkbox__control ui-checkbox__control--{{ size() }} ui-checkbox__control--{{ color() }}"
+        [class.ui-checkbox__control--checked]="checked()"
+        [class.ui-checkbox__control--indeterminate]="indeterminate()">
+        <input
+          type="checkbox"
+          class="ui-checkbox__input"
+          [checked]="checked()"
+          [disabled]="disabled()"
+          [indeterminate]="indeterminate()"
+          [attr.aria-label]="ariaLabel() ?? null"
+          (change)="onChange($event)"
+        />
+        @if (indeterminate()) {
+          <span class="ui-checkbox__icon ui-checkbox__icon--indeterminate" aria-hidden="true">—</span>
+        } @else if (checked()) {
+          <span class="ui-checkbox__icon" aria-hidden="true">✓</span>
+        }
+      </span>
+      @if (label()) {
+        <span class="ui-checkbox__label ui-checkbox__label--{{ size() }}">
+          {{ label() }}
+          @if (required()) { <span class="ui-checkbox__required" aria-hidden="true">*</span> }
+        </span>
+      }
+    </label>
+  `, styles: [".ui-checkbox{display:inline-flex;align-items:flex-start;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.ui-checkbox--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-checkbox__input{position:absolute;opacity:0;width:0;height:0}.ui-checkbox__control{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);transition:var(--transition-colors)}.ui-checkbox__control--xs{width:14px;height:14px}.ui-checkbox__control--sm{width:16px;height:16px}.ui-checkbox__control--md{width:18px;height:18px}.ui-checkbox__control--lg{width:20px;height:20px}.ui-checkbox__control--xl{width:22px;height:22px}.ui-checkbox__control--checked.ui-checkbox__control--primary,.ui-checkbox__control--indeterminate.ui-checkbox__control--primary{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--neutral,.ui-checkbox__control--indeterminate.ui-checkbox__control--neutral{background:var(--color-neutral-800);border-color:var(--color-neutral-800);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--success,.ui-checkbox__control--indeterminate.ui-checkbox__control--success{background:var(--color-success-500);border-color:var(--color-success-500);color:#fff}.ui-checkbox__control--checked.ui-checkbox__control--error,.ui-checkbox__control--indeterminate.ui-checkbox__control--error{background:var(--color-error-500);border-color:var(--color-error-500);color:#fff}.ui-checkbox__control:focus-within{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-checkbox__icon{font-size:11px;font-weight:700;line-height:1}.ui-checkbox__label{font-family:var(--font-sans);color:var(--color-text)}.ui-checkbox__label--xs,.ui-checkbox__label--sm{font-size:var(--text-xs)}.ui-checkbox__label--md{font-size:var(--text-sm)}.ui-checkbox__label--lg{font-size:var(--text-md)}.ui-checkbox__label--xl{font-size:var(--text-lg)}.ui-checkbox__required{color:var(--color-error-500);margin-left:2px}\n"] }]
+        }] });
+
+/**
+ * Chip Atom — Source: Nuxt UI v3 ❖ Chip
+ * Small indicator overlaid on another element (e.g., notification dot)
+ */
+class ChipComponent {
+    constructor() {
+        this.color = input('primary');
+        this.size = input('md');
+        this.position = input('top-right');
+        this.text = input(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ChipComponent, isStandalone: true, selector: "ui-chip", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="ui-chip-wrap">
+      <ng-content />
+      <span [class]="'ui-chip ui-chip--' + color() + ' ui-chip--' + size() + ' ui-chip--' + position()">
+        @if (text()) { {{ text() }} }
+      </span>
+    </span>
+  `, isInline: true, styles: [".ui-chip-wrap{position:relative;display:inline-flex}.ui-chip{position:absolute;border:2px solid var(--color-bg);border-radius:var(--radius-full);font-family:var(--font-sans);font-weight:var(--font-medium);font-size:10px;display:flex;align-items:center;justify-content:center;z-index:var(--z-raised)}.ui-chip--xs{min-width:8px;height:8px;padding:0}.ui-chip--sm{min-width:10px;height:10px;padding:0}.ui-chip--md{min-width:16px;height:16px;padding:0 4px}.ui-chip--lg{min-width:18px;height:18px;padding:0 5px}.ui-chip--xl{min-width:20px;height:20px;padding:0 6px}.ui-chip--top-right{top:0;right:0;transform:translate(30%,-30%)}.ui-chip--top-left{top:0;left:0;transform:translate(-30%,-30%)}.ui-chip--bottom-right{bottom:0;right:0;transform:translate(30%,30%)}.ui-chip--bottom-left{bottom:0;left:0;transform:translate(-30%,30%)}.ui-chip--primary{background:var(--color-primary-500);color:#fff}.ui-chip--secondary{background:var(--color-secondary-500);color:#fff}.ui-chip--neutral{background:var(--color-neutral-500);color:#fff}.ui-chip--success{background:var(--color-success-500);color:#fff}.ui-chip--warning{background:var(--color-warning-500);color:#fff}.ui-chip--error{background:var(--color-error-500);color:#fff}.ui-chip--info{background:var(--color-info-500);color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span class="ui-chip-wrap">
+      <ng-content />
+      <span [class]="'ui-chip ui-chip--' + color() + ' ui-chip--' + size() + ' ui-chip--' + position()">
+        @if (text()) { {{ text() }} }
+      </span>
+    </span>
+  `, styles: [".ui-chip-wrap{position:relative;display:inline-flex}.ui-chip{position:absolute;border:2px solid var(--color-bg);border-radius:var(--radius-full);font-family:var(--font-sans);font-weight:var(--font-medium);font-size:10px;display:flex;align-items:center;justify-content:center;z-index:var(--z-raised)}.ui-chip--xs{min-width:8px;height:8px;padding:0}.ui-chip--sm{min-width:10px;height:10px;padding:0}.ui-chip--md{min-width:16px;height:16px;padding:0 4px}.ui-chip--lg{min-width:18px;height:18px;padding:0 5px}.ui-chip--xl{min-width:20px;height:20px;padding:0 6px}.ui-chip--top-right{top:0;right:0;transform:translate(30%,-30%)}.ui-chip--top-left{top:0;left:0;transform:translate(-30%,-30%)}.ui-chip--bottom-right{bottom:0;right:0;transform:translate(30%,30%)}.ui-chip--bottom-left{bottom:0;left:0;transform:translate(-30%,30%)}.ui-chip--primary{background:var(--color-primary-500);color:#fff}.ui-chip--secondary{background:var(--color-secondary-500);color:#fff}.ui-chip--neutral{background:var(--color-neutral-500);color:#fff}.ui-chip--success{background:var(--color-success-500);color:#fff}.ui-chip--warning{background:var(--color-warning-500);color:#fff}.ui-chip--error{background:var(--color-error-500);color:#fff}.ui-chip--info{background:var(--color-info-500);color:#fff}\n"] }]
+        }] });
+
+/**
+ * Kbd Atom — Source: Nuxt UI v3 ❖ Kbd
+ * Keyboard key indicator
+ */
+class KbdComponent {
+    constructor() {
+        this.size = input('md');
+        this.variant = input('outline');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: KbdComponent, isStandalone: true, selector: "ui-kbd", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<kbd [class]="'ui-kbd ui-kbd--' + size() + ' ui-kbd--' + variant()"><ng-content /></kbd>`, isInline: true, styles: [".ui-kbd{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:var(--font-medium);border-radius:var(--radius-md);white-space:nowrap}.ui-kbd--xs{padding:1px 4px;font-size:10px}.ui-kbd--sm{padding:2px 6px;font-size:11px}.ui-kbd--md{padding:2px 8px;font-size:12px}.ui-kbd--lg{padding:3px 10px;font-size:13px}.ui-kbd--xl{padding:4px 12px;font-size:14px}.ui-kbd--solid{background:var(--color-neutral-800);color:#fff}.ui-kbd--outline{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);box-shadow:0 1px 0 var(--color-border)}.ui-kbd--subtle{background:var(--color-neutral-100);color:var(--color-neutral-700)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbdComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-kbd', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<kbd [class]="'ui-kbd ui-kbd--' + size() + ' ui-kbd--' + variant()"><ng-content /></kbd>`, styles: [".ui-kbd{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:var(--font-medium);border-radius:var(--radius-md);white-space:nowrap}.ui-kbd--xs{padding:1px 4px;font-size:10px}.ui-kbd--sm{padding:2px 6px;font-size:11px}.ui-kbd--md{padding:2px 8px;font-size:12px}.ui-kbd--lg{padding:3px 10px;font-size:13px}.ui-kbd--xl{padding:4px 12px;font-size:14px}.ui-kbd--solid{background:var(--color-neutral-800);color:#fff}.ui-kbd--outline{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);box-shadow:0 1px 0 var(--color-border)}.ui-kbd--subtle{background:var(--color-neutral-100);color:var(--color-neutral-700)}\n"] }]
+        }] });
+
+/**
+ * Link Atom — Source: Nuxt UI v3 ❖ Link
+ * Router-aware link with external support
+ */
+class LinkComponent {
+    constructor() {
+        this.href = input(null);
+        this.to = input(null);
+        this.external = input(false);
+        this.inactive = input(false);
+        this.classes = input('ui-link');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: LinkComponent, isStandalone: true, selector: "ui-link", inputs: { href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, to: { classPropertyName: "to", publicName: "to", isSignal: true, isRequired: false, transformFunction: null }, external: { classPropertyName: "external", publicName: "external", isSignal: true, isRequired: false, transformFunction: null }, inactive: { classPropertyName: "inactive", publicName: "inactive", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (external()) {
+      <a [href]="href()" [class]="classes()" target="_blank" rel="noopener noreferrer">
+        <ng-content />
+      </a>
+    } @else if (href()) {
+      <a [href]="href()" [class]="classes()"><ng-content /></a>
+    } @else {
+      <a [routerLink]="to()" [class]="classes()"><ng-content /></a>
+    }
+  `, isInline: true, styles: [".ui-link{color:var(--color-primary-500);text-decoration:none;font-family:var(--font-sans);transition:color var(--transition-fast);cursor:pointer}.ui-link:hover{color:var(--color-primary-600);text-decoration:underline}.ui-link:visited{color:var(--color-primary-700)}.ui-link:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px;border-radius:var(--radius-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-link', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (external()) {
+      <a [href]="href()" [class]="classes()" target="_blank" rel="noopener noreferrer">
+        <ng-content />
+      </a>
+    } @else if (href()) {
+      <a [href]="href()" [class]="classes()"><ng-content /></a>
+    } @else {
+      <a [routerLink]="to()" [class]="classes()"><ng-content /></a>
+    }
+  `, styles: [".ui-link{color:var(--color-primary-500);text-decoration:none;font-family:var(--font-sans);transition:color var(--transition-fast);cursor:pointer}.ui-link:hover{color:var(--color-primary-600);text-decoration:underline}.ui-link:visited{color:var(--color-primary-700)}.ui-link:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px;border-radius:var(--radius-sm)}\n"] }]
+        }] });
+
+/**
+ * Progress Atom — Source: Nuxt UI v3 ❖ Progress
+ * Linear progress bar with indeterminate support
+ */
+class ProgressComponent {
+    constructor() {
+        this.value = input(0);
+        this.max = input(100);
+        this.size = input('md');
+        this.color = input('primary');
+        this.indeterminate = input(false);
+        this.label = input(null);
+        this.showValue = input(false);
+        this.percentage = computed(() => Math.min(100, Math.max(0, Math.round((this.value() / this.max()) * 100))));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ProgressComponent, isStandalone: true, selector: "ui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="ui-progress" [class]="'ui-progress--' + size()">
+      @if (label()) {
+        <div class="ui-progress__label">{{ label() }}</div>
+      }
+      <div
+        class="ui-progress__track"
+        role="progressbar"
+        [attr.aria-valuenow]="indeterminate() ? null : value()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-label]="label() ?? 'Progress'"
+      >
+        <div
+          class="ui-progress__bar"
+          [class]="'ui-progress__bar--' + color() + (indeterminate() ? ' ui-progress__bar--indeterminate' : '')"
+          [style.width]="indeterminate() ? null : percentage() + '%'"
+        ></div>
+      </div>
+      @if (showValue() && !indeterminate()) {
+        <span class="ui-progress__value">{{ percentage() }}%</span>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-progress{display:flex;flex-direction:column;gap:var(--spacing-1)}.ui-progress--xs .ui-progress__track{height:4px;border-radius:var(--radius-full)}.ui-progress--sm .ui-progress__track{height:6px;border-radius:var(--radius-full)}.ui-progress--md .ui-progress__track{height:8px;border-radius:var(--radius-full)}.ui-progress--lg .ui-progress__track{height:10px;border-radius:var(--radius-full)}.ui-progress--xl .ui-progress__track{height:12px;border-radius:var(--radius-full)}.ui-progress__track{width:100%;background:var(--color-neutral-100);overflow:hidden}.ui-progress__bar{height:100%;border-radius:inherit;transition:width var(--transition-slow)}.ui-progress__bar--primary{background:var(--color-primary-500)}.ui-progress__bar--neutral{background:var(--color-neutral-600)}.ui-progress__bar--success{background:var(--color-success-500)}.ui-progress__bar--warning{background:var(--color-warning-500)}.ui-progress__bar--error{background:var(--color-error-500)}.ui-progress__bar--info{background:var(--color-info-500)}.ui-progress__bar--indeterminate{width:40%!important;animation:ui-progress-slide 1.5s ease-in-out infinite}.ui-progress__label{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text)}.ui-progress__value{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-text-muted);text-align:right}@keyframes ui-progress-slide{0%{transform:translate(-150%)}to{transform:translate(350%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-progress', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ui-progress" [class]="'ui-progress--' + size()">
+      @if (label()) {
+        <div class="ui-progress__label">{{ label() }}</div>
+      }
+      <div
+        class="ui-progress__track"
+        role="progressbar"
+        [attr.aria-valuenow]="indeterminate() ? null : value()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-label]="label() ?? 'Progress'"
+      >
+        <div
+          class="ui-progress__bar"
+          [class]="'ui-progress__bar--' + color() + (indeterminate() ? ' ui-progress__bar--indeterminate' : '')"
+          [style.width]="indeterminate() ? null : percentage() + '%'"
+        ></div>
+      </div>
+      @if (showValue() && !indeterminate()) {
+        <span class="ui-progress__value">{{ percentage() }}%</span>
+      }
+    </div>
+  `, styles: [".ui-progress{display:flex;flex-direction:column;gap:var(--spacing-1)}.ui-progress--xs .ui-progress__track{height:4px;border-radius:var(--radius-full)}.ui-progress--sm .ui-progress__track{height:6px;border-radius:var(--radius-full)}.ui-progress--md .ui-progress__track{height:8px;border-radius:var(--radius-full)}.ui-progress--lg .ui-progress__track{height:10px;border-radius:var(--radius-full)}.ui-progress--xl .ui-progress__track{height:12px;border-radius:var(--radius-full)}.ui-progress__track{width:100%;background:var(--color-neutral-100);overflow:hidden}.ui-progress__bar{height:100%;border-radius:inherit;transition:width var(--transition-slow)}.ui-progress__bar--primary{background:var(--color-primary-500)}.ui-progress__bar--neutral{background:var(--color-neutral-600)}.ui-progress__bar--success{background:var(--color-success-500)}.ui-progress__bar--warning{background:var(--color-warning-500)}.ui-progress__bar--error{background:var(--color-error-500)}.ui-progress__bar--info{background:var(--color-info-500)}.ui-progress__bar--indeterminate{width:40%!important;animation:ui-progress-slide 1.5s ease-in-out infinite}.ui-progress__label{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text)}.ui-progress__value{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--color-text-muted);text-align:right}@keyframes ui-progress-slide{0%{transform:translate(-150%)}to{transform:translate(350%)}}\n"] }]
+        }] });
+
+/**
+ * Separator Atom — Source: Nuxt UI v3 ❖ Separator
+ * Horizontal or vertical divider, optionally with label
+ */
+class SeparatorComponent {
+    constructor() {
+        this.orientation = input('horizontal');
+        this.label = input(null);
+        this.type = input('solid');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SeparatorComponent, isStandalone: true, selector: "ui-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="'ui-separator ui-separator--' + orientation() + (label() ? ' ui-separator--labeled' : '')"
+         role="separator"
+         [attr.aria-orientation]="orientation()">
+      @if (label()) {
+        <span class="ui-separator__label">{{ label() }}</span>
+      }
+    </div>
+  `, isInline: true, styles: [".ui-separator{--sep-color: var(--color-border);flex-shrink:0}.ui-separator--horizontal{width:100%;height:1px;background:var(--sep-color);margin:var(--spacing-4) 0}.ui-separator--vertical{width:1px;height:100%;min-height:1em;background:var(--sep-color);margin:0 var(--spacing-4)}.ui-separator--labeled{display:flex;align-items:center;gap:var(--spacing-3);background:none;height:auto}.ui-separator--labeled:before,.ui-separator--labeled:after{content:\"\";flex:1;height:1px;background:var(--sep-color)}.ui-separator__label{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-text-muted);white-space:nowrap;padding:0 var(--spacing-2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SeparatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-separator', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [class]="'ui-separator ui-separator--' + orientation() + (label() ? ' ui-separator--labeled' : '')"
+         role="separator"
+         [attr.aria-orientation]="orientation()">
+      @if (label()) {
+        <span class="ui-separator__label">{{ label() }}</span>
+      }
+    </div>
+  `, styles: [".ui-separator{--sep-color: var(--color-border);flex-shrink:0}.ui-separator--horizontal{width:100%;height:1px;background:var(--sep-color);margin:var(--spacing-4) 0}.ui-separator--vertical{width:1px;height:100%;min-height:1em;background:var(--sep-color);margin:0 var(--spacing-4)}.ui-separator--labeled{display:flex;align-items:center;gap:var(--spacing-3);background:none;height:auto}.ui-separator--labeled:before,.ui-separator--labeled:after{content:\"\";flex:1;height:1px;background:var(--sep-color)}.ui-separator__label{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-text-muted);white-space:nowrap;padding:0 var(--spacing-2)}\n"] }]
+        }] });
+
+/**
+ * Skeleton Atom — Source: Nuxt UI v3 ❖ Skeleton
+ * Loading placeholder with shimmer animation
+ */
+class SkeletonComponent {
+    constructor() {
+        this.width = input('100%');
+        this.height = input('1rem');
+        this.rounded = input(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: SkeletonComponent, isStandalone: true, selector: "ui-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<div [class]="'ui-skeleton' + (rounded() ? ' ui-skeleton--rounded' : '')"
+    [style.width]="width()" [style.height]="height()" role="status" aria-label="Loading..."></div>`, isInline: true, styles: [".ui-skeleton{background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:ui-shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md);display:block}.ui-skeleton--rounded{border-radius:var(--radius-full)}@keyframes ui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div [class]="'ui-skeleton' + (rounded() ? ' ui-skeleton--rounded' : '')"
+    [style.width]="width()" [style.height]="height()" role="status" aria-label="Loading..."></div>`, styles: [".ui-skeleton{background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;animation:ui-shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md);display:block}.ui-skeleton--rounded{border-radius:var(--radius-full)}@keyframes ui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }] });
+
+/**
+ * Slider Atom — Source: Nuxt UI v3 ❖ Slider
+ * Range input with custom styling
+ */
+class SliderComponent {
+    constructor() {
+        this.min = input(0);
+        this.max = input(100);
+        this.step = input(1);
+        this.size = input('md');
+        this.color = input('primary');
+        this.disabled = input(false);
+        this.value = model(0);
+        this._onChange = () => { };
+        this._onTouched = () => { };
+    }
+    onInput(e) {
+        const val = Number(e.target.value);
+        this.value.set(val);
+        this._onChange(val);
+        this._onTouched();
+    }
+    writeValue(v) { this.value.set(v); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(_) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.20", type: SliderComponent, isStandalone: true, selector: "ui-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true }], ngImport: i0, template: `
+    <div class="ui-slider ui-slider--{{ size() }}">
+      <input
+        type="range"
+        class="ui-slider__input ui-slider__input--{{ color() }}"
+        [min]="min()"
+        [max]="max()"
+        [step]="step()"
+        [value]="value()"
+        [disabled]="disabled()"
+        (input)="onInput($event)"
+      />
+    </div>
+  `, isInline: true, styles: [".ui-slider{display:flex;align-items:center;width:100%}.ui-slider--xs{height:var(--size-xs)}.ui-slider--sm{height:var(--size-sm)}.ui-slider--md{height:var(--size-md)}.ui-slider--lg{height:var(--size-lg)}.ui-slider--xl{height:var(--size-xl)}.ui-slider__input{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);cursor:pointer;outline:none}.ui-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid white;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.ui-slider__input:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-slider__input--primary::-webkit-slider-thumb{background:var(--color-primary-500)}.ui-slider__input--neutral::-webkit-slider-thumb{background:var(--color-neutral-600)}.ui-slider__input--success::-webkit-slider-thumb{background:var(--color-success-500)}.ui-slider__input--warning::-webkit-slider-thumb{background:var(--color-warning-500)}.ui-slider__input--error::-webkit-slider-thumb{background:var(--color-error-500)}.ui-slider__input:disabled{opacity:.5;cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true }], template: `
+    <div class="ui-slider ui-slider--{{ size() }}">
+      <input
+        type="range"
+        class="ui-slider__input ui-slider__input--{{ color() }}"
+        [min]="min()"
+        [max]="max()"
+        [step]="step()"
+        [value]="value()"
+        [disabled]="disabled()"
+        (input)="onInput($event)"
+      />
+    </div>
+  `, styles: [".ui-slider{display:flex;align-items:center;width:100%}.ui-slider--xs{height:var(--size-xs)}.ui-slider--sm{height:var(--size-sm)}.ui-slider--md{height:var(--size-md)}.ui-slider--lg{height:var(--size-lg)}.ui-slider--xl{height:var(--size-xl)}.ui-slider__input{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);cursor:pointer;outline:none}.ui-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;border:2px solid white;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.ui-slider__input:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-slider__input--primary::-webkit-slider-thumb{background:var(--color-primary-500)}.ui-slider__input--neutral::-webkit-slider-thumb{background:var(--color-neutral-600)}.ui-slider__input--success::-webkit-slider-thumb{background:var(--color-success-500)}.ui-slider__input--warning::-webkit-slider-thumb{background:var(--color-warning-500)}.ui-slider__input--error::-webkit-slider-thumb{background:var(--color-error-500)}.ui-slider__input:disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }] });
+
+/**
+ * Switch Atom — Source: Nuxt UI v3 ❖ Switch
+ * Toggle control with label support and CVA
+ */
+class SwitchComponent {
+    constructor() {
+        this.size = input('md');
+        this.color = input('primary');
+        this.label = input(null);
+        this.disabled = input(false);
+        this.checked = model(false);
+        this._onChange = () => { };
+        this._onTouched = () => { };
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        this.checked.update(v => !v);
+        this._onChange(this.checked());
+        this._onTouched();
+    }
+    writeValue(v) { this.checked.set(v); }
+    registerOnChange(fn) { this._onChange = fn; }
+    registerOnTouched(fn) { this._onTouched = fn; }
+    setDisabledState(_) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: SwitchComponent, isStandalone: true, selector: "ui-switch", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }], ngImport: i0, template: `
+    <label class="ui-switch" [class.ui-switch--disabled]="disabled()">
+      <button
+        type="button"
+        role="switch"
+        [class]="'ui-switch__track ui-switch__track--' + size() + ' ui-switch__track--' + color() + (checked() ? ' ui-switch__track--on' : '')"
+        [attr.aria-checked]="checked()"
+        [disabled]="disabled()"
+        (click)="toggle()"
+      >
+        <span class="ui-switch__thumb" [class.ui-switch__thumb--on]="checked()"></span>
+      </button>
+      @if (label()) {
+        <span class="ui-switch__label">{{ label() }}</span>
+      }
+    </label>
+  `, isInline: true, styles: [".ui-switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.ui-switch--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-switch__track{position:relative;display:inline-flex;align-items:center;border:none;border-radius:var(--radius-full);background:var(--color-neutral-300);cursor:pointer;transition:background var(--transition-base);padding:2px}.ui-switch__track--xs{width:28px;height:16px}.ui-switch__track--sm{width:32px;height:18px}.ui-switch__track--md{width:40px;height:22px}.ui-switch__track--lg{width:48px;height:26px}.ui-switch__track--xl{width:56px;height:30px}.ui-switch__track--on.ui-switch__track--primary{background:var(--color-primary-500)}.ui-switch__track--on.ui-switch__track--neutral{background:var(--color-neutral-800)}.ui-switch__track--on.ui-switch__track--success{background:var(--color-success-500)}.ui-switch__track--on.ui-switch__track--warning{background:var(--color-warning-500)}.ui-switch__track--on.ui-switch__track--error{background:var(--color-error-500)}.ui-switch__track:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-switch__thumb{width:calc(50% - 2px);height:calc(100% - 4px);border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-base);transform:translate(0)}.ui-switch__thumb--on{transform:translate(100%)}.ui-switch__label{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-switch', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SwitchComponent), multi: true }], template: `
+    <label class="ui-switch" [class.ui-switch--disabled]="disabled()">
+      <button
+        type="button"
+        role="switch"
+        [class]="'ui-switch__track ui-switch__track--' + size() + ' ui-switch__track--' + color() + (checked() ? ' ui-switch__track--on' : '')"
+        [attr.aria-checked]="checked()"
+        [disabled]="disabled()"
+        (click)="toggle()"
+      >
+        <span class="ui-switch__thumb" [class.ui-switch__thumb--on]="checked()"></span>
+      </button>
+      @if (label()) {
+        <span class="ui-switch__label">{{ label() }}</span>
+      }
+    </label>
+  `, styles: [".ui-switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.ui-switch--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-switch__track{position:relative;display:inline-flex;align-items:center;border:none;border-radius:var(--radius-full);background:var(--color-neutral-300);cursor:pointer;transition:background var(--transition-base);padding:2px}.ui-switch__track--xs{width:28px;height:16px}.ui-switch__track--sm{width:32px;height:18px}.ui-switch__track--md{width:40px;height:22px}.ui-switch__track--lg{width:48px;height:26px}.ui-switch__track--xl{width:56px;height:30px}.ui-switch__track--on.ui-switch__track--primary{background:var(--color-primary-500)}.ui-switch__track--on.ui-switch__track--neutral{background:var(--color-neutral-800)}.ui-switch__track--on.ui-switch__track--success{background:var(--color-success-500)}.ui-switch__track--on.ui-switch__track--warning{background:var(--color-warning-500)}.ui-switch__track--on.ui-switch__track--error{background:var(--color-error-500)}.ui-switch__track:focus-visible{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-ring)}.ui-switch__thumb{width:calc(50% - 2px);height:calc(100% - 4px);border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-base);transform:translate(0)}.ui-switch__thumb--on{transform:translate(100%)}.ui-switch__label{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text)}\n"] }]
+        }] });
+
+/**
+ * Tooltip Atom — Source: Nuxt UI v3 ❖ Tooltip
+ * CSS-only hover tooltip with positioning
+ */
+class TooltipComponent {
+    constructor() {
+        this.text = input.required();
+        this.position = input('top');
+        this.shortcut = input(null);
+        this.delay = input(500);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TooltipComponent, isStandalone: true, selector: "ui-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="ui-tooltip-wrap">
+      <ng-content />
+      <span class="ui-tooltip ui-tooltip--{{ position() }}" role="tooltip">
+        {{ text() }}
+        @if (shortcut()) {
+          <kbd class="ui-tooltip__kbd">{{ shortcut() }}</kbd>
+        }
+      </span>
+    </span>
+  `, isInline: true, styles: [".ui-tooltip-wrap{position:relative;display:inline-flex;align-items:center}.ui-tooltip-wrap:hover .ui-tooltip,.ui-tooltip-wrap:focus-within .ui-tooltip{opacity:1;pointer-events:auto}.ui-tooltip{position:absolute;z-index:var(--z-tooltip);padding:5px 10px;background:var(--color-neutral-900);color:var(--color-neutral-0);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-md);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast);box-shadow:var(--shadow-md)}.ui-tooltip--top{bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.ui-tooltip--bottom{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.ui-tooltip--left{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}.ui-tooltip--right{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}.ui-tooltip__kbd{display:inline-flex;align-items:center;justify-content:center;padding:1px 4px;margin-left:4px;background:var(--color-neutral-700);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.7em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span class="ui-tooltip-wrap">
+      <ng-content />
+      <span class="ui-tooltip ui-tooltip--{{ position() }}" role="tooltip">
+        {{ text() }}
+        @if (shortcut()) {
+          <kbd class="ui-tooltip__kbd">{{ shortcut() }}</kbd>
+        }
+      </span>
+    </span>
+  `, styles: [".ui-tooltip-wrap{position:relative;display:inline-flex;align-items:center}.ui-tooltip-wrap:hover .ui-tooltip,.ui-tooltip-wrap:focus-within .ui-tooltip{opacity:1;pointer-events:auto}.ui-tooltip{position:absolute;z-index:var(--z-tooltip);padding:5px 10px;background:var(--color-neutral-900);color:var(--color-neutral-0);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-md);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast);box-shadow:var(--shadow-md)}.ui-tooltip--top{bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.ui-tooltip--bottom{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.ui-tooltip--left{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}.ui-tooltip--right{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}.ui-tooltip__kbd{display:inline-flex;align-items:center;justify-content:center;padding:1px 4px;margin-left:4px;background:var(--color-neutral-700);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.7em}\n"] }]
+        }] });
+
+// ============================================================
+// ATOMS — Nuxt UI v3 Design Kit → Angular 19 + NX
+// Basic building blocks (no component dependencies)
+// ============================================================
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AvatarComponent, BadgeComponent, ButtonComponent, CheckboxComponent, ChipComponent, KbdComponent, LinkComponent, ProgressComponent, SeparatorComponent, SkeletonComponent, SliderComponent, SwitchComponent, TooltipComponent };
+//# sourceMappingURL=atomng-ui-atoms.mjs.map