wj-elements 0.1.180 → 0.1.182

package/dist/universal-service.js

@@ -0,0 +1,117 @@
+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);
+class UniversalService {
+  constructor(props = {}) {
+    __publicField(this, "findByKey", (attrName, key, keyValue) => {
+      if (this._store.getState()[attrName] instanceof Array) {
+        return this._store.getState()[attrName].find((item) => item[key] === keyValue);
+      } else {
+        console.warn(` Attribute ${attrName} is not array`);
+        return null;
+      }
+    });
+    __publicField(this, "findById", (attrName, id) => {
+      if (this._store.getState()[attrName] instanceof Array) {
+        return this._store.getState()[attrName].find((item) => item.id === id);
+      } else {
+        console.warn(` Attribute ${attrName} is not array`);
+        return null;
+      }
+    });
+    __publicField(this, "findAttributeValue", (attrName) => {
+      return this._store.getState()[attrName];
+    });
+    __publicField(this, "update", (data, action) => {
+      this._store.dispatch(action(data));
+    });
+    __publicField(this, "add", (data, action) => {
+      this._store.dispatch(action(data));
+    });
+    __publicField(this, "loadPromise", (url, action, method = "GET", data = "", permissionCallBack = () => {
+    }) => {
+      return fetch(url, {
+        method,
+        body: data,
+        headers: {
+          "Content-Type": "application/json"
+        },
+        async: true
+      }).then((response, e) => {
+        var _a;
+        let permissions = (_a = response.headers.get("permissions")) == null ? void 0 : _a.split(",");
+        permissionCallBack(permissions);
+        if (response.ok) {
+          return response.json();
+        } else {
+          throw response.json();
+        }
+      }).then((responseData) => {
+        this._store.dispatch(action(responseData));
+        return responseData;
+      });
+    });
+    __publicField(this, "loadOnePromise", (url, action) => {
+      return fetch(url, {
+        headers: {
+          "Content-Type": "application/json"
+        }
+      }).then((response) => {
+        const responseData = response.json();
+        if (action) {
+          this._store.dispatch(action(responseData));
+        }
+        return responseData;
+      });
+    });
+    this._store = props.store;
+  }
+  _request(url, data, action, dispatchMethod, method, signal) {
+    let promise = fetch(url, {
+      method,
+      ...data ? { body: JSON.stringify(data) } : {},
+      headers: {
+        "Content-Type": "application/json"
+      },
+      ...signal ? { signal } : {}
+    }).then((response) => {
+      if (response.ok) {
+        return response.json();
+      } else {
+        return response.json();
+      }
+    });
+    return this.dispatch(promise, dispatchMethod, action);
+  }
+  put(url, data, action, dispatchMethod = true, signal = null) {
+    return this._request(url, data, action, dispatchMethod, "PUT", signal);
+  }
+  post(url, data, action, dispatchMethod = true, signal = null) {
+    return this._request(url, data, action, dispatchMethod, "POST", signal);
+  }
+  delete(url, data, action, dispatchMethod = true, signal = null) {
+    return this._request(url, data, action, dispatchMethod, "DELETE", signal);
+  }
+  //url, action, dispatchMethod, signa
+  get(url, action, dispatchMethod = true, signal = null) {
+    return this._request(url, null, action, dispatchMethod, "GET", signal);
+  }
+  patch(url, data, action, dispatchMethod = true, signal = null) {
+    return this._request(url, data, action, dispatchMethod, "PATCH", signal);
+  }
+  dispatch(promise, dispatchMethod, action) {
+    if (dispatchMethod) {
+      return promise.then((data) => {
+        this._store.dispatch(action(data.data));
+        return data;
+      }).catch((error) => {
+        console.error(error);
+      });
+    }
+    return promise;
+  }
+}
+export {
+  UniversalService
+};
+//# sourceMappingURL=universal-service.js.map

package/dist/universal-service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"universal-service.js","sources":["../packages/utils/universal-service.js"],"sourcesContent":["export class UniversalService {\n    constructor(props = {}) {\n        this._store = props.store;\n    }\n\n    findByKey = (attrName, key, keyValue) => {\n        if (this._store.getState()[attrName] instanceof Array) {\n            return this._store.getState()[attrName].find((item) => item[key] === keyValue);\n        } else {\n            console.warn(` Attribute ${attrName} is not array`);\n            return null;\n        }\n    };\n\n    findById = (attrName, id) => {\n        if (this._store.getState()[attrName] instanceof Array) {\n            return this._store.getState()[attrName].find((item) => item.id === id);\n        } else {\n            console.warn(` Attribute ${attrName} is not array`);\n            return null;\n        }\n    };\n\n    findAttributeValue = (attrName) => {\n        return this._store.getState()[attrName];\n    };\n\n    update = (data, action) => {\n        this._store.dispatch(action(data));\n    };\n\n    add = (data, action) => {\n        this._store.dispatch(action(data));\n    };\n\n    _request(url, data, action, dispatchMethod, method, signal) {\n        let promise = fetch(url, {\n            method: method,\n            ...(data ? { body: JSON.stringify(data) } : {}),\n            headers: {\n                'Content-Type': 'application/json',\n            },\n            ...(signal ? { signal } : {}),\n        }).then((response) => {\n            if (response.ok) {\n                return response.json();\n            } else {\n                return response.json();\n            }\n        });\n\n        return this.dispatch(promise, dispatchMethod, action);\n    }\n\n    put(url, data, action, dispatchMethod = true, signal = null) {\n        return this._request(url, data, action, dispatchMethod, 'PUT', signal);\n    }\n\n    post(url, data, action, dispatchMethod = true, signal = null) {\n        return this._request(url, data, action, dispatchMethod, 'POST', signal);\n    }\n\n    delete(url, data, action, dispatchMethod = true, signal = null) {\n        return this._request(url, data, action, dispatchMethod, 'DELETE', signal);\n    }\n\n    //url, action, dispatchMethod, signa\n    get(url, action, dispatchMethod = true, signal = null) {\n        return this._request(url, null, action, dispatchMethod, 'GET', signal);\n    }\n\n    patch(url, data, action, dispatchMethod = true, signal = null) {\n        return this._request(url, data, action, dispatchMethod, 'PATCH', signal);\n    }\n\n    dispatch(promise, dispatchMethod, action) {\n        if (dispatchMethod) {\n            return promise\n                .then((data) => {\n                    this._store.dispatch(action(data.data));\n                    return data;\n                })\n                .catch((error) => {\n                    console.error(error);\n                });\n        }\n        return promise;\n    }\n\n    loadPromise = (\n        url,\n        action,\n        method = 'GET',\n        data = '',\n        permissionCallBack = () => {\n            //\n            // No empty function\n        }\n    ) => {\n        return fetch(url, {\n            method: method,\n            body: data,\n            headers: {\n                'Content-Type': 'application/json',\n            },\n            async: true,\n        })\n            .then((response, e) => {\n                let permissions = response.headers.get('permissions')?.split(',');\n                permissionCallBack(permissions);\n\n                if (response.ok) {\n                    return response.json();\n                } else {\n                    throw response.json();\n                }\n            })\n            .then((responseData) => {\n                this._store.dispatch(action(responseData));\n                return responseData;\n            });\n    };\n\n    loadOnePromise = (url, action) => {\n        return fetch(url, {\n            headers: {\n                'Content-Type': 'application/json',\n            },\n        }).then((response) => {\n            const responseData = response.json();\n            if (action) {\n                this._store.dispatch(action(responseData));\n            }\n            return responseData;\n        });\n    };\n}\n"],"names":[],"mappings":"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"}

