@luzmo/lucero 1.0.1-alpha.18 → 1.0.1-alpha.19

package/components/button-base-7Ak55xFd.cjs

@@ -1,206 +0,0 @@
-/*! * 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 lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const focusable = require("./focusable-BPrTcZPd.cjs");
-const likeAnchor = require("./like-anchor-D62faRNG.cjs");
-const observeSlotText = require("./observe-slot-text-CSofZeeF.cjs");
-const styles = ":host{display:inline-flex;vertical-align:top;--parent-element-progress-circle-size: 18px;--icon-size: 18px}:host([dir]){-webkit-appearance:none}:host([disabled]){pointer-events:none;cursor:auto}#button{position:absolute;top:0;right:0;bottom:0;left:0}::slotted(luzmo-overlay),::slotted(luzmo-tooltip){position:absolute}:host:after{pointer-events:none}::slotted(*){pointer-events:none}::slotted([slot=icon]){--luzmo-icon-vertical-align: 0}slot[name=icon]::slotted(svg),slot[name=icon]::slotted(img){fill:currentcolor;stroke:currentcolor;block-size:var(--luzmo-button-icon-size, var(--icon-size));inline-size:var(--luzmo-button-icon-size, var(--icon-size))}[icon-only]+#label{display:contents}:host([size=s]){--parent-element-progress-circle-size: 16px;--icon-size: 16px}:host([size=l]){--parent-element-progress-circle-size: 20px;--icon-size: 20px}:host([size=xl]){--parent-element-progress-circle-size: 22px;--icon-size: 22px}";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class LuzmoButtonBase extends observeSlotText.ObserveSlotText(
-  likeAnchor.LikeAnchor(focusable.Focusable),
-  "",
-  ["luzmo-overlay,luzmo-tooltip"]
-) {
-  constructor() {
-    super();
-    this.active = false;
-    this.type = "button";
-    this.proxyFocus = this.proxyFocus.bind(this);
-    this.addEventListener("click", this.handleClickCapture, {
-      capture: true
-    });
-  }
-  static get styles() {
-    return [lit.unsafeCSS(styles)];
-  }
-  get focusElement() {
-    return this;
-  }
-  get hasLabel() {
-    return this.slotHasContent;
-  }
-  get buttonContent() {
-    const content = [
-      lit.html` <slot name="icon" ?icon-only=${!this.hasLabel}></slot> `,
-      lit.html`
-        <span id="label">
-          <slot @slotchange=${this.manageTextObservedSlot}></slot>
-        </span>
-      `
-    ];
-    return content;
-  }
-  handleClickCapture(event) {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      return false;
-    }
-    if (this.shouldProxyClick()) {
-      return;
-    }
-  }
-  proxyFocus() {
-    this.focus();
-  }
-  shouldProxyClick() {
-    let handled = false;
-    if (this.anchorElement) {
-      this.anchorElement.click();
-      handled = true;
-    } else if (this.type !== "button") {
-      const proxy = typeof document !== "undefined" ? document.createElement("button") : null;
-      if (proxy) {
-        proxy.type = this.type;
-        this.insertAdjacentElement("afterend", proxy);
-        proxy.click();
-        proxy.remove();
-      }
-      handled = true;
-    }
-    return handled;
-  }
-  renderAnchor() {
-    return lit.html`
-      ${this.buttonContent}
-      ${super.renderAnchor({
-      id: "button",
-      ariaHidden: true,
-      className: "button anchor hidden"
-    })}
-    `;
-  }
-  renderButton() {
-    return lit.html` ${this.buttonContent} `;
-  }
-  render() {
-    return this.href && this.href.length > 0 ? this.renderAnchor() : this.renderButton();
-  }
-  handleKeydown(event) {
-    const { code } = event;
-    switch (code) {
-      case "Space": {
-        event.preventDefault();
-        if (this.href === void 0) {
-          this.addEventListener("keyup", this.handleKeyup);
-          this.active = true;
-        }
-        break;
-      }
-    }
-  }
-  handleKeypress(event) {
-    const { code } = event;
-    switch (code) {
-      case "Enter":
-      case "NumpadEnter": {
-        this.click();
-        break;
-      }
-    }
-  }
-  handleKeyup(event) {
-    const { code } = event;
-    switch (code) {
-      case "Space": {
-        this.removeEventListener("keyup", this.handleKeyup);
-        this.active = false;
-        this.click();
-        break;
-      }
-    }
-  }
-  manageAnchor() {
-    if (this.href && this.href.length > 0) {
-      if (!this.hasAttribute("role") || this.getAttribute("role") === "button") {
-        this.setAttribute("role", "link");
-      }
-    } else {
-      if (!this.hasAttribute("role") || this.getAttribute("role") === "link") {
-        this.setAttribute("role", "button");
-      }
-    }
-  }
-  firstUpdated(changed) {
-    super.firstUpdated(changed);
-    if (!this.hasAttribute("tabindex")) {
-      this.setAttribute("tabindex", "0");
-    }
-    if (changed.has("label")) {
-      if (this.label) {
-        this.setAttribute("aria-label", this.label);
-      } else {
-        this.removeAttribute("aria-label");
-      }
-    }
-    this.manageAnchor();
-    this.addEventListener("keydown", this.handleKeydown);
-    this.addEventListener("keypress", this.handleKeypress);
-  }
-  updated(changed) {
-    super.updated(changed);
-    if (changed.has("href")) {
-      this.manageAnchor();
-    }
-    if (this.anchorElement) {
-      this.anchorElement.addEventListener("focus", this.proxyFocus);
-      this.anchorElement.tabIndex = -1;
-    }
-  }
-  update(changes) {
-    super.update(changes);
-    if (changes.has("label")) {
-      if (this.label) {
-        this.setAttribute("aria-label", this.label);
-      } else {
-        this.removeAttribute("aria-label");
-      }
-    }
-  }
-}
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], LuzmoButtonBase.prototype, "active");
-__decorateClass([
-  decorators_js.property({ type: String })
-], LuzmoButtonBase.prototype, "type");
-__decorateClass([
-  decorators_js.query(".anchor")
-], LuzmoButtonBase.prototype, "anchorElement");
-exports.LuzmoButtonBase = LuzmoButtonBase;

package/components/button-base-C3kf6BTK.js

@@ -1,207 +0,0 @@
-/*! * 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 { unsafeCSS, html } from "lit";
-import { property, query } from "lit/decorators.js";
-import { F as Focusable } from "./focusable-ChCLg1k4.js";
-import { L as LikeAnchor } from "./like-anchor-v3cJ9RWM.js";
-import { O as ObserveSlotText } from "./observe-slot-text-CjnkkBPn.js";
-const styles = ":host{display:inline-flex;vertical-align:top;--parent-element-progress-circle-size: 18px;--icon-size: 18px}:host([dir]){-webkit-appearance:none}:host([disabled]){pointer-events:none;cursor:auto}#button{position:absolute;top:0;right:0;bottom:0;left:0}::slotted(luzmo-overlay),::slotted(luzmo-tooltip){position:absolute}:host:after{pointer-events:none}::slotted(*){pointer-events:none}::slotted([slot=icon]){--luzmo-icon-vertical-align: 0}slot[name=icon]::slotted(svg),slot[name=icon]::slotted(img){fill:currentcolor;stroke:currentcolor;block-size:var(--luzmo-button-icon-size, var(--icon-size));inline-size:var(--luzmo-button-icon-size, var(--icon-size))}[icon-only]+#label{display:contents}:host([size=s]){--parent-element-progress-circle-size: 16px;--icon-size: 16px}:host([size=l]){--parent-element-progress-circle-size: 20px;--icon-size: 20px}:host([size=xl]){--parent-element-progress-circle-size: 22px;--icon-size: 22px}";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class LuzmoButtonBase extends ObserveSlotText(
-  LikeAnchor(Focusable),
-  "",
-  ["luzmo-overlay,luzmo-tooltip"]
-) {
-  constructor() {
-    super();
-    this.active = false;
-    this.type = "button";
-    this.proxyFocus = this.proxyFocus.bind(this);
-    this.addEventListener("click", this.handleClickCapture, {
-      capture: true
-    });
-  }
-  static get styles() {
-    return [unsafeCSS(styles)];
-  }
-  get focusElement() {
-    return this;
-  }
-  get hasLabel() {
-    return this.slotHasContent;
-  }
-  get buttonContent() {
-    const content = [
-      html` <slot name="icon" ?icon-only=${!this.hasLabel}></slot> `,
-      html`
-        <span id="label">
-          <slot @slotchange=${this.manageTextObservedSlot}></slot>
-        </span>
-      `
-    ];
-    return content;
-  }
-  handleClickCapture(event) {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
-      return false;
-    }
-    if (this.shouldProxyClick()) {
-      return;
-    }
-  }
-  proxyFocus() {
-    this.focus();
-  }
-  shouldProxyClick() {
-    let handled = false;
-    if (this.anchorElement) {
-      this.anchorElement.click();
-      handled = true;
-    } else if (this.type !== "button") {
-      const proxy = typeof document !== "undefined" ? document.createElement("button") : null;
-      if (proxy) {
-        proxy.type = this.type;
-        this.insertAdjacentElement("afterend", proxy);
-        proxy.click();
-        proxy.remove();
-      }
-      handled = true;
-    }
-    return handled;
-  }
-  renderAnchor() {
-    return html`
-      ${this.buttonContent}
-      ${super.renderAnchor({
-      id: "button",
-      ariaHidden: true,
-      className: "button anchor hidden"
-    })}
-    `;
-  }
-  renderButton() {
-    return html` ${this.buttonContent} `;
-  }
-  render() {
-    return this.href && this.href.length > 0 ? this.renderAnchor() : this.renderButton();
-  }
-  handleKeydown(event) {
-    const { code } = event;
-    switch (code) {
-      case "Space": {
-        event.preventDefault();
-        if (this.href === void 0) {
-          this.addEventListener("keyup", this.handleKeyup);
-          this.active = true;
-        }
-        break;
-      }
-    }
-  }
-  handleKeypress(event) {
-    const { code } = event;
-    switch (code) {
-      case "Enter":
-      case "NumpadEnter": {
-        this.click();
-        break;
-      }
-    }
-  }
-  handleKeyup(event) {
-    const { code } = event;
-    switch (code) {
-      case "Space": {
-        this.removeEventListener("keyup", this.handleKeyup);
-        this.active = false;
-        this.click();
-        break;
-      }
-    }
-  }
-  manageAnchor() {
-    if (this.href && this.href.length > 0) {
-      if (!this.hasAttribute("role") || this.getAttribute("role") === "button") {
-        this.setAttribute("role", "link");
-      }
-    } else {
-      if (!this.hasAttribute("role") || this.getAttribute("role") === "link") {
-        this.setAttribute("role", "button");
-      }
-    }
-  }
-  firstUpdated(changed) {
-    super.firstUpdated(changed);
-    if (!this.hasAttribute("tabindex")) {
-      this.setAttribute("tabindex", "0");
-    }
-    if (changed.has("label")) {
-      if (this.label) {
-        this.setAttribute("aria-label", this.label);
-      } else {
-        this.removeAttribute("aria-label");
-      }
-    }
-    this.manageAnchor();
-    this.addEventListener("keydown", this.handleKeydown);
-    this.addEventListener("keypress", this.handleKeypress);
-  }
-  updated(changed) {
-    super.updated(changed);
-    if (changed.has("href")) {
-      this.manageAnchor();
-    }
-    if (this.anchorElement) {
-      this.anchorElement.addEventListener("focus", this.proxyFocus);
-      this.anchorElement.tabIndex = -1;
-    }
-  }
-  update(changes) {
-    super.update(changes);
-    if (changes.has("label")) {
-      if (this.label) {
-        this.setAttribute("aria-label", this.label);
-      } else {
-        this.removeAttribute("aria-label");
-      }
-    }
-  }
-}
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LuzmoButtonBase.prototype, "active");
-__decorateClass([
-  property({ type: String })
-], LuzmoButtonBase.prototype, "type");
-__decorateClass([
-  query(".anchor")
-], LuzmoButtonBase.prototype, "anchorElement");
-export {
-  LuzmoButtonBase as L
-};

package/components/checkbox-mixin-8cL-vfDy.js

@@ -1,84 +0,0 @@
-/*! * 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 { html } from "lit";
-import { property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function checkboxMixin(constructor) {
-  class MixedElement extends constructor {
-    constructor() {
-      super(...arguments);
-      this.checked = false;
-      this.readonly = false;
-    }
-    handleChange() {
-      if (this.readonly) {
-        this.inputElement.checked = this.checked;
-        return;
-      }
-      this.checked = this.inputElement.checked;
-      const changeEvent = new CustomEvent("change", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail: this.checked
-      });
-      const applyDefault = this.dispatchEvent(changeEvent);
-      if (!applyDefault) {
-        this.checked = !this.inputElement.checked;
-        this.inputElement.checked = this.checked;
-      }
-    }
-    render() {
-      return html`
-        <input
-          id="input"
-          name=${ifDefined(this.name || void 0)}
-          type="checkbox"
-          .checked=${this.checked}
-          ?disabled=${this.readonly}
-          @change=${this.handleChange}
-        />
-      `;
-    }
-  }
-  __decorateClass([
-    property({ type: Boolean, reflect: true })
-  ], MixedElement.prototype, "checked");
-  __decorateClass([
-    property({ type: String, reflect: true })
-  ], MixedElement.prototype, "name");
-  __decorateClass([
-    property({ type: Boolean, reflect: true })
-  ], MixedElement.prototype, "readonly");
-  __decorateClass([
-    query("#input")
-  ], MixedElement.prototype, "inputElement");
-  return MixedElement;
-}
-export {
-  checkboxMixin as c
-};

package/components/checkbox-mixin-CE7dJj3J.cjs

@@ -1,83 +0,0 @@
-/*! * 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 lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const ifDefined_js = require("lit/directives/if-defined.js");
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function checkboxMixin(constructor) {
-  class MixedElement extends constructor {
-    constructor() {
-      super(...arguments);
-      this.checked = false;
-      this.readonly = false;
-    }
-    handleChange() {
-      if (this.readonly) {
-        this.inputElement.checked = this.checked;
-        return;
-      }
-      this.checked = this.inputElement.checked;
-      const changeEvent = new CustomEvent("change", {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        detail: this.checked
-      });
-      const applyDefault = this.dispatchEvent(changeEvent);
-      if (!applyDefault) {
-        this.checked = !this.inputElement.checked;
-        this.inputElement.checked = this.checked;
-      }
-    }
-    render() {
-      return lit.html`
-        <input
-          id="input"
-          name=${ifDefined_js.ifDefined(this.name || void 0)}
-          type="checkbox"
-          .checked=${this.checked}
-          ?disabled=${this.readonly}
-          @change=${this.handleChange}
-        />
-      `;
-    }
-  }
-  __decorateClass([
-    decorators_js.property({ type: Boolean, reflect: true })
-  ], MixedElement.prototype, "checked");
-  __decorateClass([
-    decorators_js.property({ type: String, reflect: true })
-  ], MixedElement.prototype, "name");
-  __decorateClass([
-    decorators_js.property({ type: Boolean, reflect: true })
-  ], MixedElement.prototype, "readonly");
-  __decorateClass([
-    decorators_js.query("#input")
-  ], MixedElement.prototype, "inputElement");
-  return MixedElement;
-}
-exports.checkboxMixin = checkboxMixin;

package/components/clear-button-Co6oKSgl.js

@@ -1,59 +0,0 @@
-/*! * 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 { luzmoIcon, luzmoClear12, luzmoClear16, luzmoClear14 } from "@luzmo/icons";
-import { unsafeCSS, html } from "lit";
-import { property } from "lit/decorators.js";
-import { S as SizedMixin } from "./sized-mixin-DmkrNdWB.js";
-import { L as LuzmoButtonBase } from "./button-base-C3kf6BTK.js";
-const buttonStyles = ":host{font-size:var(--luzmo-clear-button-icon-size, var(--clear-button-icon-size));cursor:pointer;background-color:initial;background-color:var(--luzmo-clear-button-background-color, transparent);padding:var(--luzmo-clear-button-padding, var(--clear-button-padding));color:var(--luzmo-clear-button-icon-color, var(--clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover: hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover, var(--luzmo-clear-button-icon-color-hover, var(--clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--luzmo-clear-button-background-color-hover, var(--clear-button-background-color-hover))}}:host(:is(:active,[active])){color:var(--luzmo-clear-button-icon-color-down, var(--clear-button-icon-color-down))}:host(:is(:active,[active])) .fill{background-color:var(--luzmo-clear-button-background-color-down, var(--clear-button-background-color-down))}:host([focus-within]) .js-focus-within,:host(:focus-visible),:host:focus-within{color:var(--luzmo-clear-button-icon-color-key-focus, var(--clear-button-icon-color-key-focus))}:host([focus-within]) .js-focus-within .fill,:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(--luzmo-clear-button-background-color-key-focus, var(--clear-button-background-color-key-focus))}:host([disabled]){--clear-button-icon-color: var( --luzmo-clear-button-icon-color-disabled, var(--disabled-content-color) );--clear-button-background-color: var( --luzmo-clear-button-background-color-disabled, transparent )}.fill{background-color:var(--luzmo-clear-button-background-color, var(--clear-button-background-color));inline-size:100%;block-size:100%;border-radius:100%;justify-content:center;align-items:center;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors: active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover: Highlight}}:host{--clear-button-background-color: transparent;--clear-button-background-color-hover: transparent;--clear-button-background-color-down: transparent;--clear-button-background-color-key-focus: transparent;--clear-button-icon-size: var(--luzmo-font-size);--clear-button-padding: 0px;--clear-button-icon-color: var(--luzmo-font-color);--clear-button-icon-color-hover: var(--luzmo-font-color-hover);--clear-button-icon-color-down: var(--luzmo-font-color-down);--clear-button-icon-color-key-focus: var(--luzmo-font-color-focus)}:host([size=s]){--clear-button-icon-size: var(--luzmo-font-size-s)}:host([size=l]){--clear-button-icon-size: var(--luzmo-font-size-l)}:host([size=xl]){--clear-button-icon-size: var(--luzmo-font-size-xl)}:host .luzmo-ClearButton--quiet{--clear-button-background-color: transparent;--clear-button-background-color-hover: transparent;--clear-button-background-color-down: transparent;--clear-button-background-color-key-focus: transparent}:host([variant=overBackground]){--clear-button-icon-color: rgb(255, 255, 255);--clear-button-icon-color-hover: rgb(255, 255, 255);--clear-button-icon-color-down: rgb(255, 255, 255);--clear-button-icon-color-key-focus: rgb(255, 255, 255);--clear-button-background-color: transparent;--clear-button-background-color-hover: rgba(255, 255, 255, .25);--clear-button-background-color-down: rgba(255, 255, 255, .4);--clear-button-background-color-key-focus: rgba(255, 255, 255, .25)}:host([disabled]){--clear-button-icon-color: var(--luzmo-disabled-color);--clear-button-icon-color-hover: var(--luzmo-disabled-color);--clear-button-icon-color-down: var(--luzmo-disabled-color);--clear-button-background-color: transparent}:host{box-sizing:border-box}";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const crossIcon = (size) => {
-  const icon = size === "s" ? luzmoClear12 : ["xl", "l"].includes(size) ? luzmoClear16 : luzmoClear14;
-  return html` <div class="icon" slot="icon">${luzmoIcon(icon)}</div> `;
-};
-class LuzmoClearButton extends SizedMixin(LuzmoButtonBase, {
-  noDefaultSize: true
-}) {
-  constructor() {
-    super(...arguments);
-    this.variant = "";
-  }
-  static get styles() {
-    return [...super.styles, unsafeCSS(buttonStyles)];
-  }
-  get buttonContent() {
-    return [crossIcon(this.size)];
-  }
-  render() {
-    return html` <div class="fill">${super.render()}</div> `;
-  }
-}
-__decorateClass([
-  property({ reflect: true })
-], LuzmoClearButton.prototype, "variant");
-export {
-  LuzmoClearButton as L
-};