wj-elements 0.1.255 → 0.2.0-alpha.2

package/dist/wje-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'headline' attribute.\n     * @param {string} value The new value for the 'headline' attribute.\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Retrieves the value of the \"headline\" attribute from the element.\n     * If the \"headline\" attribute is not present, returns an empty string.\n     * @returns {string} The headline attribute value or an empty string if not set.\n     */\n    get headline() {\n        return this.getAttribute('headline') || '';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set placement(value) {\n        this.setAttribute('placement', value);\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {string|string}\n     */\n    get placement() {\n        return this.getAttribute('placement') || 'slide-up';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set async(value) {\n        this.setAttribute('async', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get async() {\n        return this.hasAttribute('async');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set closeHidden(value) {\n        if (value) this.setAttribute('close-hidden', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get closeHidden() {\n        return !!this.hasAttribute('close-hidden');\n    }\n\n    set hiddenHeader(value) {\n        if (value) this.setAttribute('hidden-header', '');\n    }\n\n    get hiddenHeader() {\n        return !!this.hasAttribute('hidden-header');\n    }\n\n    set hiddenFooter(value) {\n        if (value) this.setAttribute('hidden-footer', '');\n    }\n\n    get hiddenFooter() {\n        return !!this.hasAttribute('hidden-footer');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @type {string}\n     */\n    className = 'Dialog';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('fade', this.placement, params.size);\n\n        let dialog = document.createElement('dialog');\n        dialog.setAttribute('part', 'dialog');\n        dialog.classList.add('modal-dialog');\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component after it has been drawn.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     */\n    afterDraw(context, store, params) {\n        if (params.trigger) {\n            event.addListener(document, params.trigger, null, this.onOpen);\n        }\n    }\n\n    /**\n     * Creates the dialog body.\n     * @param dialog\n     */\n    htmlDialogBody(dialog) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'x');\n        icon.setAttribute('slot', 'icon-only');\n\n        let close = document.createElement('wje-button');\n        close.setAttribute('fill', 'link');\n        close.setAttribute('size', 'small');\n        close.setAttribute('part', 'close');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.headline}</span>`;\n\n        let slotHeader = document.createElement('slot');\n        slotHeader.setAttribute('name', 'header');\n\n        const headerActions = document.createElement('div');\n        headerActions.classList.add('header-actions');\n        headerActions.setAttribute('part', 'header-actions');\n        headerActions.appendChild(slotHeader);\n\n        let contentSlot = document.createElement('slot');\n\n        let body = document.createElement('div');\n        body.setAttribute('part', 'body');\n        body.classList.add('dialog-content');\n\n        let footer = document.createElement('div');\n        footer.setAttribute('part', 'footer');\n        footer.classList.add('dialog-footer');\n        footer.innerHTML = '';\n\n        let slotFooter = document.createElement('slot');\n        slotFooter.setAttribute('name', 'footer');\n\n        close.appendChild(icon);\n\n        if (!this.closeHidden) header.appendChild(close);\n\n        header.appendChild(headerActions);\n        body.appendChild(contentSlot);\n        footer.appendChild(slotFooter);\n\n        if (!this.hiddenHeader) dialog.appendChild(header);\n        dialog.appendChild(body);\n        if (!this.hiddenFooter) dialog.appendChild(footer);\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\n    }\n\n    /**\n     * Before the component is disconnected.\n     */\n    beforeDisconnect() {\n        if (this.params?.trigger) {\n            event.removeListener(document, this.params?.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.removeEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the dialog opens.\n     */\n    beforeOpen(dialog, trigger) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen(dialog, trigger) {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose(dialog, trigger) {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose(dialog, trigger) {\n        // Hook for extending behavior after the dialog closes\n    }\n\n    /**\n     * Opens the dialog.\n     * @param e\n     */\n    onOpen = (e) => {\n        if (this.dialog) {\n            this.dialog.innerHTML = '';\n        }\n\n        setTimeout(() => {\n            Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n                this.htmlDialogBody(this.dialog);\n\n                this.dialog.showModal(); // Now open the dialog\n\n                if (this.dialog.open) {\n                    Promise.resolve(this.afterOpen(this, e));\n                }\n            });\n        }, 0);\n    }\n\n    /**\n     * Closes the dialog.\n     * @param {object} e\n     */\n    onClose = (e) => {\n        Promise.resolve(this.beforeClose(this, e)).then((res) => {\n            this.dialog.close(); // Now close the dialog\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    /**\n     * Registers an event listener on the provided button that triggers a blocking UI element\n     * and executes a given promise when the button is clicked.\n     * @param {HTMLElement} button The button element to attach the event listener to.\n     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n     */\n    registerBlockingEvent(button, promise) {\n        button.addEventListener('wje-button:click', async (e) => {\n            let blockingElement = document.createElement('div');\n            blockingElement.classList.add('blocking-element');\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', 'loader-2');\n            icon.setAttribute('size', '2x-large');\n\n            blockingElement.appendChild(icon);\n\n            let scrollOffset = this.dialog.scrollTop;\n            blockingElement.style.top = `${scrollOffset}px`;\n            blockingElement.style.bottom = `-${scrollOffset}px`;\n\n            this.dialog.appendChild(blockingElement);\n\n            await promise()\n                .then((res) => {\n                    this.close();\n                    blockingElement.remove();\n                })\n                .catch((err) => {\n                    console.error(err);\n                    blockingElement.remove();\n                });\n        });\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the 'headline' attribute.\n     * @param {string} value The new value for the 'headline' attribute.\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Retrieves the value of the \"headline\" attribute from the element.\n     * If the \"headline\" attribute is not present, returns an empty string.\n     * @returns {string} The headline attribute value or an empty string if not set.\n     */\n    get headline() {\n        return this.getAttribute('headline') || '';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set placement(value) {\n        this.setAttribute('placement', value);\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {string|string}\n     */\n    get placement() {\n        return this.getAttribute('placement') || 'slide-up';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set async(value) {\n        this.setAttribute('async', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get async() {\n        return this.hasAttribute('async');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set closeHidden(value) {\n        if (value) this.setAttribute('close-hidden', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get closeHidden() {\n        return !!this.hasAttribute('close-hidden');\n    }\n\n    set hiddenHeader(value) {\n        if (value) this.setAttribute('hidden-header', '');\n    }\n\n    get hiddenHeader() {\n        return !!this.hasAttribute('hidden-header');\n    }\n\n    set hiddenFooter(value) {\n        if (value) this.setAttribute('hidden-footer', '');\n    }\n\n    get hiddenFooter() {\n        return !!this.hasAttribute('hidden-footer');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @type {string}\n     */\n    className = 'Dialog';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('fade', this.placement, params.size);\n\n        let dialog = document.createElement('dialog');\n        dialog.setAttribute('part', 'dialog');\n        dialog.classList.add('modal-dialog');\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component after it has been drawn.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     */\n    afterDraw(context, store, params) {\n        if (params.trigger) {\n            event.addListener(document, params.trigger, null, this.onOpen);\n        }\n    }\n\n    /**\n     * Creates the dialog body.\n     * @param dialog\n     */\n    htmlDialogBody(dialog) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'x');\n        icon.setAttribute('slot', 'icon-only');\n\n        let close = document.createElement('wje-button');\n        close.setAttribute('fill', 'link');\n        close.setAttribute('size', 'small');\n        close.setAttribute('part', 'close');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.headline}</span>`;\n\n        let slotHeader = document.createElement('slot');\n        slotHeader.setAttribute('name', 'header');\n\n        const headerActions = document.createElement('div');\n        headerActions.classList.add('header-actions');\n        headerActions.setAttribute('part', 'header-actions');\n        headerActions.appendChild(slotHeader);\n\n        let contentSlot = document.createElement('slot');\n\n        let body = document.createElement('div');\n        body.setAttribute('part', 'body');\n        body.classList.add('dialog-content');\n\n        let footer = document.createElement('div');\n        footer.setAttribute('part', 'footer');\n        footer.classList.add('dialog-footer');\n        footer.innerHTML = '';\n\n        let slotFooter = document.createElement('slot');\n        slotFooter.setAttribute('name', 'footer');\n        slotFooter.id = 'footerSlot';\n        slotFooter.addEventListener('slotchange', () => this.updateHasFooter());\n\n        close.appendChild(icon);\n\n        if (!this.closeHidden) header.appendChild(close);\n\n        header.appendChild(headerActions);\n        body.appendChild(contentSlot);\n        footer.appendChild(slotFooter);\n\n        if (!this.hiddenHeader) dialog.appendChild(header);\n        dialog.appendChild(body);\n        if (!this.hiddenFooter) dialog.appendChild(footer);\n\n        // Slot assignment may not be reflected synchronously on first render.\n        // Run in a microtask to ensure assignedNodes() sees slotted content.\n        Promise.resolve().then(() => this.updateHasFooter());\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\n    }\n\n    /**\n     * Before the component is disconnected.\n     */\n    beforeDisconnect() {\n        if (this.params?.trigger) {\n            event.removeListener(document, this.params?.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.removeEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the dialog opens.\n     */\n    beforeOpen(dialog, trigger) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen(dialog, trigger) {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose(dialog, trigger) {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose(dialog, trigger) {\n        // Hook for extending behavior after the dialog closes\n    }\n\n    /**\n     * Opens the dialog.\n     * @param e\n     */\n    onOpen = (e) => {\n        if (this.dialog) {\n            this.dialog.innerHTML = '';\n        }\n\n        setTimeout(() => {\n            Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n                this.htmlDialogBody(this.dialog);\n\n                this.dialog.showModal(); // Now open the dialog\n\n                if (this.dialog.open) {\n                    Promise.resolve(this.afterOpen(this, e));\n                }\n            });\n        }, 0);\n    }\n\n    /**\n     * Closes the dialog.\n     * @param {object} e\n     */\n    onClose = (e) => {\n        Promise.resolve(this.beforeClose(this, e)).then((res) => {\n            this.dialog.close(); // Now close the dialog\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    /**\n     * Registers an event listener on the provided button that triggers a blocking UI element\n     * and executes a given promise when the button is clicked.\n     * @param {HTMLElement} button The button element to attach the event listener to.\n     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n     */\n    registerBlockingEvent(button, promise) {\n        button.addEventListener('wje-button:click', async (e) => {\n            let blockingElement = document.createElement('div');\n            blockingElement.classList.add('blocking-element');\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', 'loader-2');\n            icon.setAttribute('size', '2x-large');\n\n            blockingElement.appendChild(icon);\n\n            let scrollOffset = this.dialog.scrollTop;\n            blockingElement.style.top = `${scrollOffset}px`;\n            blockingElement.style.bottom = `-${scrollOffset}px`;\n\n            this.dialog.appendChild(blockingElement);\n\n            await promise()\n                .then((res) => {\n                    this.close();\n                    blockingElement.remove();\n                })\n                .catch((err) => {\n                    console.error(err);\n                    blockingElement.remove();\n                });\n        });\n    }\n\n    updateHasFooter() {\n        // If footer is intentionally hidden, ensure it doesn't reserve space\n        if (this.hiddenFooter) {\n            const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n            if (footerEl) footerEl.setAttribute('hidden', '');\n            this.removeAttribute('has-footer');\n            return;\n        }\n        const slot = this.shadowRoot?.getElementById('footerSlot');\n        if (!slot) {\n            this.removeAttribute('has-footer');\n            return;\n        }\n\n        const assigned = slot.assignedNodes({ flatten: true });\n        const hasContent = assigned.some((n) => {\n            if (n.nodeType === Node.ELEMENT_NODE) return true;\n            if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;\n            return false;\n        });\n\n        // Prefer toggling the actual footer element so CSS/spacing is always correct\n        const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n        if (footerEl) footerEl.toggleAttribute('hidden', !hasContent);\n\n        // Keep host attribute too (harmless, may be used elsewhere)\n        this.toggleAttribute('has-footer', hasContent);\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":["footerEl"],"mappings":"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"}

