wj-elements 0.1.255 → 0.2.0-alpha.10

package/dist/dark.css

@@ -173,6 +173,9 @@
     --wje-icon-picker-background: var(--wje-color-contrast-0);
     --wje-icon-picker-border-color: var(--wje-border-color);
 
+    /* Infinite Scroll */
+    --wje-infinite-scroll-loading-background: var(--wje-color-contrast-0);
+
     /* Input */
     --wje-input-background-color: var(--wje-color-contrast-0);
     --wje-input-color: var(--wje-color);
@@ -247,6 +250,11 @@
     --wje-textarea-border-color: var(--wje-border-color);
     --wje-textarea-border-color-focus: var(--wje-color-primary-1);
 
+    /* Toolbar */
+    --wje-toolbar-background: var(--wje-background);
+    --wje-toolbar-border-color: var(--wje-border-color);
+    --wje-toolbar-shadow: var(--wje-shadow-medium);
+
     /* Tooltip */
     --wje-tooltip-arrow-color: var(--wje-color-contrast-4);
     --wje-tooltip-background: var(--wje-color-contrast-4);

package/dist/light.css

@@ -223,8 +223,20 @@
     --wje-color-contrast-11: hsla(240, 7%, 8%, 1);
 
     /*
-  [ Elements ]
-  */
+    [ Skeleton ]
+    */
+    --wje-skeleton-bg: var(--wje-color-contrast-3);
+    --wje-skeleton-bg-strong: var(--wje-color-contrast-4);
+    --wje-skeleton-highlight: rgba(255, 255, 255, 0.45);
+    --wje-skeleton-radius: var(--wje-border-radius-pill);
+    --wje-skeleton-height: var(--wje-size-small);
+    --wje-skeleton-head-height: var(--wje-size-x-large);
+    --wje-skeleton-gap: var(--wje-spacing-x-small);
+    --wje-skeleton-duration: 1.3s;
+
+    /*
+    [ Elements ]
+    */
     /* Aside */
     --wje-aside-width: 100px;
     --wje-aside-top: 0;
@@ -363,13 +375,13 @@
     --wje-dialog-padding-bottom: var(--wje-spacing-medium);
 
     --wje-dialog-header-padding-inline: var(--wje-dialog-padding);
-    --wje-dialog-header-padding-block: var(--wje-dialog-padding);
+    --wje-dialog-header-padding-block: var(--wje-dialog-padding) 0;
 
     --wje-dialog-content-padding-inline: var(--wje-dialog-padding);
     --wje-dialog-content-padding-block: var(--wje-dialog-padding);
 
     --wje-dialog-footer-padding-inline: var(--wje-dialog-padding);
-    --wje-dialog-footer-padding-block: var(--wje-dialog-padding);
+    --wje-dialog-footer-padding-block: 0 var(--wje-dialog-padding);
 
     --wje-dialog-headline-font-size: 0.656rem;
     --wje-dialog-headline-letter-spacing: 0.06em;
@@ -421,7 +433,7 @@
     /* Infinite Scroll */
     --wje-infinite-scroll-width: 100%;
     --wje-infinite-scroll-height: 300px;
-    --wje-infinite-scroll-loading-bg: rgba(255, 255, 255, 1);
+    --wje-infinite-scroll-loading-background: var(--wje-color-contrast-0);
 
     /* Input */
     --wje-input-font-family: var(--wje-font-family);

package/dist/packages/utils/utils.d.ts

@@ -1 +1,17 @@
+/**
+ * Checks if a given file matches any of the accepted file types.
+ * @param {File} file The file to validate.
+ * @param {string|string[]} acceptedFileTypes A comma-separated string or an array of accepted MIME types or file extensions.
+ * @returns {boolean} Returns `true` if the file type is valid, otherwise `false`.
+ * @throws {Error} Throws an error if `acceptedFileTypes` is empty.
+ * @example
+ * const file = new File([""], "example.png", { type: "image/png" });
+ * const isValid = isValidFileType(file, "image/*,application/pdf");
+ * console.log(isValid); // true
+ * @example
+ * const file = new File([""], "example.txt", { type: "text/plain" });
+ * const isValid = isValidFileType(file, ["text/plain", "application/json"]);
+ * console.log(isValid); // true
+ */
+export function isValidFileType(file: File, acceptedFileTypes: string | string[]): boolean;
 export function bool(v: any): boolean;

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

