wj-elements 0.1.190 → 0.1.192

package/dist/dark.css

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

package/dist/{form-associated-element-CaIxmEod.js → form-associated-element-o0UjvdUp.js}

@@ -27,7 +27,6 @@ class FormAssociatedElement extends WJElement {
    * @returns {string} The type of the input.
    */
   get type() {
-    console.log("LOCAL NAME", this.localName, this.getAttribute("type"));
     return this.getAttribute("type");
   }
   /**
@@ -170,6 +169,11 @@ class FormAssociatedElement extends WJElement {
     }
     errorMessageEl.textContent = internals.validationMessage;
   }
+  /**
+   * Checks the validity of the input by invoking custom validation logic
+   * and then verifying against internal validation rules.
+   * @returns {boolean} Returns true if the input is valid according to both custom validation and internal validation rules, otherwise false.
+   */
   checkValidity() {
     this.validate();
     return this.internals.checkValidity();
@@ -239,4 +243,4 @@ __publicField(FormAssociatedElement, "formAssociated", true);
 export {
   FormAssociatedElement as F
 };
-//# sourceMappingURL=form-associated-element-CaIxmEod.js.map
+//# sourceMappingURL=form-associated-element-o0UjvdUp.js.map

package/dist/form-associated-element-o0UjvdUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated-element-o0UjvdUp.js","sources":["../packages/internals/form-associated-element.js"],"sourcesContent":["import { default as WJElement, event } from \"../wje-element/element.js\";\n\nexport class FormAssociatedElement extends WJElement {\n  static formAssociated = true;\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  /**\n   * Sets the 'name' attribute to the given value.\n   * @param {string} value The new value for the 'name' attribute.\n   */\n  set name(value) {\n    this.setAttribute('name', value);\n  }\n\n  /**\n   * Getter for the name attribute.\n   * @returns {string} The name of the input.\n   */\n  get name() {\n    return this.getAttribute('name');\n  }\n\n  /**\n   * Getter for the type attribute.\n   * @returns {string} The type of the input.\n   */\n  get type() {\n    return this.getAttribute(\"type\");\n  }\n\n  /**\n   * Sets or removes the 'required' attribute on the element.\n   * @param {boolean} value If true, adds the 'required' attribute. If false, removes the 'required' attribute.\n   */\n  set required(value) {\n    if (value) {\n      this.setAttribute('required', '');\n    } else {\n      this.removeAttribute('required');\n    }\n  }\n\n  /**\n   * Checks if the 'required' attribute is present on the element.\n   * @returns {boolean} `true` if the 'required' attribute is set, otherwise `false`.\n   */\n  get required() {\n    return this.hasAttribute('required');\n  }\n\n  /**\n   * Setter for the invalid attribute.\n   * @param {boolean} isInvalid Whether the input is invalid.\n   */\n  set invalid(isInvalid) {\n    if (isInvalid) this.setAttribute('invalid', '');\n    else this.removeAttribute('invalid');\n  }\n\n  /**\n   * Getter for the invalid attribute.\n   * @returns {boolean} Whether the attribute is present.\n   */\n  get invalid() {\n    return this.hasAttribute('invalid');\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   * Retrieves the form element associated with this object.\n   * @returns {HTMLFormElement|null} The associated form element, or null if there isn't one.\n   */\n  get form() {\n    return this.internals.form;\n  }\n\n  /**\n   * Retrieves the validity state of the element by returning the validity object from the internal element.\n   * The validity object provides information on whether the element satisfies its validation constraints.\n   * @returns {ValidityState} The validity state object representing the element's validation constraints.\n   */\n  get validity() {\n    return this.internals.validity;\n  }\n\n  /**\n   * Retrieves the current validation message associated with the element.\n   * @returns {string} The validation message that describes why the element's value fails validity checks.\n   */\n  get validationMessage() {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * Indicates whether the element is a candidate for constraint validation.\n   * @returns {boolean} Returns true if the element will be validated during constraint validation, false otherwise.\n   */\n  get willValidate() {\n    return this.internals.willValidate;\n  }\n\n  /**\n   * Validates the input element associated with the component and updates its validity state\n   * and error messages based on the user's input and the current validation rules.\n   * @returns {void} This method does not return a value. It modifies the validity state\n   * internally and sets appropriate validation messages.\n   */\n  validate() {\n    const validState = this.input.validity;\n\n    if (!validState.valid) {\n      for (let state in validState) {\n        const attr = `message-${state.toString()}`;\n\n        if (validState[state]) {\n          this.validationError = state.toString();\n          let errorMessage = this.message;\n\n          // TODO this take error messages based on lang from operating system of user  should we implement custom translations based on app language ?\n          if (!this.hasAttribute('message'))\n            errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;\n\n          this.internals.setValidity({ [this.validationError]: true }, errorMessage, this.input);\n        }\n      }\n    } else {\n      this.internals.setValidity({});\n    }\n  }\n\n  /**\n   * Propagates a validation event based on the validity state of the component.\n   *\n   * This method checks the validity status of the component and emits a custom\n   * event if the component is invalid. The event's name and additional details\n   * can be specified.\n   * @param {string} [eventName] The name of the event to dispatch when the component is invalid.\n   * @param {object} [detail] Additional detail to include in the dispatched event.\n   * @returns {void} This method does not return a value.\n   */\n  propagateValidation(eventName = 'invalid', detail = {}) {\n    const internals = this.internals;\n\n    this.invalid = !this.pristine && !internals.validity.valid;\n\n    if (this.invalid) {\n      event.dispatchCustomEvent(this, this.tagName.toLocaleLowerCase() + ':' + eventName, detail);\n    }\n  }\n\n  /**\n   * Displays an invalid message for the current element.\n   * If an error message element does not exist within the designated slot,\n   * it creates one and appends it to the slot. Updates the text content\n   * of the error message element with the validation message from the\n   * element's internals.\n   * @returns {void} This method does not return any value.\n   */\n  showInvalidMessage() {\n    const internals = this.internals;\n    const slot = this.querySelector(\"[slot='error']\");\n    let errorMessageEl = slot?.querySelector('[error-message]');\n\n    if (!errorMessageEl) {\n      const error = document.createElement('div');\n      error.setAttribute('error-message', '');\n      slot?.append(error);\n      errorMessageEl = error;\n    }\n\n    errorMessageEl.textContent = internals.validationMessage;\n  }\n\n  /**\n   * Checks the validity of the input by invoking custom validation logic\n   * and then verifying against internal validation rules.\n   * @returns {boolean} Returns true if the input is valid according to both custom validation and internal validation rules, otherwise false.\n   */\n  checkValidity() {\n    // zavolá tvoju vlastnú validáciu pred kontrolou internals\n    this.validate();\n    return this.internals.checkValidity();\n  }\n\n  /**\n   * Callback to handle the reset action for a form.\n   * Resets the value of the form control to its default value, updates the form value, and clears any validity states.\n   * @returns {void} Does not return a value.\n   */\n  formResetCallback() {\n    this.value = this.defaultValue;\n    this.internals.setFormValue(this.defaultValue);\n    this.internals.setValidity({});\n  }\n\n  /**\n   * Restores the form state by assigning the provided state value\n   * and updating the internal form value and validity.\n   * @param {object} state The state object containing the value to restore the form.\n   * @param {*} state.value The value to set for the form element.\n   * @returns {void} This method does not return any value.\n   */\n  formStateRestoreCallback(state) {\n    this.value = state.value;\n    this.internals.setFormValue(state.value);\n    this.internals.setValidity({});\n  }\n\n  /**\n   * Callback method to save the current state of a form.\n   * This method captures and returns the form's value property.\n   * @returns {object} An object containing the `value` property of the current form state.\n   */\n  formStateSaveCallback() {\n    return {\n      value: this.value\n    };\n  }\n\n  /**\n   * Toggles the disabled state of the component and updates corresponding attributes.\n   * @param {boolean} disabled Indicates whether the form should be marked as disabled.\n   * If true, the 'disabled' class is added, and the 'disabled' attribute is set.\n   * If false, both the class and attribute are removed.\n   * @returns {void}\n   */\n  formDisabledCallback(disabled) {\n    this.native?.classList.toggle('disabled', disabled);\n    this.toggleAttribute('disabled', disabled);\n  }\n\n  /**\n   * A lifecycle callback that is executed when the element is associated with a form.\n   * It updates the form's value field with the element's value and sets up an event\n   * listener to perform validation and propagate it whenever the form is submitted.\n   * @returns {void} Does not return any value.\n   */\n  formAssociatedCallback() {\n    if (this.form) {\n      this.internals.setFormValue(this.value);\n      this.form?.addEventListener('submit', () => {\n        this.validate();\n        this.propagateValidation();\n      });\n    }\n  }\n}"],"names":[],"mappings":";;;;;AAEO,MAAM,8BAA8B,UAAU;AAAA,EAGnD,cAAc;AACZ,UAAO;AACP,SAAK,YAAY,KAAK,gBAAiB;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,KAAK,OAAO;AACd,SAAK,aAAa,QAAQ,KAAK;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,OAAO;AACT,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,OAAO;AACT,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,SAAS,OAAO;AAClB,QAAI,OAAO;AACT,WAAK,aAAa,YAAY,EAAE;AAAA,IACtC,OAAW;AACL,WAAK,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,WAAW;AACb,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,QAAQ,WAAW;AACrB,QAAI,UAAW,MAAK,aAAa,WAAW,EAAE;AAAA,QACzC,MAAK,gBAAgB,SAAS;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,UAAU;AACZ,WAAO,KAAK,aAAa,SAAS;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,SAAS,OAAO;AAClB,QAAI,OAAO;AACT,WAAK,aAAa,YAAY,EAAE;AAAA,IACtC,OAAW;AACL,WAAK,gBAAgB,UAAU;AAAA,IACrC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,WAAW;AACb,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,OAAO;AACT,WAAO,KAAK,UAAU;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOE,IAAI,WAAW;AACb,WAAO,KAAK,UAAU;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,oBAAoB;AACtB,WAAO,KAAK,UAAU;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,IAAI,eAAe;AACjB,WAAO,KAAK,UAAU;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQE,WAAW;AACT,UAAM,aAAa,KAAK,MAAM;AAE9B,QAAI,CAAC,WAAW,OAAO;AACrB,eAAS,SAAS,YAAY;AAC5B,cAAM,OAAO,WAAW,MAAM,SAAU,CAAA;AAExC,YAAI,WAAW,KAAK,GAAG;AACrB,eAAK,kBAAkB,MAAM,SAAU;AACvC,cAAI,eAAe,KAAK;AAGxB,cAAI,CAAC,KAAK,aAAa,SAAS;AAC9B,2BAAe,KAAK,aAAa,IAAI,IAAI,KAAK,aAAa,IAAI,IAAI,KAAK,MAAM;AAEhF,eAAK,UAAU,YAAY,EAAE,CAAC,KAAK,eAAe,GAAG,QAAQ,cAAc,KAAK,KAAK;AAAA,QAC/F;AAAA,MACA;AAAA,IACA,OAAW;AACL,WAAK,UAAU,YAAY,EAAE;AAAA,IACnC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYE,oBAAoB,YAAY,WAAW,SAAS,CAAA,GAAI;AACtD,UAAM,YAAY,KAAK;AAEvB,SAAK,UAAU,CAAC,KAAK,YAAY,CAAC,UAAU,SAAS;AAErD,QAAI,KAAK,SAAS;AAChB,YAAM,oBAAoB,MAAM,KAAK,QAAQ,sBAAsB,MAAM,WAAW,MAAM;AAAA,IAChG;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUE,qBAAqB;AACnB,UAAM,YAAY,KAAK;AACvB,UAAM,OAAO,KAAK,cAAc,gBAAgB;AAChD,QAAI,iBAAiB,6BAAM,cAAc;AAEzC,QAAI,CAAC,gBAAgB;AACnB,YAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,YAAM,aAAa,iBAAiB,EAAE;AACtC,mCAAM,OAAO;AACb,uBAAiB;AAAA,IACvB;AAEI,mBAAe,cAAc,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOE,gBAAgB;AAEd,SAAK,SAAU;AACf,WAAO,KAAK,UAAU,cAAe;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOE,oBAAoB;AAClB,SAAK,QAAQ,KAAK;AAClB,SAAK,UAAU,aAAa,KAAK,YAAY;AAC7C,SAAK,UAAU,YAAY,EAAE;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASE,yBAAyB,OAAO;AAC9B,SAAK,QAAQ,MAAM;AACnB,SAAK,UAAU,aAAa,MAAM,KAAK;AACvC,SAAK,UAAU,YAAY,EAAE;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOE,wBAAwB;AACtB,WAAO;AAAA,MACL,OAAO,KAAK;AAAA,IACb;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASE,qBAAqB,UAAU;;AAC7B,eAAK,WAAL,mBAAa,UAAU,OAAO,YAAY;AAC1C,SAAK,gBAAgB,YAAY,QAAQ;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQE,yBAAyB;;AACvB,QAAI,KAAK,MAAM;AACb,WAAK,UAAU,aAAa,KAAK,KAAK;AACtC,iBAAK,SAAL,mBAAW,iBAAiB,UAAU,MAAM;AAC1C,aAAK,SAAU;AACf,aAAK,oBAAqB;AAAA,MAClC;AAAA,IACA;AAAA,EACA;AACA;AA1QE,cADW,uBACJ,kBAAiB;"}

