wj-elements 0.7.6 → 0.8.0

package/dist/wje-button.js

@@ -7,495 +7,174 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _Button_instances, populateCustomEvent_fn;
-import { b as bindRouterLinks } from "./router-links-wjqCnncc.js";
-import { bool } from "./utils.js";
-import WJElement from "./wje-element.js";
-import { I as Icon } from "./icon-CReYMzAK.js";
-import { WjElementUtils } from "./element-utils.js";
-import { event } from "./event.js";
-const styles = "/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n    background-color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-9);\n    color: var(--wje-color-primary-9);\n}\n\n.wje-button-link.wje-color-primary {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n    background-color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    border-color: var(--wje-color-complete-9);\n    color: var(--wje-color-complete-9);\n}\n\n.wje-button-link.wje-color-complete {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n    background-color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    border-color: var(--wje-color-success-9);\n    color: var(--wje-color-success-9);\n}\n\n.wje-button-link.wje-color-success {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n    background-color: var(--wje-color-warning-9);\n    border-color: var(--wje-color-warning-9);\n    color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n    background-color: var(--wje-color-warning-1);\n    border-color: var(--wje-color-warning-11);\n    color: var(--wje-color-warning-11);\n}\n\n.wje-button-link.wje-color-warning {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n    background-color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    border-color: var(--wje-color-danger-9);\n    color: var(--wje-color-danger-9);\n}\n\n.wje-button-link.wje-color-danger {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-info {\n    background-color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-info {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-9);\n}\n\n.wje-button-link.wje-color-info {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n    background-color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-6);\n    color: var(--wje-color-contrast-11);\n}\n\n.wje-button-link.wje-color-default {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--wje-color-contrast-11);\n}\n\n:host {\n    --wje-padding-top: 0.4rem;\n    --wje-padding-start: 0.5rem;\n    --wje-padding-end: 0.5rem;\n    --wje-padding-bottom: 0.4rem;\n\n    display: inline-flex;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n    margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n    display: block;\n}\n\n.native-button {\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    display: flex;\n    position: relative;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    min-height: inherit;\n    /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n    border-width: var(--wje-button-border-width);\n    border-style: var(--wje-button-border-style);\n    border-color: var(--wje-button-border-color);\n    background-color: transparent;\n    /*color: var(--wje-button-color);*/\n    line-height: 1;\n    contain: layout style;\n    cursor: pointer;\n    z-index: 0;\n    box-sizing: border-box;\n    appearance: none;\n    margin: 0;\n    border-radius: var(--wje-button-border-radius);\n    padding-top: var(--wje-padding-top);\n    padding-bottom: var(--wje-padding-bottom);\n    padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n    white-space: nowrap;\n}\n\n.native-button:hover {\n    outline-style: solid;\n    outline-width: var(--wje-button-outline-width);\n    transition: outline-width 0.1s linear;\n}\n\n@media (any-hover: hover) {\n    .wje-button-solid.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-9);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-outline.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: var(--wje-color-primary-9);\n        color: var(--wje-color-primary-9);\n        outline-color: var(--wje-color-primary-2);\n    }\n\n    .wje-button-link.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-1);\n        border-color: transparent;\n        color: var(--wje-color-primary-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-9);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-outline.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: var(--wje-color-complete-9);\n        color: var(--wje-color-complete-9);\n        outline-color: var(--wje-color-complete-2);\n    }\n\n    .wje-button-link.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-1);\n        border-color: transparent;\n        color: var(--wje-color-complete-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-success:hover {\n        background-color: var(--wje-color-success-9);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-outline.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: var(--wje-color-success-9);\n        color: var(--wje-color-success-9);\n        outline-color: var(--wje-color-success-2);\n    }\n\n    .wje-button-link.wje-color-success:hover {\n        background-color: var(--wje-color-success-1);\n        border-color: transparent;\n        color: var(--wje-color-success-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-9);\n        border-color: var(--wje-color-warning-9);\n        color: var(--wje-color-black);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-outline.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: var(--wje-color-warning-11);\n        color: var(--wje-color-warning-11);\n        outline-color: var(--wje-color-warning-2);\n    }\n\n    .wje-button-link.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-1);\n        border-color: transparent;\n        color: var(--wje-color-warning-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-9);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-outline.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: var(--wje-color-danger-9);\n        color: var(--wje-color-danger-9);\n        outline-color: var(--wje-color-danger-2);\n    }\n\n    .wje-button-link.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-1);\n        border-color: transparent;\n        color: var(--wje-color-danger-9);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-9);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-0);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-1);\n        border-color: var(--wje-color-contrast-9);\n        color: var(--wje-color-contrast-9);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-info:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n\n    .wje-button-solid.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-0);\n        border-color: var(--wje-color-contrast-3);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-outline.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-2);\n        border-color: var(--wje-color-contrast-6);\n        color: var(--wje-color-contrast-11);\n        outline-color: var(--wje-color-contrast-3);\n    }\n\n    .wje-button-link.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-3);\n        border-color: transparent;\n        color: var(--wje-color-contrast-11);\n        outline-color: transparent;\n        outline-width: 0;\n    }\n}\n\n.button-inner {\n    display: flex;\n    position: relative;\n    flex-flow: row nowrap;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n    border-width: var(--wje-button-border-width);\n    border-radius: var(--wje-button-border-radius);\n    border-color: transparent;\n    background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n    cursor: default;\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n    border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n    border-radius: var(--wje-border-radius-circle);\n    aspect-ratio: 1/1;\n    width: 1.988rem;\n    display: flex;\n    align-items: center;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='small']) .native-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n}\n\n:host([size='large']) .native-button {\n    --wje-padding-top: 0.6rem;\n    --wje-padding-start: 0.7rem;\n    --wje-padding-end: 0.7rem;\n    --wje-padding-bottom: 0.6rem;\n}\n\n:host([size='small'][circle]) .native-button {\n    width: 1.688rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n:host([size='large'][circle]) .native-button {\n    width: 2.388rem;\n    --wje-padding-top: 0;\n    --wje-padding-start: 0;\n    --wje-padding-end: 0;\n    --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot='start']) {\n    margin: 0 0.3rem 0 0;\n}\n\n::slotted(wje-icon[slot='end']) {\n    margin: 0 -0.2rem 0 0.3rem;\n}\n\n:host(:not([only-caret])) slot[name='caret'] {\n    padding: 0 0 0 0.3rem;\n}\n\n:host([only-caret]) {\n    .native-button {\n        aspect-ratio: 1/1;\n        width: 1.988rem;\n        display: flex;\n        align-items: center;\n    }\n    slot[name='caret'] {\n        padding: 0;\n        display: block;\n    }\n}\n\n::slotted([slot='toggle']) {\n    display: none;\n}\n\n::slotted([slot='toggle'].show) {\n    display: block;\n}\n";
-class Button extends WJElement {
-  /**
-   * Button constructor method.
-   * @class
-   */
+var _n_instances, t_fn;
+import { b as t } from "./router-links-CNsJ-elb.js";
+import { bool as o } from "./utils.js";
+import e from "./wje-element.js";
+import { I as r } from "./icon-DmsqtDpL.js";
+import { WjElementUtils as l } from "./element-utils.js";
+import { event as a } from "./event.js";
+class n extends e {
   constructor() {
     super();
-    __privateAdd(this, _Button_instances);
-    /**
-     * Dependencies of the Button element.
-     * @type {object}
-     */
-    __publicField(this, "dependencies", {
-      "wje-icon": Icon
-    });
-    /**
-     * Class name for the Button element
-     * @type {string}
-     */
+    __privateAdd(this, _n_instances);
+    __publicField(this, "dependencies", { "wje-icon": r });
     __publicField(this, "className", "Button");
-    /**
-     * Event dialog open method for the Button element.
-     * @param {Event} e The event object
-     */
-    __publicField(this, "eventDialogOpen", (e) => {
-      event.dispatchCustomEvent(this, this.dialog);
+    __publicField(this, "eventDialogOpen", (t2) => {
+      a.dispatchCustomEvent(this, this.dialog);
     });
-    /**
-     * Toggle states method for the Button element.
-     */
     __publicField(this, "toggleStates", () => {
-      this.setAttribute("value", this.getAttribute("value") === "on" ? "off" : "on");
-      this.syncToggleState();
-      this.syncAria();
+      this.setAttribute("value", "on" === this.getAttribute("value") ? "off" : "on"), this.syncToggleState(), this.syncAria();
     });
   }
-  /**
-   * Properties of the element Button.
-   * @param value
-   */
-  set color(value) {
-    this.setAttribute("color", value || "default");
-  }
-  /**
-   * Get color of the Button element.
-   * @returns {string|string}
-   */
+  set color(t2) {
+    this.setAttribute("color", t2 || "default");
+  }
   get color() {
     return this.getAttribute("color") || "default";
   }
-  /**
-   * Set variant of the Button element.
-   * @param value
-   */
-  set caret(value) {
-    this.setAttribute("caret", value);
-  }
-  /**
-   * Get variant of the Button element.
-   * @returns {boolean}
-   */
+  set caret(t2) {
+    this.setAttribute("caret", t2);
+  }
   get caret() {
     return this.hasAttribute("caret");
   }
-  /**
-   * Sets the 'round' attribute on the element. If the value is true, the attribute is added;
-   * otherwise, it is removed from the element.
-   * @param {boolean} value A boolean indicating whether to set or remove the 'round' attribute.
-   */
-  set round(value) {
-    if (value) {
-      this.setAttribute("round", "");
-    } else {
-      this.removeAttribute("round");
-    }
+  set round(t2) {
+    t2 ? this.setAttribute("round", "") : this.removeAttribute("round");
   }
-  /**
-   * Retrieves the value of the 'round' attribute as a boolean.
-   * Checks if the 'round' attribute is present on the element.
-   * @returns {boolean} True if the 'round' attribute exists, otherwise false.
-   */
   get round() {
     return this.hasAttribute("round");
   }
-  /**
-   * Set variant of the Button element.
-   * @param value
-   */
-  set tooltip(value) {
-    this.setAttribute("tooltip", value);
-  }
-  /**
-   * Get variant of the Button element.
-   * @returns {boolean}
-   */
+  set tooltip(t2) {
+    this.setAttribute("tooltip", t2);
+  }
   get tooltip() {
     return this.hasAttribute("tooltip");
   }
-  /**
-   * Set the accessible label of the Button element.
-   * @param {string|null} value The accessible label
-   */
-  set label(value) {
-    if (value === null || value === void 0) {
-      this.removeAttribute("label");
-    } else {
-      this.setAttribute("label", value);
-    }
+  set label(t2) {
+    null == t2 ? this.removeAttribute("label") : this.setAttribute("label", t2);
   }
-  /**
-   * Get the accessible label of the Button element.
-   * @returns {string|null} label - The accessible label
-   */
   get label() {
     return this.getAttribute("label");
   }
-  /**
-   * Set variant of the Button element.
-   * @param value
-   */
-  set dialog(value) {
-    this.setAttribute("dialog", value);
-  }
-  /**
-   * Get variant of the Button element.
-   * @returns {string|object}
-   */
+  set dialog(t2) {
+    this.setAttribute("dialog", t2);
+  }
   get dialog() {
     return this.getAttribute("dialog");
   }
-  /**
-   * Set active state of the Button element.
-   * @param {boolean} value The value to set
-   */
-  set active(value) {
+  set active(t2) {
     this.setAttribute("active", "");
   }
-  /**
-   * Get active state of the Button element.
-   * @returns {boolean} active - The active state
-   */
   get active() {
     return this.hasAttribute("active");
   }
-  /**
-   * Set disabled state of the Button element.
-   * @param {boolean} value The value to set
-   */
-  set disabled(value) {
-    this.removeAttribute("disabled");
-    if (value) {
-      this.setAttribute("disabled", "");
-    }
+  set disabled(t2) {
+    this.removeAttribute("disabled"), t2 && this.setAttribute("disabled", "");
   }
-  /**
-   * Get disabled state of the Button element.
-   * @returns {boolean} disabled - The disabled state
-   */
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  /**
-   * Set fill of the Button element.
-   * @param {string} value The value to set
-   */
-  set fill(value) {
-    this.setAttribute("fill", value);
-  }
-  /**
-   * Get fill of the Button element.
-   * @returns {string} fill - The fill value
-   */
+  set fill(t2) {
+    this.setAttribute("fill", t2);
+  }
   get fill() {
     return this.getAttribute("fill") || "solid";
   }
-  /**
-   * Set outline state of the Button element.
-   * @param {boolean} value The value to set
-   */
-  set outline(value) {
+  set outline(t2) {
     this.setAttribute("outline", "");
   }
-  /**
-   * Get outline state of the Button element.
-   * @returns {boolean} outline - The outline state
-   */
   get outline() {
     return this.hasAttribute("outline");
   }
-  /**
-   * Set stop propagation state of the Button element.
-   * @param {boolean} value The value to set
-   */
-  set stopPropagation(value) {
-    this.setAttribute("stop-propagation", bool(value));
-  }
-  /**
-   * Get stop propagation state of the Button element.
-   * @returns {boolean} stopPropagation - The stop propagation state
-   */
+  set stopPropagation(t2) {
+    this.setAttribute("stop-propagation", o(t2));
+  }
   get stopPropagation() {
-    return bool(this.getAttribute("stop-propagation"));
-  }
-  /**
-   * Sets the value of the custom event attribute.
-   * @param {string} value The value to be assigned to the custom event attribute.
-   */
-  set customEvent(value) {
-    this.setAttribute("custom-event", value);
-  }
-  /**
-   * Retrieves the value of the 'custom-event' attribute from the element.
-   * @returns {string | null} The value of the 'custom-event' attribute, or null if the attribute is not set.
-   */
+    return o(this.getAttribute("stop-propagation"));
+  }
+  set customEvent(t2) {
+    this.setAttribute("custom-event", t2);
+  }
   get customEvent() {
     return this.getAttribute("custom-event");
   }
-  /**
-   * Retrieves a mapped object containing custom event parameters extracted from the element's attributes.
-   * Attributes considered are those that begin with 'custom-event-'.
-   * The mapped object's keys are derived by removing the 'custom-event-' prefix from the attribute names,
-   * and the values are the corresponding attribute values.
-   * @returns {object} An object containing key-value pairs of custom event parameters.
-   */
   get customEventParameters() {
-    const attributes = Array.from(this.attributes).filter((attr) => attr.name.startsWith("custom-event-"));
-    return attributes.reduce((acc, attr) => {
-      const key = attr.name.replace("custom-event-", "");
-      acc[key] = attr.value;
-      return acc;
-    }, {});
-  }
-  /**
-   * Get CSS stylesheet for the Button element.
-   * @static
-   * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.
-   */
+    return Array.from(this.attributes).filter((t2) => t2.name.startsWith("custom-event-")).reduce((t2, o2) => (t2[o2.name.replace("custom-event-", "")] = o2.value, t2), {});
+  }
   static get cssStyleSheet() {
-    return styles;
+    return '.wje-button-solid.wje-color-primary{background-color:var(--wje-color-primary-9);border-color:var(--wje-color-primary-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-primary{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-9);color:var(--wje-color-primary-9)}.wje-button-link.wje-color-primary{background-color:transparent;border-color:transparent;color:var(--wje-color-primary-9)}.wje-button-solid.wje-color-complete{background-color:var(--wje-color-complete-9);border-color:var(--wje-color-complete-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-complete{background-color:var(--wje-color-complete-1);border-color:var(--wje-color-complete-9);color:var(--wje-color-complete-9)}.wje-button-link.wje-color-complete{background-color:transparent;border-color:transparent;color:var(--wje-color-complete-9)}.wje-button-solid.wje-color-success{background-color:var(--wje-color-success-9);border-color:var(--wje-color-success-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-success{background-color:var(--wje-color-success-1);border-color:var(--wje-color-success-9);color:var(--wje-color-success-9)}.wje-button-link.wje-color-success{background-color:transparent;border-color:transparent;color:var(--wje-color-success-9)}.wje-button-solid.wje-color-warning{background-color:var(--wje-color-warning-9);border-color:var(--wje-color-warning-9);color:var(--wje-color-black)}.wje-button-outline.wje-color-warning{background-color:var(--wje-color-warning-1);border-color:var(--wje-color-warning-11);color:var(--wje-color-warning-11)}.wje-button-link.wje-color-warning{background-color:transparent;border-color:transparent;color:var(--wje-color-warning-11)}.wje-button-solid.wje-color-danger{background-color:var(--wje-color-danger-9);border-color:var(--wje-color-danger-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-danger{background-color:var(--wje-color-danger-1);border-color:var(--wje-color-danger-9);color:var(--wje-color-danger-9)}.wje-button-link.wje-color-danger{background-color:transparent;border-color:transparent;color:var(--wje-color-danger-9)}.wje-button-solid.wje-color-info{background-color:var(--wje-color-contrast-9);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-0)}.wje-button-outline.wje-color-info{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-9)}.wje-button-link.wje-color-info{background-color:transparent;border-color:transparent;color:var(--wje-color-contrast-9)}.wje-button-solid.wje-color-default{background-color:var(--wje-color-contrast-0);border-color:var(--wje-color-contrast-3);color:var(--wje-color-contrast-11)}.wje-button-outline.wje-color-default{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-6);color:var(--wje-color-contrast-11)}.wje-button-link.wje-color-default{background-color:transparent;border-color:transparent;color:var(--wje-color-contrast-11)}:host{--wje-padding-top: .4rem;--wje-padding-start: .5rem;--wje-padding-end: .5rem;--wje-padding-bottom: .4rem;display:inline-flex;position:relative;width:auto;cursor:pointer;margin-inline:var(--wje-button-margin-inline)}:host(.wje-button-group-button){display:block}.native-button{font-family:var(--wje-font-family);font-size:var(--wje-font-size);display:flex;position:relative;align-items:center;width:100%;height:100%;min-height:inherit;border-width:var(--wje-button-border-width);border-style:var(--wje-button-border-style);border-color:var(--wje-button-border-color);background-color:transparent;line-height:1;contain:layout style;cursor:pointer;z-index:0;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--wje-button-border-radius);padding-top:var(--wje-padding-top);padding-bottom:var(--wje-padding-bottom);padding-inline:var(--wje-padding-start) var(--wje-padding-end);white-space:nowrap}.native-button:hover{outline-style:solid;outline-width:var(--wje-button-outline-width);transition:outline-width .1s linear}@media(any-hover:hover){.wje-button-solid.wje-color-primary:hover{background-color:var(--wje-color-primary-9);border-color:var(--wje-color-primary-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-primary-2)}.wje-button-outline.wje-color-primary:hover{background-color:var(--wje-color-primary-1);border-color:var(--wje-color-primary-9);color:var(--wje-color-primary-9);outline-color:var(--wje-color-primary-2)}.wje-button-link.wje-color-primary:hover{background-color:var(--wje-color-primary-1);border-color:transparent;color:var(--wje-color-primary-9);outline-color:transparent;outline-width:0}.wje-button-solid.wje-color-complete:hover{background-color:var(--wje-color-complete-9);border-color:var(--wje-color-complete-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-complete-2)}.wje-button-outline.wje-color-complete:hover{background-color:var(--wje-color-complete-1);border-color:var(--wje-color-complete-9);color:var(--wje-color-complete-9);outline-color:var(--wje-color-complete-2)}.wje-button-link.wje-color-complete:hover{background-color:var(--wje-color-complete-1);border-color:transparent;color:var(--wje-color-complete-9);outline-color:transparent;outline-width:0}.wje-button-solid.wje-color-success:hover{background-color:var(--wje-color-success-9);border-color:var(--wje-color-success-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-success-2)}.wje-button-outline.wje-color-success:hover{background-color:var(--wje-color-success-1);border-color:var(--wje-color-success-9);color:var(--wje-color-success-9);outline-color:var(--wje-color-success-2)}.wje-button-link.wje-color-success:hover{background-color:var(--wje-color-success-1);border-color:transparent;color:var(--wje-color-success-9);outline-color:transparent;outline-width:0}.wje-button-solid.wje-color-warning:hover{background-color:var(--wje-color-warning-9);border-color:var(--wje-color-warning-9);color:var(--wje-color-black);outline-color:var(--wje-color-warning-2)}.wje-button-outline.wje-color-warning:hover{background-color:var(--wje-color-warning-1);border-color:var(--wje-color-warning-11);color:var(--wje-color-warning-11);outline-color:var(--wje-color-warning-2)}.wje-button-link.wje-color-warning:hover{background-color:var(--wje-color-warning-1);border-color:transparent;color:var(--wje-color-warning-11);outline-color:transparent;outline-width:0}.wje-button-solid.wje-color-danger:hover{background-color:var(--wje-color-danger-9);border-color:var(--wje-color-danger-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-danger-2)}.wje-button-outline.wje-color-danger:hover{background-color:var(--wje-color-danger-1);border-color:var(--wje-color-danger-9);color:var(--wje-color-danger-9);outline-color:var(--wje-color-danger-2)}.wje-button-link.wje-color-danger:hover{background-color:var(--wje-color-danger-1);border-color:transparent;color:var(--wje-color-danger-9);outline-color:transparent;outline-width:0}.wje-button-solid.wje-color-info:hover{background-color:var(--wje-color-contrast-9);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-0);outline-color:var(--wje-color-contrast-3)}.wje-button-outline.wje-color-info:hover{background-color:var(--wje-color-contrast-1);border-color:var(--wje-color-contrast-9);color:var(--wje-color-contrast-9);outline-color:var(--wje-color-contrast-3)}.wje-button-link.wje-color-info:hover{background-color:var(--wje-color-contrast-3);border-color:transparent;color:var(--wje-color-contrast-11);outline-color:transparent;outline-width:0}.wje-button-solid.wje-color-default:hover{background-color:var(--wje-color-contrast-0);border-color:var(--wje-color-contrast-3);color:var(--wje-color-contrast-11);outline-color:var(--wje-color-contrast-3)}.wje-button-outline.wje-color-default:hover{background-color:var(--wje-color-contrast-2);border-color:var(--wje-color-contrast-6);color:var(--wje-color-contrast-11);outline-color:var(--wje-color-contrast-3)}.wje-button-link.wje-color-default:hover{background-color:var(--wje-color-contrast-3);border-color:transparent;color:var(--wje-color-contrast-11);outline-color:transparent;outline-width:0}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1;line-height:normal}.wje-button-link{border-width:var(--wje-button-border-width);border-radius:var(--wje-button-border-radius);border-color:transparent;background-color:transparent}.wje-button-disabled{cursor:default;opacity:.5;pointer-events:none}:host([round]) .native-button{border-radius:var(--wje-border-radius-pill)}:host([circle]) .native-button{border-radius:var(--wje-border-radius-circle);aspect-ratio:1/1;width:1.988rem;display:flex;align-items:center;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}:host([size="small"]) .native-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem}:host([size="large"]) .native-button{--wje-padding-top: .6rem;--wje-padding-start: .7rem;--wje-padding-end: .7rem;--wje-padding-bottom: .6rem}:host([size="small"][circle]) .native-button{width:1.688rem;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}:host([size="large"][circle]) .native-button{width:2.388rem;--wje-padding-top: 0;--wje-padding-start: 0;--wje-padding-end: 0;--wje-padding-bottom: 0}::slotted(wje-icon[slot="start"]){margin:0 .3rem 0 0}::slotted(wje-icon[slot="end"]){margin:0 -.2rem 0 .3rem}:host(:not([only-caret])) slot[name=caret]{padding:0 0 0 .3rem}:host([only-caret]) .native-button{aspect-ratio:1/1;width:1.988rem;display:flex;align-items:center}:host([only-caret]) slot[name=caret]{padding:0;display:block}::slotted([slot="toggle"]){display:none}::slotted([slot="toggle"].show){display:block}';
   }
-  /**
-   * Get observed attributes for the Button element.
-   * @static
-   * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.
-   */
   static get observedAttributes() {
     return ["disabled", "color", "value", "active", "href", "toggle", "label", "aria-label"];
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(t2, o2, e2) {
     var _a, _b;
-    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
-    if (["disabled", "value", "active", "href", "label", "aria-label"].includes(name)) {
-      (_b = this.syncAria) == null ? void 0 : _b.call(this);
-    }
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, t2, o2, e2), ["disabled", "value", "active", "href", "label", "aria-label"].includes(t2) && ((_b = this.syncAria) == null ? void 0 : _b.call(this));
   }
-  /**
-   * @summary Callback function that is called when the custom element is associated with a form.
-   * This function sets the internal `_form` property to the associated form.
-   * @param {HTMLFormElement} form The form the custom element is associated with.
-   */
-  formAssociatedCallback(form) {
-    this._form = form;
-  }
-  /**
-   * @summary Callback function that is called when the form-associated state of the custom element changes.
-   * This function updates the 'disabled' attribute of the element based on the new state.
-   * @param {boolean} disabled The new form-associated state.
-   */
-  formDisabledCallback(disabled) {
-    if (disabled) {
-      this.setAttribute("disabled", "");
-    } else {
-      this.removeAttribute("disabled");
-    }
+  formAssociatedCallback(t2) {
+    this._form = t2;
+  }
+  formDisabledCallback(t2) {
+    t2 ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
-  /**
-   * Setup attributes for the Button element.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * Draw method for the Button element.
-   * @returns {object} fragment - The document fragment containing the drawn element.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement(this.hasAttribute("href") ? "a" : "button");
-    this.native = native;
-    if (this.hasAttribute("href")) {
-      if (!this.disabled) {
-        native.setAttribute("href", this.getAttribute("href"));
-      }
-    } else {
-      if (this.type === "submit") {
-        native.setAttribute("type", "submit");
-      }
-      native.disabled = this.disabled;
-    }
-    native.classList.add("native-button");
-    native.setAttribute("part", "native");
-    this.classList.remove("wje-button-disabled");
-    if (this.disabled) native.classList.add("wje-button-disabled");
-    if (this.variant) native.classList.add("wje-button-" + this.variant);
-    if (this.hasAttribute("round")) native.classList.add("wje-button-round");
-    if (this.hasAttribute("circle")) native.classList.add("wje-button-circle");
-    if (this.outline) native.classList.add("wje-outline");
-    if (this.fill) native.classList.add("wje-button-" + this.fill);
-    if (this.size) native.classList.add("wje-button-" + this.size);
-    if (this.querySelectorAll("[slot=caret]").length < 1 && this.hasAttribute("caret") || this.hasAttribute("only-caret")) {
-      let i = document.createElement("wje-icon");
-      i.style.setProperty("--wje-icon-size", "14px");
-      i.setAttribute("slot", "caret");
-      i.setAttribute("name", "chevron-down");
-      i.setAttribute("part", "caret");
-      this.appendChild(i);
+    let t2 = document.createDocumentFragment(), o2 = document.createElement(this.hasAttribute("href") ? "a" : "button");
+    if (this.native = o2, this.hasAttribute("href") ? this.disabled || o2.setAttribute("href", this.getAttribute("href")) : ("submit" === this.type && o2.setAttribute("type", "submit"), o2.disabled = this.disabled), o2.classList.add("native-button"), o2.setAttribute("part", "native"), this.classList.remove("wje-button-disabled"), this.disabled && o2.classList.add("wje-button-disabled"), this.variant && o2.classList.add("wje-button-" + this.variant), this.hasAttribute("round") && o2.classList.add("wje-button-round"), this.hasAttribute("circle") && o2.classList.add("wje-button-circle"), this.outline && o2.classList.add("wje-outline"), this.fill && o2.classList.add("wje-button-" + this.fill), this.size && o2.classList.add("wje-button-" + this.size), this.querySelectorAll("[slot=caret]").length < 1 && this.hasAttribute("caret") || this.hasAttribute("only-caret")) {
+      let t3 = document.createElement("wje-icon");
+      t3.style.setProperty("--wje-icon-size", "14px"), t3.setAttribute("slot", "caret"), t3.setAttribute("name", "chevron-down"), t3.setAttribute("part", "caret"), this.appendChild(t3);
     }
     if (this.active) {
       this.classList.add("wje-active");
-      let i = document.createElement("wje-icon");
-      i.setAttribute("name", "check");
-      this.appendChild(i);
-    }
-    native.classList.add("wje-color-" + this.color, "wje-color");
-    let span = document.createElement("span");
-    span.setAttribute("part", "inner");
-    span.classList.add("button-inner");
-    let slot = document.createElement("slot");
-    slot.setAttribute("name", "icon-only");
-    span.appendChild(slot);
-    slot = document.createElement("slot");
-    slot.setAttribute("name", "start");
-    span.appendChild(slot);
-    slot = document.createElement("slot");
-    span.appendChild(slot);
-    slot = document.createElement("slot");
-    slot.setAttribute("name", "end");
-    span.appendChild(slot);
-    slot = document.createElement("slot");
-    slot.setAttribute("name", "caret");
-    span.appendChild(slot);
-    this.hasToggle = WjElementUtils.hasSlot(this, "toggle");
-    if (this.hasToggle) {
-      this.slotToggle = document.createElement("slot");
-      this.slotToggle.setAttribute("name", "toggle");
-      span.appendChild(this.slotToggle);
-    }
-    native.appendChild(span);
-    if (this.tooltip) {
-      let tooltip = document.createElement("wje-tooltip");
-      tooltip.setAttribute("content", this.getAttribute("tooltip"));
-      tooltip.setAttribute("placement", this.getAttribute("tooltip-placement") || "top");
-      tooltip.appendChild(native);
-      fragment.appendChild(tooltip);
-    } else {
-      fragment.appendChild(native);
-    }
-    return fragment;
+      let t3 = document.createElement("wje-icon");
+      t3.setAttribute("name", "check"), this.appendChild(t3);
+    }
+    o2.classList.add("wje-color-" + this.color, "wje-color");
+    let e2 = document.createElement("span");
+    e2.setAttribute("part", "inner"), e2.classList.add("button-inner");
+    let r2 = document.createElement("slot");
+    if (r2.setAttribute("name", "icon-only"), e2.appendChild(r2), r2 = document.createElement("slot"), r2.setAttribute("name", "start"), e2.appendChild(r2), r2 = document.createElement("slot"), e2.appendChild(r2), r2 = document.createElement("slot"), r2.setAttribute("name", "end"), e2.appendChild(r2), r2 = document.createElement("slot"), r2.setAttribute("name", "caret"), e2.appendChild(r2), this.hasToggle = l.hasSlot(this, "toggle"), this.hasToggle && (this.slotToggle = document.createElement("slot"), this.slotToggle.setAttribute("name", "toggle"), e2.appendChild(this.slotToggle)), o2.appendChild(e2), this.tooltip) {
+      let e3 = document.createElement("wje-tooltip");
+      e3.setAttribute("content", this.getAttribute("tooltip")), e3.setAttribute("placement", this.getAttribute("tooltip-placement") || "top"), e3.appendChild(o2), t2.appendChild(e3);
+    } else t2.appendChild(o2);
+    return t2;
   }
-  /**
-   * After draw method for the Button element.
-   */
   afterDraw() {
-    if (this.hasAttribute("route")) {
-      this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
-    }
-    if (this.hasToggle) this.syncToggleState();
-    if (this.hasAttribute("custom-event")) {
-      event.addListener(this, "click", null, __privateMethod(this, _Button_instances, populateCustomEvent_fn));
-    }
-    if (this.hasAttribute("dialog")) {
-      event.addListener(this, "click", null, this.eventDialogOpen);
-    } else {
-      event.addListener(this, "click", "wje-button:click", null);
-    }
-    if (this.hasToggle)
-      event.addListener(this, "click", "wje-button:toggle", this.toggleStates, {
-        stopPropagation: this.stopPropagation
-      });
-    if (this.type === "submit") {
-      event.addListener(this, "click", "wje-button:submit", () => {
-        var _a;
-        event.dispatchCustomEvent((_a = this.internals) == null ? void 0 : _a.form, "submit", {});
-      });
-    }
-    if (this.type === "reset") {
-      event.addListener(this, "click", "wje-button:reset", () => {
-        var _a;
-        (_a = this.internals) == null ? void 0 : _a.form.reset();
-      });
-    }
-    this.syncAria();
+    this.hasAttribute("route") && (this.unbindRouterLinks = t(this.parentElement, { selector: false })), this.hasToggle && this.syncToggleState(), this.hasAttribute("custom-event") && a.addListener(this, "click", null, __privateMethod(this, _n_instances, t_fn)), this.hasAttribute("dialog") ? a.addListener(this, "click", null, this.eventDialogOpen) : a.addListener(this, "click", "wje-button:click", null), this.hasToggle && a.addListener(this, "click", "wje-button:toggle", this.toggleStates, { stopPropagation: this.stopPropagation }), "submit" === this.type && a.addListener(this, "click", "wje-button:submit", () => {
+      var _a;
+      a.dispatchCustomEvent((_a = this.internals) == null ? void 0 : _a.form, "submit", {});
+    }), "reset" === this.type && a.addListener(this, "click", "wje-button:reset", () => {
+      var _a;
+      (_a = this.internals) == null ? void 0 : _a.form.reset();
+    }), this.syncAria();
   }
-  /**
-   * Before disconnect method for the Button element.
-   */
   beforeDisconnect() {
     var _a;
-    event.removeListener(this, "click", null, this.eventDialogOpen);
-    event.removeListener(this, "click", "wje-button:click", null);
-    event.removeListener(this, "click", "wje-button:toggle", this.toggleStates);
-    event.removeListener(this, "click", null, __privateMethod(this, _Button_instances, populateCustomEvent_fn));
-    event.removeListener(this, "click", "wje-button:submit", null);
-    event.removeListener(this, "click", "wje-button:reset", null);
-    this.removeEventListener("click", this.eventDialogOpen);
-    (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
-  }
-  /**
-   * Keeps toggle slot visibility aligned with the current value.
-   */
+    a.removeListener(this, "click", null, this.eventDialogOpen), a.removeListener(this, "click", "wje-button:click", null), a.removeListener(this, "click", "wje-button:toggle", this.toggleStates), a.removeListener(this, "click", null, __privateMethod(this, _n_instances, t_fn)), a.removeListener(this, "click", "wje-button:submit", null), a.removeListener(this, "click", "wje-button:reset", null), this.removeEventListener("click", this.eventDialogOpen), (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
+  }
   syncToggleState() {
     var _a, _b;
-    const nodes = ((_b = (_a = this.slotToggle) == null ? void 0 : _a.assignedElements) == null ? void 0 : _b.call(_a, { flatten: true })) || [];
-    const state = this.getAttribute("value") || this.getAttribute("toggle") || "on";
-    const selectedIndex = state === "off" ? 1 : 0;
-    const selected = nodes[selectedIndex] || nodes[0];
-    nodes.forEach((node) => node.classList.remove("show"));
-    selected == null ? void 0 : selected.classList.add("show");
-    if (state !== this.getAttribute("value")) {
-      this.setAttribute("value", state);
-    }
+    const t2 = ((_b = (_a = this.slotToggle) == null ? void 0 : _a.assignedElements) == null ? void 0 : _b.call(_a, { flatten: true })) || [], o2 = this.getAttribute("value") || this.getAttribute("toggle") || "on", e2 = t2["off" === o2 ? 1 : 0] || t2[0];
+    t2.forEach((t3) => t3.classList.remove("show")), e2 == null ? void 0 : e2.classList.add("show"), o2 !== this.getAttribute("value") && this.setAttribute("value", o2);
   }
-  /**
-   * Syncs accessibility attributes on the internal native control.
-   */
   syncAria() {
     var _a;
-    const native = this.native || ((_a = this.context) == null ? void 0 : _a.querySelector(".native-button"));
-    if (!native) return;
-    const isLink = this.hasAttribute("href");
-    const isToggle = !!this.hasToggle;
-    const pressed = isToggle && !isLink ? this.getAttribute("value") === "on" : void 0;
-    const label = this.label || this.getAttribute("aria-label");
-    if (label) {
-      native.setAttribute("aria-label", label);
-    } else {
-      native.removeAttribute("aria-label");
-    }
-    if (isLink) {
-      if (this.disabled) {
-        native.removeAttribute("href");
-        native.setAttribute("aria-disabled", "true");
-        native.setAttribute("tabindex", "-1");
-      } else {
-        native.setAttribute("href", this.getAttribute("href"));
-        native.removeAttribute("aria-disabled");
-        native.removeAttribute("tabindex");
-      }
-    } else {
-      native.disabled = this.disabled;
-      native.removeAttribute("aria-disabled");
-    }
-    if (pressed === void 0) {
-      native.removeAttribute("aria-pressed");
-    } else {
-      native.setAttribute("aria-pressed", pressed ? "true" : "false");
-    }
+    const t2 = this.native || ((_a = this.context) == null ? void 0 : _a.querySelector(".native-button"));
+    if (!t2) return;
+    const o2 = this.hasAttribute("href"), e2 = !!this.hasToggle && !o2 ? "on" === this.getAttribute("value") : void 0, r2 = this.label || this.getAttribute("aria-label");
+    r2 ? t2.setAttribute("aria-label", r2) : t2.removeAttribute("aria-label"), o2 ? this.disabled ? (t2.removeAttribute("href"), t2.setAttribute("aria-disabled", "true"), t2.setAttribute("tabindex", "-1")) : (t2.setAttribute("href", this.getAttribute("href")), t2.removeAttribute("aria-disabled"), t2.removeAttribute("tabindex")) : (t2.disabled = this.disabled, t2.removeAttribute("aria-disabled")), void 0 === e2 ? t2.removeAttribute("aria-pressed") : t2.setAttribute("aria-pressed", e2 ? "true" : "false");
   }
 }
-_Button_instances = new WeakSet();
-/**
- * Dispatches a custom event with specified parameters.
- * This method uses the `customEvent` and `customEventParameters` properties
- * to create and dispatch a `CustomEvent`. The event is configured to be
- * composed and bubbles up through the DOM.
- * @returns {void} This method does not return a value.
- */
-populateCustomEvent_fn = function() {
-  this.dispatchEvent(
-    new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true })
-  );
+_n_instances = new WeakSet();
+t_fn = function() {
+  this.dispatchEvent(new CustomEvent(this.customEvent, { detail: this.customEventParameters, composed: true, bubbles: true }));
 };
-/**
- * @summary A static property that indicates whether the custom element is form-associated or not.
- * Form-associated custom elements are elements that can participate in form submission.
- * @type {boolean}
- */
-__publicField(Button, "formAssociated", true);
-Button.define("wje-button", Button);
+__publicField(n, "formAssociated", true);
+n.define("wje-button", n);
 export {
-  Button as default
+  n as default
 };
 //# sourceMappingURL=wje-button.js.map