wj-elements 0.1.191 → 0.1.192

package/dist/dark.css

@@ -218,6 +218,10 @@
     --wje-select-background: var(--wje-color-contrast-0);
     --wje-select-color: var(--wje-color);
 
+    /* Sliding - Container */
+    --wje-sliding-container-background: transparent;
+    --wje-sliding-container-box-shadow: none;
+
     /* Tab */
     --wje-tab-color-active: var(--wje-color-primary-11);
     --wje-tab-color-hover: var(--wje-color-primary-1);

package/dist/light.css

@@ -316,6 +316,10 @@
     --wje-checkbox-border-radius: var(--wje-border-radius-medium);
 
     /* Chip */
+    --wje-chip-background: var(--wje-color-contrast-3);
+    --wje-chip-color: var(--wje-color-contrast-11);
+    --wje-chip-background-hover: var(--wje-color-contrast-4);
+    --wje-chip-color-hover: var(--wje-color-contrast-11);
     --wje-chip-border-radius: 100px;
     --wje-chip-margin: 0;
 
@@ -525,6 +529,11 @@
     --wje-select-find-margin-block: var(--wje-spacing-x-small);
     --wje-select-find-width: calc(100% - var(--wje-select-find-margin-inline) * 2);
 
+    /* Sliding - Container */
+    --wje-sliding-container-background: transparent;
+    --wje-sliding-container-box-shadow: none;
+    --wje-sliding-container-border-radius: var(--wje-border-radius-large);
+
     /* Status */
     --wje-status-size: var(--wje-size-small);
 

package/dist/packages/index.d.ts

@@ -81,6 +81,7 @@ export { default as RouterOutlet } from './wje-router-outlet/router-outlet.js';
 export { default as Row } from './wje-row/row.js';
 export { default as Select } from './wje-select/select.js';
 export { default as Slider } from './wje-slider/slider.js';
+export { default as SlidingContainer } from './wje-sliding-container/sliding-container.js';
 export { default as SplitView } from './wje-split-view/split-view.js';
 export { default as Status } from './wje-status/status.js';
 export { default as Step } from './wje-step/step.js';
@@ -100,7 +101,6 @@ export { default as Tooltip } from './wje-tooltip/tooltip.js';
 export { default as Tree } from './wje-tree/tree.js';
 export { default as TreeItem } from './wje-tree-item/tree-item.js';
 export { default as VisuallyHidden } from './wje-visually-hidden/visually-hidden.js';
-export { default as SlidingContainer } from '../experimental-packages/wje-sliding-container/sliding-container.js';
 export { setBasePath, getBasePath } from './utils/base-path.js';
 export { formatDate, toSafeDate } from './utils/date.js';
 export { registerIconLibrary, unregisterIconLibrary } from './utils/icon-library.js';

package/dist/packages/wje-sliding-container/sliding-container.d.ts

@@ -0,0 +1,2 @@
+import { default as SlidingContainer } from './sliding-container.element.js';
+export default SlidingContainer;

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