package/dist/wje-element.js

@@ -15,8 +15,201 @@ import { Permissions } from "./permissions.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
 import { store, defaultStoreActions } from "./wje-store.js";
+const skeletonCss = `/*
+[ Skeleton ]
+*/
+
+@keyframes wje-skeleton-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.wje-skeleton {
+  cursor: progress;
+  user-select: none;
+}
+
+.wje-skeleton-overlay {
+  display: grid;
+}
+
+.wje-skeleton-overlay-content,
+.wje-skeleton-overlay-skeleton {
+  grid-area: 1 / 1;
+}
+
+.wje-skeleton-overlay-skeleton {
+  display: none;            /* shown in loading state */
+  pointer-events: none;     /* skeleton should not be interactive */
+  align-self: stretch;
+  justify-self: stretch;
+}
+
+.wje-skeleton-overlay-skeleton > .wje-skeleton {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* Base "shape" primitives */
+.wje-skeleton-line,
+.wje-skeleton-head,
+.wje-skeleton-circle,
+.wje-skeleton-square {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--wje-skeleton-bg);
+}
+
+.wje-skeleton-line {
+  display: block;
+  height: var(--wje-skeleton-height);
+  border-radius: var(--wje-skeleton-radius);
+  width: 100%;
+  flex: 0 0 auto;
+}
+
+.wje-skeleton-flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--wje-skeleton-gap);
+}
+
+.wje-skeleton-flex-column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wje-skeleton-gap);
+}
+
+.wje-skeleton-line + .wje-skeleton-line,
+.wje-skeleton-line + .wje-skeleton-head,
+.wje-skeleton-head + .wje-skeleton-line,
+.wje-skeleton-head + .wje-skeleton-head,
+.wje-skeleton-circle + .wje-skeleton-line,
+.wje-skeleton-line + .wje-skeleton-circle {
+  /*margin-top: var(--wje-skeleton-gap);*/
+}
+
+.wje-skeleton-head {
+  display: block;
+  height: var(--wje-skeleton-head-height);
+  border-radius: var(--wje-skeleton-radius);
+  width: 100%;
+}
+
+.wje-skeleton-circle {
+  display: block;
+  /* Take remaining width in flex row (e.g. 40% if sibling is w-60) */
+  flex: 1 1 0;
+  max-width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+}
+
+.wje-skeleton-square {
+  display: block;
+  width: 100%;
+  height: 150px;
+  border-radius: 8px;
+}
+
+/* Shimmer layer */
+.wje-skeleton-line::after,
+.wje-skeleton-head::after,
+.wje-skeleton-circle::after,
+.wje-skeleton-square::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  animation: wje-skeleton-shimmer var(--wje-skeleton-duration) infinite;
+  background: linear-gradient(90deg, transparent, var(--wje-skeleton-highlight), transparent);
+}
+
+/* "Stronger" variant */
+.wje-skeleton-strong .wje-skeleton-line,
+.wje-skeleton-strong .wje-skeleton-head,
+.wje-skeleton-strong .wje-skeleton-circle,
+.wje-skeleton-strong .wje-skeleton-square {
+  background-color: var(--wje-skeleton-bg-strong);
+}
+
+/* Simple layout helpers (opt-in) */
+.wje-skeleton .flex { display: flex; }
+.wje-skeleton .inline-flex { display: inline-flex; }
+.wje-skeleton .align-center { align-items: center; }
+.wje-skeleton .align-start { align-items: flex-start; }
+.wje-skeleton .align-end { align-items: flex-end; }
+.wje-skeleton .justify-start { justify-content: flex-start; }
+.wje-skeleton .justify-end { justify-content: flex-end; }
+.wje-skeleton .justify-between { justify-content: space-between; }
+.wje-skeleton .justify-center { justify-content: center; }
+.wje-skeleton .justify-around { justify-content: space-around; }
+
+.wje-skeleton .gap { gap: var(--wje-skeleton-gap); }
+
+.wje-skeleton .w-5 { width: 5%; }
+.wje-skeleton .w-10 { width: 10%; }
+.wje-skeleton .w-15 { width: 15%; }
+.wje-skeleton .w-20 { width: 20%; }
+.wje-skeleton .w-25 { width: 25%; }
+.wje-skeleton .w-30 { width: 30%; }
+.wje-skeleton .w-35 { width: 35%; }
+.wje-skeleton .w-40 { width: 40%; }
+.wje-skeleton .w-45 { width: 45%; }
+.wje-skeleton .w-50 { width: 50%; }
+.wje-skeleton .w-55 { width: 55%; }
+.wje-skeleton .w-60 { width: 60%; }
+.wje-skeleton .w-65 { width: 65%; }
+.wje-skeleton .w-70 { width: 70%; }
+.wje-skeleton .w-75 { width: 75%; }
+.wje-skeleton .w-80 { width: 80%; }
+.wje-skeleton .w-85 { width: 85%; }
+.wje-skeleton .w-90 { width: 90%; }
+.wje-skeleton .w-95 { width: 95%; }
+.wje-skeleton .w-100 { width: 100%; }
+
+.wje-skeleton .mb { margin-bottom: 16px; }
+.wje-skeleton .mt { margin-top: 16px; }
+.wje-skeleton .mr { margin-right: 16px; }
+.wje-skeleton .ml { margin-left: 16px; }
+.wje-skeleton .mbs { margin-bottom: 8px; }
+.wje-skeleton .mts { margin-top: 8px; }
+.wje-skeleton .mrs { margin-right: 8px; }
+.wje-skeleton .mls { margin-left: 8px; }
+
+/* Optional state helpers */
+.wje-skeleton-loading .wje-skeleton-overlay-content {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.wje-skeleton-loading .wje-skeleton-overlay-skeleton {
+  display: block;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wje-skeleton-line::after,
+  .wje-skeleton-head::after,
+  .wje-skeleton-circle::after,
+  .wje-skeleton-square::after {
+    animation: none;
+    transform: none;
+    opacity: 0.35;
+  }
+}`;
 const template = document.createElement("template");
 template.innerHTML = ``;
