@coreui/coreui 5.5.0 → 5.6.0

package/dist/js/coreui.js

@@ -1,6 +1,6 @@
 /*!
-  * CoreUI v5.5.0 (https://coreui.io)
-  * Copyright 2025 The CoreUI Team (https://github.com/orgs/coreui/people)
+  * CoreUI v5.6.0 (https://coreui.io)
+  * Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
   * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
   */
 (function (global, factory) {
@@ -684,7 +684,7 @@
    * Constants
    */
 
-  const VERSION = '5.5.0';
+  const VERSION = '5.6.0';
 
   /**
    * Class definition
@@ -878,11 +878,11 @@
    * Constants
    */
 
-  const NAME$h = 'alert';
-  const DATA_KEY$c = 'coreui.alert';
-  const EVENT_KEY$d = `.${DATA_KEY$c}`;
-  const EVENT_CLOSE = `close${EVENT_KEY$d}`;
-  const EVENT_CLOSED = `closed${EVENT_KEY$d}`;
+  const NAME$j = 'alert';
+  const DATA_KEY$e = 'coreui.alert';
+  const EVENT_KEY$f = `.${DATA_KEY$e}`;
+  const EVENT_CLOSE = `close${EVENT_KEY$f}`;
+  const EVENT_CLOSED = `closed${EVENT_KEY$f}`;
   const CLASS_NAME_FADE$5 = 'fade';
   const CLASS_NAME_SHOW$a = 'show';
 
@@ -893,7 +893,7 @@
   class Alert extends BaseComponent {
     // Getters
     static get NAME() {
-      return NAME$h;
+      return NAME$j;
     }
 
     // Public
@@ -956,13 +956,13 @@
    * Constants
    */
 
-  const NAME$g = 'button';
-  const DATA_KEY$b = 'coreui.button';
-  const EVENT_KEY$c = `.${DATA_KEY$b}`;
-  const DATA_API_KEY$8 = '.data-api';
-  const CLASS_NAME_ACTIVE$4 = 'active';
+  const NAME$i = 'button';
+  const DATA_KEY$d = 'coreui.button';
+  const EVENT_KEY$e = `.${DATA_KEY$d}`;
+  const DATA_API_KEY$a = '.data-api';
+  const CLASS_NAME_ACTIVE$5 = 'active';
   const SELECTOR_DATA_TOGGLE$6 = '[data-coreui-toggle="button"]';
-  const EVENT_CLICK_DATA_API$8 = `click${EVENT_KEY$c}${DATA_API_KEY$8}`;
+  const EVENT_CLICK_DATA_API$8 = `click${EVENT_KEY$e}${DATA_API_KEY$a}`;
 
   /**
    * Class definition
@@ -971,13 +971,13 @@
   class Button extends BaseComponent {
     // Getters
     static get NAME() {
-      return NAME$g;
+      return NAME$i;
     }
 
     // Public
     toggle() {
       // Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method
-      this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE$4));
+      this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE$5));
     }
 
     // Static
@@ -1023,23 +1023,23 @@
    * Constants
    */
 
-  const NAME$f = 'swipe';
-  const EVENT_KEY$b = '.coreui.swipe';
-  const EVENT_TOUCHSTART = `touchstart${EVENT_KEY$b}`;
-  const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY$b}`;
-  const EVENT_TOUCHEND = `touchend${EVENT_KEY$b}`;
-  const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY$b}`;
-  const EVENT_POINTERUP = `pointerup${EVENT_KEY$b}`;
+  const NAME$h = 'swipe';
+  const EVENT_KEY$d = '.coreui.swipe';
+  const EVENT_TOUCHSTART = `touchstart${EVENT_KEY$d}`;
+  const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY$d}`;
+  const EVENT_TOUCHEND = `touchend${EVENT_KEY$d}`;
+  const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY$d}`;
+  const EVENT_POINTERUP = `pointerup${EVENT_KEY$d}`;
   const POINTER_TYPE_TOUCH = 'touch';
   const POINTER_TYPE_PEN = 'pen';
   const CLASS_NAME_POINTER_EVENT = 'pointer-event';
   const SWIPE_THRESHOLD = 40;
-  const Default$e = {
+  const Default$g = {
     endCallback: null,
     leftCallback: null,
     rightCallback: null
   };
-  const DefaultType$e = {
+  const DefaultType$g = {
     endCallback: '(function|null)',
     leftCallback: '(function|null)',
     rightCallback: '(function|null)'
@@ -1064,18 +1064,18 @@
 
     // Getters
     static get Default() {
-      return Default$e;
+      return Default$g;
     }
     static get DefaultType() {
-      return DefaultType$e;
+      return DefaultType$g;
     }
     static get NAME() {
-      return NAME$f;
+      return NAME$h;
     }
 
     // Public
     dispose() {
-      EventHandler.off(this._element, EVENT_KEY$b);
+      EventHandler.off(this._element, EVENT_KEY$d);
     }
 
     // Private
@@ -1146,10 +1146,10 @@
    * Constants
    */
 
-  const NAME$e = 'carousel';
-  const DATA_KEY$a = 'coreui.carousel';
-  const EVENT_KEY$a = `.${DATA_KEY$a}`;
-  const DATA_API_KEY$7 = '.data-api';
+  const NAME$g = 'carousel';
+  const DATA_KEY$c = 'coreui.carousel';
+  const EVENT_KEY$c = `.${DATA_KEY$c}`;
+  const DATA_API_KEY$9 = '.data-api';
   const ARROW_LEFT_KEY$1 = 'ArrowLeft';
   const ARROW_RIGHT_KEY$1 = 'ArrowRight';
   const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
@@ -1158,16 +1158,16 @@
   const ORDER_PREV = 'prev';
   const DIRECTION_LEFT = 'left';
   const DIRECTION_RIGHT = 'right';
-  const EVENT_SLIDE = `slide${EVENT_KEY$a}`;
-  const EVENT_SLID = `slid${EVENT_KEY$a}`;
-  const EVENT_KEYDOWN$1 = `keydown${EVENT_KEY$a}`;
-  const EVENT_MOUSEENTER$1 = `mouseenter${EVENT_KEY$a}`;
-  const EVENT_MOUSELEAVE$1 = `mouseleave${EVENT_KEY$a}`;
-  const EVENT_DRAG_START = `dragstart${EVENT_KEY$a}`;
-  const EVENT_LOAD_DATA_API$5 = `load${EVENT_KEY$a}${DATA_API_KEY$7}`;
-  const EVENT_CLICK_DATA_API$7 = `click${EVENT_KEY$a}${DATA_API_KEY$7}`;
+  const EVENT_SLIDE = `slide${EVENT_KEY$c}`;
+  const EVENT_SLID = `slid${EVENT_KEY$c}`;
+  const EVENT_KEYDOWN$1 = `keydown${EVENT_KEY$c}`;
+  const EVENT_MOUSEENTER$1 = `mouseenter${EVENT_KEY$c}`;
+  const EVENT_MOUSELEAVE$1 = `mouseleave${EVENT_KEY$c}`;
+  const EVENT_DRAG_START = `dragstart${EVENT_KEY$c}`;
+  const EVENT_LOAD_DATA_API$5 = `load${EVENT_KEY$c}${DATA_API_KEY$9}`;
+  const EVENT_CLICK_DATA_API$7 = `click${EVENT_KEY$c}${DATA_API_KEY$9}`;
   const CLASS_NAME_CAROUSEL = 'carousel';
-  const CLASS_NAME_ACTIVE$3 = 'active';
+  const CLASS_NAME_ACTIVE$4 = 'active';
   const CLASS_NAME_SLIDE = 'slide';
   const CLASS_NAME_END = 'carousel-item-end';
   const CLASS_NAME_START = 'carousel-item-start';
@@ -1184,7 +1184,7 @@
     [ARROW_LEFT_KEY$1]: DIRECTION_RIGHT,
     [ARROW_RIGHT_KEY$1]: DIRECTION_LEFT
   };
-  const Default$d = {
+  const Default$f = {
     interval: 5000,
     keyboard: true,
     pause: 'hover',
@@ -1192,7 +1192,7 @@
     touch: true,
     wrap: true
   };
-  const DefaultType$d = {
+  const DefaultType$f = {
     interval: '(number|boolean)',
     // TODO:v6 remove boolean support
     keyboard: 'boolean',
@@ -1223,13 +1223,13 @@
 
     // Getters
     static get Default() {
-      return Default$d;
+      return Default$f;
     }
     static get DefaultType() {
-      return DefaultType$d;
+      return DefaultType$f;
     }
     static get NAME() {
-      return NAME$e;
+      return NAME$g;
     }
 
     // Public
@@ -1356,11 +1356,11 @@
         return;
       }
       const activeIndicator = SelectorEngine.findOne(SELECTOR_ACTIVE, this._indicatorsElement);
-      activeIndicator.classList.remove(CLASS_NAME_ACTIVE$3);
+      activeIndicator.classList.remove(CLASS_NAME_ACTIVE$4);
       activeIndicator.removeAttribute('aria-current');
       const newActiveIndicator = SelectorEngine.findOne(`[data-coreui-slide-to="${index}"]`, this._indicatorsElement);
       if (newActiveIndicator) {
-        newActiveIndicator.classList.add(CLASS_NAME_ACTIVE$3);
+        newActiveIndicator.classList.add(CLASS_NAME_ACTIVE$4);
         newActiveIndicator.setAttribute('aria-current', 'true');
       }
     }
@@ -1413,8 +1413,8 @@
       nextElement.classList.add(directionalClassName);
       const completeCallBack = () => {
         nextElement.classList.remove(directionalClassName, orderClassName);
-        nextElement.classList.add(CLASS_NAME_ACTIVE$3);
-        activeElement.classList.remove(CLASS_NAME_ACTIVE$3, orderClassName, directionalClassName);
+        nextElement.classList.add(CLASS_NAME_ACTIVE$4);
+        activeElement.classList.remove(CLASS_NAME_ACTIVE$4, orderClassName, directionalClassName);
         this._isSliding = false;
         triggerEvent(EVENT_SLID);
       };
@@ -1507,6 +1507,826 @@
 
   defineJQueryPlugin(Carousel);
 
+  /**
+   * --------------------------------------------------------------------------
+   * CoreUI chip.js
+   * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+   * --------------------------------------------------------------------------
+   */
+
+
+  /**
+   * Constants
+   */
+
+  const NAME$f = 'chip';
+  const DATA_KEY$b = 'coreui.chip';
+  const EVENT_KEY$b = `.${DATA_KEY$b}`;
+  const DATA_API_KEY$8 = '.data-api';
+  const EVENT_REMOVE$1 = `remove${EVENT_KEY$b}`;
+  const EVENT_REMOVED = `removed${EVENT_KEY$b}`;
+  const EVENT_SELECT$1 = `select${EVENT_KEY$b}`;
+  const EVENT_SELECTED = `selected${EVENT_KEY$b}`;
+  const EVENT_DESELECT = `deselect${EVENT_KEY$b}`;
+  const EVENT_DESELECTED = `deselected${EVENT_KEY$b}`;
+  const SELECTOR_CHIP_REMOVE$1 = '.chip-remove';
+  const SELECTOR_DATA_CHIP = '[data-coreui-chip]';
+  const SELECTOR_FOCUSABLE_ITEMS$1 = '.chip:not(.disabled)';
+  const CLASS_NAME_CHIP_CLICKABLE = 'chip-clickable';
+  const CLASS_NAME_CHIP_REMOVE = 'chip-remove';
+  const CLASS_NAME_ACTIVE$3 = 'active';
+  const CLASS_NAME_DISABLED$1 = 'disabled';
+  const DEFAULT_REMOVE_ICON$1 = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>';
+  const Default$e = {
+    ariaRemoveLabel: 'Remove',
+    disabled: false,
+    removable: false,
+    removeIcon: DEFAULT_REMOVE_ICON$1,
+    selectable: false,
+    selected: false
+  };
+  const DefaultType$e = {
+    ariaRemoveLabel: 'string',
+    disabled: 'boolean',
+    removable: 'boolean',
+    removeIcon: 'string',
+    selectable: 'boolean',
+    selected: 'boolean'
+  };
+
+  /**
+   * Class definition
+   */
+
+  class Chip extends BaseComponent {
+    constructor(element, config) {
+      super(element, config);
+      this._disabled = this._config.disabled || this._element.classList.contains(CLASS_NAME_DISABLED$1);
+      this._selected = this._config.selected || this._element.classList.contains(CLASS_NAME_ACTIVE$3);
+      this._ensureRemoveButton();
+      this._applyState();
+      if (this._config.selectable || this._config.removable) {
+        this._makeFocusable();
+      }
+      this._addEventListeners();
+    }
+
+    // Getters
+    static get Default() {
+      return Default$e;
+    }
+    static get DefaultType() {
+      return DefaultType$e;
+    }
+    static get NAME() {
+      return NAME$f;
+    }
+
+    // Public
+    remove() {
+      const removeEvent = EventHandler.trigger(this._element, EVENT_REMOVE$1);
+      if (removeEvent.defaultPrevented) {
+        return;
+      }
+      this._destroyElement();
+    }
+    toggle() {
+      if (!this._config.selectable) {
+        return;
+      }
+      if (this._selected) {
+        this.deselect();
+        return;
+      }
+      this.select();
+    }
+    select() {
+      if (!this._config.selectable) {
+        return;
+      }
+      if (this._selected) {
+        return;
+      }
+      const selectEvent = EventHandler.trigger(this._element, EVENT_SELECT$1);
+      if (selectEvent.defaultPrevented) {
+        return;
+      }
+      this._selected = true;
+      this._applyState();
+      EventHandler.trigger(this._element, EVENT_SELECTED);
+    }
+    deselect() {
+      if (!this._config.selectable) {
+        return;
+      }
+      if (!this._selected) {
+        return;
+      }
+      const deselectEvent = EventHandler.trigger(this._element, EVENT_DESELECT);
+      if (deselectEvent.defaultPrevented) {
+        return;
+      }
+      this._selected = false;
+      this._applyState();
+      EventHandler.trigger(this._element, EVENT_DESELECTED);
+    }
+
+    // Private
+    _addEventListeners() {
+      EventHandler.on(this._element, 'keydown', event => this._handleKeydown(event));
+      EventHandler.on(this._element, 'click', event => {
+        if (this._disabled) {
+          return;
+        }
+        if (event.target.closest(SELECTOR_CHIP_REMOVE$1)) {
+          return;
+        }
+        this.toggle();
+      });
+      EventHandler.on(this._element, 'click', SELECTOR_CHIP_REMOVE$1, event => {
+        event.stopPropagation();
+        this.remove();
+      });
+    }
+    _applyState() {
+      if (!this._disabled && (this._config.clickable || this._config.selectable)) {
+        this._element.classList.add(CLASS_NAME_CHIP_CLICKABLE);
+      }
+      if (this._disabled) {
+        this._element.classList.add(CLASS_NAME_DISABLED$1);
+        this._element.setAttribute('aria-disabled', 'true');
+      } else {
+        this._element.classList.remove(CLASS_NAME_DISABLED$1);
+        if (this._element.getAttribute('aria-disabled') === 'true') {
+          this._element.setAttribute('aria-disabled', 'false');
+        }
+      }
+      if (this._config.selectable) {
+        this._element.classList.toggle(CLASS_NAME_ACTIVE$3, this._selected);
+        this._element.setAttribute('aria-selected', this._selected ? 'true' : 'false');
+      } else {
+        this._element.classList.remove(CLASS_NAME_ACTIVE$3);
+        if (this._element.getAttribute('aria-selected') === 'true') {
+          this._element.setAttribute('aria-selected', 'false');
+        }
+      }
+    }
+    _createRemoveButton() {
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = CLASS_NAME_CHIP_REMOVE;
+      button.setAttribute('aria-label', this._config.ariaRemoveLabel);
+      button.setAttribute('tabindex', '-1'); // Not in tab order, chips handle keyboard
+      button.innerHTML = this._config.removeIcon;
+      return button;
+    }
+    _ensureRemoveButton() {
+      if (!this._config.removable) {
+        return;
+      }
+      if (SelectorEngine.findOne(SELECTOR_CHIP_REMOVE$1, this._element)) {
+        return;
+      }
+      this._element.append(this._createRemoveButton());
+    }
+    _makeFocusable() {
+      if (this._element.hasAttribute('tabindex') || this._disabled) {
+        return;
+      }
+      this._element.setAttribute('tabindex', '0');
+    }
+    _handleKeydown(event) {
+      const {
+        key
+      } = event;
+      if (this._disabled) {
+        return;
+      }
+      switch (key) {
+        case 'Enter':
+        case ' ':
+        case 'Spacebar':
+          {
+            if (!this._config.selectable) {
+              return;
+            }
+            event.preventDefault();
+            this.toggle();
+            break;
+          }
+        case 'Backspace':
+        case 'Delete':
+          {
+            if (this._config.removable) {
+              event.preventDefault();
+              const sibling = this._getFocusableSibling(false) || this._getFocusableSibling(true);
+              sibling == null || sibling.focus();
+              this.remove();
+            }
+            break;
+          }
+        case 'ArrowLeft':
+          {
+            event.preventDefault();
+            const chip = this._getFocusableSibling(false);
+            chip == null || chip.focus();
+            break;
+          }
+        case 'ArrowRight':
+          {
+            event.preventDefault();
+            const chip = this._getFocusableSibling(true);
+            chip == null || chip.focus();
+            break;
+          }
+        case 'Home':
+          {
+            event.preventDefault();
+            this._navigateToEdge(0);
+            break;
+          }
+        case 'End':
+          {
+            event.preventDefault();
+            this._navigateToEdge(-1);
+            break;
+          }
+
+        // No default
+      }
+    }
+    _getFocusableSibling(shouldGetNext) {
+      const chips = SelectorEngine.find(SELECTOR_FOCUSABLE_ITEMS$1, this._element.parentElement);
+      const sibling = getNextActiveElement(chips, this._element, shouldGetNext, !chips.includes(this._element));
+      return sibling === this._element ? null : sibling;
+    }
+    _navigateToEdge(targetIndex) {
+      const chips = SelectorEngine.find(SELECTOR_FOCUSABLE_ITEMS$1, this._element.parentElement);
+      if (chips.length === 0) {
+        return;
+      }
+      const targetChip = chips.at(targetIndex);
+      targetChip == null || targetChip.focus();
+    }
+    _destroyElement() {
+      EventHandler.trigger(this._element, EVENT_REMOVED);
+      this._element.remove();
+      this.dispose();
+    }
+
+    // Static
+    static chipInterface(element, config) {
+      const data = Chip.getOrCreateInstance(element, config);
+      if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`);
+        }
+        data[config]();
+      }
+    }
+    static jQueryInterface(config) {
+      return this.each(function () {
+        const data = Chip.getOrCreateInstance(this);
+        if (typeof config !== 'string') {
+          return;
+        }
+        if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
+          throw new TypeError(`No method named "${config}"`);
+        }
+        data[config](this);
+      });
+    }
+  }
+
+  /**
+   * Data API implementation
+   */
+
+  EventHandler.on(document, `DOMContentLoaded${EVENT_KEY$b}${DATA_API_KEY$8}`, () => {
+    for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP)) {
+      Chip.chipInterface(element);
+    }
+  });
+
+  /**
+   * jQuery
+   */
+
+  defineJQueryPlugin(Chip);
+
+  /**
+   * --------------------------------------------------------------------------
+   * CoreUI chip-input.js
+   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+   *
+   * This component is a highly modified version of the Bootstrap's chip-input.js
+   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+   * --------------------------------------------------------------------------
+   */
+
+
+  /**
+   * Constants
+   */
+
+  const NAME$e = 'chip-input';
+  const DATA_KEY$a = 'coreui.chip-input';
+  const EVENT_KEY$a = `.${DATA_KEY$a}`;
+  const DATA_API_KEY$7 = '.data-api';
+  const EVENT_ADD = `add${EVENT_KEY$a}`;
+  const EVENT_REMOVE = `remove${EVENT_KEY$a}`;
+  const EVENT_CHANGE = `change${EVENT_KEY$a}`;
+  const EVENT_SELECT = `select${EVENT_KEY$a}`;
+  const EVENT_INPUT = `input${EVENT_KEY$a}`;
+  const SELECTOR_DATA_CHIP_INPUT = '[data-coreui-chip-input]';
+  const SELECTOR_CHIP = '.chip';
+  const SELECTOR_CHIP_ACTIVE = `${SELECTOR_CHIP}.active`;
+  const SELECTOR_CHIP_INPUT_LABEL = '.chip-input-label';
+  const SELECTOR_CHIP_REMOVE = '.chip-remove';
+  const SELECTOR_FOCUSABLE_ITEMS = '.chip:not(.disabled)';
+  const CLASS_NAME_CHIP = 'chip';
+  const CLASS_NAME_DISABLED = 'disabled';
+  const CLASS_NAME_CHIP_INPUT_FIELD = 'chip-input-field';
+  const DEFAULT_REMOVE_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>';
+  const Default$d = {
+    chipClassName: null,
+    createOnBlur: true,
+    disabled: false,
+    id: null,
+    maxChips: null,
+    name: null,
+    placeholder: '',
+    readonly: false,
+    removable: true,
+    removeIcon: DEFAULT_REMOVE_ICON,
+    selectable: false,
+    separator: ','
+  };
+  const DefaultType$d = {
+    chipClassName: '(string|function|null)',
+    createOnBlur: 'boolean',
+    disabled: 'boolean',
+    maxChips: '(number|null)',
+    id: '(string|null)',
+    name: '(string|null)',
+    placeholder: 'string',
+    readonly: 'boolean',
+    removable: 'boolean',
+    removeIcon: 'string',
+    selectable: 'boolean',
+    separator: '(string|null)'
+  };
+
+  /**
+   * Class definition
+   */
+
+  class ChipInput extends BaseComponent {
+    constructor(element, config) {
+      var _this$_config$id;
+      super(element, config);
+      this._uniqueId = (_this$_config$id = this._config.id) != null ? _this$_config$id : getUID(`${this.constructor.NAME}`);
+      this._disabled = this._config.disabled || this._element.classList.contains(CLASS_NAME_DISABLED);
+      this._readonly = this._config.readonly;
+      this._chips = [];
+      this._input = SelectorEngine.findOne('input', this._element);
+      this._hiddenInput = null;
+      if (this._input) {
+        this._setInputSize();
+      } else {
+        this._createInput();
+      }
+      this._applyInteractionState();
+      this._initializeExistingChips();
+      this._createHiddenInput();
+      this._addEventListeners();
+    }
+
+    // Getters
+    static get Default() {
+      return Default$d;
+    }
+    static get DefaultType() {
+      return DefaultType$d;
+    }
+    static get NAME() {
+      return NAME$e;
+    }
+
+    // Public
+    add(value) {
+      if (this._disabled || this._readonly) {
+        return null;
+      }
+      const trimmedValue = String(value).trim();
+      if (!trimmedValue) {
+        return null;
+      }
+
+      // Chips are unique by value
+      if (this._chips.includes(trimmedValue)) {
+        return null;
+      }
+
+      // Check max chips limit
+      if (this._config.maxChips !== null && this._chips.length >= this._config.maxChips) {
+        return null;
+      }
+      const addEvent = EventHandler.trigger(this._element, EVENT_ADD, {
+        value: trimmedValue,
+        relatedTarget: this._input
+      });
+      if (addEvent.defaultPrevented) {
+        return null;
+      }
+      const chip = this._createChip(trimmedValue);
+      this._element.insertBefore(chip, this._input);
+      this._chips.push(trimmedValue);
+      const values = this.getValues();
+      this._hiddenInput.value = values.join(',');
+      EventHandler.trigger(this._element, EVENT_CHANGE, {
+        values
+      });
+      return chip;
+    }
+    remove(chipOrValue) {
+      if (this._disabled || this._readonly) {
+        return false;
+      }
+      let chip;
+      let value;
+      if (typeof chipOrValue === 'string') {
+        value = chipOrValue;
+        chip = this._findChipByValue(value);
+      } else {
+        chip = chipOrValue;
+        value = this._getChipValue(chip);
+      }
+      if (!chip || !value) {
+        return false;
+      }
+      const removeEvent = EventHandler.trigger(this._element, EVENT_REMOVE, {
+        value,
+        chip,
+        relatedTarget: this._input
+      });
+      if (removeEvent.defaultPrevented) {
+        return false;
+      }
+      const chipInstance = Chip.getInstance(chip);
+      if (chipInstance) {
+        chipInstance.remove();
+      } else {
+        chip.remove();
+        this._handleChipRemoved(chip, value);
+      }
+      return !chip.isConnected;
+    }
+    removeSelected() {
+      var _this$_input;
+      const chipsToRemove = this._getSelectedChipElements();
+      for (const chip of chipsToRemove) {
+        this.remove(chip);
+      }
+      (_this$_input = this._input) == null || _this$_input.focus();
+    }
+    getValues() {
+      return [...this._chips];
+    }
+    getSelectedValues() {
+      return this._getSelectedChipElements().map(chip => this._getChipValue(chip));
+    }
+    clear() {
+      const chips = SelectorEngine.find(SELECTOR_CHIP, this._element);
+      for (const chip of chips) {
+        this.remove(chip);
+      }
+    }
+    clearSelection() {
+      for (const chip of this._getSelectedChipElements()) {
+        var _Chip$getInstance;
+        (_Chip$getInstance = Chip.getInstance(chip)) == null || _Chip$getInstance.deselect();
+      }
+      EventHandler.trigger(this._element, EVENT_SELECT, {
+        selected: []
+      });
+    }
+    selectChip(chip) {
+      const chipElements = this._getChipElements();
+      if (!chipElements.includes(chip)) {
+        return;
+      }
+      const chipInstance = Chip.getInstance(chip);
+      if (!chipInstance) {
+        return;
+      }
+      chipInstance.select();
+    }
+    focus() {
+      var _this$_input2;
+      (_this$_input2 = this._input) == null || _this$_input2.focus();
+    }
+
+    // Private
+    _emitSelectionChange() {
+      EventHandler.trigger(this._element, EVENT_SELECT, {
+        selected: this.getSelectedValues()
+      });
+    }
+    _getChipElements() {
+      return SelectorEngine.find(SELECTOR_CHIP, this._element);
+    }
+    _getSelectedChipElements() {
+      return SelectorEngine.find(SELECTOR_CHIP_ACTIVE, this._element);
+    }
+    _createInput() {
+      const input = document.createElement('input');
+      const label = SelectorEngine.findOne(SELECTOR_CHIP_INPUT_LABEL, this._element);
+      const labelFor = label == null ? void 0 : label.getAttribute('for');
+      const generatedInputId = labelFor || getUID(`${this.constructor.NAME}-input`);
+      input.type = 'text';
+      input.className = CLASS_NAME_CHIP_INPUT_FIELD;
+      input.id = generatedInputId;
+      if (this._config.placeholder) {
+        input.placeholder = this._config.placeholder;
+      }
+      if (label && !labelFor) {
+        label.setAttribute('for', generatedInputId);
+      }
+      this._input = input;
+      this._setInputSize();
+      this._element.append(input);
+    }
+    _createHiddenInput() {
+      const hiddenInput = document.createElement('input');
+      hiddenInput.type = 'hidden';
+      hiddenInput.id = this._uniqueId;
+      hiddenInput.name = this._config.name || this._uniqueId;
+      this._element.append(hiddenInput);
+      this._hiddenInput = hiddenInput;
+      this._hiddenInput.value = this.getValues().join(',');
+    }
+    _createChip(value) {
+      const chip = document.createElement('span');
+      chip.className = CLASS_NAME_CHIP;
+      chip.dataset.coreuiChipValue = value;
+      chip.append(document.createTextNode(value));
+      this._applyChipClassName(chip, value);
+      this._setupChip(chip);
+      return chip;
+    }
+    _createChipFromInput() {
+      if (this._disabled || this._readonly) {
+        return;
+      }
+      const value = this._input.value.trim();
+      if (value) {
+        this.add(value);
+        this._input.value = '';
+        this._setInputSize();
+      }
+    }
+    _findChipByValue(value) {
+      const chips = this._getChipElements();
+      return chips.find(chip => this._getChipValue(chip) === value);
+    }
+    _getChipValue(chip) {
+      var _clone$textContent;
+      if (chip.dataset.coreuiChipValue) {
+        return chip.dataset.coreuiChipValue;
+      }
+      const clone = chip.cloneNode(true);
+      const remove = SelectorEngine.findOne(SELECTOR_CHIP_REMOVE, clone);
+      if (remove) {
+        remove.remove();
+      }
+      return ((_clone$textContent = clone.textContent) == null ? void 0 : _clone$textContent.trim()) || '';
+    }
+    _initializeExistingChips() {
+      const existingChips = SelectorEngine.find(SELECTOR_CHIP, this._element);
+      for (const chip of existingChips) {
+        const value = this._getChipValue(chip);
+        if (value) {
+          this._chips.push(value);
+          this._applyChipClassName(chip, value);
+          this._setupChip(chip);
+        }
+      }
+    }
+    _applyChipClassName(chip, value) {
+      const className = this._resolveChipClassName(value);
+      if (!className) {
+        return;
+      }
+      chip.classList.add(...className.split(/\s+/).filter(Boolean));
+    }
+    _resolveChipClassName(value) {
+      const {
+        chipClassName
+      } = this._config;
+      if (!chipClassName) {
+        return '';
+      }
+      if (typeof chipClassName === 'function') {
+        const resolvedClassName = chipClassName(value);
+        return typeof resolvedClassName === 'string' ? resolvedClassName : '';
+      }
+      return typeof chipClassName === 'string' ? chipClassName : '';
+    }
+    _setupChip(chip) {
+      Chip.getOrCreateInstance(chip, {
+        ariaRemoveLabel: `Remove ${this._getChipValue(chip)}`,
+        disabled: this._disabled,
+        removable: this._config.removable && !this._readonly && !this._disabled,
+        removeIcon: this._config.removeIcon,
+        selectable: this._config.selectable
+      });
+      const removeButton = SelectorEngine.findOne(SELECTOR_CHIP_REMOVE, chip);
+      if (removeButton) {
+        removeButton.disabled = this._disabled || this._readonly;
+      }
+    }
+    _applyInteractionState() {
+      this._element.classList.toggle(CLASS_NAME_DISABLED, this._disabled);
+      this._input.disabled = this._disabled;
+      this._input.readOnly = !this._disabled && this._readonly;
+      this._element.setAttribute('aria-disabled', this._disabled ? 'true' : 'false');
+      this._element.setAttribute('aria-readonly', this._readonly ? 'true' : 'false');
+    }
+    _addEventListeners() {
+      EventHandler.on(this._element, 'keydown', event => {
+        if (event.target === this._input) {
+          return;
+        }
+        if (event.key.length === 1) {
+          // eslint-disable-next-line no-console
+          console.log(event.key.length);
+          this._input.focus();
+        }
+      });
+      EventHandler.on(this._input, 'keydown', event => this._handleInputKeydown(event));
+      EventHandler.on(this._input, 'input', event => this._handleInput(event));
+      EventHandler.on(this._input, 'paste', event => this._handlePaste(event));
+      EventHandler.on(this._input, 'focus', () => this.clearSelection());
+      if (this._config.createOnBlur) {
+        EventHandler.on(this._input, 'blur', event => {
+          var _event$relatedTarget;
+          // Don't create chip if clicking on a chip
+          if (!((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.closest(SELECTOR_CHIP))) {
+            this._createChipFromInput();
+          }
+        });
+      }
+      EventHandler.on(this._element, 'selected.coreui.chip', SELECTOR_CHIP, () => {
+        this._emitSelectionChange();
+      });
+      EventHandler.on(this._element, 'deselected.coreui.chip', SELECTOR_CHIP, () => {
+        this._emitSelectionChange();
+      });
+      EventHandler.on(this._element, 'remove.coreui.chip', SELECTOR_CHIP, event => {
+        if (this._disabled || this._readonly) {
+          event.preventDefault();
+        }
+      });
+      EventHandler.on(this._element, 'removed.coreui.chip', SELECTOR_CHIP, event => {
+        const chip = event.target.closest(SELECTOR_CHIP);
+        if (chip) {
+          this._handleChipRemoved(chip);
+          const focusableChips = SelectorEngine.find(SELECTOR_FOCUSABLE_ITEMS, this._element);
+          if (focusableChips.length > 0) {
+            var _this$_input3;
+            (_this$_input3 = this._input) == null || _this$_input3.focus();
+          }
+          this._emitSelectionChange();
+        }
+      });
+
+      // Focus input when clicking container background
+      EventHandler.on(this._element, 'click', event => {
+        if (event.target === this._element) {
+          var _this$_input4;
+          (_this$_input4 = this._input) == null || _this$_input4.focus();
+        }
+      });
+    }
+    _handleInputKeydown(event) {
+      const {
+        key
+      } = event;
+      switch (key) {
+        case 'Enter':
+          {
+            event.preventDefault();
+            this._createChipFromInput();
+            break;
+          }
+        case 'Backspace':
+        case 'Delete':
+          {
+            if (this._input.value === '') {
+              event.preventDefault();
+              const chips = this._getChipElements();
+              if (chips.length > 0) {
+                const lastChip = chips.at(-1);
+                lastChip.focus();
+              }
+            }
+            break;
+          }
+        case 'ArrowLeft':
+          {
+            if (this._input.selectionStart === 0 && this._input.selectionEnd === 0) {
+              event.preventDefault();
+              const chips = this._getChipElements();
+              if (chips.length > 0) {
+                const lastChip = chips.at(-1);
+                lastChip.focus();
+              }
+            }
+            break;
+          }
+        case 'Escape':
+          {
+            this._input.value = '';
+            this._input.blur();
+            break;
+          }
+
+        // No default
+      }
+    }
+    _handleChipRemoved(chip, value = null) {
+      const chipValue = value || this._getChipValue(chip);
+      const valueIndex = this._chips.indexOf(chipValue);
+      if (valueIndex !== -1) {
+        this._chips.splice(valueIndex, 1);
+      }
+      const values = this.getValues();
+      this._hiddenInput.value = values.join(',');
+      EventHandler.trigger(this._element, EVENT_CHANGE, {
+        values
+      });
+    }
+    _handleInput(event) {
+      if (this._disabled || this._readonly) {
+        return;
+      }
+      const {
+        value
+      } = event.target;
+      const {
+        separator
+      } = this._config;
+      if (separator && value.includes(separator)) {
+        const parts = value.split(separator);
+        for (const part of parts.slice(0, -1)) {
+          this.add(part.trim());
+        }
+        this._input.value = parts.at(-1);
+      }
+      this._setInputSize();
+      EventHandler.trigger(this._element, EVENT_INPUT, {
+        value: this._input.value,
+        relatedTarget: this._input
+      });
+    }
+    _handlePaste(event) {
+      if (this._disabled || this._readonly) {
+        return;
+      }
+      const {
+        separator
+      } = this._config;
+      if (!separator) {
+        return;
+      }
+      const pastedData = (event.clipboardData || window.clipboardData).getData('text');
+      if (pastedData.includes(separator)) {
+        event.preventDefault();
+        const parts = pastedData.split(separator);
+        for (const part of parts) {
+          this.add(part.trim());
+        }
+      }
+    }
+    _setInputSize() {
+      if (!this._input) {
+        return;
+      }
+      this._input.size = Math.max(this._input.placeholder.length, this._input.value.length) || 1;
+    }
+  }
+
+  /**
+   * Data API implementation
+   */
+
+  EventHandler.on(document, `DOMContentLoaded${EVENT_KEY$a}${DATA_API_KEY$7}`, () => {
+    for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP_INPUT)) {
+      ChipInput.getOrCreateInstance(element);
+    }
+  });
+
   /**
    * --------------------------------------------------------------------------
    * CoreUI collapse.js
@@ -5077,6 +5897,8 @@
     Alert,
     Button,
     Carousel,
+    Chip,
+    ChipInput,
     Collapse,
     Dropdown,
     Modal,