wj-elements 0.2.0-alpha.8 → 0.3.0

package/dist/wje-reorder-handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-reorder-handle.js","sources":["../packages/wje-reorder-handle/reorder-handle.element.js","../packages/wje-reorder-handle/reorder-handle.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ReorderHandle` is a custom web component that represents a reorder handle.\n * @summary This element represents a reorder handle.\n * @documentation https://elements.webjet.sk/components/reorder-handle\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder handle.\n * @slot - The default slot for the reorder handle.\n * @tag wje-reorder-handle\n */\nexport default class ReorderHandle extends WJElement {\n    /**\n     * Creates an instance of ReorderHandle.\n     */\n    constructor() {\n        super();\n        this.addEventListener('mousedown', this.startDrag.bind(this));\n        this.addEventListener('touchstart', this.startTouchDrag.bind(this));\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ReorderHandle';\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 {string[]}\n     */\n    static get observedAttributes() {\n        return ['dropzone', 'parent'];\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const container = document.createElement('div');\n        container.classList.add('container');\n        container.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n\n        container.appendChild(slot);\n\n        fragment.appendChild(container);\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component after it is connected to the DOM.\n     */\n    afterDraw() {\n        if (this.hasAttribute('disabled')) {\n            this.style.opacity = '.3';\n        }\n    }\n\n    /**\n     * Handles the attribute changes.\n     * @param {DragEvent} e\n     */\n    startDrag(e) {\n        if (this.hasAttribute('disabled') || this.hasAttribute('locked')) return;\n        this.startDragAction(e.clientX, e.clientY);\n        event.dispatchCustomEvent(this, 'wje-reorder-handle:start', {draggable: this.getDraggable()});\n    }\n\n    /**\n     * Handles the touch start event.\n     * @param {TouchEvent} e\n     */\n    startTouchDrag(e) {\n        if (this.hasAttribute('disabled') || this.hasAttribute('locked')) return;\n        const touch = e.touches[0];\n        this.startDragAction(touch.clientX, touch.clientY);\n    }\n\n    /**\n     * Initiates the drag-and-drop action for a sortable element.\n     * @param {number} clientX The x-coordinate of the mouse pointer at the start of the drag action.\n     * @param {number} clientY The y-coordinate of the mouse pointer at the start of the drag action.\n     */\n    startDragAction(clientX, clientY) {\n        let draggable = this.getDraggable();\n\n        const initialContainer = this.getDropzone(draggable);\n\n        if (!this.getAttribute('dropzone')) {\n            this.setAttribute('dropzone', initialContainer.localName);\n        }\n\n        const rect = draggable.getBoundingClientRect();\n        const offsetX = clientX - rect.left;\n        const offsetY = clientY - rect.top;\n\n        let placeholder = document.createElement('div');\n        placeholder.classList.add('sortable-item');\n        placeholder.style.visibility = 'hidden';\n        placeholder.style.height = `${rect.height}px`;\n\n        draggable.classList.add('dragging');\n\n        draggable.style.position = 'fixed';\n        draggable.style.zIndex = '1000';\n        draggable.style.width = `${rect.width}px`;\n\n        const moveAt = (pageX, pageY) => {\n            draggable.style.left = `${pageX - offsetX - document.documentElement.scrollLeft}px`;\n            draggable.style.top = `${pageY - offsetY - document.documentElement.scrollTop}px`;\n        };\n\n        moveAt(clientX, clientY);\n\n        const onMouseMove = (e) => {\n            moveAt(e.pageX, e.pageY);\n\n            const dropzone = this.getClosestDropzone(e.clientX, e.clientY);\n            if (!dropzone) return;\n\n            const siblings = Array.from(dropzone.children).filter(\n                (child) => child !== draggable && child !== placeholder\n            );\n\n            for (const sibling of siblings) {\n                const siblingRect = sibling.getBoundingClientRect();\n\n                if (sibling.children[0]?.hasAttribute('locked')) continue;\n\n                if (e.clientY > siblingRect.top && e.clientY < siblingRect.bottom) {\n                    if (e.clientY < siblingRect.top + siblingRect.height / 2) {\n                        dropzone.insertBefore(placeholder, sibling);\n                    } else {\n                        dropzone.insertBefore(placeholder, sibling.nextSibling);\n                    }\n                    break;\n                }\n            }\n        }\n\n        const onMouseUp = () => {\n            document.removeEventListener('mousemove', onMouseMove);\n            document.removeEventListener('mouseup', onMouseUp);\n\n            draggable.classList.remove('dragging');\n\n            draggable.style.position = '';\n            draggable.style.zIndex = '';\n            draggable.style.left = '';\n            draggable.style.top = '';\n            draggable.style.width = '';\n\n            const finalContainer = placeholder.parentElement;\n            finalContainer.insertBefore(draggable, placeholder);\n            finalContainer.removeChild(placeholder);\n\n            this.reIndexItems(finalContainer);\n\n            event.dispatchCustomEvent(this, 'wje-reorder-handle:change', {finalContainer: finalContainer, draggable: draggable});\n        };\n\n        document.addEventListener('mousemove', onMouseMove);\n        document.addEventListener('mouseup', onMouseUp);\n\n        initialContainer.insertBefore(placeholder, draggable);\n    }\n\n    /**\n     * Retrieves the closest draggable element based on attribute conditions.\n     * If the element has a \"parent\" attribute, the method attempts to find the closest ancestor\n     * matching the CSS selector specified in the attribute. If no such ancestor exists,\n     * the method defaults to returning the immediate parent element.\n     * @returns {Element|null} The closest matching ancestor or the immediate parent element if no match is found, or null if the element has no parent.\n     */\n    getDraggable() {\n        if (this.hasAttribute('parent')) {\n            let parent = this.closest(this.getAttribute('parent'));\n            if(parent) return parent;\n        }\n        return this.parentElement;\n    }\n\n    /**\n     * Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n     * @param {HTMLElement} element The HTML element for which the dropzone is being determined.\n     * @returns {HTMLElement|null} The nearest dropzone element if found; otherwise, the parent element or null.\n     */\n    getDropzone(element) {\n        const dropzoneAttr = this.getAttribute('dropzone');\n        if (this.hasAttribute('dropzone')) {\n            let dropzone = element.closest(this.getAttribute('dropzone'));\n            if (dropzone) return dropzone;\n        }\n        return element.parentElement;\n    }\n\n    /**\n     * Retrieves the closest dropzone element at the specified coordinates.\n     * @param {number} clientX The x-coordinate relative to the viewport.\n     * @param {number} clientY The y-coordinate relative to the viewport.\n     * @returns {HTMLElement|null} - The closest dropzone element matching the `dropzone` attribute, or `null` if none is found.\n     */\n    getClosestDropzone(clientX, clientY) {\n        const elements = this.getElementsFromPointAll(clientX, clientY);\n        for (const element of elements) {\n            if (element.matches(this.getAttribute('dropzone'))) {\n                return element;\n            }\n        }\n        return null;\n    }\n\n    /**\n     * Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n     * @param {number} x The x-coordinate relative to the viewport.\n     * @param {number} y The y-coordinate relative to the viewport.\n     * @param {Document|ShadowRoot} [root] The root context in which to search. Defaults to the main document.\n     * @param {Set<Node>} [visited] A set of already visited nodes to avoid infinite recursion in nested shadow DOMs.\n     * @returns {HTMLElement[]} An array of all elements found at the specified coordinates, including shadow DOM elements.\n     */\n    getElementsFromPointAll(x, y, root = document, visited = new Set()) {\n        if (visited.has(root)) return [];\n        visited.add(root);\n\n        const elements = root.elementsFromPoint(x, y);\n        let allElements = [...elements];\n\n        for (const element of elements) {\n            if (element.shadowRoot && !visited.has(element.shadowRoot)) {\n                allElements = allElements.concat(this.getElementsFromPointAll(x, y, element.shadowRoot, visited));\n            }\n        }\n\n        return allElements;\n    }\n\n    /**\n     * Re-indexes child elements of the given container by setting their dataset index.\n     * @param {HTMLElement} container The container element whose children are to be re-indexed.\n     * @returns {void}\n     */\n    reIndexItems(container) {\n        const items = Array.from(container.children);\n        let index = 0;\n\n        items.forEach((child) => {\n            if (child.children[0]?.hasAttribute('locked')) {\n                child.dataset.index = index;\n            } else {\n                child.dataset.index = index;\n            }\n            index++;\n        });\n    }\n}\n","import ReorderHandle from './reorder-handle.element.js';\n\nexport default ReorderHandle;\n\nReorderHandle.define('wje-reorder-handle', ReorderHandle);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-reorder-handle.js","sources":["../packages/wje-reorder-handle/reorder-handle.element.js","../packages/wje-reorder-handle/reorder-handle.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ReorderHandle` is a custom web component that represents a reorder handle.\n * @summary This element represents a reorder handle.\n * @documentation https://elements.webjet.sk/components/reorder-handle\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder handle.\n * @slot - The default slot for the reorder handle.\n * @tag wje-reorder-handle\n */\nexport default class ReorderHandle extends WJElement {\n    /**\n     * Creates an instance of ReorderHandle.\n     */\n    constructor() {\n        super();\n        this.addEventListener('mousedown', this.startDrag.bind(this));\n        this.addEventListener('touchstart', this.startTouchDrag.bind(this));\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ReorderHandle';\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 {string[]}\n     */\n    static get observedAttributes() {\n        return ['dropzone', 'parent'];\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const container = document.createElement('div');\n        container.classList.add('container');\n        container.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n\n        container.appendChild(slot);\n\n        fragment.appendChild(container);\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component after it is connected to the DOM.\n     */\n    afterDraw() {\n        this.syncAria();\n        if (this.hasAttribute('disabled')) {\n            this.style.opacity = '.3';\n        }\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'button' });\n        }\n\n        if (!this.hasAttribute('tabindex')) {\n            this.setAttribute('tabindex', '0');\n        }\n\n        if (this.hasAttribute('disabled')) {\n            this.setAriaState({ disabled: true });\n        }\n\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label') || 'Reorder item';\n        if (!ariaLabel && label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Handles the attribute changes.\n     * @param {DragEvent} e\n     */\n    startDrag(e) {\n        if (this.hasAttribute('disabled') || this.hasAttribute('locked')) return;\n        this.startDragAction(e.clientX, e.clientY);\n        event.dispatchCustomEvent(this, 'wje-reorder-handle:start', {draggable: this.getDraggable()});\n    }\n\n    /**\n     * Handles the touch start event.\n     * @param {TouchEvent} e\n     */\n    startTouchDrag(e) {\n        if (this.hasAttribute('disabled') || this.hasAttribute('locked')) return;\n        const touch = e.touches[0];\n        this.startDragAction(touch.clientX, touch.clientY);\n    }\n\n    /**\n     * Initiates the drag-and-drop action for a sortable element.\n     * @param {number} clientX The x-coordinate of the mouse pointer at the start of the drag action.\n     * @param {number} clientY The y-coordinate of the mouse pointer at the start of the drag action.\n     */\n    startDragAction(clientX, clientY) {\n        let draggable = this.getDraggable();\n\n        const initialContainer = this.getDropzone(draggable);\n\n        if (!this.getAttribute('dropzone')) {\n            this.setAttribute('dropzone', initialContainer.localName);\n        }\n\n        const rect = draggable.getBoundingClientRect();\n        const offsetX = clientX - rect.left;\n        const offsetY = clientY - rect.top;\n\n        let placeholder = document.createElement('div');\n        placeholder.classList.add('sortable-item');\n        placeholder.style.visibility = 'hidden';\n        placeholder.style.height = `${rect.height}px`;\n\n        draggable.classList.add('dragging');\n\n        draggable.style.position = 'fixed';\n        draggable.style.zIndex = '1000';\n        draggable.style.width = `${rect.width}px`;\n\n        const moveAt = (pageX, pageY) => {\n            draggable.style.left = `${pageX - offsetX - document.documentElement.scrollLeft}px`;\n            draggable.style.top = `${pageY - offsetY - document.documentElement.scrollTop}px`;\n        };\n\n        moveAt(clientX, clientY);\n\n        const onMouseMove = (e) => {\n            moveAt(e.pageX, e.pageY);\n\n            const dropzone = this.getClosestDropzone(e.clientX, e.clientY);\n            if (!dropzone) return;\n\n            const siblings = Array.from(dropzone.children).filter(\n                (child) => child !== draggable && child !== placeholder\n            );\n\n            for (const sibling of siblings) {\n                const siblingRect = sibling.getBoundingClientRect();\n\n                if (sibling.children[0]?.hasAttribute('locked')) continue;\n\n                if (e.clientY > siblingRect.top && e.clientY < siblingRect.bottom) {\n                    if (e.clientY < siblingRect.top + siblingRect.height / 2) {\n                        dropzone.insertBefore(placeholder, sibling);\n                    } else {\n                        dropzone.insertBefore(placeholder, sibling.nextSibling);\n                    }\n                    break;\n                }\n            }\n        }\n\n        const onMouseUp = () => {\n            document.removeEventListener('mousemove', onMouseMove);\n            document.removeEventListener('mouseup', onMouseUp);\n\n            draggable.classList.remove('dragging');\n\n            draggable.style.position = '';\n            draggable.style.zIndex = '';\n            draggable.style.left = '';\n            draggable.style.top = '';\n            draggable.style.width = '';\n\n            const finalContainer = placeholder.parentElement;\n            finalContainer.insertBefore(draggable, placeholder);\n            finalContainer.removeChild(placeholder);\n\n            this.reIndexItems(finalContainer);\n\n            event.dispatchCustomEvent(this, 'wje-reorder-handle:change', {finalContainer: finalContainer, draggable: draggable});\n        };\n\n        document.addEventListener('mousemove', onMouseMove);\n        document.addEventListener('mouseup', onMouseUp);\n\n        initialContainer.insertBefore(placeholder, draggable);\n    }\n\n    /**\n     * Retrieves the closest draggable element based on attribute conditions.\n     * If the element has a \"parent\" attribute, the method attempts to find the closest ancestor\n     * matching the CSS selector specified in the attribute. If no such ancestor exists,\n     * the method defaults to returning the immediate parent element.\n     * @returns {Element|null} The closest matching ancestor or the immediate parent element if no match is found, or null if the element has no parent.\n     */\n    getDraggable() {\n        if (this.hasAttribute('parent')) {\n            let parent = this.closest(this.getAttribute('parent'));\n            if(parent) return parent;\n        }\n        return this.parentElement;\n    }\n\n    /**\n     * Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n     * @param {HTMLElement} element The HTML element for which the dropzone is being determined.\n     * @returns {HTMLElement|null} The nearest dropzone element if found; otherwise, the parent element or null.\n     */\n    getDropzone(element) {\n        const dropzoneAttr = this.getAttribute('dropzone');\n        if (this.hasAttribute('dropzone')) {\n            let dropzone = element.closest(this.getAttribute('dropzone'));\n            if (dropzone) return dropzone;\n        }\n        return element.parentElement;\n    }\n\n    /**\n     * Retrieves the closest dropzone element at the specified coordinates.\n     * @param {number} clientX The x-coordinate relative to the viewport.\n     * @param {number} clientY The y-coordinate relative to the viewport.\n     * @returns {HTMLElement|null} - The closest dropzone element matching the `dropzone` attribute, or `null` if none is found.\n     */\n    getClosestDropzone(clientX, clientY) {\n        const elements = this.getElementsFromPointAll(clientX, clientY);\n        for (const element of elements) {\n            if (element.matches(this.getAttribute('dropzone'))) {\n                return element;\n            }\n        }\n        return null;\n    }\n\n    /**\n     * Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n     * @param {number} x The x-coordinate relative to the viewport.\n     * @param {number} y The y-coordinate relative to the viewport.\n     * @param {Document|ShadowRoot} [root] The root context in which to search. Defaults to the main document.\n     * @param {Set<Node>} [visited] A set of already visited nodes to avoid infinite recursion in nested shadow DOMs.\n     * @returns {HTMLElement[]} An array of all elements found at the specified coordinates, including shadow DOM elements.\n     */\n    getElementsFromPointAll(x, y, root = document, visited = new Set()) {\n        if (visited.has(root)) return [];\n        visited.add(root);\n\n        const elements = root.elementsFromPoint(x, y);\n        let allElements = [...elements];\n\n        for (const element of elements) {\n            if (element.shadowRoot && !visited.has(element.shadowRoot)) {\n                allElements = allElements.concat(this.getElementsFromPointAll(x, y, element.shadowRoot, visited));\n            }\n        }\n\n        return allElements;\n    }\n\n    /**\n     * Re-indexes child elements of the given container by setting their dataset index.\n     * @param {HTMLElement} container The container element whose children are to be re-indexed.\n     * @returns {void}\n     */\n    reIndexItems(container) {\n        const items = Array.from(container.children);\n        let index = 0;\n\n        items.forEach((child) => {\n            if (child.children[0]?.hasAttribute('locked')) {\n                child.dataset.index = index;\n            } else {\n                child.dataset.index = index;\n            }\n            index++;\n        });\n    }\n}\n","import ReorderHandle from './reorder-handle.element.js';\n\nexport default ReorderHandle;\n\nReorderHandle.define('wje-reorder-handle', ReorderHandle);\n"],"names":[],"mappings":"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"}