+const wjSkeletonSheet = new CSSStyleSheet();
+try {
+  wjSkeletonSheet.replaceSync(skeletonCss);
+} catch (e) {
+}
 const _WJElement = class _WJElement extends HTMLElement {
   /**
    * Initializes a new instance of the WJElement class.
@@ -44,10 +237,18 @@ const _WJElement = class _WJElement extends HTMLElement {
         }
         this.setUpAccessors();
         __privateSet(this, _drawingStatus, this.drawingStatuses.START);
-        await this.display(force);
         const sheet = new CSSStyleSheet();
         sheet.replaceSync(this.constructor.cssStyleSheet);
-        this.context.adoptedStyleSheets = [sheet];
+        if (this.shadowRoot) {
+          const existing = this.shadowRoot.adoptedStyleSheets || [];
+          const next = [...existing];
+          if (!next.includes(wjSkeletonSheet) && wjSkeletonSheet.cssRules !== void 0) {
+            next.push(wjSkeletonSheet);
+          }
+          if (!next.includes(sheet)) next.push(sheet);
+          this.shadowRoot.adoptedStyleSheets = next;
+        }
+        await this.display(force);
         resolve();
       });
     });
@@ -223,8 +424,9 @@ const _WJElement = class _WJElement extends HTMLElement {
    * Defines component dependencies by registering custom elements.
    */
   defineDependencies() {
-    if (this.dependencies)
-      Object.entries(this.dependencies).forEach((name, component) => _WJElement.define(name, component));
+    if (this.dependencies) {
+      Object.entries(this.dependencies).forEach(([name, component]) => _WJElement.define(name, component));
+    }
   }
   /**
    * Hook for extending behavior before drawing the component.
@@ -263,6 +465,81 @@ const _WJElement = class _WJElement extends HTMLElement {
    */
   afterDraw(context, appStoreObj, params) {
   }
+  /**
+   * 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) {
+    return null;
+  }
+  /**
+   * 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() {
+    if (Number.isFinite(this._wjSkeletonSlotClone)) return this._wjSkeletonSlotClone;
+    const v = this.getAttribute("skeleton-delay");
+    const n = v == null ? NaN : Number(v);
+    if (Number.isFinite(n)) return n;
+    if (Number.isFinite(this.skeletonDelayMs)) return this.skeletonDelayMs;
+    return 150;
+  }
+  /**
+   * 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() {
+    if (Number.isFinite(this._wjSkeletonSlotClone)) return this._wjSkeletonSlotClone;
+    const v = this.getAttribute("skeleton-min-duration");
+    const n = v == null ? NaN : Number(v);
+    if (Number.isFinite(n)) return n;
+    return 300;
+  }
+  set skeletonMinDuration(value) {
+    if (value === null || value === void 0 || value === "") {
+      delete this._wjSkeletonSlotClone;
+      this.removeAttribute("skeleton-min-duration");
+      return;
+    }
+    const n = Number(value);
+    if (Number.isFinite(n)) {
+      this._wjSkeletonSlotClone = n;
+      this.setAttribute("skeleton-min-duration", String(n));
+    }
+  }
+  // Public API: property-based control
+  set skeleton(value) {
+    if (value) this.setAttribute("skeleton", "");
+    else this.removeAttribute("skeleton");
+  }
+  get skeleton() {
+    return this.hasAttribute("skeleton");
+  }
+  set skeletonDelay(value) {
+    if (value === null || value === void 0 || value === "") {
+      delete this._wjSkeletonSlotClone;
+      this.removeAttribute("skeleton-delay");
+      return;
+    }
+    const n = Number(value);
+    if (Number.isFinite(n)) {
+      this._wjSkeletonSlotClone = n;
+      this.setAttribute("skeleton-delay", String(n));
+    }
+  }
+  get skeletonDelayValue() {
+    return this.skeletonDelay;
+  }
   /**
    * Lifecycle method invoked when the component is connected to the DOM.
    */
@@ -386,22 +663,157 @@ const _WJElement = class _WJElement extends HTMLElement {
    */
   display(force = false) {
     this.template = this.constructor.customTemplate || document.createElement("template");
-    if (force) {
-      [...this.context.childNodes].forEach(this.context.removeChild.bind(this.context));
-    }
-    this.context.append(this.template.content.cloneNode(true));
+    const nextContext = document.createDocumentFragment();
+    nextContext.append(this.template.content.cloneNode(true));
     if (this.noShow || this.isPermissionCheck && !Permissions.isPermissionFulfilled(this.permission)) {
       this.remove();
       return Promise.resolve();
     }
-    return __privateMethod(this, _WJElement_instances, resolveRender_fn).call(this);
+    let skeletonTimer = null;
+    let renderFinished = false;
+    let skeletonShownAt = null;
+    const clearSkeletonTimer = () => {
+      if (skeletonTimer) {
+        clearTimeout(skeletonTimer);
+        skeletonTimer = null;
+      }
+    };
+    const buildSkeletonFragment = async () => {
+      var _a, _b;
+      const slotted = this.querySelector('[slot="skeleton"]');
+      if (slotted) {
+        this._wjSkeletonSlotClone = slotted.cloneNode(true);
+        const frag2 = document.createDocumentFragment();
+        frag2.append(this._wjSkeletonSlotClone.cloneNode(true));
+        return frag2;
+      }
+      if (this._wjSkeletonSlotClone) {
+        const frag2 = document.createDocumentFragment();
+        frag2.append(this._wjSkeletonSlotClone.cloneNode(true));
+        return frag2;
+      }
+      const frag = document.createDocumentFragment();
+      let skel = (_a = this.renderSkeleton) == null ? void 0 : _a.call(this, WjElementUtils.getAttributes(this));
+      if (skel instanceof Promise || ((_b = skel == null ? void 0 : skel.constructor) == null ? void 0 : _b.name) === "Promise") {
+        skel = await skel;
+      }
+      if (skel == null) return null;
+      let node;
+      if (skel instanceof HTMLElement || skel instanceof DocumentFragment) {
+        node = skel;
+      } else {
+        const t = document.createElement("template");
+        t.innerHTML = skel;
+        node = t.content.cloneNode(true);
+      }
+      frag.append(node);
+      return frag;
+    };
+    const showSkeleton = async () => {
+      if (renderFinished) return;
+      if (!this.hasAttribute("skeleton")) return;
+      const frag = await buildSkeletonFragment();
+      if (!frag) return;
+      try {
+        const cs = getComputedStyle(this);
+        if (cs.display === "inline") this.style.display = "block";
+        if (cs.width === "0px") this.style.width = "100%";
+      } catch (e) {
+      }
+      if (this.hasShadowRoot) {
+        if (this.shadowRoot) {
+          const existing = this.shadowRoot.adoptedStyleSheets || [];
+          if (!existing.includes(wjSkeletonSheet) && wjSkeletonSheet.cssRules !== void 0) {
+            this.shadowRoot.adoptedStyleSheets = [...existing, wjSkeletonSheet];
+          }
+        }
+        this.shadowRoot.replaceChildren(frag);
+      } else {
+        this.replaceChildren(frag);
+      }
+      skeletonShownAt = performance.now();
+      this.dispatchEvent(new CustomEvent("wj:skeleton:show", {
+        detail: { delay: this.skeletonDelay },
+        bubbles: true,
+        composed: true
+      }));
+      if (this.hasAttribute("debug-skeleton")) {
+        debugger;
+      }
+    };
+    if (this.hasAttribute("skeleton") && this.style.visibility === "hidden") {
+      this.style.visibility = __privateGet(this, _originalVisibility) ?? "visible";
+    }
+    let skeletonPlannedAt;
+    if (this.hasAttribute("skeleton")) {
+      skeletonPlannedAt = performance.now();
+      skeletonTimer = setTimeout(() => {
+        showSkeleton();
+      }, this.skeletonDelay);
+    }
+    return __privateMethod(this, _WJElement_instances, resolveRender_fn).call(this, nextContext, { skipAfterDraw: true }).then(async () => {
+      var _a;
+      renderFinished = true;
+      clearSkeletonTimer();
+      if (skeletonShownAt === null) {
+        const elapsed = skeletonPlannedAt ? performance.now() - skeletonPlannedAt : 0;
+        this.dispatchEvent(new CustomEvent("wj:skeleton:skip", {
+          detail: { reason: "render-finished-fast", elapsedMs: elapsed, delay: this.skeletonDelay },
+          bubbles: true,
+          composed: true
+        }));
+      } else {
+        const now = performance.now();
+        const visibleFor = now - skeletonShownAt;
+        const remaining = this.skeletonMinDuration - visibleFor;
+        if (remaining > 0) {
+          await new Promise((r) => setTimeout(r, remaining));
+        }
+      }
+      if (this.hasShadowRoot) {
+        this.shadowRoot.replaceChildren(nextContext);
+      } else {
+        this.replaceChildren(nextContext);
+      }
+      if (skeletonShownAt !== null) {
+        this.dispatchEvent(new CustomEvent("wj:skeleton:hide", {
+          detail: {
+            reason: "render-finished",
+            visibleMs: Math.max(this.skeletonMinDuration, performance.now() - skeletonShownAt),
+            delay: this.skeletonDelay,
+            minDuration: this.skeletonMinDuration
+          },
+          bubbles: true,
+          composed: true
+        }));
+      }
+      const liveContext = this.hasShadowRoot ? this.shadowRoot : this;
+      const _afterDraw = (_a = this.afterDraw) == null ? void 0 : _a.call(this, liveContext, this.store, WjElementUtils.getAttributes(this));
+      if (_afterDraw instanceof Promise || (_afterDraw == null ? void 0 : _afterDraw.constructor.name) === "Promise") {
+        await _afterDraw;
+      }
+    }).finally(() => {
+      renderFinished = true;
+      clearSkeletonTimer();
+      if (!__privateGet(this, _isRendering)) {
+        this.dispatchEvent(new CustomEvent("wj:skeleton:hide", {
+          detail: { reason: "finally" },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    });
   }
   /**
-   * 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
    */
-  async render() {
+  async render(targetContext = this.context) {
     __privateSet(this, _drawingStatus, this.drawingStatuses.DRAWING);
-    let _draw = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));
+    let _draw = this.draw(targetContext, this.store, WjElementUtils.getAttributes(this));
     if (_draw instanceof Promise || (_draw == null ? void 0 : _draw.constructor.name) === "Promise") {
       _draw = await _draw;
     }
@@ -415,7 +827,7 @@ const _WJElement = class _WJElement extends HTMLElement {
       element = inputTemplate.content.cloneNode(true);
     }
     let rendered = element;
-    this.context.appendChild(rendered);
+    targetContext.appendChild(rendered);
   }
   /**
    * Sanitizes a given name by converting it from kebab-case to camelCase.
@@ -524,22 +936,25 @@ refresh_fn = async function() {
   }
 };
 /**
- * Resolves the rendering process of the component.
+ * Resolves the rendering process of the component, using the given target context.
+ * @param {HTMLElement|ShadowRoot|DocumentFragment} targetContext Target for rendering (defaults to this.context)
  * @returns A promise that resolves when rendering is complete.
  * @private
  */
-resolveRender_fn = function() {
+resolveRender_fn = function(targetContext = this.context, { skipAfterDraw = false } = {}) {
   this.params = WjElementUtils.getAttributes(this);
   return new Promise(async (resolve, reject) => {
     var _a;
-    const __beforeDraw = this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this));
-    if (__beforeDraw instanceof Promise || (__beforeDraw == null ? void 0 : __beforeDraw.constructor.name) === "Promise") {
-      await __beforeDraw;
+    const _beforeDraw = this.beforeDraw(targetContext, this.store, WjElementUtils.getAttributes(this));
+    if (_beforeDraw instanceof Promise || (_beforeDraw == null ? void 0 : _beforeDraw.constructor.name) === "Promise") {
+      await _beforeDraw;
     }
-    await this.render();
-    const __afterDraw = (_a = this.afterDraw) == null ? void 0 : _a.call(this, this.context, this.store, WjElementUtils.getAttributes(this));
-    if (__afterDraw instanceof Promise || (__afterDraw == null ? void 0 : __afterDraw.constructor.name) === "Promise") {
-      await __afterDraw;
+    await this.render(targetContext);
+    if (!skipAfterDraw) {
+      const _afterDraw = (_a = this.afterDraw) == null ? void 0 : _a.call(this, targetContext, this.store, WjElementUtils.getAttributes(this));
+      if (_afterDraw instanceof Promise || (_afterDraw == null ? void 0 : _afterDraw.constructor.name) === "Promise") {
+        await _afterDraw;
+      }
     }
     __privateSet(this, _isRendering, false);
     __privateSet(this, _isAttached, true);