@uni-design-system/uni-angular 7.1.0 → 7.3.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, contentChildren, output, Renderer2, ElementRef, Directive, model, effect, viewChild, afterNextRender, ViewChild, booleanAttribute, 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, afterRenderEffect, booleanAttribute, viewChildren } from '@angular/core';
 import { injectGlobal, css, keyframes } from '@emotion/css';
-import { UniThemes, LightTheme, toTypefaces, createThemeFromPalette, Z_INDEX, fadeIn, fadeOut, expandFadeIn, collapseFadeOut, removeInputPlatformStyling, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
+import { UniThemes, LightTheme, toTypefaces, createThemeFromPalette, Z_INDEX, fadeIn, fadeOut, EXPAND_DEFAULT_SPEED, expandDuration, expandFadeIn, collapseFadeOut, removeInputPlatformStyling, ShapeRadii, generatePalette, emitThemeFile, emitDtcgTokens } from '@uni-design-system/uni-core';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 
 let nextUniqueId = 0;
@@ -1388,7 +1388,13 @@ class UniIconComponent {
         const size = this.size();
         if (size === undefined || size === null || size === '')
             return null;
-        return typeof size === 'number' ? `${size}px` : size;
+        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 });
@@ -2285,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()];
@@ -2300,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',
                 },
