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

package/components/focus-visible-B-B8-P9R.cjs

@@ -0,0 +1,104 @@
+/*! * 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";
+let hasFocusVisible = true;
+try {
+  if (typeof document !== "undefined") {
+    document.body.querySelector(":focus-visible");
+  }
+} catch {
+  hasFocusVisible = false;
+  Promise.resolve().then(() => focusVisible);
+}
+const FocusVisiblePolyfillMixin = (SuperClass) => {
+  var _a, _b;
+  const coordinateWithPolyfill = (instance) => {
+    if (instance.shadowRoot == null || Object.hasOwn(instance.dataset, "jsFocusVisible")) {
+      return () => {
+      };
+    }
+    if (self.applyFocusVisiblePolyfill) {
+      self.applyFocusVisiblePolyfill(instance.shadowRoot);
+      if (instance.manageAutoFocus) {
+        instance.manageAutoFocus();
+      }
+    } else {
+      const coordinationHandler = () => {
+        if (self.applyFocusVisiblePolyfill && instance.shadowRoot) {
+          self.applyFocusVisiblePolyfill(instance.shadowRoot);
+        }
+        if (instance.manageAutoFocus) {
+          instance.manageAutoFocus();
+        }
+      };
+      self.addEventListener(
+        "focus-visible-polyfill-ready",
+        coordinationHandler,
+        { once: true }
+      );
+      return () => {
+        self.removeEventListener(
+          "focus-visible-polyfill-ready",
+          coordinationHandler
+        );
+      };
+    }
+    return () => {
+    };
+  };
+  const $endPolyfillCoordination = Symbol("endPolyfillCoordination");
+  class FocusVisibleCoordinator extends (_b = SuperClass, _a = $endPolyfillCoordination, _b) {
+    constructor() {
+      super(...arguments);
+      this[_a] = null;
+    }
+    // Attempt to coordinate with the polyfill when connected to the
+    // document:
+    connectedCallback() {
+      if (super.connectedCallback) {
+        super.connectedCallback();
+      }
+      if (!hasFocusVisible) {
+        requestAnimationFrame(() => {
+          if (this[$endPolyfillCoordination] == null) {
+            this[$endPolyfillCoordination] = coordinateWithPolyfill(this);
+          }
+        });
+      }
+    }
+    disconnectedCallback() {
+      if (super.disconnectedCallback) {
+        super.disconnectedCallback();
+      }
+      if (!hasFocusVisible) {
+        requestAnimationFrame(() => {
+          if (this[$endPolyfillCoordination] != null) {
+            this[$endPolyfillCoordination]();
+            this[$endPolyfillCoordination] = null;
+          }
+        });
+      }
+    }
+  }
+  return FocusVisibleCoordinator;
+};
+const focusVisible = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  FocusVisiblePolyfillMixin
+}, Symbol.toStringTag, { value: "Module" }));
+exports.FocusVisiblePolyfillMixin = FocusVisiblePolyfillMixin;

package/components/focus-visible-BUPRWlsh.js

@@ -0,0 +1,105 @@
+/*! * 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.
+ * */
+let hasFocusVisible = true;
+try {
+  if (typeof document !== "undefined") {
+    document.body.querySelector(":focus-visible");
+  }
+} catch {
+  hasFocusVisible = false;
+  Promise.resolve().then(() => focusVisible);
+}
+const FocusVisiblePolyfillMixin = (SuperClass) => {
+  var _a, _b;
+  const coordinateWithPolyfill = (instance) => {
+    if (instance.shadowRoot == null || Object.hasOwn(instance.dataset, "jsFocusVisible")) {
+      return () => {
+      };
+    }
+    if (self.applyFocusVisiblePolyfill) {
+      self.applyFocusVisiblePolyfill(instance.shadowRoot);
+      if (instance.manageAutoFocus) {
+        instance.manageAutoFocus();
+      }
+    } else {
+      const coordinationHandler = () => {
+        if (self.applyFocusVisiblePolyfill && instance.shadowRoot) {
+          self.applyFocusVisiblePolyfill(instance.shadowRoot);
+        }
+        if (instance.manageAutoFocus) {
+          instance.manageAutoFocus();
+        }
+      };
+      self.addEventListener(
+        "focus-visible-polyfill-ready",
+        coordinationHandler,
+        { once: true }
+      );
+      return () => {
+        self.removeEventListener(
+          "focus-visible-polyfill-ready",
+          coordinationHandler
+        );
+      };
+    }
+    return () => {
+    };
+  };
+  const $endPolyfillCoordination = Symbol("endPolyfillCoordination");
+  class FocusVisibleCoordinator extends (_b = SuperClass, _a = $endPolyfillCoordination, _b) {
+    constructor() {
+      super(...arguments);
+      this[_a] = null;
+    }
+    // Attempt to coordinate with the polyfill when connected to the
+    // document:
+    connectedCallback() {
+      if (super.connectedCallback) {
+        super.connectedCallback();
+      }
+      if (!hasFocusVisible) {
+        requestAnimationFrame(() => {
+          if (this[$endPolyfillCoordination] == null) {
+            this[$endPolyfillCoordination] = coordinateWithPolyfill(this);
+          }
+        });
+      }
+    }
+    disconnectedCallback() {
+      if (super.disconnectedCallback) {
+        super.disconnectedCallback();
+      }
+      if (!hasFocusVisible) {
+        requestAnimationFrame(() => {
+          if (this[$endPolyfillCoordination] != null) {
+            this[$endPolyfillCoordination]();
+            this[$endPolyfillCoordination] = null;
+          }
+        });
+      }
+    }
+  }
+  return FocusVisibleCoordinator;
+};
+const focusVisible = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  FocusVisiblePolyfillMixin
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  FocusVisiblePolyfillMixin as F
+};

