@uni-design-system/uni-angular 5.0.0 → 5.2.0

package/fesm2022/uni-design-system-uni-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, ChangeDetectionStrategy, Component, Renderer2, ElementRef, Directive, model, output, effect, viewChild, afterNextRender, ViewChild, viewChildren } from '@angular/core';
+import { signal, computed, linkedSignal, resource, Injectable, inject, DestroyRef, InjectionToken, input, ChangeDetectionStrategy, Component, contentChildren, output, Renderer2, ElementRef, Directive, model, effect, viewChild, afterNextRender, ViewChild, viewChildren } from '@angular/core';
 import { injectGlobal, css, keyframes } from '@emotion/css';
-import { UniThemes, LightTheme, toTypefaces, createThemeFromPalette, Z_INDEX, fadeIn, fadeOut, expandFadeIn, collapseFadeOut, removeInputPlatformStyling } from '@uni-design-system/uni-core';
+import { UniThemes, LightTheme, toTypefaces, createThemeFromPalette, Z_INDEX, fadeIn, fadeOut, expandFadeIn, collapseFadeOut, removeInputPlatformStyling, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 
 let nextUniqueId = 0;
@@ -901,6 +901,283 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+const COMPONENT_NAME = new InjectionToken('');
+class BaseComponent {
+    componentName = inject(COMPONENT_NAME);
+    theme = inject(ThemeService);
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ [])); // TODO: Make Variant support undefined
+    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    componentTheme = computed(() => this.theme.getComponentTheme(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentTheme" }] : /* istanbul ignore next */ []));
+    componentOptions = computed(() => this.theme.getComponentOptions(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentOptions" }] : /* istanbul ignore next */ []));
+    style = computed(() => this.theme.componentStyle(this.componentName, this.variant(), this.size())(), ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: BaseComponent, isStandalone: true, selector: "ng-component", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [],
+                    template: ``,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Horizontal application bar: project leading controls (menu button, logo)
+ * with the `leading` attribute, actions with `trailing` (pushed to the far
+ * edge), and either pass `title` or project custom center content. Surface,
+ * divider, height, typography and spacing all resolve from `appBar` tokens.
+ * Place it inside your page's `<header>` landmark.
+ */
+class UniAppBarComponent extends BaseComponent {
+    /** Bar title; alternatively project your own center content. */
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Stick the bar to the top of its scroll container. */
+    sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    className = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            display: 'flex',
+            alignItems: 'center',
+            boxSizing: 'border-box',
+            width: '100%',
+            height: options.height ?? 56,
+            flex: 'none',
+            ...this.theme.colorPair(options.color),
+            ...this.theme.gap(options.gap),
+            ...this.theme.paddingLeft(options.padding),
+            ...this.theme.paddingRight(options.padding),
+            ...this.theme.borderBottom(options.divider),
+            ...this.theme.boxShadow(options.elevation),
+            '& .uni-app-bar-title': {
+                ...this.theme.typeface(options.typeface),
+                whiteSpace: 'nowrap',
+            },
+            '& .uni-app-bar-spacer': { flexGrow: 1 },
+            ...(this.sticky() && { position: 'sticky', top: 0, zIndex: 10 }),
+        });
+    }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAppBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAppBarComponent, isStandalone: true, selector: "uni-app-bar, AppBar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'appBar' }], usesInheritance: true, ngImport: i0, template: `
+    <ng-content select="[leading]" />
+    @if (title()) {
+      <span class="uni-app-bar-title">{{ title() }}</span>
+    }
+    <ng-content />
+    <span class="uni-app-bar-spacer"></span>
+    <ng-content select="[trailing]" />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAppBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'uni-app-bar, AppBar',
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'appBar' }],
+                    host: { '[class]': 'className()' },
+                    template: `
+    <ng-content select="[leading]" />
+    @if (title()) {
+      <span class="uni-app-bar-title">{{ title() }}</span>
+    }
+    <ng-content />
+    <span class="uni-app-bar-spacer"></span>
+    <ng-content select="[trailing]" />
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
+
+class UniSymbolComponent extends BaseComponent {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    fill = input(...(ngDevMode ? [undefined, { debugName: "fill" }] : /* istanbul ignore next */ []));
+    weight = input(...(ngDevMode ? [undefined, { debugName: "weight" }] : /* istanbul ignore next */ []));
+    grade = input(...(ngDevMode ? [undefined, { debugName: "grade" }] : /* istanbul ignore next */ []));
+    opticalSize = input(...(ngDevMode ? [undefined, { debugName: "opticalSize" }] : /* istanbul ignore next */ []));
+    className = computed(() => {
+        const settings = `'FILL' ${this.fill() || this.componentOptions().fill || 0}, ` +
+            `'wght' ${this.weight() || this.componentOptions().weight || 400}, ` +
+            `'GRAD' ${this.grade() || this.componentOptions().grade || 0}, ` +
+            `'opsz' ${this.opticalSize() || this.componentOptions().opticalSize || 24}`;
+        return ('material-symbols-rounded ' +
+            css({
+                fontVariationSettings: settings,
+                fontSize: `${this.opticalSize() || this.componentOptions().opticalSize || 24}px`,
+            }));
+    }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSymbolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSymbolComponent, isStandalone: true, selector: "uni-symbol, Symbol", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'symbol' }], usesInheritance: true, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSymbolComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-symbol, Symbol',
+                    imports: [],
+                    template: `{{ name() }}`,
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'symbol' }],
+                    // Icons are decorative: hide the ligature text (e.g. "chevron_left") from
+                    // screen readers. Meaningful icons get their name from the parent control.
+                    host: {
+                        '[class]': 'className()',
+                        'aria-hidden': 'true',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], grade: [{ type: i0.Input, args: [{ isSignal: true, alias: "grade", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
+
+/**
+ * Identity avatar with a graceful fallback chain: image → initials from
+ * `name` → themed symbol. Coloring, radius, typeface and sizes all resolve
+ * from `avatar` theme tokens; `variant` picks the container palette.
+ */
+class UniAvatarComponent extends BaseComponent {
+    /** Image URL; on load error the avatar falls back to initials/symbol. */
+    src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
+    /** Person's name: drives the initials and the accessible label. */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Verbatim text instead of derived initials (e.g. a group's “+3”). */
+    text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+    imageFailed = signal(false, ...(ngDevMode ? [{ debugName: "imageFailed" }] : /* istanbul ignore next */ []));
+    showImage = computed(() => !!this.src() && !this.imageFailed(), ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
+    initials = computed(() => {
+        const name = this.name()?.trim();
+        if (!name)
+            return '';
+        const words = name.split(/\s+/);
+        const first = words[0]?.[0] ?? '';
+        const last = words.length > 1 ? (words[words.length - 1][0] ?? '') : '';
+        return (first + last).toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.name() ?? this.text(), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    className = computed(() => css([
+        // Typeface (family/weight) before the merged theme style, so the size
+        // record's fontSize wins over the typeface's.
+        {
+            ...this.theme.typeface(this.componentOptions().typeface),
+            ...this.theme.radius(this.componentOptions().borderRadius),
+        },
+        this.style(),
+        {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 'none',
+            overflow: 'hidden',
+            userSelect: 'none',
+            lineHeight: 1,
+            '& img': { width: '100%', height: '100%', objectFit: 'cover' },
+            '& symbol': { fontSize: '1.4em' },
+        },
+    ]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAvatarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAvatarComponent, isStandalone: true, selector: "uni-avatar, Avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "attr.role": "label() ? 'img' : null", "attr.aria-label": "label() || null", "attr.aria-hidden": "label() ? null : 'true'" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'avatar' }], usesInheritance: true, ngImport: i0, template: `
+    @if (showImage()) {
+      <img [src]="src()" alt="" (error)="imageFailed.set(true)" />
+    } @else if (text()) {
+      <span>{{ text() }}</span>
+    } @else if (initials()) {
+      <span>{{ initials() }}</span>
+    } @else {
+      <Symbol [name]="componentOptions().fallbackSymbol ?? 'person'" />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAvatarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'uni-avatar, Avatar',
+                    imports: [UniSymbolComponent],
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'avatar' }],
+                    host: {
+                        '[class]': 'className()',
+                        '[attr.role]': "label() ? 'img' : null",
+                        '[attr.aria-label]': 'label() || null',
+                        '[attr.aria-hidden]': "label() ? null : 'true'",
+                    },
+                    template: `
+    @if (showImage()) {
+      <img [src]="src()" alt="" (error)="imageFailed.set(true)" />
+    } @else if (text()) {
+      <span>{{ text() }}</span>
+    } @else if (initials()) {
+      <span>{{ initials() }}</span>
+    } @else {
+      <Symbol [name]="componentOptions().fallbackSymbol ?? 'person'" />
+    }
+  `,
+                }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
+
+/**
+ * Overlapping stack of avatars. `max` collapses the overflow into a themed
+ * “+N” chip (itself a `uni-avatar`). Overlap and separator ring resolve from
+ * `avatarGroup` theme tokens.
+ */
+class UniAvatarGroupComponent extends BaseComponent {
+    /** Show at most this many avatars; the rest collapse into a “+N” chip. */
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    avatars = contentChildren(UniAvatarComponent, ...(ngDevMode ? [{ debugName: "avatars" }] : /* istanbul ignore next */ []));
+    surplus = computed(() => {
+        const max = this.max();
+        if (max === undefined)
+            return 0;
+        return Math.max(0, this.avatars().length - max);
+    }, ...(ngDevMode ? [{ debugName: "surplus" }] : /* istanbul ignore next */ []));
+    className = computed(() => {
+        const options = this.componentOptions();
+        const overlap = this.theme.spacing()[options.overlap ?? 'sm'] ?? '8px';
+        const ring = `${options.ringWidth ?? 2}px solid ${this.theme.colors()[options.ringColor ?? 'surface'] ?? 'transparent'}`;
+        const max = this.max();
+        return css({
+            display: 'inline-flex',
+            alignItems: 'center',
+            '& uni-avatar': {
+                border: ring,
+                marginLeft: `calc(-1 * ${overlap})`,
+                '&:first-child': { marginLeft: 0 },
+            },
+            // Collapse the overflow: hide projected avatars past `max`, but never
+            // the surplus chip this component renders itself.
+            ...(max !== undefined && {
+                [`& uni-avatar:nth-of-type(n + ${max + 1}):not(.uni-surplus)`]: { display: 'none' },
+            }),
+        });
+    }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAvatarGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAvatarGroupComponent, isStandalone: true, selector: "uni-avatar-group, AvatarGroup", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'avatarGroup' }], queries: [{ propertyName: "avatars", predicate: UniAvatarComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-content />
+    @if (surplus() > 0) {
+      <uni-avatar
+        class="uni-surplus"
+        [text]="'+' + surplus()"
+        variant="quaternary"
+        [size]="size()"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: UniAvatarComponent, selector: "uni-avatar, Avatar", inputs: ["src", "name", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'uni-avatar-group, AvatarGroup',
+                    imports: [UniAvatarComponent],
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'avatarGroup' }],
+                    host: { '[class]': 'className()', role: 'group' },
+                    template: `
+    <ng-content />
+    @if (surplus() > 0) {
+      <uni-avatar
+        class="uni-surplus"
+        [text]="'+' + surplus()"
+        variant="quaternary"
+        [size]="size()"
+      />
+    }
+  `,
+                }]
+        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], avatars: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UniAvatarComponent), { isSignal: true }] }] } });
+
 class UniBackgroundComponent {
     theme = inject(ThemeService);
     image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : /* istanbul ignore next */ []));