@@ -2343,7 +2371,7 @@ 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>
@@ -2360,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>
@@ -3280,6 +3308,13 @@ class UniDropdownComponent extends BaseComponent {
     popoverId = uniqueId('uni-dropdown');
     paddingVertical = input(...(ngDevMode ? [undefined, { debugName: "paddingVertical" }] : /* istanbul ignore next */ []));
     paddingHorizontal = input(...(ngDevMode ? [undefined, { debugName: "paddingHorizontal" }] : /* istanbul ignore next */ []));
+    // Per-instance panel-chrome overrides; undefined falls back to the theme's
+    // `dropdown` options, so hosts like uni-menu can restyle their panel
+    // without forking the shared dropdown entry.
+    border = input(...(ngDevMode ? [undefined, { debugName: "border" }] : /* istanbul ignore next */ []));
+    borderRadius = input(...(ngDevMode ? [undefined, { debugName: "borderRadius" }] : /* istanbul ignore next */ []));
+    shadow = input(...(ngDevMode ? [undefined, { debugName: "shadow" }] : /* istanbul ignore next */ []));
+    color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     dropdownShowing = output();
     dropdownHiding = output();
     dropdownRef;
@@ -3404,17 +3439,17 @@ class UniDropdownComponent extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDropdownComponent, isStandalone: true, selector: "uni-dropdown", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownShowing: "dropdownShowing", dropdownHiding: "dropdownHiding" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: UniDropdownComponent, isStandalone: true, selector: "uni-dropdown", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "ariaHasPopup", isSignal: true, isRequired: false, transformFunction: null }, paddingVertical: { classPropertyName: "paddingVertical", publicName: "paddingVertical", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dropdownShowing: "dropdownShowing", dropdownHiding: "dropdownHiding" }, providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: ["dropdown"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <!-- 1. The native 'popover' attribute brings it to the top layer with native light-dismiss -->
     <div #dropdown popover="auto" [id]="popoverId" [class]="dropdownClass()">
       <div
         box-layout
-        [border]="componentOptions().border"
-        [borderRadius]="componentOptions().borderRadius"
+        [border]="border() ?? componentOptions().border"
+        [borderRadius]="borderRadius() ?? componentOptions().borderRadius"
         [paddingVertical]="paddingVertical()"
         [paddingHorizontal]="paddingHorizontal()"
-        [color]="componentOptions().color"
-        [shadow]="componentOptions().shadow"
+        [color]="color() ?? componentOptions().color"
+        [shadow]="shadow() ?? componentOptions().shadow"
       >
         <ng-content></ng-content>
       </div>
@@ -3432,12 +3467,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
     <div #dropdown popover="auto" [id]="popoverId" [class]="dropdownClass()">
       <div
         box-layout
-        [border]="componentOptions().border"
-        [borderRadius]="componentOptions().borderRadius"
+        [border]="border() ?? componentOptions().border"
+        [borderRadius]="borderRadius() ?? componentOptions().borderRadius"
         [paddingVertical]="paddingVertical()"
         [paddingHorizontal]="paddingHorizontal()"
-        [color]="componentOptions().color"
-        [shadow]="componentOptions().shadow"
+        [color]="color() ?? componentOptions().color"
+        [shadow]="shadow() ?? componentOptions().shadow"
       >
         <ng-content></ng-content>
       </div>
@@ -3445,13 +3480,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
   `,
                     providers: [{ provide: COMPONENT_NAME, useValue: 'dropdown' }],
                 }]
-        }], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }], paddingVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingVertical", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], dropdownShowing: [{ type: i0.Output, args: ["dropdownShowing"] }], dropdownHiding: [{ type: i0.Output, args: ["dropdownHiding"] }], dropdownRef: [{
+        }], propDecorators: { trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHasPopup", required: false }] }], paddingVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingVertical", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], dropdownShowing: [{ type: i0.Output, args: ["dropdownShowing"] }], dropdownHiding: [{ type: i0.Output, args: ["dropdownHiding"] }], dropdownRef: [{
                 type: ViewChild,
                 args: ['dropdown', { static: true }]
             }] } });
 
-class UniExpandComponent {
+class UniExpandComponent extends BaseComponent {
     collapsed = model(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * Exact per-instance duration in seconds. Bypasses size-aware scaling —
+     * an explicit number means the consumer wants that number. Omitted, the
+     * duration derives from the `expand` theme options' `transitionSpeed`
+     * scaled by content height (see `duration`).
+     */
+    transitionSpeed = input(...(ngDevMode ? [undefined, { debugName: "transitionSpeed" }] : /* istanbul ignore next */ []));
     /** Referenced by the controlling toggle's aria-controls. */
     regionId = uniqueId('uni-expand');
     /**
@@ -3460,12 +3502,58 @@ class UniExpandComponent {
      * animations only after the first render, i.e. on real state changes.
      */
     ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    contentRef = viewChild('content', ...(ngDevMode ? [{ debugName: "contentRef" }] : /* istanbul ignore next */ []));
+    /**
+     * Last observed content height. Retained after collapse (the observer
+     * disconnects but the signal keeps its value) so the leave animation and
+     * the next reveal are timed to the real size. Until the first measurement
+     * lands — one frame into the very first reveal — the duration falls back
+     * to the unscaled token; CSS remaps animation progress when
+     * `animation-duration` updates, so the retime is imperceptible that early.
+     */
+    contentHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
     constructor() {
+        super();
         afterNextRender(() => this.ready.set(true));
+        afterRenderEffect((onCleanup) => {
+            const content = this.contentRef()?.nativeElement;
+            if (!content)
+                return;
+            const observer = new ResizeObserver(() => this.contentHeight.set(content.scrollHeight));
+            observer.observe(content);
+            onCleanup(() => observer.disconnect());
+        });
     }
     toggle() {
         this.collapsed.update((collapsed) => !collapsed);
     }
+    /**
+     * The resolved duration in seconds: the `transitionSpeed` input verbatim,
+     * or the `expand` theme options' `transitionSpeed` scaled by content height
+     * (`expandDuration` — √-of-height, clamped) so short regions stay snappy
+     * and tall ones aren't rushed. The public sync hook: Expand Area binds this
+     * to its toggle so the chevron rotates on the region's clock, and consumers
+     * can bind adjacent styling the same way
+     * (`[style.transition-duration]="expand.duration() + 's'"`).
+     */
+    duration = computed(() => {
+        const override = this.transitionSpeed();
+        if (override !== undefined)
+            return override;
+        const speed = this.componentOptions().transitionSpeed ?? EXPAND_DEFAULT_SPEED;
+        const height = this.contentHeight();
+        return height === undefined ? speed : expandDuration(height, speed);
+    }, ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+    cssDuration = computed(() => `${this.duration()}s`, ...(ngDevMode ? [{ debugName: "cssDuration" }] : /* istanbul ignore next */ []));
+    /**
+     * 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',
     });
@@ -3474,22 +3562,37 @@ 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.
+     *
+     * The classes carry the default duration; the animated div's
+     * `[style.animation-duration]` binding overrides it with the resolved
+     * `duration`, so the classes stay static while timing tracks the theme and
+     * the content's size through signals alone.
+     */
+    expandAnimation = css(motionSafe({
         overflow: 'hidden',
-        animation: `${this.expand} ease-in 350ms`,
-    });
-    collapseAnimation = css({
+        animation: `${this.expand} ease-in-out ${EXPAND_DEFAULT_SPEED}s`,
+    }));
+    collapseAnimation = css(motionSafe({
         overflow: 'hidden',
-        animation: `${this.collapse} ease-in 350ms`,
-    });
+        animation: `${this.collapse} ease-in-out ${EXPAND_DEFAULT_SPEED}s`,
+    }));
     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 }, transitionSpeed: { classPropertyName: "transitionSpeed", publicName: "transitionSpeed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "attr.id": "regionId", "class": "hostClassName" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'expand' }], viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `@if (!collapsed()) {
     <div
       [animate.enter]="ready() ? expandAnimation : ''"
       [animate.leave]="collapseAnimation"
       [class]="expandClassName"
+      [style.animation-duration]="cssDuration()"
     >
-      <div [class]="contentClassName">
+      <div #content [class]="contentClassName">
         <ng-content></ng-content>
       </div>
     </div>
@@ -3501,22 +3604,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'uni-expand',
                     imports: [],
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'expand' }],
                     template: `@if (!collapsed()) {
     <div
       [animate.enter]="ready() ? expandAnimation : ''"
       [animate.leave]="collapseAnimation"
       [class]="expandClassName"
+      [style.animation-duration]="cssDuration()"
     >
-      <div [class]="contentClassName">
+      <div #content [class]="contentClassName">
         <ng-content></ng-content>
       </div>
     </div>
   }`,
                     host: {
                         '[attr.id]': 'regionId',
+                        '[class]': 'hostClassName',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], transitionSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionSpeed", required: false }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 
 /**
  * UniExpandComponent Barrel File
@@ -3524,242 +3630,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the expand component.
  */
 
