wj-elements 0.1.181 → 0.1.183

package/dist/light.css

@@ -254,6 +254,12 @@
     --wje-button-margin-inline: 0;
     --wje-button-outline-width: 0.5rem;
 
+    /* Button - Group */
+    --wje-button-group-border-radius: var(--wje-border-radius-medium);
+    --wje-button-group-border-width: 1px;
+    --wje-button-group-border-style: solid;
+    --wje-button-group-border-color: var(--wje-color-contrast-3);
+
     /* Card */
     --wje-card-border-radius: var(--wje-border-radius-large);
     --wje-card-border-color: transparent;
@@ -505,13 +511,15 @@
     --wje-select-border-width: 1px;
     --wje-select-border-style: solid;
     --wje-select-border-color: var(--wje-border-color);
+    --wje-select-border-radius: var(--wje-border-radius-medium) var(--wje-border-radius-medium) 0 0;
     --wje-select-options-border-width: 1px;
     --wje-select-options-border-style: var(--wje-border-style);
     --wje-select-options-border-color: var(--wje-border-color);
+    --wje-select-options-border-radius: 0 0 var(--wje-border-radius-medium) var(--wje-border-radius-medium);
     --wje-select-background: var(--wje-color-contrast-0);
     --wje-select-line-height: 20px;
     --wje-select-color: var(--wje-color);
-    --wje-select-border-radius: var(--wje-border-radius-medium);
+
     --wje-select-margin-bottom: var(--wje-spacing-x-small);
     --wje-select-find-margin-inline: var(--wje-spacing-x-small);
     --wje-select-find-margin-block: var(--wje-spacing-x-small);
@@ -543,7 +551,7 @@
     --wje-textarea-font-family: var(--wje-font-family);
     --wje-textarea-background-color: var(--wje-background);
     --wje-textarea-color: var(--wje-color);
-    --wje-textarea-color-invalid: var(--wje-color-danger);
+    --wje-textarea-color-invalid: var(--wje-color-danger-9);
     --wje-textarea-border-width: 1px;
     --wje-textarea-border-style: solid;
     --wje-textarea-border-color: var(--wje-border-color);

package/dist/packages/wje-button-group/button-group.element.d.ts

@@ -20,6 +20,49 @@ export default class ButtonGroup extends WJElement {
      * @returns {Array<string>} observedAttributes - The observed attributes array
      */
     static get observedAttributes(): Array<string>;
+    /**
+     * Sets the "active" attribute to indicate the active state.
+     * @param {boolean|string|number} value The value to set for the "active" attribute, indicating the active state.
+     */
+    set active(value: boolean | string | number);
+    /**
+     * Retrieves the value of the 'active' attribute.
+     * If the attribute is not set, it returns false.
+     * @returns {string|boolean} The value of the 'active' attribute or false if it is not set.
+     */
+    get active(): string | boolean;
+    /**
+     * Sets the color attribute of the element.
+     * @param {string} value The value to set for the color attribute.
+     */
+    set color(value: string);
+    /**
+     * Retrieves the current value of the 'color' attribute.
+     * If the 'color' attribute is not set, it defaults to 'primary'.
+     * @returns {string} The value of the 'color' attribute or the default value 'primary'.
+     */
+    get color(): string;
+    /**
+     * Sets the round attribute for the element.
+     * @param {string} value The value to set for the round attribute.
+     */
+    set round(value: string);
+    /**
+     * Returns whether the element has the 'round' attribute.
+     * @returns {boolean} True if the 'round' attribute is present, otherwise false.
+     */
+    get round(): boolean;
+    /**
+     * Sets the 'fill' attribute of the element.
+     * @param {string} value The value to assign to the 'fill' attribute.
+     */
+    set fill(value: string);
+    /**
+     * Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,
+     * it returns the default value 'link'.
+     * @returns {string} The value of the 'fill' attribute, or 'link' if the attribute is not present.
+     */
+    get fill(): string;
     /**
      * Draw method for the ButtonGroup element.
      * @returns {object} fragment - The document fragment
@@ -36,4 +79,18 @@ export default class ButtonGroup extends WJElement {
      * @returns {object} button - The button element
      */
     findButton(el: object): object;
+    /**
+     * Toggles the state of a group of buttons based on the active button.
+     * @param {object} activeButton The button that is currently active.
+     * @param {Array<object>} buttons An array of button objects to be toggled.
+     * @returns {void} This method does not return a value.
+     */
+    toggle(activeButton: object, buttons: Array<object>, index: any): void;
+    /**
+     * Updates the state of a button by removing one mode attribute and setting another mode attribute.
+     * @param {HTMLElement} button The button element whose state is to be updated.
+     * @param {string} modeToRemove The mode attribute to be removed from the button. Expected values are 'color' or 'fill'.
+     * @returns {void}
+     */
+    updateButtonState(button: HTMLElement, modeToRemove: string): void;
 }