@@ -0,0 +1,265 @@
+import { default as WJElement } from '../wje-element/element.js';
+/**
+ * @summary SlidingContainer is a custom web component that extends WJElement.
+ * @documentation https://elements.webjet.sk/components/SlidingContainer
+ * @status stable
+ * @augments WJElement
+ * @csspart - Styles the element.
+ * @slot - The default slot for the SlidingContainer.
+ * @property {string} maxWidth - The maximum width of the SlidingContainer.
+ * @property {string} maxHeight - The maximum height of the SlidingContainer.
+ * @property {string} trigger - The trigger for the SlidingContainer.
+ * @property {string} direction - Specifies the sliding direction of the container (e.g., 'left' or 'right').
+ * @property {string} variant - Determines how the SlidingContainer behaves, such as 'over' or 'in-place'.
+ * @property {string} screenBreakPoint - The width (in pixels) at which the SlidingContainer switches to the "over" variant for smaller screens.
+ * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.
+ * @property {string} animationDuration - Specifies the duration (in milliseconds) of the sliding animation.
+ * @property {string} animationEasing - Specifies the easing function used for the sliding animation (e.g., 'linear', 'ease-in', 'ease-out').
+ * @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.
+ * @tag wje-sliding-container
+ * @example
+ * <wje-sliding-container trigger="test-resize-container-event-right" id="left-in-place" direction="left" max-width="100px" max-height="100%">
+ *    <wje-card>
+ *       <wje-card-header>
+ *        <wje-card-subtitle>CONTENT Subtitle</wje-card-subtitle>
+ *       <wje-card-title>CONTENT Title</wje-card-title>
+ *      </wje-card-header>
+ *     <wje-card-content>
+ *        CONTENT Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ *    </wje-card-content>
+ * </wje-card>
+ * </wje-sliding-container>
+ */
+export default class SlidingContainer extends WJElement {
+    /**
+     * Returns the observed attributes for the component.
+     * @returns {string[]}
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Returns the CSS styles for the component.
+     * @static
+     * @returns {CSSStyleSheet}
+     */
+    static get cssStyleSheet(): CSSStyleSheet;
+    _isOpen: boolean;
+    _lastCaller: EventTarget;
+    _resizeObserver: ResizeObserver;
+    /**
+     * Sets the 'variant' attribute to the specified value.
+     * @param {string} value The value to set for the 'variant' attribute.
+     */
+    set variant(value: string);
+    /**
+     * Retrieves the value of the "variant" attribute. If the attribute is not set,
+     * it returns the default value 'in-place'.
+     * @returns {string} The variant value or the default value 'in-place'.
+     */
+    get variant(): string;
+    /**
+     * Sets the maximum width of an element by updating the 'max-width' attribute.
+     * @param {string} value The maximum width value to be set (e.g., '100px', '50%', etc.).
+     */
+    set maxWidth(value: string);
+    /**
+     * Gets the maximum width value of the element.
+     * Retrieves the value of the 'max-width' attribute. If the attribute is not set, it defaults to 'auto'.
+     * @returns {string} The maximum width value of the element or 'auto' if the attribute is not defined.
+     */
+    get maxWidth(): string;
+    /**
+     * Sets the maximum height for the element.
+     * @param {string} value The maximum height value to be applied to the element. This can include units such as "px", "em", "%", etc.
+     */
+    set maxHeight(value: string);
+    /**
+     * Retrieves the maximum height value of the element, or returns 'auto' if not set.
+     * @returns {string} The maximum height value or 'auto' if the attribute is not specified.
+     */
+    get maxHeight(): string;
+    /**
+     * Sets the 'trigger' attribute for the element.
+     * @param {string} value The value to set for the 'trigger' attribute.
+     */
+    set trigger(value: string);
+    /**
+     * Retrieves the value of the 'trigger' attribute. If the attribute is not set, it defaults to 'sliding-container'.
+     * @returns {string} The value of the 'trigger' attribute or the default value 'sliding-container' if not defined.
+     */
+    get trigger(): string;
+    /**
+     * Sets the direction attribute for the element.
+     * @param {string} value The direction value to be assigned. Possible values are typically 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto'.
+     */
+    set direction(value: string);
+    /**
+     * Retrieves the direction attribute of the instance.
+     * If the direction attribute is not set, it defaults to 'right'.
+     * @returns {string} The value of the direction attribute or 'right' if not set.
+     */
+    get direction(): string;
+    /**
+     * Sets the value of the `remove-child-after-close` attribute.
+     * This attribute determines if a child element should be removed after a close operation.
+     * @param {boolean|string} value The value to set for the `remove-child-after-close` attribute. The value can be a boolean or a string representation of a boolean.
+     */
+    set removeChildAfterClose(value: boolean | string);
+    /**
+     * Gets the value indicating whether the child element should be removed after closing.
+     *
+     * This property checks the presence of the 'remove-child-after-close' attribute on the element.
+     * Returns `false` if the attribute does not exist.
+     * @returns {boolean} True if the 'remove-child-after-close' attribute is present, otherwise false.
+     */
+    get removeChildAfterClose(): boolean;
+    /**
+     * Sets the screen break point value to determine responsive behavior.
+     * @param {string} value The value to set as the screen break point.
+     */
+    set screenBreakPoint(value: string);
+    /**
+     * Retrieves the value of the 'screen-break-point' attribute.
+     * @returns {string} The value of the 'screen-break-point' attribute.
+     */
+    get screenBreakPoint(): string;
+    /**
+     * Sets the duration of the animation by updating the `animation-duration` attribute.
+     * @param {string} value The duration value for the animation, specified in a format
+     * such as seconds (e.g., "2s") or milliseconds (e.g., "200ms").
+     */
+    set animationDuration(value: string);
+    /**
+     * Gets the animation duration for an element.
+     * It retrieves the value of the 'animation-duration' attribute if present; otherwise, it defaults to '500'.
+     * @returns {string} The value of the animation duration, either from the attribute or the default '500'.
+     */
+    get animationDuration(): string;
+    /**
+     * Sets the easing function for the animation.
+     * @param {string} value The easing function to use for the animation. This can be any valid CSS timing function such as "ease", "linear", "ease-in", "ease-out", etc.
+     */
+    set animationEasing(value: string);
+    /**
+     * Retrieves the easing function for the animation.
+     * @returns {string} The value of the 'animation-easing' attribute if set, otherwise defaults to 'linear'.
+     */
+    get animationEasing(): string;
+    /**
+     * Determines if the element has an 'has-opacity' attribute.
+     * @returns {boolean} True if the element has the 'has-opacity' attribute, otherwise false.
+     */
+    get hasOpacity(): boolean;
+    /**
+     * Sets the value of the 'add-to-height' attribute.
+     * This attribute is used to modify or adjust the height dynamically.
+     * @param {string} value The value to be assigned to the 'add-to-height' attribute.
+     */
+    set addToHeight(value: string);
+    /**
+     * Retrieves the value of the 'add-to-height' attribute from the element.
+     * If the attribute is not set, it defaults to '0'.
+     * @returns {string} The value of the 'add-to-height' attribute or '0' if the attribute is not present.
+     */
+    get addToHeight(): string;
+    /**
+     * Determines whether the current state is open.
+     * @returns {boolean} True if the state is open, otherwise false.
+     */
+    get isOpen(): boolean;
+    /**
+     * Executes before drawing the element.
+     */
+    beforeDraw(): void;
+    /**
+     * Draws the component.
+     * @param {object} context The context for drawing.
+     * @param {object} store The store for drawing.
+     * @param {object} params The parameters for drawing.
+     * @returns {DocumentFragment}
+     */
+    draw(context: object, store: object, params: object): DocumentFragment;
+    transparentDiv: HTMLDivElement;
+    wrapperDiv: HTMLDivElement;
+    nativeElement: HTMLDivElement;
+    /**
+     * Performs actions after the element is drawn on the screen.
+     * Attaches an event listener to the document based on the specified trigger.
+     * Sets the variant to "over" if the document width is smaller than the screen break point.
+     * Calls the checkForVariant method with the current variant.
+     */
+    afterDraw(): void;
+    /**
+     * Creates and returns a styled close button element with an icon,
+     * including an event listener to trigger the close method.
+     * @returns {HTMLElement} The close button element configured with styles, an icon, and event listener.
+     */
+    getCloseButton(): HTMLElement;
+    /**
+     * Retrieves the parent element of the current element.
+     * If the parent element is not found, it attempts to find the root host element.
+     * @returns {Element|null} The parent element or the root host element if no parent exists. Returns null if neither is found.
+     */
+    getParentElement(): Element | null;
+    /**
+     * Adjusts the position and dimensions of the current element based on the specified variant.
+     *
+     * The method handles modifications to the element's positioning style, aligns it relative to its parent,
+     * and manages alignment to its siblings based on the specified direction.
+     * @param {string} variant The variant to determine how the element should be updated. For example, when set to 'over', specific adjustments to the position and size are performed.
+     * @returns {void} No value is returned, the method modifies the element's style properties directly.
+     */
+    checkForVariant(variant: string): void;
+    /**
+     * Triggers the event based on the target element.
+     * If the target element is different from the last caller, it refreshes the children by calling the `open` method.
+     * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.
+     * @param {Event} e The event object.
+     */
+    triggerEvent: (e: Event) => Promise<void>;
+    /**
+     * Executes before the element is opened.
+     */
+    beforeOpen(e: any): void;
+    /**
+     * Callback function called after the element is opened.
+     */
+    afterOpen(e: any): void;
+    /**
+     * Executes before closing the element.
+     */
+    beforeClose(e: any): void;
+    /**
+     * Callback function that is called after the container is closed.
+     */
+    afterClose(e: any): void;
+    /**
+     * Animates the transition of elements with specified options, toggling the visibility and/or dimensions
+     * of the associated elements based on their current state.
+     *
+     * This method handles both forward and reverse animations for two elements (`transparentDiv` and `nativeElement`)
+     * with optional opacity changes. It ensures smooth transitioning by canceling any previous animations on the provided
+     * elements before initiating a new animation sequence.
+     * @returns {Promise<void>} A promise that resolves when the transition animation is completed.
+     */
+    doAnimateTransition(): Promise<void>;
+    animation: any;
+    nativeAnimation: any;
+    /**
+     * Opens the sliding container by performing necessary preparatory and transitional operations.
+     * @param {Event} e The event that triggered the open operation.
+     * @returns {Promise<void>} A promise that resolves when the open operation, including animations and subsequent handlers, is complete.
+     */
+    open(e: Event): Promise<void>;
+    /**
+     * Closes the sliding container and performs associated operations such as animations and event dispatches.
+     * @param {Event} e The event object associated with the close action.
+     * @returns {Promise<void>} A promise that resolves when the closing operation, including animations and child element removal, is completed.
+     */
+    close(e: Event): Promise<void>;
+    /**
+     * Toggles the state between open and closed.
+     * @param {Event} e The event object triggering the toggle.
+     * @returns {Promise<void>} A promise that resolves once the toggle operation (open or close) is complete.
+     */
+    toggle(e: Event): Promise<void>;
+}

