@coreui/coreui 5.5.0 → 5.6.0

package/js/dist/util/focustrap.js

@@ -1,6 +1,6 @@
 /*!
-  * CoreUI focustrap.js v5.5.0 (https://coreui.io)
-  * Copyright 2025 The CoreUI Team (https://github.com/orgs/coreui/people)
+  * CoreUI focustrap.js 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) {

package/js/dist/util/index.js

@@ -1,6 +1,6 @@
 /*!
-  * CoreUI index.js v5.5.0 (https://coreui.io)
-  * Copyright 2025 The CoreUI Team (https://github.com/orgs/coreui/people)
+  * CoreUI index.js 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) {

package/js/dist/util/sanitizer.js

@@ -1,6 +1,6 @@
 /*!
-  * CoreUI sanitizer.js v5.5.0 (https://coreui.io)
-  * Copyright 2025 The CoreUI Team (https://github.com/orgs/coreui/people)
+  * CoreUI sanitizer.js 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) {

package/js/dist/util/scrollbar.js

@@ -1,6 +1,6 @@
 /*!
-  * CoreUI scrollbar.js v5.5.0 (https://coreui.io)
-  * Copyright 2025 The CoreUI Team (https://github.com/orgs/coreui/people)
+  * CoreUI scrollbar.js 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) {

package/js/dist/util/swipe.js

@@ -1,6 +1,6 @@
 /*!
-  * CoreUI swipe.js v5.5.0 (https://coreui.io)
-  * Copyright 2025 The CoreUI Team (https://github.com/orgs/coreui/people)
+  * CoreUI swipe.js 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) {

package/js/dist/util/template-factory.js

@@ -1,6 +1,6 @@
 /*!
-  * CoreUI template-factory.js v5.5.0 (https://coreui.io)
-  * Copyright 2025 The CoreUI Team (https://github.com/orgs/coreui/people)
+  * CoreUI template-factory.js 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) {

package/js/index.esm.js

@@ -8,6 +8,8 @@
 export { default as Alert } from './src/alert.js'
 export { default as Button } from './src/button.js'
 export { default as Carousel } from './src/carousel.js'
+export { default as Chip } from './src/chip.js'
+export { default as ChipInput } from './src/chip-input.js'
 export { default as Collapse } from './src/collapse.js'
 export { default as Dropdown } from './src/dropdown.js'
 export { default as Modal } from './src/modal.js'

package/js/index.umd.js

@@ -8,6 +8,8 @@
 import Alert from './src/alert.js'
 import Button from './src/button.js'
 import Carousel from './src/carousel.js'
+import Chip from './src/chip.js'
+import ChipInput from './src/chip-input.js'
 import Collapse from './src/collapse.js'
 import Dropdown from './src/dropdown.js'
 import Modal from './src/modal.js'
@@ -24,6 +26,8 @@ export default {
   Alert,
   Button,
   Carousel,
+  Chip,
+  ChipInput,
   Collapse,
   Dropdown,
   Modal,

package/js/src/base-component.js

@@ -17,7 +17,7 @@ import { executeAfterTransition, getElement } from './util/index.js'
  * Constants
  */
 
-const VERSION = '5.5.0'
+const VERSION = '5.6.0'
 
 /**
  * Class definition

package/js/src/chip-input.js

@@ -0,0 +1,595 @@
+/**
+ * --------------------------------------------------------------------------
+ * 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)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component.js'
+import Chip from './chip.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import { getUID } from './util/index.js'
+
+/**
+ * Constants
+ */
+
+const NAME = 'chip-input'
+const DATA_KEY = 'coreui.chip-input'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const EVENT_ADD = `add${EVENT_KEY}`
+const EVENT_REMOVE = `remove${EVENT_KEY}`
+const EVENT_CHANGE = `change${EVENT_KEY}`
+const EVENT_SELECT = `select${EVENT_KEY}`
+const EVENT_INPUT = `input${EVENT_KEY}`
+
+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 = {
+  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 = {
+  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) {
+    super(element, config)
+
+    this._uniqueId = 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
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // 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() {
+    const chipsToRemove = this._getSelectedChipElements()
+    for (const chip of chipsToRemove) {
+      this.remove(chip)
+    }
+
+    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()) {
+      Chip.getInstance(chip)?.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() {
+    this._input?.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?.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) {
+    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?.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 => {
+        // Don't create chip if clicking on a chip
+        if (!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) {
+          this._input?.focus()
+        }
+
+        this._emitSelectionChange()
+      }
+    })
+
+    // Focus input when clicking container background
+    EventHandler.on(this._element, 'click', event => {
+      if (event.target === this._element) {
+        this._input?.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}${DATA_API_KEY}`, () => {
+  for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP_INPUT)) {
+    ChipInput.getOrCreateInstance(element)
+  }
+})
+
+export default ChipInput