wj-elements 0.2.0-alpha.8 → 0.3.0

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

@@ -46,6 +46,7 @@ export default class Radio extends WJElement {
      * @returns {boolean} true if the toggle is disabled, false otherwise
      */
     get disabled(): boolean;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Draws the radio button.
      * @returns {DocumentFragment}
@@ -56,6 +57,10 @@ export default class Radio extends WJElement {
      * Sets up the event listeners for the component.
      */
     afterDraw(): void;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     /**
      * Called when an attribute changes.
      * @param {object} e

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

@@ -16,7 +16,7 @@ export default class RadioGroup extends FormAssociatedElement {
      * @returns {CSSStyleSheet}
      */
     static get cssStyleSheet(): CSSStyleSheet;
-    static get observedAttributes(): any[];
+    static get observedAttributes(): string[];
     pristine: boolean;
     /**
      * Setter for the value attribute.
@@ -28,6 +28,17 @@ export default class RadioGroup extends FormAssociatedElement {
      * @returns {string} The value of the attribute.
      */
     get value(): string;
+    /**
+     * Setter for the label attribute.
+     * @param {string} value The label to set.
+     */
+    set label(value: string);
+    /**
+     * Getter for the label attribute.
+     * @returns {string|null}
+     */
+    get label(): string | null;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Draws the component for the radio group.
      * @returns {DocumentFragment}
@@ -38,6 +49,10 @@ export default class RadioGroup extends FormAssociatedElement {
      * Adds event listeners after the component is drawn. Handles the selection of radio buttons.
      */
     afterDraw(): void;
+    /**
+     * Syncs ARIA attributes on the host element.
+     */
+    syncAria(): void;
     /**
      * Returns the radio button with the given value.
      * @param {string} value The value of the radio button.

package/dist/wje-radio-group.js

@@ -8,7 +8,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _internalValue;
-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 Radio from "./wje-radio.js";
 const styles = "/*\n[ WJ Radio Group ]\n*/\n:host {\n    position: relative;\n    .input-hidden {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 0;\n        height: 0;\n        padding: 0;\n        margin: 0;\n        opacity: 0;\n        z-index: -1;\n    }\n}\n\n:host([invalid]) {\n    color: var(--wje-input-color-invalid);\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    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    top: 0;\n    width: max-content;\n    line-height: normal;\n    position: static;\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}\n\n.wje-inline {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n}\n\n";
@@ -59,6 +59,24 @@ class RadioGroup extends FormAssociatedElement {
   get required() {
     return this.hasAttribute("required");
   }
+  /**
+   * Setter for the label attribute.
+   * @param {string} value The label to set.
+   */
+  set label(value) {
+    if (value === null || value === void 0) {
+      this.removeAttribute("label");
+    } else {
+      this.setAttribute("label", value);
+    }
+  }
+  /**
+   * Getter for the label attribute.
+   * @returns {string|null}
+   */
+  get label() {
+    return this.getAttribute("label");
+  }
   /**
    * Returns the CSS styles for the component.
    * @static
@@ -68,7 +86,17 @@ class RadioGroup extends FormAssociatedElement {
     return styles;
   }
   static get observedAttributes() {
-    return [];
+    return ["required", "value", "disabled", "invalid", "label"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    var _a;
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+    if (oldValue === newValue) return;
+    if (["required", "disabled", "invalid", "label"].includes(name)) this.syncAria();
+    if (name === "value" && this.pristine) {
+      const radio = this.getRadioByValue(this.value);
+      if (radio) this.checkRadio(radio);
+    }
   }
   /**
    * Sets up the attributes for the component.
@@ -78,6 +106,7 @@ class RadioGroup extends FormAssociatedElement {
     if (this.pristine) {
       this.pristine = false;
     }
+    this.syncAria();
   }
   /**
    * Draws the component for the radio group.
@@ -132,6 +161,7 @@ class RadioGroup extends FormAssociatedElement {
         this.invalid = false;
         this.internals.setValidity({}, "");
       }
+      this.syncAria();
     });
     this.input.addEventListener("input", (e) => {
       this.validate();
@@ -145,6 +175,22 @@ class RadioGroup extends FormAssociatedElement {
       this.showInvalidMessage();
     });
   }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    var _a;
+    const label = (_a = this.label) == null ? void 0 : _a.trim();
+    const requiredInvalid = this.required && !this.value;
+    const invalid = this.invalid || requiredInvalid;
+    this.setAriaState({
+      role: "radiogroup",
+      required: this.required,
+      invalid,
+      disabled: this.disabled,
+      ...label ? { label } : {}
+    });
+  }
   /**
    * Returns the radio button with the given value.
    * @param {string} value The value of the radio button.
@@ -171,6 +217,7 @@ class RadioGroup extends FormAssociatedElement {
       this.value = radio.value;
       this.input.value = radio.value;
       this.input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      this.syncAria();
       return true;
     }
     console.error(`Radio with value ${radio.value} not found`);

package/dist/wje-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends FormAssociatedElement {\n    #internalValue = '';\n\n    /**\n     * Creates an instance of RadioGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.#internalValue = value;\n        this.pristine = false;\n        this.internals.setFormValue(value);\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.getAttribute('value');\n    }\n    /**\n     * Setter for the name attribute.\n     * @param {string} value The name to set.\n     */\n    set required(value) {\n        if (value === null || value === undefined) {\n            this.removeAttribute('required');\n        } else {\n            this.setAttribute('required', '');\n        }\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {boolean}\n     */\n    get required() {\n        return this.hasAttribute('required');\n    }\n\n    className = 'RadioGroup';\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    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        if (this.pristine) {\n            this.pristine = false;\n        }\n    }\n\n    /**\n     * Draws the component for the radio group.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n        let input = document.createElement('input');\n        input.type =  'text';\n        input.name = this.name;\n        input.disabled = this.disabled;\n        input.required = this.required;\n        input.value = this.value || '';\n        input.classList.add('input-hidden');\n\n        let slot = document.createElement('slot');\n\n        let label = document.createElement('label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        if (this.label) {\n            native.append(label);\n        }\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        native.append(input);\n        native.append(slot);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.append(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n     */\n    afterDraw() {\n        if(this.value)\n            this.checkRadio(this.getRadioByValue(this.value));\n\n        // this.addEventListener('wje-radio:input', (e) => {\n        //     this.value = e.detail.context.value;\n        // });\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.addEventListener('wje-radio:change', (e) => {\n            this.checkRadio(e.target);\n\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n            if (this.invalid) {\n                this.invalid = false;\n                // this.errorMessage.textContent = '';\n                this.internals.setValidity({}, '');\n            }\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n            event.dispatchCustomEvent(this, 'wje-radio-group:change');\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n        });\n\n    }\n\n    /**\n     * Returns the radio button with the given value.\n     * @param {string} value The value of the radio button.\n     * @returns {Radio} The radio button.\n     */\n    getRadioByValue(value) {\n        return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n    }\n\n    /**\n     * Removes the check from all radio buttons.\n     */\n    removeCheck() {\n        this.getAllElements().forEach((el) => {\n            if (el instanceof Radio) el.checked = false;\n        });\n    }\n\n    /**\n     * Sets the given radio button to checked.\n     */\n    checkRadio(radio) {\n        this.removeCheck();\n\n        if (radio) {\n            // debugger\n            radio.checked = true;\n            this.value = radio.value;\n            this.input.value = radio.value;\n            this.input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n            return true;\n        }\n\n        console.error(`Radio with value ${radio.value} not found`);\n        return false;\n    }\n\n    /**\n     * Retrieves all direct child elements of the current element.\n     * @returns {HTMLElement[]} An array of child elements.\n     */\n    getAllElements() {\n        return Array.from(this.children);\n    }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends FormAssociatedElement {\n    #internalValue = '';\n\n    /**\n     * Creates an instance of RadioGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.#internalValue = value;\n        this.pristine = false;\n        this.internals.setFormValue(value);\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.getAttribute('value');\n    }\n    /**\n     * Setter for the name attribute.\n     * @param {string} value The name to set.\n     */\n    set required(value) {\n        if (value === null || value === undefined) {\n            this.removeAttribute('required');\n        } else {\n            this.setAttribute('required', '');\n        }\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {boolean}\n     */\n    get required() {\n        return this.hasAttribute('required');\n    }\n\n    /**\n     * Setter for the label attribute.\n     * @param {string} value The label to set.\n     */\n    set label(value) {\n        if (value === null || value === undefined) {\n            this.removeAttribute('label');\n        } else {\n            this.setAttribute('label', value);\n        }\n    }\n\n    /**\n     * Getter for the label attribute.\n     * @returns {string|null}\n     */\n    get label() {\n        return this.getAttribute('label');\n    }\n\n    className = 'RadioGroup';\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    static get observedAttributes() {\n        return ['required', 'value', 'disabled', 'invalid', 'label'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (['required', 'disabled', 'invalid', 'label'].includes(name)) this.syncAria();\n        if (name === 'value' && this.pristine) {\n            const radio = this.getRadioByValue(this.value);\n            if (radio) this.checkRadio(radio);\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        if (this.pristine) {\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the radio group.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n        let input = document.createElement('input');\n        input.type =  'text';\n        input.name = this.name;\n        input.disabled = this.disabled;\n        input.required = this.required;\n        input.value = this.value || '';\n        input.classList.add('input-hidden');\n\n        let slot = document.createElement('slot');\n\n        let label = document.createElement('label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        if (this.label) {\n            native.append(label);\n        }\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        native.append(input);\n        native.append(slot);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.append(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n     */\n    afterDraw() {\n        if(this.value)\n            this.checkRadio(this.getRadioByValue(this.value));\n\n        // this.addEventListener('wje-radio:input', (e) => {\n        //     this.value = e.detail.context.value;\n        // });\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.addEventListener('wje-radio:change', (e) => {\n            this.checkRadio(e.target);\n\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n            if (this.invalid) {\n                this.invalid = false;\n                // this.errorMessage.textContent = '';\n                this.internals.setValidity({}, '');\n            }\n            this.syncAria();\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n            event.dispatchCustomEvent(this, 'wje-radio-group:change');\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n        });\n\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const label = this.label?.trim();\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n\n        this.setAriaState({\n            role: 'radiogroup',\n            required: this.required,\n            invalid,\n            disabled: this.disabled,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    /**\n     * Returns the radio button with the given value.\n     * @param {string} value The value of the radio button.\n     * @returns {Radio} The radio button.\n     */\n    getRadioByValue(value) {\n        return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n    }\n\n    /**\n     * Removes the check from all radio buttons.\n     */\n    removeCheck() {\n        this.getAllElements().forEach((el) => {\n            if (el instanceof Radio) el.checked = false;\n        });\n    }\n\n    /**\n     * Sets the given radio button to checked.\n     */\n    checkRadio(radio) {\n        this.removeCheck();\n\n        if (radio) {\n            // debugger\n            radio.checked = true;\n            this.value = radio.value;\n            this.input.value = radio.value;\n            this.input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n            this.syncAria();\n            return true;\n        }\n\n        console.error(`Radio with value ${radio.value} not found`);\n        return false;\n    }\n\n    /**\n     * Retrieves all direct child elements of the current element.\n     * @returns {HTMLElement[]} An array of child elements.\n     */\n    getAllElements() {\n        return Array.from(this.children);\n    }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":[],"mappings":"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"}

package/dist/wje-radio.js

@@ -80,13 +80,28 @@ class Radio extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["checked"];
+    return ["checked", "disabled", "value"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    var _a;
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+    if (oldValue === newValue) return;
+    if (this.input) {
+      if (name === "checked") this.input.checked = this.checked;
+      if (name === "disabled") this.input.disabled = this.disabled;
+      if (name === "value") {
+        this.input.id = this.value + "-radio";
+        this.input.name = this.value + "-radio";
+      }
+    }
+    if (["checked", "disabled"].includes(name)) this.syncAria();
   }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the radio button.
@@ -118,6 +133,17 @@ class Radio extends WJElement {
     if (!this.hasAttribute("disabled")) {
       event.addListener(this.input, "input", "wje-radio:change");
     }
+    this.syncAria();
+  }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    this.setAriaState({
+      role: "radio",
+      checked: this.checked,
+      disabled: this.disabled
+    });
   }
   /**
    * Toggles the radio button.

package/dist/wje-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n    /**\n     * Creates an instance of Radio.\n     */\n    constructor() {\n        super();\n\n    }\n\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    get value() {\n        return this.getAttribute('value');\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n        } else {\n            this.removeAttribute('checked');\n        }\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set disabled(value) {\n        if (value) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Get disabled attribute value.\n     * @returns {boolean} true if the toggle is disabled, false otherwise\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Sets the color of the radio button.\n     * @type {string}\n     */\n    className = 'Radio';\n\n    /**\n     * Returns the CSS styles for the component.\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 ['checked'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the radio button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio');\n\n        if (this.color) native.classList.add(this.color);\n\n        this.input = document.createElement('input');\n        this.input.type = 'radio';\n        this.input.id = this.value + '-radio';\n        this.input.name = this.value + '-radio';\n        this.input.checked = this.checked;\n        this.input.disabled = this.disabled;\n\n        let label = document.createElement('label');\n        label.htmlFor = this.value + '-radio';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(this.input);\n        native.appendChild(label);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners for the component.\n     */\n    afterDraw() {\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this.input, 'input', 'wje-radio:change');\n            // event.addListener(this, 'click', 'wje-radio:input');\n        }\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        this.checked = e.target.checked;\n    };\n\n    /**\n     * Toggles the radio button.\n     */\n    beforeDisconnect() {\n        event.removeElement(this);\n    }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":";;;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAO;AAwDX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,QAAE,eAAgB;AAClB,QAAE,gBAAiB;AACnB,WAAK,UAAU,EAAE,OAAO;AAAA,IAC3B;AAAA,EAjIL;AAAA,EAEI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA,EAEI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,QAAI,OAAO;AACP,WAAK,aAAa,WAAW,EAAE;AAAA,IAC3C,OAAe;AACH,WAAK,gBAAgB,SAAS;AAAA,IAC1C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IAC5C,OAAe;AACH,WAAK,gBAAgB,UAAU;AAAA,IAC3C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,KAAK,MAAO,QAAO,UAAU,IAAI,KAAK,KAAK;AAE/C,SAAK,QAAQ,SAAS,cAAc,OAAO;AAC3C,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,SAAK,MAAM,OAAO,KAAK,QAAQ;AAC/B,SAAK,MAAM,UAAU,KAAK;AAC1B,SAAK,MAAM,WAAW,KAAK;AAE3B,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK,KAAK;AAC7B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,KAAK,OAAO,SAAS,kBAAkB;AAAA,IAErE;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAeI,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAChC;AACA;AC7JA,MAAM,OAAO,aAAa,KAAK;"}
+{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n    /**\n     * Creates an instance of Radio.\n     */\n    constructor() {\n        super();\n\n    }\n\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    get value() {\n        return this.getAttribute('value');\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n        } else {\n            this.removeAttribute('checked');\n        }\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set disabled(value) {\n        if (value) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Get disabled attribute value.\n     * @returns {boolean} true if the toggle is disabled, false otherwise\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Sets the color of the radio button.\n     * @type {string}\n     */\n    className = 'Radio';\n\n    /**\n     * Returns the CSS styles for the component.\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 ['checked', 'disabled', 'value'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (this.input) {\n            if (name === 'checked') this.input.checked = this.checked;\n            if (name === 'disabled') this.input.disabled = this.disabled;\n            if (name === 'value') {\n                this.input.id = this.value + '-radio';\n                this.input.name = this.value + '-radio';\n            }\n        }\n        if (['checked', 'disabled'].includes(name)) this.syncAria();\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 radio button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio');\n\n        if (this.color) native.classList.add(this.color);\n\n        this.input = document.createElement('input');\n        this.input.type = 'radio';\n        this.input.id = this.value + '-radio';\n        this.input.name = this.value + '-radio';\n        this.input.checked = this.checked;\n        this.input.disabled = this.disabled;\n\n        let label = document.createElement('label');\n        label.htmlFor = this.value + '-radio';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(this.input);\n        native.appendChild(label);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners for the component.\n     */\n    afterDraw() {\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this.input, 'input', 'wje-radio:change');\n            // event.addListener(this, 'click', 'wje-radio:input');\n        }\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'radio',\n            checked: this.checked,\n            disabled: this.disabled,\n        });\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        this.checked = e.target.checked;\n    };\n\n    /**\n     * Toggles the radio button.\n     */\n    beforeDisconnect() {\n        event.removeElement(this);\n    }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":";;;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAO;AAwDX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAkGZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,QAAE,eAAgB;AAClB,QAAE,gBAAiB;AACnB,WAAK,UAAU,EAAE,OAAO;AAAA,IAC3B;AAAA,EA5JL;AAAA,EAEI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA,EAEI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,QAAI,OAAO;AACP,WAAK,aAAa,WAAW,EAAE;AAAA,IAC3C,OAAe;AACH,WAAK,gBAAgB,SAAS;AAAA,IAC1C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IAC5C,OAAe;AACH,WAAK,gBAAgB,UAAU;AAAA,IAC3C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,WAAW,YAAY,OAAO;AAAA,EAC9C;AAAA,EAEI,yBAAyB,MAAM,UAAU,UAAU;;AAC/C,gBAAM,6BAAN,8BAAiC,MAAM,UAAU;AACjD,QAAI,aAAa,SAAU;AAC3B,QAAI,KAAK,OAAO;AACZ,UAAI,SAAS,UAAW,MAAK,MAAM,UAAU,KAAK;AAClD,UAAI,SAAS,WAAY,MAAK,MAAM,WAAW,KAAK;AACpD,UAAI,SAAS,SAAS;AAClB,aAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,aAAK,MAAM,OAAO,KAAK,QAAQ;AAAA,MAC/C;AAAA,IACA;AACQ,QAAI,CAAC,WAAW,UAAU,EAAE,SAAS,IAAI,EAAG,MAAK,SAAU;AAAA,EACnE;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAU;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,KAAK,MAAO,QAAO,UAAU,IAAI,KAAK,KAAK;AAE/C,SAAK,QAAQ,SAAS,cAAc,OAAO;AAC3C,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,SAAK,MAAM,OAAO,KAAK,QAAQ;AAC/B,SAAK,MAAM,UAAU,KAAK;AAC1B,SAAK,MAAM,WAAW,KAAK;AAE3B,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK,KAAK;AAC7B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,KAAK,OAAO,SAAS,kBAAkB;AAAA,IAErE;AACQ,SAAK,SAAU;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKI,WAAW;AACP,SAAK,aAAa;AAAA,MACd,MAAM;AAAA,MACN,SAAS,KAAK;AAAA,MACd,UAAU,KAAK;AAAA,IAC3B,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAeI,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAChC;AACA;ACxLA,MAAM,OAAO,aAAa,KAAK;"}

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

@@ -94,6 +94,10 @@ export default class Rate extends WJElement {
      * Changes the rate of the rating component.
      */
     changeRate(): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Event handler for the mouse enter event.
      * @param {Event} e The event.

package/dist/wje-rate.js

@@ -151,7 +151,7 @@ class Rate extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["is-hover"];
+    return ["is-hover", "value", "max", "disabled", "readonly"];
   }
   /**
    * Called when an attribute changes.
@@ -160,12 +160,19 @@ class Rate extends WJElement {
    * @param {string} newName The new value of the attribute.
    */
   attributeChangedCallback(name, old, newName) {
+    if (super.attributeChangedCallback) {
+      super.attributeChangedCallback(name, old, newName);
+    }
+    if (old !== newName && name !== "is-hover") {
+      this.syncAria();
+    }
   }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component for the rating component.
@@ -195,6 +202,7 @@ class Rate extends WJElement {
    * Adds event listeners after the component is drawn.
    */
   afterDraw() {
+    this.syncAria();
     if (this.hasAttribute("disabled") || this.hasAttribute("readonly")) {
       return;
     }
@@ -256,6 +264,20 @@ class Rate extends WJElement {
       icon.setAttribute("data-index", i);
       icon.setAttribute("data-rate", rateValue);
     }
+    this.syncAria();
+  }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    this.setAriaState({
+      role: "slider",
+      valuemin: 0,
+      valuemax: this.max,
+      valuenow: this.value,
+      disabled: this.hasAttribute("disabled"),
+      readonly: this.hasAttribute("readonly")
+    });
   }
   /**
    * Returns the icons for the rating component.

package/dist/wje-rate.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-rate.js","sources":["../packages/wje-rate/rate.element.js","../packages/wje-rate/rate.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Rate` is a custom web component that represents a rating component.\n * @summary This element represents a rating component.\n * @documentation https://elements.webjet.sk/components/rate\n * @status stable\n * @augments {WJElement}\n * @attribute {number} precision - The precision of the rating component.\n * @attribute {number} max - The maximum value of the rating component.\n * @attribute {Array<string>} icons - The icons of the rating component.\n * @csspart native - The native part of the rating component.\n * @cssproperty [--wje-rate-gap=.25rem] - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements.\n * @cssproperty [--wje-rate-color=var(--wje-color-contrast-11)] - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables.\n * @cssproperty [--wje-rate-selected-color=var(--wje-color-danger-9)] - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value.\n * @tag wje-rate\n */\n\nexport default class Rate extends WJElement {\n    /**\n     * Creates an instance of Rate.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the precision of the rating component.\n     * @param {number} value The value to set.\n     */\n    set precision(value) {\n        this.setAttribute('precision', value);\n    }\n\n    /**\n     * Gets the precision of the rating component.\n     * @returns {number} The value of the precision.\n     */\n    get precision() {\n        return this.hasAttribute('precision') ? +this.getAttribute('precision') : 1;\n    }\n\n    /**\n     * Sets the maximum value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set max(value) {\n        this.setAttribute('max', value);\n    }\n\n    /**\n     * Gets the maximum value of the rating component.\n     * @returns {number} The value of the maximum value.\n     */\n    get max() {\n        return this.hasAttribute('icons') ? this.icons.length : +this.getAttribute('max');\n    }\n\n    /**\n     * Sets the icons of the rating component.\n     * @param {Array<string>} value The value to set.\n     */\n    set icons(value) {\n        return value;\n    }\n\n    /**\n     * Gets the icons of the rating component.\n     * @returns {Array<string>} The value of the icons.\n     */\n    get icons() {\n        return this.hasAttribute('icons') ? JSON.parse(this.getAttribute('icons').replace(/'/g, '\"')) : ['star'];\n    }\n\n    /**\n     * Sets the value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Gets the value of the rating component.\n     * @returns {number} The value of the rating component.\n     */\n    get value() {\n        return this.hasAttribute('value') ? +this.getAttribute('value') : 0;\n    }\n\n    /**\n     * Sets the hover value of the rating component.\n     * @type {string}\n     */\n    className = 'Rate';\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 ['is-hover'];\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {string} name The name of the attribute that changed.\n     * @param {string} old The old value of the attribute.\n     * @param {string} newName The new value of the attribute.\n     */\n    attributeChangedCallback(name, old, newName) {\n        if (name === 'is-hover') {\n            // this.draw();\n        }\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 for the rating component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-rate');\n\n        this.native = native;\n\n        if (this.hasAttribute('icons')) {\n            let icons = this.icons;\n            for (let i = 0; i < icons.length; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        } else {\n            for (let i = 0; i < this.max; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        }\n\n        this.changeRate();\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        if (this.hasAttribute('disabled') || this.hasAttribute('readonly')) {\n            return;\n        }\n\n        this.addEventListener('mouseenter', this.onMouseEnter);\n        this.addEventListener('mouseleave', this.onMouseLeave);\n        this.addEventListener('mousemove', this.onMouseMove);\n        this.addEventListener('touchstart', this.onTouchStart);\n        this.addEventListener('touchend', this.onTouchEnd);\n        this.addEventListener('touchmove', this.onTouchMove);\n        this.addEventListener('click', this.onClick);\n    }\n\n    /**\n     * Creates the icons for the rating component.\n     * @param {number} i The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    createIcons(i) {\n        let div = document.createElement('div');\n        div.classList.add('wje-rate-icon');\n\n        let icon = this.getIcons(i);\n        let clone = icon.cloneNode(true);\n\n        div.appendChild(icon);\n        div.appendChild(clone);\n\n        return div;\n    }\n\n    /**\n     * Changes the rate of the rating component.\n     */\n    changeRate() {\n        const icons = this.native.children;\n        const rateValue =\n            this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== undefined\n                ? this.hoverValue\n                : this.value;\n\n        for (let i = 0; i < icons.length; i++) {\n            const icon = icons[i];\n            const firstIcon = icon.querySelector('wje-icon:first-child');\n            const lastIcon = icon.querySelector('wje-icon:last-child');\n\n            const isSelected = i < rateValue;\n            const isPartial = rateValue > i && rateValue < i + 1;\n\n            if (isSelected) {\n                icon.classList.add('selected');\n                if (this.hasAttribute('selected') && this.getAttribute('selected') === 'filled') {\n                    lastIcon.setAttribute('filled', '');\n                }\n            } else {\n                icon.classList.remove('selected');\n                lastIcon.removeAttribute('filled');\n            }\n\n            if (isPartial) {\n                const percent = ((rateValue - i) * 100).toFixed(2);\n                icon.classList.add('half');\n\n                firstIcon.style.clipPath = `inset(0 0 0 ${percent}%)`;\n                lastIcon.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;\n\n                lastIcon.removeAttribute('hidden');\n            } else {\n                icon.classList.remove('half');\n                firstIcon.style.clipPath = ``;\n                lastIcon.style.clipPath = ``;\n                lastIcon.setAttribute('hidden', '');\n            }\n\n            icon.setAttribute('data-index', i);\n            icon.setAttribute('data-rate', rateValue);\n        }\n    }\n\n    /**\n     * Event handler for the mouse enter event.\n     * @param {Event} e The event.\n     */\n    onMouseEnter = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse leave event.\n     * @param {Event} e The event.\n     */\n    onMouseLeave = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse move event.\n     * @param {Event} e The event.\n     */\n    onMouseMove = (e) => {\n        e.preventDefault();\n\n        let newValue = +this.getValueFromXPosition(e.clientX);\n        if (newValue !== +this.hoverValue) {\n            this.hoverValue = newValue;\n            this.changeRate();\n        }\n    };\n\n    /**\n     * Event handler for the touch start event.\n     * @param {Event} e The event.\n     */\n    onTouchStart = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch end event.\n     * @param {Event} e The event.\n     */\n    onTouchEnd = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch move event.\n     * @param {Event} e The event.\n     */\n    onTouchMove = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the click event.\n     * @param {Event} e The event.\n     */\n    onClick = (e) => {\n        e.preventDefault();\n\n        this.value = +this.hoverValue;\n    };\n\n    /**\n     * Returns the icons for the rating component.\n     * @param {number} index The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    getIcons(index) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', this.max ? this.icons[0] : this.icons[index]);\n\n        if (this.hasAttribute('filled')) icon.setAttribute('filled', '');\n\n        return icon;\n    }\n\n    /**\n     * Returns the value from the x position.\n     * @param {number} coordinate The x coordinate.\n     * @returns {number} The value from the x position.\n     */\n    getValueFromXPosition(coordinate) {\n        const { left, right, width } = this.native.getBoundingClientRect();\n        const value = this.roundToPrecision(((coordinate - left) / width) * this.max, this.precision);\n\n        return Math.min(Math.max(value, 0), this.max);\n    }\n\n    /**\n     * Rounds a given number to the nearest specified precision.\n     * @param {number} numberToRound The number to be rounded.\n     * @param {number} [precision] The precision to which the number should be rounded.\n     * @returns {number} - The rounded number.\n     * @example\n     * roundToPrecision(2.3); // Returns 2.5\n     * roundToPrecision(2.3, 0.1); // Returns 2.3\n     * roundToPrecision(2.6, 1); // Returns 3\n     */\n    roundToPrecision(numberToRound, precision = 0.5) {\n        const multiplier = 1 / precision;\n        return Math.ceil(numberToRound * multiplier) / multiplier;\n    }\n}\n","import Rate from './rate.element.js';\n\nexport default Rate;\n\nRate.define('wje-rate', Rate);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-rate.js","sources":["../packages/wje-rate/rate.element.js","../packages/wje-rate/rate.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Rate` is a custom web component that represents a rating component.\n * @summary This element represents a rating component.\n * @documentation https://elements.webjet.sk/components/rate\n * @status stable\n * @augments {WJElement}\n * @attribute {number} precision - The precision of the rating component.\n * @attribute {number} max - The maximum value of the rating component.\n * @attribute {Array<string>} icons - The icons of the rating component.\n * @csspart native - The native part of the rating component.\n * @cssproperty [--wje-rate-gap=.25rem] - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements.\n * @cssproperty [--wje-rate-color=var(--wje-color-contrast-11)] - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables.\n * @cssproperty [--wje-rate-selected-color=var(--wje-color-danger-9)] - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value.\n * @tag wje-rate\n */\n\nexport default class Rate extends WJElement {\n    /**\n     * Creates an instance of Rate.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the precision of the rating component.\n     * @param {number} value The value to set.\n     */\n    set precision(value) {\n        this.setAttribute('precision', value);\n    }\n\n    /**\n     * Gets the precision of the rating component.\n     * @returns {number} The value of the precision.\n     */\n    get precision() {\n        return this.hasAttribute('precision') ? +this.getAttribute('precision') : 1;\n    }\n\n    /**\n     * Sets the maximum value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set max(value) {\n        this.setAttribute('max', value);\n    }\n\n    /**\n     * Gets the maximum value of the rating component.\n     * @returns {number} The value of the maximum value.\n     */\n    get max() {\n        return this.hasAttribute('icons') ? this.icons.length : +this.getAttribute('max');\n    }\n\n    /**\n     * Sets the icons of the rating component.\n     * @param {Array<string>} value The value to set.\n     */\n    set icons(value) {\n        return value;\n    }\n\n    /**\n     * Gets the icons of the rating component.\n     * @returns {Array<string>} The value of the icons.\n     */\n    get icons() {\n        return this.hasAttribute('icons') ? JSON.parse(this.getAttribute('icons').replace(/'/g, '\"')) : ['star'];\n    }\n\n    /**\n     * Sets the value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Gets the value of the rating component.\n     * @returns {number} The value of the rating component.\n     */\n    get value() {\n        return this.hasAttribute('value') ? +this.getAttribute('value') : 0;\n    }\n\n    /**\n     * Sets the hover value of the rating component.\n     * @type {string}\n     */\n    className = 'Rate';\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 ['is-hover', 'value', 'max', 'disabled', 'readonly'];\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {string} name The name of the attribute that changed.\n     * @param {string} old The old value of the attribute.\n     * @param {string} newName The new value of the attribute.\n     */\n    attributeChangedCallback(name, old, newName) {\n        if (super.attributeChangedCallback) {\n            super.attributeChangedCallback(name, old, newName);\n        }\n\n        if (name === 'is-hover') {\n            // this.draw();\n        }\n\n        if (old !== newName && name !== 'is-hover') {\n            this.syncAria();\n        }\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 for the rating component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-rate');\n\n        this.native = native;\n\n        if (this.hasAttribute('icons')) {\n            let icons = this.icons;\n            for (let i = 0; i < icons.length; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        } else {\n            for (let i = 0; i < this.max; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        }\n\n        this.changeRate();\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        if (this.hasAttribute('disabled') || this.hasAttribute('readonly')) {\n            return;\n        }\n\n        this.addEventListener('mouseenter', this.onMouseEnter);\n        this.addEventListener('mouseleave', this.onMouseLeave);\n        this.addEventListener('mousemove', this.onMouseMove);\n        this.addEventListener('touchstart', this.onTouchStart);\n        this.addEventListener('touchend', this.onTouchEnd);\n        this.addEventListener('touchmove', this.onTouchMove);\n        this.addEventListener('click', this.onClick);\n    }\n\n    /**\n     * Creates the icons for the rating component.\n     * @param {number} i The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    createIcons(i) {\n        let div = document.createElement('div');\n        div.classList.add('wje-rate-icon');\n\n        let icon = this.getIcons(i);\n        let clone = icon.cloneNode(true);\n\n        div.appendChild(icon);\n        div.appendChild(clone);\n\n        return div;\n    }\n\n    /**\n     * Changes the rate of the rating component.\n     */\n    changeRate() {\n        const icons = this.native.children;\n        const rateValue =\n            this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== undefined\n                ? this.hoverValue\n                : this.value;\n\n        for (let i = 0; i < icons.length; i++) {\n            const icon = icons[i];\n            const firstIcon = icon.querySelector('wje-icon:first-child');\n            const lastIcon = icon.querySelector('wje-icon:last-child');\n\n            const isSelected = i < rateValue;\n            const isPartial = rateValue > i && rateValue < i + 1;\n\n            if (isSelected) {\n                icon.classList.add('selected');\n                if (this.hasAttribute('selected') && this.getAttribute('selected') === 'filled') {\n                    lastIcon.setAttribute('filled', '');\n                }\n            } else {\n                icon.classList.remove('selected');\n                lastIcon.removeAttribute('filled');\n            }\n\n            if (isPartial) {\n                const percent = ((rateValue - i) * 100).toFixed(2);\n                icon.classList.add('half');\n\n                firstIcon.style.clipPath = `inset(0 0 0 ${percent}%)`;\n                lastIcon.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;\n\n                lastIcon.removeAttribute('hidden');\n            } else {\n                icon.classList.remove('half');\n                firstIcon.style.clipPath = ``;\n                lastIcon.style.clipPath = ``;\n                lastIcon.setAttribute('hidden', '');\n            }\n\n            icon.setAttribute('data-index', i);\n            icon.setAttribute('data-rate', rateValue);\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'slider',\n            valuemin: 0,\n            valuemax: this.max,\n            valuenow: this.value,\n            disabled: this.hasAttribute('disabled'),\n            readonly: this.hasAttribute('readonly'),\n        });\n    }\n\n    /**\n     * Event handler for the mouse enter event.\n     * @param {Event} e The event.\n     */\n    onMouseEnter = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse leave event.\n     * @param {Event} e The event.\n     */\n    onMouseLeave = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse move event.\n     * @param {Event} e The event.\n     */\n    onMouseMove = (e) => {\n        e.preventDefault();\n\n        let newValue = +this.getValueFromXPosition(e.clientX);\n        if (newValue !== +this.hoverValue) {\n            this.hoverValue = newValue;\n            this.changeRate();\n        }\n    };\n\n    /**\n     * Event handler for the touch start event.\n     * @param {Event} e The event.\n     */\n    onTouchStart = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch end event.\n     * @param {Event} e The event.\n     */\n    onTouchEnd = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch move event.\n     * @param {Event} e The event.\n     */\n    onTouchMove = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the click event.\n     * @param {Event} e The event.\n     */\n    onClick = (e) => {\n        e.preventDefault();\n\n        this.value = +this.hoverValue;\n    };\n\n    /**\n     * Returns the icons for the rating component.\n     * @param {number} index The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    getIcons(index) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', this.max ? this.icons[0] : this.icons[index]);\n\n        if (this.hasAttribute('filled')) icon.setAttribute('filled', '');\n\n        return icon;\n    }\n\n    /**\n     * Returns the value from the x position.\n     * @param {number} coordinate The x coordinate.\n     * @returns {number} The value from the x position.\n     */\n    getValueFromXPosition(coordinate) {\n        const { left, right, width } = this.native.getBoundingClientRect();\n        const value = this.roundToPrecision(((coordinate - left) / width) * this.max, this.precision);\n\n        return Math.min(Math.max(value, 0), this.max);\n    }\n\n    /**\n     * Rounds a given number to the nearest specified precision.\n     * @param {number} numberToRound The number to be rounded.\n     * @param {number} [precision] The precision to which the number should be rounded.\n     * @returns {number} - The rounded number.\n     * @example\n     * roundToPrecision(2.3); // Returns 2.5\n     * roundToPrecision(2.3, 0.1); // Returns 2.3\n     * roundToPrecision(2.6, 1); // Returns 3\n     */\n    roundToPrecision(numberToRound, precision = 0.5) {\n        const multiplier = 1 / precision;\n        return Math.ceil(numberToRound * multiplier) / multiplier;\n    }\n}\n","import Rate from './rate.element.js';\n\nexport default Rate;\n\nRate.define('wje-rate', Rate);\n"],"names":[],"mappings":"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"}

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

@@ -37,11 +37,13 @@ export default class RelativeTime extends WJElement {
      * @returns {Date}
      */
     get objectDate(): Date;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Draws the component for the relative time.
      * @returns {DocumentFragment}
      */
     draw(): DocumentFragment;
+    native: HTMLDivElement;
     /**
      * Returns the relative time string for the given date.
      */

package/dist/wje-relative-time.js

@@ -57,13 +57,24 @@ class RelativeTime extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return [];
+    return ["date", "lang"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    var _a;
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+    if (oldValue === newValue) return;
+    if (this.native) {
+      this.native.innerText = this.getRelativeTimeString();
+      if (this.date) this.native.setAttribute("datetime", this.date);
+      else this.native.removeAttribute("datetime");
+    }
   }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "status" });
   }
   /**
    * Draws the component for the relative time.
@@ -75,7 +86,9 @@ class RelativeTime extends WJElement {
     element.setAttribute("part", "native");
     element.classList.add("native-relative-time");
     element.innerText = this.getRelativeTimeString();
+    if (this.date) element.setAttribute("datetime", this.date);
     fragment.appendChild(element);
+    this.native = element;
     return fragment;
   }
   /**

package/dist/wje-relative-time.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-relative-time.js","sources":["../packages/wje-relative-time/relative-time.element.js","../packages/wje-relative-time/relative-time.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `RelativeTime` is a custom web component that represents a relative time component.\n * @summary This element represents a relative time component.\n * @documentation https://elements.webjet.sk/components/relative-time\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the relative time component.\n * @tag wje-relative-time\n */\n\nexport default class RelativeTime extends WJElement {\n    /**\n     * Creates an instance of RelativeTime.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the date of the relative time component.\n     * @param value\n     */\n    set date(value) {\n        this.setAttribute('date', value);\n    }\n\n    /**\n     * Gets the date of the relative time component.\n     * @returns {string}\n     */\n    get date() {\n        return this.getAttribute('date');\n    }\n\n    /**\n     * Sets the object date of the relative time component.\n     * @param value\n     */\n    set objectDate(value) {\n        this.setAttribute('object-date', value);\n    }\n\n    /**\n     * Gets the object date of the relative time component.\n     * @returns {Date}\n     */\n    get objectDate() {\n        let date = new Date();\n        let inputDate = this.date;\n\n        if (!!inputDate && inputDate !== '') {\n            inputDate = this.isISODate(inputDate) ? inputDate : +inputDate * 1000;\n\n            date = new Date(inputDate);\n        }\n\n        return date;\n    }\n\n    /**\n     * Sets the lang of the relative time component.\n     * @type {string}\n     */\n    className = 'RelativeTime';\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 for the relative time.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-relative-time');\n        element.innerText = this.getRelativeTimeString();\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Returns the relative time string for the given date.\n     */\n    getRelativeTimeString(lang = navigator.language) {\n        if (this.objectDate.toString() === 'Invalid Date' || this.objectDate.toString() === 'NaN') {\n            return '';\n        }\n\n        const timeMs = this.objectDate.getTime();\n\n        const deltaSeconds = Math.round((timeMs - Date.now()) / 1000);\n\n        const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];\n\n        const units = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];\n        const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));\n        const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;\n\n        return this.localizer.relativeTime(\n            this.getAttribute('lang'),\n            Math.floor(deltaSeconds / divisor),\n            units[unitIndex],\n            { numeric: 'auto' }\n        );\n    }\n\n    /**\n     * Checks if the given string is an ISO date.\n     * @param {string} str The string to check.\n     * @returns {boolean} True if the string is an ISO date, false otherwise.\n     */\n    isISODate(str) {\n        const date = new Date(str);\n        return !isNaN(date.getTime());\n    }\n}\n","import RelativeTime from './relative-time.element.js';\n\nexport default RelativeTime;\n\nRelativeTime.define('wje-relative-time', RelativeTime);\n"],"names":[],"mappings":";;;;;AAae,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD,cAAc;AACV,UAAO;AAiDX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAhDR,SAAK,YAAY,IAAI,UAAU,IAAI;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW,OAAO;AAClB,SAAK,aAAa,eAAe,KAAK;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,aAAa;AACb,QAAI,OAAO,oBAAI,KAAM;AACrB,QAAI,YAAY,KAAK;AAErB,QAAI,CAAC,CAAC,aAAa,cAAc,IAAI;AACjC,kBAAY,KAAK,UAAU,SAAS,IAAI,YAAY,CAAC,YAAY;AAEjE,aAAO,IAAI,KAAK,SAAS;AAAA,IACrC;AAEQ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,sBAAsB;AAC5C,YAAQ,YAAY,KAAK,sBAAuB;AAEhD,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,sBAAsB,OAAO,UAAU,UAAU;AAC7C,QAAI,KAAK,WAAW,eAAe,kBAAkB,KAAK,WAAW,SAAU,MAAK,OAAO;AACvF,aAAO;AAAA,IACnB;AAEQ,UAAM,SAAS,KAAK,WAAW,QAAS;AAExC,UAAM,eAAe,KAAK,OAAO,SAAS,KAAK,IAAK,KAAI,GAAI;AAE5D,UAAM,UAAU,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,QAAQ,IAAI,QAAQ,KAAK,QAAQ;AAE9E,UAAM,QAAQ,CAAC,UAAU,UAAU,QAAQ,OAAO,QAAQ,SAAS,MAAM;AACzE,UAAM,YAAY,QAAQ,UAAU,CAAC,WAAW,SAAS,KAAK,IAAI,YAAY,CAAC;AAC/E,UAAM,UAAU,YAAY,QAAQ,YAAY,CAAC,IAAI;AAErD,WAAO,KAAK,UAAU;AAAA,MAClB,KAAK,aAAa,MAAM;AAAA,MACxB,KAAK,MAAM,eAAe,OAAO;AAAA,MACjC,MAAM,SAAS;AAAA,MACf,EAAE,SAAS,OAAM;AAAA,IACpB;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,UAAU,KAAK;AACX,UAAM,OAAO,IAAI,KAAK,GAAG;AACzB,WAAO,CAAC,MAAM,KAAK,SAAS;AAAA,EACpC;AACA;ACtIA,aAAa,OAAO,qBAAqB,YAAY;"}
+{"version":3,"file":"wje-relative-time.js","sources":["../packages/wje-relative-time/relative-time.element.js","../packages/wje-relative-time/relative-time.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `RelativeTime` is a custom web component that represents a relative time component.\n * @summary This element represents a relative time component.\n * @documentation https://elements.webjet.sk/components/relative-time\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the relative time component.\n * @tag wje-relative-time\n */\n\nexport default class RelativeTime extends WJElement {\n    /**\n     * Creates an instance of RelativeTime.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the date of the relative time component.\n     * @param value\n     */\n    set date(value) {\n        this.setAttribute('date', value);\n    }\n\n    /**\n     * Gets the date of the relative time component.\n     * @returns {string}\n     */\n    get date() {\n        return this.getAttribute('date');\n    }\n\n    /**\n     * Sets the object date of the relative time component.\n     * @param value\n     */\n    set objectDate(value) {\n        this.setAttribute('object-date', value);\n    }\n\n    /**\n     * Gets the object date of the relative time component.\n     * @returns {Date}\n     */\n    get objectDate() {\n        let date = new Date();\n        let inputDate = this.date;\n\n        if (!!inputDate && inputDate !== '') {\n            inputDate = this.isISODate(inputDate) ? inputDate : +inputDate * 1000;\n\n            date = new Date(inputDate);\n        }\n\n        return date;\n    }\n\n    /**\n     * Sets the lang of the relative time component.\n     * @type {string}\n     */\n    className = 'RelativeTime';\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 ['date', 'lang'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (this.native) {\n            this.native.innerText = this.getRelativeTimeString();\n            if (this.date) this.native.setAttribute('datetime', this.date);\n            else this.native.removeAttribute('datetime');\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Draws the component for the relative time.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-relative-time');\n        element.innerText = this.getRelativeTimeString();\n        if (this.date) element.setAttribute('datetime', this.date);\n\n        fragment.appendChild(element);\n        this.native = element;\n\n        return fragment;\n    }\n\n    /**\n     * Returns the relative time string for the given date.\n     */\n    getRelativeTimeString(lang = navigator.language) {\n        if (this.objectDate.toString() === 'Invalid Date' || this.objectDate.toString() === 'NaN') {\n            return '';\n        }\n\n        const timeMs = this.objectDate.getTime();\n\n        const deltaSeconds = Math.round((timeMs - Date.now()) / 1000);\n\n        const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];\n\n        const units = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];\n        const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));\n        const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;\n\n        return this.localizer.relativeTime(\n            this.getAttribute('lang'),\n            Math.floor(deltaSeconds / divisor),\n            units[unitIndex],\n            { numeric: 'auto' }\n        );\n    }\n\n    /**\n     * Checks if the given string is an ISO date.\n     * @param {string} str The string to check.\n     * @returns {boolean} True if the string is an ISO date, false otherwise.\n     */\n    isISODate(str) {\n        const date = new Date(str);\n        return !isNaN(date.getTime());\n    }\n}\n","import RelativeTime from './relative-time.element.js';\n\nexport default RelativeTime;\n\nRelativeTime.define('wje-relative-time', RelativeTime);\n"],"names":[],"mappings":"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"}

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

@@ -41,6 +41,10 @@ export default class Reorder extends WJElement {
      * Adds event listeners after the component is drawn.
      */
     afterDraw(): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Attaches event listeners to the element.
      * @param element

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

@@ -29,6 +29,10 @@ export default class ReorderHandle extends WJElement {
      * Draws the component after it is connected to the DOM.
      */
     afterDraw(): void;
+    /**
+     * Sync ARIA attributes on host.
+     */
+    syncAria(): void;
     /**
      * Handles the attribute changes.
      * @param {DragEvent} e

package/dist/wje-reorder-handle.js

@@ -34,6 +34,7 @@ class ReorderHandle extends WJElement {
   }
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component.
@@ -53,10 +54,30 @@ class ReorderHandle extends WJElement {
    * Draws the component after it is connected to the DOM.
    */
   afterDraw() {
+    this.syncAria();
     if (this.hasAttribute("disabled")) {
       this.style.opacity = ".3";
     }
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    if (!this.hasAttribute("role")) {
+      this.setAriaState({ role: "button" });
+    }
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    if (this.hasAttribute("disabled")) {
+      this.setAriaState({ disabled: true });
+    }
+    const ariaLabel = this.getAttribute("aria-label");
+    const label = this.getAttribute("label") || "Reorder item";
+    if (!ariaLabel && label) {
+      this.setAriaState({ label });
+    }
+  }
   /**
    * Handles the attribute changes.
    * @param {DragEvent} e