-class UniTooltipComponent extends BaseComponent {
-    elRef = inject(ElementRef);
-    renderer = inject(Renderer2);
-    timer = useTimer();
-    isMouseInside = signal(false, ...(ngDevMode ? [{ debugName: "isMouseInside" }] : /* istanbul ignore next */ []));
-    /** Whether the bubble is currently shown (or fading out). */
-    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    tooltipId = uniqueId('uni-tooltip');
-    anchorName = newAnchorName();
-    hoverDelay = input(500, ...(ngDevMode ? [{ debugName: "hoverDelay" }] : /* istanbul ignore next */ []));
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
-    inlineText = input(false, ...(ngDevMode ? [{ debugName: "inlineText" }] : /* istanbul ignore next */ []));
-    /** @deprecated The tooltip renders in the native top layer; ignored. */
-    appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
-    tipRef = viewChild.required('tip');
-    constructor() {
-        super();
-        effect(() => {
-            const timerActive = this.timer.isActive();
-            const mouseInside = this.isMouseInside();
-            // If the timer finished and the mouse is still inside, show tooltip
-            if (!timerActive && mouseInside) {
-                this.showTooltip();
-            }
-            // If the mouse left and the timer is not running, hide tooltip
-            else if (!mouseInside) {
-                this.hideTooltip();
-            }
-        });
-        // A tooltip must be reachable by keyboard (WCAG 1.4.13): when the
-        // projected content has no focusable element, the host itself joins
-        // the tab sequence. The bubble is always in the DOM, so the describedby
-        // relationship is wired once, on the element that receives focus.
-        afterNextRender(() => {
-            const host = this.elRef.nativeElement;
-            if (!host.querySelector(FOCUSABLE_SELECTOR) && !host.matches(FOCUSABLE_SELECTOR)) {
-                this.renderer.setAttribute(host, 'tabindex', '0');
-            }
-            this.renderer.setAttribute(resolveFocusTarget(host), 'aria-describedby', this.tooltipId);
-        });
-    }
-    onFocusIn(event) {
-        // Only keyboard-driven focus shows the tooltip immediately; mouse
-        // interaction keeps the hover-delay behavior.
-        if (event.target.matches(':focus-visible')) {
-            this.showTooltip();
-        }
-    }
-    onFocusOut() {
-        if (!this.isMouseInside()) {
-            this.hideTooltip();
-        }
-    }
-    onEscape(event) {
-        if (this.visible()) {
-            // Dismiss only the tooltip, not an enclosing dialog/popover
-            event.stopPropagation();
-            this.hideTooltip();
-        }
-    }
-    toggleTooltip() {
-        if (this.visible()) {
-            this.hideTooltip();
-        }
-        else {
-            this.showTooltip();
-        }
-    }
-    mouseenter() {
-        this.isMouseInside.set(true);
-        this.timer.start(this.hoverDelay());
-    }
-    mouseleave() {
-        this.isMouseInside.set(false);
-        this.timer.stop();
-    }
-    showTooltip() {
-        if (this.visible())
-            return;
-        const tip = this.tipRef().nativeElement;
-        tip.showPopover();
-        this.renderer.setAttribute(tip, 'fade', 'in');
-        this.visible.set(true);
-    }
-    hideTooltip() {
-        if (!this.visible())
-            return;
-        this.renderer.setAttribute(this.tipRef().nativeElement, 'fade', 'out');
-    }
-    onAnimationEnd(event) {
-        if (event.animationName.includes(this.tooltipFadeOut)) {
-            this.tipRef().nativeElement.hidePopover();
-            this.visible.set(false);
-        }
-    }
-    className = computed(() => css({
-        display: 'inline-flex',
-        anchorName: this.anchorName,
-    }, this.inlineText() && {
-        cursor: 'help',
-        textDecoration: 'underline',
-        textDecorationStyle: 'dotted',
-    }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-    tooltipFadeIn = keyframes({ ...fadeIn });
-    tooltipFadeOut = keyframes({ ...fadeOut });
-    tooltipClassName = computed(() => css([
-        {
-            ...this.theme.colorPair(this.componentOptions().color),
-            ...this.theme.radius(this.componentOptions().borderRadius),
-            ...this.theme.boxShadow(this.componentOptions().shadow),
-            ...this.theme.typeface(this.componentOptions().typeface),
-            border: 'none',
-            padding: 5,
-            width: 'max-content',
-            ...anchorStyles(this.anchorName, this.placement(), { mainAxis: 6 }),
-            '&[fade="in"]': {
-                animation: `${this.tooltipFadeIn} ease-in 350ms`,
-            },
-            '&[fade="out"]': {
-                animation: `${this.tooltipFadeOut} ease-in 350ms`,
-            },
-        },
-    ]), ...(ngDevMode ? [{ debugName: "tooltipClassName" }] : /* istanbul ignore next */ []));
-    arrowClassName = computed(() => css({
-        ...this.theme.colorPair(this.componentOptions().color),
-        ...anchorArrowStyles(this.placement()),
-    }), ...(ngDevMode ? [{ debugName: "arrowClassName" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniTooltipComponent, isStandalone: true, selector: "uni-tooltip", inputs: { hoverDelay: { classPropertyName: "hoverDelay", publicName: "hoverDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, inlineText: { classPropertyName: "inlineText", publicName: "inlineText", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggleTooltip()", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()", "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape($event)" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }], viewQueries: [{ propertyName: "tipRef", first: true, predicate: ["tip"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content
-    ><span
-      #tip
-      popover="manual"
-      role="tooltip"
-      [id]="tooltipId"
-      [class]="tooltipClassName()"
-      (mouseenter)="isMouseInside.set(true)"
-      (mouseleave)="isMouseInside.set(false)"
-      (animationend)="onAnimationEnd($event)"
-      >{{ label() }}<span [class]="arrowClassName()"></span
-    ></span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'uni-tooltip',
-                    imports: [],
-                    // The bubble lives declaratively in the template as a manual popover: the
-                    // top layer escapes any overflow context (which made appendToBody obsolete)
-                    // and native CSS anchor positioning keeps it attached to the host.
-                    template: `<ng-content></ng-content
-    ><span
-      #tip
-      popover="manual"
-      role="tooltip"
-      [id]="tooltipId"
-      [class]="tooltipClassName()"
-      (mouseenter)="isMouseInside.set(true)"
-      (mouseleave)="isMouseInside.set(false)"
-      (animationend)="onAnimationEnd($event)"
-      >{{ label() }}<span [class]="arrowClassName()"></span
-    ></span>`,
-                    providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'className()',
-                        '(click)': 'toggleTooltip()',
-                        '(mouseenter)': 'mouseenter()',
-                        '(mouseleave)': 'mouseleave()',
-                        '(focusin)': 'onFocusIn($event)',
-                        '(focusout)': 'onFocusOut()',
-                        '(keydown.escape)': 'onEscape($event)',
-                    },
-                }]
-        }], 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 */ []));
+    /**
+     * Rotation duration in seconds. Expand Area binds the region's resolved
+     * `duration` here so chevron and reveal share one clock even when the
+     * region is size-scaled or overridden per instance.
+     */
+    transitionSpeed = input(...(ngDevMode ? [undefined, { debugName: "transitionSpeed" }] : /* istanbul ignore next */ []));
+    /** Fallback clock when no `transitionSpeed` is bound: the `expand` theme options' `transitionSpeed`. */
+    expandOptions = inject(ThemeService).getComponentOptions('expand');
+    speed = computed(() => this.transitionSpeed() ?? this.expandOptions().transitionSpeed ?? EXPAND_DEFAULT_SPEED, ...(ngDevMode ? [{ debugName: "speed" }] : /* istanbul ignore next */ []));
+    /**
+     * The glyph rotates, never the host.
+     *
+     * The host is 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 ${this.speed()}s 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 }, transitionSpeed: { classPropertyName: "transitionSpeed", publicName: "transitionSpeed", 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 {
+      <button
+        icon-button
+        iconName="chevronUp"
+        (click)="toggle()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="ariaControls() || null"
+      >
+        {{ collapsed() ? 'Expand' : 'Collapse' }}
+      </button>
+    }
+  `, 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"] }], 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],
+                    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 {
+      <button
+        icon-button
+        iconName="chevronUp"
+        (click)="toggle()"
+        [attr.aria-expanded]="!collapsed()"
+        [attr.aria-controls]="ariaControls() || null"
+      >
+        {{ collapsed() ? 'Expand' : 'Collapse' }}
+      </button>
+    }
+  `,
                     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 }] }], transitionSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionSpeed", required: false }] }] } });
 
 class UniExpandAreaComponent {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -3795,6 +3814,7 @@ class UniExpandAreaComponent {
           style="display: inline-flex; margin: -2px"
           [collapsed]="initCollapsed()"
           [ariaControls]="expand.regionId"
+          [transitionSpeed]="expand.duration()"
         />
       </div>
 
@@ -3804,7 +3824,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", "transitionSpeed"], outputs: ["collapsedChange"] }, { kind: "component", type: UniExpandComponent, selector: "uni-expand", inputs: ["collapsed", "transitionSpeed"], outputs: ["collapsedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniExpandAreaComponent, decorators: [{
             type: Component,
@@ -3836,6 +3856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
           style="display: inline-flex; margin: -2px"
           [collapsed]="initCollapsed()"
           [ariaControls]="expand.regionId"
+          [transitionSpeed]="expand.duration()"
         />
       </div>
 
@@ -4142,32 +4163,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * This file exports all public-facing elements of the json-view component.
  */
 
-class UniMenuItemComponent extends UniBoxComponent {
+const isDivider = (item) => 'divider' in item;
+
+class UniMenuItemComponent {
+    theme = inject(ThemeService);
     _elementRef = inject(ElementRef);
-    display = input('flex', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
-    flexDirection = input('row', ...(ngDevMode ? [{ debugName: "flexDirection" }] : /* istanbul ignore next */ []));
-    alignItems = input('center', ...(ngDevMode ? [{ debugName: "alignItems" }] : /* istanbul ignore next */ []));
-    paddingHorizontal = input('md', ...(ngDevMode ? [{ debugName: "paddingHorizontal" }] : /* istanbul ignore next */ []));
-    gap = input('md', ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     template = input(...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
     context = input(...(ngDevMode ? [undefined, { debugName: "context" }] : /* istanbul ignore next */ []));
     symbolName = input(...(ngDevMode ? [undefined, { debugName: "symbolName" }] : /* istanbul ignore next */ []));
     active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
-    hoverColor = input('primary-container', ...(ngDevMode ? [{ debugName: "hoverColor" }] : /* istanbul ignore next */ []));
+    /** Tone routed through the theme's `menuItem` variants (e.g. 'warn'). */
+    variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Per-instance override of the theme's `menuItem.hoverColor`. */
+    hoverColor = input(...(ngDevMode ? [undefined, { debugName: "hoverColor" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    menuItemClassName = computed(() => css([
-        {
-            cursor: 'pointer',
-            transition: 'all 0.35s ease',
-            height: 38,
-            // Roving focus highlights items the same way hover does
-            '&:hover, &:focus': {
-                ...this.theme.colorPair(this.hoverColor()),
-                outline: 'none',
+    options = computed(() => this.theme.getComponentOptions('menuItem')(), ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    activeSymbol = computed(() => this.options().activeSymbol, ...(ngDevMode ? [{ debugName: "activeSymbol" }] : /* istanbul ignore next */ []));
+    /** Typography comes from the host's themed typeface; the span only lays out. */
+    LabelClassName = css({ display: 'block', whiteSpace: 'nowrap' });
+    menuItemClassName = computed(() => {
+        const options = this.options();
+        const variant = this.variant();
+        const variantStyle = variant
+            ? this.theme.component('menuItem')().variants?.[variant]
+            : undefined;
+        const transitionSpeed = options.transitionSpeed ?? 0;
+        return css([
+            {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                boxSizing: 'border-box',
+                cursor: 'pointer',
+                height: options.height,
+                ...this.theme.horizontalPadding(options.paddingHorizontal),
+                ...this.theme.gap(options.gap),
+                ...this.theme.radius(options.borderRadius),
+                ...this.theme.typeface(options.typeface),
+                ...this.theme.color(options.textColor),
+                // Roving focus highlights items the same way hover does
+                '&:hover, &:focus': {
+                    ...this.theme.colorPair(this.hoverColor() ?? options.hoverColor),
+                    outline: 'none',
+                },
+                '&[aria-disabled="true"]': {
+                    color: this.theme.colors()['on-disabled-surface'],
+                    pointerEvents: 'none',
+                },
             },
-        },
-    ]), ...(ngDevMode ? [{ debugName: "menuItemClassName" }] : /* istanbul ignore next */ []));
+            transitionSpeed > 0 && { transition: `all ${transitionSpeed}s ease` },
+            // Variant tones override the base look; a same-key '&:hover, &:focus'
+            // in the variant replaces the default hover pair outright.
+            { ...variantStyle },
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "menuItemClassName" }] : /* istanbul ignore next */ []));
     /** Host element, used by Menu for roving-focus bookkeeping. */
     get host() {
         return this._elementRef.nativeElement;
@@ -4175,21 +4225,22 @@ class UniMenuItemComponent extends UniBoxComponent {
     focus() {
         this._elementRef.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuItemComponent, isStandalone: true, selector: "[uni-menu-item], [menu-item]", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, flexDirection: { classPropertyName: "flexDirection", publicName: "flexDirection", isSignal: true, isRequired: false, transformFunction: null }, alignItems: { classPropertyName: "alignItems", publicName: "alignItems", isSignal: true, isRequired: false, transformFunction: null }, paddingHorizontal: { classPropertyName: "paddingHorizontal", publicName: "paddingHorizontal", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, hoverColor: { classPropertyName: "hoverColor", publicName: "hoverColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, properties: { "attr.aria-disabled": "disabled() ? 'true' : null", "attr.aria-current": "active() ? 'true' : null", "class": "menuItemClassName()" } }, usesInheritance: true, ngImport: i0, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <uni-symbol [name]=\"symbol\"></uni-symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n  } @else {\n    <span uni-text=\"label\" display=\"block\" [nowrap]=\"true\">\n      {{ label() }}\n    </span>\n  }\n</div>\n@if (active()) {\n  <uni-symbol name=\"check\"></uni-symbol>\n}\n", styles: [":host.disabled{color:#ddd;pointer-events:none}\n"], dependencies: [{ kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: UniMenuItemComponent, isStandalone: true, selector: "[uni-menu-item], [menu-item]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, symbolName: { classPropertyName: "symbolName", publicName: "symbolName", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, hoverColor: { classPropertyName: "hoverColor", publicName: "hoverColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem", "tabindex": "-1" }, properties: { "attr.aria-disabled": "disabled() ? 'true' : null", "attr.aria-current": "active() ? 'true' : null", "class": "menuItemClassName()" } }, ngImport: i0, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <uni-symbol [name]=\"symbol\"></uni-symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n  } @else {\n    <span [class]=\"LabelClassName\">{{ label() }}</span>\n  }\n</div>\n@let activeSym = activeSymbol();\n@if (active() && activeSym) {\n  <uni-symbol [name]=\"activeSym\"></uni-symbol>\n}\n", dependencies: [{ kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { 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: "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: UniMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[uni-menu-item], [menu-item]', imports: [UniTextComponent, UniSymbolComponent, UniBoxComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: '[uni-menu-item], [menu-item]', imports: [UniSymbolComponent, UniBoxComponent, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'menuitem',
                         tabindex: '-1',
                         '[attr.aria-disabled]': "disabled() ? 'true' : null",
                         '[attr.aria-current]': "active() ? 'true' : null",
                         '[class]': 'menuItemClassName()',
-                    }, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <uni-symbol [name]=\"symbol\"></uni-symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n  } @else {\n    <span uni-text=\"label\" display=\"block\" [nowrap]=\"true\">\n      {{ label() }}\n    </span>\n  }\n</div>\n@if (active()) {\n  <uni-symbol name=\"check\"></uni-symbol>\n}\n", styles: [":host.disabled{color:#ddd;pointer-events:none}\n"] }]
-        }], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], flexDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "flexDirection", required: false }] }], alignItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignItems", required: false }] }], paddingHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingHorizontal", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], hoverColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+                    }, template: "@let tpl = template();\n@let symbol = symbolName();\n@if (symbol) {\n  <uni-symbol [name]=\"symbol\"></uni-symbol>\n}\n<div box-layout [grow]=\"1\">\n  @if (tpl) {\n    <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"context()\"></ng-container>\n  } @else {\n    <span [class]=\"LabelClassName\">{{ label() }}</span>\n  }\n</div>\n@let activeSym = activeSymbol();\n@if (active() && activeSym) {\n  <uni-symbol [name]=\"activeSym\"></uni-symbol>\n}\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], symbolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolName", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], hoverColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class UniMenuComponent {
+    theme = inject(ThemeService);
     // Modern Signal Inputs for perfect Zoneless tracking
     menuItems = input.required(...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
     activeItem = input(...(ngDevMode ? [undefined, { debugName: "activeItem" }] : /* istanbul ignore next */ []));
@@ -4197,6 +4248,21 @@ class UniMenuComponent {
     // Modern Signal Output
     menuItemClicked = output();
     TriggerClassName = css({ display: 'inline-block' });
+    /** Type guard for the template: dividers render as separators, not items. */
+    isDivider = isDivider;
+    menuOptions = computed(() => this.theme.getComponentOptions('menu')(), ...(ngDevMode ? [{ debugName: "menuOptions" }] : /* istanbul ignore next */ []));
+    menuClassName = computed(() => css({ minWidth: this.menuOptions().minWidth }), ...(ngDevMode ? [{ debugName: "menuClassName" }] : /* istanbul ignore next */ []));
+    dividerClassName = computed(() => {
+        const { dividerBorder, dividerSpacing } = this.menuOptions();
+        // Read spacing directly: getSpacing('none') yields the string 'none',
+        // which is invalid as a margin and must resolve to 0 instead.
+        const spacing = this.theme.spacing()[dividerSpacing ?? 'none'];
+        return css({
+            ...this.theme.borderTop(dividerBorder),
+            marginBlock: spacing,
+            marginInline: spacing,
+        });
+    }, ...(ngDevMode ? [{ debugName: "dividerClassName" }] : /* istanbul ignore next */ []));
     itemComponents = viewChildren(UniMenuItemComponent, ...(ngDevMode ? [{ debugName: "itemComponents" }] : /* istanbul ignore next */ []));
     dropdownComponent = viewChild(UniDropdownComponent, ...(ngDevMode ? [{ debugName: "dropdownComponent" }] : /* istanbul ignore next */ []));
     /** Which item receives focus when the menu opens (ArrowUp opens onto the last item). */
@@ -4208,7 +4274,7 @@ class UniMenuComponent {
         });
     }, ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
     handleMenuItemClick(item, dropdown) {
-        if (item.action) {
+        if (!isDivider(item) && item.action) {
             item.action();
         }
         this.menuItemClicked.emit(item);
@@ -4305,7 +4371,12 @@ class UniMenuComponent {
         [trigger]="trigger"
         [placement]="placement()"
         ariaHasPopup="menu"
-        paddingVertical="xs"
+        [color]="menuOptions().color"
+        [border]="menuOptions().border"
+        [borderRadius]="menuOptions().borderRadius"
+        [shadow]="menuOptions().shadow"
+        [paddingVertical]="menuOptions().paddingVertical"
+        [paddingHorizontal]="menuOptions().paddingHorizontal"
         #dropdown
         (dropdownShowing)="onOpened()"
       >
@@ -4313,23 +4384,29 @@ class UniMenuComponent {
              the focused item (menu-item hosts carry tabindex="-1"), and
              Enter/Space activation is dispatched from onMenuKeydown. -->
         <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
-        <div role="menu" (keydown)="onMenuKeydown($event, dropdown)">
+        <div role="menu" [class]="menuClassName()" (keydown)="onMenuKeydown($event, dropdown)">
           @for (item of menuItems(); track item) {
-            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-            <div
-              menu-item
-              [label]="item.label"
-              [symbolName]="item.symbolName"
-              [active]="activeItem() === item"
-              [template]="item.template"
-              [context]="item.context"
-              (click)="handleMenuItemClick(item, dropdown)"
-            ></div>
+            @if (isDivider(item)) {
+              <div role="separator" [class]="dividerClassName()"></div>
+            } @else {
+              <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->
+              <div
+                menu-item
+                [label]="item.label"
+                [symbolName]="item.symbolName"
+                [active]="activeItem() === item"
+                [template]="item.template"
+                [context]="item.context"
+                [variant]="item.variant"
+                [disabled]="item.disabled ?? false"
+                (click)="handleMenuItemClick(item, dropdown)"
+              ></div>
+            }
           }
         </div>
       </uni-dropdown>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: UniMenuItemComponent, selector: "[uni-menu-item], [menu-item]", inputs: ["display", "flexDirection", "alignItems", "paddingHorizontal", "gap", "label", "template", "context", "symbolName", "active", "hoverColor", "disabled"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal"], outputs: ["dropdownShowing", "dropdownHiding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: UniMenuItemComponent, selector: "[uni-menu-item], [menu-item]", inputs: ["label", "template", "context", "symbolName", "active", "variant", "hoverColor", "disabled"] }, { kind: "component", type: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "color"], outputs: ["dropdownShowing", "dropdownHiding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniMenuComponent, decorators: [{
             type: Component,
@@ -4350,7 +4427,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         [trigger]="trigger"
         [placement]="placement()"
         ariaHasPopup="menu"
-        paddingVertical="xs"
+        [color]="menuOptions().color"
+        [border]="menuOptions().border"
+        [borderRadius]="menuOptions().borderRadius"
+        [shadow]="menuOptions().shadow"
+        [paddingVertical]="menuOptions().paddingVertical"
+        [paddingHorizontal]="menuOptions().paddingHorizontal"
         #dropdown
         (dropdownShowing)="onOpened()"
       >
@@ -4358,18 +4440,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
              the focused item (menu-item hosts carry tabindex="-1"), and
              Enter/Space activation is dispatched from onMenuKeydown. -->
         <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
-        <div role="menu" (keydown)="onMenuKeydown($event, dropdown)">
+        <div role="menu" [class]="menuClassName()" (keydown)="onMenuKeydown($event, dropdown)">
           @for (item of menuItems(); track item) {
-            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-            <div
-              menu-item
-              [label]="item.label"
-              [symbolName]="item.symbolName"
-              [active]="activeItem() === item"
-              [template]="item.template"
-              [context]="item.context"
-              (click)="handleMenuItemClick(item, dropdown)"
-            ></div>
+            @if (isDivider(item)) {
+              <div role="separator" [class]="dividerClassName()"></div>
+            } @else {
+              <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->
+              <div
+                menu-item
+                [label]="item.label"
+                [symbolName]="item.symbolName"
+                [active]="activeItem() === item"
+                [template]="item.template"
+                [context]="item.context"
+                [variant]="item.variant"
+                [disabled]="item.disabled ?? false"
+                (click)="handleMenuItemClick(item, dropdown)"
+              ></div>
+            }
           }
         </div>
       </uni-dropdown>
@@ -4525,7 +4613,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", 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      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-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", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { 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: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "component", type: UniStackComponent, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [row-layout]", inputs: ["display", "flexDirection", "minWidth"] }, { kind: "component", type: UniInputBoxComponent, selector: "uni-input-box", inputs: ["disabled", "error", "minWidth", "height"] }], 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", 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      <span uni-text\n        display=\"block\"\n        [typeface]=\"componentOptions().textRole\"\n        [color]=\"textColor()\"\n        [ellipsis]=\"true\"\n        [style.flex-grow]=\"1\"\n        >{{ selectedLabelsText() }}</span>\n      <uni-symbol name=\"keyboard_arrow_down\" [style.flex-shrink]=\"0\"></uni-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", inputs: ["checked", "disabled", "touched", "invalid", "dirty", "required", "ariaDescribedBy", "label", "indeterminate"], outputs: ["checkedChange", "touchedChange", "indeterminateChange"] }, { 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: UniDropdownComponent, selector: "uni-dropdown", inputs: ["trigger", "placement", "offset", "ariaHasPopup", "paddingVertical", "paddingHorizontal", "border", "borderRadius", "shadow", "color"], outputs: ["dropdownShowing", "dropdownHiding"] }, { kind: "component", type: UniStackComponent, selector: "[uni-stack-layout], [stack-layout]", inputs: ["display", "flexDirection", "minHeight"] }, { kind: "component", type: UniDividerComponent, selector: "uni-divider", inputs: ["orientation", "border"] }, { kind: "component", type: UniButtonComponent, selector: "button[uni-text-button], button[text-button]", inputs: ["disable", "loading", "fullWidth", "symbolLeft", "symbolRight"] }, { kind: "component", type: UniTextComponent, selector: "[uni-text]", inputs: ["uni-text", "typeface", "color", "display", "align", "nowrap", "maxWidth", "ellipsis"] }, { kind: "component", type: UniSymbolComponent, selector: "uni-symbol", inputs: ["name", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: UniRowComponent, selector: "[uni-row-layout], [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,
@@ -7227,9 +7315,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'uni-toggle', imports: [UniTextComponent], providers: [{ provide: COMPONENT_NAME, useValue: 'toggle' }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class]=\"toggleLabel()\">\n  <input\n    type=\"checkbox\"\n    role=\"switch\"\n    [class]=\"toggleInput()\"\n    [checked]=\"checked()\"\n    (change)=\"handleChange($event)\"\n    [disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"showError() ? true : null\"\n    [attr.aria-required]=\"required() ? true : null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  />\n  <div class=\"toggle-switch\">\n    <div class=\"toggle-slider\"></div>\n  </div>\n  @if (label()) {\n    <span uni-text=\"label\">{{ label() }}</span>\n  }\n</label>\n" }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], 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: false }] }] } });
 
+class UniTooltipComponent extends BaseComponent {
+    elRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    timer = useTimer();
+    isMouseInside = signal(false, ...(ngDevMode ? [{ debugName: "isMouseInside" }] : /* istanbul ignore next */ []));
+    /** Whether the bubble is currently shown (or fading out). */
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /**
+     * Set when the wrapped control is activated: clicking a button is not a
+     * request to toggle the bubble, and re-showing it right away makes a
+     * state-flipping label ("Expand" → "Collapse") blink back mid-interaction.
+     * Re-arms when the pointer leaves or focus moves away.
+     */
+    suppressed = signal(false, ...(ngDevMode ? [{ debugName: "suppressed" }] : /* istanbul ignore next */ []));
+    tooltipId = uniqueId('uni-tooltip');
+    anchorName = newAnchorName();
+    hoverDelay = input(500, ...(ngDevMode ? [{ debugName: "hoverDelay" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placement = input('top', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    inlineText = input(false, ...(ngDevMode ? [{ debugName: "inlineText" }] : /* istanbul ignore next */ []));
+    /** @deprecated The tooltip renders in the native top layer; ignored. */
+    appendToBody = input(false, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
+    tipRef = viewChild.required('tip');
+    constructor() {
+        super();
+        effect(() => {
+            const timerActive = this.timer.isActive();
+            const mouseInside = this.isMouseInside();
+            // If the timer finished and the mouse is still inside, show tooltip
+            if (!timerActive && mouseInside && !this.suppressed()) {
+                this.showTooltip();
+            }
+            // If the mouse left and the timer is not running, hide tooltip
+            else if (!mouseInside) {
+                this.hideTooltip();
+            }
+        });
+        // A tooltip must be reachable by keyboard (WCAG 1.4.13): when the
+        // projected content has no focusable element, the host itself joins
+        // the tab sequence. The bubble is always in the DOM, so the describedby
+        // relationship is wired once, on the element that receives focus.
+        afterNextRender(() => {
+            const host = this.elRef.nativeElement;
+            if (!host.querySelector(FOCUSABLE_SELECTOR) && !host.matches(FOCUSABLE_SELECTOR)) {
+                this.renderer.setAttribute(host, 'tabindex', '0');
+            }
+            this.renderer.setAttribute(resolveFocusTarget(host), 'aria-describedby', this.tooltipId);
+        });
+    }
+    onFocusIn(event) {
+        // Only keyboard-driven focus shows the tooltip immediately; mouse
+        // interaction keeps the hover-delay behavior.
+        if (event.target.matches(':focus-visible')) {
+            this.showTooltip();
+        }
+    }
+    onFocusOut() {
+        this.suppressed.set(false);
+        if (!this.isMouseInside()) {
+            this.hideTooltip();
+        }
+    }
+    onEscape(event) {
+        if (this.visible()) {
+            // Dismiss only the tooltip, not an enclosing dialog/popover
+            event.stopPropagation();
+            this.hideTooltip();
+        }
+    }
+    /**
+     * A click on an interactive element inside the host is an activation of
+     * that control — hide the bubble and stay suppressed until re-arm. A click
+     * anywhere else (inline-text tooltips, tap on a non-interactive host)
+     * keeps the tap-to-toggle behavior.
+     */
+    onClick(event) {
+        const host = this.elRef.nativeElement;
+        const control = event.target.closest(FOCUSABLE_SELECTOR);
+        if (control && control !== host && host.contains(control)) {
+            this.suppressed.set(true);
+            this.hideTooltip();
+        }
+        else {
+            this.toggleTooltip();
+        }
+    }
+    toggleTooltip() {
+        if (this.visible()) {
+            this.hideTooltip();
+        }
+        else {
+            this.showTooltip();
+        }
+    }
+    mouseenter() {
+        this.isMouseInside.set(true);
+        this.timer.start(this.hoverDelay());
+    }
+    mouseleave() {
+        this.isMouseInside.set(false);
+        this.suppressed.set(false);
+        this.timer.stop();
+    }
+    showTooltip() {
+        if (this.visible())
+            return;
+        const tip = this.tipRef().nativeElement;
+        tip.showPopover();
+        this.renderer.setAttribute(tip, 'fade', 'in');
+        this.visible.set(true);
+    }
+    hideTooltip() {
+        if (!this.visible())
+            return;
+        this.renderer.setAttribute(this.tipRef().nativeElement, 'fade', 'out');
+    }
+    onAnimationEnd(event) {
+        if (event.animationName.includes(this.tooltipFadeOut)) {
+            this.tipRef().nativeElement.hidePopover();
+            this.visible.set(false);
+        }
+    }
+    className = computed(() => css({
+        display: 'inline-flex',
+        anchorName: this.anchorName,
+    }, this.inlineText() && {
+        cursor: 'help',
+        textDecoration: 'underline',
+        textDecorationStyle: 'dotted',
+    }), ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+    tooltipFadeIn = keyframes({ ...fadeIn });
+    tooltipFadeOut = keyframes({ ...fadeOut });
+    tooltipClassName = computed(() => css([
+        {
+            ...this.theme.colorPair(this.componentOptions().color),
+            ...this.theme.radius(this.componentOptions().borderRadius),
+            ...this.theme.boxShadow(this.componentOptions().shadow),
+            ...this.theme.typeface(this.componentOptions().typeface),
+            border: 'none',
+            padding: 5,
+            width: 'max-content',
+            ...anchorStyles(this.anchorName, this.placement(), { mainAxis: 6 }),
+            '&[fade="in"]': {
+                animation: `${this.tooltipFadeIn} ease-in 350ms`,
+            },
+            '&[fade="out"]': {
+                animation: `${this.tooltipFadeOut} ease-in 350ms`,
+            },
+        },
+    ]), ...(ngDevMode ? [{ debugName: "tooltipClassName" }] : /* istanbul ignore next */ []));
+    arrowClassName = computed(() => css({
+        ...this.theme.colorPair(this.componentOptions().color),
+        ...anchorArrowStyles(this.placement()),
+    }), ...(ngDevMode ? [{ debugName: "arrowClassName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: UniTooltipComponent, isStandalone: true, selector: "uni-tooltip", inputs: { hoverDelay: { classPropertyName: "hoverDelay", publicName: "hoverDelay", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, inlineText: { classPropertyName: "inlineText", publicName: "inlineText", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "mouseenter": "mouseenter()", "mouseleave": "mouseleave()", "focusin": "onFocusIn($event)", "focusout": "onFocusOut()", "keydown.escape": "onEscape($event)" }, properties: { "class": "className()" } }, providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }], viewQueries: [{ propertyName: "tipRef", first: true, predicate: ["tip"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content
+    ><span
+      #tip
+      popover="manual"
+      role="tooltip"
+      [id]="tooltipId"
+      [class]="tooltipClassName()"
+      (mouseenter)="isMouseInside.set(true)"
+      (mouseleave)="isMouseInside.set(false)"
+      (animationend)="onAnimationEnd($event)"
+      >{{ label() }}<span [class]="arrowClassName()"></span
+    ></span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniTooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'uni-tooltip',
+                    imports: [],
+                    // The bubble lives declaratively in the template as a manual popover: the
+                    // top layer escapes any overflow context (which made appendToBody obsolete)
+                    // and native CSS anchor positioning keeps it attached to the host.
+                    template: `<ng-content></ng-content
+    ><span
+      #tip
+      popover="manual"
+      role="tooltip"
+      [id]="tooltipId"
+      [class]="tooltipClassName()"
+      (mouseenter)="isMouseInside.set(true)"
+      (mouseleave)="isMouseInside.set(false)"
+      (animationend)="onAnimationEnd($event)"
+      >{{ label() }}<span [class]="arrowClassName()"></span
+    ></span>`,
+                    providers: [{ provide: COMPONENT_NAME, useValue: 'tooltip' }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'className()',
+                        '(click)': 'onClick($event)',
+                        '(mouseenter)': 'mouseenter()',
+                        '(mouseleave)': 'mouseleave()',
+                        '(focusin)': 'onFocusIn($event)',
+                        '(focusout)': 'onFocusOut()',
+                        '(keydown.escape)': 'onEscape($event)',
+                    },
+                }]
+        }], 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 }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-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, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, 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, UniStatComponent, UniSymbolComponent, UniTabComponent, UniTabsComponent, UniTagComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, anchorArrowStyles, anchorStyles, getFileExtension, isDivider, motionSafe, newAnchorName, resolveFocusTarget, uniqueId, useTimer, visuallyHidden };
 //# sourceMappingURL=uni-design-system-uni-angular.mjs.map