package/components/focusable-BPrTcZPd.cjs

@@ -0,0 +1,262 @@
+/*! * 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 decorators_js = require("lit/decorators.js");
+const base = require("./base-COw9n7UR.cjs");
+const focusVisible = require("./focus-visible-B-B8-P9R.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+function nextFrame() {
+  return new Promise((res) => requestAnimationFrame(() => res()));
+}
+class Focusable extends focusVisible.FocusVisiblePolyfillMixin(base.LuzmoElement) {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.autofocus = false;
+    this._tabIndex = 0;
+    this.manipulatingTabindex = false;
+    this.autofocusReady = Promise.resolve();
+  }
+  get tabIndex() {
+    if (this.focusElement === this) {
+      const tabindex = this.hasAttribute("tabindex") ? Number(this.getAttribute("tabindex")) : Number.NaN;
+      return Number.isNaN(tabindex) ? -1 : tabindex;
+    }
+    const tabIndexAttribute = Number.parseFloat(
+      this.hasAttribute("tabindex") ? this.getAttribute("tabindex") || "0" : "0"
+    );
+    if (this.disabled || tabIndexAttribute < 0) {
+      return -1;
+    }
+    if (!this.focusElement) {
+      return tabIndexAttribute;
+    }
+    return this._tabIndex;
+  }
+  set tabIndex(tabIndex) {
+    var _a;
+    if (this.manipulatingTabindex) {
+      this.manipulatingTabindex = false;
+      return;
+    }
+    if (this.focusElement === this) {
+      if (this.disabled) {
+        this._tabIndex = tabIndex;
+      } else if (tabIndex !== this._tabIndex) {
+        this._tabIndex = tabIndex;
+        const tabindex = "" + tabIndex;
+        this.manipulatingTabindex = true;
+        this.setAttribute("tabindex", tabindex);
+      }
+      return;
+    }
+    if (tabIndex === -1) {
+      this.addEventListener(
+        "pointerdown",
+        this.onPointerdownManagementOfTabIndex
+      );
+    } else {
+      this.manipulatingTabindex = true;
+      this.removeEventListener(
+        "pointerdown",
+        this.onPointerdownManagementOfTabIndex
+      );
+    }
+    if (tabIndex === -1 || this.disabled) {
+      this.manipulatingTabindex = true;
+      this.setAttribute("tabindex", "-1");
+      this.removeAttribute("focusable");
+      if (this.selfManageFocusElement) {
+        return;
+      }
+      if (tabIndex === -1) {
+        (_a = this.focusElement) == null ? void 0 : _a.removeAttribute("tabindex");
+      } else {
+        this._tabIndex = tabIndex;
+        this.manageFocusElementTabindex(tabIndex);
+      }
+      return;
+    }
+    this.setAttribute("focusable", "");
+    if (this.hasAttribute("tabindex")) {
+      this.removeAttribute("tabindex");
+    } else {
+      this.manipulatingTabindex = false;
+    }
+    this._tabIndex = tabIndex;
+    this.manageFocusElementTabindex(tabIndex);
+  }
+  onPointerdownManagementOfTabIndex() {
+    if (this.tabIndex === -1) {
+      setTimeout(() => {
+        this.tabIndex = 0;
+        this.focus({ preventScroll: true });
+        this.tabIndex = -1;
+      });
+    }
+  }
+  async manageFocusElementTabindex(tabIndex) {
+    if (!this.focusElement) {
+      await this.updateComplete;
+    }
+    if (tabIndex === null) {
+      this.focusElement.removeAttribute("tabindex");
+    } else {
+      if (this.focusElement !== this) {
+        this.focusElement.tabIndex = tabIndex;
+      }
+    }
+  }
+  /**
+   * @private
+   */
+  get focusElement() {
+    throw new Error("Must implement focusElement getter!");
+  }
+  /**
+   * @public
+   * @returns whether the component should manage its focusElement tab-index or not
+   * Needed for action-menu to be supported in action-group in an accessible way
+   */
+  get selfManageFocusElement() {
+    return false;
+  }
+  focus(options) {
+    if (this.disabled || !this.focusElement) {
+      return;
+    }
+    if (this.focusElement === this) {
+      Reflect.apply(HTMLElement.prototype.focus, this, [options]);
+    } else {
+      this.focusElement.focus(options);
+    }
+  }
+  blur() {
+    const focusElement = this.focusElement || this;
+    if (focusElement === this) {
+      HTMLElement.prototype.blur.apply(this);
+    } else {
+      focusElement.blur();
+    }
+  }
+  click() {
+    if (this.disabled) {
+      return;
+    }
+    const focusElement = this.focusElement || this;
+    if (focusElement === this) {
+      HTMLElement.prototype.click.apply(this);
+    } else {
+      focusElement.click();
+    }
+  }
+  manageAutoFocus() {
+    if (this.autofocus) {
+      this.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          code: "Tab"
+        })
+      );
+      this.focusElement.focus();
+    }
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    if (!this.hasAttribute("tabindex") || this.getAttribute("tabindex") !== "-1") {
+      this.setAttribute("focusable", "");
+    }
+  }
+  update(changedProperties) {
+    if (changedProperties.has("disabled")) {
+      this.handleDisabledChanged(
+        this.disabled,
+        changedProperties.get("disabled")
+      );
+    }
+    super.update(changedProperties);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("disabled") && this.disabled) {
+      this.blur();
+    }
+  }
+  async handleDisabledChanged(disabled, oldDisabled) {
+    const canSetDisabled = () => this.focusElement !== this && this.focusElement.disabled !== void 0;
+    if (disabled) {
+      this.manipulatingTabindex = true;
+      this.setAttribute("tabindex", "-1");
+      await this.updateComplete;
+      if (canSetDisabled()) {
+        this.focusElement.disabled = true;
+      } else {
+        this.setAttribute("aria-disabled", "true");
+      }
+    } else if (oldDisabled) {
+      this.manipulatingTabindex = true;
+      if (this.focusElement === this) {
+        this.setAttribute("tabindex", "" + this._tabIndex);
+      } else {
+        this.removeAttribute("tabindex");
+      }
+      await this.updateComplete;
+      if (canSetDisabled()) {
+        this.focusElement.disabled = false;
+      } else {
+        this.removeAttribute("aria-disabled");
+      }
+    }
+  }
+  async getUpdateComplete() {
+    const complete = await super.getUpdateComplete();
+    await this.autofocusReady;
+    return complete;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.autofocus) {
+      this.autofocusReady = new Promise(async (res) => {
+        await nextFrame();
+        await nextFrame();
+        res();
+      });
+      this.updateComplete.then(() => {
+        this.manageAutoFocus();
+      });
+    }
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], Focusable.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean })
+], Focusable.prototype, "autofocus", 2);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], Focusable.prototype, "tabIndex", 1);
+exports.Focusable = Focusable;