package/dist/utils.js

@@ -0,0 +1,7 @@
+const bool = (v) => {
+  return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
+};
+export {
+  bool
+};
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../packages/utils/utils.js"],"sourcesContent":["export const bool = (v) => {\n    return v === 'false' || v === 'null' || v === 'NaN' || v === 'undefined' || v === '0' ? false : !!v;\n};\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,CAAC,MAAM;AACvB,SAAO,MAAM,WAAW,MAAM,UAAU,MAAM,SAAS,MAAM,eAAe,MAAM,MAAM,QAAQ,CAAC,CAAC;AACtG;"}

package/dist/wje-accordion-item.js

@@ -1,7 +1,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, { event } from "./wje-element.js";
+import WJElement from "./wje-element.js";
+import { event } from "./event.js";
 const styles = "/*\n[ WJ Accordion Item ]\n*/\n\n:host {\n    --wje-accordion-background: var(--wje-color-contrast-0);\n    --wje-accordion-border: var(--wje-color-contrast-0);\n    --wje-accordion-border-radius: var(--wje-border-radius-large);\n    --wje-accordion-background-hover: var(--wje-color-contrast-1);\n    --wje-accordion-border-hover: var(--wje-color-contrast-2);\n    --wje-accordion-background-expanded: var(--wje-color-contrast-0);\n    --wje-accordion-border-expanded: var(--wje-color-contrast-0);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='primary']) {\n    --wje-accordion-background: var(--wje-color-primary-1);\n    --wje-accordion-border: var(--wje-color-primary-1);\n    --wje-accordion-background-hover: var(--wje-color-primary-2);\n    --wje-accordion-border-hover: var(--wje-color-primary-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-primary-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='complete']) {\n    --wje-accordion-background: var(--wje-color-complete-1);\n    --wje-accordion-border: var(--wje-color-complete-1);\n    --wje-accordion-background-hover: var(--wje-color-complete-2);\n    --wje-accordion-border-hover: var(--wje-color-complete-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-complete-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='success']) {\n    --wje-accordion-background: var(--wje-color-success-1);\n    --wje-accordion-border: var(--wje-color-success-1);\n    --wje-accordion-background-hover: var(--wje-color-success-2);\n    --wje-accordion-border-hover: var(--wje-color-success-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-success-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='danger']) {\n    --wje-accordion-background: var(--wje-color-danger-1);\n    --wje-accordion-border: var(--wje-color-danger-1);\n    --wje-accordion-background-hover: var(--wje-color-danger-2);\n    --wje-accordion-border-hover: var(--wje-color-danger-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-danger-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='warning']) {\n    --wje-accordion-background: var(--wje-color-warning-1);\n    --wje-accordion-border: var(--wje-color-warning-1);\n    --wje-accordion-background-hover: var(--wje-color-warning-2);\n    --wje-accordion-border-hover: var(--wje-color-warning-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-warning-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host([color='info']) {\n    --wje-accordion-background: var(--wje-color-info-1);\n    --wje-accordion-border: var(--wje-color-info-1);\n    --wje-accordion-background-hover: var(--wje-color-info-2);\n    --wje-accordion-border-hover: var(--wje-color-info-2);\n    --wje-accordion-background-expanded: transparent;\n    --wje-accordion-border-expanded: var(--wje-color-info-3);\n    --wje-accordion-headline-color: var(--wje-color-contrast-11) !important;\n    --wje-accordion-content-color: var(--wje-color-contrast-6);\n}\n\n:host {\n    display: block;\n    margin-bottom: 0.5rem;\n}\n\n/*:host(.expanding) #content {*/\n/*    display: none;*/\n/*}*/\n\n/*:host(.collapsing) #content {*/\n/*    max-height: 0;*/\n/*}*/\n\n.native-accordion-item {\n    display: block;\n    background-color: var(--wje-accordion-background);\n    border-radius: var(--wje-accordion-border-radius);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--wje-accordion-border);\n    transition: background-color 200ms ease-in-out;\n    &:hover {\n        background-color: var(--wje-accordion-background-hover);\n        border-color: var(--wje-accordion-border-hover);\n    }\n}\n\n:host(.expanded) .native-accordion-item {\n    background-color: var(--wje-accordion-background-expanded);\n    border-color: var(--wje-accordion-border-expanded);\n}\n\n.headline {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    font-size: var(--wje-font-size) !important;\n    color: var(--wje-accordion-headline-color);\n    line-height: normal !important;\n    margin: 0 !important;\n    padding: 0.75rem;\n}\n\n[name='description'] {\n    font-size: var(--wje-font-size-small);\n    color: var(--wje-color-contrast-6);\n}\n\nwje-icon {\n    margin-left: auto;\n    transform: rotate(var(--wje-accordion-marker-rotate, 0deg));\n}\n\n#content {\n    /*background: var(--wje-accordion-background);*/\n    display: block;\n    color: var(--wje-accordion-content-color);\n    overflow: hidden;\n    max-height: 0;\n    transition: max-height 250ms ease-in-out;\n}\n\n#content slot {\n    display: block;\n    margin: 0 0.75rem 0.75rem 0.75rem;\n}\n\n:host(.expanded) #content {\n    /*display: block;*/\n    /*padding: 0 .75rem .75rem .75rem;*/\n    max-height: 100vh;\n}\n";
 class AccordionItem extends WJElement {
   /**

package/dist/wje-accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-accordion-item.js","sources":["../packages/wje-accordion-item/accordion-item.element.js","../packages/wje-accordion-item/accordion-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion Item element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion-item\n * @status stable\n * @augments WJElement\n * @slot - The accordion item main content.\n * @tag wje-accordion\n */\nexport default class AccordionItem extends WJElement {\n    /**\n     * Constructor for the AccordionItem class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Accordion Item element.\n     * @type {string}\n     */\n    className = 'AccordionItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Accordion Item element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Accordion Item element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-accordion-item');\n\n        let headline = document.createElement('div');\n        headline.setAttribute('part', 'headline');\n        headline.classList.add('headline');\n\n        let headlineDescription = document.createElement('slot');\n        headlineDescription.setAttribute('part', 'description');\n        headlineDescription.setAttribute('name', 'description');\n\n        let slotHeadline = document.createElement('slot');\n        slotHeadline.setAttribute('name', 'headline');\n\n        let toggle = document.createElement('slot');\n        toggle.setAttribute('part', 'toggle');\n        toggle.setAttribute('name', 'toggle');\n\n        let mark = document.createElement('wje-icon');\n        mark.setAttribute('name', 'chevron-down');\n\n        let content = document.createElement('div');\n        content.setAttribute('part', 'content');\n        content.setAttribute('id', 'content');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'content');\n\n        toggle.appendChild(mark);\n\n        headline.appendChild(slotHeadline);\n        headline.appendChild(toggle);\n        headline.appendChild(headlineDescription);\n\n        content.appendChild(slot);\n\n        native.appendChild(headline);\n        native.appendChild(content);\n\n        fragment.appendChild(native);\n\n        this.headline = headline;\n        this.toggle = toggle;\n\n        return fragment;\n    }\n\n    /**\n     * Method to execute after the Accordion Item element is drawn.\n     */\n    afterDraw() {\n        if (!this.classList.contains('expanded')) this.classList.add('collapsed');\n\n        this.headline.addEventListener('click', () => {\n            if (this.classList.contains('collapsed')) {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:open');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '180deg');\n                this.expand();\n            } else {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:close');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '0deg');\n                this.collapse();\n            }\n        });\n    }\n\n    /**\n     * Method to handle the attribute changes.\n     */\n    collapse = () => {\n        this.classList.remove('expanded');\n        this.classList.add('collapsed');\n    };\n\n    /**\n     * Method to handle the attribute changes.\n     */\n    expand = () => {\n        this.classList.remove('collapsed');\n        this.classList.add('expanded');\n    };\n}\n","import AccordionItem from './accordion-item.element.js';\n\nexport default AccordionItem;\n\nAccordionItem.define('wje-accordion-item', AccordionItem);\n"],"names":[],"mappings":";;;;;AAWe,MAAM,sBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIjD,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAsGZ;AAAA;AAAA;AAAA,oCAAW,MAAM;AACb,WAAK,UAAU,OAAO,UAAU;AAChC,WAAK,UAAU,IAAI,WAAW;AAAA,IACjC;AAKD;AAAA;AAAA;AAAA,kCAAS,MAAM;AACX,WAAK,UAAU,OAAO,WAAW;AACjC,WAAK,UAAU,IAAI,UAAU;AAAA,IAChC;AAAA,EAvHL;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,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,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,uBAAuB;AAE5C,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,aAAa,QAAQ,UAAU;AACxC,aAAS,UAAU,IAAI,UAAU;AAEjC,QAAI,sBAAsB,SAAS,cAAc,MAAM;AACvD,wBAAoB,aAAa,QAAQ,aAAa;AACtD,wBAAoB,aAAa,QAAQ,aAAa;AAEtD,QAAI,eAAe,SAAS,cAAc,MAAM;AAChD,iBAAa,aAAa,QAAQ,UAAU;AAE5C,QAAI,SAAS,SAAS,cAAc,MAAM;AAC1C,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,cAAc;AAExC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,SAAS;AACtC,YAAQ,aAAa,MAAM,SAAS;AAEpC,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,SAAS;AAEnC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,YAAY;AACjC,aAAS,YAAY,MAAM;AAC3B,aAAS,YAAY,mBAAmB;AAExC,YAAQ,YAAY,IAAI;AAExB,WAAO,YAAY,QAAQ;AAC3B,WAAO,YAAY,OAAO;AAE1B,aAAS,YAAY,MAAM;AAE3B,SAAK,WAAW;AAChB,SAAK,SAAS;AAEd,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,UAAU,SAAS,UAAU,EAAG,MAAK,UAAU,IAAI,WAAW;AAExE,SAAK,SAAS,iBAAiB,SAAS,MAAM;AAC1C,UAAI,KAAK,UAAU,SAAS,WAAW,GAAG;AACtC,cAAM,oBAAoB,MAAM,yBAAyB;AACzD,aAAK,OAAO,MAAM,YAAY,iCAAiC,QAAQ;AACvE,aAAK,OAAQ;AAAA,MAC7B,OAAmB;AACH,cAAM,oBAAoB,MAAM,0BAA0B;AAC1D,aAAK,OAAO,MAAM,YAAY,iCAAiC,MAAM;AACrE,aAAK,SAAU;AAAA,MAC/B;AAAA,IACA,CAAS;AAAA,EACT;AAiBA;ACrIA,cAAc,OAAO,sBAAsB,aAAa;"}
+{"version":3,"file":"wje-accordion-item.js","sources":["../packages/wje-accordion-item/accordion-item.element.js","../packages/wje-accordion-item/accordion-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Accordion Item element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/accordion-item\n * @status stable\n * @augments WJElement\n * @slot - The accordion item main content.\n * @tag wje-accordion\n */\nexport default class AccordionItem extends WJElement {\n    /**\n     * Constructor for the AccordionItem class.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the Accordion Item element.\n     * @type {string}\n     */\n    className = 'AccordionItem';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {object} The styles for the Accordion Item element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {Array} An array containing the name of the observed attribute.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Method to setup attributes for the Accordion Item element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.\n     * @returns {object} The document fragment containing the drawn element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-accordion-item');\n\n        let headline = document.createElement('div');\n        headline.setAttribute('part', 'headline');\n        headline.classList.add('headline');\n\n        let headlineDescription = document.createElement('slot');\n        headlineDescription.setAttribute('part', 'description');\n        headlineDescription.setAttribute('name', 'description');\n\n        let slotHeadline = document.createElement('slot');\n        slotHeadline.setAttribute('name', 'headline');\n\n        let toggle = document.createElement('slot');\n        toggle.setAttribute('part', 'toggle');\n        toggle.setAttribute('name', 'toggle');\n\n        let mark = document.createElement('wje-icon');\n        mark.setAttribute('name', 'chevron-down');\n\n        let content = document.createElement('div');\n        content.setAttribute('part', 'content');\n        content.setAttribute('id', 'content');\n\n        let slot = document.createElement('slot');\n        slot.setAttribute('name', 'content');\n\n        toggle.appendChild(mark);\n\n        headline.appendChild(slotHeadline);\n        headline.appendChild(toggle);\n        headline.appendChild(headlineDescription);\n\n        content.appendChild(slot);\n\n        native.appendChild(headline);\n        native.appendChild(content);\n\n        fragment.appendChild(native);\n\n        this.headline = headline;\n        this.toggle = toggle;\n\n        return fragment;\n    }\n\n    /**\n     * Method to execute after the Accordion Item element is drawn.\n     */\n    afterDraw() {\n        if (!this.classList.contains('expanded')) this.classList.add('collapsed');\n\n        this.headline.addEventListener('click', () => {\n            if (this.classList.contains('collapsed')) {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:open');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '180deg');\n                this.expand();\n            } else {\n                event.dispatchCustomEvent(this, 'wje-accordion-item:close');\n                this.toggle.style.setProperty('--wje-accordion-marker-rotate', '0deg');\n                this.collapse();\n            }\n        });\n    }\n\n    /**\n     * Method to handle the attribute changes.\n     */\n    collapse = () => {\n        this.classList.remove('expanded');\n        this.classList.add('collapsed');\n    };\n\n    /**\n     * Method to handle the attribute changes.\n     */\n    expand = () => {\n        this.classList.remove('collapsed');\n        this.classList.add('expanded');\n    };\n}\n","import AccordionItem from './accordion-item.element.js';\n\nexport default AccordionItem;\n\nAccordionItem.define('wje-accordion-item', AccordionItem);\n"],"names":[],"mappings":";;;;;;AAWe,MAAM,sBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIjD,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAsGZ;AAAA;AAAA;AAAA,oCAAW,MAAM;AACb,WAAK,UAAU,OAAO,UAAU;AAChC,WAAK,UAAU,IAAI,WAAW;AAAA,IACjC;AAKD;AAAA;AAAA;AAAA,kCAAS,MAAM;AACX,WAAK,UAAU,OAAO,WAAW;AACjC,WAAK,UAAU,IAAI,UAAU;AAAA,IAChC;AAAA,EAvHL;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,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,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,uBAAuB;AAE5C,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,aAAa,QAAQ,UAAU;AACxC,aAAS,UAAU,IAAI,UAAU;AAEjC,QAAI,sBAAsB,SAAS,cAAc,MAAM;AACvD,wBAAoB,aAAa,QAAQ,aAAa;AACtD,wBAAoB,aAAa,QAAQ,aAAa;AAEtD,QAAI,eAAe,SAAS,cAAc,MAAM;AAChD,iBAAa,aAAa,QAAQ,UAAU;AAE5C,QAAI,SAAS,SAAS,cAAc,MAAM;AAC1C,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,cAAc;AAExC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,SAAS;AACtC,YAAQ,aAAa,MAAM,SAAS;AAEpC,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,SAAS;AAEnC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,YAAY;AACjC,aAAS,YAAY,MAAM;AAC3B,aAAS,YAAY,mBAAmB;AAExC,YAAQ,YAAY,IAAI;AAExB,WAAO,YAAY,QAAQ;AAC3B,WAAO,YAAY,OAAO;AAE1B,aAAS,YAAY,MAAM;AAE3B,SAAK,WAAW;AAChB,SAAK,SAAS;AAEd,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,UAAU,SAAS,UAAU,EAAG,MAAK,UAAU,IAAI,WAAW;AAExE,SAAK,SAAS,iBAAiB,SAAS,MAAM;AAC1C,UAAI,KAAK,UAAU,SAAS,WAAW,GAAG;AACtC,cAAM,oBAAoB,MAAM,yBAAyB;AACzD,aAAK,OAAO,MAAM,YAAY,iCAAiC,QAAQ;AACvE,aAAK,OAAQ;AAAA,MAC7B,OAAmB;AACH,cAAM,oBAAoB,MAAM,0BAA0B;AAC1D,aAAK,OAAO,MAAM,YAAY,iCAAiC,MAAM;AACrE,aAAK,SAAU;AAAA,MAC/B;AAAA,IACA,CAAS;AAAA,EACT;AAiBA;ACrIA,cAAc,OAAO,sBAAsB,aAAa;"}