package/dist/wje-reorder.js

@@ -44,6 +44,7 @@ class Reorder extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component after it is connected to the DOM.
@@ -65,6 +66,7 @@ class Reorder extends WJElement {
    * Adds event listeners after the component is drawn.
    */
   afterDraw() {
+    this.syncAria();
     const items = this.querySelectorAll("wje-reorder-item");
     const dropZones = this.querySelectorAll("wje-reorder-dropzone");
     this.container.classList.add(this.hasAttribute("reverse") ? "reversed" : "basic");
@@ -84,6 +86,14 @@ class Reorder extends WJElement {
       });
     }
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    if (!this.hasAttribute("role")) {
+      this.setAriaState({ role: "list" });
+    }
+  }
   /**
    * Attaches event listeners to the element.
    * @param element

package/dist/wje-reorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-reorder.js","sources":["../packages/wje-reorder/reorder.element.js","../packages/wje-reorder/reorder.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Reorder` is a custom web component that represents a reorder.\n * It extends from `WJElement`.\n * @summary This element represents a reorder.\n * @documentation https://elements.webjet.sk/components/reorder\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder.\n * @slot - The default slot for the reorder.\n * // @fires wje-reorder:change - Event fired when the reorder is changed.\n * @tag wje-reorder\n */\n\nexport default class Reorder extends WJElement {\n    /**\n     * Creates an instance of Select.\n     * @class\n     */\n    constructor() {\n        super();\n        this.dragEl = null;\n        this.items = [];\n        this.originalIndex = null;\n        this.isDragging = false;\n        this.offsetX = 0;\n        this.offsetY = 0;\n        this.cloneEl = null;\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Select';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\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 [];\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 after it is connected to the DOM.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const container = document.createElement('div');\n        container.classList.add('container');\n        container.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n        slot.classList.add('reorder-items');\n\n        container.appendChild(slot);\n\n        fragment.appendChild(container);\n\n        this.container = container;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        const items = this.querySelectorAll('wje-reorder-item');\n        const dropZones = this.querySelectorAll('wje-reorder-dropzone');\n        this.container.classList.add(this.hasAttribute('reverse') ? 'reversed' : 'basic');\n\n        if (dropZones) {\n            dropZones.forEach((dropZone) => {\n                this.container.classList.remove('container');\n                this.container.classList.add('container-w-dropzones');\n            });\n        }\n\n        if (items) {\n            items.forEach((item) => {\n                const handles = item.querySelectorAll('[slot=handle]');\n                const draggableElement = handles.length > 0 ? handles : [item];\n\n                draggableElement.forEach((element) => {\n                    this.attachEventListeners(element);\n                });\n            });\n        }\n    }\n\n    /**\n     * Attaches event listeners to the element.\n     * @param element\n     */\n    attachEventListeners(element) {\n        element.addEventListener('mousedown', this.mouseDown.bind(this), false);\n        element.addEventListener('touchstart', this.touchStart.bind(this), false);\n        element.addEventListener('dragstart', this.dragStart.bind(this), false);\n    }\n\n    /**\n     * Handles the mouse down event.\n     * @param {object} e\n     */\n    mouseDown(e) {\n        this.startDragging(e.clientX, e.clientY, e.currentTarget);\n        document.addEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.addEventListener('mouseup', this.mouseUp.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Handles the touch start event.\n     * @param e\n     */\n    touchStart(e) {\n        const touch = e.touches[0];\n        this.startDragging(touch.clientX, touch.clientY, e.currentTarget);\n        document.addEventListener('touchmove', this.touchMove.bind(this), false);\n        document.addEventListener('touchend', this.touchEnd.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Initializes the dragging process for a reorderable item.\n     * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.\n     * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.\n     * @param {HTMLElement} target The target element where the drag event originated.\n     */\n    startDragging(clientX, clientY, target) {\n        if (this.hasAttribute('disabled')) {\n            return;\n        }\n\n        this.isDragging = true;\n        this.dragEl = target.closest('wje-reorder-item');\n\n        this.createClone();\n\n        this.dragEl.style.opacity = '0.3';\n\n        const rect = this.dragEl.getBoundingClientRect();\n        this.offsetX = clientX - rect.left;\n        this.offsetY = clientY - rect.top;\n\n        this.dragEl.classList.add('dragging');\n\n        this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);\n        this.originalParent = this.dragEl.parentNode;\n    }\n\n    /**\n     * Handles the mouse move event.\n     * @param e\n     */\n    mouseMove(e) {\n        if (!this.isDragging) return;\n        this.moveElement(e.pageX, e.pageY);\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${e.pageX - this.offsetX}px`;\n            this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;\n        }\n    }\n\n    /**\n     * Handles the `touchmove` event and updates the position of the dragged element.\n     * @param {TouchEvent} e The touch event containing touch position data.\n     */\n    touchMove(e) {\n        if (!this.isDragging) return;\n        const touch = e.touches[0];\n        this.moveElement(touch.pageX, touch.pageY);\n    }\n\n    /**\n     * Updates the position of the dragged element and handles reordering logic based on the mouse position.\n     * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.\n     * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.\n     */\n    moveElement(pageX, pageY) {\n        const scrollX = window.scrollX || document.documentElement.scrollLeft;\n        const scrollY = window.scrollY || document.documentElement.scrollTop;\n        const adjustedPageX = pageX - scrollX;\n        const adjustedPageY = pageY - scrollY;\n\n        this.dragEl.style.left = `${adjustedPageX}px`;\n        this.dragEl.style.top = `${adjustedPageY}px`;\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${adjustedPageX}px`;\n            this.cloneEl.style.top = `${adjustedPageY}px`;\n        }\n\n        const items = this.querySelectorAll('wje-reorder-item');\n        items.forEach((item) => {\n            if (item === this.dragEl) return;\n\n            const boundingBox = item.getBoundingClientRect();\n            const mouseY = adjustedPageY - boundingBox.top;\n            const mouseYPercent = (mouseY / boundingBox.height) * 100;\n\n            if (mouseYPercent > 30 && this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item.nextSibling);\n            } else if (mouseYPercent < 30 && !this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item);\n            }\n        });\n    }\n\n    /**\n     * Handles the mouse up event.\n     */\n    mouseUp() {\n        this.stopDragging();\n        document.removeEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.removeEventListener('mouseup', this.mouseUp.bind(this), false);\n\n        if (this.cloneEl) {\n            this.cloneEl.remove();\n            this.cloneEl = null;\n        }\n\n        if (this.dragEl) {\n            this.dragEl.style.opacity = '1';\n        }\n    }\n\n    /**\n     * Handles the touch end event.\n     */\n    touchEnd() {\n        this.stopDragging();\n        document.removeEventListener('touchmove', this.touchMove.bind(this), false);\n        document.removeEventListener('touchend', this.touchEnd.bind(this), false);\n    }\n\n    /**\n     * Stops dragging the element.\n     */\n    stopDragging() {\n        if (!this.isDragging) return;\n\n        this.isDragging = false;\n        this.dragEl.classList.remove('dragging');\n        this.dragEl.style.left = '';\n        this.dragEl.style.top = '';\n\n        const parent = this.dragEl.parentNode;\n        const newIndex = Array.from(parent.children).indexOf(this.dragEl);\n\n        const newOrderElements = Array.from(parent.children).map((el) => {\n            const clonedNode = el.cloneNode(true);\n            const handle = clonedNode.querySelector('.handle');\n            if (handle) {\n                handle.remove();\n            }\n            return clonedNode;\n        });\n\n        const newOrder = newOrderElements.map(el => el.innerText.trim());\n\n        this.dispatchChange(this.originalIndex, newIndex, newOrder, newOrderElements);\n\n        document.body.style.userSelect = '';\n    }\n\n    /**\n     * Prevents the default behavior of the `dragstart` event.\n     * @param {DragEvent} e The drag event triggered when a drag operation starts.\n     */\n    dragStart(e) {\n        e.preventDefault();\n    }\n\n    /**\n     * Creates a clone of the element.\n     */\n    createClone() {\n        this.cloneEl = this.dragEl.cloneNode(true);\n        this.cloneEl.style.position = 'absolute';\n        this.cloneEl.style.pointerEvents = 'none';\n        this.cloneEl.style.visibility = 'visible';\n\n        document.body.appendChild(this.cloneEl);\n    }\n\n    /**\n     * Checks if the dragged element is moving down.\n     * @param droppedElement\n     * @returns {boolean}\n     */\n    isMovingDown(droppedElement) {\n        const parent = droppedElement.parentNode;\n        const dragIndex = Array.from(parent.children).indexOf(this.dragEl);\n        const dropIndex = Array.from(parent.children).indexOf(droppedElement);\n\n        return dragIndex < dropIndex;\n    }\n\n    /**\n     * Dispatches a custom event to signal that a reordering operation has occurred.\n     * @param {number} from The original index of the dragged item.\n     * @param {number} to The new index of the dragged item after reordering.\n     * @param {Array<number>} order The updated order of items after the reordering.\n     * // @fires wje-reorder:change - Dispatched when the reordering is completed.\n     * The event includes details about the initial position, the new position, and the new order.\n     */\n    dispatchChange(from, to, order, orderElements) {\n        this.dispatchEvent(\n            new CustomEvent('wje-reorder:change', {\n                detail: { from, to, order, orderElements },\n            })\n        );\n    }\n}\n","import Reorder from './reorder.element.js';\n\nexport default Reorder;\n\nReorder.define('wje-reorder', Reorder);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-reorder.js","sources":["../packages/wje-reorder/reorder.element.js","../packages/wje-reorder/reorder.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Reorder` is a custom web component that represents a reorder.\n * It extends from `WJElement`.\n * @summary This element represents a reorder.\n * @documentation https://elements.webjet.sk/components/reorder\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder.\n * @slot - The default slot for the reorder.\n * // @fires wje-reorder:change - Event fired when the reorder is changed.\n * @tag wje-reorder\n */\n\nexport default class Reorder extends WJElement {\n    /**\n     * Creates an instance of Select.\n     * @class\n     */\n    constructor() {\n        super();\n        this.dragEl = null;\n        this.items = [];\n        this.originalIndex = null;\n        this.isDragging = false;\n        this.offsetX = 0;\n        this.offsetY = 0;\n        this.cloneEl = null;\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Select';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\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 [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component after it is connected to the DOM.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const container = document.createElement('div');\n        container.classList.add('container');\n        container.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n        slot.classList.add('reorder-items');\n\n        container.appendChild(slot);\n\n        fragment.appendChild(container);\n\n        this.container = container;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        const items = this.querySelectorAll('wje-reorder-item');\n        const dropZones = this.querySelectorAll('wje-reorder-dropzone');\n        this.container.classList.add(this.hasAttribute('reverse') ? 'reversed' : 'basic');\n\n        if (dropZones) {\n            dropZones.forEach((dropZone) => {\n                this.container.classList.remove('container');\n                this.container.classList.add('container-w-dropzones');\n            });\n        }\n\n        if (items) {\n            items.forEach((item) => {\n                const handles = item.querySelectorAll('[slot=handle]');\n                const draggableElement = handles.length > 0 ? handles : [item];\n\n                draggableElement.forEach((element) => {\n                    this.attachEventListeners(element);\n                });\n            });\n        }\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'list' });\n        }\n    }\n\n    /**\n     * Attaches event listeners to the element.\n     * @param element\n     */\n    attachEventListeners(element) {\n        element.addEventListener('mousedown', this.mouseDown.bind(this), false);\n        element.addEventListener('touchstart', this.touchStart.bind(this), false);\n        element.addEventListener('dragstart', this.dragStart.bind(this), false);\n    }\n\n    /**\n     * Handles the mouse down event.\n     * @param {object} e\n     */\n    mouseDown(e) {\n        this.startDragging(e.clientX, e.clientY, e.currentTarget);\n        document.addEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.addEventListener('mouseup', this.mouseUp.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Handles the touch start event.\n     * @param e\n     */\n    touchStart(e) {\n        const touch = e.touches[0];\n        this.startDragging(touch.clientX, touch.clientY, e.currentTarget);\n        document.addEventListener('touchmove', this.touchMove.bind(this), false);\n        document.addEventListener('touchend', this.touchEnd.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Initializes the dragging process for a reorderable item.\n     * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.\n     * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.\n     * @param {HTMLElement} target The target element where the drag event originated.\n     */\n    startDragging(clientX, clientY, target) {\n        if (this.hasAttribute('disabled')) {\n            return;\n        }\n\n        this.isDragging = true;\n        this.dragEl = target.closest('wje-reorder-item');\n\n        this.createClone();\n\n        this.dragEl.style.opacity = '0.3';\n\n        const rect = this.dragEl.getBoundingClientRect();\n        this.offsetX = clientX - rect.left;\n        this.offsetY = clientY - rect.top;\n\n        this.dragEl.classList.add('dragging');\n\n        this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);\n        this.originalParent = this.dragEl.parentNode;\n    }\n\n    /**\n     * Handles the mouse move event.\n     * @param e\n     */\n    mouseMove(e) {\n        if (!this.isDragging) return;\n        this.moveElement(e.pageX, e.pageY);\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${e.pageX - this.offsetX}px`;\n            this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;\n        }\n    }\n\n    /**\n     * Handles the `touchmove` event and updates the position of the dragged element.\n     * @param {TouchEvent} e The touch event containing touch position data.\n     */\n    touchMove(e) {\n        if (!this.isDragging) return;\n        const touch = e.touches[0];\n        this.moveElement(touch.pageX, touch.pageY);\n    }\n\n    /**\n     * Updates the position of the dragged element and handles reordering logic based on the mouse position.\n     * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.\n     * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.\n     */\n    moveElement(pageX, pageY) {\n        const scrollX = window.scrollX || document.documentElement.scrollLeft;\n        const scrollY = window.scrollY || document.documentElement.scrollTop;\n        const adjustedPageX = pageX - scrollX;\n        const adjustedPageY = pageY - scrollY;\n\n        this.dragEl.style.left = `${adjustedPageX}px`;\n        this.dragEl.style.top = `${adjustedPageY}px`;\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${adjustedPageX}px`;\n            this.cloneEl.style.top = `${adjustedPageY}px`;\n        }\n\n        const items = this.querySelectorAll('wje-reorder-item');\n        items.forEach((item) => {\n            if (item === this.dragEl) return;\n\n            const boundingBox = item.getBoundingClientRect();\n            const mouseY = adjustedPageY - boundingBox.top;\n            const mouseYPercent = (mouseY / boundingBox.height) * 100;\n\n            if (mouseYPercent > 30 && this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item.nextSibling);\n            } else if (mouseYPercent < 30 && !this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item);\n            }\n        });\n    }\n\n    /**\n     * Handles the mouse up event.\n     */\n    mouseUp() {\n        this.stopDragging();\n        document.removeEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.removeEventListener('mouseup', this.mouseUp.bind(this), false);\n\n        if (this.cloneEl) {\n            this.cloneEl.remove();\n            this.cloneEl = null;\n        }\n\n        if (this.dragEl) {\n            this.dragEl.style.opacity = '1';\n        }\n    }\n\n    /**\n     * Handles the touch end event.\n     */\n    touchEnd() {\n        this.stopDragging();\n        document.removeEventListener('touchmove', this.touchMove.bind(this), false);\n        document.removeEventListener('touchend', this.touchEnd.bind(this), false);\n    }\n\n    /**\n     * Stops dragging the element.\n     */\n    stopDragging() {\n        if (!this.isDragging) return;\n\n        this.isDragging = false;\n        this.dragEl.classList.remove('dragging');\n        this.dragEl.style.left = '';\n        this.dragEl.style.top = '';\n\n        const parent = this.dragEl.parentNode;\n        const newIndex = Array.from(parent.children).indexOf(this.dragEl);\n\n        const newOrderElements = Array.from(parent.children).map((el) => {\n            const clonedNode = el.cloneNode(true);\n            const handle = clonedNode.querySelector('.handle');\n            if (handle) {\n                handle.remove();\n            }\n            return clonedNode;\n        });\n\n        const newOrder = newOrderElements.map(el => el.innerText.trim());\n\n        this.dispatchChange(this.originalIndex, newIndex, newOrder, newOrderElements);\n\n        document.body.style.userSelect = '';\n    }\n\n    /**\n     * Prevents the default behavior of the `dragstart` event.\n     * @param {DragEvent} e The drag event triggered when a drag operation starts.\n     */\n    dragStart(e) {\n        e.preventDefault();\n    }\n\n    /**\n     * Creates a clone of the element.\n     */\n    createClone() {\n        this.cloneEl = this.dragEl.cloneNode(true);\n        this.cloneEl.style.position = 'absolute';\n        this.cloneEl.style.pointerEvents = 'none';\n        this.cloneEl.style.visibility = 'visible';\n\n        document.body.appendChild(this.cloneEl);\n    }\n\n    /**\n     * Checks if the dragged element is moving down.\n     * @param droppedElement\n     * @returns {boolean}\n     */\n    isMovingDown(droppedElement) {\n        const parent = droppedElement.parentNode;\n        const dragIndex = Array.from(parent.children).indexOf(this.dragEl);\n        const dropIndex = Array.from(parent.children).indexOf(droppedElement);\n\n        return dragIndex < dropIndex;\n    }\n\n    /**\n     * Dispatches a custom event to signal that a reordering operation has occurred.\n     * @param {number} from The original index of the dragged item.\n     * @param {number} to The new index of the dragged item after reordering.\n     * @param {Array<number>} order The updated order of items after the reordering.\n     * // @fires wje-reorder:change - Dispatched when the reordering is completed.\n     * The event includes details about the initial position, the new position, and the new order.\n     */\n    dispatchChange(from, to, order, orderElements) {\n        this.dispatchEvent(\n            new CustomEvent('wje-reorder:change', {\n                detail: { from, to, order, orderElements },\n            })\n        );\n    }\n}\n","import Reorder from './reorder.element.js';\n\nexport default Reorder;\n\nReorder.define('wje-reorder', Reorder);\n"],"names":[],"mappings":"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"}

