wj-elements 0.1.255 → 0.2.0-alpha.2

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/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-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/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":";;;;AAuCO,SAAS,gBAAgB,MAAM;AAClC,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,KAAI,6BAAM,SAAQ,KAAK;AACnC,WAAO,KAAK,WAAW,CAAC,IAAI,OAAO;AAAA,EAC3C;AAEI,QAAM,IAAI,KAAK,IAAI,IAAI,IAAI;AAG3B,QAAM,MAAM;AACZ,QAAM,MAAM;AAGZ,QAAM,QAAQ;AACd,QAAM,QAAQ;AAEd,SAAO;AAAA,IACH,YAAY,OAAO,CAAC,KAAK,GAAG,MAAM,GAAG;AAAA,IACrC,OAAO,OAAO,CAAC,KAAK,KAAK,MAAM,KAAK;AAAA,EACvC;AACL;AAsBO,SAAS,YAAY,QAAQ,SAAS,GAAG;AAC5C,MAAI,QAAQ,OAAO,MAAM,GAAG;AAC5B,MAAI,WAAW,MAAM,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,YAAa;AAErD,MAAI,MAAM,SAAS,KAAK,SAAS,GAAG;AAChC,gBAAY,MAAM,MAAM,SAAS,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,YAAa;AAAA,EACzE;AACI,SAAO;AACX;;AClEe,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV,UAAO;AAyDX;AAAA;AAAA;AAAA,qCAAY;AAAA,EAxDhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,EAAE;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU,KAAK;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAWI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,YAAY,OAAO;AAAA,EACnC;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,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,eAAe;AAErC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,YAAQ,YAAY,IAAI;AAExB,QAAI,KAAK,UAAU;AACf,UAAI,WAAW,YAAY,KAAK,KAAK;AACrC,YAAM,EAAE,YAAY,UAAU,gBAAgB,QAAQ;AAEtD,WAAK,MAAM,YAAY,iCAAiC,UAAU;AAClE,WAAK,MAAM,YAAY,sBAAsB,KAAK;AAElD,cAAQ,YAAY;AAAA,IAChC,OAAe;AACH,UAAI,WAAW,SAAS,cAAc,MAAM;AAC5C,eAAS,aAAa,QAAQ,MAAM;AAEpC,cAAQ,YAAY,QAAQ;AAAA,IACxC;AAEQ,QAAI,SAAS,SAAS,cAAc,MAAM;AAC1C,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,QAAQ;AAEpC,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,WAAW;AAC1C,cAAU,aAAa,QAAQ,WAAW;AAE1C,YAAQ,YAAY,MAAM;AAC1B,YAAQ,YAAY,SAAS;AAE7B,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,UAAU;AACN,WAAO,KAAK,qBAAqB,SAAS,EAAE,SAAS;AAAA,EAC7D;AACA;AChKA,OAAO,OAAO,cAAc,MAAM;"}

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.

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     * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.\n     * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.\n     * @returns {boolean} Returns false to signal no default behavior is implemented.\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.append(start, slot, end);\n\n        // APPEND\n        fragment.append(native);\n\n        if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {\n            // pridame button za native element\n            fragment.append(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.append(slotSeparator);\n            } else {\n                separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n            }\n\n            fragment.append(separator);\n        }\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Renders the collapsed indicator based on the current collapsed variant.\n     * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\n     * Otherwise, it invokes the collapseButton method.\n     * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.\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     * Creates and returns a dropdown UI component for collapsed breadcrumbs.\n     * This method generates a dropdown element with a button trigger and a menu populated with items corresponding\n     * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\n     * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\n     * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n     * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.\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        menu.addEventListener('click', (e) => {\n            e.stopPropagation();\n            e.stopImmediatePropagation?.();\n        });\n\n        this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((b) => {\n            let menuItem = document.createElement('wje-menu-item');\n            menuItem.innerHTML = b.innerHTML;\n\n            menuItem.__breadcrumb = b;\n\n            menuItem.addEventListener('wje-menu-item:click', (e) => {\n                e.preventDefault?.();\n                e.stopPropagation();\n                e.stopImmediatePropagation?.();\n\n                const breadcrumb = e.currentTarget.__breadcrumb;\n                if (!breadcrumb) return;\n\n                // Prefer clicking the internal anchor (same behavior as real user click), fallback to host click.\n                const native = breadcrumb.native || breadcrumb.shadowRoot?.querySelector('a.native-breadcrumb');\n                if (native && typeof native.click === 'function') {\n                    native.click();\n                } else if (typeof breadcrumb.click === 'function') {\n                    breadcrumb.click();\n                } else {\n                    breadcrumb.dispatchEvent(\n                        new MouseEvent('click', {\n                            bubbles: true,\n                            composed: true,\n                            cancelable: true\n                        })\n                    );\n                }\n            });\n\n            menu.append(menuItem);\n        });\n\n        dropdown.append(button, menu);\n\n        return dropdown;\n    }\n\n    /**\n     * Creates a button element that expands hidden breadcrumbs when clicked.\n     * The button is set with appropriate attributes and event listeners to handle\n     * the expanding of hidden breadcrumb elements. Clicking the button will remove\n     * the button itself, reveal hidden breadcrumbs, and stop the current event\n     * propagation.\n     * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.\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.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {\n                el.classList.remove('collapsed');\n            });\n            e.stopPropagation();\n        });\n\n        return button;\n    }\n\n    /**\n     * Retrieves the breadcrumb trail for the current element by returning its parent element.\n     * @returns {Element} The parent element representing the breadcrumb trail.\n     */\n    getBreadcrumbs() {\n        return this.parentElement;\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     * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.\n     * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.\n     * @returns {boolean} Returns false to signal no default behavior is implemented.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n\n        if (name === 'collapsed') {\n            const isCollapsed = WjElementUtils.stringToBoolean(newValue);\n\n            // toggle class podľa stavu\n            this.classList.toggle('collapsed', isCollapsed && !this.hasAttribute('show-collapsed-indicator'));\n\n        } else if (name === 'show-collapsed-indicator') {\n            const isOn = WjElementUtils.stringToBoolean(newValue);\n            this._showCollapsedIndicator = isOn;\n            this.refresh();\n\n        } else if (name === 'last') {\n            const isLast = WjElementUtils.stringToBoolean(newValue);\n            this.active = isLast;\n            this.showSeparator = !isLast;\n            this.refresh();\n        }\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.append(start, slot, end);\n\n        // APPEND\n        fragment.append(native);\n\n        if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {\n            // pridame button za native element\n            fragment.append(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.append(slotSeparator);\n            } else {\n                separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n            }\n\n            fragment.append(separator);\n        }\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Renders the collapsed indicator based on the current collapsed variant.\n     * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\n     * Otherwise, it invokes the collapseButton method.\n     * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.\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     * Creates and returns a dropdown UI component for collapsed breadcrumbs.\n     * This method generates a dropdown element with a button trigger and a menu populated with items corresponding\n     * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\n     * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\n     * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n     * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.\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        menu.addEventListener('click', (e) => {\n            e.stopPropagation();\n            e.stopImmediatePropagation?.();\n        });\n\n        this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((b) => {\n            let menuItem = document.createElement('wje-menu-item');\n            menuItem.innerHTML = b.innerHTML;\n\n            menuItem.__breadcrumb = b;\n\n            menuItem.addEventListener('wje-menu-item:click', (e) => {\n                e.preventDefault?.();\n                e.stopPropagation();\n                e.stopImmediatePropagation?.();\n\n                const breadcrumb = e.currentTarget.__breadcrumb;\n                if (!breadcrumb) return;\n\n                // Prefer clicking the internal anchor (same behavior as real user click), fallback to host click.\n                const native = breadcrumb.native || breadcrumb.shadowRoot?.querySelector('a.native-breadcrumb');\n                if (native && typeof native.click === 'function') {\n                    native.click();\n                } else if (typeof breadcrumb.click === 'function') {\n                    breadcrumb.click();\n                } else {\n                    breadcrumb.dispatchEvent(\n                        new MouseEvent('click', {\n                            bubbles: true,\n                            composed: true,\n                            cancelable: true\n                        })\n                    );\n                }\n            });\n\n            menu.append(menuItem);\n        });\n\n        dropdown.append(button, menu);\n\n        return dropdown;\n    }\n\n    /**\n     * Creates a button element that expands hidden breadcrumbs when clicked.\n     * The button is set with appropriate attributes and event listeners to handle\n     * the expanding of hidden breadcrumb elements. Clicking the button will remove\n     * the button itself, reveal hidden breadcrumbs, and stop the current event\n     * propagation.\n     * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.\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.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {\n                el.classList.remove('collapsed');\n            });\n            e.stopPropagation();\n        });\n\n        return button;\n    }\n\n    /**\n     * Retrieves the breadcrumb trail for the current element by returning its parent element.\n     * @returns {Element} The parent element representing the breadcrumb trail.\n     */\n    getBreadcrumbs() {\n        return this.parentElement;\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-chip.js

