@coreui/coreui 5.5.0 → 5.6.0

package/dist/js/coreui.esm.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)
   */
 import * as Popper from '@popperjs/core';
@@ -661,7 +661,7 @@ class Config {
  * Constants
  */
 
-const VERSION = '5.5.0';
+const VERSION = '5.6.0';
 
 /**
  * Class definition
@@ -855,11 +855,11 @@ const enableDismissTrigger = (component, method = 'hide') => {
  * 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';
 
@@ -870,7 +870,7 @@ const CLASS_NAME_SHOW$a = 'show';
 class Alert extends BaseComponent {
   // Getters
   static get NAME() {
-    return NAME$h;
+    return NAME$j;
   }
 
   // Public
@@ -933,13 +933,13 @@ defineJQueryPlugin(Alert);
  * 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
@@ -948,13 +948,13 @@ const EVENT_CLICK_DATA_API$8 = `click${EVENT_KEY$c}${DATA_API_KEY$8}`;
 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
@@ -1000,23 +1000,23 @@ defineJQueryPlugin(Button);
  * 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)'
@@ -1041,18 +1041,18 @@ class Swipe extends Config {
 
   // 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
@@ -1123,10 +1123,10 @@ class Swipe extends Config {
  * 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
@@ -1135,16 +1135,16 @@ const ORDER_NEXT = 'next';
 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';
@@ -1161,7 +1161,7 @@ const KEY_TO_DIRECTION = {
   [ARROW_LEFT_KEY$1]: DIRECTION_RIGHT,
   [ARROW_RIGHT_KEY$1]: DIRECTION_LEFT
 };
-const Default$d = {
+const Default$f = {
   interval: 5000,
   keyboard: true,
   pause: 'hover',
@@ -1169,7 +1169,7 @@ const Default$d = {
   touch: true,
   wrap: true
 };
-const DefaultType$d = {
+const DefaultType$f = {
   interval: '(number|boolean)',
   // TODO:v6 remove boolean support
   keyboard: 'boolean',
@@ -1200,13 +1200,13 @@ class Carousel extends BaseComponent {
 
   // 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
@@ -1333,11 +1333,11 @@ class Carousel extends BaseComponent {
       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');
     }
   }
@@ -1390,8 +1390,8 @@ class Carousel extends BaseComponent {
     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);
     };
@@ -1484,6 +1484,826 @@ EventHandler.on(window, EVENT_LOAD_DATA_API$5, () => {
 
 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
@@ -5043,5 +5863,5 @@ enableDismissTrigger(Toast);
 
 defineJQueryPlugin(Toast);
 
-export { Alert, Button, Carousel, Collapse, Dropdown, Modal, Navigation, Offcanvas, Popover, ScrollSpy, Sidebar, Tab, Toast, Tooltip };
+export { Alert, Button, Carousel, Chip, ChipInput, Collapse, Dropdown, Modal, Navigation, Offcanvas, Popover, ScrollSpy, Sidebar, Tab, Toast, Tooltip };
 //# sourceMappingURL=coreui.esm.js.map