package/dist/light.css

@@ -316,6 +316,10 @@
     --wje-checkbox-border-radius: var(--wje-border-radius-medium);
 
     /* Chip */
+    --wje-chip-background: var(--wje-color-contrast-3);
+    --wje-chip-color: var(--wje-color-contrast-11);
+    --wje-chip-background-hover: var(--wje-color-contrast-4);
+    --wje-chip-color-hover: var(--wje-color-contrast-11);
     --wje-chip-border-radius: 100px;
     --wje-chip-margin: 0;
 
@@ -392,7 +396,7 @@
     --wje-input-label-display: block;
     --wje-input-label-margin: 0;
     --wje-input-label-padding: 0;
-    --wje-input-label-line-height: 21px;
+    --wje-input-label-line-height: var(--wje-line-height-normal);
     --wje-input-label-font-size: var(--wje-font-size);
     --wje-input-required-symbol: '*';
 
@@ -525,6 +529,11 @@
     --wje-select-find-margin-block: var(--wje-spacing-x-small);
     --wje-select-find-width: calc(100% - var(--wje-select-find-margin-inline) * 2);
 
+    /* Sliding - Container */
+    --wje-sliding-container-background: transparent;
+    --wje-sliding-container-box-shadow: none;
+    --wje-sliding-container-border-radius: var(--wje-border-radius-large);
+
     /* Status */
     --wje-status-size: var(--wje-size-small);
 