@@ -71,6 +71,26 @@ class Chip extends WJElement {
   get removable() {
     return this.hasAttribute("removable");
   }
+  /**
+   * 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) {
+    if (value) {
+      this.setAttribute("disabled", "");
+    } else {
+      this.removeAttribute("disabled");
+    }
+  }
+  /**
+   * Determines if the element has the 'disabled' attribute.
+   * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
   /**
    * Getter for the CSS stylesheet.
    * @returns {*}

package/dist/wje-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.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 method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot - The chip main content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n    /**\n     * Chip constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets or removes the \"round\" attribute on the element based on the provided value.\n     * @param {boolean} value Determines whether the \"round\" attribute should be set or removed.\n     * If true, the \"round\" attribute is added. If false, the \"round\"\n     * attribute is removed.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the size attribute of the element.\n     * @param {string} 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 current element.\n     * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.\n     */\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Sets or removes the \"removable\" attribute on the element.\n     * @param {boolean} value A boolean indicating whether the element should have the \"removable\" attribute.\n     * If true, the \"removable\" attribute is added;\n     * if false, the \"removable\" attribute is removed.\n     */\n    set removable(value) {\n        if (value) {\n            this.setAttribute('removable', '');\n        } else {\n            this.removeAttribute('removable');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'removable' attribute.\n     * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.\n     */\n    get removable() {\n        return this.hasAttribute('removable');\n    }\n\n    /**\n     * Class name for the Chip element.\n     * @type {string}\n     */\n    className = 'Chip';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Chip element.\n     * @returns {DocumentFragment}\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-chip');\n\n        let slot = document.createElement('slot');\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        let remove = document.createElement('wje-button');\n        remove.setAttribute('part', 'remove');\n        remove.setAttribute('fill', 'link');\n        remove.setAttribute('color', this.color || 'default');\n        remove.round = !this.round;\n\n        if(this.hasAttribute('size')) {\n            if(this.size === 'small') {\n                remove.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n            } else if (this.size === 'large') {\n                remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n            }\n        } else {\n            remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n        }\n\n        let active = document.createElement('wje-icon');\n        active.setAttribute('name', 'check');\n        active.classList.add('check');\n\n        // Add color\n        if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n        else native.classList.add('wje-color-default', 'wje-color');\n\n        if (this.disabled) this.classList.add('wje-disabled');\n\n        if (this.outline) this.classList.add('wje-outline');\n\n        native.appendChild(slot);\n        native.appendChild(slotEnd);\n        native.appendChild(active);\n\n        if (this.removable) native.appendChild(remove);\n\n        fragment.appendChild(native);\n\n        this.removeElement = remove;\n        this.slotEnd = slotEnd;\n\n        return fragment;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    afterDraw() {\n        if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\n        event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n    }\n\n    /**\n     * Before disconnect event for the Chip element.\n     */\n    beforeDisconnect() {\n        event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.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 method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot - The chip main content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n    /**\n     * Chip constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets or removes the \"round\" attribute on the element based on the provided value.\n     * @param {boolean} value Determines whether the \"round\" attribute should be set or removed.\n     * If true, the \"round\" attribute is added. If false, the \"round\"\n     * attribute is removed.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the size attribute of the element.\n     * @param {string} 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 current element.\n     * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.\n     */\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Sets or removes the \"removable\" attribute on the element.\n     * @param {boolean} value A boolean indicating whether the element should have the \"removable\" attribute.\n     * If true, the \"removable\" attribute is added;\n     * if false, the \"removable\" attribute is removed.\n     */\n    set removable(value) {\n        if (value) {\n            this.setAttribute('removable', '');\n        } else {\n            this.removeAttribute('removable');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'removable' attribute.\n     * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.\n     */\n    get removable() {\n        return this.hasAttribute('removable');\n    }\n\n    /**\n     * Sets the disabled state of the element.\n     * If true, the 'disabled' attribute is added to the element.\n     * If false, the 'disabled' attribute is removed from the element.\n     * @param {boolean} value Specifies whether the element should be disabled.\n     */\n    set disabled(value) {\n        if (value) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'disabled' attribute.\n     * @returns {boolean} True if the element has the 'disabled' attribute, otherwise false.\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Class name for the Chip element.\n     * @type {string}\n     */\n    className = 'Chip';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Chip element.\n     * @returns {DocumentFragment}\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-chip');\n\n        let slot = document.createElement('slot');\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        let remove = document.createElement('wje-button');\n        remove.setAttribute('part', 'remove');\n        remove.setAttribute('fill', 'link');\n        remove.setAttribute('color', this.color || 'default');\n        remove.round = !this.round;\n\n        if(this.hasAttribute('size')) {\n            if(this.size === 'small') {\n                remove.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n            } else if (this.size === 'large') {\n                remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n            }\n        } else {\n            remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n        }\n\n        let active = document.createElement('wje-icon');\n        active.setAttribute('name', 'check');\n        active.classList.add('check');\n\n        // Add color\n        if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n        else native.classList.add('wje-color-default', 'wje-color');\n\n        if (this.disabled) this.classList.add('wje-disabled');\n\n        if (this.outline) this.classList.add('wje-outline');\n\n        native.appendChild(slot);\n        native.appendChild(slotEnd);\n        native.appendChild(active);\n\n        if (this.removable) native.appendChild(remove);\n\n        fragment.appendChild(native);\n\n        this.removeElement = remove;\n        this.slotEnd = slotEnd;\n\n        return fragment;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    afterDraw() {\n        if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\n        event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n    }\n\n    /**\n     * Before disconnect event for the Chip element.\n     */\n    beforeDisconnect() {\n        event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":"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"}

