@lilydesignsystem/web-components-theme-picker 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -77,6 +77,8 @@ declare function nextThemePickerId(): string;
 declare class ThemePicker extends HTMLElement {
     #private;
     static get observedAttributes(): string[];
+    /** id of the rendered `<div class="theme-picker-tooltip">`. */
+    get tooltipId(): string;
     get label(): string;
     set label(v: string);
     get themesUrl(): string;

package/dist/index.js

@@ -59,6 +59,59 @@ var ThemePicker = class extends HTMLElement {
   #activeIndex = -1;
   // Stable ids for the button/listbox aria wiring.
   #baseId = nextThemePickerId();
+  // Tooltip: shown while the pointer is over the button or the tooltip
+  // itself (hoverable, WCAG 1.4.13) or while the button has keyboard
+  // focus; Escape dismisses it without moving focus; never shown while
+  // the popup is open, since the popup then explains the control.
+  #tooltipEl = null;
+  #hoverButton = false;
+  #hoverTooltip = false;
+  #focusButton = false;
+  #tipDismissed = false;
+  // Escape anywhere dismisses a visible tooltip (WCAG 1.4.13: dismissable
+  // without moving pointer or focus), so a hover-only tooltip (focus
+  // elsewhere) still closes. The document listener exists only while
+  // the tooltip is visible; it neither prevents default nor stops
+  // propagation, and never moves focus.
+  #tipDocListening = false;
+  #onTipDocKeydown = (event) => {
+    if (event.key === "Escape" && this.#tooltipVisible()) {
+      this.#tipDismissed = true;
+      this.#syncTooltip();
+    }
+  };
+  #setTipDocListener(on) {
+    if (on === this.#tipDocListening || typeof document === "undefined") return;
+    this.#tipDocListening = on;
+    if (on) document.addEventListener("keydown", this.#onTipDocKeydown);
+    else document.removeEventListener("keydown", this.#onTipDocKeydown);
+  }
+  #tooltipVisible() {
+    return !this.#open && !this.#tipDismissed && (this.#hoverButton || this.#hoverTooltip || this.#focusButton);
+  }
+  /** Write the tooltip's text and `hidden` in place; idempotent. */
+  #syncTooltip() {
+    const el = this.#tooltipEl;
+    if (!el) return;
+    if (el.textContent !== this.label) el.textContent = this.label;
+    const hide = !this.#tooltipVisible();
+    this.#setTipDocListener(!hide);
+    if (el.hasAttribute("hidden") !== hide) {
+      if (hide) el.setAttribute("hidden", "");
+      else el.removeAttribute("hidden");
+    }
+  }
+  #resetTooltip() {
+    this.#setTipDocListener(false);
+    this.#hoverButton = false;
+    this.#hoverTooltip = false;
+    this.#focusButton = false;
+    this.#tipDismissed = false;
+  }
+  /** id of the rendered `<div class="theme-picker-tooltip">`. */
+  get tooltipId() {
+    return `${this.#baseId}-tooltip`;
+  }
   // Typeahead buffer: APG listbox behaviour. Reset after a pause.
   #typeahead = "";
   #typeaheadTimer;
@@ -256,6 +309,7 @@ var ThemePicker = class extends HTMLElement {
     }
   }
   disconnectedCallback() {
+    this.#resetTooltip();
     document.removeEventListener("click", this.#onDocumentClick);
     clearTimeout(this.#typeaheadTimer);
     this.#appliedValue = "";
@@ -465,6 +519,7 @@ var ThemePicker = class extends HTMLElement {
    */
   #syncState() {
     if (!this.#rootEl) return;
+    this.#syncTooltip();
     const value = this.value;
     if (this.#inputEl) this.#inputEl.value = value;
     if (this.#buttonEl) {
@@ -515,6 +570,55 @@ var ThemePicker = class extends HTMLElement {
     });
     iconButtonHost.addEventListener("keydown", this.#onButtonKeydown);
     root.appendChild(iconButtonHost);
+    this.#resetTooltip();
+    const tooltip = document.createElement("div");
+    tooltip.className = "theme-picker-tooltip";
+    tooltip.setAttribute("role", "tooltip");
+    tooltip.id = this.tooltipId;
+    tooltip.setAttribute("hidden", "");
+    tooltip.textContent = this.label;
+    tooltip.addEventListener("mouseenter", () => {
+      this.#hoverTooltip = true;
+      this.#syncTooltip();
+    });
+    tooltip.addEventListener("mouseleave", () => {
+      this.#hoverTooltip = false;
+      this.#syncTooltip();
+    });
+    this.#tooltipEl = tooltip;
+    iconButtonHost.addEventListener("mouseenter", () => {
+      this.#hoverButton = true;
+      this.#tipDismissed = false;
+      this.#syncTooltip();
+    });
+    iconButtonHost.addEventListener("mouseleave", () => {
+      this.#hoverButton = false;
+      this.#syncTooltip();
+    });
+    iconButtonHost.addEventListener("click", () => {
+      this.#hoverButton = false;
+      this.#syncTooltip();
+    });
+    iconButtonHost.addEventListener("focusin", () => {
+      try {
+        this.#focusButton = this.#buttonEl?.matches(":focus-visible") ?? false;
+      } catch {
+        this.#focusButton = true;
+      }
+      this.#syncTooltip();
+    });
+    iconButtonHost.addEventListener("focusout", () => {
+      this.#focusButton = false;
+      this.#tipDismissed = false;
+      this.#syncTooltip();
+    });
+    iconButtonHost.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && this.#tooltipVisible()) {
+        this.#tipDismissed = true;
+        this.#syncTooltip();
+      }
+    });
+    root.appendChild(tooltip);
     const list = document.createElement("ul");
     list.className = "theme-picker-list";
     list.id = this.listId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lilydesignsystem/web-components-theme-picker",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "engines": {
     "node": "=26"
   },