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

package/dist/index.d.ts

@@ -7,7 +7,14 @@
  *
  * The control is an icon button that opens a dropdown listbox
  * (WAI-ARIA APG listbox pattern). It is not a native `<select>`.
+ *
+ * Depends on `@lilydesignsystem/web-components-headless`'s
+ * `<lily-icon-button>` for the trigger button, composed in `#render()`
+ * rather than hand-rolled. Imported here (not only from `index.ts`) so
+ * `lily-icon-button` is registered regardless of which module a
+ * consumer (or this package's own tests) imports first.
  */
+
 /**
  * Default button icon: a bundled SVG (contrast/half-circle), not a
  * Unicode character. Reversed 2026-09-16 from the font-dependent-glyph

package/dist/index.js

@@ -1,4 +1,8 @@
+// lily-design-system-web-components-theme-picker/index.ts
+import "@lilydesignsystem/web-components-headless";
+
 // lily-design-system-web-components-theme-picker/theme-picker.ts
+import "@lilydesignsystem/web-components-headless";
 var SVG_NS = "http://www.w3.org/2000/svg";
 function themeName(theme) {
   return theme.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
@@ -45,6 +49,8 @@ var ThemePicker = class extends HTMLElement {
   // Rendered-DOM references. Null until #render() has run.
   #rootEl = null;
   #inputEl = null;
+  // The real <button>, nested one level inside the composed
+  // <lily-icon-button> host (see #render()) — not #rootEl's direct child.
   #buttonEl = null;
   #listEl = null;
   #optionEls = [];
@@ -496,20 +502,19 @@ var ThemePicker = class extends HTMLElement {
     input.name = this.name;
     input.value = this.value;
     root.appendChild(input);
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = "theme-picker-button";
-    button.setAttribute("aria-label", this.label);
-    button.setAttribute("aria-haspopup", "listbox");
-    button.setAttribute("aria-expanded", "false");
-    button.setAttribute("aria-controls", this.listId);
-    button.appendChild(this.renderButtonContent());
-    button.addEventListener("click", () => {
+    const iconButtonHost = document.createElement("lily-icon-button");
+    iconButtonHost.setAttribute("base-class", "theme-picker-button");
+    iconButtonHost.setAttribute("label", this.label);
+    iconButtonHost.setAttribute("aria-haspopup", "listbox");
+    iconButtonHost.setAttribute("aria-expanded", "false");
+    iconButtonHost.setAttribute("aria-controls", this.listId);
+    iconButtonHost.appendChild(this.renderButtonContent());
+    iconButtonHost.addEventListener("click", () => {
       if (this.#open) this.closeList();
       else this.openList();
     });
-    button.addEventListener("keydown", this.#onButtonKeydown);
-    root.appendChild(button);
+    iconButtonHost.addEventListener("keydown", this.#onButtonKeydown);
+    root.appendChild(iconButtonHost);
     const list = document.createElement("ul");
     list.className = "theme-picker-list";
     list.id = this.listId;
@@ -533,10 +538,10 @@ var ThemePicker = class extends HTMLElement {
     root.appendChild(list);
     this.#rootEl = root;
     this.#inputEl = input;
-    this.#buttonEl = button;
     this.#listEl = list;
     this.#optionEls = optionEls;
     this.replaceChildren(root);
+    this.#buttonEl = iconButtonHost.querySelector("button");
   }
 };
 function parseCsv(s) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lilydesignsystem/web-components-theme-picker",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "engines": {
     "node": "=26"
   },
@@ -23,6 +23,9 @@
   "scripts": {
     "prepublishOnly": "cd .. && npm run build"
   },
+  "dependencies": {
+    "@lilydesignsystem/web-components-headless": "^0.1.0"
+  },
   "keywords": [
     "lily",
     "design",