package/dist/packages/wje-input/input.element.d.ts

@@ -42,13 +42,14 @@ export default class Input extends WJElement {
      */
     static formAssociated: boolean;
     /**
-     * Setter for the invalid attribute.
-     * @param {boolean} isInvalid Whether the input is invalid.
+     * Sets or removes the 'invalid' attribute on an element based on the provided value.
+     * @param {boolean} value If true, the 'invalid' attribute is set. If false, the 'invalid' attribute is removed.
      */
-    set invalid(isInvalid: boolean);
+    set invalid(value: boolean);
     /**
-     * Getter for the invalid attribute.
-     * @returns {boolean} Whether the attribute is present.
+     * Gets the value of the 'invalid' attribute.
+     * Determines whether the 'invalid' attribute is present on the element.
+     * @returns {boolean} True if the 'invalid' attribute is present, otherwise false.
      */
     get invalid(): boolean;
     pristine: boolean;
@@ -61,16 +62,42 @@ export default class Input extends WJElement {
      */
     set value(value: string);
     /**
-     * Getter for the value attribute.
-     * @returns {string} The value of the attribute.
+     * Retrieves the value from the input element if available; otherwise,
+     * returns the internal _value property or an empty string as the default.
+     * @returns {string} The current value from the input element, the internal _value, or an empty string.
      */
     get value(): string;
     _value: string;
+    /**
+     * Sets the label attribute of the element.
+     * @param {string} value The value to set as the label attribute.
+     */
+    set label(value: string);
+    /**
+     * Retrieves the value of the 'label' attribute if it exists.
+     * If the 'label' attribute is not set, it returns false.
+     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.
+     */
+    get label(): string | boolean;
+    /**
+     * Sets the custom error display attribute for an element.
+     * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.
+     */
+    set customErrorDisplay(value: boolean);
     /**
      * Getter for the customErrorDisplay attribute.
      * @returns {boolean} Whether the attribute is present.
      */
     get customErrorDisplay(): boolean;
+    /**
+     * Sets the `validateOnChange` property. If set to a truthy value, it adds the
+     * `validate-on-change` attribute to the element. If set to a falsy value, it
+     * removes the `validate-on-change` attribute from the element.
+     * @param {boolean} value Determines whether to add or remove the
+     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a
+     * falsy value removes it.
+     */
+    set validateOnChange(value: boolean);
     /**
      * Getter for the validateOnChange attribute.
      * @returns {boolean} Whether the attribute is present.
@@ -116,11 +143,41 @@ export default class Input extends WJElement {
      * @returns {string} The default value of the input element.
      */
     get defaultValue(): string;
+    /**
+     * Sets or removes the 'clearable' attribute on the element.
+     * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.
+     * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.
+     */
     set clearable(value: boolean);
+    /**
+     * Checks if the 'clearable' attribute is present on the element.
+     * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.
+     */
     get clearable(): boolean;
+    /**
+     * Sets the placeholder value for an element. If the provided value is non-empty,
+     * it assigns the value to the "placeholder" attribute. Otherwise, it removes
+     * the "placeholder" attribute from the element.
+     * @param {string} value The placeholder text to set or null/undefined to remove the attribute.
+     */
     set placeholder(value: string);
+    /**
+     * Retrieves the value of the 'placeholder' attribute from the element.
+     * If the attribute is not set, it returns an empty string.
+     * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.
+     */
     get placeholder(): string;
+    /**
+     * Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.
+     * If no value is provided, it removes the `variant` attribute from the element.
+     * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.
+     */
     set variant(value: string);
+    /**
+     * Retrieves the value of the 'variant' attribute from the element.
+     * If the attribute is not set, it defaults to 'default'.
+     * @returns {string} The value of the 'variant' attribute or 'default' if not set.
+     */
     get variant(): string;
     beforeDraw(): void;
     /**
@@ -155,9 +212,9 @@ export default class Input extends WJElement {
     validateInput(): void;
     validationError: string;
     /**
-     * @summary Propagates the validation state of the input.
-     * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.
-     * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.
+     * Checks and updates the validation state of the component based on its current properties.
+     * If the component is invalid and a custom error display is enabled, it dispatches an 'invalid' event.
+     * @returns {void} This method does not return a value.
      */
     propagateValidation(): void;
     /**

package/dist/packages/wje-options/options.element.d.ts

@@ -1,7 +1,7 @@
 import { default as WJElement } from '../wje-element/element.js';
 import { default as Option } from '../wje-option/option.js';
-import { default as InfiniteScroll } from '../wje-infinite-scroll/infinite-scroll.element.js';
-import { default as List } from '../wje-list/list.element.js';
+import { default as InfiniteScroll } from '../wje-infinite-scroll/infinite-scroll.js';
+import { default as List } from '../wje-list/list.js';
 /**
  * `Options` is a custom web component that represents a set of options.
  * It extends from `WJElement`.

package/dist/packages/wje-select/select.element.d.ts

@@ -170,6 +170,8 @@ export default class Select extends WJElement {
      * @returns {object} The value of the attribute.
      */
     get value(): object;
+    set required(value: boolean);
+    get required(): boolean;
     /**
      * Getter for the customErrorDisplay attribute.
      * @returns {boolean} Whether the attribute is present.
@@ -181,13 +183,16 @@ export default class Select extends WJElement {
      */
     get validateOnChange(): boolean;
     /**
-     * Setter for the invalid attribute.
-     * @param {boolean} isInvalid Whether the input is invalid.
+     * Sets the 'invalid' property of the element.
+     * When set to a truthy value, the 'invalid' attribute is added to the element.
+     * When set to a falsy value, the 'invalid' attribute is removed from the element.
+     * @param {boolean} value A boolean indicating whether the element is invalid.
      */
-    set invalid(isInvalid: boolean);
+    set invalid(value: boolean);
     /**
-     * Getter for the invalid attribute.
-     * @returns {boolean} Whether the attribute is present.
+     * Retrieves the value of the 'invalid' attribute.
+     * This method checks if the 'invalid' attribute is present on the element.
+     * @returns {boolean} Returns true if the 'invalid' attribute is present, otherwise false.
      */
     get invalid(): boolean;
     /**
@@ -263,9 +268,9 @@ export default class Select extends WJElement {
      * The options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.
      * If a `wje-options` element is present within the component, its loaded options are included in the merged list.
      * In the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order.
-     * @returns {Array<Object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.
+     * @returns {Array<object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.
      */
-    get options(): Array<any>;
+    get options(): Array<object>;
     /**
      * Sets the trigger value.
      * @param {string} value The trigger value to set.
@@ -276,6 +281,8 @@ export default class Select extends WJElement {
      * @returns {string} The trigger value.
      */
     get trigger(): string;
+    set offset(value: string);
+    get offset(): string;
     /**
      * Draws the component for the select.
      * @returns {DocumentFragment}
@@ -289,6 +296,7 @@ export default class Select extends WJElement {
      * @returns {void} Does not return a value. The method operates by updating the state and behavior of the component.
      */
     afterDraw(): void;
+    pristine: boolean;
     /**
      * Handles the option change event.
      * @param {Event} e The event.
@@ -411,9 +419,31 @@ export default class Select extends WJElement {
      */
     htmlSelectedItem(item: any): any;
     /**
-     * @summary Callback function that is called when the custom element is associated with a form.
-     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
-     * @param {HTMLFormElement} form The form the custom element is associated with.
+     * Clones and appends an icon from a template with slot "check" to the given option element.
+     * @param {HTMLElement} option The target option element where the "check" icon will be added.
+     * @returns {void}
+     */
+    optionCheckSlot(option: HTMLElement): void;
+    /**
+     * Validates the selection of options in the select element.
+     * Checks if the element is required and no option is selected,
+     * in which case it sets a validation error with a custom message.
+     * If the element passes validation, it clears any existing validation errors.
+     *
+     * @return {void} Does not return a value.
+     */
+    validateSelect(): void;
+    /**
+     * Checks and updates the validation state of the component based on its current properties.
+     * If the component is invalid and a custom error display is enabled, it dispatches an 'invalid' event.
+     * @returns {void} This method does not return a value.
+     */
+    propagateValidation(): void;
+    showInvalidMessage(): void;
+    /**
+     * Lifecycle callback invoked when the custom element becomes associated with a form element.
+     * @param {HTMLFormElement} form The form element the custom element is associated with.
+     * @returns {void}
      */
     formAssociatedCallback(form: HTMLFormElement): void;
     /**
@@ -452,11 +482,5 @@ export default class Select extends WJElement {
      * @returns {boolean} Returns true if all elements in the `elements` array are found within the `options` array, otherwise returns false.
      */
     areAllElementsInOptions(elements: any[], options: any[]): boolean;
-    /**
-     * Clones and appends an icon from a template with slot "check" to the given option element.
-     * @param {HTMLElement} option The target option element where the "check" icon will be added.
-     * @returns {void}
-     */
-    optionCheckSlot(option: HTMLElement): void;
     #private;
 }

package/dist/packages/wje-textarea/textarea.element.d.ts

@@ -65,6 +65,20 @@ export default class Textarea extends WJElement {
      */
     get value(): string;
     _value: string;
+    /**
+     * Sets the `validateOnChange` property. If set to a truthy value, it adds the
+     * `validate-on-change` attribute to the element. If set to a falsy value, it
+     * removes the `validate-on-change` attribute from the element.
+     * @param {boolean} value Determines whether to add or remove the
+     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a
+     * falsy value removes it.
+     */
+    set validateOnChange(value: boolean);
+    /**
+     * Getter for the validateOnChange attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get validateOnChange(): boolean;
     /**
      * Getter for the form attribute.
      * @returns {HTMLFormElement} The form the input is associated with.
@@ -121,6 +135,12 @@ export default class Textarea extends WJElement {
      * @param {Event} e The event object.
      */
     counterFn: (e: Event) => void;
+    /**
+     * @summary Displays the validation message for the input.
+     * If the input has a slot named 'error', it sets the text content of the element with attribute 'error-message' inside the slot to the validation message.
+     * If the input does not have an 'error' slot, it sets the text content of the errorMessage property to the validation message.
+     */
+    showInvalidMessage(): void;
     /**
      * @summary Validates the input.
      * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.

package/dist/wje-button-group.js

@@ -2,7 +2,8 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Button Group ]\n*/\n\n:host {\n    display: inline-block;\n    .native-button-group {\n        display: flex;\n        flex-wrap: nowrap;\n        line-height: 1;\n    }\n\n    slot {\n        display: contents;\n    }\n}\n\n::slotted(wje-button) {\n    margin: 0 !important;\n}\n";
+import { event } from "./event.js";
+const styles = "/*\n[ WJ Button Group ]\n*/\n\n:host {\n    --wje-button-outline-width: 0;\n    --wje-button-border-color: transparent;\n    display: inline-block;\n    .native-button-group {\n        position: relative;\n    }\n    .wje-button-group-content {\n        display: flex;\n        flex-wrap: nowrap;\n        slot {\n            display: contents;\n        }\n    }\n    .wje-button-group-border {\n        top: 0;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border-radius: var(--wje-button-group-border-radius);\n        border-width: var(--wje-button-group-border-width);\n        border-style: var(--wje-button-group-border-style);\n        border-color: var(--wje-button-group-border-color);\n    }\n}\n\n:host([round]) {\n    .wje-button-group-border {\n        --wje-button-group-border-radius: var(--wje-border-radius-pill);\n    }\n}\n\n::slotted(wje-button) {\n    margin: 0 !important;\n}\n";
 class ButtonGroup extends WJElement {
   /**
    * ButtonGroup constructor method.
@@ -16,6 +17,65 @@ class ButtonGroup extends WJElement {
      */
     __publicField(this, "className", "ButtonGroup");
   }
+  /**
+   * Sets the "active" attribute to indicate the active state.
+   * @param {boolean|string|number} value The value to set for the "active" attribute, indicating the active state.
+   */
+  set active(value) {
+    this.setAttribute("active", value);
+  }
+  /**
+   * Retrieves the value of the 'active' attribute.
+   * If the attribute is not set, it returns false.
+   * @returns {string|boolean} The value of the 'active' attribute or false if it is not set.
+   */
+  get active() {
+    return +this.getAttribute("active") || false;
+  }
+  /**
+   * Sets the color attribute of the element.
+   * @param {string} value The value to set for the color attribute.
+   */
+  set color(value) {
+    this.setAttribute("color", value);
+  }
+  /**
+   * Retrieves the current value of the 'color' attribute.
+   * If the 'color' attribute is not set, it defaults to 'primary'.
+   * @returns {string} The value of the 'color' attribute or the default value 'primary'.
+   */
+  get color() {
+    return this.getAttribute("color") || "primary";
+  }
+  /**
+   * Sets the round attribute for the element.
+   * @param {string} value The value to set for the round attribute.
+   */
+  set round(value) {
+    this.setAttribute("round", value);
+  }
+  /**
+   * Returns whether the element has the 'round' attribute.
+   * @returns {boolean} True if the 'round' attribute is present, otherwise false.
+   */
+  get round() {
+    return this.hasAttribute("round");
+  }
+  /**
+   * Sets the 'fill' attribute of the element.
+   * @param {string} value The value to assign to the 'fill' attribute.
+   */
+  set fill(value) {
+    this.setAttribute("fill", value);
+  }
+  /**
+   * Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,
+   * it returns the default value 'link'.
+   * @returns {string} The value of the 'fill' attribute, or 'link' if the attribute is not present.
+   */
+  get fill() {
+    return this.getAttribute("fill") || "link";
+  }
   /**
    * Get CSS stylesheet for the ButtonGroup element.
    * @static
@@ -47,9 +107,16 @@ class ButtonGroup extends WJElement {
     let element = document.createElement("div");
     element.classList.add("native-button-group");
     element.setAttribute("part", "native");
-    this.slotElement = document.createElement("slot");
-    element.appendChild(this.slotElement);
-    fragment.appendChild(element);
+    let content = document.createElement("div");
+    content.classList.add("wje-button-group-content");
+    let border = document.createElement("div");
+    border.classList.add("wje-button-group-border");
+    let slot = document.createElement("slot");
+    content.append(slot);
+    element.append(border);
+    element.append(content);
+    fragment.append(element);
+    this.slotElement = slot;
     return fragment;
   }
   /**
@@ -61,10 +128,16 @@ class ButtonGroup extends WJElement {
       let index = slottedElements.indexOf(el);
       let button = this.findButton(el);
       if (button) {
-        button.classList.add("wje-button-group-button");
-        button.classList.toggle("wje-button-group-first", index === 0);
-        button.classList.toggle("wje-button-group-inner", index > 0 && index < slottedElements.length - 1);
-        button.classList.toggle("wje-button-group-last", index === slottedElements.length - 1);
+        button.setAttribute("fill", this.fill);
+        if (this.round) {
+          button.round = true;
+        }
+        event.addListener(button, "wje-button:click", null, (e) => {
+          this.toggle(e.target, slottedElements, index);
+        });
+        if (this.active && this.active === index + 1) {
+          this.updateButtonState(button, "fill");
+        }
       }
     });
   }
@@ -77,6 +150,30 @@ class ButtonGroup extends WJElement {
     const selector = "wje-button";
     return el.closest(selector) ?? el.querySelector(selector);
   }
+  /**
+   * Toggles the state of a group of buttons based on the active button.
+   * @param {object} activeButton The button that is currently active.
+   * @param {Array<object>} buttons An array of button objects to be toggled.
+   * @returns {void} This method does not return a value.
+   */
+  toggle(activeButton, buttons, index) {
+    this.active = index + 1;
+    buttons.forEach((button) => {
+      const mode = button === activeButton ? "fill" : "color";
+      this.updateButtonState(button, mode);
+    });
+  }
+  /**
+   * Updates the state of a button by removing one mode attribute and setting another mode attribute.
+   * @param {HTMLElement} button The button element whose state is to be updated.
+   * @param {string} modeToRemove The mode attribute to be removed from the button. Expected values are 'color' or 'fill'.
+   * @returns {void}
+   */
+  updateButtonState(button, modeToRemove) {
+    button.removeAttribute(modeToRemove);
+    const modeToSet = modeToRemove === "color" ? "fill" : "color";
+    button.setAttribute(modeToSet, this[modeToSet]);
+  }
 }
 WJElement.define("wje-button-group", ButtonGroup);
 export {

package/dist/wje-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-button-group.js","sources":["../packages/wje-button-group/button-group.element.js","../packages/wje-button-group/button-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary ButtonGroup class\n * @class\n * @augments WJElement\n * @csspart native - The component's native wrapper.\n * @slot - The button group main content.\n * @csspart native - The component's native wrapper.\n */\n\nexport default class ButtonGroup extends WJElement {\n    /**\n     * ButtonGroup constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the ButtonGroup element\n     * @type {string}\n     */\n    className = 'ButtonGroup';\n\n    /**\n     * Get CSS stylesheet for the ButtonGroup element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the ButtonGroup element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Setup attributes for the ButtonGroup element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the ButtonGroup element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.classList.add('native-button-group');\n        element.setAttribute('part', 'native');\n\n        this.slotElement = document.createElement('slot');\n\n        element.appendChild(this.slotElement);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the ButtonGroup element.\n     */\n    afterDraw() {\n        const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];\n\n        slottedElements.forEach((el) => {\n            let index = slottedElements.indexOf(el);\n            let button = this.findButton(el);\n            if (button) {\n                button.classList.add('wje-button-group-button');\n                button.classList.toggle('wje-button-group-first', index === 0);\n                button.classList.toggle('wje-button-group-inner', index > 0 && index < slottedElements.length - 1);\n                button.classList.toggle('wje-button-group-last', index === slottedElements.length - 1);\n            }\n        });\n    }\n\n    /**\n     * Find button method to find the button element.\n     * @param {object} el The element\n     * @returns {object} button - The button element\n     */\n    findButton(el) {\n        const selector = 'wje-button';\n\n        return el.closest(selector) ?? el.querySelector(selector);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport ButtonGroup from './button-group.element.js';\n\n// export * from \"./button-group.element.js\";\nexport default ButtonGroup;\n\nWJElement.define('wje-button-group', ButtonGroup);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,qBAAqB;AAC3C,YAAQ,aAAa,QAAQ,QAAQ;AAErC,SAAK,cAAc,SAAS,cAAc,MAAM;AAEhD,YAAQ,YAAY,KAAK,WAAW;AAEpC,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,UAAM,kBAAkB,CAAC,GAAG,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAI,CAAE,CAAC;AAEhF,oBAAgB,QAAQ,CAAC,OAAO;AAC5B,UAAI,QAAQ,gBAAgB,QAAQ,EAAE;AACtC,UAAI,SAAS,KAAK,WAAW,EAAE;AAC/B,UAAI,QAAQ;AACR,eAAO,UAAU,IAAI,yBAAyB;AAC9C,eAAO,UAAU,OAAO,0BAA0B,UAAU,CAAC;AAC7D,eAAO,UAAU,OAAO,0BAA0B,QAAQ,KAAK,QAAQ,gBAAgB,SAAS,CAAC;AACjG,eAAO,UAAU,OAAO,yBAAyB,UAAU,gBAAgB,SAAS,CAAC;AAAA,MACrG;AAAA,IACA,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,IAAI;AACX,UAAM,WAAW;AAEjB,WAAO,GAAG,QAAQ,QAAQ,KAAK,GAAG,cAAc,QAAQ;AAAA,EAChE;AACA;AC9FA,UAAU,OAAO,oBAAoB,WAAW;"}
+{"version":3,"file":"wje-button-group.js","sources":["../packages/wje-button-group/button-group.element.js","../packages/wje-button-group/button-group.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary ButtonGroup class\n * @class\n * @augments WJElement\n * @csspart native - The component's native wrapper.\n * @slot - The button group main content.\n * @csspart native - The component's native wrapper.\n */\n\nexport default class ButtonGroup extends WJElement {\n    /**\n     * ButtonGroup constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the \"active\" attribute to indicate the active state.\n     * @param {boolean|string|number} value The value to set for the \"active\" attribute, indicating the active state.\n     */\n    set active(value) {\n        this.setAttribute('active', value);\n    }\n\n    /**\n     * Retrieves the value of the 'active' attribute.\n     * If the attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'active' attribute or false if it is not set.\n     */\n    get active() {\n        return +this.getAttribute('active') || false;\n    }\n\n    /**\n     * Sets the color attribute of the element.\n     * @param {string} value The value to set for the color attribute.\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Retrieves the current value of the 'color' attribute.\n     * If the 'color' attribute is not set, it defaults to 'primary'.\n     * @returns {string} The value of the 'color' attribute or the default value 'primary'.\n     */\n    get color() {\n        return this.getAttribute('color') || 'primary';\n    }\n\n    /**\n     * Sets the round attribute for the element.\n     * @param {string} value The value to set for the round attribute.\n     */\n    set round(value) {\n        this.setAttribute('round', value);\n    }\n\n    /**\n     * Returns whether the element has the 'round' attribute.\n     * @returns {boolean} True if the 'round' attribute is present, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the 'fill' attribute of the element.\n     * @param {string} value The value to assign to the 'fill' attribute.\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,\n     * it returns the default value 'link'.\n     * @returns {string} The value of the 'fill' attribute, or 'link' if the attribute is not present.\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'link';\n    }\n\n    /**\n     * Class name for the ButtonGroup element\n     * @type {string}\n     */\n    className = 'ButtonGroup';\n\n    /**\n     * Get CSS stylesheet for the ButtonGroup element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the ButtonGroup element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Setup attributes for the ButtonGroup element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the ButtonGroup element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.classList.add('native-button-group');\n        element.setAttribute('part', 'native');\n\n        let content = document.createElement('div');\n        content.classList.add('wje-button-group-content');\n\n        let border = document.createElement('div');\n        border.classList.add('wje-button-group-border');\n\n        let slot = document.createElement('slot');\n\n        content.append(slot);\n\n        element.append(border);\n        element.append(content);\n\n        fragment.append(element);\n\n        this.slotElement = slot;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the ButtonGroup element.\n     */\n    afterDraw() {\n        const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];\n\n        slottedElements.forEach((el) => {\n            let index = slottedElements.indexOf(el);\n            let button = this.findButton(el);\n            if (button) {\n                button.setAttribute('fill', this.fill);\n                if(this.round) {\n                    button.round = true;\n                }\n\n                event.addListener(button, 'wje-button:click', null,(e) => {\n                    this.toggle(e.target, slottedElements, index);\n                });\n\n                if(this.active && this.active === index + 1) {\n                    this.updateButtonState(button, 'fill')\n                }\n            }\n        });\n    }\n\n    /**\n     * Find button method to find the button element.\n     * @param {object} el The element\n     * @returns {object} button - The button element\n     */\n    findButton(el) {\n        const selector = 'wje-button';\n\n        return el.closest(selector) ?? el.querySelector(selector);\n    }\n\n    /**\n     * Toggles the state of a group of buttons based on the active button.\n     * @param {object} activeButton The button that is currently active.\n     * @param {Array<object>} buttons An array of button objects to be toggled.\n     * @returns {void} This method does not return a value.\n     */\n    toggle(activeButton, buttons, index) {\n        this.active = index + 1;\n        buttons.forEach(button => {\n            const mode = button === activeButton ? 'fill' : 'color';\n            this.updateButtonState(button, mode);\n        });\n    }\n\n    /**\n     * Updates the state of a button by removing one mode attribute and setting another mode attribute.\n     * @param {HTMLElement} button The button element whose state is to be updated.\n     * @param {string} modeToRemove The mode attribute to be removed from the button. Expected values are 'color' or 'fill'.\n     * @returns {void}\n     */\n    updateButtonState(button, modeToRemove) {\n        button.removeAttribute(modeToRemove);\n\n        const modeToSet = modeToRemove === 'color' ? 'fill' : 'color';\n        button.setAttribute(modeToSet, this[modeToSet]);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport ButtonGroup from './button-group.element.js';\n\n// export * from \"./button-group.element.js\";\nexport default ButtonGroup;\n\nWJElement.define('wje-button-group', ButtonGroup);\n"],"names":[],"mappings":";;;;;;AAYe,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV,UAAO;AA0EX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EAzEhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO,OAAO;AACd,SAAK,aAAa,UAAU,KAAK;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,SAAS;AACT,WAAO,CAAC,KAAK,aAAa,QAAQ,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,qBAAqB;AAC3C,YAAQ,aAAa,QAAQ,QAAQ;AAErC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,0BAA0B;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,yBAAyB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,YAAQ,OAAO,IAAI;AAEnB,YAAQ,OAAO,MAAM;AACrB,YAAQ,OAAO,OAAO;AAEtB,aAAS,OAAO,OAAO;AAEvB,SAAK,cAAc;AAEnB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,UAAM,kBAAkB,CAAC,GAAG,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAI,CAAE,CAAC;AAEhF,oBAAgB,QAAQ,CAAC,OAAO;AAC5B,UAAI,QAAQ,gBAAgB,QAAQ,EAAE;AACtC,UAAI,SAAS,KAAK,WAAW,EAAE;AAC/B,UAAI,QAAQ;AACR,eAAO,aAAa,QAAQ,KAAK,IAAI;AACrC,YAAG,KAAK,OAAO;AACX,iBAAO,QAAQ;AAAA,QACnC;AAEgB,cAAM,YAAY,QAAQ,oBAAoB,MAAK,CAAC,MAAM;AACtD,eAAK,OAAO,EAAE,QAAQ,iBAAiB,KAAK;AAAA,QAChE,CAAiB;AAED,YAAG,KAAK,UAAU,KAAK,WAAW,QAAQ,GAAG;AACzC,eAAK,kBAAkB,QAAQ,MAAM;AAAA,QACzD;AAAA,MACA;AAAA,IACA,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,IAAI;AACX,UAAM,WAAW;AAEjB,WAAO,GAAG,QAAQ,QAAQ,KAAK,GAAG,cAAc,QAAQ;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,OAAO,cAAc,SAAS,OAAO;AACjC,SAAK,SAAS,QAAQ;AACtB,YAAQ,QAAQ,YAAU;AACtB,YAAM,OAAO,WAAW,eAAe,SAAS;AAChD,WAAK,kBAAkB,QAAQ,IAAI;AAAA,IAC/C,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,kBAAkB,QAAQ,cAAc;AACpC,WAAO,gBAAgB,YAAY;AAEnC,UAAM,YAAY,iBAAiB,UAAU,SAAS;AACtD,WAAO,aAAa,WAAW,KAAK,SAAS,CAAC;AAAA,EACtD;AACA;AC/MA,UAAU,OAAO,oBAAoB,WAAW;"}

package/dist/wje-button.js

@@ -14,7 +14,7 @@ import WJElement from "./wje-element.js";
 import { I as Icon } from "./icon-DY5AZ6xM.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-5);\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-5);\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.813rem;\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.5rem;\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.188rem;\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]) slot[name='caret'] {\n    padding: 0;\n    display: block;\n}\n\n:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n}\n\n:host(.wje-button-group-inner) .native-button {\n    border-radius: 0;\n}\n\n:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n}\n\n:host(.wje-button-group-button:not(.wje-button-group-first)) {\n    margin-inline-start: calc(-1 * var(--wje-button-border-width)) !important;\n}\n\n::slotted([slot='toggle']) {\n    display: none;\n}\n\n::slotted([slot='toggle'].show) {\n    display: block;\n}\n";
+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-5);\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-5);\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.
@@ -250,7 +250,7 @@ class Button extends WJElement {
    * @returns {Array<string>} observedAttributes - The observed attributes array for the Button element.
    */
   static get observedAttributes() {
-    return ["disabled"];
+    return ["disabled", "color"];
   }
   /**
    * @summary Callback function that is called when the custom element is associated with a form.