wj-elements 0.1.182 → 0.1.183

package/dist/light.css

@@ -551,7 +551,7 @@
     --wje-textarea-font-family: var(--wje-font-family);
     --wje-textarea-background-color: var(--wje-background);
     --wje-textarea-color: var(--wje-color);
-    --wje-textarea-color-invalid: var(--wje-color-danger);
+    --wje-textarea-color-invalid: var(--wje-color-danger-9);
     --wje-textarea-border-width: 1px;
     --wje-textarea-border-style: solid;
     --wje-textarea-border-color: var(--wje-border-color);

package/dist/packages/wje-input/input.element.d.ts

@@ -42,13 +42,14 @@ export default class Input extends WJElement {
      */
     static formAssociated: boolean;
     /**
-     * Setter for the invalid attribute.
-     * @param {boolean} isInvalid Whether the input is invalid.
+     * Sets or removes the 'invalid' attribute on an element based on the provided value.
+     * @param {boolean} value If true, the 'invalid' attribute is set. If false, the 'invalid' attribute is removed.
      */
-    set invalid(isInvalid: boolean);
+    set invalid(value: boolean);
     /**
-     * Getter for the invalid attribute.
-     * @returns {boolean} Whether the attribute is present.
+     * Gets the value of the 'invalid' attribute.
+     * Determines whether the 'invalid' attribute is present on the element.
+     * @returns {boolean} True if the 'invalid' attribute is present, otherwise false.
      */
     get invalid(): boolean;
     pristine: boolean;
@@ -61,16 +62,42 @@ export default class Input extends WJElement {
      */
     set value(value: string);
     /**
-     * Getter for the value attribute.
-     * @returns {string} The value of the attribute.
+     * Retrieves the value from the input element if available; otherwise,
+     * returns the internal _value property or an empty string as the default.
+     * @returns {string} The current value from the input element, the internal _value, or an empty string.
      */
     get value(): string;
     _value: string;
+    /**
+     * Sets the label attribute of the element.
+     * @param {string} value The value to set as the label attribute.
+     */
+    set label(value: string);
+    /**
+     * Retrieves the value of the 'label' attribute if it exists.
+     * If the 'label' attribute is not set, it returns false.
+     * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.
+     */
+    get label(): string | boolean;
+    /**
+     * Sets the custom error display attribute for an element.
+     * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.
+     */
+    set customErrorDisplay(value: boolean);
     /**
      * Getter for the customErrorDisplay attribute.
      * @returns {boolean} Whether the attribute is present.
      */
     get customErrorDisplay(): boolean;
+    /**
+     * Sets the `validateOnChange` property. If set to a truthy value, it adds the
+     * `validate-on-change` attribute to the element. If set to a falsy value, it
+     * removes the `validate-on-change` attribute from the element.
+     * @param {boolean} value Determines whether to add or remove the
+     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a
+     * falsy value removes it.
+     */
+    set validateOnChange(value: boolean);
     /**
      * Getter for the validateOnChange attribute.
      * @returns {boolean} Whether the attribute is present.
@@ -116,11 +143,41 @@ export default class Input extends WJElement {
      * @returns {string} The default value of the input element.
      */
     get defaultValue(): string;
+    /**
+     * Sets or removes the 'clearable' attribute on the element.
+     * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.
+     * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.
+     */
     set clearable(value: boolean);
+    /**
+     * Checks if the 'clearable' attribute is present on the element.
+     * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.
+     */
     get clearable(): boolean;
+    /**
+     * Sets the placeholder value for an element. If the provided value is non-empty,
+     * it assigns the value to the "placeholder" attribute. Otherwise, it removes
+     * the "placeholder" attribute from the element.
+     * @param {string} value The placeholder text to set or null/undefined to remove the attribute.
+     */
     set placeholder(value: string);
+    /**
+     * Retrieves the value of the 'placeholder' attribute from the element.
+     * If the attribute is not set, it returns an empty string.
+     * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.
+     */
     get placeholder(): string;
+    /**
+     * Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.
+     * If no value is provided, it removes the `variant` attribute from the element.
+     * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.
+     */
     set variant(value: string);
+    /**
+     * Retrieves the value of the 'variant' attribute from the element.
+     * If the attribute is not set, it defaults to 'default'.
+     * @returns {string} The value of the 'variant' attribute or 'default' if not set.
+     */
     get variant(): string;
     beforeDraw(): void;
     /**
@@ -155,9 +212,9 @@ export default class Input extends WJElement {
     validateInput(): void;
     validationError: string;
     /**
-     * @summary Propagates the validation state of the input.
-     * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.
-     * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.
+     * Checks and updates the validation state of the component based on its current properties.
+     * If the component is invalid and a custom error display is enabled, it dispatches an 'invalid' event.
+     * @returns {void} This method does not return a value.
      */
     propagateValidation(): void;
     /**

package/dist/packages/wje-select/select.element.d.ts

@@ -170,6 +170,8 @@ export default class Select extends WJElement {
      * @returns {object} The value of the attribute.
      */
     get value(): object;
+    set required(value: boolean);
+    get required(): boolean;
     /**
      * Getter for the customErrorDisplay attribute.
      * @returns {boolean} Whether the attribute is present.
@@ -181,13 +183,16 @@ export default class Select extends WJElement {
      */
     get validateOnChange(): boolean;
     /**
-     * Setter for the invalid attribute.
-     * @param {boolean} isInvalid Whether the input is invalid.
+     * Sets the 'invalid' property of the element.
+     * When set to a truthy value, the 'invalid' attribute is added to the element.
+     * When set to a falsy value, the 'invalid' attribute is removed from the element.
+     * @param {boolean} value A boolean indicating whether the element is invalid.
      */
-    set invalid(isInvalid: boolean);
+    set invalid(value: boolean);
     /**
-     * Getter for the invalid attribute.
-     * @returns {boolean} Whether the attribute is present.
+     * Retrieves the value of the 'invalid' attribute.
+     * This method checks if the 'invalid' attribute is present on the element.
+     * @returns {boolean} Returns true if the 'invalid' attribute is present, otherwise false.
      */
     get invalid(): boolean;
     /**
@@ -263,9 +268,9 @@ export default class Select extends WJElement {
      * The options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.
      * If a `wje-options` element is present within the component, its loaded options are included in the merged list.
      * In the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order.
-     * @returns {Array<Object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.
+     * @returns {Array<object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.
      */
-    get options(): Array<any>;
+    get options(): Array<object>;
     /**
      * Sets the trigger value.
      * @param {string} value The trigger value to set.
@@ -291,6 +296,7 @@ export default class Select extends WJElement {
      * @returns {void} Does not return a value. The method operates by updating the state and behavior of the component.
      */
     afterDraw(): void;
+    pristine: boolean;
     /**
      * Handles the option change event.
      * @param {Event} e The event.
@@ -413,9 +419,31 @@ export default class Select extends WJElement {
      */
     htmlSelectedItem(item: any): any;
     /**
-     * @summary Callback function that is called when the custom element is associated with a form.
-     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
-     * @param {HTMLFormElement} form The form the custom element is associated with.
+     * Clones and appends an icon from a template with slot "check" to the given option element.
+     * @param {HTMLElement} option The target option element where the "check" icon will be added.
+     * @returns {void}
+     */
+    optionCheckSlot(option: HTMLElement): void;
+    /**
+     * Validates the selection of options in the select element.
+     * Checks if the element is required and no option is selected,
+     * in which case it sets a validation error with a custom message.
+     * If the element passes validation, it clears any existing validation errors.
+     *
+     * @return {void} Does not return a value.
+     */
+    validateSelect(): void;
+    /**
+     * Checks and updates the validation state of the component based on its current properties.
+     * If the component is invalid and a custom error display is enabled, it dispatches an 'invalid' event.
+     * @returns {void} This method does not return a value.
+     */
+    propagateValidation(): void;
+    showInvalidMessage(): void;
+    /**
+     * Lifecycle callback invoked when the custom element becomes associated with a form element.
+     * @param {HTMLFormElement} form The form element the custom element is associated with.
+     * @returns {void}
      */
     formAssociatedCallback(form: HTMLFormElement): void;
     /**
@@ -454,11 +482,5 @@ export default class Select extends WJElement {
      * @returns {boolean} Returns true if all elements in the `elements` array are found within the `options` array, otherwise returns false.
      */
     areAllElementsInOptions(elements: any[], options: any[]): boolean;
-    /**
-     * Clones and appends an icon from a template with slot "check" to the given option element.
-     * @param {HTMLElement} option The target option element where the "check" icon will be added.
-     * @returns {void}
-     */
-    optionCheckSlot(option: HTMLElement): void;
     #private;
 }

package/dist/packages/wje-textarea/textarea.element.d.ts

@@ -65,6 +65,20 @@ export default class Textarea extends WJElement {
      */
     get value(): string;
     _value: string;
+    /**
+     * Sets the `validateOnChange` property. If set to a truthy value, it adds the
+     * `validate-on-change` attribute to the element. If set to a falsy value, it
+     * removes the `validate-on-change` attribute from the element.
+     * @param {boolean} value Determines whether to add or remove the
+     * `validate-on-change` attribute. A truthy value adds the attribute, whereas a
+     * falsy value removes it.
+     */
+    set validateOnChange(value: boolean);
+    /**
+     * Getter for the validateOnChange attribute.
+     * @returns {boolean} Whether the attribute is present.
+     */
+    get validateOnChange(): boolean;
     /**
      * Getter for the form attribute.
      * @returns {HTMLFormElement} The form the input is associated with.
@@ -121,6 +135,12 @@ export default class Textarea extends WJElement {
      * @param {Event} e The event object.
      */
     counterFn: (e: Event) => void;
+    /**
+     * @summary Displays the validation message for the input.
+     * If the input has a slot named 'error', it sets the text content of the element with attribute 'error-message' inside the slot to the validation message.
+     * If the input does not have an 'error' slot, it sets the text content of the errorMessage property to the validation message.
+     */
+    showInvalidMessage(): void;
     /**
      * @summary Validates the input.
      * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.

package/dist/wje-input.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n    label {\n        margin: var(--wje-input-label-margin);\n        padding: var(--wje-input-label-padding);\n        display: var(--wje-input-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-label-line-height);\n        font-size: var(--wje-input-label-font-size);\n    }\n    .wrapper {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        width: 100%;\n        > .input-wrapper {\n            grid-column: 2;\n        }\n    }\n    .native-input {\n        .input-wrapper {\n            display: block;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            .error-message {\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\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: 0;\n    top: 3px;\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:host([required]) .input-wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-family: var(--wje-force-mac-font-family);\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}\n\n:host([invalid]) {\n    .error-message {\n        display: block;\n    }\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n    margin-inline: 0.5rem;\n}\n\n:host([disabled]) input {\n    opacity: 0.5;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    font-family: var(--wje-input-font-family);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\n.error-message {\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%, -75%);\n    color: white;\n    font-size: 12px;\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
+const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n    label {\n        margin: var(--wje-input-label-margin);\n        padding: var(--wje-input-label-padding);\n        display: var(--wje-input-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-label-line-height);\n        font-size: var(--wje-input-label-font-size);\n    }\n    .wrapper {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        width: 100%;\n        > .input-wrapper {\n            grid-column: 2;\n        }\n    }\n    .native-input {\n        .input-wrapper {\n            display: block;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\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\n:host([type=hidden]) {\n    margin: 0;\n    .native-input {\n        padding: 0;\n        border-width: 0;\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: 0;\n    top: 3px;\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: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}\n\n:host([invalid]) {\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\n:host([disabled]) input {\n    opacity: 0.5;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\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@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
 class Input extends WJElement {
   /**
    * Creates an instance of Input.
@@ -41,13 +41,40 @@ class Input extends WJElement {
     this._value = value;
   }
   /**
-   * Getter for the value attribute.
-   * @returns {string} The value of the attribute.
+   * Retrieves the value from the input element if available; otherwise,
+   * returns the internal _value property or an empty string as the default.
+   * @returns {string} The current value from the input element, the internal _value, or an empty string.
    */
   get value() {
     var _a;
     return ((_a = this.input) == null ? void 0 : _a.value) ?? this._value ?? "";
   }
+  /**
+   * Sets the label attribute of the element.
+   * @param {string} value The value to set as the label attribute.
+   */
+  set label(value) {
+    this.setAttribute("label", value);
+  }
+  /**
+   * Retrieves the value of the 'label' attribute if it exists.
+   * If the 'label' attribute is not set, it returns false.
+   * @returns {string|boolean} The value of the 'label' attribute as a string, or false if the attribute is not set.
+   */
+  get label() {
+    return this.getAttribute("label") || false;
+  }
+  /**
+   * Sets the custom error display attribute for an element.
+   * @param {boolean} value If true, adds the 'custom-error-display' attribute to the element. If false, removes the attribute from the element.
+   */
+  set customErrorDisplay(value) {
+    if (value) {
+      this.setAttribute("custom-error-display", "");
+    } else {
+      this.removeAttribute("custom-error-display");
+    }
+  }
   /**
    * Getter for the customErrorDisplay attribute.
    * @returns {boolean} Whether the attribute is present.
@@ -55,6 +82,21 @@ class Input extends WJElement {
   get customErrorDisplay() {
     return this.hasAttribute("custom-error-display");
   }
+  /**
+   * Sets the `validateOnChange` property. If set to a truthy value, it adds the
+   * `validate-on-change` attribute to the element. If set to a falsy value, it
+   * removes the `validate-on-change` attribute from the element.
+   * @param {boolean} value Determines whether to add or remove the
+   * `validate-on-change` attribute. A truthy value adds the attribute, whereas a
+   * falsy value removes it.
+   */
+  set validateOnChange(value) {
+    if (value) {
+      this.setAttribute("validate-on-change", "");
+    } else {
+      this.removeAttribute("validate-on-change");
+    }
+  }
   /**
    * Getter for the validateOnChange attribute.
    * @returns {boolean} Whether the attribute is present.
@@ -63,19 +105,23 @@ class Input extends WJElement {
     return this.hasAttribute("validate-on-change");
   }
   /**
-   * Getter for the invalid attribute.
-   * @returns {boolean} Whether the attribute is present.
+   * Sets or removes the 'invalid' attribute on an element based on the provided value.
+   * @param {boolean} value If true, the 'invalid' attribute is set. If false, the 'invalid' attribute is removed.
    */
-  get invalid() {
-    return this.hasAttribute("invalid");
+  set invalid(value) {
+    if (value) {
+      this.setAttribute("invalid", "");
+    } else {
+      this.removeAttribute("invalid");
+    }
   }
   /**
-   * Setter for the invalid attribute.
-   * @param {boolean} isInvalid Whether the input is invalid.
+   * Gets the value of the 'invalid' attribute.
+   * Determines whether the 'invalid' attribute is present on the element.
+   * @returns {boolean} True if the 'invalid' attribute is present, otherwise false.
    */
-  set invalid(isInvalid) {
-    if (isInvalid) this.setAttribute("invalid", "");
-    else this.removeAttribute("invalid");
+  get invalid() {
+    return this.hasAttribute("invalid");
   }
   /**
    * Getter for the form attribute.
@@ -131,6 +177,11 @@ class Input extends WJElement {
   set defaultValue(value) {
     this.setAttribute("value", value);
   }
+  /**
+   * Sets or removes the 'clearable' attribute on the element.
+   * When set to a truthy value, the 'clearable' attribute is added; when falsy, the attribute is removed.
+   * @param {boolean} value Determines whether to set or remove the 'clearable' attribute. If true, the 'clearable' attribute is added. If false, it is removed.
+   */
   set clearable(value) {
     if (value) {
       this.setAttribute("clearable", "");
@@ -138,9 +189,19 @@ class Input extends WJElement {
       this.removeAttribute("clearable");
     }
   }
+  /**
+   * Checks if the 'clearable' attribute is present on the element.
+   * @returns {boolean} True if the 'clearable' attribute is set, otherwise false.
+   */
   get clearable() {
     return this.hasAttribute("clearable");
   }
+  /**
+   * Sets the placeholder value for an element. If the provided value is non-empty,
+   * it assigns the value to the "placeholder" attribute. Otherwise, it removes
+   * the "placeholder" attribute from the element.
+   * @param {string} value The placeholder text to set or null/undefined to remove the attribute.
+   */
   set placeholder(value) {
     if (value) {
       this.setAttribute("placeholder", value);
@@ -148,9 +209,19 @@ class Input extends WJElement {
       this.removeAttribute("placeholder");
     }
   }
+  /**
+   * Retrieves the value of the 'placeholder' attribute from the element.
+   * If the attribute is not set, it returns an empty string.
+   * @returns {string} The value of the 'placeholder' attribute or an empty string if not set.
+   */
   get placeholder() {
     return this.getAttribute("placeholder") || "";
   }
+  /**
+   * Sets the `variant` attribute on the element. If a value is provided, it will set the attribute to the given value.
+   * If no value is provided, it removes the `variant` attribute from the element.
+   * @param {string} value The value to set for the `variant` attribute. If falsy, the attribute is removed.
+   */
   set variant(value) {
     if (value) {
       this.setAttribute("variant", value);
@@ -158,6 +229,11 @@ class Input extends WJElement {
       this.removeAttribute("variant");
     }
   }
+  /**
+   * Retrieves the value of the 'variant' attribute from the element.
+   * If the attribute is not set, it defaults to 'default'.
+   * @returns {string} The value of the 'variant' attribute or 'default' if not set.
+   */
   get variant() {
     return this.getAttribute("variant") || "default";
   }
@@ -195,7 +271,7 @@ class Input extends WJElement {
   draw() {
     let hasSlotStart = this.hasSlot(this, "start");
     let hasSlotEnd = this.hasSlot(this, "end");
-    let hasSlotError = this.hasSlot(this, "error");
+    this.hasSlot(this, "error");
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -222,21 +298,7 @@ class Input extends WJElement {
       }
     });
     let error = document.createElement("div");
-    error.classList.add("error-message");
-    error.setAttribute("part", "error");
-    let errorSlot = null;
-    if (hasSlotError) {
-      errorSlot = document.createElement("slot");
-      errorSlot.setAttribute("name", "error");
-      if (this.hasAttribute("error-inline")) {
-        native.appendChild(errorSlot);
-      } else {
-        error.appendChild(errorSlot);
-        wrapper.appendChild(error);
-      }
-    } else {
-      wrapper.appendChild(error);
-    }
+    error.setAttribute("slot", "error");
     let start = null;
     if (hasSlotStart) {
       start = document.createElement("slot");
@@ -253,14 +315,20 @@ class Input extends WJElement {
       wrapper.appendChild(start);
       native.classList.add("has-start");
     }
-    if (this.variant === "standard") {
-      if (this.label) native.appendChild(label);
-    } else {
-      inputWrapper.appendChild(label);
+    if (this.label) {
+      if (this.variant === "standard") {
+        native.append(label);
+      } else {
+        inputWrapper.appendChild(label);
+      }
     }
     inputWrapper.appendChild(input);
     wrapper.appendChild(inputWrapper);
     native.appendChild(wrapper);
+    let errorSlot = document.createElement("slot");
+    errorSlot.setAttribute("name", "error");
+    native.append(errorSlot);
+    this.append(error);
     if (this.clearable) {
       this.clear = document.createElement("wje-button");
       this.clear.classList.add("clear");
@@ -347,14 +415,14 @@ class Input extends WJElement {
     let hasSlotError = this.hasSlot(this, "error");
     if (hasSlotError) {
       const slot = this.querySelector("[slot='error']");
-      let errorMessage = slot.querySelector("[error-message]");
-      if (!errorMessage) {
+      let errorMessageEL = slot.querySelector("[error-message]");
+      if (!errorMessageEL) {
         const error = document.createElement("div");
         error.setAttribute("error-message", "");
-        slot.appendChild(error);
-        errorMessage = error;
+        slot.append(error);
+        errorMessageEL = error;
       }
-      errorMessage.textContent = this.internals.validationMessage;
+      errorMessageEL.textContent = this.internals.validationMessage;
     } else {
       this.errorMessage.textContent = this.internals.validationMessage;
     }
@@ -386,14 +454,14 @@ class Input extends WJElement {
     }
   }
   /**
-   * @summary Propagates the validation state of the input.
-   * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.
-   * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.
+   * Checks and updates the validation state of the component based on its current properties.
+   * If the component is invalid and a custom error display is enabled, it dispatches an 'invalid' event.
+   * @returns {void} This method does not return a value.
    */
   propagateValidation() {
-    this.invalid = !this.pristine && !this.internals.validity.valid;
-    if (this.invalid && this.customErrorDisplay) {
-      this.dispatchEvent(new Event("invalid"));
+    this.invalid = !this.pristine && !this.validity.valid;
+    if (this.invalid) {
+      event.dispatchCustomEvent(this, "invalid");
     }
   }
   /**