package/dist/{packages/wje-select → wje-select}/select.element.d.ts

@@ -9,6 +9,7 @@ import { default as Option } from '../wje-option/option.js';
 import { default as Options } from '../wje-options/options.js';
 import { default as Checkbox } from '../wje-checkbox/checkbox.js';
 export class Select extends FormAssociatedElement {
+    static _instanceId: number;
     /**
      * Returns the CSS styles for the component.
      * @static
@@ -81,6 +82,7 @@ export class Select extends FormAssociatedElement {
     list: HTMLElement | null;
     _value: any[];
     _selectedOptions: any[];
+    _instanceId: number;
     /**
      * An object representing component dependencies with their respective classes.
      * Each property in the object maps a custom component name (as a string key)
@@ -231,6 +233,7 @@ export class Select extends FormAssociatedElement {
      * @returns {DocumentFragment}
      */
     draw(): DocumentFragment;
+    _ariaListId: string;
     findEl: HTMLElement;
     displayInput: HTMLInputElement;
     slotFooter: HTMLSlotElement;
@@ -384,5 +387,9 @@ export class Select extends FormAssociatedElement {
      * @returns {void} No value is returned by this method.
      */
     clearSelections(): void;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     #private;
 }

package/dist/wje-select.js

@@ -10,20 +10,20 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _addedOptions, _htmlOptions, _Select_instances, htmlSelectedItem_fn, getSelectedOptions_fn, _applySearchFilter, _onMenuItemClickCapture, syncOptionCheckbox_fn;
-import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
+import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
 import Button from "./wje-button.js";
 import "./wje-popup.js";
-import { I as Icon } from "./icon-DY5AZ6xM.js";
+import { I as Icon } from "./icon-DVyMc4Wv.js";
 import Label from "./wje-label.js";
 import Chip from "./wje-chip.js";
 import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
-import { P as Popup } from "./popup.element-DeajFyOQ.js";
+import { P as Popup } from "./popup.element-Cl6QeG8M.js";
 const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-color: var(--wje-select-options-background-color);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}";