@@ -50,6 +50,18 @@ export default class Chip extends WJElement {
      * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.
      */
     get removable(): boolean;
+    /**
+     * Sets the disabled state of the element.
+     * If true, the 'disabled' attribute is added to the element.
+     * If false, the 'disabled' attribute is removed from the element.
+     * @param {boolean} value Specifies whether the element should be disabled.
+     */
+    set disabled(value: boolean);
+    /**
+     * Determines if the element has the 'disabled' attribute.
+     * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.
+     */
+    get disabled(): boolean;
     /**
      * Draws the Chip element.
      * @returns {DocumentFragment}

package/dist/packages/wje-chip/chip.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -128,4 +128,5 @@ export default class Dialog extends WJElement {
      * @param {Function} promise A function that returns a promise to be executed when the button is clicked.
      */
     registerBlockingEvent(button: HTMLElement, promise: Function): void;
+    updateHasFooter(): void;
 }

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

@@ -211,6 +211,37 @@ export default class WJElement extends HTMLElement {
      * @param params Additional parameters or attributes for rendering the component.
      */
     afterDraw(context: any, appStoreObj: any, params: any): void;
+    /**
+     * Optional hook: return skeleton markup used while async draw is in progress.
+     * Prefer declarative skeleton via `<div slot="skeleton">...</div>`.
+     * Return: string | Node | DocumentFragment | null | Promise of those.
+     */
+    renderSkeleton(params: any): any;
+    set skeletonDelay(value: number);
+    /**
+     * Retrieves the delay duration for the skeleton display, determining the value based on a hierarchy of overrides and defaults.
+     * The method prioritizes in the following order:
+     * 1. A finite number set as the `_wjSkeletonSlotClone` property.
+     * 2. A valid numeric value from the `skeleton-delay` attribute.
+     * 3. The `skeletonDelayMs` property, if defined with a finite number.
+     * 4. A default value of 150 if none of the above are set.
+     * @returns {number} The delay in milliseconds before the skeleton is displayed.
+     */
+    get skeletonDelay(): number;
+    set skeletonMinDuration(value: number);
+    /**
+     * Retrieves the minimum duration for the skeleton animation.
+     * The method checks for an internally stored finite value. If unavailable,
+     * it retrieves the value from the 'skeleton-min-duration' attribute,
+     * converts it to a number if possible, and uses it. If neither is valid,
+     * a default duration of 300 is returned.
+     * @returns {number} The minimum duration for the skeleton animation in milliseconds.
+     */
+    get skeletonMinDuration(): number;
+    _wjSkeletonSlotClone: number | Node;
+    set skeleton(value: boolean);
+    get skeleton(): boolean;
+    get skeletonDelayValue(): number;
     /**
      * Lifecycle method invoked when the component is connected to the DOM.
      */
@@ -262,12 +293,16 @@ export default class WJElement extends HTMLElement {
      * @param [force] Whether to force a re-render.
      * @returns A promise that resolves when the display is complete.
      */
-    display(force?: boolean): Promise<any>;
+    display(force?: boolean): Promise<void>;
     template: any;
     /**
-     * Renders the component's content.
+     * Renders the content into the provided target context.
+     * This method handles asynchronous rendering, processes the output from the `draw` method,
+     * and appends the resulting content to the specified target context.
+     * @returns {Promise<void>} A promise that resolves once the render operation is complete and the content is appended to the target context.
+     * @param targetContext
      */
-    render(): Promise<void>;
+    render(targetContext?: any): Promise<void>;
     /**
      * Sanitizes a given name by converting it from kebab-case to camelCase.
      * @param {string} name The name in kebab-case format (e.g., "example-name").

package/dist/packages/wje-file-upload/file-upload.element.d.ts

@@ -119,6 +119,18 @@ export default class FileUpload extends WJElement {
      * @returns {boolean}
      */
     get toChunk(): boolean;
+    /**
+     * Sets the maximum number of files that can be uploaded or managed.
+     * Assigns the specified value to the 'max-files' attribute.
+     * @param {number} value The maximum allowable number of files.
+     */
+    set maxFiles(value: number);
+    /**
+     * Retrieves the maximum number of files allowed from the `max-files` attribute.
+     * If the attribute is not set or is invalid, defaults to 0.
+     * @returns {number} The maximum number of files allowed.
+     */
+    get maxFiles(): number;
     beforeDraw(): void;
     uploadFunction: Function;
     /**
@@ -136,19 +148,19 @@ export default class FileUpload extends WJElement {
     afterDraw(): void;
     /**
      * Method to handle form submission.
-     * @param {Event} event The form submission event.
+     * @param {Event} e The form submission event.
      */
-    handleSubmit(event: Event): void;
+    handleSubmit(e: Event): void;
     /**
      * Method to handle file drop event.
-     * @param {Event} event The file drop event object.
+     * @param {Event} e The file drop event object.
      */
-    handleDrop: (event: Event) => void;
+    handleDrop: (e: Event) => void;
     /**
      * Method to handle file input change event.
-     * @param {Event} event The file input change event object.
+     * @param {Event} e The file input change event object.
      */
-    handleInputChange: (event: Event) => void;
+    handleInputChange: (e: Event) => void;
     /**
      * Method to add files to the queue.
      * @param files

package/dist/packages/wje-file-upload/file-upload.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/wje-file-upload/service/service.d.ts

@@ -7,29 +7,6 @@
  * getFileTypeIcon('folder'); // Returns 'folder'.
  */
 export function getFileTypeIcon(type: string): string;
-/**
- * Checks if a given file matches any of the accepted file types.
- * @param {File} file The file to validate.
- * @param {string|string[]} acceptedFileTypes A comma-separated string or an array of accepted MIME types or file extensions.
- * @returns {boolean} Returns `true` if the file type is valid, otherwise `false`.
- * @throws {Error} Throws an error if `acceptedFileTypes` is empty.
- * @example
- * const file = new File([""], "example.png", { type: "image/png" });
- * const isValid = isValidFileType(file, "image/*,application/pdf");
- * console.log(isValid); // true
- * @example
- * const file = new File([""], "example.txt", { type: "text/plain" });
- * const isValid = isValidFileType(file, ["text/plain", "application/json"]);
- * console.log(isValid); // true
- */
-export function isValidFileType(file: File, acceptedFileTypes: string | string[]): boolean;
-/**
- * Uploads a file in chunks using `XMLHttpRequest`, allowing for progress tracking.
- * @param {File} file The file to be uploaded.
- * @param {number} chunkSize The size of each chunk in bytes.
- * @param {HTMLElement} preview The element used to display upload progress.
- */
-export function uploadFile(file: File, chunkSize: number, preview: HTMLElement): void;
 /**
  * Returns a function for uploading files either in chunks or as a whole file, based on the provided options.
  * @param {string} url The URL to which the file will be uploaded.

package/dist/packages/wje-file-upload-item/file-upload-item.element.d.ts

@@ -31,24 +31,41 @@ export default class FileUploadItem extends WJElement {
      */
     static get observedAttributes(): Array<string>;
     localizer: Localizer;
+    /**
+     * Sets the 'is-uploaded' attribute to indicate the uploaded status.
+     * @param {boolean} value The value to determine if the element is uploaded.
+     */
     set isUploaded(value: boolean);
+    /**
+     * Checks if the 'is-uploaded' attribute is present on the element.
+     * @returns {boolean} True if the 'is-uploaded' attribute exists, otherwise false.
+     */
     get isUploaded(): boolean;
-    set size(value: string);
-    get size(): string;
+    /**
+     * Sets the size attribute of the element.
+     * @param {string | number} value The value to set for the size attribute.
+     */
+    set size(value: string | number);
+    /**
+     * Retrieves the value of the 'size' attribute.
+     * @returns {string|null} The value of the 'size' attribute, or null if the attribute is not present.
+     */
+    get size(): string | null;
     /**
      * Dependencies for the component.
      * @type {object}
      */
     dependencies: object;
     /**
-     * Handles updates to the attributes of a custom element whenever one of the observed attributes is changed.
-     * Updates the related elements based on the changed attribute and its new value.
-     * @param {string} name The name of the attribute being changed.
-     * @param {string | null} oldValue The previous value of the attribute before the change, or null if the attribute was not previously set.
-     * @param {string | null} newValue The new value of the attribute after the change, or null if the attribute is being removed.
-     * @returns {void} Does not return a value.
+     * A lifecycle method that is called when one of the observed attributes of the custom element is added, removed, or changed.
+     * This method is used to react to changes in the specified attributes.
+     * @param {string} name The name of the attribute that was changed.
+     * @param {string|null} oldValue The previous value of the attribute before the change, or null if the attribute was not previously set.
+     * @param {string|null} newValue The new value of the attribute after the change, or null if the attribute has been removed.
+     * @returns {void} This method does not return a value.
      */
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    progress: number;
     /**
      * Method to draw the component on the screen.
      * @returns {DocumentFragment} The fragment containing the component.

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

@@ -371,6 +371,8 @@ export class Select extends FormAssociatedElement {
     selectOptions(values: any | any[], silent?: boolean): void;
     /**
      * Clones and appends an icon with the "check" slot to the specified option element.
+     * If the option already contains a custom element with slot="check" (e.g. <wje-status slot="check">),
+     * it is left untouched and no template icon is added.
      * @param {HTMLElement} option The target HTML element to which the cloned "check" icon will be appended.
      * @returns {void} This method does not return a value, but it modifies the DOM by appending a cloned "check" icon to the provided option element.
      */

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

@@ -0,0 +1 @@
+export {};

package/dist/packages/wje-toggle/toggle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles.css

@@ -831,6 +831,7 @@ z = font size
         transparent 100%
     );
 }
