@uni-design-system/uni-angular 7.0.0 → 7.2.0

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

@@ -1368,14 +1368,37 @@ class UniIconComponent {
     themeService = inject(ThemeService);
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit square size. Bare numbers are px; strings pass through, so any CSS
+     * length works (`'1.25rem'`, `'1em'`, `'clamp(…)'`).
+     *
+     * Leave it unset to keep the default behaviour — the icon fills its
+     * container, which is what lets a themed control size its own glyph through
+     * padding. Set it at call sites that would otherwise need a width/height
+     * rule just to size one icon.
+     */
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
     /** Resolved from the theme's icon primitives; unknown names render nothing. */
     path = computed(() => {
         const icon = this.themeService.theme().icons[this.name()];
         return icon ? `url("${icon}")` : 'none';
     }, ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    /** `null` leaves the styles off entirely, falling back to the stylesheet. */
+    sizeValue = computed(() => {
+        const size = this.size();
+        if (size === undefined || size === null || size === '')
+            return null;
+        if (typeof size === 'number')
+            return `${size}px`;
+        // A static attribute (`size="24"`) arrives as a string, so a bare number
+        // has to mean px here too — otherwise it emits the invalid `width: 24`,
+        // which the browser drops, silently falling back to filling the container.
+        const trimmed = size.trim();
+        return /^-?\d*\.?\d+$/.test(trimmed) ? `${trimmed}px` : trimmed;
+    }, ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
     className = computed(() => css([{ ...this.themeService.color(this.color()) }]), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniIconComponent, isStandalone: true, selector: "uni-icon", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()", "style.mask-image": "path()", "style.-webkit-mask-image": "path()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:100%;width:100%;background-color:currentColor;mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniIconComponent, isStandalone: true, selector: "uni-icon", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "className()", "style.mask-image": "path()", "style.-webkit-mask-image": "path()", "style.width": "sizeValue()", "style.height": "sizeValue()" } }, ngImport: i0, template: '', isInline: true, styles: [":host{display:block;height:100%;width:100%;background-color:currentColor;mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconComponent, decorators: [{
             type: Component,
@@ -1384,8 +1407,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         '[class]': 'className()',
                         '[style.mask-image]': 'path()',
                         '[style.-webkit-mask-image]': 'path()',
+                        // Inline styles, so an explicit size always beats the fill-the-container
+                        // rule in the stylesheet regardless of style injection order.
+                        '[style.width]': 'sizeValue()',
+                        '[style.height]': 'sizeValue()',
                     }, styles: [":host{display:block;height:100%;width:100%;background-color:currentColor;mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}\n"] }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * The base layout primitive, applied as an attribute to any element so
@@ -1835,7 +1862,7 @@ class UniButtonComponent extends BaseComponent {
     @if (symbolRight()) {
       <uni-symbol [name]="symbolRight()!" class="symbolRight" />
     } `, isInline: true, dependencies: [{ kind: "component", type: // Keep this import
-                UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+                UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonComponent, decorators: [{
             type: Component,
@@ -2264,6 +2291,20 @@ class UniIconButtonComponent {
     loading = input(...(ngDevMode ? [undefined, { debugName: "loading" }] : /* istanbul ignore next */ []));
     opticalSize = input(24, ...(ngDevMode ? [{ debugName: "opticalSize" }] : /* istanbul ignore next */ []));
     srOnlyClass = css(visuallyHidden);
+    /**
+     * Sizes `iconName` from the size token's `fontSize`, the same value that sizes
+     * a `symbolName` ligature — so the two paths render the same glyph size and
+     * `symbolName` → `iconName` is a like-for-like swap. Without it a masked icon
+     * fills the whole button box, since the base size tokens carry no padding.
+     * Themes that do use padding (Carbon) set a matching `fontSize`, so they land
+     * on the same glyph either way.
+     */
+    glyphSize = computed(() => {
+        // Size tokens are Emotion style objects, so `fontSize` is typed wider than
+        // a CSS length; anything exotic falls back to filling the button as before.
+        const fontSize = this.config().sizes?.[this.size()]?.fontSize;
+        return typeof fontSize === 'number' || typeof fontSize === 'string' ? fontSize : undefined;
+    }, ...(ngDevMode ? [{ debugName: "glyphSize" }] : /* istanbul ignore next */ []));
     className = computed(() => {
         const { sizes, variants } = this.config();
         const sizeConfig = sizes && sizes[this.size()];
@@ -2279,7 +2320,15 @@ class UniIconButtonComponent {
                 // 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',
+                // Block-level, but centring: the size tokens make the box bigger than
+                // the glyph (an `sm` button is 22px around an 18px icon), so a plain
+                // `display: block` parks the glyph in the top-left corner. Flex is
+                // still block-level, so nothing about the button's own layout changes.
+                // The accessible-name span is absolutely positioned and so stays out
+                // of the flex flow.
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 '&:disabled': {
                     cursor: 'not-allowed !important',
                 },
@@ -2322,11 +2371,11 @@ class UniIconButtonComponent {
     } @else if (symbolName()) {
       <uni-symbol [name]="symbolName()!" [opticalSize]="opticalSize()" />
     } @else if (iconName()) {
-      <uni-icon [name]="iconName()!" />
+      <uni-icon [name]="iconName()!" [size]="glyphSize()" />
     }
     <!-- Projected text is the button's accessible name (visually hidden) -->
     <span [class]="srOnlyClass"><ng-content /></span>
-  `, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniIconButtonComponent, decorators: [{
             type: Component,
@@ -2339,7 +2388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
     } @else if (symbolName()) {
       <uni-symbol [name]="symbolName()!" [opticalSize]="opticalSize()" />
     } @else if (iconName()) {
-      <uni-icon [name]="iconName()!" />
+      <uni-icon [name]="iconName()!" [size]="glyphSize()" />
     }
     <!-- Projected text is the button's accessible name (visually hidden) -->
     <span [class]="srOnlyClass"><ng-content /></span>
@@ -2431,7 +2480,7 @@ class UniDataSearchComponent extends BaseComponent {
         this.searchValue.set('');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDataSearchComponent, isStandalone: true, selector: "uni-data-search", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dataSearch' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [border]=\"componentOptions().border\"\n  [height]=\"26\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  paddingLeft=\"xs\"\n>\n  <div center-layout [height]=\"18\" [width]=\"18\" paddingRight=\"xs\">\n    <uni-icon name=\"search\" />\n  </div>\n  <input\n    type=\"text\"\n    (input)=\"onInput($event)\"\n    [class]=\"inputClassName\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"searchValue()\"\n  />\n  <div row-layout alignItems=\"center\" [width]=\"22\">\n    @if (!!searchValue()) {\n      <button icon-button (click)=\"clearFilter()\" symbolName=\"close\" size=\"sm\">Clear Search</button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }, { kind: "component", type: UniCenterComponent, selector: "[uni-center-layout], [center-layout]", inputs: ["display", "justifyContent", "alignItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDataSearchComponent, isStandalone: true, selector: "uni-data-search", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: COMPONENT_NAME, useValue: 'dataSearch' }], usesInheritance: true, ngImport: i0, template: "<div\n  row-layout\n  alignItems=\"center\"\n  [border]=\"componentOptions().border\"\n  [height]=\"26\"\n  [borderRadius]=\"componentOptions().borderRadius\"\n  paddingLeft=\"xs\"\n>\n  <div center-layout [height]=\"18\" [width]=\"18\" paddingRight=\"xs\">\n    <uni-icon name=\"search\" />\n  </div>\n  <input\n    type=\"text\"\n    (input)=\"onInput($event)\"\n    [class]=\"inputClassName\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"searchValue()\"\n  />\n  <div row-layout alignItems=\"center\" [width]=\"22\">\n    @if (!!searchValue()) {\n      <button icon-button (click)=\"clearFilter()\" symbolName=\"close\" size=\"sm\">Clear Search</button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniCenterComponent, selector: "[uni-center-layout], [center-layout]", inputs: ["display", "justifyContent", "alignItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataSearchComponent, decorators: [{
             type: Component,
@@ -2813,7 +2862,7 @@ class UniDataTableComponent extends BaseComponent {
         return name ? this.theme.theme().borders[name] : undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDataTableComponent, isStandalone: true, selector: "uni-data-table", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, detailRowTemplate: { classPropertyName: "detailRowTemplate", publicName: "detailRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useMultiSelect: { classPropertyName: "useMultiSelect", publicName: "useMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, useRowClick: { classPropertyName: "useRowClick", publicName: "useRowClick", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelect: "rowSelect", rowClick: "rowClick" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dataTable' }], usesInheritance: true, ngImport: i0, template: "@let ds = datasource();\n@if (ds) {\n  <div\n    box-layout\n    [color]=\"componentOptions().color\"\n    [border]=\"componentOptions().border\"\n    [borderRadius]=\"componentOptions().borderRadius\"\n    [elevation]=\"componentOptions().elevation\"\n    overflow=\"hidden\"\n  >\n    <div\n      box-layout\n      [padding]=\"componentOptions().headerPadding\"\n      [color]=\"componentOptions().headerColor\"\n      [class]=\"headerClass()\"\n    >\n      <ng-content select=\"data-table-header\"></ng-content>\n    </div>\n\n    <div box-layout [height]=\"height()\" position=\"relative\" [attr.aria-busy]=\"isLoading()\">\n      <div scroll-area [verticalScrollPadding]=\"0\" (scrollable)=\"handleScrollable($event)\">\n        <table [class]=\"tableClass()\">\n          <thead>\n            <tr>\n              @for (column of columns(); track column) {\n                <th\n                  scope=\"col\"\n                  [attr.aria-sort]=\"ariaSort(column)\"\n                  [class]=\"thClass()\"\n                  [class.scrollable]=\"scrollable()\"\n                  [class.sticky]=\"column.isSticky\"\n                  [style.text-align]=\"column.textAlign\"\n                >\n                  <uni-sort-header [datasource]=\"datasource()\" [column]=\"column.columnDef\">\n                    <span uni-text [typeface]=\"componentOptions().thTextRole\">{{ column.header }}</span>\n                  </uni-sort-header>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (record of ds.records(); track record; let i = $index) {\n              <tr\n                [class]=\"trClass()\"\n                [attr.tabindex]=\"useRowClick() ? 0 : null\"\n                (click)=\"handleRowClick(record, $index)\"\n                (keydown.enter)=\"useRowClick() && handleRowClick(record, $index)\"\n                (keydown.space)=\"\n                  useRowClick() && handleRowClick(record, $index);\n                  useRowClick() && $event.preventDefault()\n                \"\n              >\n                @for (column of columns(); track column) {\n                  <td\n                    [class]=\"tdClass()\"\n                    [class.scrollable]=\"scrollable()\"\n                    [class.sticky]=\"column.isSticky\"\n                    [class.template]=\"!!column.template\"\n                    [style.text-align]=\"column.textAlign\"\n                  >\n                    @if (column.template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"column.template\"\n                        [ngTemplateOutletContext]=\"record\"\n                      ></ng-container>\n                    } @else {\n                      <span uni-text [typeface]=\"componentOptions().tdTextRole\">\n                        @if (!column.cell) {\n                          {{ record[column.columnDef] }}\n                        } @else {\n                          {{ column.cell(record) }}\n                        }\n                      </span>\n                    }\n                  </td>\n                }\n              </tr>\n              @if (detailRowTemplate()) {\n                <!-- Collapsed detail rows are inert: invisible to screen\n                     readers and unreachable by keyboard until expanded -->\n                <tr\n                  [class]=\"detailRowClass()\"\n                  [class.expanded]=\"expandedIndex() === $index\"\n                  [attr.inert]=\"expandedIndex() === $index ? null : ''\"\n                >\n                  <td [attr.colspan]=\"columns().length\">\n                    <div class=\"detail-content-wrapper\">\n                      <div class=\"detail-inner\">\n                        <ng-container\n                          [ngTemplateOutlet]=\"detailRowTemplate()\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: record,\n                            index: i,\n                          }\"\n                        ></ng-container>\n                      </div>\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <!-- Loading Overlay -->\n      @if (isLoading()) {\n        <div\n          uni-center-layout\n          role=\"status\"\n          aria-label=\"Loading\"\n          position=\"absolute\"\n          [inset]=\"0\"\n          [backgroundColor]=\"componentOptions().loadingOverlayColor\"\n          [class]=\"loadingOverlayClass\"\n          zIndex=\"overlay\"\n        >\n          <!-- Loading Spinner -->\n          <div\n            uni-box-layout\n            [height]=\"componentOptions().loadingSpinnerSize\"\n            [width]=\"componentOptions().loadingSpinnerSize\"\n          >\n            <uni-icon name=\"spinner\" [color]=\"componentOptions().loadingSpinnerColor\" />\n          </div>\n        </div>\n      }\n    </div>\n\n    <div\n      box-layout\n      [padding]=\"componentOptions().footerPadding\"\n      [color]=\"componentOptions().footerColor\"\n      [class]=\"footerClass()\"\n    >\n      <ng-content select=\"data-table-footer\"></ng-content>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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: UniScrollAreaComponent, selector: "[uni-scroll-area], [scroll-area]", inputs: ["color", "borderRadius", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "height", "width", "appearance", "autoHeightDisabled", "verticalScrollPadding"], outputs: ["scrollable"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSortHeaderComponent, selector: "uni-sort-header", inputs: ["column", "datasource"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }, { kind: "component", type: UniCenterComponent, selector: "[uni-center-layout], [center-layout]", inputs: ["display", "justifyContent", "alignItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniDataTableComponent, isStandalone: true, selector: "uni-data-table", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, detailRowTemplate: { classPropertyName: "detailRowTemplate", publicName: "detailRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, useMultiSelect: { classPropertyName: "useMultiSelect", publicName: "useMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, useRowClick: { classPropertyName: "useRowClick", publicName: "useRowClick", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelect: "rowSelect", rowClick: "rowClick" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dataTable' }], usesInheritance: true, ngImport: i0, template: "@let ds = datasource();\n@if (ds) {\n  <div\n    box-layout\n    [color]=\"componentOptions().color\"\n    [border]=\"componentOptions().border\"\n    [borderRadius]=\"componentOptions().borderRadius\"\n    [elevation]=\"componentOptions().elevation\"\n    overflow=\"hidden\"\n  >\n    <div\n      box-layout\n      [padding]=\"componentOptions().headerPadding\"\n      [color]=\"componentOptions().headerColor\"\n      [class]=\"headerClass()\"\n    >\n      <ng-content select=\"data-table-header\"></ng-content>\n    </div>\n\n    <div box-layout [height]=\"height()\" position=\"relative\" [attr.aria-busy]=\"isLoading()\">\n      <div scroll-area [verticalScrollPadding]=\"0\" (scrollable)=\"handleScrollable($event)\">\n        <table [class]=\"tableClass()\">\n          <thead>\n            <tr>\n              @for (column of columns(); track column) {\n                <th\n                  scope=\"col\"\n                  [attr.aria-sort]=\"ariaSort(column)\"\n                  [class]=\"thClass()\"\n                  [class.scrollable]=\"scrollable()\"\n                  [class.sticky]=\"column.isSticky\"\n                  [style.text-align]=\"column.textAlign\"\n                >\n                  <uni-sort-header [datasource]=\"datasource()\" [column]=\"column.columnDef\">\n                    <span uni-text [typeface]=\"componentOptions().thTextRole\">{{ column.header }}</span>\n                  </uni-sort-header>\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (record of ds.records(); track record; let i = $index) {\n              <tr\n                [class]=\"trClass()\"\n                [attr.tabindex]=\"useRowClick() ? 0 : null\"\n                (click)=\"handleRowClick(record, $index)\"\n                (keydown.enter)=\"useRowClick() && handleRowClick(record, $index)\"\n                (keydown.space)=\"\n                  useRowClick() && handleRowClick(record, $index);\n                  useRowClick() && $event.preventDefault()\n                \"\n              >\n                @for (column of columns(); track column) {\n                  <td\n                    [class]=\"tdClass()\"\n                    [class.scrollable]=\"scrollable()\"\n                    [class.sticky]=\"column.isSticky\"\n                    [class.template]=\"!!column.template\"\n                    [style.text-align]=\"column.textAlign\"\n                  >\n                    @if (column.template) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"column.template\"\n                        [ngTemplateOutletContext]=\"record\"\n                      ></ng-container>\n                    } @else {\n                      <span uni-text [typeface]=\"componentOptions().tdTextRole\">\n                        @if (!column.cell) {\n                          {{ record[column.columnDef] }}\n                        } @else {\n                          {{ column.cell(record) }}\n                        }\n                      </span>\n                    }\n                  </td>\n                }\n              </tr>\n              @if (detailRowTemplate()) {\n                <!-- Collapsed detail rows are inert: invisible to screen\n                     readers and unreachable by keyboard until expanded -->\n                <tr\n                  [class]=\"detailRowClass()\"\n                  [class.expanded]=\"expandedIndex() === $index\"\n                  [attr.inert]=\"expandedIndex() === $index ? null : ''\"\n                >\n                  <td [attr.colspan]=\"columns().length\">\n                    <div class=\"detail-content-wrapper\">\n                      <div class=\"detail-inner\">\n                        <ng-container\n                          [ngTemplateOutlet]=\"detailRowTemplate()\"\n                          [ngTemplateOutletContext]=\"{\n                            $implicit: record,\n                            index: i,\n                          }\"\n                        ></ng-container>\n                      </div>\n                    </div>\n                  </td>\n                </tr>\n              }\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <!-- Loading Overlay -->\n      @if (isLoading()) {\n        <div\n          uni-center-layout\n          role=\"status\"\n          aria-label=\"Loading\"\n          position=\"absolute\"\n          [inset]=\"0\"\n          [backgroundColor]=\"componentOptions().loadingOverlayColor\"\n          [class]=\"loadingOverlayClass\"\n          zIndex=\"overlay\"\n        >\n          <!-- Loading Spinner -->\n          <div\n            uni-box-layout\n            [height]=\"componentOptions().loadingSpinnerSize\"\n            [width]=\"componentOptions().loadingSpinnerSize\"\n          >\n            <uni-icon name=\"spinner\" [color]=\"componentOptions().loadingSpinnerColor\" />\n          </div>\n        </div>\n      }\n    </div>\n\n    <div\n      box-layout\n      [padding]=\"componentOptions().footerPadding\"\n      [color]=\"componentOptions().footerColor\"\n      [class]=\"footerClass()\"\n    >\n      <ng-content select=\"data-table-footer\"></ng-content>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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: UniScrollAreaComponent, selector: "[uni-scroll-area], [scroll-area]", inputs: ["color", "borderRadius", "padding", "paddingHorizontal", "paddingVertical", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "border", "height", "width", "appearance", "autoHeightDisabled", "verticalScrollPadding"], outputs: ["scrollable"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSortHeaderComponent, selector: "uni-sort-header", inputs: ["column", "datasource"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniCenterComponent, selector: "[uni-center-layout], [center-layout]", inputs: ["display", "justifyContent", "alignItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDataTableComponent, decorators: [{
             type: Component,
@@ -3445,6 +3494,15 @@ class UniExpandComponent {
     toggle() {
         this.collapsed.update((collapsed) => !collapsed);
     }
+    /**
+     * A custom element is `display: inline` by default, which would lay the
+     * animated grid out as a block-in-inline box and distort the revealed
+     * content's spacing. Every consumer would otherwise have to write
+     * `uni-expand { display: block }` themselves.
+     */
+    hostClassName = css({
+        display: 'block',
+    });
     expandClassName = css({
         display: 'grid',
     });
@@ -3453,16 +3511,25 @@ class UniExpandComponent {
     });
     expand = keyframes({ ...expandFadeIn });
     collapse = keyframes({ ...collapseFadeOut });
-    expandAnimation = css({
+    /**
+     * Reveal is motion-safe (WCAG 2.3.3): under `prefers-reduced-motion` these
+     * classes are empty, so the region appears and disappears instantly.
+     * `overflow: hidden` rides inside the guard deliberately — it exists to clip
+     * the growing box mid-animation, and leaving it applied at rest would crop
+     * decorations that legitimately paint outside the region (focus rings,
+     * offset outlines). Angular removes a leaving node on the next frame when it
+     * detects no animation, so nothing hangs when the guard strips them.
+     */
+    expandAnimation = css(motionSafe({
         overflow: 'hidden',
         animation: `${this.expand} ease-in 350ms`,
-    });
-    collapseAnimation = css({
+    }));
+    collapseAnimation = css(motionSafe({
         overflow: 'hidden',
         animation: `${this.collapse} ease-in 350ms`,
-    });
+    }));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandComponent, isStandalone: true, selector: "uni-expand", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "attr.id": "regionId" } }, ngImport: i0, template: `@if (!collapsed()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandComponent, isStandalone: true, selector: "uni-expand", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "attr.id": "regionId", "class": "hostClassName" } }, ngImport: i0, template: `@if (!collapsed()) {
     <div
       [animate.enter]="ready() ? expandAnimation : ''"
       [animate.leave]="collapseAnimation"
@@ -3493,6 +3560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
   }`,
                     host: {
                         '[attr.id]': 'regionId',
+                        '[class]': 'hostClassName',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
@@ -3679,66 +3747,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { hoverDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverDelay", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], inlineText: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineText", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], tipRef: [{ type: i0.ViewChild, args: ['tip', { isSignal: true }] }] } });
 
+/**
+ * Trigger for a {@link UniExpandComponent} region.
+ *
+ * Two shapes, chosen by whether `label` is set:
+ * - **Icon only** (default) — the bare chevron, sized for a Card Header.
+ * - **Labelled** — chevron plus a label and optional muted sublabel, as a
+ *   single full-width button. Most real disclosures need a name for the
+ *   section, and building that row by hand is the thing this saves; it also
+ *   makes the label the button's accessible name rather than adjacent text.
+ */
 class UniExpandToggleComponent {
     collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     /** Id of the Expand region this toggle controls (see UniExpandComponent.regionId). */
     ariaControls = input(...(ngDevMode ? [undefined, { debugName: "ariaControls" }] : /* istanbul ignore next */ []));
+    /** Names the region. Setting it switches the toggle to its labelled shape. */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Muted qualifier beside the label ("for POs & custom orders"). Needs `label`. */
+    sublabel = input(...(ngDevMode ? [undefined, { debugName: "sublabel" }] : /* istanbul ignore next */ []));
+    /**
+     * The glyph rotates, never the host.
+     *
+     * The host is the tooltip's positioning box — `uni-tooltip` puts its
+     * `anchor-name` on its own element, nested inside ours — so rotating the
+     * host swings the anchor through the turn and the bubble visibly bobs. The
+     * host is also taller than the glyph (an inline-level box reserves baseline
+     * descender space), so spinning it about its own centre walks the glyph
+     * off-centre. `uni-icon` is a centred square sized to the glyph, which makes
+     * it the only box here that rotates symmetrically. It also keeps a label
+     * from turning upside down with the chevron.
+     */
+    glyphStyles = computed(() => ({
+        '& uni-icon': {
+            flexShrink: 0,
+            ...motionSafe({ transition: 'transform 350ms ease-in-out' }),
+            transform: this.collapsed() ? 'rotate(-180deg)' : 'rotate(0)',
+        },
+    }), ...(ngDevMode ? [{ debugName: "glyphStyles" }] : /* istanbul ignore next */ []));
     className = computed(() => {
+        if (this.label()) {
+            return css({ display: 'block', ...this.glyphStyles() });
+        }
         return css({
             display: 'inline-flex',
             cursor: 'pointer',
-            transition: 'transform 350ms ease-in-out',
-            transform: 'rotate(0)',
-            '&[toggled]': {
-                transform: 'rotate(-180deg)',
-            },
+            ...this.glyphStyles(),
         });
     }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    triggerClassName = css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        width: '100%',
+        padding: 0,
+        border: 0,
+        background: 'none',
+        font: 'inherit',
+        color: 'inherit',
+        textAlign: 'left',
+        cursor: 'pointer',
+    });
+    labelClassName = css({
+        display: 'flex',
+        alignItems: 'baseline',
+        gap: 6,
+        minWidth: 0,
+    });
     toggle() {
         this.collapsed.update((collapsed) => !collapsed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniExpandToggleComponent, isStandalone: true, selector: "uni-expand-toggle", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class": "className()", "attr.toggled": "collapsed() || null" } }, ngImport: i0, template: `<uni-tooltip
-    [label]="collapsed() ? 'Expand' : 'Collapse'"
-    placement="right"
-  >
-    <button
-      icon-button
-      iconName="chevronUp"
-      (click)="toggle()"
-      [attr.aria-expanded]="!collapsed()"
-      [attr.aria-controls]="ariaControls() || null"
-    >
-      {{ collapsed() ? 'Expand' : 'Collapse' }}
-    </button>
-  </uni-tooltip>`, isInline: true, dependencies: [{ kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTooltipComponent, selector: "uni-tooltip", inputs: ["hoverDelay", "label", "placement", "inlineText", "appendToBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniExpandToggleComponent, isStandalone: true, selector: "uni-expand-toggle", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sublabel: { classPropertyName: "sublabel", publicName: "sublabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class": "className()", "attr.toggled": "collapsed() || null" } }, ngImport: i0, template: `
+    @if (label()) {
+      <button
+        type="button"
+        [class]="triggerClassName"
+        (click)="toggle()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="ariaControls() || null"
+      >
+        <uni-icon name="chevronUp" size="1em" />
+        <span [class]="labelClassName">
+          <span uni-text="label">{{ label() }}</span>
+          @if (sublabel()) {
+            <span uni-text="caption" color="on-background-variant">{{ sublabel() }}</span>
+          }
+        </span>
+      </button>
+    } @else {
+      <uni-tooltip [label]="collapsed() ? 'Expand' : 'Collapse'" placement="right">
+        <button
+          icon-button
+          iconName="chevronUp"
+          (click)="toggle()"
+          [attr.aria-expanded]="!collapsed()"
+          [attr.aria-controls]="ariaControls() || null"
+        >
+          {{ collapsed() ? 'Expand' : 'Collapse' }}
+        </button>
+      </uni-tooltip>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniTooltipComponent, selector: "uni-tooltip", inputs: ["hoverDelay", "label", "placement", "inlineText", "appendToBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandToggleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'uni-expand-toggle',
-                    imports: [UniIconButtonComponent, UniTooltipComponent],
-                    template: `<uni-tooltip
-    [label]="collapsed() ? 'Expand' : 'Collapse'"
-    placement="right"
-  >
-    <button
-      icon-button
-      iconName="chevronUp"
-      (click)="toggle()"
-      [attr.aria-expanded]="!collapsed()"
-      [attr.aria-controls]="ariaControls() || null"
-    >
-      {{ collapsed() ? 'Expand' : 'Collapse' }}
-    </button>
-  </uni-tooltip>`,
+                    imports: [UniIconComponent, UniIconButtonComponent, UniTextComponent, UniTooltipComponent],
+                    template: `
+    @if (label()) {
+      <button
+        type="button"
+        [class]="triggerClassName"
+        (click)="toggle()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="ariaControls() || null"
+      >
+        <uni-icon name="chevronUp" size="1em" />
+        <span [class]="labelClassName">
+          <span uni-text="label">{{ label() }}</span>
+          @if (sublabel()) {
+            <span uni-text="caption" color="on-background-variant">{{ sublabel() }}</span>
+          }
+        </span>
+      </button>
+    } @else {
+      <uni-tooltip [label]="collapsed() ? 'Expand' : 'Collapse'" placement="right">
+        <button
+          icon-button
+          iconName="chevronUp"
+          (click)="toggle()"
+          [attr.aria-expanded]="!collapsed()"
+          [attr.aria-controls]="ariaControls() || null"
+        >
+          {{ collapsed() ? 'Expand' : 'Collapse' }}
+        </button>
+      </uni-tooltip>
+    }
+  `,
                     host: {
                         '[class]': 'className()',
                         '[attr.toggled]': 'collapsed() || null',
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }] } });
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }] } });
 
 class UniExpandAreaComponent {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -3783,7 +3936,7 @@ class UniExpandAreaComponent {
         </div>
       </uni-expand>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniExpandToggleComponent, selector: "uni-expand-toggle", inputs: ["collapsed", "ariaControls"], outputs: ["collapsedChange"] }, { kind: "component", type: UniExpandComponent, selector: "uni-expand", inputs: ["collapsed"], outputs: ["collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniExpandToggleComponent, selector: "uni-expand-toggle", inputs: ["collapsed", "ariaControls", "label", "sublabel"], outputs: ["collapsedChange"] }, { kind: "component", type: UniExpandComponent, selector: "uni-expand", inputs: ["collapsed"], outputs: ["collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandAreaComponent, decorators: [{
             type: Component,
@@ -4687,7 +4840,7 @@ class UniAlertComponent extends BaseComponent {
     }
     effectiveIconName = computed(() => this.iconName(), ...(ngDevMode ? [{ debugName: "effectiveIconName" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAlertComponent, isStandalone: true, selector: "uni-alert", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'alert' }], viewQueries: [{ propertyName: "alertRef", first: true, predicate: ["alert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- role=\"alert\" makes the message announce immediately when shown -->\n<dialog #alert [class]=\"alertClass()\" role=\"alert\">\n  <div row-layout gap=\"md\">\n    @if (iconName() || symbolName()) {\n      <div box-layout [height]=\"26\" [width]=\"26\">\n        @if (effectiveIconName()) {\n          <uni-icon [name]=\"effectiveIconName()!\" />\n        } @else {\n          <uni-symbol [name]=\"symbolName()!\" [opticalSize]=\"26\" />\n        }\n      </div>\n    }\n    <span uni-text>\n      <ng-content></ng-content>\n    </span>\n    <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">close</button>\n  </div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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: UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniAlertComponent, isStandalone: true, selector: "uni-alert", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'alert' }], viewQueries: [{ propertyName: "alertRef", first: true, predicate: ["alert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- role=\"alert\" makes the message announce immediately when shown -->\n<dialog #alert [class]=\"alertClass()\" role=\"alert\">\n  <div row-layout gap=\"md\">\n    @if (iconName() || symbolName()) {\n      <div box-layout [height]=\"26\" [width]=\"26\">\n        @if (effectiveIconName()) {\n          <uni-icon [name]=\"effectiveIconName()!\" />\n        } @else {\n          <uni-symbol [name]=\"symbolName()!\" [opticalSize]=\"26\" />\n        }\n      </div>\n    }\n    <span uni-text>\n      <ng-content></ng-content>\n    </span>\n    <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">close</button>\n  </div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniAlertComponent, decorators: [{
             type: Component,
@@ -4806,7 +4959,7 @@ class UniSnackbarComponent extends BaseComponent {
         this.timer.resume();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSnackbarComponent, isStandalone: true, selector: "uni-snackbar", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", action: "action", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], viewQueries: [{ propertyName: "snackbarRef", first: true, predicate: ["snackbar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let icon = iconName();\n@let symbol = symbolName();\n<!-- role=\"status\" announces the message politely without stealing focus -->\n<dialog\n  #snackbar\n  [class]=\"snackbarClass()\"\n  role=\"status\"\n  (mouseenter)=\"pauseTimer()\"\n  (mouseleave)=\"resumeTimer()\"\n  (focusin)=\"pauseTimer()\"\n  (focusout)=\"resumeTimer()\"\n>\n  <div row-layout alignItems=\"center\">\n    @if (icon || symbol) {\n      <div box-layout [height]=\"26\" [width]=\"26\" paddingLeft=\"sm\">\n        @if (icon) {\n          <uni-icon [name]=\"icon\"></uni-icon>\n        } @else if (symbol) {\n          <uni-symbol [name]=\"symbol\" [opticalSize]=\"26\"></uni-symbol>\n        }\n      </div>\n    }\n    <div box-layout padding=\"sm\">\n      <span uni-text>\n        <ng-content></ng-content>\n      </span>\n    </div>\n    <div box-layout paddingRight=\"sm\">\n      @if (!actionLabel()) {\n        <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">Close</button>\n      } @else {\n        <button text-button variant=\"ghost\" (click)=\"this.action.emit(); close()\">\n          {{ actionLabel() }}\n        </button>\n      }\n    </div>\n  </div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniSnackbarComponent, isStandalone: true, selector: "uni-snackbar", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, useVariant: { classPropertyName: "useVariant", publicName: "useVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { show: "showChange", action: "action", showing: "showing" }, providers: [{ provide: COMPONENT_NAME, useValue: 'snackbar' }], viewQueries: [{ propertyName: "snackbarRef", first: true, predicate: ["snackbar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let icon = iconName();\n@let symbol = symbolName();\n<!-- role=\"status\" announces the message politely without stealing focus -->\n<dialog\n  #snackbar\n  [class]=\"snackbarClass()\"\n  role=\"status\"\n  (mouseenter)=\"pauseTimer()\"\n  (mouseleave)=\"resumeTimer()\"\n  (focusin)=\"pauseTimer()\"\n  (focusout)=\"resumeTimer()\"\n>\n  <div row-layout alignItems=\"center\">\n    @if (icon || symbol) {\n      <div box-layout [height]=\"26\" [width]=\"26\" paddingLeft=\"sm\">\n        @if (icon) {\n          <uni-icon [name]=\"icon\"></uni-icon>\n        } @else if (symbol) {\n          <uni-symbol [name]=\"symbol\" [opticalSize]=\"26\"></uni-symbol>\n        }\n      </div>\n    }\n    <div box-layout padding=\"sm\">\n      <span uni-text>\n        <ng-content></ng-content>\n      </span>\n    </div>\n    <div box-layout paddingRight=\"sm\">\n      @if (!actionLabel()) {\n        <button icon-button (click)=\"close()\" iconName=\"close\" size=\"md\">Close</button>\n      } @else {\n        <button text-button variant=\"ghost\" (click)=\"this.action.emit(); close()\">\n          {{ actionLabel() }}\n        </button>\n      }\n    </div>\n  </div>\n</dialog>\n", dependencies: [{ kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniBoxComponent, selector: "[uni-box-layout], [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: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniIconButtonComponent, selector: "button[uni-icon-button], button[icon-button]", inputs: ["ariaLabel", "iconName", "symbolName", "variant", "size", "disable", "loading", "opticalSize"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniIconComponent, selector: "uni-icon", inputs: ["color", "name", "size"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniSnackbarComponent, decorators: [{
             type: Component,