package/dist/wje-chip.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import WJElement from "./wje-element.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Chip ]\n*/\n\n:host {\n    display: inline-flex;\n    --wje-chip-round-border-radius: var(--wje-border-radius-large);\n    --wje-button-border-radius: var(--wje-chip-round-border-radius);\n}\n\n.native-chip {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    font-size: var(--wje-font-size);\n    line-height: 1;\n    letter-spacing: -0.006em;\n    margin: 0;\n    padding: 0 var(--wje-spacing-small);\n    text-align: center;\n    cursor: pointer;\n    white-space: nowrap;\n    text-shadow: none;\n    box-shadow: none;\n    border: 0 none;\n    width: 100%;\n    height: 28px;\n    max-width: fit-content;\n    position: relative;\n    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    border-radius: var(--wje-border-radius-pill);\n    overflow: hidden;\n    vertical-align: middle;\n    box-sizing: border-box;\n}\n\n:host(.focus) {\n    box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n    border: 1px solid var(--wje-color-primary-11);\n    background-color: var(--wje-color-contrast-3);\n    color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n    outline: none !important;\n}\n\n:host([size='small']) .native-chip {\n    font-size: var(--wje-font-size-small);\n    height: 24px;\n    padding: var(--wje-spacing-3x-small)  var(--wje-spacing-x-small);\n    wje-button {\n        --wje-button-margin-inline: var(--wje-spacing-3x-small) calc(-1 * var(--wje-spacing-3x-small));\n    }\n}\n\n:host([size='large']) .native-chip {\n    font-size: var(--wje-font-size-medium);\n    height: 34px;\n    padding: var(--wje-spacing-x-small) var(--wje-spacing-small);\n\n}\n\n:host([round]) .native-chip {\n    border-radius: var(--wje-chip-round-border-radius);\n}\n\n.check {\n    display: none;\n}\n\n:host([active]) {\n    .check {\n        display: block;\n        margin-inline: 4px 0;\n    }\n}\n\n:host([disabled]) {\n    opacity: 0.5;\n    border: 0;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n    width: 22px;\n    height: 22px;\n}\n\n::slotted(wje-avatar:first-child) {\n    margin-inline: -8px 8px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n}\n\n::slotted(wje-icon:first-child) {\n    margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:last-child) {\n    margin: -4px -4px -4px 8px;\n}\n\nslot[name='end'].has-content {\n    display: block;\n    margin-inline-start: 8px;\n}\n\nwje-button {\n    /*--wje-button-border-radius: 50%;*/\n    --wje-button-margin-inline: 0.25rem -0.5rem;\n    --wje-padding-top: 0.15rem;\n    --wje-padding-start: 0.15rem;\n    --wje-padding-end: 0.15rem;\n    --wje-padding-bottom: 0.15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n    background-color: var(--wje-color-warning-2);\n    color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-9);\n}\n\n.native-chip.wje-color-default {\n    background-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n    .native-chip.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-4);\n        color: var(--wje-color-primary-10);\n    }\n\n    .native-chip.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-4);\n        color: var(--wje-color-complete-10);\n    }\n\n    .native-chip.wje-color-success:hover {\n        background-color: var(--wje-color-success-4);\n        color: var(--wje-color-success-10);\n    }\n\n    .native-chip.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-4);\n        color: var(--wje-color-warning-11);\n    }\n\n    .native-chip.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-4);\n        color: var(--wje-color-danger-10);\n    }\n\n    .native-chip.wje-color-info:hover {\n        background-color: var(--wje-color-info-4);\n        color: var(--wje-color-info-10);\n    }\n\n    .native-chip.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-4);\n        color: var(--wje-color-contrast-11);\n    }\n}\n";
+const styles = "/*\n[ WJ Chip ]\n*/\n\n:host {\n    display: inline-flex;\n    --wje-chip-round-border-radius: var(--wje-border-radius-large);\n    --wje-button-border-radius: var(--wje-chip-round-border-radius);\n}\n\n.native-chip {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    font-size: var(--wje-font-size);\n    line-height: 1;\n    letter-spacing: -0.006em;\n    margin: 0;\n    padding: 0 var(--wje-spacing-small);\n    text-align: center;\n    cursor: pointer;\n    white-space: nowrap;\n    text-shadow: none;\n    box-shadow: none;\n    border: 0 none;\n    width: 100%;\n    height: 28px;\n    max-width: fit-content;\n    position: relative;\n    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    border-radius: var(--wje-border-radius-pill);\n    overflow: hidden;\n    vertical-align: middle;\n    box-sizing: border-box;\n    background-color: var(--wje-chip-background);\n    color: var(--wje-chip-color);\n    &:hover {\n        background-color: var(--wje-chip-background-hover);\n        color: var(--wje-chip-color-hover);\n    }\n}\n\n:host(.focus) {\n    box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n    border: 1px solid var(--wje-color-primary-11);\n    background-color: var(--wje-color-contrast-3);\n    color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n    outline: none !important;\n}\n\n:host([size='small']) .native-chip {\n    font-size: var(--wje-font-size-small);\n    height: 24px;\n    padding: var(--wje-spacing-3x-small)  var(--wje-spacing-x-small);\n    wje-button {\n        --wje-button-margin-inline: var(--wje-spacing-3x-small) calc(-1 * var(--wje-spacing-3x-small));\n    }\n}\n\n:host([size='large']) .native-chip {\n    font-size: var(--wje-font-size-medium);\n    height: 34px;\n    padding: var(--wje-spacing-x-small) var(--wje-spacing-small);\n\n}\n\n:host([round]) .native-chip {\n    border-radius: var(--wje-chip-round-border-radius);\n}\n\n.check {\n    display: none;\n}\n\n:host([active]) {\n    .check {\n        display: block;\n        margin-inline: 4px 0;\n    }\n}\n\n:host([disabled]) {\n    opacity: 0.5;\n    border: 0;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n    width: 22px;\n    height: 22px;\n}\n\n::slotted(wje-avatar:first-child) {\n    margin-inline: -8px 8px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n}\n\n::slotted(wje-icon:first-child) {\n    margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:last-child) {\n    margin: -4px -4px -4px 8px;\n}\n\nslot[name='end'].has-content {\n    display: block;\n    margin-inline-start: 8px;\n}\n\nwje-button {\n    /*--wje-button-border-radius: 50%;*/\n    --wje-button-margin-inline: 0.25rem -0.5rem;\n    --wje-padding-top: 0.15rem;\n    --wje-padding-start: 0.15rem;\n    --wje-padding-end: 0.15rem;\n    --wje-padding-bottom: 0.15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n    background-color: var(--wje-color-warning-2);\n    color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-9);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n    .native-chip.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-4);\n        color: var(--wje-color-primary-10);\n    }\n\n    .native-chip.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-4);\n        color: var(--wje-color-complete-10);\n    }\n\n    .native-chip.wje-color-success:hover {\n        background-color: var(--wje-color-success-4);\n        color: var(--wje-color-success-10);\n    }\n\n    .native-chip.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-4);\n        color: var(--wje-color-warning-11);\n    }\n\n    .native-chip.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-4);\n        color: var(--wje-color-danger-10);\n    }\n\n    .native-chip.wje-color-info:hover {\n        background-color: var(--wje-color-info-4);\n        color: var(--wje-color-info-10);\n    }\n}\n";
 class Chip extends WJElement {
   /**
    * Chip constructor method.

package/dist/wje-master.js

@@ -86,25 +86,25 @@ import { default as default71 } from "./wje-router-outlet.js";
 import { default as default72 } from "./wje-row.js";
 import { default as default73 } from "./wje-select.js";
 import { default as default74 } from "./wje-slider.js";
-import { default as default75 } from "./wje-split-view.js";
-import { default as default76 } from "./wje-status.js";
-import { default as default77 } from "./wje-step.js";
-import { default as default78 } from "./wje-stepper.js";
+import { default as default75 } from "./wje-sliding-container.js";
+import { default as default76 } from "./wje-split-view.js";
+import { default as default77 } from "./wje-status.js";
+import { default as default78 } from "./wje-step.js";
+import { default as default79 } from "./wje-stepper.js";
 import { defaultStoreActions, store } from "./wje-store.js";
-import { default as default79 } from "./wje-tab.js";
-import { default as default80 } from "./wje-tab-group.js";
-import { default as default81 } from "./wje-tab-panel.js";
-import { default as default82 } from "./wje-textarea.js";
-import { default as default83 } from "./wje-thumbnail.js";
-import { default as default84 } from "./wje-toast.js";
-import { default as default85 } from "./wje-toggle.js";
-import { default as default86 } from "./wje-toolbar.js";
-import { default as default87 } from "./wje-toolbar-action.js";
-import { default as default88 } from "./wje-tooltip.js";
-import { default as default89 } from "./wje-tree.js";
-import { default as default90 } from "./wje-tree-item.js";
-import { default as default91 } from "./wje-visually-hidden.js";
-import { default as default92 } from "./wje-sliding-container.js";
+import { default as default80 } from "./wje-tab.js";
+import { default as default81 } from "./wje-tab-group.js";
+import { default as default82 } from "./wje-tab-panel.js";
+import { default as default83 } from "./wje-textarea.js";
+import { default as default84 } from "./wje-thumbnail.js";
+import { default as default85 } from "./wje-toast.js";
+import { default as default86 } from "./wje-toggle.js";
+import { default as default87 } from "./wje-toolbar.js";
+import { default as default88 } from "./wje-toolbar-action.js";
+import { default as default89 } from "./wje-tooltip.js";
+import { default as default90 } from "./wje-tree.js";
+import { default as default91 } from "./wje-tree-item.js";
+import { default as default92 } from "./wje-visually-hidden.js";
 import { P } from "./popup.element-ZX3dWrG0.js";
 const skSk = {
   code: "sk-sk",
@@ -330,27 +330,27 @@ export {
   default72 as Row,
   default73 as Select,
   default74 as Slider,
-  default92 as SlidingContainer,
-  default75 as SplitView,
-  default76 as Status,
-  default77 as Step,
-  default78 as Stepper,
-  default79 as Tab,
-  default80 as TabGroup,
-  default81 as TabPanel,
-  default82 as Textarea,
-  default83 as Thumbnail,
+  default75 as SlidingContainer,
+  default76 as SplitView,
+  default77 as Status,
+  default78 as Step,
+  default79 as Stepper,
+  default80 as Tab,
+  default81 as TabGroup,
+  default82 as TabPanel,
+  default83 as Textarea,
+  default84 as Thumbnail,
   Timeline,
   TimelineItem,
-  default84 as Toast,
-  default85 as Toggle,
-  default86 as Toolbar,
-  default87 as ToolbarAction,
-  default88 as Tooltip,
-  default89 as Tree,
-  default90 as TreeItem,
+  default85 as Toast,
+  default86 as Toggle,
+  default87 as Toolbar,
+  default88 as ToolbarAction,
+  default89 as Tooltip,
+  default90 as Tree,
+  default91 as TreeItem,
   UniversalService,
-  default91 as VisuallyHidden,
+  default92 as VisuallyHidden,
   WJElement,
   b as bindRouterLinks,
   defaultStoreActions,

package/dist/wje-select.js

@@ -539,6 +539,7 @@ class Select extends FormAssociatedElement {
       this.clearSelections();
     });
     this.list.addEventListener("wje-options:load", (e) => {
+      var _a2;
       this.selectedOptions.forEach((option) => {
         this.getAllOptions().forEach((el) => {
           if (el.value === option.value) {
@@ -546,6 +547,15 @@ class Select extends FormAssociatedElement {
           }
         });
       });
+      const attrValue = ((_a2 = this.getAttribute("value")) == null ? void 0 : _a2.split(" ")) || [];
+      attrValue.forEach((val) => {
+        const existingOption = Array.from(this.getAllOptions()).find((el) => el.value === val);
+        if (existingOption) {
+          existingOption.selected = true;
+        }
+      });
+      this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this);
+      this.selections(true);
       this.list.scrollTo(0, 0);
       event.dispatchCustomEvent(this.popup, "wje-popup:content-ready");
     });