@lilydesignsystem/angular-text-size-picker 0.1.2 → 0.2.0

package/fesm2022/lilydesignsystem-angular-text-size-picker.mjs

@@ -1,283 +1,336 @@
-import { NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Directive, input, model, output, contentChild, TemplateRef, viewChild, signal, computed, inject, ChangeDetectorRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
-import { IconButton, Listbox } from '@lilydesignsystem/angular-headless';
-
-/**
- * Resolve a size slug to its display label: each hyphen-separated word
- * title-cased, so a slug like "x-large" renders as "X Large". Mirrors
- * `themeName` in theme-picker and `localeName` in locale-picker.
- */
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, TemplateRef, computed, contentChild, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { IconButton, Listbox } from "@lilydesignsystem/angular-headless";
 function sizeName(size) {
-    return size
-        .split("-")
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(" ");
+	return size.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }
 let uid = 0;
-/** Stable per-instance id prefix; SSR-safe (no Math.random / Date.now). */
 function nextTextSizePickerId() {
-    uid += 1;
-    return `text-size-picker-${uid}`;
-}
-/**
- * Optional marker for the projected icon template. Gives consumers typed
- * `let-` variables:
- *
- * ```html
- * <lily-text-size-picker ...>
- *   <ng-template lilyTextSizePickerIcon let-args>{{ args.labelFor(args.value) }}</ng-template>
- * </lily-text-size-picker>
- * ```
- *
- * The component queries any projected `<ng-template>`, so the marker is
- * for type-checking and readability, not for matching.
- */
-class TextSizePickerIcon {
-    static ngTemplateContextGuard(_dir, _ctx) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TextSizePickerIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: TextSizePickerIcon, isStandalone: true, selector: "ng-template[lilyTextSizePickerIcon]", ngImport: i0 }); }
+	uid += 1;
+	return `text-size-picker-${uid}`;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TextSizePickerIcon, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "ng-template[lilyTextSizePickerIcon]",
-                    standalone: true,
-                }]
-        }] });
-/**
- * TextSizePicker — `data-text-size` text-size picker.
- *
- * Renders an icon button that opens a WAI-ARIA APG listbox of sizes. On
- * every size change the component sets `data-text-size="{slug}"` on the
- * document root (or on a consumer-supplied target), with optional
- * `localStorage` persistence. Ships no CSS; the consumer maps each
- * `[data-text-size="…"]` slug to real typography. See `spec/index.md`
- * for the full contract.
- */
-class TextSizePicker {
-    constructor() {
-        this.label = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        this.sizes = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
-        this.value = model("", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.defaultValue = input("", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
-        this.storageKey = input("", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []));
-        this.name = input("text-size", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-        this.target = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
-        this.sizeLabels = input({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "sizeLabels" }] : /* istanbul ignore next */ []));
-        this.className = input("", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-        this.sizeChange = output();
-        /** Projected icon template; replaces the default icon when supplied. */
-        this.iconTemplate = contentChild(TemplateRef, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
-        this.rootRef = viewChild.required("rootEl", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "rootRef" }] : /* istanbul ignore next */ []));
-        // Angular resolves a template-ref-variable on a component tag to the
-        // component INSTANCE by default (not its ElementRef) — exactly what's
-        // needed to call the headless components' own public `focus()` methods.
-        this.buttonRef = viewChild.required("buttonEl", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []));
-        this.listRef = viewChild.required("listEl", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
-        this.baseId = nextTextSizePickerId();
-        this.listId = `${this.baseId}-list`;
-        this.open = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-        this.activeIndex = signal(-1, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-        this.childContext = computed(() => {
-            const args = {
-                value: this.value(),
-                open: this.open(),
-                labelFor: (size) => this.labelFor(size),
-            };
-            return { $implicit: args, ...args };
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "childContext" }] : /* istanbul ignore next */ []));
-        this.initialised = false;
-        // ---------------------------------------------------------------
-        // Open / close
-        // ---------------------------------------------------------------
-        /** Under zoneless change detection the signal write that un-hides the
-         * list has not reached the DOM when a microtask runs, so focusing the
-         * still-hidden list fails silently and Escape lands on the button.
-         * Flushing detection first is the Angular equivalent of Svelte's
-         * synchronous update (same fix the date-time-picker port recorded). */
-        this.cdr = inject(ChangeDetectorRef);
-        // Arrow/Home/End/PageUp/PageDown/typeahead/Escape/Tab keyboard handling
-        // inside the open list is owned by the composed `lily-listbox`'s
-        // `navigation="active-descendant"` mode (see
-        // @lilydesignsystem/angular-headless); this component only decides
-        // what open/close/choose/scroll mean, and keeps the highlighted option
-        // in view whenever activeIndex changes.
-        this.scrollOnActiveIndexChange = effect(() => {
-            this.activeIndex();
-            this.scrollActiveIntoView();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "scrollOnActiveIndexChange" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const current = this.value();
-            if (!this.initialised) {
-                this.initialised = true;
-                let initial = current;
-                const sk = this.storageKey();
-                if (!initial && sk) {
-                    try {
-                        initial =
-                            (typeof localStorage !== "undefined"
-                                ? localStorage.getItem(sk)
-                                : null) ?? "";
-                    }
-                    catch {
-                        // ignore privacy errors
-                    }
-                }
-                if (!initial) {
-                    const sizes = this.sizes();
-                    const dv = this.defaultValue();
-                    initial =
-                        dv || (sizes.includes("medium") ? "medium" : sizes[0]) || "";
-                }
-                if (initial && initial !== current) {
-                    this.value.set(initial);
-                    return;
-                }
-            }
-            if (current)
-                this.applySize(current);
-        });
-    }
-    optionId(index) {
-        return `${this.baseId}-option-${index}`;
-    }
-    labelFor(size) {
-        const labels = this.sizeLabels();
-        if (size in labels)
-            return labels[size];
-        return sizeName(size);
-    }
-    toggle() {
-        if (this.open())
-            this.closeList();
-        else
-            this.openList();
-    }
-    /** Open the listbox, activating `startIndex` (default: the selection). */
-    openList(startIndex) {
-        const selected = this.sizes().indexOf(this.value());
-        // An empty list has no option to activate; -1 keeps
-        // aria-activedescendant off rather than pointing at an id that
-        // does not exist.
-        this.activeIndex.set(this.sizes().length === 0
-            ? -1
-            : (startIndex ?? (selected >= 0 ? selected : 0)));
-        this.open.set(true);
-        // Focus moves to the listbox; the active option is conveyed via
-        // aria-activedescendant, per the APG listbox pattern.
-        this.cdr.detectChanges();
-        queueMicrotask(() => {
-            this.listRef().focus({ preventScroll: true });
-            this.scrollActiveIntoView();
-        });
-    }
-    /** Close the listbox; `refocus` returns focus to the button. */
-    closeList(refocus = true) {
-        if (!this.open())
-            return;
-        this.open.set(false);
-        this.activeIndex.set(-1);
-        if (refocus)
-            queueMicrotask(() => this.buttonRef().focus({ preventScroll: true }));
-    }
-    choose(index) {
-        const slug = this.sizes()[index];
-        if (slug)
-            this.value.set(slug);
-        this.closeList();
-    }
-    scrollActiveIntoView() {
-        const i = this.activeIndex();
-        if (i < 0)
-            return;
-        // getElementById rather than reaching into the composed Listbox's
-        // DOM: Listbox exposes behaviour (focus()) and state (activeIndex),
-        // not its rendered children, the same "consumer owns the option
-        // elements" division of responsibility the headless component
-        // documents for itself.
-        const el = document.getElementById(this.optionId(i));
-        // jsdom does not implement scrollIntoView; call it only if present.
-        el?.scrollIntoView?.({ block: "nearest" });
-    }
-    // ---------------------------------------------------------------
-    // Keyboard
-    // ---------------------------------------------------------------
-    onButtonKeydown(event) {
-        switch (event.key) {
-            case "ArrowDown":
-            case "Enter":
-            case " ":
-                event.preventDefault();
-                this.openList();
-                break;
-            case "ArrowUp":
-                event.preventDefault();
-                this.openList(this.sizes().length - 1);
-                break;
-        }
-    }
-    /** `lily-listbox` Tab handling never prevents the key — focus goes to
-     * the button FIRST so the browser's default Tab move computes from
-     * the picker's position rather than from <body> (hiding the focused
-     * list drops focus there, and the browser would otherwise compute the
-     * default Tab move from the top of the document). */
-    onListTabOut() {
-        this.buttonRef().focus({ preventScroll: true });
-        this.closeList(false);
-    }
-    onRootFocusOut(event) {
-        const next = event.relatedTarget;
-        if (next && this.rootRef().nativeElement.contains(next))
-            return;
-        this.closeList(false);
-    }
-    onDocumentClick(event) {
-        if (!this.open())
-            return;
-        const t = event.target;
-        if (t && !this.rootRef().nativeElement.contains(t))
-            this.closeList(false);
-    }
-    // ---------------------------------------------------------------
-    // Apply
-    // ---------------------------------------------------------------
-    applySize(slug) {
-        if (typeof document === "undefined" || !slug)
-            return;
-        (this.target() ?? document.documentElement).setAttribute("data-text-size", slug);
-        const sk = this.storageKey();
-        if (sk) {
-            try {
-                localStorage.setItem(sk, slug);
-            }
-            catch {
-                // ignore quota / privacy errors
-            }
-        }
-        this.sizeChange.emit(slug);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TextSizePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: TextSizePicker, isStandalone: true, selector: "lily-text-size-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, sizeLabels: { classPropertyName: "sizeLabels", publicName: "sizeLabels", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", sizeChange: "sizeChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["rootEl"], descendants: true, isSignal: true }, { propertyName: "buttonRef", first: true, predicate: ["buttonEl"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+var TextSizePickerIcon = class TextSizePickerIcon {
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: TextSizePickerIcon,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.1",
+			type: TextSizePickerIcon,
+			isStandalone: true,
+			selector: "ng-template[lilyTextSizePickerIcon]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: TextSizePickerIcon,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[lilyTextSizePickerIcon]",
+			standalone: true
+		}]
+	}]
+});
+var TextSizePicker = class TextSizePicker {
+	onTooltipButtonEnter() {
+		this.hoverButton.set(true);
+		this.dismissed.set(false);
+	}
+	onTooltipButtonFocusIn() {
+		try {
+			this.focusButton.set(this.buttonRef().element?.matches(":focus-visible") ?? false);
+		} catch {
+			this.focusButton.set(true);
+		}
+	}
+	onTooltipButtonFocusOut() {
+		this.focusButton.set(false);
+		this.dismissed.set(false);
+	}
+	onTooltipKeydown(event) {
+		if (event.key === "Escape" && this.tooltipVisible()) this.dismissed.set(true);
+	}
+	constructor() {
+		this.label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.sizes = input.required(...ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []);
+		this.value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.defaultValue = input("", ...ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []);
+		this.storageKey = input("", ...ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []);
+		this.name = input("text-size", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+		this.target = input(null, ...ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []);
+		this.sizeLabels = input({}, ...ngDevMode ? [{ debugName: "sizeLabels" }] : /* istanbul ignore next */ []);
+		this.className = input("", ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
+		this.sizeChange = output();
+		this.iconTemplate = contentChild(TemplateRef, ...ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []);
+		this.rootRef = viewChild.required("rootEl", ...ngDevMode ? [{ debugName: "rootRef" }] : /* istanbul ignore next */ []);
+		this.buttonRef = viewChild.required("buttonEl", ...ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []);
+		this.listRef = viewChild.required("listEl", ...ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []);
+		this.baseId = nextTextSizePickerId();
+		this.listId = `${this.baseId}-list`;
+		this.open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+		this.tooltipId = `${this.baseId}-tooltip`;
+		this.hoverButton = signal(false, ...ngDevMode ? [{ debugName: "hoverButton" }] : /* istanbul ignore next */ []);
+		this.hoverTooltip = signal(false, ...ngDevMode ? [{ debugName: "hoverTooltip" }] : /* istanbul ignore next */ []);
+		this.focusButton = signal(false, ...ngDevMode ? [{ debugName: "focusButton" }] : /* istanbul ignore next */ []);
+		this.dismissed = signal(false, ...ngDevMode ? [{ debugName: "dismissed" }] : /* istanbul ignore next */ []);
+		this.tooltipVisible = computed(() => !this.open() && !this.dismissed() && (this.hoverButton() || this.hoverTooltip() || this.focusButton()), ...ngDevMode ? [{ debugName: "tooltipVisible" }] : /* istanbul ignore next */ []);
+		this.tooltipEscapeListener = effect((onCleanup) => {
+			if (!this.tooltipVisible() || typeof document === "undefined") return;
+			const onKey = (event) => {
+				if (event.key === "Escape") this.dismissed.set(true);
+			};
+			document.addEventListener("keydown", onKey);
+			onCleanup(() => document.removeEventListener("keydown", onKey));
+		}, ...ngDevMode ? [{ debugName: "tooltipEscapeListener" }] : /* istanbul ignore next */ []);
+		this.activeIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+		this.childContext = computed(() => {
+			const args = {
+				value: this.value(),
+				open: this.open(),
+				labelFor: (size) => this.labelFor(size)
+			};
+			return {
+				$implicit: args,
+				...args
+			};
+		}, ...ngDevMode ? [{ debugName: "childContext" }] : /* istanbul ignore next */ []);
+		this.initialised = false;
+		this.cdr = inject(ChangeDetectorRef);
+		this.scrollOnActiveIndexChange = effect(() => {
+			this.activeIndex();
+			this.scrollActiveIntoView();
+		}, ...ngDevMode ? [{ debugName: "scrollOnActiveIndexChange" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const current = this.value();
+			if (!this.initialised) {
+				this.initialised = true;
+				let initial = current;
+				const sk = this.storageKey();
+				if (!initial && sk) try {
+					initial = (typeof localStorage !== "undefined" ? localStorage.getItem(sk) : null) ?? "";
+				} catch {}
+				if (!initial) {
+					const sizes = this.sizes();
+					initial = this.defaultValue() || (sizes.includes("medium") ? "medium" : sizes[0]) || "";
+				}
+				if (initial && initial !== current) {
+					this.value.set(initial);
+					return;
+				}
+			}
+			if (current) this.applySize(current);
+		});
+	}
+	optionId(index) {
+		return `${this.baseId}-option-${index}`;
+	}
+	labelFor(size) {
+		const labels = this.sizeLabels();
+		if (size in labels) return labels[size];
+		return sizeName(size);
+	}
+	toggle() {
+		if (this.open()) this.closeList();
+		else this.openList();
+	}
+	openList(startIndex) {
+		const selected = this.sizes().indexOf(this.value());
+		this.activeIndex.set(this.sizes().length === 0 ? -1 : startIndex ?? (selected >= 0 ? selected : 0));
+		this.open.set(true);
+		this.cdr.detectChanges();
+		queueMicrotask(() => {
+			this.listRef().focus({ preventScroll: true });
+			this.scrollActiveIntoView();
+		});
+	}
+	closeList(refocus = true) {
+		if (!this.open()) return;
+		this.open.set(false);
+		this.activeIndex.set(-1);
+		if (refocus) queueMicrotask(() => this.buttonRef().focus({ preventScroll: true }));
+	}
+	choose(index) {
+		const slug = this.sizes()[index];
+		if (slug) this.value.set(slug);
+		this.closeList();
+	}
+	scrollActiveIntoView() {
+		const i = this.activeIndex();
+		if (i < 0) return;
+		document.getElementById(this.optionId(i))?.scrollIntoView?.({ block: "nearest" });
+	}
+	onButtonKeydown(event) {
+		switch (event.key) {
+			case "ArrowDown":
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				this.openList();
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				this.openList(this.sizes().length - 1);
+		}
+	}
+	onListTabOut() {
+		this.buttonRef().focus({ preventScroll: true });
+		this.closeList(false);
+	}
+	onRootFocusOut(event) {
+		const next = event.relatedTarget;
+		if (next && this.rootRef().nativeElement.contains(next)) return;
+		this.closeList(false);
+	}
+	onDocumentClick(event) {
+		if (!this.open()) return;
+		const t = event.target;
+		if (t && !this.rootRef().nativeElement.contains(t)) this.closeList(false);
+	}
+	applySize(slug) {
+		if (typeof document === "undefined" || !slug) return;
+		(this.target() ?? document.documentElement).setAttribute("data-text-size", slug);
+		const sk = this.storageKey();
+		if (sk) try {
+			localStorage.setItem(sk, slug);
+		} catch {}
+		this.sizeChange.emit(slug);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: TextSizePicker,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.1",
+			type: TextSizePicker,
+			isStandalone: true,
+			selector: "lily-text-size-picker",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				sizes: {
+					classPropertyName: "sizes",
+					publicName: "sizes",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				defaultValue: {
+					classPropertyName: "defaultValue",
+					publicName: "defaultValue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				storageKey: {
+					classPropertyName: "storageKey",
+					publicName: "storageKey",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				name: {
+					classPropertyName: "name",
+					publicName: "name",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				target: {
+					classPropertyName: "target",
+					publicName: "target",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				sizeLabels: {
+					classPropertyName: "sizeLabels",
+					publicName: "sizeLabels",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				className: {
+					classPropertyName: "className",
+					publicName: "className",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				value: "valueChange",
+				sizeChange: "sizeChange"
+			},
+			host: { listeners: { "document:click": "onDocumentClick($event)" } },
+			queries: [{
+				propertyName: "iconTemplate",
+				first: true,
+				predicate: TemplateRef,
+				descendants: true,
+				isSignal: true
+			}],
+			viewQueries: [
+				{
+					propertyName: "rootRef",
+					first: true,
+					predicate: ["rootEl"],
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "buttonRef",
+					first: true,
+					predicate: ["buttonEl"],
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "listRef",
+					first: true,
+					predicate: ["listEl"],
+					descendants: true,
+					isSignal: true
+				}
+			],
+			ngImport: i0,
+			template: `
     <div
       #rootEl
       class="text-size-picker {{ className() }}"
@@ -292,8 +345,12 @@ class TextSizePicker {
         ariaHaspopup="listbox"
         [ariaExpanded]="open()"
         [ariaControls]="listId"
-        (click)="toggle()"
-        (keydown)="onButtonKeydown($event)"
+        (click)="toggle(); hoverButton.set(false)"
+        (mouseenter)="onTooltipButtonEnter()"
+        (mouseleave)="hoverButton.set(false)"
+        (focusin)="onTooltipButtonFocusIn()"
+        (focusout)="onTooltipButtonFocusOut()"
+        (keydown)="onButtonKeydown($event); onTooltipKeydown($event)"
       >
         @if (iconTemplate(); as tpl) {
           <ng-container
@@ -318,6 +375,18 @@ class TextSizePicker {
         }
       </lily-icon-button>
 
+      <!-- Purely visual: the same text is already the button's aria-label,
+           so it is not wired with aria-describedby (that would announce
+           the name twice). -->
+      <div
+        class="text-size-picker-tooltip"
+        role="tooltip"
+        [id]="tooltipId"
+        [attr.hidden]="tooltipVisible() ? null : ''"
+        (mouseenter)="hoverTooltip.set(true)"
+        (mouseleave)="hoverTooltip.set(false)"
+      >{{ label() }}</div>
+
       <lily-listbox
         #listEl
         [label]="label()"
@@ -347,19 +416,80 @@ class TextSizePicker {
         }
       </lily-listbox>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButton, selector: "lily-icon-button", inputs: ["label", "className", "baseClass", "ariaHaspopup", "ariaExpanded", "ariaControls", "tabIndex", "disabled"] }, { kind: "component", type: Listbox, selector: "lily-listbox", inputs: ["label", "className", "baseClass", "elementId", "hidden", "navigation", "clamp", "typeahead", "pageSize", "activeIndex"], outputs: ["activeIndexChange", "activate", "escape", "tabOut"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TextSizePicker, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "lily-text-size-picker",
-                    standalone: true,
-                    imports: [NgTemplateOutlet, IconButton, Listbox],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        "(document:click)": "onDocumentClick($event)",
-                    },
-                    template: `
+  `,
+			isInline: true,
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: IconButton,
+					selector: "lily-icon-button",
+					inputs: [
+						"label",
+						"className",
+						"baseClass",
+						"ariaHaspopup",
+						"ariaExpanded",
+						"ariaControls",
+						"tabIndex",
+						"disabled"
+					]
+				},
+				{
+					kind: "component",
+					type: Listbox,
+					selector: "lily-listbox",
+					inputs: [
+						"label",
+						"className",
+						"baseClass",
+						"elementId",
+						"hidden",
+						"navigation",
+						"clamp",
+						"typeahead",
+						"pageSize",
+						"activeIndex"
+					],
+					outputs: [
+						"activeIndexChange",
+						"activate",
+						"escape",
+						"tabOut"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: TextSizePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lily-text-size-picker",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				IconButton,
+				Listbox
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "(document:click)": "onDocumentClick($event)" },
+			template: `
     <div
       #rootEl
       class="text-size-picker {{ className() }}"
@@ -374,8 +504,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         ariaHaspopup="listbox"
         [ariaExpanded]="open()"
         [ariaControls]="listId"
-        (click)="toggle()"
-        (keydown)="onButtonKeydown($event)"
+        (click)="toggle(); hoverButton.set(false)"
+        (mouseenter)="onTooltipButtonEnter()"
+        (mouseleave)="hoverButton.set(false)"
+        (focusin)="onTooltipButtonFocusIn()"
+        (focusout)="onTooltipButtonFocusOut()"
+        (keydown)="onButtonKeydown($event); onTooltipKeydown($event)"
       >
         @if (iconTemplate(); as tpl) {
           <ng-container
@@ -400,6 +534,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }
       </lily-icon-button>
 
+      <!-- Purely visual: the same text is already the button's aria-label,
+           so it is not wired with aria-describedby (that would announce
+           the name twice). -->
+      <div
+        class="text-size-picker-tooltip"
+        role="tooltip"
+        [id]="tooltipId"
+        [attr.hidden]="tooltipVisible() ? null : ''"
+        (mouseenter)="hoverTooltip.set(true)"
+        (mouseleave)="hoverTooltip.set(false)"
+      >{{ label() }}</div>
+
       <lily-listbox
         #listEl
         [label]="label()"
@@ -429,13 +575,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         }
       </lily-listbox>
     </div>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], sizeLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeLabels", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], rootRef: [{ type: i0.ViewChild, args: ["rootEl", { isSignal: true }] }], buttonRef: [{ type: i0.ViewChild, args: ["buttonEl", { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ["listEl", { isSignal: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		sizes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sizes",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		defaultValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultValue",
+				required: false
+			}]
+		}],
+		storageKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "storageKey",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		target: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "target",
+				required: false
+			}]
+		}],
+		sizeLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sizeLabels",
+				required: false
+			}]
+		}],
+		className: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "className",
+				required: false
+			}]
+		}],
+		sizeChange: [{
+			type: i0.Output,
+			args: ["sizeChange"]
+		}],
+		iconTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => TemplateRef), { isSignal: true }]
+		}],
+		rootRef: [{
+			type: i0.ViewChild,
+			args: ["rootEl", { isSignal: true }]
+		}],
+		buttonRef: [{
+			type: i0.ViewChild,
+			args: ["buttonEl", { isSignal: true }]
+		}],
+		listRef: [{
+			type: i0.ViewChild,
+			args: ["listEl", { isSignal: true }]
+		}]
+	}
+});
 export { TextSizePicker, TextSizePickerIcon, nextTextSizePickerId, sizeName };
-//# sourceMappingURL=lilydesignsystem-angular-text-size-picker.mjs.map
+
+//# sourceMappingURL=lilydesignsystem-angular-text-size-picker.mjs.map