@uni-design-system/uni-angular 7.3.0 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-angular",
-  "version": "7.3.0",
+  "version": "8.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "@angular/core": "^21.2.0",
     "@angular/forms": "^21.2.0",
     "@emotion/css": "^11.0.0",
-    "@uni-design-system/uni-core": "^7.3.0"
+    "@uni-design-system/uni-core": "^8.0.0"
   },
   "module": "fesm2022/uni-design-system-uni-angular.mjs",
   "typings": "types/uni-design-system-uni-angular.d.ts",

package/schematics/ng-add/index.js

@@ -644,6 +644,23 @@ var BaseIcons = {
 	logout: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3e%3cpath d='M212.31-140Q182-140 161-161q-21-21-21-51.31v-535.38Q140-778 161-799q21-21 51.31-21h268.07v60H212.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v535.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85h268.07v60H212.31Zm436.92-169.23-41.54-43.39L705.08-450H363.85v-60h341.23l-97.39-97.38 41.54-43.39L820-480 649.23-309.23Z'/%3e%3c/svg%3e",
 	spinner: "data:image/svg+xml;charset=UTF-8,%3csvg stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3e%3cstyle%3e .oui_spinner %7b transform-origin: center; animation: rotate_360 2s linear infinite;%7d .oui_spinner circle %7b stroke-linecap: round; animation: dash 1.5s ease-in-out infinite;%7d %40keyframes rotate_360 %7b 100%25 %7b transform: rotate(360deg);%7d %7d %40keyframes dash %7b 0%25 %7b stroke-dasharray: 0 150; stroke-dashoffset: 0;%7d 47.5%25 %7b stroke-dasharray: 42 150; stroke-dashoffset: -16;%7d 95%25, 100%25 %7b stroke-dasharray: 42 150; stroke-dashoffset: -59;%7d %7d %3c/style%3e%3cg class='oui_spinner'%3e%3ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3e%3c/circle%3e%3c/g%3e%3c/svg%3e "
 };