-class Select extends FormAssociatedElement {
+const _Select = class _Select extends FormAssociatedElement {
   constructor() {
     super();
     __privateAdd(this, _Select_instances);
@@ -109,6 +109,7 @@ class Select extends FormAssociatedElement {
       const isSelected = option.hasAttribute("selected");
       option.selected = !isSelected;
       this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this);
+      this.syncAria();
     });
     /**
      * Handles the removal of a chip element from the DOM and updates the related state.
@@ -173,6 +174,7 @@ class Select extends FormAssociatedElement {
     this.list = null;
     this._value = [];
     this._selectedOptions = [];
+    this._instanceId = ++_Select._instanceId;
   }
   /**
    * Sets the value for the form field. Converts the input value into a FormData object
@@ -453,6 +455,7 @@ class Select extends FormAssociatedElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   beforeDraw() {
     if (this.hasAttribute("value")) {
@@ -522,6 +525,10 @@ class Select extends FormAssociatedElement {
     optionsWrapper.style.setProperty("height", this.maxHeight);
     let list = document.createElement("div");
     list.classList.add("list");
+    this._ariaListId = this.id ? `${this.id}-listbox` : `wje-select-${this._instanceId}-listbox`;
+    list.id = this._ariaListId;
+    list.setAttribute("role", "listbox");
+    if (this.hasAttribute("multiple")) list.setAttribute("aria-multiselectable", "true");
     let slot = document.createElement("slot");
     let clear = document.createElement("wje-button");
     clear.setAttribute("fill", "link");
@@ -596,6 +603,7 @@ class Select extends FormAssociatedElement {
     this.clear = clear;
     this.list = list;
     this.slotFooter = slotFooter;
+    this.syncAria();
     return fragment;
   }
   /**
@@ -611,6 +619,7 @@ class Select extends FormAssociatedElement {
     if (this.hasAttribute("invalid")) {
       this.showInvalidMessage();
     }
+    this.syncAria();
     (_a = this.getAllOptions()) == null ? void 0 : _a.forEach((option) => {
       this.optionCheckSlot(option);
     });
@@ -662,6 +671,8 @@ class Select extends FormAssociatedElement {
       this.propagateValidation();
     });
     this.addEventListener("wje-option:change", this.optionChange);
+    event.addListener(this.popup, "wje-popup:show", null, () => this.syncAria());
+    event.addListener(this.popup, "wje-popup:hide", null, () => this.syncAria());
     this.addEventListener("invalid", (e) => {
       this.invalid = true;
       this.pristine = false;
@@ -752,6 +763,7 @@ class Select extends FormAssociatedElement {
         }
       }
     }
+    this.syncAria();
   }
   /**
    * Handles the logic for updating selections based on the current selected options,
@@ -966,7 +978,23 @@ class Select extends FormAssociatedElement {
   disconnectedCallback() {
     document.removeEventListener("mousedown", __privateGet(this, _onMenuItemClickCapture), true);
   }
-}
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    var _a;
+    const expanded = ((_a = this.popup) == null ? void 0 : _a.hasAttribute("active")) || this.classList.contains("active");
+    this.setAriaState({
+      role: "combobox",
+      haspopup: "listbox",
+      expanded,
+      controls: this._ariaListId,
+      disabled: this.disabled,
+      required: this.required,
+      invalid: this.invalid || this.hasAttribute("invalid")
+    });
+  }
+};
 _addedOptions = new WeakMap();
 _htmlOptions = new WeakMap();
 _Select_instances = new WeakSet();
@@ -1002,6 +1030,8 @@ syncOptionCheckbox_fn = function(option) {
     checkbox.removeAttribute("checked");
   }
 };
+__publicField(_Select, "_instanceId", 0);
+let Select = _Select;
 Select.define("wje-select", Select);
 export {
   Select as default