package/dist/wje-dialog.js

@@ -82,6 +82,13 @@ const styles = `/*
         padding-inline: var(--wje-dialog-footer-padding-inline);
         padding-block: var(--wje-dialog-footer-padding-block);
     }
+
+    /* Footer should not take space when nothing is slotted */
+    .dialog-footer[hidden] {
+        display: none;
+        padding-inline: 0;
+        padding-block: 0;
+    }
 }
 
 .blocking-element {
@@ -267,6 +274,8 @@ dialog[open] {
     }
     .dialog-content {
         overflow: auto;
+        padding-block: 0;
+        margin-block: var(--wje-dialog-content-padding-block);
     }
 }
 `;
@@ -465,6 +474,8 @@ class Dialog extends WJElement {
     footer.innerHTML = "";
     let slotFooter = document.createElement("slot");
     slotFooter.setAttribute("name", "footer");
+    slotFooter.id = "footerSlot";
+    slotFooter.addEventListener("slotchange", () => this.updateHasFooter());
     close.appendChild(icon);
     if (!this.closeHidden) header.appendChild(close);
     header.appendChild(headerActions);
@@ -473,6 +484,7 @@ class Dialog extends WJElement {
     if (!this.hiddenHeader) dialog.appendChild(header);
     dialog.appendChild(body);
     if (!this.hiddenFooter) dialog.appendChild(footer);
+    Promise.resolve().then(() => this.updateHasFooter());
   }
   /**
    * Closes the dialog.
@@ -537,6 +549,29 @@ class Dialog extends WJElement {
       });
     });
   }
+  updateHasFooter() {
+    var _a, _b, _c;
+    if (this.hiddenFooter) {
+      const footerEl2 = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".dialog-footer");
+      if (footerEl2) footerEl2.setAttribute("hidden", "");
+      this.removeAttribute("has-footer");
+      return;
+    }
+    const slot = (_b = this.shadowRoot) == null ? void 0 : _b.getElementById("footerSlot");
+    if (!slot) {
+      this.removeAttribute("has-footer");
+      return;
+    }
+    const assigned = slot.assignedNodes({ flatten: true });
+    const hasContent = assigned.some((n) => {
+      if (n.nodeType === Node.ELEMENT_NODE) return true;
+      if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;
+      return false;
+    });
+    const footerEl = (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(".dialog-footer");
+    if (footerEl) footerEl.toggleAttribute("hidden", !hasContent);
+    this.toggleAttribute("has-footer", hasContent);
+  }
 }
 Dialog.define("wje-dialog", Dialog);
 export {