@coreui/coreui 5.4.3 → 5.6.0

package/js/src/chip.js

@@ -0,0 +1,365 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI chip.js
+ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component.js'
+import EventHandler from './dom/event-handler.js'
+import SelectorEngine from './dom/selector-engine.js'
+import { defineJQueryPlugin, getNextActiveElement } from './util/index.js'
+
+/**
+ * Constants
+ */
+
+const NAME = 'chip'
+const DATA_KEY = 'coreui.chip'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const EVENT_REMOVE = `remove${EVENT_KEY}`
+const EVENT_REMOVED = `removed${EVENT_KEY}`
+const EVENT_SELECT = `select${EVENT_KEY}`
+const EVENT_SELECTED = `selected${EVENT_KEY}`
+const EVENT_DESELECT = `deselect${EVENT_KEY}`
+const EVENT_DESELECTED = `deselected${EVENT_KEY}`
+
+const SELECTOR_CHIP_REMOVE = '.chip-remove'
+const SELECTOR_DATA_CHIP = '[data-coreui-chip]'
+const SELECTOR_FOCUSABLE_ITEMS = '.chip:not(.disabled)'
+
+const CLASS_NAME_CHIP_CLICKABLE = 'chip-clickable'
+const CLASS_NAME_CHIP_REMOVE = 'chip-remove'
+const CLASS_NAME_ACTIVE = 'active'
+const CLASS_NAME_DISABLED = 'disabled'
+
+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 = {
+  ariaRemoveLabel: 'Remove',
+  disabled: false,
+  removable: false,
+  removeIcon: DEFAULT_REMOVE_ICON,
+  selectable: false,
+  selected: false
+}
+
+const DefaultType = {
+  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)
+    this._selected = this._config.selected || this._element.classList.contains(CLASS_NAME_ACTIVE)
+
+    this._ensureRemoveButton()
+    this._applyState()
+
+    if (this._config.selectable || this._config.removable) {
+      this._makeFocusable()
+    }
+
+    this._addEventListeners()
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  remove() {
+    const removeEvent = EventHandler.trigger(this._element, EVENT_REMOVE)
+
+    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)
+    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)) {
+        return
+      }
+
+      this.toggle()
+    })
+
+    EventHandler.on(this._element, 'click', SELECTOR_CHIP_REMOVE, 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)
+      this._element.setAttribute('aria-disabled', 'true')
+    } else {
+      this._element.classList.remove(CLASS_NAME_DISABLED)
+      if (this._element.getAttribute('aria-disabled') === 'true') {
+        this._element.setAttribute('aria-disabled', 'false')
+      }
+    }
+
+    if (this._config.selectable) {
+      this._element.classList.toggle(CLASS_NAME_ACTIVE, this._selected)
+      this._element.setAttribute('aria-selected', this._selected ? 'true' : 'false')
+    } else {
+      this._element.classList.remove(CLASS_NAME_ACTIVE)
+      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, 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?.focus()
+          this.remove()
+        }
+
+        break
+      }
+
+      case 'ArrowLeft': {
+        event.preventDefault()
+        const chip = this._getFocusableSibling(false)
+        chip?.focus()
+
+        break
+      }
+
+      case 'ArrowRight': {
+        event.preventDefault()
+        const chip = this._getFocusableSibling(true)
+        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, 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, this._element.parentElement)
+    if (chips.length === 0) {
+      return
+    }
+
+    const targetChip = chips.at(targetIndex)
+    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}${DATA_API_KEY}`, () => {
+  for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP)) {
+    Chip.chipInterface(element)
+  }
+})
+
+/**
+ * jQuery
+ */
+
+defineJQueryPlugin(Chip)
+
+export default Chip

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@coreui/coreui",
   "description": "The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintained by the CoreUI Team",
-  "version": "5.4.3",
+  "version": "5.6.0",
   "config": {
-    "version_short": "5.4"
+    "version_short": "5.6"
   },
   "keywords": [
     "css",
@@ -100,36 +100,37 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.3",
-    "@babel/preset-env": "^7.28.3",
-    "@docsearch/js": "^3.9.0",
-    "@eslint/markdown": "^7.2.0",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@docsearch/css": "^4.6.0",
+    "@docsearch/js": "^4.6.0",
+    "@eslint/markdown": "^7.5.1",
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
     "@stackblitz/sdk": "^1.11.0",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.4.27",
     "bootstrap": "^5.3.8",
     "bundlewatch": "^0.4.1",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
-    "cross-env": "^10.0.0",
-    "eslint": "^9.34.0",
+    "cross-env": "^10.1.0",
+    "eslint": "^9.39.3",
     "eslint-config-xo": "0.49.0",
-    "eslint-plugin-html": "^8.1.3",
+    "eslint-plugin-html": "^8.1.4",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-unicorn": "^60.0.0",
-    "find-unused-sass-variables": "^6.1.0",
-    "globals": "^16.3.0",
-    "globby": "^14.1.0",
+    "eslint-plugin-unicorn": "^62.0.0",
+    "find-unused-sass-variables": "^6.1.1",
+    "globals": "^16.5.0",
+    "globby": "^16.1.1",
     "hammer-simulator": "0.0.1",
     "html-entities": "^2.6.0",
-    "hugo-bin": "^0.146.0",
+    "hugo-bin": "^0.149.2",
     "ip": "^2.0.1",
-    "jasmine": "^5.10.0",
+    "jasmine": "^5.13.0",
     "jquery": "^3.7.1",
     "karma": "^6.4.4",
     "karma-browserstack-launcher": "1.6.0",
@@ -138,23 +139,24 @@
     "karma-detect-browsers": "^2.3.3",
     "karma-firefox-launcher": "^2.1.3",
     "karma-jasmine": "^5.1.0",
-    "karma-jasmine-html-reporter": "^2.1.0",
+    "karma-jasmine-html-reporter": "^2.2.0",
     "karma-rollup-preprocessor": "7.0.8",
-    "lockfile-lint": "^4.14.1",
-    "nodemon": "^3.1.10",
+    "lockfile-lint": "^5.0.0",
+    "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "rollup": "^4.50.0",
+    "rimraf": "^6.1.3",
+    "rollup": "^4.59.0",
     "rollup-plugin-istanbul": "^5.0.0",
-    "sass-embedded": "^1.91.0",
-    "sass-true": "^9.0.0",
+    "sass-embedded": "^1.97.3",
+    "sass-true": "^10.1.0",
     "shelljs": "^0.10.0",
-    "stylelint": "^16.23.1",
+    "stylelint": "^16.26.1",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
-    "terser": "5.43.1",
-    "vnu-jar": "24.10.17"
+    "terser": "5.46.0",
+    "vnu-jar": "25.12.31"
   },
   "files": [
     "dist/{css,js}/**/*.{css,js,map}",
@@ -182,7 +184,6 @@
     }
   },
   "dependencies": {
-    "html-entities": "^2.6.0",
-    "html-to-md": "^0.8.8"
+    "html-entities": "^2.6.0"
   }
 }

package/scss/_banner.scss

@@ -1,7 +1,7 @@
 $file: "" !default;
 
 /*!
- * CoreUI #{$file} v5.4.3 (https://coreui.io)
- * Copyright (c) 2025 creativeLabs Łukasz Holeczek
+ * CoreUI #{$file} v5.6.0 (https://coreui.io)
+ * Copyright (c) 2026 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
  */

package/scss/_buttons.scss

@@ -40,10 +40,11 @@
   line-height: var(--#{$prefix}btn-line-height);
   color: var(--#{$prefix}btn-color);
   text-align: center;
-  text-decoration: if($link-decoration == none, null, none);
+  text-decoration: if(not sass($link-decoration == none): none);
   white-space: $btn-white-space;
   vertical-align: middle;
-  cursor: if($enable-button-pointers, pointer, null);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  cursor: if(sass($enable-button-pointers): pointer);
   user-select: none;
   border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
   @include border-radius(var(--#{$prefix}btn-border-radius));
@@ -53,7 +54,8 @@
 
   &:hover {
     color: var(--#{$prefix}btn-hover-color);
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
@@ -97,7 +99,8 @@
     color: var(--#{$prefix}btn-active-color);
     background-color: var(--#{$prefix}btn-active-bg);
     // Remove CSS gradients if they're enabled
-    background-image: if($enable-gradients, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    background-image: if(sass($enable-gradients): none);
     border-color: var(--#{$prefix}btn-active-border-color);
     @include box-shadow(var(--#{$prefix}btn-active-shadow));
 
@@ -126,7 +129,8 @@
     color: var(--#{$prefix}btn-disabled-color);
     pointer-events: none;
     background-color: var(--#{$prefix}btn-disabled-bg);
-    background-image: if($enable-gradients, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    background-image: if(sass($enable-gradients): none);
     border-color: var(--#{$prefix}btn-disabled-border-color);
     opacity: var(--#{$prefix}btn-disabled-opacity);
     @include box-shadow(none);

package/scss/_card.scss

@@ -96,7 +96,8 @@
 
 .card-link {
   &:hover {
-    text-decoration: if($link-hover-decoration == underline, none, null);
+    // stylelint-disable-next-line scss/at-function-named-arguments
+    text-decoration: if(sass($link-hover-decoration == underline): none);
   }
 
   + .card-link {

package/scss/_carousel.scss

@@ -123,11 +123,13 @@
 }
 .carousel-control-prev {
   left: 0;
-  background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, .25), rgba($black, .001)));
 }
 .carousel-control-next {
   right: 0;
-  background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);
+  // stylelint-disable-next-line scss/at-function-named-arguments
+  background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, .25), rgba($black, .001)));
 }
 
 // Icons for within

package/scss/_chip.import.scss

@@ -0,0 +1 @@
+@forward "chip";