@@ -941,27 +1218,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the background component.
  */
 
-const COMPONENT_NAME = new InjectionToken('');
-class BaseComponent {
-    componentName = inject(COMPONENT_NAME);
-    theme = inject(ThemeService);
-    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ [])); // TODO: Make Variant support undefined
-    size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    componentTheme = computed(() => this.theme.getComponentTheme(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentTheme" }] : /* istanbul ignore next */ []));
-    componentOptions = computed(() => this.theme.getComponentOptions(this.componentName)(), ...(ngDevMode ? [{ debugName: "componentOptions" }] : /* istanbul ignore next */ []));
-    style = computed(() => this.theme.componentStyle(this.componentName, this.variant(), this.size())(), ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: BaseComponent, isStandalone: true, selector: "ng-component", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: BaseComponent, decorators: [{
-            type: Component,
-            args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [],
-                    template: ``,
-                }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
 class UniBadgeComponent extends BaseComponent {
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     useVariant = input(false, ...(ngDevMode ? [{ debugName: "useVariant" }] : /* istanbul ignore next */ []));
@@ -998,6 +1254,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], useVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "useVariant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
+/**
+ * WAI-ARIA breadcrumb: a `nav` landmark wrapping an ordered list; the last
+ * item is the current page (`aria-current="page"`), separators are decorative.
+ * Items with `href` render as real links; without one they render as
+ * link-styled buttons emitting `itemClicked` — wire that to your router.
+ */
+class UniBreadcrumbComponent extends BaseComponent {
+    /** The trail, root first; the last item is the current page. */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Landmark label distinguishing this nav from others on the page. */
+    ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Emits the clicked ancestor item (also fires for `href` links). */
+    itemClicked = output();
+    className = computed(() => {
+        const options = this.componentOptions();
+        const linkColor = this.theme.colors()[options.color ?? 'on-background-variant'];
+        return css({
+            '& ol': {
+                display: 'flex',
+                alignItems: 'center',
+                flexWrap: 'wrap',
+                listStyle: 'none',
+                margin: 0,
+                padding: 0,
+                ...this.theme.typeface(options.typeface),
+            },
+            '& li': {
+                display: 'inline-flex',
+                alignItems: 'center',
+                ...this.theme.gap(options.gap),
+            },
+            '& a, & button': {
+                background: 'none',
+                border: 0,
+                padding: 0,
+                font: 'inherit',
+                cursor: 'pointer',
+                textDecoration: 'none',
+                color: linkColor,
+                '&:hover': { textDecoration: 'underline' },
+                '&:focus-visible': {
+                    outline: `2px solid ${this.theme.colors()['primary']}`,
+                    outlineOffset: 2,
+                },
+            },
+            '& [aria-current]': {
+                ...this.theme.color(options.currentColor),
+            },
+            '& symbol': { fontSize: '1.1em', ...this.theme.color(options.color) },
+            ...this.theme.gap(options.gap),
+        });
+    }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBreadcrumbComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniBreadcrumbComponent, isStandalone: true, selector: "uni-breadcrumb, Breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, providers: [{ provide: COMPONENT_NAME, useValue: 'breadcrumb' }], usesInheritance: true, ngImport: i0, template: `
+    <nav [attr.aria-label]="ariaLabel()" [class]="className()">
+      <ol>
+        @for (item of items(); track item.label; let last = $last; let i = $index) {
+          <li>
+            @if (last) {
+              <span aria-current="page">{{ item.label }}</span>
+            } @else if (item.href) {
+              <a [href]="item.href" (click)="itemClicked.emit(item)">{{ item.label }}</a>
+            } @else {
+              <button type="button" (click)="itemClicked.emit(item)">{{ item.label }}</button>
+            }
+            @if (!last) {
+              <Symbol
+                aria-hidden="true"
+                [name]="componentOptions().separatorSymbol ?? 'chevron_right'"
+              />
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'uni-breadcrumb, Breadcrumb',
+                    imports: [UniSymbolComponent],
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'breadcrumb' }],
+                    template: `
+    <nav [attr.aria-label]="ariaLabel()" [class]="className()">
+      <ol>
+        @for (item of items(); track item.label; let last = $last; let i = $index) {
+          <li>
+            @if (last) {
+              <span aria-current="page">{{ item.label }}</span>
+            } @else if (item.href) {
+              <a [href]="item.href" (click)="itemClicked.emit(item)">{{ item.label }}</a>
+            } @else {
+              <button type="button" (click)="itemClicked.emit(item)">{{ item.label }}</button>
+            }
+            @if (!last) {
+              <Symbol
+                aria-hidden="true"
+                [name]="componentOptions().separatorSymbol ?? 'chevron_right'"
+              />
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+
 class UniIconComponent {
     themeService = inject(ThemeService);
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
@@ -1289,43 +1655,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], wrapItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapItems", required: false }] }] } });
 
-class UniSymbolComponent extends BaseComponent {
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    fill = input(...(ngDevMode ? [undefined, { debugName: "fill" }] : /* istanbul ignore next */ []));
-    weight = input(...(ngDevMode ? [undefined, { debugName: "weight" }] : /* istanbul ignore next */ []));
-    grade = input(...(ngDevMode ? [undefined, { debugName: "grade" }] : /* istanbul ignore next */ []));
-    opticalSize = input(...(ngDevMode ? [undefined, { debugName: "opticalSize" }] : /* istanbul ignore next */ []));
-    className = computed(() => {
-        const settings = `'FILL' ${this.fill() || this.componentOptions().fill || 0}, ` +
-            `'wght' ${this.weight() || this.componentOptions().weight || 400}, ` +
-            `'GRAD' ${this.grade() || this.componentOptions().grade || 0}, ` +
-            `'opsz' ${this.opticalSize() || this.componentOptions().opticalSize || 24}`;
-        return ('material-symbols-rounded ' +
-            css({
-                fontVariationSettings: settings,
-                fontSize: `${this.opticalSize() || this.componentOptions().opticalSize || 24}px`,
-            }));
-    }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSymbolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSymbolComponent, isStandalone: true, selector: "uni-symbol, Symbol", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, grade: { classPropertyName: "grade", publicName: "grade", isSignal: true, isRequired: false, transformFunction: null }, opticalSize: { classPropertyName: "opticalSize", publicName: "opticalSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'symbol' }], usesInheritance: true, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSymbolComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'uni-symbol, Symbol',
-                    imports: [],
-                    template: `{{ name() }}`,
-                    providers: [{ provide: COMPONENT_NAME, useValue: 'symbol' }],
-                    // Icons are decorative: hide the ligature text (e.g. "chevron_left") from
-                    // screen readers. Meaningful icons get their name from the parent control.
-                    host: {
-                        '[class]': 'className()',
-                        'aria-hidden': 'true',
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], grade: [{ type: i0.Input, args: [{ isSignal: true, alias: "grade", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
-
 // https://css-tricks.com/how-to-recreate-the-ripple-effect-of-material-design-buttons/
 class RippleDirective {
     renderer = inject(Renderer2);
@@ -1401,6 +1730,11 @@ class UniButtonComponent extends BaseComponent {
         paddingBottom: '6%',
     });
     className = computed(() => css([
+        // Token-driven radius + typeface from component options. Applied before
+        // `style()` so theme `sizes`/`fixed` (per-size fontSize, or hand-set
+        // radii/families in older themes) keep winning.
+        this.theme.radius(this.componentOptions().borderRadius),
+        { ...this.theme.typeface(this.componentOptions().typeface) },
         this.style() && {
             ...this.style(), // TODO: Set priority on theme-defined styles
         },
@@ -1618,12 +1952,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }], propDecorators: { typeface: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeface", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], ellipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "ellipsis", required: false }] }] } });
 
 class UniCardComponent extends BaseComponent {
+    /**
+     * Token-resolved frame (variant-named border primitive, radii, elevation)
+     * under the merged theme style, so hand-authored fixed/variant styles from
+     * older themes keep winning.
+     */
+    cardStyle = computed(() => ({
+        ...this.theme.border(this.componentOptions().border ?? this.variant()),
+        ...this.theme.radius(this.componentOptions().borderRadius),
+        ...this.theme.boxShadow(this.componentOptions().elevation),
+        ...this.style(),
+    }), ...(ngDevMode ? [{ debugName: "cardStyle" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardComponent, isStandalone: true, selector: "uni-card, Card", providers: [{ provide: COMPONENT_NAME, useValue: 'card' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniCardComponent, isStandalone: true, selector: "uni-card, Card", providers: [{ provide: COMPONENT_NAME, useValue: 'card' }], usesInheritance: true, ngImport: i0, template: "<div [style]=\"cardStyle()\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniCardComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-card, Card', imports: [], providers: [{ provide: COMPONENT_NAME, useValue: 'card' }], template: "<div [style]=\"style()\">\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-card, Card', imports: [], providers: [{ provide: COMPONENT_NAME, useValue: 'card' }], template: "<div [style]=\"cardStyle()\">\n  <ng-content></ng-content>\n</div>\n" }]
         }] });
 
 class UniCardHeaderComponent extends BaseComponent {
@@ -1868,7 +2213,9 @@ class UniIconButtonComponent {
                 border: 0,
                 cursor: 'pointer',
                 transition: 'all 0.28s ease',
-                borderRadius: 999,
+                // Token-driven radius (`max` = circle) with the legacy 999 fallback
+                // for hand-authored themes that predate iconButton options.
+                ...(this.theme.radius(this.config().options?.borderRadius) ?? { borderRadius: 999 }),
                 display: 'block',
                 '&:disabled': {
                     cursor: 'not-allowed !important',
@@ -2652,6 +2999,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }] } });
 
+/**
+ * Navigation drawer with two modes sharing one content slot:
+ *
+ * - `side` — an in-flow `<aside>` that pushes content (dashboard sidenav);
+ *   opening/closing animates its width, and the divider border primitive
+ *   separates it from the page.
+ * - `over` — a native `<dialog>` in the top layer: focus trap, Escape and
+ *   scrim backdrop come from the platform (same machinery as `uni-dialog`),
+ *   sliding in from its edge.
+ *
+ * Surface, width, divider, elevation, padding and backdrop all resolve from
+ * `drawer` theme tokens.
+ */
+class UniDrawerComponent extends BaseComponent {
+    /** Two-way bindable open state: [(open)]. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    mode = input('side', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    position = input('start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the overlay mode's dialog. */
+    ariaLabel = input('Navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    contentTemplate = viewChild.required('content');
+    overlay = viewChild('overlay', ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        effect(() => {
+            const dialog = this.overlay()?.nativeElement;
+            if (!dialog)
+                return;
+            if (this.open()) {
+                if (!dialog.open) {
+                    dialog.removeAttribute('closing');
+                    dialog.showModal();
+                }
+            }
+            else if (dialog.open) {
+                // Slide out first; the dialog closes when the animation reports done.
+                dialog.setAttribute('closing', 'true');
+            }
+        });
+    }
+    onBackdropClick(event) {
+        if (event.target.nodeName === 'DIALOG')
+            this.open.set(false);
+    }
+    /** Route Escape through the animated close, keeping `open` in sync. */
+    onCancel(event) {
+        event.preventDefault();
+        this.open.set(false);
+    }
+    onAnimationEnd(event) {
+        const dialog = this.overlay()?.nativeElement;
+        if (!dialog || !dialog.hasAttribute('closing'))
+            return;
+        if (event.animationName.includes(this.slideOut())) {
+            dialog.close();
+            dialog.removeAttribute('closing');
+        }
+    }
+    edge = computed(() => (this.position() === 'start' ? '-100%' : '100%'), ...(ngDevMode ? [{ debugName: "edge" }] : /* istanbul ignore next */ []));
+    slideIn = computed(() => keyframes({ from: { transform: `translateX(${this.edge()})` }, to: { transform: 'translateX(0)' } }), ...(ngDevMode ? [{ debugName: "slideIn" }] : /* istanbul ignore next */ []));
+    slideOut = computed(() => keyframes({ from: { transform: 'translateX(0)' }, to: { transform: `translateX(${this.edge()})` } }), ...(ngDevMode ? [{ debugName: "slideOut" }] : /* istanbul ignore next */ []));
+    sideClass = computed(() => {
+        const options = this.componentOptions();
+        const width = options.width ?? 280;
+        const start = this.position() === 'start';
+        return css({
+            display: 'block',
+            boxSizing: 'border-box',
+            height: '100%',
+            flex: 'none',
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            transition: 'width 0.25s ease, visibility 0.25s',
+            ...this.theme.colorPair(options.color),
+            ...(start
+                ? this.theme.borderRight(options.divider)
+                : this.theme.borderLeft(options.divider)),
+            ...(this.open()
+                ? { width, visibility: 'visible', ...this.theme.padding(options.padding) }
+                : { width: 0, visibility: 'hidden', padding: 0, border: 'none' }),
+        });
+    }, ...(ngDevMode ? [{ debugName: "sideClass" }] : /* istanbul ignore next */ []));
+    overClass = computed(() => {
+        const options = this.componentOptions();
+        const start = this.position() === 'start';
+        return css({
+            boxSizing: 'border-box',
+            width: options.width ?? 280,
+            maxWidth: '90vw',
+            height: '100dvh',
+            maxHeight: '100dvh',
+            border: 'none',
+            margin: start ? '0 auto 0 0' : '0 0 0 auto',
+            overflowY: 'auto',
+            ...this.theme.colorPair(options.color),
+            ...this.theme.padding(options.padding),
+            ...this.theme.boxShadow(options.elevation),
+            '&::backdrop': { ...options.backdrop },
+            '&[open]': { animation: `${this.slideIn()} 250ms ease-out` },
+            '&[closing]': { animation: `${this.slideOut()} 250ms ease-in` },
+        });
+    }, ...(ngDevMode ? [{ debugName: "overClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDrawerComponent, isStandalone: true, selector: "uni-drawer, Drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'drawer' }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-template #content><ng-content /></ng-template>
+    @if (mode() === 'side') {
+      <aside [class]="sideClass()" [attr.aria-hidden]="open() ? null : 'true'">
+        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+      </aside>
+    } @else {
+      <dialog
+        #overlay
+        [class]="overClass()"
+        [attr.aria-label]="ariaLabel()"
+        (click)="onBackdropClick($event)"
+        (cancel)="onCancel($event)"
+        (animationend)="onAnimationEnd($event)"
+      >
+        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+      </dialog>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDrawerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'uni-drawer, Drawer',
+                    imports: [NgTemplateOutlet],
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'drawer' }],
+                    template: `
+    <ng-template #content><ng-content /></ng-template>
+    @if (mode() === 'side') {
+      <aside [class]="sideClass()" [attr.aria-hidden]="open() ? null : 'true'">
+        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+      </aside>
+    } @else {
+      <dialog
+        #overlay
+        [class]="overClass()"
+        [attr.aria-label]="ariaLabel()"
+        (click)="onBackdropClick($event)"
+        (cancel)="onCancel($event)"
+        (animationend)="onAnimationEnd($event)"
+      >
+        <ng-container [ngTemplateOutlet]="contentTemplate()" />
+      </dialog>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], contentTemplate: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], overlay: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }] } });
+
 class UniDropdownComponent extends BaseComponent {
     renderer = inject(Renderer2);
     delay = 100;
@@ -3387,6 +3886,8 @@ class UniInputBoxComponent extends BaseComponent {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     minWidth = input('0', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    /** Override the themed field height, e.g. `'auto'` for multi-line fields. */
+    height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
     color = computed(() => this.error() ? this.componentOptions().errorColor : this.componentOptions().color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     border = computed(() => this.error() ? this.componentOptions().errorBorder : this.componentOptions().border, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
     shadow = computed(() => this.error() ? this.componentOptions().errorShadow : this.componentOptions().shadow, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
@@ -3397,33 +3898,39 @@ class UniInputBoxComponent extends BaseComponent {
             cursor: 'not-allowed !important',
         },
         {
-            '& input, select': {
+            '& input, select, textarea': {
                 ...removeInputPlatformStyling,
                 height: '100%',
                 ...this.theme.paddingLeft(this.componentOptions().paddingLeft),
                 ...this.theme.color(this.componentOptions().textColor),
                 ...this.theme.typeface(this.componentOptions().typeFace),
             },
-            '&:has(input:disabled, select:disabled)': {
+            // Multi-line fields size themselves (rows/resize), not from the box.
+            '& textarea': {
+                height: 'auto',
+                ...this.theme.paddingTop('xs'),
+                ...this.theme.paddingBottom('xs'),
+            },
+            '&:has(input:disabled, select:disabled, textarea:disabled)': {
                 ...this.theme.color(this.componentOptions().disabledTextColor),
                 ...this.theme.backgroundColor(this.componentOptions().disabledColor),
             },
-            '& input:disabled, select:disabled': {
+            '& input:disabled, select:disabled, textarea:disabled': {
                 cursor: 'not-allowed !important',
             },
-            '&:has(input:focus, select:focus)': {
+            '&:has(input:focus, select:focus, textarea:focus)': {
                 outline: this.componentOptions().focusOutline,
                 outlineOffset: this.componentOptions().focusOutlineOffset,
             },
         },
     ]), ...(ngDevMode ? [{ debugName: "inputBoxClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputBoxComponent, isStandalone: true, selector: "uni-input-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputBoxComponent, isStandalone: true, selector: "uni-input-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"height() ?? componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uni-input-box', imports: [UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }] } });
+            args: [{ selector: 'uni-input-box', imports: [UniRowComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'input' }], host: { '[class]': 'className' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [height]=\"height() ?? componentOptions().height\"\n  [color]=\"color()\"\n  [border]=\"border()\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  [shadow]=\"shadow()\"\n  [minWidth]=\"minWidth()\"\n  [class]=\"inputBoxClass()\"\n  position=\"relative\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
 class UniInputComponent {
     // --- REQUIRED SIGNALS (populated by FormValueControl) ---
@@ -3452,7 +3959,7 @@ class UniInputComponent {
     }
     inputClass = css({});
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputComponent, isStandalone: true, selector: "uni-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\">\n  <ng-content select=\"pre-input\" />\n  <input\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    (blur)=\"markAsTouched()\"\n    [class]=\"inputClass\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <ng-content select=\"post-input\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniInputComponent, isStandalone: true, selector: "uni-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\">\n  <ng-content select=\"pre-input\" />\n  <input\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    (blur)=\"markAsTouched()\"\n    [class]=\"inputClass\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <ng-content select=\"post-input\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniInputComponent, decorators: [{
             type: Component,
@@ -3872,7 +4379,7 @@ class UniMultiSelectDropdownComponent extends BaseComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown, MultiSelectDropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <Text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</Text\n      >\n      <Symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></Symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div stack-layout gap=\"xs\" padding=\"xs\">\n    @for (option of filteredOptions(); track option.value) {\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"isOptionSelected(option)()\"\n        (checkedChange)=\"toggleOption(option, $event)\"\n        variant=\"primary\"\n        [disabled]=\"disabled()\"\n      >\n      </uni-checkbox>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox, Checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "component", type: UniBoxComponent, selector: "div[uni-box-layout], Box, div[box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown, Dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "component", type: UniStackComponent, selector: "div[uni-stack-layout], Stack, div[stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider, Divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], Button, button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMultiSelectDropdownComponent, isStandalone: true, selector: "uni-multi-select-dropdown, MultiSelectDropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "className" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'multiSelectDropdown' }], usesInheritance: true, ngImport: i0, template: "<button\n  [class]=\"triggerClass\"\n  #trigger\n  [style.cursor]=\"disabled() ? 'default' : 'pointer'\"\n  [attr.aria-required]=\"required() ? true : null\"\n  [attr.aria-invalid]=\"showError() ? true : null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  (click)=\"!disabled() && touched.set(true)\"\n>\n  <uni-input-box [error]=\"showError()\" [disabled]=\"disabled()\">\n    <div\n      row-layout\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      [fullWidth]=\"true\"\n      [minWidth]=\"0\"\n      paddingLeft=\"sm\"\n    >\n      <Text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</Text\n      >\n      <Symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></Symbol>\n    </div>\n  </uni-input-box>\n</button>\n<uni-dropdown\n  #dropdown\n  [trigger]=\"trigger\"\n  ariaHasPopup=\"dialog\"\n  (dropdownShowing)=\"$event && searchInput.focus()\"\n  (dropdownHiding)=\"$event && trigger.focus()\"\n>\n  <div box-layout gap=\"xs\" padding=\"xs\">\n    <input\n      #searchInput\n      type=\"text\"\n      [class]=\"searchInputClass()\"\n      [value]=\"query()\"\n      (input)=\"handleQueryInput($event)\"\n      placeholder=\"Search...\"\n      aria-label=\"Filter options\"\n      (click)=\"$event.stopPropagation()\"\n      [disabled]=\"disabled()\"\n    />\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div stack-layout gap=\"xs\" padding=\"xs\">\n    @for (option of filteredOptions(); track option.value) {\n      <uni-checkbox\n        [label]=\"option.label\"\n        [checked]=\"isOptionSelected(option)()\"\n        (checkedChange)=\"toggleOption(option, $event)\"\n        variant=\"primary\"\n        [disabled]=\"disabled()\"\n      >\n      </uni-checkbox>\n    }\n  </div>\n\n  <uni-divider [border]=\"componentOptions().dividerBorder\" />\n\n  <div row-layout gap=\"xs\" justifyContent=\"space-around\" padding=\"xs\">\n    <button text-button (click)=\"dropdown.hideDropdown()\" size=\"sm\" variant=\"ghost\">Done</button>\n  </div>\n</uni-dropdown>\n", dependencies: [{ kind: "component", type: UniCheckboxComponent, selector: "uni-checkbox, Checkbox", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { kind: "component", type: UniBoxComponent, selector: "div[uni-box-layout], Box, div[box-layout]", inputs: ["color", "backgroundColor", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "borderRadiusTop", "borderRadiusBottom", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "borderTop", "borderBottom", "borderLeft", "borderRight", "dashBorder", "alignSelf", "alignItems", "alignContent", "justifyContent", "grow", "display", "position", "inset", "height", "minHeight", "maxHeight", "width", "minWidth", "maxWidth", "ignoreDir", "gridArea", "gridColumn", "gridRow", "overflow", "elevation", "shadow", "gap", "fullWidth", "fullHeight", "flexDirection", "textAlign", "wrapItems", "zIndex"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown, Dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "component", type: UniStackComponent, selector: "div[uni-stack-layout], Stack, div[stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider, Divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], Button, button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniTextComponent, selector: "uni-text, Text", inputs: ["typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniRowComponent, selector: "div[uni-row-layout], Row, div[row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMultiSelectDropdownComponent, decorators: [{
             type: Component,
@@ -4723,13 +5230,475 @@ class UniSelectComponent {
         pointerEvents: 'none' /* Crucial for clicking through */,
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSelectComponent, isStandalone: true, selector: "uni-select, SelectInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <option [value]=\"i\">\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSelectComponent, isStandalone: true, selector: "uni-select, SelectInput", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <option [value]=\"i\">\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol, Symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSelectComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-select, SelectInput', imports: [UniInputBoxComponent, UniSymbolComponent], template: "<uni-input-box [error]=\"showError()\" [class]=\"selectClass\">\n  <select\n    [disabled]=\"disabled()\"\n    [value]=\"currentSelectedIndex()\"\n    (change)=\"handleSelectChange($event)\"\n    (blur)=\"touched.set(true)\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    @if (placeholder()) {\n      <option [value]=\"UNSELECTED\" disabled selected>\n        {{ placeholder() }}\n      </option>\n    }\n\n    @for (opt of options(); track opt.label; let i = $index) {\n      <option [value]=\"i\">\n        {{ opt.label }}\n      </option>\n    }\n  </select>\n  <uni-symbol name=\"keyboard_arrow_down\" [class]=\"arrowClass\" />\n</uni-input-box>\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
+/**
+ * Loading placeholder painted with surface tokens. `text` renders one or more
+ * lines (the last line shortened, as real text would be), `rect` and `circle`
+ * render fixed shapes. The shimmer only animates when the user allows motion;
+ * it degrades to static blocks under `prefers-reduced-motion`.
+ */
+class UniSkeletonComponent extends BaseComponent {
+    shape = input('text', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** CSS width; defaults to 100% for text/rect and `height` for circles. */
+    width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** CSS height per block; defaults to 1em (text), 96px (rect), 40px (circle). */
+    height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Number of text lines (text shape only). */
+    lines = input(1, ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    cssSize = (value) => typeof value === 'number' ? `${value}px` : value;
+    resolvedHeight = computed(() => {
+        const height = this.height();
+        if (height !== undefined)
+            return this.cssSize(height);
+        return { text: '1em', rect: '96px', circle: '40px' }[this.shape()];
+    }, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
+    lineWidths = computed(() => {
+        const width = this.width() !== undefined ? this.cssSize(this.width()) : undefined;
+        if (this.shape() === 'circle')
+            return [width ?? this.resolvedHeight()];
+        if (this.shape() === 'rect')
+            return [width ?? '100%'];
+        const lines = Math.max(1, this.lines());
+        // Multi-line text blocks end on a short line, like real paragraphs do.
+        return Array.from({ length: lines }, (_, i) => lines > 1 && i === lines - 1 ? (width ?? '60%') : (width ?? '100%'));
+    }, ...(ngDevMode ? [{ debugName: "lineWidths" }] : /* istanbul ignore next */ []));
+    sweep = keyframes({
+        from: { backgroundPosition: '200% 0' },
+        to: { backgroundPosition: '-200% 0' },
+    });
+    className = computed(() => {
+        const options = this.componentOptions();
+        const base = this.theme.colors()[options.color ?? 'surface-variant'];
+        const highlight = this.theme.colors()[options.highlightColor ?? 'surface'];
+        const animated = (options.animation ?? 'shimmer') === 'shimmer';
+        return css({
+            display: 'flex',
+            flexDirection: 'column',
+            ...this.theme.gap(options.gap),
+            '& .uni-skeleton-block': {
+                height: this.resolvedHeight(),
+                backgroundColor: base,
+                ...(this.shape() === 'circle'
+                    ? { borderRadius: '50%', flex: 'none' }
+                    : this.theme.radius(options.borderRadius)),
+                ...(animated &&
+                    motionSafe({
+                        backgroundImage: `linear-gradient(90deg, ${base} 40%, ${highlight} 50%, ${base} 60%)`,
+                        backgroundSize: '200% 100%',
+                        animation: `${this.sweep} ${options.duration ?? 1.4}s ease-in-out infinite`,
+                    })),
+            },
+        });
+    }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSkeletonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSkeletonComponent, isStandalone: true, selector: "uni-skeleton, Skeleton", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'skeleton' }], usesInheritance: true, ngImport: i0, template: `
+    @for (line of lineWidths(); track $index) {
+      <div class="uni-skeleton-block" [style.width]="line"></div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'uni-skeleton, Skeleton',
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'skeleton' }],
+                    host: { '[class]': 'className()', 'aria-hidden': 'true' },
+                    template: `
+    @for (line of lineWidths(); track $index) {
+      <div class="uni-skeleton-block" [style.width]="line"></div>
+    }
+  `,
+                }]
+        }], propDecorators: { shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
+
+/**
+ * Range slider on a native `<input type="range">` — keyboard interaction and
+ * the ARIA slider contract come from the platform. Fill, track, thumb and
+ * radii resolve from `slider` theme tokens; the fill percentage rides a CSS
+ * custom property so dragging never regenerates styles.
+ */
+class UniSliderComponent extends BaseComponent {
+    // --- REQUIRED SIGNALS (populated by FormValueControl) ---
+    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    /** Synced from required() validators by the Signal Forms [field] directive. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * Id(s) of external element(s) describing this control — typically your
+     * app-rendered value or error text — exposed as aria-describedby.
+     */
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // --- CONFIGURATION ---
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    // `min`/`max` are part of the FormValueControl contract (synced from
+    // min()/max() validators), so their type must admit undefined.
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    resolvedMin = computed(() => this.min() ?? 0, ...(ngDevMode ? [{ debugName: "resolvedMin" }] : /* istanbul ignore next */ []));
+    resolvedMax = computed(() => this.max() ?? 100, ...(ngDevMode ? [{ debugName: "resolvedMax" }] : /* istanbul ignore next */ []));
+    markAsTouched() {
+        this.touched.set(true);
+    }
+    handleInput(event) {
+        this.value.set(Number(event.target.value));
+    }
+    fillPercent = computed(() => {
+        const min = this.resolvedMin();
+        const range = this.resolvedMax() - min;
+        if (range <= 0)
+            return '0%';
+        const ratio = (this.value() - min) / range;
+        return `${Math.min(100, Math.max(0, ratio * 100))}%`;
+    }, ...(ngDevMode ? [{ debugName: "fillPercent" }] : /* istanbul ignore next */ []));
+    inputClass = computed(() => {
+        const options = this.componentOptions();
+        const fill = this.theme.colors()[options.color ?? 'primary'];
+        const track = this.theme.colors()[options.trackColor ?? 'surface-variant'];
+        const radius = this.theme.radii()[options.borderRadius ?? 'max'];
+        const trackHeight = options.trackHeight ?? 4;
+        const thumbSize = options.thumbSize ?? 16;
+        // Webkit paints the fill via a gradient stopped at the custom property;
+        // Firefox has a real ::-moz-range-progress.
+        const trackFill = `linear-gradient(to right, ${fill} var(--uni-slider-fill), ${track} var(--uni-slider-fill))`;
+        const thumb = {
+            appearance: 'none',
+            width: thumbSize,
+            height: thumbSize,
+            borderRadius: radius,
+            border: 'none',
+            background: fill,
+            cursor: 'pointer',
+        };
+        return css({
+            appearance: 'none',
+            width: '100%',
+            height: thumbSize,
+            margin: 0,
+            background: 'transparent',
+            cursor: 'pointer',
+            '&::-webkit-slider-runnable-track': {
+                height: trackHeight,
+                borderRadius: radius,
+                background: trackFill,
+            },
+            '&::-webkit-slider-thumb': {
+                ...thumb,
+                marginTop: (trackHeight - thumbSize) / 2,
+            },
+            '&::-moz-range-track': { height: trackHeight, borderRadius: radius, background: track },
+            '&::-moz-range-progress': { height: trackHeight, borderRadius: radius, background: fill },
+            '&::-moz-range-thumb': thumb,
+            '&:focus-visible': { outline: `2px solid ${fill}`, outlineOffset: 2 },
+            '&:disabled': {
+                cursor: 'not-allowed',
+                opacity: 0.5,
+                '&::-webkit-slider-thumb': { cursor: 'not-allowed' },
+                '&::-moz-range-thumb': { cursor: 'not-allowed' },
+            },
+        });
+    }, ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSliderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniSliderComponent, isStandalone: true, selector: "uni-slider, Slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, 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 } }, outputs: { value: "valueChange", touched: "touchedChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'slider' }], usesInheritance: true, ngImport: i0, template: `
+    <input
+      type="range"
+      [class]="inputClass()"
+      [style.--uni-slider-fill]="fillPercent()"
+      [min]="resolvedMin()"
+      [max]="resolvedMax()"
+      [step]="step()"
+      [value]="value()"
+      [disabled]="disabled()"
+      (input)="handleInput($event)"
+      (blur)="markAsTouched()"
+      [attr.aria-label]="label()"
+      [attr.aria-describedby]="ariaDescribedBy() || null"
+    />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSliderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'uni-slider, Slider',
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'slider' }],
+                    template: `
+    <input
+      type="range"
+      [class]="inputClass()"
+      [style.--uni-slider-fill]="fillPercent()"
+      [min]="resolvedMin()"
+      [max]="resolvedMax()"
+      [step]="step()"
+      [value]="value()"
+      [disabled]="disabled()"
+      (input)="handleInput($event)"
+      (blur)="markAsTouched()"
+      [attr.aria-label]="label()"
+      [attr.aria-describedby]="ariaDescribedBy() || null"
+    />
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }] } });
+
+/**
+ * One tab inside `uni-tabs`: a label for the tablist plus projected panel
+ * content. Content is captured in a template and only instantiated while the
+ * tab is selected, so inactive panels cost nothing.
+ */
+class UniTabComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Stable ids wiring tab ↔ panel ARIA relationships. */
+    id = uniqueId('uni-tab');
+    panelId = `${this.id}-panel`;
+    content = viewChild.required('content');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniTabComponent, isStandalone: true, selector: "uni-tab, Tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content><ng-content /></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'uni-tab, Tab',
+                    template: `<ng-template #content><ng-content /></ng-template>`,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+
+/**
+ * WAI-ARIA tabs: roving tabindex, automatic activation (arrow keys move focus
+ * and select), Home/End, disabled tabs skipped. Only the selected panel is
+ * instantiated. All styling resolves from `tabs` theme option tokens.
+ */
+class UniTabsComponent extends BaseComponent {
+    /** Index of the selected tab; two-way bindable. */
+    selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    tabs = contentChildren(UniTabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    tabButtons = viewChildren('tabButton', ...(ngDevMode ? [{ debugName: "tabButtons" }] : /* istanbul ignore next */ []));
+    /** The selection, snapped to the nearest enabled tab. */
+    activeIndex = computed(() => {
+        const tabs = this.tabs();
+        const wanted = this.selectedIndex();
+        if (tabs[wanted] && !tabs[wanted].disabled())
+            return wanted;
+        const firstEnabled = tabs.findIndex((tab) => !tab.disabled());
+        return firstEnabled === -1 ? 0 : firstEnabled;
+    }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activeTab = computed(() => this.tabs()[this.activeIndex()], ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    select(index) {
+        if (this.tabs()[index]?.disabled())
+            return;
+        this.selectedIndex.set(index);
+    }
+    onKeydown(event) {
+        const enabled = this.tabs()
+            .map((tab, index) => ({ tab, index }))
+            .filter(({ tab }) => !tab.disabled())
+            .map(({ index }) => index);
+        if (enabled.length === 0)
+            return;
+        const position = enabled.indexOf(this.activeIndex());
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+                next = enabled[(position + 1) % enabled.length];
+                break;
+            case 'ArrowLeft':
+                next = enabled[(position - 1 + enabled.length) % enabled.length];
+                break;
+            case 'Home':
+                next = enabled[0];
+                break;
+            case 'End':
+                next = enabled[enabled.length - 1];
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.select(next);
+        this.tabButtons()[next]?.nativeElement.focus();
+    }
+    tablistClass = computed(() => {
+        const options = this.componentOptions();
+        return css({
+            display: 'flex',
+            alignItems: 'stretch',
+            ...this.theme.gap(options.gap),
+            ...this.theme.borderBottom(options.divider),
+        });
+    }, ...(ngDevMode ? [{ debugName: "tablistClass" }] : /* istanbul ignore next */ []));
+    tabClass = computed(() => {
+        const options = this.componentOptions();
+        const thickness = options.indicatorThickness
+            ? this.theme.getThickness(options.indicatorThickness)
+            : 2;
+        return css({
+            border: 0,
+            background: 'transparent',
+            cursor: 'pointer',
+            // The indicator overlays the divider: reserve its thickness on every
+            // tab so labels don't shift when selection moves.
+            borderBottom: `${thickness}px solid transparent`,
+            marginBottom: -1,
+            ...this.theme.typeface(options.typeface),
+            ...this.theme.color(options.textColor),
+            ...this.theme.paddingLeft(options.padding),
+            ...this.theme.paddingRight(options.padding),
+            ...this.theme.paddingTop('sm'),
+            ...this.theme.paddingBottom('sm'),
+            ...this.theme.radius(options.borderRadius),
+            ...motionSafe({ transition: 'color 0.15s ease, border-color 0.15s ease' }),
+            '&.active': {
+                ...this.theme.color(options.activeTextColor),
+                ...this.theme.backgroundColor(options.activeColor),
+                borderBottomColor: this.theme.colors()[options.indicatorColor ?? 'primary'],
+            },
+            '&:disabled': {
+                ...this.theme.color('on-disabled'),
+                cursor: 'not-allowed',
+            },
+            '&:focus-visible': {
+                outline: `2px solid ${this.theme.colors()[options.indicatorColor ?? 'primary']}`,
+                outlineOffset: -2,
+            },
+        });
+    }, ...(ngDevMode ? [{ debugName: "tabClass" }] : /* istanbul ignore next */ []));
+    panelClass = computed(() => css({
+        ...this.theme.paddingTop('md'),
+        '&:focus-visible': {
+            outline: `2px solid ${this.theme.colors()[this.componentOptions().indicatorColor ?? 'primary']}`,
+            outlineOffset: 2,
+        },
+    }), ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTabsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniTabsComponent, isStandalone: true, selector: "uni-tabs, Tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, providers: [{ provide: COMPONENT_NAME, useValue: 'tabs' }], queries: [{ propertyName: "tabs", predicate: UniTabComponent, isSignal: true }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div role="tablist" [class]="tablistClass()" (keydown)="onKeydown($event)">
+      @for (tab of tabs(); track tab.id; let i = $index) {
+        <button
+          #tabButton
+          type="button"
+          role="tab"
+          [id]="tab.id"
+          [class]="tabClass()"
+          [attr.aria-selected]="i === activeIndex()"
+          [attr.aria-controls]="tab.panelId"
+          [attr.tabindex]="i === activeIndex() ? 0 : -1"
+          [disabled]="tab.disabled()"
+          [class.active]="i === activeIndex()"
+          (click)="select(i)"
+        >
+          {{ tab.label() }}
+        </button>
+      }
+    </div>
+    @if (activeTab(); as tab) {
+      <div
+        role="tabpanel"
+        [id]="tab.panelId"
+        [attr.aria-labelledby]="tab.id"
+        tabindex="0"
+        [class]="panelClass()"
+      >
+        <ng-container [ngTemplateOutlet]="tab.content()" />
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTabsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'uni-tabs, Tabs',
+                    imports: [NgTemplateOutlet],
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'tabs' }],
+                    template: `
+    <div role="tablist" [class]="tablistClass()" (keydown)="onKeydown($event)">
+      @for (tab of tabs(); track tab.id; let i = $index) {
+        <button
+          #tabButton
+          type="button"
+          role="tab"
+          [id]="tab.id"
+          [class]="tabClass()"
+          [attr.aria-selected]="i === activeIndex()"
+          [attr.aria-controls]="tab.panelId"
+          [attr.tabindex]="i === activeIndex() ? 0 : -1"
+          [disabled]="tab.disabled()"
+          [class.active]="i === activeIndex()"
+          (click)="select(i)"
+        >
+          {{ tab.label() }}
+        </button>
+      }
+    </div>
+    @if (activeTab(); as tab) {
+      <div
+        role="tabpanel"
+        [id]="tab.panelId"
+        [attr.aria-labelledby]="tab.id"
+        tabindex="0"
+        [class]="panelClass()"
+      >
+        <ng-container [ngTemplateOutlet]="tab.content()" />
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UniTabComponent), { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }] } });
+
+class UniTextareaComponent {
+    theme = inject(ThemeService);
+    // --- REQUIRED SIGNALS (populated by FormValueControl) ---
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    /** Synced from required() validators by the Signal Forms [field] directive. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * Id(s) of external element(s) describing this control — typically your
+     * app-rendered error message — exposed as aria-describedby.
+     */
+    ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    // --- CONFIGURATION ---
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Visible text rows. Defaults to the theme's `textarea` options. */
+    rows = input(undefined, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    options = this.theme.getComponentOptions('textarea');
+    resolvedRows = computed(() => this.rows() ?? this.options().rows ?? 3, ...(ngDevMode ? [{ debugName: "resolvedRows" }] : /* istanbul ignore next */ []));
+    // Only show errors if the user has actually interacted with the field
+    showError = computed(() => this.invalid() && (this.touched() || this.dirty()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    textareaClass = computed(() => css({
+        width: '100%',
+        resize: this.options().resize ?? 'vertical',
+    }), ...(ngDevMode ? [{ debugName: "textareaClass" }] : /* istanbul ignore next */ []));
+    markAsTouched() {
+        this.touched.set(true);
+    }
+    handleInput(event) {
+        this.value.set(event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniTextareaComponent, isStandalone: true, selector: "uni-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: "<uni-input-box [error]=\"showError()\" height=\"auto\">\n  <textarea\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    (blur)=\"markAsTouched()\"\n    [rows]=\"resolvedRows()\"\n    [class]=\"textareaClass()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  ></textarea>\n</uni-input-box>\n", dependencies: [{ kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'uni-textarea', imports: [UniInputBoxComponent], template: "<uni-input-box [error]=\"showError()\" height=\"auto\">\n  <textarea\n    [value]=\"value()\"\n    (input)=\"handleInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    (blur)=\"markAsTouched()\"\n    [rows]=\"resolvedRows()\"\n    [class]=\"textareaClass()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  ></textarea>\n</uni-input-box>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+
 /**
  * UniSortHeaderComponent Barrel File
  *
@@ -4769,13 +5738,14 @@ const SCHEMES = [
     'triadic',
 ];
 const CATEGORIES = ['jewel', 'pastel', 'earth', 'neutral', 'florescent', 'shades'];
+const SHAPES = ['sharp', 'modern', 'playful'];
 const VARIANTS = ['primary', 'secondary', 'tertiary', 'warn', 'ghost'];
-// Representative tokens to show as swatches — the brand-derived spine of the theme.
+// Representative tokens shown as swatches in each mode panel.
 const SWATCHES = [
     { label: 'primary', token: 'primary', on: 'on-primary' },
     { label: 'secondary', token: 'secondary', on: 'on-secondary' },
     { label: 'tertiary', token: 'tertiary', on: 'on-tertiary' },
-    { label: 'quaternary', token: 'quaternary', on: 'on-quaternary' },
+    { label: 'container', token: 'primary-container', on: 'on-primary-container' },
     { label: 'error', token: 'error', on: 'on-error' },
     { label: 'warn', token: 'warn', on: 'on-warn' },
     { label: 'success', token: 'success', on: 'on-success' },
@@ -4842,6 +5812,7 @@ class UniThemeBuilderComponent {
     theme = inject(ThemeService);
     schemes = SCHEMES;
     categories = CATEGORIES;
+    shapes = SHAPES;
     variants = VARIANTS;
     sizes = ['sm', 'md', 'lg', 'xl'];
     swatches = SWATCHES;
@@ -4849,6 +5820,7 @@ class UniThemeBuilderComponent {
     seed = signal('#4F46E5', ...(ngDevMode ? [{ debugName: "seed" }] : /* istanbul ignore next */ []));
     scheme = signal('triadic', ...(ngDevMode ? [{ debugName: "scheme" }] : /* istanbul ignore next */ []));
     category = signal('neutral', ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
+    shape = signal('modern', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     floor = signal(18, ...(ngDevMode ? [{ debugName: "floor" }] : /* istanbul ignore next */ []));
     mode = signal('light', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     pinPrimary = signal(false, ...(ngDevMode ? [{ debugName: "pinPrimary" }] : /* istanbul ignore next */ []));
@@ -4857,6 +5829,8 @@ class UniThemeBuilderComponent {
     secondaryHex = signal('#D4A373', ...(ngDevMode ? [{ debugName: "secondaryHex" }] : /* istanbul ignore next */ []));
     /** Soft brand targets carried by the active preset (cleared on seed edits). */
     targets = signal(undefined, ...(ngDevMode ? [{ debugName: "targets" }] : /* istanbul ignore next */ []));
+    copied = signal(null, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    showAllPairs = signal(false, ...(ngDevMode ? [{ debugName: "showAllPairs" }] : /* istanbul ignore next */ []));
     constructor() {
         // Seed the controls from an already-active custom palette, if any.
         const existing = this.theme.customPalette();
@@ -4883,19 +5857,88 @@ class UniThemeBuilderComponent {
         category: this.category(),
         mode: this.mode(),
         accentSaturationFloor: this.floor(),
+        radii: ShapeRadii[this.shape()],
         ...(this.targets() ? { targets: this.targets() } : {}),
         brand: {
             ...(this.pinPrimary() ? { primary: this.primaryHex() } : {}),
             ...(this.pinSecondary() ? { secondary: this.secondaryHex() } : {}),
         },
     }), ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
-    snippet = computed(() => JSON.stringify(this.config()), ...(ngDevMode ? [{ debugName: "snippet" }] : /* istanbul ignore next */ []));
+    /**
+     * Both modes generated on every input change (< 15 ms each), independent of
+     * the storybook-wide theme — the side-by-side preview and the contrast
+     * report always show the full light+dark picture.
+     */
+    palettes = computed(() => {
+        const base = { ...this.config() };
+        const checks = [];
+        const light = generatePalette({ ...base, mode: 'light', checks });
+        const dark = generatePalette({ ...base, mode: 'dark', checks });
+        return { light, dark, checks };
+    }, ...(ngDevMode ? [{ debugName: "palettes" }] : /* istanbul ignore next */ []));
+    modePanels = computed(() => [
+        { label: 'light', colors: this.palettes().light },
+        { label: 'dark', colors: this.palettes().dark },
+    ], ...(ngDevMode ? [{ debugName: "modePanels" }] : /* istanbul ignore next */ []));
+    report = computed(() => {
+        const { checks } = this.palettes();
+        return {
+            checks,
+            failing: checks.filter((c) => !c.pass),
+            worst: checks.reduce((worst, c) => Math.min(worst, c.ratio), 21),
+        };
+    }, ...(ngDevMode ? [{ debugName: "report" }] : /* istanbul ignore next */ []));
+    visibleChecks = computed(() => this.showAllPairs() ? this.report().checks : this.report().failing, ...(ngDevMode ? [{ debugName: "visibleChecks" }] : /* istanbul ignore next */ []));
+    snippet = computed(() => {
+        const { radii: _radii, ...rest } = this.config();
+        return JSON.stringify(rest);
+    }, ...(ngDevMode ? [{ debugName: "snippet" }] : /* istanbul ignore next */ []));
+    /** The builder state expressed as engine input — drives all three exports. */
+    generationInput = computed(() => {
+        const targets = this.targets();
+        const seeds = [this.pinPrimary() ? this.primaryHex() : (targets?.primary ?? this.seed())];
+        const secondary = this.pinSecondary() ? this.secondaryHex() : targets?.secondary;
+        if (secondary)
+            seeds.push(secondary);
+        if (targets?.tertiary)
+            seeds.push(targets.tertiary);
+        return {
+            seed: seeds.length === 1 ? seeds[0] : seeds,
+            scheme: this.scheme(),
+            vibe: this.category(),
+            shape: this.shape(),
+            name: 'Brand',
+        };
+    }, ...(ngDevMode ? [{ debugName: "generationInput" }] : /* istanbul ignore next */ []));
     color(token) {
         return this.theme.colors()[token] ?? 'transparent';
     }
     apply() {
         this.theme.applyPalette(this.config());
     }
+    copyToClipboard(kind, text) {
+        void navigator.clipboard?.writeText(text).then(() => {
+            this.copied.set(kind);
+            setTimeout(() => this.copied.set(null), 1600);
+        });
+    }
+    copyThemeFile() {
+        this.copyToClipboard('file', emitThemeFile(this.generationInput()).content);
+    }
+    copyNgAdd() {
+        const input = this.generationInput();
+        const seeds = Array.isArray(input.seed) ? input.seed.join(',') : input.seed;
+        this.copyToClipboard('ngadd', `ng add @uni-design-system/uni-angular --brand=${seeds} --shape=${input.shape}`);
+    }
+    copyDtcg() {
+        const { light, dark } = this.palettes();
+        const radii = ShapeRadii[this.shape()];
+        const spacing = this.theme.spacing();
+        this.copyToClipboard('dtcg', JSON.stringify({
+            light: emitDtcgTokens({ colors: light, radii, spacing }),
+            dark: emitDtcgTokens({ colors: dark, radii, spacing }),
+        }, null, 2));
+    }
     setSeed(v) {
         if (/^#?[0-9a-fA-F]{6}$/.test(v.replace('#', ''))) {
             this.seed.set(v.startsWith('#') ? v : `#${v}`);
@@ -4912,6 +5955,10 @@ class UniThemeBuilderComponent {
         this.category.set(v);
         this.apply();
     }
+    setShape(v) {
+        this.shape.set(v);
+        this.apply();
+    }
     setFloor(v) {
         this.floor.set(Number(v));
         this.apply();
@@ -4957,6 +6004,7 @@ class UniThemeBuilderComponent {
         this.seed.set('#4F46E5');
         this.scheme.set('triadic');
         this.category.set('neutral');
+        this.shape.set('modern');
         this.floor.set(18);
         this.mode.set('light');
         this.targets.set(undefined);
@@ -5055,6 +6103,16 @@ class UniThemeBuilderComponent {
             color: this.c('on-primary'),
             borderColor: this.c('primary'),
         },
+        '& .tb-exports': { display: 'flex', flexDirection: 'column', gap: 6 },
+        '& .tb-exports button': {
+            height: 32,
+            borderRadius: 8,
+            cursor: 'pointer',
+            fontSize: 12.5,
+            border: `1px solid ${this.c('primary')}`,
+            background: this.c('primary-surface'),
+            color: this.c('on-primary-surface'),
+        },
         '& .tb-pin.dim input[type=color], & .tb-pin.dim input[type=text]': { opacity: 0.45 },
         '& .tb-pin em': {
             fontStyle: 'normal',
@@ -5087,34 +6145,86 @@ class UniThemeBuilderComponent {
         display: 'flex',
         flexDirection: 'column',
         gap: 10,
-        '& .tb-swatches': {
+        '& .tb-modes': {
             display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
-            gap: 10,
+            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+            gap: 14,
             marginBottom: 20,
         },
+        '& .tb-panel': {
+            border: '1px solid',
+            borderRadius: 14,
+            padding: 14,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 12,
+        },
+        '& .tb-panel-tag': {
+            fontSize: 10.5,
+            letterSpacing: '0.12em',
+            textTransform: 'uppercase',
+        },
+        '& .tb-mode-swatches': {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))',
+            gap: 8,
+        },
         '& .tb-swatch': {
-            borderRadius: 12,
-            padding: '16px 14px',
-            minHeight: 74,
+            borderRadius: 10,
+            padding: '12px 12px',
+            minHeight: 60,
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'space-between',
         },
-        '& .tb-swatch span': { fontSize: 13, fontWeight: 600 },
-        '& .tb-swatch code': { fontFamily: 'monospace', fontSize: 11, opacity: 0.85 },
+        '& .tb-swatch span': { fontSize: 12.5, fontWeight: 600 },
+        '& .tb-swatch code': { fontFamily: 'monospace', fontSize: 10.5, opacity: 0.85 },
+        '& .tb-mini-card': { borderRadius: 10, overflow: 'hidden', border: '1px solid' },
+        '& .tb-mini-head': { padding: '8px 14px', fontWeight: 600, fontSize: 13 },
+        '& .tb-mini-body': { padding: '10px 14px', fontSize: 12.5, lineHeight: 1.5 },
         '& .tb-buttons': { display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', marginBottom: 14 },
-        '& .tb-cards': { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 14, marginBottom: 12 },
-        '& .tb-card': { borderRadius: 12, overflow: 'hidden', border: '1px solid' },
-        '& .tb-card-head': { padding: '10px 16px', fontWeight: 600 },
-        '& .tb-card-body': { padding: '14px 16px', fontSize: 13.5, lineHeight: 1.5 },
+        '& .tb-pass': { color: this.c('success'), fontWeight: 700 },
+        '& .tb-fail': { color: this.c('error'), fontWeight: 700 },
+        '& .tb-link': {
+            marginLeft: 10,
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            color: this.c('primary'),
+            fontSize: 11,
+            textTransform: 'none',
+            letterSpacing: 'normal',
+            textDecoration: 'underline',
+        },
+        '& .tb-matrix': {
+            maxHeight: 320,
+            overflow: 'auto',
+            border: `1px solid ${this.c('outline')}`,
+            borderRadius: 10,
+            marginBottom: 12,
+            '& table': { width: '100%', borderCollapse: 'collapse', fontSize: 12 },
+            '& th': {
+                position: 'sticky',
+                top: 0,
+                textAlign: 'left',
+                padding: '8px 10px',
+                background: this.c('surface-variant'),
+                color: this.c('on-surface-variant'),
+                fontSize: 10.5,
+                textTransform: 'uppercase',
+                letterSpacing: '0.08em',
+            },
+            '& td': { padding: '6px 10px', borderTop: `1px solid ${this.c('outline')}` },
+            '& td code': { fontFamily: 'monospace', fontSize: 11.5 },
+            '& tr.bad td': { background: this.c('error-container'), color: this.c('on-error-container') },
+        },
         '& .tb-hint': { fontSize: 12.5, opacity: 0.6, marginTop: 8 },
     }), ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniThemeBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniThemeBuilderComponent, isStandalone: true, selector: "uni-theme-builder", host: { properties: { "class": "shell()" } }, ngImport: i0, template: `
     <aside [class]="controls()">
       <header class="tb-head">
-        <span class="tb-eyebrow">Theme builder · Color</span>
+        <span class="tb-eyebrow">Theme builder · Playground</span>
         <h2 class="tb-title">Make Uni your brand</h2>
         <p class="tb-lede">
           Every token is derived in OKLCH from a seed color, a scheme and a category — or bring
@@ -5161,13 +6271,22 @@ class UniThemeBuilderComponent {
         </select>
       </label>
 
+      <label class="tb-field">
+        <span>Shape</span>
+        <select (change)="setShape($any($event.target).value)">
+          @for (s of shapes; track s) {
+            <option [value]="s" [selected]="s === shape()">{{ s }}</option>
+          }
+        </select>
+      </label>
+
       <label class="tb-field">
         <span>Accent saturation floor · {{ floor() }}</span>
         <input type="range" min="0" max="45" [value]="floor()" (input)="setFloor($any($event.target).value)" />
       </label>
 
       <div class="tb-field">
-        <span>Mode</span>
+        <span>Storybook mode</span>
         <div class="tb-toggle">
           <button type="button" [class.on]="mode() === 'light'" (click)="setMode('light')">Light</button>
           <button type="button" [class.on]="mode() === 'dark'" (click)="setMode('dark')">Dark</button>
@@ -5196,6 +6315,21 @@ class UniThemeBuilderComponent {
         </div>
       </label>
 
+      <div class="tb-field">
+        <span>Export</span>
+        <div class="tb-exports">
+          <button type="button" (click)="copyThemeFile()">
+            {{ copied() === 'file' ? 'Copied ✓' : 'Copy uni-theme.ts' }}
+          </button>
+          <button type="button" (click)="copyNgAdd()">
+            {{ copied() === 'ngadd' ? 'Copied ✓' : 'Copy ng add command' }}
+          </button>
+          <button type="button" (click)="copyDtcg()">
+            {{ copied() === 'dtcg' ? 'Copied ✓' : 'Copy DTCG JSON' }}
+          </button>
+        </div>
+      </div>
+
       <div class="tb-actions">
         <button type="button" class="tb-reset" (click)="reset()">Reset to default</button>
       </div>
@@ -5203,17 +6337,35 @@ class UniThemeBuilderComponent {
     </aside>
 
     <section [class]="preview()">
-      <p class="tb-group">Palette</p>
-      <div class="tb-swatches">
-        @for (s of swatches; track s.label) {
-          <div class="tb-swatch" [style.background]="color(s.token)" [style.color]="color(s.on)">
-            <span>{{ s.label }}</span>
-            <code>{{ color(s.token) }}</code>
+      <p class="tb-group">Light & dark — generated together, side by side</p>
+      <div class="tb-modes">
+        @for (m of modePanels(); track m.label) {
+          <div class="tb-panel" [style.background]="m.colors['background']" [style.borderColor]="m.colors['outline']">
+            <span class="tb-panel-tag" [style.color]="m.colors['on-background-variant']">{{ m.label }}</span>
+            <div class="tb-mode-swatches">
+              @for (s of swatches; track s.label) {
+                <div class="tb-swatch" [style.background]="m.colors[s.token]" [style.color]="m.colors[s.on]">
+                  <span>{{ s.label }}</span>
+                  <code>{{ m.colors[s.token] }}</code>
+                </div>
+              }
+            </div>
+            <div class="tb-mini-card" [style.background]="m.colors['surface']" [style.borderColor]="m.colors['outline']">
+              <div class="tb-mini-head" [style.background]="m.colors['primary']" [style.color]="m.colors['on-primary']">
+                Card header
+              </div>
+              <div class="tb-mini-body" [style.color]="m.colors['on-surface']">
+                Semantic inks stay legible:
+                <b [style.color]="m.colors['error']">error</b> ·
+                <b [style.color]="m.colors['warn']">warn</b> ·
+                <b [style.color]="m.colors['success']">success</b>.
+              </div>
+            </div>
           </div>
         }
       </div>
 
-      <p class="tb-group">Buttons — your brand, our variants</p>
+      <p class="tb-group">Real components — your brand, live ({{ mode() }})</p>
       <div class="tb-buttons">
         @for (v of variants; track v) {
           <button text-button [variant]="v" size="lg">{{ v }}</button>
@@ -5225,26 +6377,45 @@ class UniThemeBuilderComponent {
         }
       </div>
 
-      <p class="tb-group">Surfaces</p>
-      <div class="tb-cards">
-        <div class="tb-card" [style.background]="color('surface')" [style.borderColor]="color('outline')">
-          <div class="tb-card-head" [style.background]="color('primary')" [style.color]="color('on-primary')">
-            Card header
-          </div>
-          <div class="tb-card-body" [style.color]="color('on-surface')">
-            Body copy on a surface with the outline token as its border. Semantic states stay legible:
-            <b [style.color]="color('error')">error</b> ·
-            <b [style.color]="color('warn')">warn</b> ·
-            <b [style.color]="color('success')">success</b>.
-          </div>
-        </div>
-        <div class="tb-card" [style.background]="color('primary-container')" [style.borderColor]="color('primary')">
-          <div class="tb-card-body" [style.color]="color('on-primary-container')">
-            <b>primary-container</b> — a soft brand tint for chips, highlights and callouts, with its
-            own legible on-color.
-          </div>
+      <p class="tb-group">
+        Contrast report — {{ report().checks.length }} pairs ·
+        worst {{ report().worst }}:1 ·
+        @if (report().failing.length === 0) {
+          <span class="tb-pass">all AA</span>
+        } @else {
+          <span class="tb-fail">{{ report().failing.length }} failing</span>
+        }
+        <button type="button" class="tb-link" (click)="showAllPairs.set(!showAllPairs())">
+          {{ showAllPairs() ? 'hide detail' : 'show all pairs' }}
+        </button>
+      </p>
+      @if (report().failing.length > 0 || showAllPairs()) {
+        <div class="tb-matrix">
+          <table>
+            <thead>
+              <tr><th>mode</th><th>foreground</th><th>on</th><th>ratio</th><th>needs</th><th>level</th></tr>
+            </thead>
+            <tbody>
+              @for (c of visibleChecks(); track $index) {
+                <tr [class.bad]="!c.pass">
+                  <td>{{ c.mode }}</td>
+                  <td><code>{{ c.foreground }}</code></td>
+                  <td><code>{{ c.background }}</code></td>
+                  <td>{{ c.ratio }}</td>
+                  <td>{{ c.required }}</td>
+                  <td>{{ c.level }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
         </div>
-      </div>
+      }
+      @if (report().failing.length > 0) {
+        <p class="tb-hint">
+          Failing pairs come from hard-pinned brand colors (pins are emitted verbatim). Un-pin, or
+          use a preset — soft targets keep brand hue while the guard-rail restores AA.
+        </p>
+      }
 
       <p class="tb-hint">Tip: browse to any component story in the sidebar — it's wearing your brand now.</p>
     </section>
@@ -5260,7 +6431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     template: `
     <aside [class]="controls()">
       <header class="tb-head">
-        <span class="tb-eyebrow">Theme builder · Color</span>
+        <span class="tb-eyebrow">Theme builder · Playground</span>
         <h2 class="tb-title">Make Uni your brand</h2>
         <p class="tb-lede">
           Every token is derived in OKLCH from a seed color, a scheme and a category — or bring
@@ -5307,13 +6478,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         </select>
       </label>
 
+      <label class="tb-field">
+        <span>Shape</span>
+        <select (change)="setShape($any($event.target).value)">
+          @for (s of shapes; track s) {
+            <option [value]="s" [selected]="s === shape()">{{ s }}</option>
+          }
+        </select>
+      </label>
+
       <label class="tb-field">
         <span>Accent saturation floor · {{ floor() }}</span>
         <input type="range" min="0" max="45" [value]="floor()" (input)="setFloor($any($event.target).value)" />
       </label>
 
       <div class="tb-field">
-        <span>Mode</span>
+        <span>Storybook mode</span>
         <div class="tb-toggle">
           <button type="button" [class.on]="mode() === 'light'" (click)="setMode('light')">Light</button>
           <button type="button" [class.on]="mode() === 'dark'" (click)="setMode('dark')">Dark</button>
@@ -5342,6 +6522,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         </div>
       </label>
 
+      <div class="tb-field">
+        <span>Export</span>
+        <div class="tb-exports">
+          <button type="button" (click)="copyThemeFile()">
+            {{ copied() === 'file' ? 'Copied ✓' : 'Copy uni-theme.ts' }}
+          </button>
+          <button type="button" (click)="copyNgAdd()">
+            {{ copied() === 'ngadd' ? 'Copied ✓' : 'Copy ng add command' }}
+          </button>
+          <button type="button" (click)="copyDtcg()">
+            {{ copied() === 'dtcg' ? 'Copied ✓' : 'Copy DTCG JSON' }}
+          </button>
+        </div>
+      </div>
+
       <div class="tb-actions">
         <button type="button" class="tb-reset" (click)="reset()">Reset to default</button>
       </div>
@@ -5349,17 +6544,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
     </aside>
 
     <section [class]="preview()">
-      <p class="tb-group">Palette</p>
-      <div class="tb-swatches">
-        @for (s of swatches; track s.label) {
-          <div class="tb-swatch" [style.background]="color(s.token)" [style.color]="color(s.on)">
-            <span>{{ s.label }}</span>
-            <code>{{ color(s.token) }}</code>
+      <p class="tb-group">Light & dark — generated together, side by side</p>
+      <div class="tb-modes">
+        @for (m of modePanels(); track m.label) {
+          <div class="tb-panel" [style.background]="m.colors['background']" [style.borderColor]="m.colors['outline']">
+            <span class="tb-panel-tag" [style.color]="m.colors['on-background-variant']">{{ m.label }}</span>
+            <div class="tb-mode-swatches">
+              @for (s of swatches; track s.label) {
+                <div class="tb-swatch" [style.background]="m.colors[s.token]" [style.color]="m.colors[s.on]">
+                  <span>{{ s.label }}</span>
+                  <code>{{ m.colors[s.token] }}</code>
+                </div>
+              }
+            </div>
+            <div class="tb-mini-card" [style.background]="m.colors['surface']" [style.borderColor]="m.colors['outline']">
+              <div class="tb-mini-head" [style.background]="m.colors['primary']" [style.color]="m.colors['on-primary']">
+                Card header
+              </div>
+              <div class="tb-mini-body" [style.color]="m.colors['on-surface']">
+                Semantic inks stay legible:
+                <b [style.color]="m.colors['error']">error</b> ·
+                <b [style.color]="m.colors['warn']">warn</b> ·
+                <b [style.color]="m.colors['success']">success</b>.
+              </div>
+            </div>
           </div>
         }
       </div>
 
-      <p class="tb-group">Buttons — your brand, our variants</p>
+      <p class="tb-group">Real components — your brand, live ({{ mode() }})</p>
       <div class="tb-buttons">
         @for (v of variants; track v) {
           <button text-button [variant]="v" size="lg">{{ v }}</button>
@@ -5371,26 +6584,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }
       </div>
 
-      <p class="tb-group">Surfaces</p>
-      <div class="tb-cards">
-        <div class="tb-card" [style.background]="color('surface')" [style.borderColor]="color('outline')">
-          <div class="tb-card-head" [style.background]="color('primary')" [style.color]="color('on-primary')">
-            Card header
-          </div>
-          <div class="tb-card-body" [style.color]="color('on-surface')">
-            Body copy on a surface with the outline token as its border. Semantic states stay legible:
-            <b [style.color]="color('error')">error</b> ·
-            <b [style.color]="color('warn')">warn</b> ·
-            <b [style.color]="color('success')">success</b>.
-          </div>
-        </div>
-        <div class="tb-card" [style.background]="color('primary-container')" [style.borderColor]="color('primary')">
-          <div class="tb-card-body" [style.color]="color('on-primary-container')">
-            <b>primary-container</b> — a soft brand tint for chips, highlights and callouts, with its
-            own legible on-color.
-          </div>
+      <p class="tb-group">
+        Contrast report — {{ report().checks.length }} pairs ·
+        worst {{ report().worst }}:1 ·
+        @if (report().failing.length === 0) {
+          <span class="tb-pass">all AA</span>
+        } @else {
+          <span class="tb-fail">{{ report().failing.length }} failing</span>
+        }
+        <button type="button" class="tb-link" (click)="showAllPairs.set(!showAllPairs())">
+          {{ showAllPairs() ? 'hide detail' : 'show all pairs' }}
+        </button>
+      </p>
+      @if (report().failing.length > 0 || showAllPairs()) {
+        <div class="tb-matrix">
+          <table>
+            <thead>
+              <tr><th>mode</th><th>foreground</th><th>on</th><th>ratio</th><th>needs</th><th>level</th></tr>
+            </thead>
+            <tbody>
+              @for (c of visibleChecks(); track $index) {
+                <tr [class.bad]="!c.pass">
+                  <td>{{ c.mode }}</td>
+                  <td><code>{{ c.foreground }}</code></td>
+                  <td><code>{{ c.background }}</code></td>
+                  <td>{{ c.ratio }}</td>
+                  <td>{{ c.required }}</td>
+                  <td>{{ c.level }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
         </div>
-      </div>
+      }
+      @if (report().failing.length > 0) {
+        <p class="tb-hint">
+          Failing pairs come from hard-pinned brand colors (pins are emitted verbatim). Un-pin, or
+          use a preset — soft targets keep brand hue while the guard-rail restores AA.
+        </p>
+      }
 
       <p class="tb-hint">Tip: browse to any component story in the sidebar — it's wearing your brand now.</p>
     </section>
@@ -5509,5 +6741,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniButtonComponent, UniButtonGroupComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniSymbolComponent, UniTagComponent, UniTextComponent, UniThemeBuilderComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, anchorArrowStyles, anchorStyles, getFileExtension, motionSafe, newAnchorName, resolveFocusTarget, uniqueId, useTimer, visuallyHidden };
+export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, LocalStorageService, NotificationService, NotificationsComponent, RippleDirective, ThemeService, UNI_THEMES, UniAlertComponent, UniAppBarComponent, UniAvatarComponent, UniAvatarGroupComponent, UniBackgroundComponent, UniBadgeComponent, UniBaseDatasource, UniBoxComponent, UniBreadcrumbComponent, UniButtonComponent, UniButtonGroupComponent, UniCardComponent, UniCardContentComponent, UniCardHeaderComponent, UniCenterComponent, UniCheckboxComponent, UniDataSearchComponent, UniDataTableComponent, UniDebounceInputComponent, UniDialogButtonsComponent, UniDialogComponent, UniDialogHeaderComponent, UniDividerComponent, UniDrawerComponent, UniDropdownComponent, UniExpandAreaComponent, UniExpandComponent, UniExpandToggleComponent, UniFileDropZoneComponent, UniGridAreaComponent, UniGridComponent, UniIconButtonComponent, UniIconComponent, UniInputBoxComponent, UniInputComponent, UniJsonViewComponent, UniMenuComponent, UniMultiSelectComponent, UniMultiSelectDropdownComponent, UniNotificationBadgeComponent, UniPaginatorComponent, UniPopoverComponent, UniProgressBarComponent, UniProgressGaugeComponent, UniRadioComponent, UniRecordDatasource, UniRowComponent, UniScrollAreaComponent, UniSearchInputComponent, UniSelectComponent, UniServerSideDatasource, UniSkeletonComponent, UniSliderComponent, UniSnackbarComponent, UniSortHeaderComponent, UniStackComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, anchorArrowStyles, anchorStyles, getFileExtension, motionSafe, newAnchorName, resolveFocusTarget, uniqueId, useTimer, visuallyHidden };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map