package/dist/packages/index.d.ts

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

package/dist/packages/internals/form-associated-element.d.ts

@@ -96,6 +96,11 @@ export class FormAssociatedElement extends WJElement {
      * @returns {void} This method does not return any value.
      */
     showInvalidMessage(): void;
+    /**
+     * Checks the validity of the input by invoking custom validation logic
+     * and then verifying against internal validation rules.
+     * @returns {boolean} Returns true if the input is valid according to both custom validation and internal validation rules, otherwise false.
+     */
     checkValidity(): boolean;
     /**
      * Callback to handle the reset action for a form.

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

@@ -64,11 +64,6 @@ export class Select extends FormAssociatedElement {
      * @description A reference to the input element, initially null.
      */
     input: HTMLElement | null;
-    /**
-     * @type {HTMLElement|null}
-     * @description A reference to the options wrapper element, initially null.
-     */
-    optionsWrapper: HTMLElement | null;
     /**
      * @type {HTMLElement|null}
      * @description A reference to the chips element, initially null.
@@ -85,7 +80,6 @@ export class Select extends FormAssociatedElement {
      */
     list: HTMLElement | null;
     _value: any[];
-    _selected: any[];
     _selectedOptions: any[];
     /**
      * An object representing component dependencies with their respective classes.
@@ -112,26 +106,6 @@ export class Select extends FormAssociatedElement {
         'wje-options': typeof Options;
         'wje-checkbox': typeof Checkbox;
     };
-    /**
-     * Sets the label value.
-     * @param {Array} value The selected value to set.
-     */
-    set selected(value: any[]);
-    /**
-     * Returns the selected value.
-     * @returns {Array} The selected value.
-     */
-    get selected(): any[];
-    /**
-     * Sets the `validate-on-change` attribute on the element. When the attribute is present, it typically indicates that validation should occur when the value of the input changes.
-     * @param {boolean} value A boolean indicating whether to enable or disable the `validate-on-change` attribute.
-     */
-    set validateOnChange(value: boolean);
-    /**
-     * Getter for the validateOnChange attribute.
-     * @returns {boolean} Whether the attribute is present.
-     */
-    get validateOnChange(): boolean;
     /**
      * Sets the maximum number of options allowed.
      * @param { number | object} value The value to set as the maximum number of options.
@@ -231,79 +205,80 @@ export class Select extends FormAssociatedElement {
      */
     draw(): DocumentFragment;
     findEl: HTMLElement;
+    displayInput: HTMLInputElement;
     /**
-     * Performs actions and binds events after the component's markup and state are initialized.
-     * Actions include setting up event listeners, managing option elements, handling focus and blur behaviors,
-     * synchronizing the selected options, and managing a find functionality for filtering options.
-     * @returns {void} Does not return a value. The method operates by updating the state and behavior of the component.
+     * Executes post-render logic for the custom element.
+     * This includes validation, event listener registration, managing custom attributes, and
+     * handling options initialization for the component.
+     * @returns {void} This method does not return any value.
      */
     afterDraw(): void;
     pristine: boolean;
     /**
-     * Handles the option change event.
-     * @param {Event} e The event.
+     * Handles the change event for an option element within a select-like component.
+     * This method processes user interactions with options and updates the state of the component,
+     * including selection management, validation, and UI updates. Behavior differs based on
+     * whether the component supports multiple selections.
+     * Key functionality:
+     * - Prevents the default behavior, event propagation, and immediate propagation of the event.
+     * - Retrieves all options within the component.
+     * - If the component doesn't support multiple selection:
+     *   - Marks only the clicked option as selected and deselects others.
+     *   - Hides the option popup.
+     * - If the component supports multiple selection:
+     *   - Processes the clicked option without deselecting others.
+     * - Updates the selected options and triggers validation.
+     * - Marks the form state as non-pristine.
+     * - Propagates the validation state to other relevant parts of the component or system.
+     * @param {Event} e The event object representing the option change interaction.
      */
     optionChange: (e: Event) => void;
     /**
-     * Handles the selection and deselection of an option element.
-     * @param {HTMLElement} option The option element that was clicked.
-     * @param {boolean} [multiple] Indicates whether multiple selection is allowed.
+     * Handles the logic for processing the selection state of a clicked option element.
+     * @function processClickedOption
+     * @param {Element} option The option element that is clicked.
+     * @param {boolean} [multiple] A Boolean indicating whether multiple options can be selected. Defaults to false.
+     * Changes the selected state of the passed option and updates the selected options list.
+     * Checks if the option already has a "selected" attribute, toggles its state,
+     * and updates the internal selected options.
      */
-    processClickedOption: (option: HTMLElement, multiple?: boolean) => void;
-    /**
-     * Filters out a specified option from the `selectedOptions` array.
-     * This function removes an option from the `selectedOptions` array if its value
-     * matches the value of the option provided as an argument. It allows for dynamically
-     * updating the selected options by excluding the specified option.
-     * @param {object} option The option to be removed from the `selectedOptions` array.
-     * Should be an object containing a `value` property that is compared to the
-     * `value` property of objects in the `selectedOptions` array.
-     */
-    filterOutOption: (option: object) => void;
+    processClickedOption: (option: Element, multiple?: boolean) => void;
     /**
      * Returns all the options as HTML.
      * @returns {NodeList} The options as HTML.
      */
     getAllOptions(): NodeList;
     /**
-     * Handles the selection change.
-     * @param {Element[]} options The option that changed.
-     * @param {number} length The length of the selected options.
+     * Handles changes in the selection for a component, updating internal values, input fields,
+     * and visual presentation (like chips or slots) as per the given selection options.
+     * @param {Array|null} options The collection of selected option elements. If null, no options are selected.
+     * @param {number} length The total number of selected options.
+     * @returns {void}
      */
-    selectionChanged(options?: Element[], length?: number): void;
+    selectionChanged(options?: any[] | null, length?: number): void;
     /**
-     * Updates the selected options and their corresponding chips.
-     * @param {boolean} [silence] Determines whether to suppress the "wje-select:change" event.
-     * @returns {void}
-     * @description
-     * This method fetches the currently selected options and updates the `selectedOptions` array.
-     * It clears and rebuilds the chips representing the selected items in the UI.
-     * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.
-     * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.
-     * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.
-     * @example
-     * // Call the method and allow event dispatch
-     * selections();
-     * @example
-     * // Call the method without dispatching the event
-     * selections(true);
+     * Handles the logic for updating selections based on the current selected options,
+     * updating chips content, and dispatching change events if necessary.
+     * @param {boolean} [silence] If true, suppresses the dispatch of a custom change event.
+     * @returns {void} This method does not return a value.
      */
     selections(silence?: boolean): void;
     /**
-     * Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.
-     * - If the number of selected items equals the maximum allowed, the counter element is removed.
-     * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.
+     * Updates the counter element to reflect the current state of selected values relative to the maximum allowed options.
+     * If the maximum options are selected, the counter element is removed. If it does not already exist and needs to be displayed, it is created.
+     * @returns {void} Does not return a value.
      */
     counter(): void;
     /**
-     * Returns a chip element.
-     * @param {Element} option The option to get the chip for.
-     * @returns {Element} The chip element.
+     * Creates and returns a chip element with specified properties and a label.
+     * @param {object} option The configuration object for the chip. Typically includes properties such as value and textContent to set up the chip's label and data.
+     * @returns {HTMLElement} The newly created chip element with a label and default properties.
      */
-    getChip(option: Element): Element;
+    getChip(option: object): HTMLElement;
     /**
-     * Handles the chip remove event.
-     * @param {Event} e The event.
+     * Handles the removal of a chip element from the DOM and updates the related state.
+     * @param {Event} e The event object triggered by the chip removal action.
+     * The target of the event is expected to be the chip element itself.
      */
     removeChip: (e: Event) => void;
     /**
@@ -325,44 +300,59 @@ export class Select extends FormAssociatedElement {
      */
     htmlSelectedItem(item: any): any;
     /**
-     * Adds an option to the select element.
-     * @param {any} optionData The data for the option to be added.
-     * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.
-     * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.
+     * Adds a new option to the component.
+     * @param {object} optionData The data used to create the new option.
+     * @param {boolean} [silent] Whether the addition should trigger events or not.
+     * @param {object} [map] Mapping of keys to identify value and text in the optionData.
+     * @param {string} [map.value] The key in optionData that represents the value of the option.
+     * @param {string} [map.text] The key in optionData that represents the text of the option.
+     * @returns {void}
      */
-    addOption(optionData: any, silent?: boolean, map?: object): void;
-    /**
-     * Adds options to the select element.
-     * @param {Array | object} optionsData The options data to be added. Can be an array of objects or a single object.
-     * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.
-     * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: "value", text: "text" }.
+    addOption(optionData: object, silent?: boolean, map?: {
+        value?: string;
+        text?: string;
+    }): void;
+    /**
+     * Adds one or more options to a collection. If the input is an array, it adds each option within the array.
+     * Otherwise, it adds a single option.
+     * @param {Array | object} optionsData The data representing the options to be added. It can be a single object or an array of objects.
+     * @param {boolean} [silent] Optional flag to determine if events or notifications should be suppressed while adding options.
+     * @param {object} [map] An optional mapping object specifying how to map data properties to value and text for the options.
+     * @param {string} [map.value] The property in the optionsData that represents the value of the option.
+     * @param {string} [map.text] The property in the optionsData that represents the text of the option.
+     * @returns {void}
      */
-    addOptions(optionsData: any[] | object, silent?: boolean, map?: object): void;
+    addOptions(optionsData: any[] | object, silent?: boolean, map?: {
+        value?: string;
+        text?: string;
+    }): void;
     /**
-     * Selects an option with the specified value.
+     * Selects an option from the available options within the component.
      * @param {string} value The value of the option to be selected.
-     * @param {boolean} [silent] Whether to suppress firing events.
+     * @param {boolean} [silent] Determines whether the selection should trigger notification or updates. Defaults to false.
+     * @returns {void} Does not return a value.
      */
     selectOption(value: string, silent?: boolean): void;
     /**
-     * Selects one or multiple options in the select element.
-     * @param {Array|any} values The value(s) of the option(s) to be selected.
-     * @param {boolean} [silent] Whether to trigger the change event or not.
+     * Selects multiple options based on the provided values. If a single value is provided, it selects that option.
+     * If an array of values is provided, it iterates through the array and selects each option.
+     * @param {any|any[]} values A single value or an array of values to be selected.
+     * @param {boolean} [silent] Determines whether the selection action should occur silently without triggering other side effects or events.
+     * @returns {void} This method does not return a value.
      */
-    selectOptions(values: any[] | any, silent?: boolean): void;
+    selectOptions(values: any | any[], silent?: boolean): void;
     /**
-     * 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}
+     * Clones and appends an icon with the "check" slot to the specified option element.
+     * @param {HTMLElement} option The target HTML element to which the cloned "check" icon will be appended.
+     * @returns {void} This method does not return a value, but it modifies the DOM by appending a cloned "check" icon to the provided option element.
      */
     optionCheckSlot(option: HTMLElement): void;
     /**
-     * Checks if all elements in the `elements` array are present in the `options` array based on their `option` property.
-     * @param {Array} elements The array of elements to check. Each element should have an `option` property.
-     * @param {Array} options The array of options to verify against.
-     * @returns {boolean} Returns true if all elements in the `elements` array are found within the `options` array, otherwise returns false.
+     * Clears all selected options and resets selections.
+     * The method ensures that all options are deselected, updates the internal state, validates the selections,
+     * propagates the validation status, and indicates invalid state if necessary.
+     * @returns {void} No value is returned by this method.
      */
-    areAllElementsInOptions(elements: any[], options: any[]): boolean;
     clearSelections(): void;
     #private;
 }

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

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