+
 .text-separator::before {
     background: #fff;
     content: attr(data-text);
@@ -847,4 +848,4 @@ z = font size
     max-height: 100%;
     overflow: auto;
     z-index: 9999;
-}
+}

package/dist/utils.js

@@ -1,7 +1,24 @@
 const bool = (v) => {
   return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
 };
+function isValidFileType(file, acceptedFileTypes) {
+  const mime = file.type.toLowerCase();
+  const base = mime.split("/")[0];
+  const ext = file.name.split(".").pop().toLowerCase();
+  let accepted = Array.isArray(acceptedFileTypes) ? acceptedFileTypes : acceptedFileTypes.split(",").map((t) => t.trim().toLowerCase());
+  if (accepted.length === 0) {
+    throw new Error("acceptedFileTypes is empty");
+  }
+  for (let type of accepted) {
+    type = type.toLowerCase();
+    if (type === base + "/*") return true;
+    if (type === mime) return true;
+    if (type === ext) return true;
+  }
+  return false;
+}
 export {
-  bool
+  bool,
+  isValidFileType
 };
 //# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -1 +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;"}
+{"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\n/**\n * Checks if a given file matches any of the accepted file types.\n * @param {File} file The file to validate.\n * @param {string|string[]} acceptedFileTypes A comma-separated string or an array of accepted MIME types or file extensions.\n * @returns {boolean} Returns `true` if the file type is valid, otherwise `false`.\n * @throws {Error} Throws an error if `acceptedFileTypes` is empty.\n * @example\n * const file = new File([\"\"], \"example.png\", { type: \"image/png\" });\n * const isValid = isValidFileType(file, \"image/*,application/pdf\");\n * console.log(isValid); // true\n * @example\n * const file = new File([\"\"], \"example.txt\", { type: \"text/plain\" });\n * const isValid = isValidFileType(file, [\"text/plain\", \"application/json\"]);\n * console.log(isValid); // true\n */\nexport function isValidFileType(file, acceptedFileTypes) {\n    const mime = file.type.toLowerCase();\n    const base = mime.split('/')[0];\n    const ext = file.name.split('.').pop().toLowerCase();\n\n    let accepted = Array.isArray(acceptedFileTypes)\n      ? acceptedFileTypes\n      : acceptedFileTypes.split(',').map(t => t.trim().toLowerCase());\n\n    if (accepted.length === 0) {\n        throw new Error('acceptedFileTypes is empty');\n    }\n\n    for (let type of accepted) {\n        type = type.toLowerCase();\n\n        // image/* alebo application/*\n        if (type === base + '/*') return true;\n\n        // presný MIME typ\n        if (type === mime) return true;\n\n        // extension (xlsx, png, pdf…)\n        if (type === ext) return true;\n    }\n\n    return false;\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;AAiBO,SAAS,gBAAgB,MAAM,mBAAmB;AACrD,QAAM,OAAO,KAAK,KAAK,YAAa;AACpC,QAAM,OAAO,KAAK,MAAM,GAAG,EAAE,CAAC;AAC9B,QAAM,MAAM,KAAK,KAAK,MAAM,GAAG,EAAE,IAAK,EAAC,YAAa;AAEpD,MAAI,WAAW,MAAM,QAAQ,iBAAiB,IAC1C,oBACA,kBAAkB,MAAM,GAAG,EAAE,IAAI,OAAK,EAAE,OAAO,aAAa;AAEhE,MAAI,SAAS,WAAW,GAAG;AACvB,UAAM,IAAI,MAAM,4BAA4B;AAAA,EACpD;AAEI,WAAS,QAAQ,UAAU;AACvB,WAAO,KAAK,YAAa;AAGzB,QAAI,SAAS,OAAO,KAAM,QAAO;AAGjC,QAAI,SAAS,KAAM,QAAO;AAG1B,QAAI,SAAS,IAAK,QAAO;AAAA,EACjC;AAEI,SAAO;AACX;"}

