@lilydesignsystem/angular-motion-picker 0.1.2 → 0.3.0

package/fesm2022/lilydesignsystem-angular-motion-picker.mjs

@@ -1,310 +1,365 @@
-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 motion slug to its display label: each hyphen-separated
- * word title-cased, so a slug like "no-preference" renders as
- * "No Preference". Mirrors `sizeName` in text-size-picker and
- * `themeName` in theme-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 motionName(motion) {
-    return motion
-        .split("-")
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(" ");
+	return motion.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }
-/**
- * True when the platform reports a preference for reduced motion.
- * SSR-safe: `window`/`matchMedia` are absent on the server, so this
- * resolves to `false` there and the client re-derives it on mount.
- */
 function prefersReducedMotion() {
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-        return false;
-    }
-    try {
-        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    }
-    catch {
-        return false;
-    }
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+	try {
+		return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	} catch {
+		return false;
+	}
 }
 let uid = 0;
-/** Stable per-instance id prefix; SSR-safe (no Math.random / Date.now). */
 function nextMotionPickerId() {
-    uid += 1;
-    return `motion-picker-${uid}`;
-}
-/**
- * Optional marker for the projected icon template. Gives consumers typed
- * `let-` variables:
- *
- * ```html
- * <lily-motion-picker ...>
- *   <ng-template lilyMotionPickerIcon let-args>{{ args.labelFor(args.value) }}</ng-template>
- * </lily-motion-picker>
- * ```
- *
- * The component queries any projected `<ng-template>`, so the marker is
- * for type-checking and readability, not for matching.
- */
-class MotionPickerIcon {
-    static ngTemplateContextGuard(_dir, _ctx) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MotionPickerIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: MotionPickerIcon, isStandalone: true, selector: "ng-template[lilyMotionPickerIcon]", ngImport: i0 }); }
+	uid += 1;
+	return `motion-picker-${uid}`;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MotionPickerIcon, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: "ng-template[lilyMotionPickerIcon]",
-                    standalone: true,
-                }]
-        }] });
-/**
- * MotionPicker — `data-motion` reduced-motion picker.
- *
- * Renders an icon button that opens a WAI-ARIA APG listbox of motion
- * slugs. On every change the component sets `data-motion="{slug}"` on
- * the document root (or on a consumer-supplied target), with optional
- * `localStorage` persistence. Its initial value defers to the
- * platform's `(prefers-reduced-motion: reduce)` media query before
- * falling back to a fixed default — the one behaviour difference from
- * its `theme-picker`/`text-size-picker` siblings. Ships no CSS; the
- * consumer decides what `[data-motion="reduce"]` actually suppresses.
- * See `spec/index.md` for the full contract.
- */
-class MotionPicker {
-    constructor() {
-        this.label = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        this.motions = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "motions" }] : /* 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("motion", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-        this.target = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
-        this.motionLabels = input({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "motionLabels" }] : /* istanbul ignore next */ []));
-        this.className = input("", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
-        this.motionChange = 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 = nextMotionPickerId();
-        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: (motion) => this.labelFor(motion),
-            };
-            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) {
-                    // Unlike text-size-picker's "medium" default, motion has a
-                    // real external signal to defer to: the platform's own
-                    // (prefers-reduced-motion: reduce) media query.
-                    const motions = this.motions();
-                    const dv = this.defaultValue();
-                    const osPreferred = prefersReducedMotion() ? "reduce" : "no-preference";
-                    initial =
-                        dv ||
-                            (motions.includes(osPreferred) ? osPreferred : undefined) ||
-                            motions[0] ||
-                            "";
-                }
-                if (initial && initial !== current) {
-                    this.value.set(initial);
-                    return;
-                }
-            }
-            if (current)
-                this.applyMotion(current);
-        });
-    }
-    optionId(index) {
-        return `${this.baseId}-option-${index}`;
-    }
-    labelFor(motion) {
-        const labels = this.motionLabels();
-        if (motion in labels)
-            return labels[motion];
-        return motionName(motion);
-    }
-    toggle() {
-        if (this.open())
-            this.closeList();
-        else
-            this.openList();
-    }
-    /** Open the listbox, activating `startIndex` (default: the selection). */
-    openList(startIndex) {
-        const selected = this.motions().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.motions().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.motions()[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.motions().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
-    // ---------------------------------------------------------------
-    applyMotion(slug) {
-        if (typeof document === "undefined" || !slug)
-            return;
-        (this.target() ?? document.documentElement).setAttribute("data-motion", slug);
-        const sk = this.storageKey();
-        if (sk) {
-            try {
-                localStorage.setItem(sk, slug);
-            }
-            catch {
-                // ignore quota / privacy errors
-            }
-        }
-        this.motionChange.emit(slug);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: MotionPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: MotionPicker, isStandalone: true, selector: "lily-motion-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, motions: { classPropertyName: "motions", publicName: "motions", 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 }, motionLabels: { classPropertyName: "motionLabels", publicName: "motionLabels", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", motionChange: "motionChange" }, 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 MotionPickerIcon = class MotionPickerIcon {
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: MotionPickerIcon,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.1",
+			type: MotionPickerIcon,
+			isStandalone: true,
+			selector: "ng-template[lilyMotionPickerIcon]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: MotionPickerIcon,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[lilyMotionPickerIcon]",
+			standalone: true
+		}]
+	}]
+});
+var MotionPicker = class MotionPicker {
+	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.motions = input.required(...ngDevMode ? [{ debugName: "motions" }] : /* 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("motion", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+		this.target = input(null, ...ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []);
+		this.motionLabels = input({}, ...ngDevMode ? [{ debugName: "motionLabels" }] : /* istanbul ignore next */ []);
+		this.className = input("", ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
+		this.motionChange = 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 = nextMotionPickerId();
+		this.listId = `${this.baseId}-list`;
+		this.open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.closeWhenDisabled = effect(() => {
+			if (this.disabled() && this.open()) this.open.set(false);
+		}, ...ngDevMode ? [{ debugName: "closeWhenDisabled" }] : /* 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: (motion) => this.labelFor(motion)
+			};
+			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 motions = this.motions();
+					const dv = this.defaultValue();
+					const osPreferred = prefersReducedMotion() ? "reduce" : "no-preference";
+					initial = dv || (motions.includes(osPreferred) ? osPreferred : void 0) || motions[0] || "";
+				}
+				if (initial && initial !== current) {
+					this.value.set(initial);
+					return;
+				}
+			}
+			if (current) this.applyMotion(current);
+		});
+	}
+	optionId(index) {
+		return `${this.baseId}-option-${index}`;
+	}
+	labelFor(motion) {
+		const labels = this.motionLabels();
+		if (motion in labels) return labels[motion];
+		return motionName(motion);
+	}
+	toggle() {
+		if (this.open()) this.closeList();
+		else this.openList();
+	}
+	openList(startIndex) {
+		const selected = this.motions().indexOf(this.value());
+		this.activeIndex.set(this.motions().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.motions()[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.motions().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);
+	}
+	applyMotion(slug) {
+		if (typeof document === "undefined" || !slug) return;
+		(this.target() ?? document.documentElement).setAttribute("data-motion", slug);
+		const sk = this.storageKey();
+		if (sk) try {
+			localStorage.setItem(sk, slug);
+		} catch {}
+		this.motionChange.emit(slug);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: MotionPicker,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.1",
+			type: MotionPicker,
+			isStandalone: true,
+			selector: "lily-motion-picker",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				motions: {
+					classPropertyName: "motions",
+					publicName: "motions",
+					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
+				},
+				motionLabels: {
+					classPropertyName: "motionLabels",
+					publicName: "motionLabels",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				className: {
+					classPropertyName: "className",
+					publicName: "className",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				open: {
+					classPropertyName: "open",
+					publicName: "open",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				value: "valueChange",
+				motionChange: "motionChange",
+				open: "openChange"
+			},
+			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="motion-picker {{ className() }}"
@@ -313,14 +368,19 @@ class MotionPicker {
       <input type="hidden" [name]="name()" [value]="value()" />
 
       <lily-icon-button
+        [disabled]="disabled()"
         #buttonEl
         [label]="label()"
         baseClass="motion-picker-button"
         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
@@ -345,6 +405,18 @@ class MotionPicker {
         }
       </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="motion-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()"
@@ -374,19 +446,80 @@ class MotionPicker {
         }
       </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: MotionPicker, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "lily-motion-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: MotionPicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lily-motion-picker",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				IconButton,
+				Listbox
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "(document:click)": "onDocumentClick($event)" },
+			template: `
     <div
       #rootEl
       class="motion-picker {{ className() }}"
@@ -395,14 +528,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       <input type="hidden" [name]="name()" [value]="value()" />
 
       <lily-icon-button
+        [disabled]="disabled()"
         #buttonEl
         [label]="label()"
         baseClass="motion-picker-button"
         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
@@ -427,6 +565,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="motion-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()"
@@ -456,13 +606,127 @@ 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 }] }], motions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motions", 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 }] }], motionLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionLabels", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], motionChange: [{ type: i0.Output, args: ["motionChange"] }], 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
+			}]
+		}],
+		motions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "motions",
+				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
+			}]
+		}],
+		motionLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "motionLabels",
+				required: false
+			}]
+		}],
+		className: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "className",
+				required: false
+			}]
+		}],
+		motionChange: [{
+			type: i0.Output,
+			args: ["motionChange"]
+		}],
+		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 }]
+		}],
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
 export { MotionPicker, MotionPickerIcon, motionName, nextMotionPickerId, prefersReducedMotion };
-//# sourceMappingURL=lilydesignsystem-angular-motion-picker.mjs.map
+
+//# sourceMappingURL=lilydesignsystem-angular-motion-picker.mjs.map