@luzmo/lucero 1.0.1-alpha.14 → 1.0.1-alpha.16

package/components/{condition-attribute-with-id-Dv4lSRbe.js → slottable-request-event-CANixJnR.cjs}

@@ -15,17 +15,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-function c(t, s, r) {
-  const e = t.getAttribute(s);
-  let i = e ? e.split(/\s+/) : [];
-  i = i.filter((n) => !r.includes(n)), i.length > 0 ? t.setAttribute(s, i.join(" ")) : t.removeAttribute(s);
+"use strict";
+class SlottableRequestEvent extends Event {
+  constructor(name, data, key) {
+    super("slottable-request", {
+      bubbles: false,
+      cancelable: true,
+      composed: false
+    });
+    this.name = name;
+    this.data = data;
+    this.slotName = key === void 0 ? name : `${name}.${key}`;
+  }
 }
-function u(t, s, r) {
-  const e = Array.isArray(r) ? r : [r], i = t.getAttribute(s), n = i ? i.split(/\s+/) : [];
-  return e.every((o) => n.includes(o)) ? () => {
-  } : (n.push(...e), t.setAttribute(s, n.join(" ")), () => c(t, s, e));
-}
-export {
-  c as a,
-  u as c
-};
+const removeSlottableRequest = Symbol("remove-slottable-request");
+exports.SlottableRequestEvent = SlottableRequestEvent;
+exports.removeSlottableRequest = removeSlottableRequest;

package/components/{slottable-request-event-DggLA4Rx.js → slottable-request-event-D9WzrdWv.js}

@@ -15,17 +15,20 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-class o extends Event {
-  constructor(e, s, t) {
+class SlottableRequestEvent extends Event {
+  constructor(name, data, key) {
     super("slottable-request", {
-      bubbles: !1,
-      cancelable: !0,
-      composed: !1
-    }), this.name = e, this.data = s, this.slotName = t === void 0 ? e : `${e}.${t}`;
+      bubbles: false,
+      cancelable: true,
+      composed: false
+    });
+    this.name = name;
+    this.data = data;
+    this.slotName = key === void 0 ? name : `${name}.${key}`;
   }
 }
-const a = Symbol("remove-slottable-request");
+const removeSlottableRequest = Symbol("remove-slottable-request");
 export {
-  o as S,
-  a as r
+  SlottableRequestEvent as S,
+  removeSlottableRequest as r
 };

package/components/strategies-DlMlaSJR.cjs

@@ -0,0 +1,317 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";
+const platform = require("./platform-CxDar3Dn.cjs");
+const IS_MOBILE = "(max-width: 743px) and (hover: none) and (pointer: coarse)";
+class MatchMediaController {
+  constructor(host, query) {
+    this.key = Symbol("match-media-key");
+    this.matches = false;
+    this.host = host;
+    this.host.addController(this);
+    if (typeof window === "undefined") {
+      this.matches = false;
+    } else {
+      this.media = window.matchMedia(query);
+      this.matches = this.media.matches;
+    }
+    this.onChange = this.onChange.bind(this);
+    host.addController(this);
+  }
+  hostConnected() {
+    var _a;
+    (_a = this.media) == null ? void 0 : _a.addEventListener("change", this.onChange);
+  }
+  hostDisconnected() {
+    var _a;
+    (_a = this.media) == null ? void 0 : _a.removeEventListener("change", this.onChange);
+  }
+  onChange(event) {
+    if (this.matches === event.matches) {
+      return;
+    }
+    this.matches = event.matches;
+    this.host.requestUpdate(this.key, !this.matches);
+  }
+}
+var InteractionTypes = /* @__PURE__ */ ((InteractionTypes2) => {
+  InteractionTypes2[InteractionTypes2["desktop"] = 0] = "desktop";
+  InteractionTypes2[InteractionTypes2["mobile"] = 1] = "mobile";
+  return InteractionTypes2;
+})(InteractionTypes || {});
+const SAFARI_FOCUS_RING_CLASS = "remove-focus-ring-safari-hack";
+class InteractionController {
+  constructor(target, host) {
+    this.target = target;
+    this.host = host;
+    this.preventNextToggle = "no";
+    this.pointerdownState = false;
+    this.enterKeydownOn = null;
+    this._open = false;
+    this.target = target;
+    this.host = host;
+    this.host.addController(this);
+    this.init();
+  }
+  get activelyOpening() {
+    return false;
+  }
+  get open() {
+    return this._open;
+  }
+  /**
+   * Set `open`
+   */
+  set open(open) {
+    if (this._open === open) {
+      return;
+    }
+    this._open = open;
+    if (this.overlay) {
+      this.host.open = open;
+      return;
+    }
+    customElements.whenDefined("luzmo-overlay").then(async () => {
+      const { LuzmoOverlay: LuzmoOverlay2 } = await Promise.resolve().then(() => require("./overlay/index.cjs"));
+      this.overlay = new LuzmoOverlay2();
+      this.host.open = true;
+      this.host.requestUpdate();
+    });
+    Promise.resolve().then(() => require("./overlay/index.cjs"));
+  }
+  get overlay() {
+    return this._overlay;
+  }
+  set overlay(overlay) {
+    if (!overlay) {
+      return;
+    }
+    if (this.overlay === overlay) {
+      return;
+    }
+    this._overlay = overlay;
+    this.initOverlay();
+  }
+  releaseDescription() {
+  }
+  handleBeforetoggle(event) {
+    var _a, _b;
+    if (event.composedPath()[0] !== event.target) {
+      return;
+    }
+    if (event.newState === "closed") {
+      if (this.preventNextToggle === "no") {
+        this.open = false;
+      } else if (!this.pointerdownState) {
+        (_a = this.overlay) == null ? void 0 : _a.manuallyKeepOpen();
+      }
+    }
+    if (!this.open) {
+      this.host.optionsMenu.updateSelectedItemIndex();
+      if (
+        // pickers can have submenus, selects can not
+        typeof ((_b = this.host.optionsMenu) == null ? void 0 : _b.closeDescendentOverlays) === "function"
+      ) {
+        this.host.optionsMenu.closeDescendentOverlays();
+      }
+    }
+  }
+  initOverlay() {
+    if (this.overlay) {
+      this.overlay.addEventListener("beforetoggle", (event) => {
+        this.handleBeforetoggle(
+          event
+        );
+      });
+      this.overlay.type = this.host.isMobile.matches ? "modal" : "auto";
+      this.overlay.triggerElement = this.host;
+      this.overlay.placement = this.host.isMobile.matches ? void 0 : this.host.placement;
+      this.overlay.receivesFocus = "true";
+      this.overlay.willPreventClose = this.preventNextToggle !== "no" && this.open;
+      this.overlay.addEventListener(
+        "slottable-request",
+        this.host.handleSlottableRequest
+      );
+    }
+  }
+  handlePointerdown(_event) {
+  }
+  handleButtonFocus(event) {
+    if (this.preventNextToggle === "maybe" && event.relatedTarget === this.host.optionsMenu) {
+      this.preventNextToggle = "yes";
+    }
+  }
+  handleActivate(_event) {
+  }
+  /* c8 ignore next 3 */
+  init() {
+  }
+  abort() {
+    var _a;
+    this.releaseDescription();
+    (_a = this.abortController) == null ? void 0 : _a.abort();
+  }
+  hostConnected() {
+    this.init();
+  }
+  hostDisconnected() {
+    var _a;
+    (_a = this.abortController) == null ? void 0 : _a.abort();
+  }
+  hostUpdated() {
+    if (this.overlay && this.host.dependencyManager.loaded && this.host.open !== this.overlay.open) {
+      this.overlay.willPreventClose = this.preventNextToggle !== "no";
+      this.overlay.open = this.host.open;
+    }
+  }
+}
+class DesktopController extends InteractionController {
+  constructor() {
+    super(...arguments);
+    this.type = InteractionTypes.desktop;
+  }
+  handlePointerdown(event) {
+    const target = event.target;
+    const clearButton = target.closest(".clear-icon");
+    if (clearButton) {
+      return;
+    }
+    if (event.button !== 0 || event.pointerType === "touch") {
+      return;
+    }
+    this.pointerdownState = this.open;
+    this.preventNextToggle = "maybe";
+    let cleanupAction = 0;
+    const cleanup = () => {
+      cancelAnimationFrame(cleanupAction);
+      cleanupAction = requestAnimationFrame(() => {
+        document.removeEventListener("pointerup", cleanup);
+        document.removeEventListener("pointercancel", cleanup);
+        this.target.removeEventListener("click", cleanup);
+        requestAnimationFrame(() => {
+          this.preventNextToggle = "no";
+        });
+      });
+    };
+    document.addEventListener("pointerup", cleanup);
+    document.addEventListener("pointercancel", cleanup);
+    this.target.addEventListener("click", cleanup);
+    this.handleActivate();
+  }
+  handleActivate(event) {
+    if (this.enterKeydownOn && this.enterKeydownOn !== this.target) {
+      return;
+    }
+    if (this.preventNextToggle === "yes") {
+      return;
+    }
+    if ((event == null ? void 0 : event.type) === "click" && this.open !== this.pointerdownState) {
+      return;
+    }
+    this.host.toggle();
+  }
+  init() {
+    var _a;
+    (_a = this.abortController) == null ? void 0 : _a.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    this.target.addEventListener(
+      "click",
+      (event) => this.handleActivate(event),
+      {
+        signal
+      }
+    );
+    this.target.addEventListener(
+      "pointerdown",
+      (event) => this.handlePointerdown(event),
+      { signal }
+    );
+    this.target.addEventListener(
+      "focus",
+      (event) => this.handleButtonFocus(event),
+      {
+        signal
+      }
+    );
+  }
+}
+class MobileController extends InteractionController {
+  constructor() {
+    super(...arguments);
+    this.type = InteractionTypes.mobile;
+  }
+  handleClick(event) {
+    const target = event.target;
+    const clearButton = target.closest(".clear-button");
+    if (!clearButton) {
+      return;
+    }
+    if (this.preventNextToggle === "no") {
+      this.open = !this.open;
+    }
+    this.preventNextToggle = "no";
+  }
+  handlePointerdown(event) {
+    const target = event.target;
+    const clearButton = target.closest(".clear-button");
+    if (!clearButton) {
+      return;
+    }
+    this.preventNextToggle = this.open ? "yes" : "no";
+    if (platform.isWebKit()) {
+      this.target.classList.add(SAFARI_FOCUS_RING_CLASS);
+    }
+  }
+  handleFocusOut() {
+    if (this.host.open) {
+      return;
+    }
+    if (platform.isWebKit() && this.target.classList.contains(SAFARI_FOCUS_RING_CLASS)) {
+      this.target.classList.remove(SAFARI_FOCUS_RING_CLASS);
+    }
+  }
+  init() {
+    var _a;
+    (_a = this.abortController) == null ? void 0 : _a.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    this.target.addEventListener(
+      "click",
+      (event) => this.handleClick(event),
+      {
+        signal
+      }
+    );
+    this.target.addEventListener(
+      "pointerdown",
+      (event) => this.handlePointerdown(event),
+      { signal }
+    );
+    this.target.addEventListener("focusout", () => this.handleFocusOut(), {
+      signal
+    });
+  }
+}
+const strategies = {
+  desktop: DesktopController,
+  mobile: MobileController
+};
+exports.IS_MOBILE = IS_MOBILE;
+exports.MatchMediaController = MatchMediaController;
+exports.strategies = strategies;

package/components/strategies-DlPQoTFE.js

@@ -0,0 +1,318 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { f as isWebKit } from "./platform-Cxn0WbyT.js";
+const IS_MOBILE = "(max-width: 743px) and (hover: none) and (pointer: coarse)";
+class MatchMediaController {
+  constructor(host, query) {
+    this.key = Symbol("match-media-key");
+    this.matches = false;
+    this.host = host;
+    this.host.addController(this);
+    if (typeof window === "undefined") {
+      this.matches = false;
+    } else {
+      this.media = window.matchMedia(query);
+      this.matches = this.media.matches;
+    }
+    this.onChange = this.onChange.bind(this);
+    host.addController(this);
+  }
+  hostConnected() {
+    var _a;
+    (_a = this.media) == null ? void 0 : _a.addEventListener("change", this.onChange);
+  }
+  hostDisconnected() {
+    var _a;
+    (_a = this.media) == null ? void 0 : _a.removeEventListener("change", this.onChange);
+  }
+  onChange(event) {
+    if (this.matches === event.matches) {
+      return;
+    }
+    this.matches = event.matches;
+    this.host.requestUpdate(this.key, !this.matches);
+  }
+}
+var InteractionTypes = /* @__PURE__ */ ((InteractionTypes2) => {
+  InteractionTypes2[InteractionTypes2["desktop"] = 0] = "desktop";
+  InteractionTypes2[InteractionTypes2["mobile"] = 1] = "mobile";
+  return InteractionTypes2;
+})(InteractionTypes || {});
+const SAFARI_FOCUS_RING_CLASS = "remove-focus-ring-safari-hack";
+class InteractionController {
+  constructor(target, host) {
+    this.target = target;
+    this.host = host;
+    this.preventNextToggle = "no";
+    this.pointerdownState = false;
+    this.enterKeydownOn = null;
+    this._open = false;
+    this.target = target;
+    this.host = host;
+    this.host.addController(this);
+    this.init();
+  }
+  get activelyOpening() {
+    return false;
+  }
+  get open() {
+    return this._open;
+  }
+  /**
+   * Set `open`
+   */
+  set open(open) {
+    if (this._open === open) {
+      return;
+    }
+    this._open = open;
+    if (this.overlay) {
+      this.host.open = open;
+      return;
+    }
+    customElements.whenDefined("luzmo-overlay").then(async () => {
+      const { LuzmoOverlay: LuzmoOverlay2 } = await import("./overlay/index.js");
+      this.overlay = new LuzmoOverlay2();
+      this.host.open = true;
+      this.host.requestUpdate();
+    });
+    import("./overlay/index.js");
+  }
+  get overlay() {
+    return this._overlay;
+  }
+  set overlay(overlay) {
+    if (!overlay) {
+      return;
+    }
+    if (this.overlay === overlay) {
+      return;
+    }
+    this._overlay = overlay;
+    this.initOverlay();
+  }
+  releaseDescription() {
+  }
+  handleBeforetoggle(event) {
+    var _a, _b;
+    if (event.composedPath()[0] !== event.target) {
+      return;
+    }
+    if (event.newState === "closed") {
+      if (this.preventNextToggle === "no") {
+        this.open = false;
+      } else if (!this.pointerdownState) {
+        (_a = this.overlay) == null ? void 0 : _a.manuallyKeepOpen();
+      }
+    }
+    if (!this.open) {
+      this.host.optionsMenu.updateSelectedItemIndex();
+      if (
+        // pickers can have submenus, selects can not
+        typeof ((_b = this.host.optionsMenu) == null ? void 0 : _b.closeDescendentOverlays) === "function"
+      ) {
+        this.host.optionsMenu.closeDescendentOverlays();
+      }
+    }
+  }
+  initOverlay() {
+    if (this.overlay) {
+      this.overlay.addEventListener("beforetoggle", (event) => {
+        this.handleBeforetoggle(
+          event
+        );
+      });
+      this.overlay.type = this.host.isMobile.matches ? "modal" : "auto";
+      this.overlay.triggerElement = this.host;
+      this.overlay.placement = this.host.isMobile.matches ? void 0 : this.host.placement;
+      this.overlay.receivesFocus = "true";
+      this.overlay.willPreventClose = this.preventNextToggle !== "no" && this.open;
+      this.overlay.addEventListener(
+        "slottable-request",
+        this.host.handleSlottableRequest
+      );
+    }
+  }
+  handlePointerdown(_event) {
+  }
+  handleButtonFocus(event) {
+    if (this.preventNextToggle === "maybe" && event.relatedTarget === this.host.optionsMenu) {
+      this.preventNextToggle = "yes";
+    }
+  }
+  handleActivate(_event) {
+  }
+  /* c8 ignore next 3 */
+  init() {
+  }
+  abort() {
+    var _a;
+    this.releaseDescription();
+    (_a = this.abortController) == null ? void 0 : _a.abort();
+  }
+  hostConnected() {
+    this.init();
+  }
+  hostDisconnected() {
+    var _a;
+    (_a = this.abortController) == null ? void 0 : _a.abort();
+  }
+  hostUpdated() {
+    if (this.overlay && this.host.dependencyManager.loaded && this.host.open !== this.overlay.open) {
+      this.overlay.willPreventClose = this.preventNextToggle !== "no";
+      this.overlay.open = this.host.open;
+    }
+  }
+}
+class DesktopController extends InteractionController {
+  constructor() {
+    super(...arguments);
+    this.type = InteractionTypes.desktop;
+  }
+  handlePointerdown(event) {
+    const target = event.target;
+    const clearButton = target.closest(".clear-icon");
+    if (clearButton) {
+      return;
+    }
+    if (event.button !== 0 || event.pointerType === "touch") {
+      return;
+    }
+    this.pointerdownState = this.open;
+    this.preventNextToggle = "maybe";
+    let cleanupAction = 0;
+    const cleanup = () => {
+      cancelAnimationFrame(cleanupAction);
+      cleanupAction = requestAnimationFrame(() => {
+        document.removeEventListener("pointerup", cleanup);
+        document.removeEventListener("pointercancel", cleanup);
+        this.target.removeEventListener("click", cleanup);
+        requestAnimationFrame(() => {
+          this.preventNextToggle = "no";
+        });
+      });
+    };
+    document.addEventListener("pointerup", cleanup);
+    document.addEventListener("pointercancel", cleanup);
+    this.target.addEventListener("click", cleanup);
+    this.handleActivate();
+  }
+  handleActivate(event) {
+    if (this.enterKeydownOn && this.enterKeydownOn !== this.target) {
+      return;
+    }
+    if (this.preventNextToggle === "yes") {
+      return;
+    }
+    if ((event == null ? void 0 : event.type) === "click" && this.open !== this.pointerdownState) {
+      return;
+    }
+    this.host.toggle();
+  }
+  init() {
+    var _a;
+    (_a = this.abortController) == null ? void 0 : _a.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    this.target.addEventListener(
+      "click",
+      (event) => this.handleActivate(event),
+      {
+        signal
+      }
+    );
+    this.target.addEventListener(
+      "pointerdown",
+      (event) => this.handlePointerdown(event),
+      { signal }
+    );
+    this.target.addEventListener(
+      "focus",
+      (event) => this.handleButtonFocus(event),
+      {
+        signal
+      }
+    );
+  }
+}
+class MobileController extends InteractionController {
+  constructor() {
+    super(...arguments);
+    this.type = InteractionTypes.mobile;
+  }
+  handleClick(event) {
+    const target = event.target;
+    const clearButton = target.closest(".clear-button");
+    if (!clearButton) {
+      return;
+    }
+    if (this.preventNextToggle === "no") {
+      this.open = !this.open;
+    }
+    this.preventNextToggle = "no";
+  }
+  handlePointerdown(event) {
+    const target = event.target;
+    const clearButton = target.closest(".clear-button");
+    if (!clearButton) {
+      return;
+    }
+    this.preventNextToggle = this.open ? "yes" : "no";
+    if (isWebKit()) {
+      this.target.classList.add(SAFARI_FOCUS_RING_CLASS);
+    }
+  }
+  handleFocusOut() {
+    if (this.host.open) {
+      return;
+    }
+    if (isWebKit() && this.target.classList.contains(SAFARI_FOCUS_RING_CLASS)) {
+      this.target.classList.remove(SAFARI_FOCUS_RING_CLASS);
+    }
+  }
+  init() {
+    var _a;
+    (_a = this.abortController) == null ? void 0 : _a.abort();
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    this.target.addEventListener(
+      "click",
+      (event) => this.handleClick(event),
+      {
+        signal
+      }
+    );
+    this.target.addEventListener(
+      "pointerdown",
+      (event) => this.handlePointerdown(event),
+      { signal }
+    );
+    this.target.addEventListener("focusout", () => this.handleFocusOut(), {
+      signal
+    });
+  }
+}
+const strategies = {
+  desktop: DesktopController,
+  mobile: MobileController
+};
+export {
+  IS_MOBILE as I,
+  MatchMediaController as M,
+  strategies as s
+};