@wpmoo/ui 1.0.0-rc.8 → 1.0.0

package/dist/js/combobox.js

@@ -1,20 +1,18 @@
 /*!
- * Moo UI combobox.js v1.0.0-rc.8 (https://ui.wpmoo.org/)
- * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Moo UI combobox.js v1.0.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
-const instances = new WeakMap();
-const normalize = (value) => value.trim().toLowerCase();
 
-export default class Combobox {
+const instances = /* @__PURE__ */ new WeakMap();
+const normalize = (value) => value.trim().toLowerCase();
+class Combobox {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances.get(element) || null : null;
   }
-
   static getOrCreateInstance(element, config = {}) {
     return Combobox.getInstance(element) || new Combobox(element, config);
   }
-
   constructor(element, config = {}) {
     if (element?.nodeType !== 1 || !element.matches(".combobox")) {
       throw new TypeError("Combobox requires a .combobox root element.");
@@ -23,7 +21,6 @@ export default class Combobox {
     if (existing) {
       return existing;
     }
-
     this._element = element;
     this._document = element.ownerDocument;
     this._window = this._document.defaultView;
@@ -34,7 +31,6 @@ export default class Combobox {
     if (!this._input || !this._menu || this._options.length === 0) {
       throw new TypeError("Combobox requires an input, menu, and at least one option.");
     }
-
     this._isMultiple = element.dataset.comboboxMultiple === "true";
     this._hidden = this._isMultiple ? null : element.querySelector('input[type="hidden"]');
     this._chipValue = element.querySelector(".combobox-value");
@@ -47,7 +43,6 @@ export default class Combobox {
     this._listeners = [];
     this._generated = [];
     this._startsOpen = this._menu.classList.contains("show");
-
     this._empty = this._menu.querySelector("[data-combobox-empty]");
     if (!this._empty) {
       this._empty = this._document.createElement("li");
@@ -58,7 +53,6 @@ export default class Combobox {
       this._menu.appendChild(this._empty);
       this._generated.push(this._empty);
     }
-
     this._liveRegion = element.querySelector("[data-combobox-live]");
     if (!this._liveRegion) {
       this._liveRegion = this._document.createElement("span");
@@ -68,12 +62,10 @@ export default class Combobox {
       element.appendChild(this._liveRegion);
       this._generated.push(this._liveRegion);
     }
-
     instances.set(element, this);
     this._bindEvents();
     this._toggleClear(
-      this._input.dataset.comboboxSelected === "true" ||
-        element.dataset.comboboxSelected === "true"
+      this._input.dataset.comboboxSelected === "true" || element.dataset.comboboxSelected === "true"
     );
     this._syncMultipleValue();
     this._filterOptions({ open: this._startsOpen, activate: this._startsOpen });
@@ -81,7 +73,6 @@ export default class Combobox {
       this._closeMenu(false);
     }
   }
-
   dispose() {
     this._listeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
@@ -94,34 +85,29 @@ export default class Combobox {
     this._valueStore?.querySelectorAll("[data-combobox-generated]").forEach((item) => item.remove());
     instances.delete(this._element);
   }
-
   _listen(target, type, handler, options) {
     target?.addEventListener(type, handler, options);
     if (target) {
       this._listeners.push({ target, type, handler, options });
     }
   }
-
   _trigger(name, detail = {}) {
     return this._element.dispatchEvent(
       new this._window.CustomEvent(`${name}.moo.combobox`, {
         bubbles: true,
         cancelable: name === "show" || name === "hide",
-        detail,
+        detail
       })
     );
   }
-
   _optionGroupIsHidden(option) {
     return option.closest("[data-combobox-group]")?.hidden || false;
   }
-
   _visibleOptions() {
     return this._options.filter(
       (option) => !option.hidden && !option.disabled && !this._optionGroupIsHidden(option)
     );
   }
-
   _syncGroupVisibility() {
     if (this._groups.length === 0) {
       return;
@@ -138,7 +124,6 @@ export default class Combobox {
       separator.hidden = visibleGroupCount < 2;
     });
   }
-
   _openMenu(emit = true) {
     if (this._menu.classList.contains("show")) {
       this._input.setAttribute("aria-expanded", "true");
@@ -153,7 +138,6 @@ export default class Combobox {
       this._trigger("shown");
     }
   }
-
   _closeMenu(emit = true) {
     const wasOpen = this._menu.classList.contains("show");
     if (wasOpen && emit && !this._trigger("hide")) {
@@ -170,15 +154,12 @@ export default class Combobox {
       this._trigger("hidden");
     }
   }
-
   _optionLabel(option) {
     return option?.querySelector(".combobox-option__label")?.textContent?.trim() || "";
   }
-
   _selectedOptions() {
     return this._options.filter((option) => option.getAttribute("aria-selected") === "true");
   }
-
   _toggleClear(selected) {
     const value = selected ? "true" : "false";
     this._element.dataset.comboboxSelected = value;
@@ -190,7 +171,6 @@ export default class Combobox {
       }
     }
   }
-
   _createChip(option) {
     const value = option.dataset.value || "";
     const label = this._optionLabel(option);
@@ -212,7 +192,6 @@ export default class Combobox {
     chip.appendChild(remove);
     return chip;
   }
-
   _syncMultipleValue() {
     if (!this._isMultiple) {
       return;
@@ -235,14 +214,12 @@ export default class Combobox {
     }
     this._toggleClear(selected.length > 0);
   }
-
   _emitChange() {
     const selected = this._selectedOptions();
     this._trigger("change", {
-      values: selected.map((option) => option.dataset.value || ""),
+      values: selected.map((option) => option.dataset.value || "")
     });
   }
-
   _removeChip(value) {
     const option = this._options.find((candidate) => candidate.dataset.value === value);
     if (!option) {
@@ -252,7 +229,6 @@ export default class Combobox {
     this._syncMultipleValue();
     this._emitChange();
   }
-
   _clearSelection(emit = true) {
     if (this._hidden) {
       this._hidden.value = "";
@@ -267,7 +243,6 @@ export default class Combobox {
       this._emitChange();
     }
   }
-
   _clearStaleSelection() {
     if (this._isMultiple) {
       this._input.value = "";
@@ -280,13 +255,12 @@ export default class Combobox {
     }
     const selected = this._selectedOptions()[0] || null;
     const label = this._optionLabel(selected);
-    if (!this._input.value || (label && normalize(this._input.value) === normalize(label))) {
+    if (!this._input.value || label && normalize(this._input.value) === normalize(label)) {
       return;
     }
     this._clearSelection();
     this._input.value = "";
   }
-
   _activeOption() {
     const activeId = this._input.getAttribute("aria-activedescendant");
     if (!activeId) {
@@ -294,28 +268,22 @@ export default class Combobox {
     }
     return this._visibleOptions().find((option) => option.id === activeId) || null;
   }
-
   _selectedOption() {
     if (this._isMultiple) {
       return null;
     }
-    return (
-      this._visibleOptions().find(
-        (option) => option.getAttribute("aria-selected") === "true"
-      ) || null
-    );
+    return this._visibleOptions().find(
+      (option) => option.getAttribute("aria-selected") === "true"
+    ) || null;
   }
-
   _preferredActiveOption() {
     return this._selectedOption() || this._visibleOptions()[0] || null;
   }
-
   _activatePreferredOptionIfNeeded() {
     if (!this._activeOption()) {
       this._setActiveOption(this._preferredActiveOption());
     }
   }
-
   _setActiveOption(option, { scroll = true } = {}) {
     this._options.forEach((candidate) => {
       const active = candidate === option;
@@ -341,19 +309,12 @@ export default class Combobox {
       }
     }
   }
-
   _activateOptionFromPointer(option, event) {
-    if (
-      event.pointerType === "touch" ||
-      option.disabled ||
-      option.getAttribute("aria-disabled") === "true" ||
-      option === this._activeOption()
-    ) {
+    if (event.pointerType === "touch" || option.disabled || option.getAttribute("aria-disabled") === "true" || option === this._activeOption()) {
       return;
     }
     this._setActiveOption(option, { scroll: false });
   }
-
   _restoreSelectedActiveOption() {
     if (!this._menu.classList.contains("show")) {
       return;
@@ -363,7 +324,6 @@ export default class Combobox {
       this._setActiveOption(selected, { scroll: false });
     }
   }
-
   _chooseOption(option) {
     if (!option || option.disabled) {
       return;
@@ -391,7 +351,6 @@ export default class Combobox {
     this._setActiveOption(option);
     this._emitChange();
   }
-
   _filterOptions({ open = true, activate = true, resetActive = false } = {}) {
     if (open) {
       this._openMenu();
@@ -413,7 +372,6 @@ export default class Combobox {
       this._activatePreferredOptionIfNeeded();
     }
   }
-
   _bindEvents() {
     this._listen(this._input, "focus", () => {
       this._openMenu();
@@ -469,25 +427,17 @@ export default class Combobox {
       }
     });
   }
-
   _handleRootClick(event) {
     const target = event.target;
-    const trigger = target instanceof this._window.Element
-      ? target.closest("[data-combobox-chip-remove]")
-      : null;
+    const trigger = target instanceof this._window.Element ? target.closest("[data-combobox-chip-remove]") : null;
     if (trigger) {
       event.preventDefault();
       this._removeChip(trigger.dataset.value || "");
       this._input.focus();
-    } else if (
-      this._isMultiple &&
-      target instanceof this._window.Element &&
-      target.closest(".combobox-chips")
-    ) {
+    } else if (this._isMultiple && target instanceof this._window.Element && target.closest(".combobox-chips")) {
       this._input.focus();
     }
   }
-
   _handleKeydown(event) {
     const available = this._visibleOptions();
     const current = available.findIndex(
@@ -528,3 +478,6 @@ export default class Combobox {
     }
   }
 }
+export {
+  Combobox as default
+};

package/dist/js/context-menu.js

@@ -1,19 +1,17 @@
 /*!
- * Moo UI context-menu.js v1.0.0-rc.8 (https://ui.wpmoo.org/)
- * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Moo UI context-menu.js v1.0.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
-const instances = new WeakMap();
 
+const instances = /* @__PURE__ */ new WeakMap();
 function pointerRect(event) {
   const { clientX: x, clientY: y } = event;
   return { top: y, left: x, right: x, bottom: y, width: 0, height: 0, x, y };
 }
-
 function isDisabledTrigger(trigger) {
   return Boolean(trigger?.disabled || trigger?.getAttribute?.("aria-disabled") === "true");
 }
-
 function menuItemFromEvent(event) {
   const target = event.target;
   const item = target.closest?.(".dropdown-item");
@@ -22,16 +20,13 @@ function menuItemFromEvent(event) {
   }
   return target.closest?.("li")?.querySelector(":scope > .dropdown-item") || null;
 }
-
-export default class ContextMenu {
+class ContextMenu {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances.get(element) || null : null;
   }
-
   static getOrCreateInstance(element, config = {}) {
     return ContextMenu.getInstance(element) || new ContextMenu(element, config);
   }
-
   constructor(element, config = {}) {
     if (element?.nodeType !== 1 || !element.matches(".context-menu")) {
       throw new TypeError("ContextMenu requires a .context-menu root element.");
@@ -40,7 +35,6 @@ export default class ContextMenu {
     if (existing) {
       return existing;
     }
-
     this._element = element;
     this._document = element.ownerDocument;
     this._window = this._document.defaultView;
@@ -52,12 +46,10 @@ export default class ContextMenu {
     if (!this._fallback) {
       throw new TypeError("ContextMenu requires an explicit fallback trigger.");
     }
-
     const Dropdown = this._bootstrap("Dropdown");
     if (!Dropdown) {
       throw new TypeError("ContextMenu requires bootstrap.Dropdown (bootstrap.bundle.js).");
     }
-
     this._config = { ...config };
     this._listeners = [];
     this._invoker = null;
@@ -65,17 +57,15 @@ export default class ContextMenu {
     this._openMethod = null;
     this._reference = {
       getBoundingClientRect: () => this._currentRect(),
-      contextElement: this._fallback,
+      contextElement: this._fallback
     };
     this._dropdown = new Dropdown(this._fallback, {
       reference: this._reference,
-      autoClose: "outside",
+      autoClose: "outside"
     });
-
     instances.set(element, this);
     this._bindEvents();
   }
-
   dispose() {
     this._listeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
@@ -87,56 +77,46 @@ export default class ContextMenu {
     this._pointerRect = null;
     instances.delete(this._element);
   }
-
   show(anchor = this._fallback) {
     this._open(anchor, null);
   }
-
   hide() {
     this._dropdown.hide();
   }
-
   _listen(target, type, handler, options) {
     target.addEventListener(type, handler, options);
     this._listeners.push({ target, type, handler, options });
   }
-
   _bootstrap(name) {
     return this._window.bootstrap?.[name] || null;
   }
-
   _currentRect() {
     if (this._pointerRect) {
       return this._pointerRect;
     }
     return (this._invoker || this._fallback).getBoundingClientRect();
   }
-
   _trigger(name, cancelable = false) {
     return this._element.dispatchEvent(
       new this._window.CustomEvent(`${name}.moo.context-menu`, {
         bubbles: true,
-        cancelable,
+        cancelable
       })
     );
   }
-
   _triggers() {
     return Array.from(this._element.querySelectorAll(":scope > .context-menu-trigger"));
   }
-
   _syncExpanded(expanded) {
     this._triggers().forEach((trigger) => {
       trigger.setAttribute("aria-expanded", String(expanded));
     });
   }
-
   _menuItems() {
     return Array.from(this._menu.querySelectorAll(".dropdown-item")).filter(
       (item) => !isDisabledTrigger(item) && !item.classList.contains("disabled")
     );
   }
-
   _open(trigger, pointerEvent, openMethod) {
     if (isDisabledTrigger(trigger)) {
       return;
@@ -149,7 +129,6 @@ export default class ContextMenu {
     this._openMethod = openMethod;
     this._dropdown.show();
   }
-
   _handleContextMenu(event) {
     const trigger = event.target.closest(".context-menu-trigger");
     if (!trigger || !this._element.contains(trigger)) {
@@ -158,7 +137,6 @@ export default class ContextMenu {
     event.preventDefault();
     this._open(trigger, event, "pointer");
   }
-
   _handleKeydown(event) {
     const trigger = event.target.closest(".context-menu-trigger");
     if (!trigger || !this._element.contains(trigger)) {
@@ -172,13 +150,11 @@ export default class ContextMenu {
     event.preventDefault();
     this._open(trigger, null, "keyboard");
   }
-
   _handleFallbackClick() {
     this._invoker = this._fallback;
     this._pointerRect = null;
     this._openMethod = "pointer";
   }
-
   _handleFallbackKeydown(event) {
     if (event.key !== " " && event.key !== "Spacebar") {
       return;
@@ -191,38 +167,28 @@ export default class ContextMenu {
     }
     this._open(this._fallback, null, "fallback-keyboard");
   }
-
   _handleMenuClick(event) {
     const item = menuItemFromEvent(event);
     if (!item) {
       return;
     }
     const persistentItem = item.matches(".dropdown-item-check, [data-context-menu-persistent]");
-    const disabledItem =
-      item.matches('.dropdown-item.disabled, .dropdown-item[aria-disabled="true"], .dropdown-item:disabled') ||
-      isDisabledTrigger(item);
+    const disabledItem = item.matches('.dropdown-item.disabled, .dropdown-item[aria-disabled="true"], .dropdown-item:disabled') || isDisabledTrigger(item);
     if (disabledItem) {
       event.preventDefault();
       event.stopPropagation();
       return;
     }
-    // Radio-grouped toggle buttons reuse the dropdown_toggle_item() button
-    // Bootstrap's own roving arrow-key focus already picks up (it only ever
-    // matches real .dropdown-item elements); Moo adds only the missing
-    // mutual-exclusivity Bootstrap's independent button-toggle plugin does
-    // not provide.
     const radioButton = item.matches("[data-context-menu-radio-group]") ? item : null;
     if (radioButton) {
       event.preventDefault();
       event.stopPropagation();
       const group = radioButton.dataset.contextMenuRadioGroup;
-      this._menu
-        .querySelectorAll(`[data-context-menu-radio-group="${group}"]`)
-        .forEach((button) => {
-          const checked = button === radioButton;
-          button.classList.toggle("active", checked);
-          button.setAttribute("aria-pressed", String(checked));
-        });
+      this._menu.querySelectorAll(`[data-context-menu-radio-group="${group}"]`).forEach((button) => {
+        const checked = button === radioButton;
+        button.classList.toggle("active", checked);
+        button.setAttribute("aria-pressed", String(checked));
+      });
       return;
     }
     if (persistentItem) {
@@ -230,7 +196,6 @@ export default class ContextMenu {
     }
     this._dropdown.hide();
   }
-
   _bindEvents() {
     this._listen(this._element, "contextmenu", (event) => this._handleContextMenu(event));
     this._listen(this._element, "keydown", (event) => this._handleKeydown(event));
@@ -244,12 +209,6 @@ export default class ContextMenu {
     });
     this._listen(this._fallback, "shown.bs.dropdown", () => {
       this._syncExpanded(true);
-      // Bootstrap's own show() never focuses an item either -- only its
-      // Up/Down-key handler does, since a pointer-driven open (right-click,
-      // or a click on the fallback trigger) should let :hover carry the
-      // highlight instead of a focus ring competing with it. A keyboard-
-      // driven open (Shift+F10/ContextMenu key) still lands on the first
-      // item, matching that same native arrow-key-open convention.
       if (this._openMethod === "fallback-keyboard") {
         this._fallback.focus();
       } else if (this._openMethod === "keyboard") {
@@ -269,22 +228,8 @@ export default class ContextMenu {
       const invoker = this._invoker;
       this._pointerRect = null;
       this._invoker = null;
-      // A native Bootstrap click on the fallback trigger bypasses _open()
-      // entirely (Bootstrap's own capture-phase click-to-toggle handler
-      // calls show() directly), so _handleFallbackClick's bubble-phase
-      // "click" listener always runs too late to set _openMethod before
-      // shown.bs.dropdown reads it. Resetting it here, back to the neutral
-      // pointer default, is what keeps that path correct rather than
-      // inheriting whatever a prior keyboard-triggered open last set.
       this._openMethod = null;
       this._trigger("hidden");
-      // Bootstrap's own dataApiKeydownHandler (js/src/dropdown.js) intercepts
-      // Escape in the document capture phase and hardcodes
-      // `getToggleButton.focus()` (our fallback trigger) after hide().
-      // Nothing downstream of a capture-phase stopPropagation() can observe
-      // that keydown to redirect focus, so correct it in a microtask, which
-      // still runs before the next paint: if focus landed on the fallback
-      // but a different trigger invoked this menu, return focus there.
       queueMicrotask(() => {
         if (invoker && invoker !== this._fallback && this._document.activeElement === this._fallback) {
           invoker.focus();
@@ -293,3 +238,6 @@ export default class ContextMenu {
     });
   }
 }
+export {
+  ContextMenu as default
+};

package/dist/js/datatable.js

@@ -1,14 +1,15 @@
 /*!
- * Moo UI datatable.js v1.0.0-rc.8 (https://ui.wpmoo.org/)
- * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Moo UI datatable.js v1.0.0 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
+
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // src/js/theme-owner.js
 var OWNER_SELECTOR = '.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]';
-var PORTAL_SELECTOR = "[data-moo-overlay-portal-host]";
+var PORTAL_SELECTOR = "[data-moo-overlay-host]";
 function documentFor(node) {
   if (node?.nodeType === 9) return node;
   if (node?.ownerDocument) return node.ownerDocument;
@@ -137,12 +138,12 @@ var _DataTable = class _DataTable {
   // That keeps the menu out of the scroll wrapper's layout math, so Safari
   // cannot clip it at the rounded frame edge or shift the visible table
   // slice while Popper positions it against the viewport.
-  // Table and card views both wrap row actions in .table-row-actions, but
-  // .table-responsive only contains the table view; card triggers must be
-  // selected separately so both views get the same fixed Popper config.
+  // Public Dropdown compositions need the same behavior as the built-in
+  // row actions. Scope by row/card ownership so toolbar and sort menus keep
+  // their own lifecycle.
   _rowActionTriggers() {
     return this._element.querySelectorAll(
-      '.table-responsive .table-row-actions [data-bs-toggle="dropdown"], [data-datatable-card] .table-row-actions [data-bs-toggle="dropdown"]'
+      'tr[data-datatable-row] .dropdown [data-bs-toggle="dropdown"], [data-datatable-card] .dropdown [data-bs-toggle="dropdown"]'
     );
   }
   _initRowActionDropdowns() {
@@ -226,7 +227,7 @@ var _DataTable = class _DataTable {
     });
   }
   _rowActionMenuForTrigger(trigger) {
-    if (!trigger?.closest?.(".table-row-actions")) {
+    if (!trigger?.closest?.("tr[data-datatable-row], [data-datatable-card]")) {
       return null;
     }
     return trigger.closest(".dropdown")?.querySelector(":scope > .dropdown-menu") || null;
@@ -391,38 +392,54 @@ var _DataTable = class _DataTable {
       active.blur();
     }
   }
-  // responsive_mode="toggle" renders both the table and the card list and
-  // lets the reader pick between them (Odoo's List/Kanban switcher, not a
-  // developer-chosen breakpoint), so the choice belongs to the reader across
-  // visits, not just the current render.
+  // Auto mode remembers independent narrow/wide choices; toggle mode keeps
+  // its existing viewport-independent preference.
   _initViewToggle() {
     const toggles = Array.from(this._element.querySelectorAll(".datatable-view-toggle"));
     if (!toggles.length) {
       return;
     }
     const inputs = toggles.flatMap((toggle) => Array.from(toggle.querySelectorAll("input")));
-    const storageKey = `moo-datatable-view:${this._element.id}`;
+    const breakpoint = this._window.getComputedStyle(this._element).getPropertyValue("--moo-datatable-responsive-breakpoint").trim();
+    const auto = this._element.hasAttribute("data-datatable-responsive-breakpoint");
+    const media = auto && breakpoint ? this._window.matchMedia(`(min-width: ${breakpoint})`) : null;
+    const preferences = /* @__PURE__ */ new Map();
+    const storageKey = /* @__PURE__ */ __name(() => `moo-datatable-view:${this._element.id}${media ? media.matches ? ":wide" : ":narrow" : ""}`, "storageKey");
     const setView = /* @__PURE__ */ __name((value, { persist = false } = {}) => {
+      if (this._element.dataset.datatableView !== value) {
+        const Dropdown = this._bootstrap("Dropdown");
+        [...this._rowActionTriggers(), ...this._sortTriggers()].forEach((trigger) => {
+          Dropdown?.getInstance(trigger)?.hide();
+        });
+      }
       this._element.dataset.datatableView = value;
       inputs.forEach((input) => {
         input.checked = input.value === value;
       });
       if (persist) {
+        preferences.set(storageKey(), value);
         try {
-          this._window.localStorage.setItem(storageKey, value);
+          this._window.localStorage.setItem(storageKey(), value);
         } catch {
         }
       }
     }, "setView");
-    let stored = null;
-    try {
-      stored = this._window.localStorage.getItem(storageKey);
-    } catch {
-      stored = null;
-    }
-    if (stored === "table" || stored === "cards") {
-      setView(stored);
+    const restoreView = /* @__PURE__ */ __name(() => {
+      let stored = preferences.get(storageKey());
+      try {
+        stored ?? (stored = this._window.localStorage.getItem(storageKey()));
+      } catch {
+      }
+      setView(stored === "table" || stored === "cards" ? stored : media ? media.matches ? "table" : "cards" : this._element.dataset.datatableView);
+    }, "restoreView");
+    if (!auto || media) {
+      restoreView();
+    } else {
+      inputs.forEach((input) => {
+        input.checked = false;
+      });
     }
+    if (media) this._listen(media, "change", restoreView);
     toggles.forEach((toggle) => {
       this._listen(toggle, "change", (event) => {
         const value = event.target.value;