package/dist/wje-animation.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { fetchAndParseCSS } from "./animations.js";
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ Standard Element ]\n*/\n\nhtml {\n    height: 100%;\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 styles = "/*\n[ Standard Element ]\n*/\n\nhtml {\n    height: 100%;\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\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}";
 const animations = `@charset "UTF-8";/*!
  * animate.css - https://animate.style/
  * Version - 4.1.1

package/dist/wje-avatar.js

@@ -95,7 +95,7 @@ class Avatar extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["initials"];
+    return ["initials", "label"];
   }
   /**
    * Method to setup attributes.

package/dist/wje-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-avatar.js","sources":["../packages/wje-avatar/service/service.js","../packages/wje-avatar/avatar.element.js","../packages/wje-avatar/avatar.js"],"sourcesContent":["/**\n * Generates an HSL color value based on the input text.\n * @param {string} text The input text to generate the HSL color.\n * @param {number} [s] The saturation value (in percentage) for the HSL color.\n * @param {number} [l] The lightness value (in percentage) for the HSL color.\n * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.\n * @description\n * This function computes a hash from the input text and uses it to generate\n * a hue value. The hue is combined with the provided saturation and lightness\n * values to create an HSL color. This can be useful for consistently assigning\n * colors based on text input, such as for avatars or tags.\n * @example\n * // Returns 'hsl(180, 40%, 65%)'\n * getHsl('example');\n * @example\n * // Returns 'hsl(300, 50%, 70%)'\n * getHsl('test', 50, 70);\n */\nexport function getHsl(text, s = 40, l = 75) {\n    let str = text;\n    let hash = 0;\n\n    for (let i = 0; i < str?.length; i++) {\n        hash = str.charCodeAt(i) + hash * 31;\n    }\n\n    let h = hash % 360;\n\n    return `hsl(${h}, ${s}%, ${l}%)`;\n}\n\n/**\n * Generates background and text HSL colors for avatars based on input text.\n * The text color is a darker, more saturated variant of the background color\n * to ensure sufficient contrast while keeping the same hue.\n *\n * @param {string} text The input text (e.g. initials or name).\n * @returns {{ background: string, color: string }}\n */\nexport function getAvatarColors(text) {\n    let hash = 0;\n    for (let i = 0; i < text?.length; i++) {\n        hash = text.charCodeAt(i) + hash * 31;\n    }\n\n    const h = Math.abs(hash) % 360;\n\n    // 👇 Figma-like pastel background\n    const bgS = 30;\n    const bgL = 88;\n\n    // 👇 Softer text color (same hue)\n    const textS = 50;\n    const textL = 48;\n\n    return {\n        background: `hsl(${h}, ${bgS}%, ${bgL}%)`,\n        color: `hsl(${h}, ${textS}%, ${textL}%)`\n    };\n}\n\n/**\n * Generates initials from a given string.\n * @param {string} string The input string, typically a full name.\n * @param {number} [length] The desired number of initials (default is 2).\n * @returns {string} - The generated initials in uppercase.\n * @description\n * This function takes a string, splits it by spaces, and generates initials.\n * It always includes the first character of the first word. If the input string\n * contains more than one word and the `length` parameter is greater than 1, it\n * also includes the first character of the last word.\n * @example\n * // Returns 'JD'\n * getInitials('John Doe');\n * @example\n * // Returns 'J'\n * getInitials('John');\n * @example\n * // Returns 'JM'\n * getInitials('John Michael Doe', 2);\n */\nexport function getInitials(string, length = 2) {\n    let names = string.split(' ');\n    let initials = names[0].substring(0, 1).toUpperCase();\n\n    if (names.length > 1 && length > 1) {\n        initials += names[names.length - 1].substring(0, 1).toUpperCase();\n    }\n    return initials;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getHsl, getInitials, getAvatarColors } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Avatar element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/avatar\n * @status stable\n * @augments WJElement\n * @slot - The avatar main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty --wje-avatar-width;\n * @cssproperty --wje-avatar-height;\n * @cssproperty --wje-avatar-font-size;\n * @cssproperty --wje-avatar-font-weight;\n * @cssproperty --wje-avatar-color;\n * @cssproperty --wje-avatar-background-color;\n * @cssproperty --wje-avatar-border-radius;\n * @cssproperty --wje-avatar-border-color;\n * @cssproperty --wje-avatar-border-width;\n * @cssproperty --wje-avatar-border-style;\n * @tag wje-avatar\n */\nexport default class Avatar extends WJElement {\n    /**\n     * Avatar class constructor.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'label' attribute for the element.\n     * @param {string} value The new value to be set for the 'label' attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute for the element.\n     * If the attribute is not set, it defaults to an empty string.\n     * @returns {string} The value of the 'label' attribute or an empty string if not defined.\n     */\n    get label() {\n        return this.getAttribute('label') || '';\n    }\n\n    /**\n     * Sets the value of initials for the element by updating\n     * the 'initials' attribute with the provided value.\n     * @param {string} value The value to be set as the initials.\n     */\n    set initials(value) {\n        this.setAttribute('initials', '');\n    }\n\n    /**\n     * Retrieves the value of the 'initials' attribute if it exists.\n     * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.\n     */\n    get initials() {\n        return this.hasAttribute('initials') || false;\n    }\n\n    /**\n     * Sets the size attribute for the element.\n     * @param {string | number} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the size attribute of the element. If the size attribute\n     * is not defined, it returns the default value 'medium'.\n     * @returns {string} The size value of the element or 'medium' if not specified.\n     */\n    get size() {\n        return this.getAttribute('size') || 'medium';\n    }\n\n    /**\n     * Class name for the Avatar element.\n     */\n    className = 'Avatar';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['initials'];\n    }\n\n    /**\n     * Method to setup attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the avatar element and return a document fragment.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-avatar');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n\n        if (this.initials) {\n            let initials = getInitials(this.label);\n            const { background, color } = getAvatarColors(initials);\n\n            this.style.setProperty('--wje-avatar-background-color', background);\n            this.style.setProperty('--wje-avatar-color', color);\n\n            element.innerText = initials;\n        } else {\n            let slotIcon = document.createElement('slot');\n            slotIcon.setAttribute('name', 'icon');\n\n            element.appendChild(slotIcon);\n        }\n\n        let status = document.createElement('slot');\n        status.setAttribute('name', 'status');\n        status.setAttribute('part', 'status');\n\n        let secondary = document.createElement('slot');\n        secondary.setAttribute('name', 'secondary');\n        secondary.setAttribute('part', 'secondary');\n\n        element.appendChild(status);\n        element.appendChild(secondary);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Method to check if the avatar is an image.\n     * @returns {boolean} - True if the avatar is an image, false otherwise\n     */\n    isImage() {\n        return this.getElementsByTagName('wje-img').length > 0;\n    }\n}\n","import Avatar from './avatar.element.js';\n\nexport default Avatar;\n\nAvatar.define('wje-avatar', Avatar);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-avatar.js","sources":["../packages/wje-avatar/service/service.js","../packages/wje-avatar/avatar.element.js","../packages/wje-avatar/avatar.js"],"sourcesContent":["/**\n * Generates an HSL color value based on the input text.\n * @param {string} text The input text to generate the HSL color.\n * @param {number} [s] The saturation value (in percentage) for the HSL color.\n * @param {number} [l] The lightness value (in percentage) for the HSL color.\n * @returns {string} - The HSL color string in the format `hsl(h, s%, l%)`.\n * @description\n * This function computes a hash from the input text and uses it to generate\n * a hue value. The hue is combined with the provided saturation and lightness\n * values to create an HSL color. This can be useful for consistently assigning\n * colors based on text input, such as for avatars or tags.\n * @example\n * // Returns 'hsl(180, 40%, 65%)'\n * getHsl('example');\n * @example\n * // Returns 'hsl(300, 50%, 70%)'\n * getHsl('test', 50, 70);\n */\nexport function getHsl(text, s = 40, l = 75) {\n    let str = text;\n    let hash = 0;\n\n    for (let i = 0; i < str?.length; i++) {\n        hash = str.charCodeAt(i) + hash * 31;\n    }\n\n    let h = hash % 360;\n\n    return `hsl(${h}, ${s}%, ${l}%)`;\n}\n\n/**\n * Generates background and text HSL colors for avatars based on input text.\n * The text color is a darker, more saturated variant of the background color\n * to ensure sufficient contrast while keeping the same hue.\n *\n * @param {string} text The input text (e.g. initials or name).\n * @returns {{ background: string, color: string }}\n */\nexport function getAvatarColors(text) {\n    let hash = 0;\n    for (let i = 0; i < text?.length; i++) {\n        hash = text.charCodeAt(i) + hash * 31;\n    }\n\n    const h = Math.abs(hash) % 360;\n\n    // 👇 Figma-like pastel background\n    const bgS = 30;\n    const bgL = 88;\n\n    // 👇 Softer text color (same hue)\n    const textS = 50;\n    const textL = 48;\n\n    return {\n        background: `hsl(${h}, ${bgS}%, ${bgL}%)`,\n        color: `hsl(${h}, ${textS}%, ${textL}%)`\n    };\n}\n\n/**\n * Generates initials from a given string.\n * @param {string} string The input string, typically a full name.\n * @param {number} [length] The desired number of initials (default is 2).\n * @returns {string} - The generated initials in uppercase.\n * @description\n * This function takes a string, splits it by spaces, and generates initials.\n * It always includes the first character of the first word. If the input string\n * contains more than one word and the `length` parameter is greater than 1, it\n * also includes the first character of the last word.\n * @example\n * // Returns 'JD'\n * getInitials('John Doe');\n * @example\n * // Returns 'J'\n * getInitials('John');\n * @example\n * // Returns 'JM'\n * getInitials('John Michael Doe', 2);\n */\nexport function getInitials(string, length = 2) {\n    let names = string.split(' ');\n    let initials = names[0].substring(0, 1).toUpperCase();\n\n    if (names.length > 1 && length > 1) {\n        initials += names[names.length - 1].substring(0, 1).toUpperCase();\n    }\n    return initials;\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { getHsl, getInitials, getAvatarColors } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents an Avatar element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/avatar\n * @status stable\n * @augments WJElement\n * @slot - The avatar main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty --wje-avatar-width;\n * @cssproperty --wje-avatar-height;\n * @cssproperty --wje-avatar-font-size;\n * @cssproperty --wje-avatar-font-weight;\n * @cssproperty --wje-avatar-color;\n * @cssproperty --wje-avatar-background-color;\n * @cssproperty --wje-avatar-border-radius;\n * @cssproperty --wje-avatar-border-color;\n * @cssproperty --wje-avatar-border-width;\n * @cssproperty --wje-avatar-border-style;\n * @tag wje-avatar\n */\nexport default class Avatar extends WJElement {\n    /**\n     * Avatar class constructor.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'label' attribute for the element.\n     * @param {string} value The new value to be set for the 'label' attribute.\n     */\n    set label(value) {\n        this.setAttribute('label', value);\n    }\n\n    /**\n     * Retrieves the value of the 'label' attribute for the element.\n     * If the attribute is not set, it defaults to an empty string.\n     * @returns {string} The value of the 'label' attribute or an empty string if not defined.\n     */\n    get label() {\n        return this.getAttribute('label') || '';\n    }\n\n    /**\n     * Sets the value of initials for the element by updating\n     * the 'initials' attribute with the provided value.\n     * @param {string} value The value to be set as the initials.\n     */\n    set initials(value) {\n        this.setAttribute('initials', '');\n    }\n\n    /**\n     * Retrieves the value of the 'initials' attribute if it exists.\n     * @returns {boolean} Returns true if the 'initials' attribute is present, otherwise false.\n     */\n    get initials() {\n        return this.hasAttribute('initials') || false;\n    }\n\n    /**\n     * Sets the size attribute for the element.\n     * @param {string | number} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the size attribute of the element. If the size attribute\n     * is not defined, it returns the default value 'medium'.\n     * @returns {string} The size value of the element or 'medium' if not specified.\n     */\n    get size() {\n        return this.getAttribute('size') || 'medium';\n    }\n\n    /**\n     * Class name for the Avatar element.\n     */\n    className = 'Avatar';\n\n    /**\n     * Getter for cssStyleSheet.\n     * @returns {string} styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['initials', 'label'];\n    }\n\n    /**\n     * Method to setup attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Method to draw the avatar element and return a document fragment.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-avatar');\n\n        let slot = document.createElement('slot');\n\n        element.appendChild(slot);\n\n        if (this.initials) {\n            let initials = getInitials(this.label);\n            const { background, color } = getAvatarColors(initials);\n\n            this.style.setProperty('--wje-avatar-background-color', background);\n            this.style.setProperty('--wje-avatar-color', color);\n\n            element.innerText = initials;\n        } else {\n            let slotIcon = document.createElement('slot');\n            slotIcon.setAttribute('name', 'icon');\n\n            element.appendChild(slotIcon);\n        }\n\n        let status = document.createElement('slot');\n        status.setAttribute('name', 'status');\n        status.setAttribute('part', 'status');\n\n        let secondary = document.createElement('slot');\n        secondary.setAttribute('name', 'secondary');\n        secondary.setAttribute('part', 'secondary');\n\n        element.appendChild(status);\n        element.appendChild(secondary);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Method to check if the avatar is an image.\n     * @returns {boolean} - True if the avatar is an image, false otherwise\n     */\n    isImage() {\n        return this.getElementsByTagName('wje-img').length > 0;\n    }\n}\n","import Avatar from './avatar.element.js';\n\nexport default Avatar;\n\nAvatar.define('wje-avatar', Avatar);\n"],"names":[],"mappings":"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"}

package/dist/wje-breadcrumb.js

@@ -45,7 +45,8 @@ class Breadcrumb extends WJElement {
    * @returns {string} The collapsed variant value in uppercase.
    */
   get collapsedVariant() {
-    let variant = this.parentElement.variant || this._collapsedVariant;
+    var _a;
+    let variant = ((_a = this.parentElement) == null ? void 0 : _a.variant) || this._collapsedVariant;
     return variant.toUpperCase();
   }
   /**
@@ -72,20 +73,21 @@ class Breadcrumb extends WJElement {
    * @returns {boolean} Returns false to signal no default behavior is implemented.
    */
   attributeChangedCallback(name, oldValue, newValue) {
+    var _a;
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
     if (name === "collapsed") {
-      if (WjElementUtils.stringToBoolean(newValue) && !this.hasAttribute("show-collapsed-indicator"))
-        this.classList.add("collapsed");
+      const isCollapsed = WjElementUtils.stringToBoolean(newValue);
+      this.classList.toggle("collapsed", isCollapsed && !this.hasAttribute("show-collapsed-indicator"));
     } else if (name === "show-collapsed-indicator") {
-      if (WjElementUtils.stringToBoolean(newValue)) {
-        this._showCollapsedIndicator = true;
-        this.refresh();
-      }
+      const isOn = WjElementUtils.stringToBoolean(newValue);
+      this._showCollapsedIndicator = isOn;
+      this.refresh();
     } else if (name === "last") {
-      this.active = WjElementUtils.stringToBoolean(newValue);
-      this.showSeparator = !WjElementUtils.stringToBoolean(newValue);
+      const isLast = WjElementUtils.stringToBoolean(newValue);
+      this.active = isLast;
+      this.showSeparator = !isLast;
       this.refresh();
     }
-    return false;
   }
   /**
    * Setup attributes for the Breadcrumb element.