package/dist/wje-animation.js

@@ -1,7 +1,7 @@
 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 { fetchAndParseCSS } from "./wje-fetchAndParseCSS.js";
+import { fetchAndParseCSS } from "./animations.js";
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ Standard Element ]\n*/\n\nhtml {\n    font-size: 100%;\n    -ms-text-size-adjust: 100%;\n    -webkit-text-size-adjust: 100%;\n}\nbody {\n    color: var(--wje-color-contrast-8);\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    font-weight: normal;\n    letter-spacing: 0.01em;\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n    -webkit-font-feature-settings: 'kern' 1;\n    -moz-font-feature-settings: 'kern' 1;\n    margin: 0;\n    padding: 0 !important;\n}\n/* Headings\n------------------------------------\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    margin: 0.625rem 0;\n    font-family: var(--wje-font-family);\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n    font-weight: 500;\n    color: inherit;\n    display: inline-block;\n}\nh1 {\n    font-size: var(--wje-font-size-2x-large);\n    line-height: 44px;\n    letter-spacing: -0.0141279em;\n}\nh2 {\n    font-size: var(--wje-font-size-x-large);\n    line-height: 34px;\n    letter-spacing: -0.021em;\n}\nh3 {\n    font-size: var(--wje-font-size-large);\n    line-height: 28px;\n    letter-spacing: -0.0114923em;\n}\nh4 {\n    font-size: var(--wje-font-size-large);\n    line-height: 26px;\n    letter-spacing: -0.00865734em;\n}\nh5 {\n    font-size: var(--wje-font-size-medium);\n    line-height: 24px;\n    letter-spacing: -0.00630069em;\n}\nh3 small,\nh4 small,\nh5 small {\n    font-weight: 300;\n}\nh1.block,\nh2.block,\nh3.block,\nh4.block,\nh5.block,\nh6.block {\n    padding-bottom: 0.625rem;\n}\n/* Lins and Others\n------------------------------------\n*/\na {\n    text-shadow: none !important;\n    color: var(--wje-color-primary-11);\n    transition:\n        color 0.1s linear 0s,\n        background-color 0.1s linear 0s,\n        opacity 0.2s linear 0s !important;\n    font-weight: 500;\n}\na:focus,\na:hover,\na:active {\n    color: var(--wje-color-primary);\n}\n\na,\na:focus,\na:hover,\na:active {\n    outline: 0 !important;\n    text-decoration: none;\n}\n\na.no-style {\n    color: inherit;\n    font-weight: normal;\n}\n\nbr {\n    line-height: normal;\n    clear: both;\n}\n\np {\n    display: block;\n    color: inherit;\n    font-size: var(--wje-font-size);\n    font-weight: normal;\n    letter-spacing: 0.00177646em;\n    line-height: 21px;\n    margin: 0 0 0.625rem 0;\n    font-style: normal;\n    white-space: normal;\n}\n\nsmall,\n.small {\n    line-height: 18px;\n    font-size: 85.714%;\n}\n\nlabel {\n    &.inline {\n        display: inline-block;\n        position: relative;\n        top: 0;\n        font-size: 13px;\n    }\n}\n\nul,\nol {\n    margin-bottom: 0.625rem;\n    & > li {\n        padding-left: 3px;\n        line-height: 24px;\n    }\n    &.lg-icon {\n        & > li {\n            font-size: 21px;\n            & span {\n                font-size: 14px;\n            }\n        }\n    }\n    &.no-style {\n        list-style: none;\n        padding-left: 5px;\n    }\n}\n\naddress {\n    margin-bottom: 0;\n    a {\n        color: var(--wje-color-contrast-8);\n    }\n}\n\nblockquote {\n    padding: 4px 0 0 18px;\n    border-left: 0;\n    &:before {\n        content: '\\e95d';\n        font-size: 20px;\n        margin-right: 6px;\n        float: left;\n        position: relative;\n        top: -12px;\n    }\n    p {\n        font-size: 16px;\n        margin-bottom: 4px;\n    }\n    small {\n        line-height: 29px;\n        color: var(--wje-color-contrast-8);\n        &:before {\n            content: '—';\n            margin-right: 6px;\n        }\n    }\n    &.pull-right {\n        border-right: 0;\n        &:before {\n            float: right;\n            content: '';\n            margin-left: 6px;\n            margin-right: 0;\n        }\n        small {\n            padding-right: 30px;\n            &:after {\n                content: '';\n            }\n        }\n    }\n}\nhr {\n    border-color: var(--wje-border-color);\n    &.double {\n        border-width: 2px;\n    }\n    &.dotted {\n        border-style: dotted none none;\n    }\n}\n\n.ff-sup {\n    font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'sups' 1;\n}\n\n.ff-sub {\n    font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -webkit-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n    -moz-font-feature-settings:\n        'kern' 1,\n        'subs' 1;\n}\n\n/* Standard HTML Typography tags\n------------------------------------\n*/\n\ncode {\n    color: var(--wje-color-contrast-6);\n    background-color: var(--wje-color);\n    font-size: 97%;\n    position: relative;\n    line-height: inherit;\n    border-radius: 3px;\n    padding: 5px 7px;\n    margin: 0;\n    &:hover {\n        color: var(--wje-color-complete);\n    }\n    &.code-sm {\n        padding: 3px 6px;\n    }\n}\n\nfigcaption {\n    font-size: 13px;\n    margin-top: 0.625rem;\n    font-weight: 400;\n    display: block;\n    letter-spacing: 0.008em;\n    text-align: center;\n    color: var(--wje-color-contrast-6);\n    line-height: 1.46;\n}\n\nem {\n    font-style: italic !important;\n    font-family: inherit;\n    font-weight: inherit;\n}\n\nins {\n    font-family: var(--wje-font-family);\n    border-bottom: 1px solid #d0d0d0;\n    text-decoration: none;\n    color: var(--wje-color-contrast-8);\n    font-weight: normal;\n    font-size: 94%;\n}\n\ncite {\n    font-family: var(--wje-font-family);\n    font-weight: 300;\n    color: var(--wje-color-contrast-6);\n    text-decoration: none;\n    font-style: normal;\n    hanging-punctuation: first;\n}\n\nsup {\n    top: -0.28em;\n    font-size: 70%;\n}\n\nsub {\n    bottom: 0.03em;\n}\n\nvar {\n    font-family: var(--wje-font-family);\n    font-feature-settings:\n        'calt' 1,\n        'tnum' 1,\n        'frac' 1,\n        'case' 1,\n        'ss01' 1,\n        'cv11' 1;\n}\n\nabbr {\n    text-decoration: none;\n    letter-spacing: 0.01em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\nq {\n    font-family: var(--wje-font-family);\n    font-weight: 500;\n    font-size: 20px;\n    hanging-punctuation: first;\n\n    &:before {\n        content: '\\201C';\n        color: rgba(0, 0, 0, 0.44);\n        font-size: 35px;\n    }\n\n    &:after {\n        content: '\\201D';\n        font-size: 35px;\n        color: rgba(0, 0, 0, 0.44);\n    }\n}\naudio {\n    margin-top: 42px;\n}\nhr {\n    clear: both;\n    margin-bottom: 42px;\n    margin-top: 42px;\n    border: 0;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.13);\n}\naddress {\n    font-family: var(--wje-font-family);\n    font-style: normal;\n    margin: 0 0 1.75em;\n    font-size: 14px;\n    line-height: 24px;\n    margin-top: 24px;\n}\nabbr {\n    text-decoration: none;\n    letter-spacing: 0.01em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\nacronym {\n    text-decoration: none;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    background-color: transparent;\n    border-bottom: 2px solid #ffba5a;\n    transition-property: color, background, border;\n    transition-duration: 0.15s;\n    transition-timing-function: linear;\n    color: var(--wje-color-contrast-8);\n}\n\npre {\n    tab-size: 4;\n    font-size: 85.714%;\n    overflow-x: auto;\n    font-family: monospace, monospace;\n    line-height: 1.7;\n    counter-reset: line;\n    background-color: var(--wje-color-contrast-3) er;\n    color: var(--wje-color-contrast-8);\n    margin-inline: 0;\n    padding: 1rem 1.25rem;\n    border-radius: 3px;\n    margin-top: 1rem;\n    margin-bottom: 1rem;\n}\n\ndt {\n    font-weight: 700;\n    margin-bottom: 5px;\n}\n\ndd {\n    margin: 0 0 1.75em;\n}\n\nkbd {\n    font-size: 85.714%;\n    font-family: var(--wje-font-family);\n    position: relative;\n    line-height: 34px;\n    top: -3px;\n    letter-spacing: 0.01em;\n    padding: 5px 7px;\n    margin: 0;\n    color: rgba(0, 0, 0, 0.53);\n    background-color: #fff;\n    border-radius: 3px;\n    box-shadow:\n        0 2px 0 1px #c7c7c7,\n        0 1px 0 1px rgba(0, 0, 0, 0.15),\n        0 0 0 1px #ececec;\n}\n\n/* Types\n------------------------------------\n*/\n\n.overline {\n    text-transform: uppercase;\n    display: inline-block;\n    letter-spacing: 0.06em;\n    font-size: 11px;\n}\n\n/* Font Sizes\n------------------------------------\n*/\n\n.small-text {\n    font-size: 12px !important;\n    letter-spacing: 0.00849077em;\n    line-height: 18px;\n    a {\n        text-decoration: underline;\n    }\n}\n.normal-text {\n    font-size: 13px !important;\n}\n.large-text {\n    font-size: 15px !important;\n}\n\n/* Font Weights\n------------------------------------\n */\n\n.normal {\n    font-weight: normal !important;\n}\n.semi-bold {\n    font-weight: 500 !important;\n}\n.bold {\n    font-weight: 600 !important;\n}\n.light {\n    font-weight: 300 !important;\n}\n\n/* Misc\n------------------------------------\n*/\n\n.all-caps {\n    text-transform: uppercase;\n    letter-spacing: 0.07em !important;\n}\n.text-uppercase {\n    text-transform: uppercase !important;\n    letter-spacing: 0.07em !important;\n}\n.muted {\n    color: var(--wje-color-contrast-6);\n}\n.hint-text {\n    opacity: 0.76 !important;\n}\n.no-decoration {\n    text-decoration: none !important;\n}\n\n.text-ellipsis {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Gradients\n------------------------------------\n*/\n.gradient-grey {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n.gradient-black {\n    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 75%);\n}\n\n/* Other Colors\n------------------------------------\n*/\n.bg-black {\n    background-color: var(--wje-color-black) !important;\n    color: var(--wje-color-contrast-0);\n}\n.bg-white {\n    background-color: var(--wje-color-contrast-0) !important;\n    color: var(--wje-color-contrast-8);\n}\n.bg-transparent {\n    background-color: transparent !important;\n}\n\n/* Text Colors */\n.link {\n    opacity: 0.7;\n    &:hover {\n        opacity: 1;\n    }\n}\n\n/* Text Aligngments\n------------------------------------\n*/\n\n.text-right {\n    text-align: right !important;\n}\n.text-left {\n    text-align: left !important;\n}\n.text-center {\n    text-align: center !important;\n}\n\n/* Strokes\n------------------------------------\n*/\n\n.stroke-primary {\n    stroke: var(--wje-color-primary) !important;\n}\n.stroke-complete {\n    stroke: var(--wje-color-complete) !important;\n}\n.stroke-success {\n    stroke: var(--wje-color-success) !important;\n}\n.stroke-info {\n    stroke: var(--wje-color-info) !important;\n}\n.stroke-warning {\n    stroke: var(--wje-color-warning) !important;\n}\n.stroke-danger {\n    stroke: var(--wje-color-danger) !important;\n}\n\n/* Font Sizes\n------------------------------------\ntracking =a+b×e(c × z)\n\na, b and c are constants\na = -0.0223\nb = 0.185\nc = -0.1745\nz = font size\n\n*/\n.fs-x-small {\n    font-size: var(--wje-font-size-x-small) !important;\n    letter-spacing: 0.0180093em;\n    line-height: 15px;\n}\n.fs-small {\n    font-size: var(--wje-font-size-small) !important;\n    letter-spacing: 0.00849077em;\n    line-height: 18px;\n}\n.fs {\n    font-size: var(--wje-font-size) !important;\n    letter-spacing: 0.00177646em;\n    line-height: 22px;\n}\n\n.fs-medium {\n    font-size: var(--wje-font-size-medium) !important;\n    letter-spacing: -0.00295978em;\n    line-height: 24px;\n}\n\n.fs-large {\n    font-size: var(--wje-font-size-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-x-large {\n    font-size: var(--wje-font-size-x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-2x-large {\n    font-size: var(--wje-font-size-2x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-3x-large {\n    font-size: var(--wje-font-size-3x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n.fs-4x-large {\n    font-size: var(--wje-font-size-4x-large) !important;\n    letter-spacing: normal;\n    line-height: normal;\n}\n\n/* Line-heights\n------------------------------------\n*/\n.lh-normal {\n    line-height: normal;\n}\n.lh-10 {\n    line-height: 10px;\n}\n.lh-11 {\n    line-height: 11px;\n}\n.lh-12 {\n    line-height: 12px;\n}\n.lh-13 {\n    line-height: 13px;\n}\n.lh-14 {\n    line-height: 14px;\n}\n.lh-15 {\n    line-height: 15px;\n}\n.lh-16 {\n    line-height: 16px;\n}\n\n/* Font Faces\n------------------------------------\n*/\n\n.font-arial {\n    font-family: Arial, sans-serif !important;\n}\n.font-montserrat {\n    font-family: var(--wje-font-family-secondary) !important;\n}\n.font-heading {\n    font-family: var(--wje-font-family-secondary);\n}\n.font-secondary {\n    font-family: var(--wje-font-family-secondary);\n}\n\n/* Wells\n------------------------------------\n*/\n.well {\n    background-color: var(--wje-color-contrast-3);\n    -webkit-border-radius: 3px;\n    -moz-border-radius: 3px;\n    border-radius: 3px;\n    -webkit-box-shadow: none !important;\n    -moz-box-shadow: none !important;\n    box-shadow: none !important;\n    border: none;\n    background-image: none;\n    &.well-large {\n        padding: 24px;\n        width: auto;\n    }\n    &.well-small {\n        padding: 13px;\n        width: auto;\n    }\n    &.green {\n        background-color: var(--wje-color-complete);\n        color: var(--wje-color-contrast-0);\n        border: none;\n    }\n}\n.overflow-ellipsis {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n/* Responsive Handlers : Typo\n------------------------------------\n*/\n\n@media (max-width: 1024px) {\n    body,\n    p {\n        font-size: var(--wje-font-size-small);\n        line-height: 20px;\n    }\n\n    h1 {\n        font-size: var(--wje-font-size-2x-large);\n        line-height: 44px;\n        letter-spacing: -0.08px;\n    }\n    h2 {\n        font-size: var(--wje-font-size-x-large);\n        line-height: 40px;\n    }\n    h3 {\n        font-size: var(--wje-font-size-large);\n        line-height: 35.88px;\n    }\n    h4 {\n        font-size: var(--wje-font-size-large);\n        line-height: 33.88px;\n    }\n    h5 {\n        font-size: var(--wje-font-size-medium);\n        line-height: 25.88px;\n    }\n    small,\n    .small {\n        font-size: 89%;\n        line-height: 17px;\n    }\n}\n\n.alert {\n    & > p,\n    & > ul {\n        margin-bottom: 0;\n    }\n}\n.table {\n    & > tbody {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n    & > tfoot {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n    & > thead {\n        & > tr {\n            & > td,\n            & > th {\n                line-height: 1.42857143;\n            }\n        }\n    }\n}\n\n/* For Windows : Fixes\n------------------------------------\n*/\n\n.line-clamp-2 {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.line-clamp-3 {\n    display: -webkit-box;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.line-clamp-5 {\n    display: -webkit-box;\n    -webkit-line-clamp: 5;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.text-separator {\n    display: block;\n    text-align: center;\n    margin: 1.5rem 0;\n    width: 100%;\n    background: linear-gradient(\n        to top,\n        transparent 0%,\n        transparent calc(50% - 1px),\n        var(--wje-border-color) calc(50% - 1px),\n        var(--wje-border-color) calc(50% + 1px),\n        transparent calc(50% + 1px),\n        transparent 100%\n    );\n}\n.text-separator::before {\n    background: #fff;\n    content: attr(data-text);\n    padding: 0 1rem;\n    text-transform: uppercase;\n}\n\n.wje-toast-stack {\n    position: fixed;\n    top: 0;\n    margin: 0 0.5rem;\n    width: 300px;\n    max-width: 100%;\n    max-height: 100%;\n    overflow: auto;\n    z-index: 9999;\n}\n";
 const animations = `@charset "UTF-8";/*!

package/dist/wje-breadcrumb.js

@@ -1,7 +1,9 @@
 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, { WjElementUtils, event } from "./wje-element.js";
+import WJElement from "./wje-element.js";
+import { WjElementUtils } from "./element-utils.js";
+import { event } from "./event.js";
 const styles = "/*\n[ WJ Breadcrumb ]\n*/\n\n:host {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    line-height: 1.5;\n}\n\n:host(.collapsed) {\n    display: none;\n}\n.native-breadcrumb {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    outline: none;\n    background: inherit;\n    padding: 0.25rem 0.75rem;\n    color: var(--wje-breadcrumb-a);\n    text-decoration: none;\n    &.hidden {\n        display: none;\n    }\n    &.active {\n        font-weight: bold;\n    }\n    &:hover {\n        color: var(--wje-breadcrumb-a-hover);\n    }\n}\n\nbutton {\n    margin-inline: 0.75rem;\n    border: 0 solid transparent;\n    border-radius: 3px;\n    background-color: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n}\n\n.separator {\n    display: inline-flex;\n    align-items: center;\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0 0.5rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.5rem 0;\n}\n";
 class Breadcrumb extends WJElement {
   /**

package/dist/wje-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @tag wje-breadcrumb\n */\nexport default class Breadcrumb extends WJElement {\n    /**\n     * Breadcrumb constructor method.\n     */\n    constructor() {\n        super();\n\n        this._showSeparator = true;\n        this.showCollapsedIndicator = false;\n    }\n\n    /**\n     * Get show separator flag.\n     * @returns {boolean} showSeparator - The show separator flag\n     */\n    get showSeparator() {\n        return this._showSeparator;\n    }\n\n    /**\n     * Set show separator flag.\n     * @param {boolean} value The value to set\n     */\n    set showSeparator(value) {\n        this._showSeparator = value;\n    }\n\n    /**\n     * Set collapsed variant.\n     * @param {string} value The value to set\n     */\n    set collapsedVariant(value) {\n        this._collapsedVariant = value;\n    }\n\n    /**\n     * Get collapsed variant.\n     * @returns {string} The collapsed variant value in uppercase.\n     */\n    get collapsedVariant() {\n        let variant = this.parentElement.variant || this._collapsedVariant;\n        return variant.toUpperCase();\n    }\n\n    /**\n     * Class name for the Breadcrumb element.\n     * @type {string}\n     */\n    className = 'Breadcrumb';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumb 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 Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return ['show-collapsed-indicator', 'collapsed', 'last'];\n    }\n\n    /**\n     * Attribute changed callback method.\n     * @returns {boolean} false - Always returns false\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'collapsed') {\n            if (WjElementUtils.stringToBoolean(newValue) && !this.hasAttribute('show-collapsed-indicator'))\n                this.classList.add('collapsed');\n        } else if (name === 'show-collapsed-indicator') {\n            if (WjElementUtils.stringToBoolean(newValue)) {\n                this.showCollapsedIndicator = true;\n                this.refresh();\n            }\n        } else if (name === 'last') {\n            this.active = WjElementUtils.stringToBoolean(newValue);\n            this.showSeparator = !WjElementUtils.stringToBoolean(newValue);\n            this.refresh();\n        }\n\n        return false;\n    }\n\n    /**\n     * Setup attributes for the Breadcrumb element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumb element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('a');\n        native.classList.add('native-breadcrumb');\n        native.setAttribute('part', 'native');\n\n        if (this.active) native.classList.add('active');\n\n        let slot = document.createElement('slot');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.appendChild(start);\n        native.appendChild(slot);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n        if (WjElementUtils.stringToBoolean(this.showCollapsedIndicator)) {\n            // pridame button za native element\n            fragment.appendChild(this.drawCollapsedIndicator());\n\n            // skryjeme native element\n            native.classList.add('hidden');\n        }\n\n        if (this.showSeparator) {\n            let separator = document.createElement('span');\n            separator.classList.add('separator');\n            separator.setAttribute('part', 'separator');\n\n            if (WjElementUtils.hasSlot(this, 'separator')) {\n                let slotSeparator = document.createElement('slot');\n                slotSeparator.setAttribute('name', 'separator');\n\n                separator.appendChild(slotSeparator);\n            } else {\n                separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n            }\n\n            fragment.appendChild(separator);\n        }\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Draw collapsed indicator method.\n     * @returns {object} - The collapsed indicator element.\n     */\n    drawCollapsedIndicator() {\n        let collapsedIndicator = null;\n\n        if (this.collapsedVariant === 'DROPDOWN') {\n            collapsedIndicator = this.collapseDropdown();\n        } else {\n            collapsedIndicator = this.collapseButton();\n        }\n\n        return collapsedIndicator;\n    }\n\n    /**\n     * Collapse dropdown button.\n     * @returns {object} dropdown - The dropdown button.\n     */\n    collapseDropdown() {\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom');\n        dropdown.setAttribute('offset', '10');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        dropdown.appendChild(button);\n        dropdown.appendChild(menu);\n\n        dropdown.innerHTML = `<wje-button slot=\"trigger\" fill=\"link\">\n            <wje-icon name=\"dots\"></wje-icon>\n        </wje-button>\n        <wje-menu variant=\"context\">\n            <wje-menu-item>Test 0</wje-menu-item>\n            <wje-menu-item>Test 1</wje-menu-item>\n            <wje-menu-item>Test 2</wje-menu-item>\n        </wje-menu>`;\n\n        return dropdown;\n    }\n\n    /**\n     * Collapse button method.\n     * @returns {object} - The button element.\n     */\n    collapseButton() {\n        let button = document.createElement('button');\n        button.setAttribute('aria-label', 'Show more breadcrumbs');\n        button.setAttribute('part', 'collapsed-indicator');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        event.addListener(button, 'click', null, (e) => {\n            this.native.classList.remove('hidden');\n            button.remove();\n            this.parentElement.querySelectorAll('wje-breadcrumb').forEach((el) => {\n                el.classList.remove('collapsed');\n            });\n            e.stopPropagation();\n        });\n\n        return button;\n    }\n}\n","import Breadcrumb from './breadcrumb.element.js';\n\n// export * from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @tag wje-breadcrumb\n */\nexport default class Breadcrumb extends WJElement {\n    /**\n     * Breadcrumb constructor method.\n     */\n    constructor() {\n        super();\n\n        this._showSeparator = true;\n        this.showCollapsedIndicator = false;\n    }\n\n    /**\n     * Get show separator flag.\n     * @returns {boolean} showSeparator - The show separator flag\n     */\n    get showSeparator() {\n        return this._showSeparator;\n    }\n\n    /**\n     * Set show separator flag.\n     * @param {boolean} value The value to set\n     */\n    set showSeparator(value) {\n        this._showSeparator = value;\n    }\n\n    /**\n     * Set collapsed variant.\n     * @param {string} value The value to set\n     */\n    set collapsedVariant(value) {\n        this._collapsedVariant = value;\n    }\n\n    /**\n     * Get collapsed variant.\n     * @returns {string} The collapsed variant value in uppercase.\n     */\n    get collapsedVariant() {\n        let variant = this.parentElement.variant || this._collapsedVariant;\n        return variant.toUpperCase();\n    }\n\n    /**\n     * Class name for the Breadcrumb element.\n     * @type {string}\n     */\n    className = 'Breadcrumb';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumb 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 Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return ['show-collapsed-indicator', 'collapsed', 'last'];\n    }\n\n    /**\n     * Attribute changed callback method.\n     * @returns {boolean} false - Always returns false\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'collapsed') {\n            if (WjElementUtils.stringToBoolean(newValue) && !this.hasAttribute('show-collapsed-indicator'))\n                this.classList.add('collapsed');\n        } else if (name === 'show-collapsed-indicator') {\n            if (WjElementUtils.stringToBoolean(newValue)) {\n                this.showCollapsedIndicator = true;\n                this.refresh();\n            }\n        } else if (name === 'last') {\n            this.active = WjElementUtils.stringToBoolean(newValue);\n            this.showSeparator = !WjElementUtils.stringToBoolean(newValue);\n            this.refresh();\n        }\n\n        return false;\n    }\n\n    /**\n     * Setup attributes for the Breadcrumb element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumb element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('a');\n        native.classList.add('native-breadcrumb');\n        native.setAttribute('part', 'native');\n\n        if (this.active) native.classList.add('active');\n\n        let slot = document.createElement('slot');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.appendChild(start);\n        native.appendChild(slot);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n        if (WjElementUtils.stringToBoolean(this.showCollapsedIndicator)) {\n            // pridame button za native element\n            fragment.appendChild(this.drawCollapsedIndicator());\n\n            // skryjeme native element\n            native.classList.add('hidden');\n        }\n\n        if (this.showSeparator) {\n            let separator = document.createElement('span');\n            separator.classList.add('separator');\n            separator.setAttribute('part', 'separator');\n\n            if (WjElementUtils.hasSlot(this, 'separator')) {\n                let slotSeparator = document.createElement('slot');\n                slotSeparator.setAttribute('name', 'separator');\n\n                separator.appendChild(slotSeparator);\n            } else {\n                separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n            }\n\n            fragment.appendChild(separator);\n        }\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Draw collapsed indicator method.\n     * @returns {object} - The collapsed indicator element.\n     */\n    drawCollapsedIndicator() {\n        let collapsedIndicator = null;\n\n        if (this.collapsedVariant === 'DROPDOWN') {\n            collapsedIndicator = this.collapseDropdown();\n        } else {\n            collapsedIndicator = this.collapseButton();\n        }\n\n        return collapsedIndicator;\n    }\n\n    /**\n     * Collapse dropdown button.\n     * @returns {object} dropdown - The dropdown button.\n     */\n    collapseDropdown() {\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom');\n        dropdown.setAttribute('offset', '10');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        dropdown.appendChild(button);\n        dropdown.appendChild(menu);\n\n        dropdown.innerHTML = `<wje-button slot=\"trigger\" fill=\"link\">\n            <wje-icon name=\"dots\"></wje-icon>\n        </wje-button>\n        <wje-menu variant=\"context\">\n            <wje-menu-item>Test 0</wje-menu-item>\n            <wje-menu-item>Test 1</wje-menu-item>\n            <wje-menu-item>Test 2</wje-menu-item>\n        </wje-menu>`;\n\n        return dropdown;\n    }\n\n    /**\n     * Collapse button method.\n     * @returns {object} - The button element.\n     */\n    collapseButton() {\n        let button = document.createElement('button');\n        button.setAttribute('aria-label', 'Show more breadcrumbs');\n        button.setAttribute('part', 'collapsed-indicator');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        event.addListener(button, 'click', null, (e) => {\n            this.native.classList.remove('hidden');\n            button.remove();\n            this.parentElement.querySelectorAll('wje-breadcrumb').forEach((el) => {\n                el.classList.remove('collapsed');\n            });\n            e.stopPropagation();\n        });\n\n        return button;\n    }\n}\n","import Breadcrumb from './breadcrumb.element.js';\n\n// export * from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":"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"}

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":"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"}

package/dist/wje-button.js

@@ -9,12 +9,12 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _Button_instances, populateCustomEvent_fn;
 import { b as bindRouterLinks } from "./router-links-CJnOdbas.js";
-import WJElement, { WjElementUtils, event } from "./wje-element.js";
-import Icon from "./wje-icon.js";
-const bool = (v) => {
-  return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
-};
-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";
+import { bool } from "./utils.js";
+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.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.