+/**
+* The highlight state for roving-focus composites (menus, and any other widget
+* that moves focus programmatically): pointer hover, or focus the user drove
+* from the keyboard.
+*
+* Why not plain `:focus` — a roving-focus composite calls `.focus()` on an item
+* every time it opens, including pointer opens, and `:focus` would paint that
+* as a highlight the mouse user never asked for, reading as a preselected
+* item. `:focus-visible` excludes programmatic focus that follows a click while
+* still matching keyboard navigation.
+*
+* Shared as a constant because Emotion merges styles by **exact selector
+* text**: a component's base rule and any theme variant restyling that rule
+* must key both with this value, or the variant silently fails to override and
+* reintroduces the phantom highlight.
+*/
+var HOVER_OR_KEYBOARD_FOCUS = "&:hover, &:focus-visible";
 var BaseTypography = {
 	"display-large": {
 		fontFamily: "Red Hat Display",
@@ -840,6 +857,25 @@ var buildBorders = (c) => ({
 	dark: `1px solid ${c["on-background"]}`,
 	dotted: `1px dotted ${c["on-background"]}`
 });
+/**
+* One tag colour role across all three tones. `soft` is the resting look (the
+* container pair), `solid` fills with the role itself, `outline` keeps the
+* surface and draws the edge — so every role stays consistent and a theme can
+* still override any single cell.
+*/
+var tagVariant = (c, role) => ({ [role]: {
+	backgroundColor: c[`${role}-container`],
+	color: c[`on-${role}-container`],
+	"&.tone-solid": {
+		backgroundColor: c[role],
+		color: c[`on-${role}`]
+	},
+	"&.tone-outline": {
+		backgroundColor: "transparent",
+		color: c[role],
+		borderColor: c[`on-${role}-container-border`] ?? c[role]
+	}
+} });
 var buildComponents = (c) => ({
 	alert: { options: {
 		topPosition: 40,
@@ -1010,7 +1046,7 @@ var buildComponents = (c) => ({
 		},
 		variants: { warn: {
 			color: c.warn,
-			"&:hover, &:focus": {
+			[HOVER_OR_KEYBOARD_FOCUS]: {
 				backgroundColor: c["warn-container"],
 				color: c["on-warn-container"]
 			}
@@ -1064,6 +1100,79 @@ var buildComponents = (c) => ({
 		focusOutlineOffset: 2
 	} },
 	badge: { options: { borderRadius: "xxs" } },
+	tag: {
+		options: {
+			borderRadius: "max",
+			typeface: "tag",
+			gap: "xs",
+			removeIcon: "close",
+			selectedIcon: "check"
+		},
+		fixed: {
+			display: "inline-flex",
+			alignItems: "center",
+			maxWidth: "100%",
+			border: "1px solid transparent",
+			transition: "background-color .2s ease, color .2s ease"
+		},
+		variants: {
+			...tagVariant(c, "primary"),
+			...tagVariant(c, "secondary"),
+			...tagVariant(c, "tertiary"),
+			...tagVariant(c, "warn"),
+			...tagVariant(c, "success"),
+			ghost: {
+				backgroundColor: "transparent",
+				color: c["on-background"],
+				"&.tone-solid": {
+					backgroundColor: c["surface-variant"],
+					color: c["on-surface-variant"]
+				},
+				"&.tone-outline": {
+					backgroundColor: "transparent",
+					borderColor: c.outline
+				}
+			},
+			disabled: {
+				backgroundColor: c["disabled-container"],
+				color: c["on-disabled"],
+				"&.tone-solid": {
+					backgroundColor: c.disabled,
+					color: c["on-disabled"]
+				},
+				"&.tone-outline": {
+					backgroundColor: "transparent",
+					borderColor: c.disabled
+				}
+			}
+		},
+		sizes: {
+			sm: {
+				height: 20,
+				fontSize: 12,
+				padding: "0 8px"
+			},
+			md: {
+				height: 24,
+				fontSize: 13,
+				padding: "0 10px"
+			},
+			lg: {
+				height: 32,
+				fontSize: 15,
+				padding: "0 12px"
+			}
+		}
+	},
+	tagInput: { options: {
+		chipGap: "xs",
+		chipSize: "md",
+		minInputWidth: "12ch",
+		listColor: "primary-surface",
+		listShadow: "menu",
+		listBorderRadius: "xs",
+		maxSuggestions: 8
+	} },
 	button: {
 		options: {
 			borderRadius: "max",
@@ -1367,11 +1476,11 @@ var buildComponents = (c) => ({
 		typeface: "label"
 	} }
 });
-var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isRecord$1 = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 var deepMerge = (base, override) => {
 	if (!override) return base;
 	const out = { ...base };
-	for (const [key, value] of Object.entries(override)) out[key] = isRecord(value) && isRecord(out[key]) ? deepMerge(out[key], value) : value;
+	for (const [key, value] of Object.entries(override)) out[key] = isRecord$1(value) && isRecord$1(out[key]) ? deepMerge(out[key], value) : value;
 	return out;
 };
 var createTheme = ({ id, name, colors, icons = {}, radii = BaseRadii, shadows = BaseShadows, borders, components }) => ({
@@ -1519,6 +1628,11 @@ var generateThemes = (input) => {
 		}
 	};
 };
+/**
+* One-line human summary of a {@link ContrastReport}. Shared so the generated
+* theme file's header and the MCP's theme tools report identical wording.
+*/
+var summarizeContrast = (report) => `${report.checks.length} contrast pairs checked · worst ${report.worstRatio}:1 · ${report.pass ? "all AA" : `${report.checks.filter((check) => !check.pass).length} failing`}`;
 var IDENT = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
 var asKey = (k) => IDENT.test(k) ? k : `'${k}'`;
 var recordLiteral = (record, indent) => Object.entries(record).map(([k, v]) => `${indent}${asKey(k)}: '${v}',`).join("\n");
@@ -1573,7 +1687,7 @@ var emitThemeFile = (input) => {
 		input.shape && `--shape=${input.shape}`,
 		!darkMode && "--dark-mode=false"
 	].filter(Boolean).join(" ");
-	const reportSummary = `${report.checks.length} contrast pairs checked · worst ${report.worstRatio}:1 · ${report.pass ? "all AA" : `${report.checks.filter((c) => !c.pass).length} failing`}`;
+	const reportSummary = summarizeContrast(report);
 	const modes = [{
 		exportName: `${id}Light`,
 		displayName: `${name} Light`,
@@ -1754,7 +1868,7 @@ var UniThemes = {
 Object.keys(UniThemes)[0];
 //#endregion
 //#region package.json
-var version = "7.3.0";
+var version = "8.0.0";
 //#endregion
 //#region schematics-src/ng-add/transforms.ts
 var addDependencies = (packageJsonText, deps) => {

package/types/uni-design-system-uni-angular.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { Signal, WritableSignal, InjectionToken, ElementRef, TemplateRef, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
 import * as _uni_design_system_uni_core from '@uni-design-system/uni-core';
-import { IconName, Variant, ContainerColorToken, PaletteConfig, GenerateColorsConfig, Radii, UniTheme, ComponentName, ComponentTheme, NullableSize, ThemeName, TextRole, ContentColorToken, Size, Thickness, NullableStyleExpression, ColorKey, ColorToken, Typeface, Radius, OptionalSize, Border, Shadow, ZIndexableElements, Elevation, RadiiSize, TextColor, JustifyContent, StyleExpression, Orientation, CssLength, OptionalAlignSelf, OptionalAlignItems, OptionalAlignContent, OptionalJustifyContent, OptionalDisplay, OptionalPosition, OptionalOverflow, OptionalFlexDirection, OptionalTextAlign, OptionalWrap, ColorScheme, ColorCategory, ThemeShape, ContrastCheck, Colors, GenerationInput } from '@uni-design-system/uni-core';
+import { IconName, Variant, ContainerColorToken, PaletteConfig, GenerateColorsConfig, Radii, UniTheme, ComponentName, ComponentTheme, NullableSize, ThemeName, ThemeParseResult, TextRole, ContentColorToken, Size, Thickness, NullableStyleExpression, ColorKey, ColorToken, Typeface, Radius, OptionalSize, Border, Shadow, ZIndexableElements, Elevation, RadiiSize, TextColor, JustifyContent, StyleExpression, Orientation, CssLength, OptionalAlignSelf, OptionalAlignItems, OptionalAlignContent, OptionalJustifyContent, OptionalDisplay, OptionalPosition, OptionalOverflow, OptionalFlexDirection, OptionalTextAlign, OptionalWrap, TagTone, ColorScheme, ColorCategory, ThemeShape, ContrastCheck, Colors, GenerationInput } from '@uni-design-system/uni-core';
 import { FormCheckboxControl, FormValueControl } from '@angular/forms/signals';
 import * as _uni_design_system_uni_angular from '@uni-design-system/uni-angular';
 
@@ -44,6 +44,64 @@ declare function motionSafe<T extends object>(styles: T): {
     '@media (prefers-reduced-motion: no-preference)': T;
 };
 
+interface ListboxNavigationConfig {
+    /** How many options are currently navigable. Read reactively. */
+    count: () => number;
+    /** Id prefix for the listbox and its options. */
+    idPrefix?: string;
+    /** Wrap past the ends. Default true. */
+    wrap?: boolean;
+}
+/**
+ * The keyboard and ARIA bookkeeping shared by every combobox-style popup:
+ * open state, the active option index, and the `aria-activedescendant` id
+ * wiring. Deliberately owns no markup and no filtering — each control renders
+ * its own options and decides what a suggestion *is*.
+ *
+ * Extracted because three controls need the identical contract
+ * (`uni-search-input`, `uni-tag-input`, and the multi-select upgrade), and the
+ * parts that silently drift between hand-rolled copies all live here: the
+ * wrap-around arithmetic, Home/End, and keeping the active id in sync with the
+ * option list.
+ *
+ * `Enter` and `Escape` are deliberately *not* handled: what they mean depends
+ * on the control (submit a search, commit a typed token, clear the field), and
+ * `activeIndex()` is all a caller needs to decide.
+ */
+declare class ListboxNavigation {
+    private readonly config;
+    /** Id for the `role="listbox"` element; wire as `aria-controls`. */
+    readonly listboxId: string;
+    private readonly _open;
+    private readonly _activeIndex;
+    private readonly wrap;
+    /** Whether the popup is showing. Also false when there is nothing to show. */
+    readonly open: Signal<boolean>;
+    /** Index of the highlighted option, or -1 when none is active. */
+    readonly activeIndex: Signal<number>;
+    /** Value for `aria-activedescendant`, or null when nothing is active. */
+    readonly activeDescendantId: Signal<string | null>;
+    constructor(config: ListboxNavigationConfig);
+    /** Stable per-option id, for `role="option"` elements. */
+    optionId(index: number): string;
+    show(): void;
+    /** Close and drop the active option, so reopening starts clean. */
+    hide(): void;
+    setActive(index: number): void;
+    /**
+     * Handle ArrowDown / ArrowUp / Home / End, opening the popup if needed.
+     * Returns true when the key was consumed, so a caller can fall through to
+     * its own handling for everything else.
+     */
+    navigate(event: KeyboardEvent): boolean;
+    private nextIndex;
+    private step;
+    /** Close when focus leaves the control entirely (not on internal moves). */
+    closeOnFocusOut(event: FocusEvent): void;
+}
+/** Factory mirroring the signal-API style used elsewhere in the CDK. */
+declare const createListboxNavigation: (config: ListboxNavigationConfig) => ListboxNavigation;
+
 /**
  * Native CSS Anchor Positioning helpers (Baseline 2026). These replace the
  * former @floating-ui/dom dependency: the browser tracks the anchor natively
@@ -271,10 +329,19 @@ declare class ThemeService {
     static readonly CUSTOM_KEY = "CustomTheme";
     /** localStorage key holding the serialized brand palette config. */
     static readonly PALETTE_KEY = "uni-custom-palette";
-    private themes;
     private localStorage;
-    theme: _angular_core.WritableSignal<UniTheme>;
-    themeOptions: _angular_core.WritableSignal<Options<string>>;
+    /**
+     * The live theme registry: the injected {@link UNI_THEMES} map (validated
+     * at construction) plus anything added via {@link registerTheme} — including
+     * the custom brand theme, which registers under {@link CUSTOM_KEY} so it is
+     * an ordinary, selectable entry.
+     */
+    private readonly registry;
+    private readonly _theme;
+    /** The active theme. Write via {@link setTheme}/{@link selectTheme} — every write is validated. */
+    readonly theme: Signal<UniTheme>;
+    /** Selectable themes, derived from the registry — reactive to registration. */
+    readonly themeOptions: Signal<Options<string>>;
     components: Signal<Partial<Record<ComponentName, ComponentTheme<object>>>>;
     component: <T>(componentName: ComponentName) => Signal<ComponentTheme<T>>;
     colors: Signal<Partial<Record<string, string>>>;
@@ -286,7 +353,37 @@ declare class ThemeService {
     shadows: Signal<Partial<Record<string, string>>>;
     icons: Signal<_uni_design_system_uni_core.Icons>;
     constructor();
-    selectTheme(themeName: ThemeName): void;
+    /**
+     * Activate a registered theme. Returns false — touching nothing, persisting
+     * nothing — when the name is unknown (previously this silently kept the old
+     * theme while still recording the bad key).
+     */
+    selectTheme(themeName: ThemeName): boolean;
+    /**
+     * Validate and activate a theme without registering it. The result carries
+     * acceptance or the complete list of rejection reasons; on rejection the
+     * active theme is unchanged.
+     */
+    setTheme(input: unknown): ThemeParseResult;
+    /**
+     * Validate and add a theme to the registry (keyed by its `id`), making it
+     * selectable and listed in {@link themeOptions}. On rejection the registry
+     * is unchanged and the result lists every reason.
+     */
+    registerTheme(input: unknown, opts?: {
+        select?: boolean;
+    }): ThemeParseResult;
+    /**
+     * The gate every externally-supplied theme passes: validate, then restore
+     * any built-in icons the payload left out. Themes that travel as JSON (the
+     * MCP theme tools, a theme registry) omit the built-in icon set — it is
+     * ~71% of the bytes and every consumer already ships it — so hydration
+     * applies the same `{...BaseIcons, ...icons}` contract `createTheme` uses:
+     * the theme's own icons win, built-ins fill the rest.
+     */
+    private accept;
+    /** Remove a registered theme; falls back to the first remaining theme if it was active. */
+    unregisterTheme(id: string): void;
     /** The live brand palette config, when a custom theme is active. */
     customPalette: _angular_core.WritableSignal<BrandPaletteConfig>;
     isCustomTheme: Signal<boolean>;
@@ -296,7 +393,7 @@ declare class ThemeService {
      * reload) renders with the same brand.
      */
     applyPalette(config: BrandPaletteConfig, persist?: boolean): void;
-    /** Drop the custom brand theme and fall back to the first built-in theme. */
+    /** Drop the custom brand theme and fall back to the first registered theme. */
     clearCustomPalette(): void;
     selectedThemeName: Signal<string>;
     selectedThemeKey: _angular_core.WritableSignal<string>;
@@ -1608,20 +1705,49 @@ declare class UniMultiSelectDropdownComponent<T = unknown> extends BaseComponent
     readonly ariaDescribedBy: _angular_core.InputSignal<string>;
     readonly options: _angular_core.InputSignal<Options<T>>;
     readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * What the field is for, e.g. "Fruits". Rendered visually hidden inside the
+     * trigger so its accessible name reads "Fruits, Apple, Pear" — without it a
+     * screen reader announces only the current selection, with no clue which
+     * field it belongs to.
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Debounce for the filter box, matching the library's input debounce. */
+    readonly debounceTime: _angular_core.InputSignal<number>;
+    protected readonly srOnly: string;
     protected readonly query: _angular_core.WritableSignal<string>;
+    private queryTimer?;
     protected readonly filteredOptions: _angular_core.Signal<Options<T>>;
+    private readonly optionRefs;
+    /**
+     * Roving focus over the options. The shared helper owns the index
+     * arithmetic — wrapping, Home/End, and never pointing past a list the
+     * filter has narrowed — the same contract `uni-search-input` and
+     * `uni-tag-input` use, so the keys behave identically across all three.
+     */
+    protected readonly list: _uni_design_system_uni_angular.ListboxNavigation;
+    /** Announced with the selection so the count is not left to guesswork. */
+    readonly selectionSummary: _angular_core.Signal<string>;
     readonly selectedLabelsText: _angular_core.Signal<string>;
     protected readonly showError: _angular_core.Signal<boolean>;
     protected readonly textColor: _angular_core.Signal<_uni_design_system_uni_core.TextColor>;
     triggerClass: string;
     protected readonly searchInputClass: _angular_core.Signal<string>;
     protected handleQueryInput(event: Event): void;
+    /**
+     * Arrow keys walk the options from anywhere in the panel, including the
+     * filter box — previously the only way in was to Tab through every
+     * checkbox.
+     */
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    /** Keeps the active index in step when focus lands on a row by pointer. */
+    protected onOptionFocus(index: number): void;
     selectAll(): void;
     deselectAll(): void;
     protected isOptionSelected(option: Option<T>): _angular_core.Signal<boolean>;
     toggleOption(option: Option<T>, checked: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniMultiSelectDropdownComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniMultiSelectDropdownComponent<any>, "uni-multi-select-dropdown", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniMultiSelectDropdownComponent<any>, "uni-multi-select-dropdown", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; }, never, never, true, never>;
 }
 
 interface UniNotificationBadgeOptions {
@@ -1962,12 +2088,10 @@ declare class UniSearchInputComponent extends BaseComponent<UniSearchInputOption
     search: _angular_core.OutputEmitterRef<string>;
     suggestionSelected: _angular_core.OutputEmitterRef<string>;
     protected readonly field: _angular_core.Signal<UniDebounceInputComponent>;
-    readonly listboxId: string;
-    protected readonly listOpen: _angular_core.WritableSignal<boolean>;
-    protected readonly activeIndex: _angular_core.WritableSignal<number>;
     protected readonly visibleSuggestions: _angular_core.Signal<string[]>;
-    protected readonly showList: _angular_core.Signal<boolean>;
-    protected readonly activeOptionId: _angular_core.Signal<string>;
+    /** Shared combobox bookkeeping: open state, active option, ARIA ids. */
+    protected readonly list: _uni_design_system_uni_angular.ListboxNavigation;
+    readonly listboxId: string;
     protected readonly hasQuery: _angular_core.Signal<boolean>;
     protected handleChange(value: string): void;
     protected submit(): void;
@@ -2298,13 +2422,217 @@ declare class UniSymbolComponent extends BaseComponent<SymbolOptions> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniSymbolComponent, "uni-symbol", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; "weight": { "alias": "weight"; "required": false; "isSignal": true; }; "grade": { "alias": "grade"; "required": false; "isSignal": true; }; "opticalSize": { "alias": "opticalSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class UniTagComponent {
+/** Theme options for the `tag` component entry. */
+interface UniTagOptions {
+    borderRadius?: Radius;
+    typeface?: Typeface;
+    /** Space between the lead element, label and remove button. */
+    gap?: NullableSize;
+    /** Icon primitive for the remove affordance. */
+    removeIcon?: IconName;
+    /** Icon primitive shown in the lead slot when the chip is selected. */
+    selectedIcon?: IconName;
+}
+/** The value a tag echoes back on `removed` / `activated`. */
+type UniTagValue = string | number | undefined;
+
+/**
+ * Compact chip for categories, states, filters and tokens.
+ *
+ * Two orthogonal style axes: `variant` picks the colour role and `tone` picks
+ * the archetype (soft / solid / outline). Both live in the theme's `tag` entry,
+ * so a theme restyles every chip in the app without touching markup.
+ *
+ * Structurally a chip is **body + trailing action as siblings**, never nested
+ * buttons: an interactive chip whose body is a `<button>` cannot contain the
+ * remove `<button>` (invalid HTML, and the inner control becomes unreachable
+ * for keyboard users). Both stay independently operable.
+ */
+declare class UniTagComponent extends BaseComponent<UniTagOptions> {
+    size: _angular_core.InputSignal<Size>;
+    tone: _angular_core.InputSignal<TagTone>;
     label: _angular_core.InputSignal<string>;
     value: _angular_core.InputSignal<string | number>;
-    close: _angular_core.OutputEmitterRef<string | number>;
-    handleClose(): void;
+    /** Truncation budget, e.g. `'14ch'`. A number is treated as px. */
+    maxWidth: _angular_core.InputSignal<string | number>;
+    avatarSrc: _angular_core.InputSignal<string>;
+    /** Initials fallback when `avatarSrc` is absent or fails to load. */
+    avatarName: _angular_core.InputSignal<string>;
+    /** Theme icon primitive — the preferred glyph path. */
+    iconName: _angular_core.InputSignal<IconName>;
+    /** Material Symbols ligature, for glyphs the theme's icon set doesn't carry. */
+    symbolName: _angular_core.InputSignal<string>;
+    /** Status dot in the current colour. */
+    dot: _angular_core.InputSignal<boolean>;
+    removable: _angular_core.InputSignal<boolean>;
+    interactive: _angular_core.InputSignal<boolean>;
+    /**
+     * Toggle state. Left undefined the chip carries no `aria-pressed` at all —
+     * an interactive chip is not always a toggle (inside a tag input it is
+     * focusable so it can be removed), and announcing "not pressed" on a
+     * recipient chip is worse than announcing nothing.
+     */
+    selected: _angular_core.InputSignal<boolean>;
+    invalid: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    /** Accessible-name override for the remove button. */
+    removeLabel: _angular_core.InputSignal<string>;
+    /**
+     * Tab position of the chip's controls. A composite that owns its own
+     * roving focus — `uni-tag-input`, where the whole field is one tab stop —
+     * passes `-1` so Tab does not walk through every chip to reach the next
+     * control.
+     */
+    controlTabIndex: _angular_core.InputSignal<number>;
+    removed: _angular_core.OutputEmitterRef<UniTagValue>;
+    activated: _angular_core.OutputEmitterRef<UniTagValue>;
+    /** A disabled chip wears the theme's `disabled` role, whatever its variant. */
+    protected readonly resolvedVariant: _angular_core.Signal<_uni_design_system_uni_core.Variant>;
+    protected readonly themeStyle: _angular_core.Signal<{
+        [x: string]: string | number | _uni_design_system_uni_core.StyleExpression;
+    }>;
+    /** Lead elements derive from the chip height, so no second size token. */
+    protected readonly leadSize: _angular_core.Signal<number>;
+    /** Remove glyph, proportional to the chip rather than to the icon-button. */
+    protected readonly removeGlyphSize: _angular_core.Signal<number>;
+    protected readonly initials: _angular_core.Signal<string>;
+    protected readonly hostClass: _angular_core.Signal<string>;
+    /** Truncating label; `title` exposes the full text when a budget is set. */
+    protected readonly labelClass: string;
+    protected readonly bodyClass: _angular_core.Signal<string>;
+    protected readonly leadClass: _angular_core.Signal<string>;
+    protected readonly dotClass: _angular_core.Signal<string>;
+    protected remove(): void;
+    protected activate(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniTagComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniTagComponent, "uni-tag", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniTagComponent, "uni-tag", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarName": { "alias": "avatarName"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "symbolName": { "alias": "symbolName"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "removeLabel": { "alias": "removeLabel"; "required": false; "isSignal": true; }; "controlTabIndex": { "alias": "controlTabIndex"; "required": false; "isSignal": true; }; }, { "removed": "removed"; "activated": "activated"; }, never, ["[tag-lead]", "*"], true, never>;
+}
+
+/**
+ * One committed token. `value` is canonical — what a form submits — and
+ * everything else is presentation the field may enrich from a suggestion.
+ *
+ * `{ value: 'a@b.com' }` is a complete item, so the least a caller has to write
+ * is `[value]="[{ value: 'a@b.com' }]"`.
+ */
+interface UniTagItem {
+    /** Canonical value, e.g. an email address. */
+    value: string;
+    /** Display text; falls back to `value`. */
+    label?: string;
+    avatarSrc?: string;
+    /**
+     * Failed `validate()`. The item stays **in** the value rather than being
+     * rejected — a field that silently swallows a typo'd address is worse than
+     * one that shows it in red, and the user can click in to fix it.
+     */
+    invalid?: boolean;
+    /** Locked token (e.g. a thread owner): rendered without a remove control. */
+    disabled?: boolean;
+}
+/** A type-ahead entry. Same contract as `uni-search-input`: the app filters. */
+interface UniTagSuggestion {
+    value: string;
+    label?: string;
+    description?: string;
+    avatarSrc?: string;
+}
+/** Why a typed token did not become a chip. */
+interface UniTagRejection {
+    raw: string;
+    reason: 'duplicate' | 'max' | 'invalid';
+}
+/** Theme options for the `tagInput` component entry. */
+interface UniTagInputOptions {
+    /** Space between chips. */
+    chipGap?: NullableSize;
+    chipSize?: Size;
+    /** Keeps the text input usable when chips have wrapped. */
+    minInputWidth?: string | number;
+    listColor?: ContainerColorToken;
+    listShadow?: Shadow;
+    listBorderRadius?: Radius;
+    maxSuggestions?: number;
+}
+
+declare class UniTagInputComponent extends BaseComponent<UniTagInputOptions> implements FormValueControl<UniTagItem[]> {
+    readonly value: _angular_core.ModelSignal<UniTagItem[]>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly touched: _angular_core.ModelSignal<boolean>;
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    readonly dirty: _angular_core.InputSignal<boolean>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly ariaDescribedBy: _angular_core.InputSignal<string>;
+    /** Accessible name for the field, e.g. "To". */
+    label: _angular_core.InputSignal<string>;
+    placeholder: _angular_core.InputSignal<string>;
+    /** `email` wires an address validator, paste parser and space separator. */
+    preset: _angular_core.InputSignal<"text" | "email">;
+    separators: _angular_core.InputSignal<string[]>;
+    commitOnBlur: _angular_core.InputSignal<boolean>;
+    allowDuplicates: _angular_core.InputSignal<boolean>;
+    max: _angular_core.InputSignal<number>;
+    validate: _angular_core.InputSignal<(raw: string) => boolean>;
+    parse: _angular_core.InputSignal<(pasted: string) => string[]>;
+    tagVariant: _angular_core.InputSignal<Variant>;
+    tagTone: _angular_core.InputSignal<TagTone>;
+    tagSize: _angular_core.InputSignal<Size>;
+    suggestions: _angular_core.InputSignal<UniTagSuggestion[]>;
+    /** Debounced text the app should filter `suggestions` from. */
+    query: _angular_core.OutputEmitterRef<string>;
+    debounceTime: _angular_core.InputSignal<number>;
+    added: _angular_core.OutputEmitterRef<UniTagItem>;
+    removed: _angular_core.OutputEmitterRef<UniTagItem>;
+    rejected: _angular_core.OutputEmitterRef<UniTagRejection>;
+    private readonly inputRef;
+    private readonly chipRefs;
+    /** Uncommitted text in the field. */
+    protected readonly draft: _angular_core.WritableSignal<string>;
+    /** Index of the focused chip, or -1 when focus is in the text input. */
+    protected readonly focusedChip: _angular_core.WritableSignal<number>;
+    /** Announcement for the status region; add/remove are otherwise silent. */
+    protected readonly announcement: _angular_core.WritableSignal<string>;
+    protected readonly hintId: string;
+    protected readonly srOnly: string;
+    private queryTimer?;
+    protected readonly visibleSuggestions: _angular_core.Signal<UniTagSuggestion[]>;
+    /** Shared combobox bookkeeping — identical contract to uni-search-input. */
+    protected readonly list: _uni_design_system_uni_angular.ListboxNavigation;
+    protected readonly showError: _angular_core.Signal<boolean>;
+    protected readonly separatorKeys: _angular_core.Signal<string[]>;
+    protected readonly describedBy: _angular_core.Signal<string>;
+    protected labelOf(item: UniTagItem | UniTagSuggestion): string;
+    /** Split pasted text into candidate tokens. */
+    private parseRaw;
+    private isValid;
+    /**
+     * Turn typed text into a chip. Invalid entries are kept and flagged rather
+     * than dropped; duplicates and over-max are refused with a reason.
+     */
+    protected commit(raw: string): boolean;
+    private reject;
+    protected removeAt(index: number, focus?: 'left' | 'right' | 'input'): void;
+    private countNoun;
+    private announce;
+    protected focusInput(): void;
+    private focusChip;
+    protected onInputKeydown(event: KeyboardEvent): void;
+    protected onInput(value: string): void;
+    protected onPaste(event: ClipboardEvent): void;
+    protected onBlur(): void;
+    protected onFocusOut(event: FocusEvent): void;
+    protected onChipKeydown(event: KeyboardEvent, index: number): void;
+    /** Lift a chip back into the input for correction. */
+    protected editChip(index: number): void;
+    protected selectSuggestion(suggestion: UniTagSuggestion): void;
+    private commitDraft;
+    private setDraft;
+    protected readonly className: _angular_core.Signal<string>;
+    protected readonly fieldClass: _angular_core.Signal<string>;
+    protected readonly inputClass: _angular_core.Signal<string>;
+    protected readonly listClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UniTagInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UniTagInputComponent, "uni-tag-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "preset": { "alias": "preset"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "commitOnBlur": { "alias": "commitOnBlur"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "parse": { "alias": "parse"; "required": false; "isSignal": true; }; "tagVariant": { "alias": "tagVariant"; "required": false; "isSignal": true; }; "tagTone": { "alias": "tagTone"; "required": false; "isSignal": true; }; "tagSize": { "alias": "tagSize"; "required": false; "isSignal": true; }; "suggestions": { "alias": "suggestions"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "query": "query"; "added": "added"; "removed": "removed"; "rejected": "rejected"; }, never, never, true, never>;
 }
 
 /**
@@ -2544,5 +2872,5 @@ declare class DragAndDropDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DragAndDropDirective, "[uni-drag-n-drop], [dragAndDrop]", never, {}, { "onFileDropped": "onFileDropped"; }, never, never, true, never>;
 }
 
-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 };
-export type { Alert, AnchorOffset, BrandPaletteConfig, BreadcrumbItem, ButtonGroupConfig, ButtonGroupItem, ColumnDefinition, Confirmation, DataLoader, DrawerMode, DrawerPosition, ImagePosition, MenuDivider, MenuItem, MenuItemWithLabel, MenuItemWithTemplate, Option, Options, PageRequest, PageResponse, Placement, ScrollbarAppearance, SkeletonShape, Snackbar, Sort, SortDirection, UniAppBarOptions, UniAvatarGroupOptions, UniAvatarOptions, UniBreadcrumbOptions, UniCheckboxOptions, UniDataSearchOptions, UniDataTableOptions, UniDatasource, UniDrawerOptions, UniExpandOptions, UniInputBoxOptions, UniMenuItemOptions, UniMenuOptions, UniMultiSelectDropdownOptions, UniNotificationBadgeOptions, UniPaginatorOptions, UniRadioOption, UniRadioOptions, UniSearchInputOptions, UniSkeletonOptions, UniSliderOptions, UniStatOptions, UniTabsOptions, UniTextareaOptions, UniToggleOptions };
+export { BodyRenderDirective, ConfirmationDialogComponent, DragAndDropDirective, FOCUSABLE_SELECTOR, ListboxNavigation, 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, UniTagInputComponent, UniTextComponent, UniTextareaComponent, UniThemeBuilderComponent, UniThemeSwitchComponent, UniToggleComponent, UniTooltipComponent, UniWrapComponent, acceptableFile, anchorArrowStyles, anchorStyles, createListboxNavigation, getFileExtension, isDivider, motionSafe, newAnchorName, resolveFocusTarget, uniqueId, useTimer, visuallyHidden };
+export type { Alert, AnchorOffset, BrandPaletteConfig, BreadcrumbItem, ButtonGroupConfig, ButtonGroupItem, ColumnDefinition, Confirmation, DataLoader, DrawerMode, DrawerPosition, ImagePosition, ListboxNavigationConfig, MenuDivider, MenuItem, MenuItemWithLabel, MenuItemWithTemplate, Option, Options, PageRequest, PageResponse, Placement, ScrollbarAppearance, SkeletonShape, Snackbar, Sort, SortDirection, UniAppBarOptions, UniAvatarGroupOptions, UniAvatarOptions, UniBreadcrumbOptions, UniCheckboxOptions, UniDataSearchOptions, UniDataTableOptions, UniDatasource, UniDrawerOptions, UniExpandOptions, UniInputBoxOptions, UniMenuItemOptions, UniMenuOptions, UniMultiSelectDropdownOptions, UniNotificationBadgeOptions, UniPaginatorOptions, UniRadioOption, UniRadioOptions, UniSearchInputOptions, UniSkeletonOptions, UniSliderOptions, UniStatOptions, UniTabsOptions, UniTagInputOptions, UniTagItem, UniTagOptions, UniTagRejection, UniTagSuggestion, UniTagValue, UniTextareaOptions, UniToggleOptions };