@coreui/coreui 5.6.0 → 5.7.0

package/js/index.umd.js

@@ -17,6 +17,7 @@ import Navigation from './src/navigation.js'
 import OffCanvas from './src/offcanvas.js'
 import Popover from './src/popover.js'
 import ScrollSpy from './src/scrollspy.js'
+import SearchButton from './src/search-button.js'
 import Sidebar from './src/sidebar.js'
 import Tab from './src/tab.js'
 import Toast from './src/toast.js'
@@ -35,6 +36,7 @@ export default {
   OffCanvas,
   Popover,
   ScrollSpy,
+  SearchButton,
   Sidebar,
   Tab,
   Toast,

package/js/src/base-component.js

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

package/js/src/chip-input.js

@@ -409,8 +409,6 @@ class ChipInput extends BaseComponent {
       }
 
       if (event.key.length === 1) {
-        // eslint-disable-next-line no-console
-        console.log(event.key.length)
         this._input.focus()
       }
     })

package/js/src/navigation.js

@@ -45,7 +45,7 @@ const SELECTOR_NAV_GROUP = '.nav-group'
 const SELECTOR_NAV_GROUP_ITEMS = '.nav-group-items'
 const SELECTOR_NAV_GROUP_TOGGLE = '.nav-group-toggle'
 const SELECTOR_NAV_LINK = '.nav-link'
-const SELECTOR_DATA_NAVIGATION = '[data-coreui="navigation"]'
+const SELECTOR_DATA_NAVIGATION = '[data-coreui-navigation], [data-coreui="navigation"]'
 
 /**
  * ------------------------------------------------------------------------

package/js/src/search-button.js

@@ -0,0 +1,409 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI search-button.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 { defineJQueryPlugin } from './util/index.js'
+
+/**
+ * Constants
+ */
+
+const NAME = 'search-button'
+const DATA_KEY = 'coreui.search-button'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const EVENT_BLUR_DATA_API = `blur${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_TRIGGER = `trigger${EVENT_KEY}`
+
+const CLASS_NAME_SHORTCUT_KEYS = 'search-button-keys'
+const CLASS_NAME_SHORTCUT_KEY = 'search-button-key'
+const CLASS_NAME_ACTIVE = 'active'
+
+const SELECTOR_DATA_TOGGLE = '[data-coreui-search-button]'
+const SELECTOR_EDITABLE_TARGET = 'input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]'
+const SELECTOR_PLACEHOLDER = '.search-button-placeholder'
+const SELECTOR_SHORTCUT_KEY = '.search-button-key'
+const SELECTOR_SHORTCUT_KEYS = '.search-button-keys'
+
+const Default = {
+  preventDefault: true,
+  shortcut: 'meta+/,ctrl+/'
+}
+
+const DefaultType = {
+  preventDefault: 'boolean',
+  shortcut: 'string'
+}
+
+const MODIFIER_KEYS = new Set(['alt', 'ctrl', 'meta', 'shift'])
+
+const KEY_ALIASES = {
+  cmd: 'meta',
+  command: 'meta',
+  control: 'ctrl',
+  option: 'alt',
+  return: 'enter',
+  esc: 'escape',
+  spacebar: 'space',
+  ' ': 'space'
+}
+
+const KEY_LABELS = {
+  alt: 'Alt',
+  ctrl: 'Ctrl',
+  meta: '⌘',
+  shift: 'Shift',
+  space: 'Space'
+}
+
+/**
+ * Class definition
+ */
+
+class SearchButton extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+
+    this._shortcutTriggered = false
+    this._shortcuts = this._parseShortcut(this._config.shortcut)
+    this._preferredShortcut = this._getPreferredShortcut(this._shortcuts)
+    this._syncShortcutKeys()
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  trigger() {
+    this._triggerEvent('api')
+  }
+
+  // Private
+  _triggerEvent(trigger) {
+    if (this._isDisabled()) {
+      return
+    }
+
+    EventHandler.trigger(this._element, EVENT_TRIGGER, { trigger })
+  }
+
+  _handleShortcut(event) {
+    if (this._isDisabled() || event.defaultPrevented || event.repeat || this._shouldIgnoreShortcut(event)) {
+      return false
+    }
+
+    const matchedShortcut = this._shortcuts.find(shortcut => this._matchesShortcut(shortcut, event))
+
+    if (!matchedShortcut) {
+      return false
+    }
+
+    if (this._config.preventDefault) {
+      event.preventDefault()
+    }
+
+    this._shortcutTriggered = true
+
+    try {
+      this._element.click()
+    } finally {
+      this._shortcutTriggered = false
+    }
+
+    return true
+  }
+
+  _isDisabled() {
+    return this._element.classList.contains('disabled') ||
+      this._element.getAttribute('aria-disabled') === 'true' ||
+      this._element.disabled
+  }
+
+  _ensureShortcutKeys() {
+    const existingShortcutKeys = this._element.querySelector(SELECTOR_SHORTCUT_KEYS)
+
+    if (existingShortcutKeys) {
+      return existingShortcutKeys
+    }
+
+    const shortcutKeys = document.createElement('span')
+    shortcutKeys.className = CLASS_NAME_SHORTCUT_KEYS
+    shortcutKeys.setAttribute('aria-hidden', 'true')
+    const placeholder = this._element.querySelector(SELECTOR_PLACEHOLDER)
+
+    if (placeholder) {
+      placeholder.after(shortcutKeys)
+      return shortcutKeys
+    }
+
+    this._element.append(shortcutKeys)
+    return shortcutKeys
+  }
+
+  _syncShortcutKeys() {
+    const shortcutKeys = this._ensureShortcutKeys()
+    const shortcutTokens = this._formatShortcutTokens(this._preferredShortcut?.shortcut || '')
+      .filter(Boolean)
+
+    shortcutKeys.replaceChildren()
+
+    for (const key of shortcutTokens) {
+      const shortcutKey = document.createElement('span')
+      shortcutKey.className = CLASS_NAME_SHORTCUT_KEY
+      shortcutKey.textContent = key
+      shortcutKey.dataset.coreuiSearchButtonKey = key
+      shortcutKeys.append(shortcutKey)
+    }
+  }
+
+  _syncActiveKeys(event) {
+    const pressedKeys = this._getPressedKeys(event)
+
+    for (const shortcutKey of this._element.querySelectorAll(SELECTOR_SHORTCUT_KEY)) {
+      shortcutKey.classList.toggle(CLASS_NAME_ACTIVE, pressedKeys.has(shortcutKey.dataset.coreuiSearchButtonKey))
+    }
+  }
+
+  _clearActiveKeys() {
+    for (const shortcutKey of this._element.querySelectorAll(SELECTOR_SHORTCUT_KEY)) {
+      shortcutKey.classList.remove(CLASS_NAME_ACTIVE)
+    }
+  }
+
+  _consumeShortcutTrigger() {
+    const shortcutTriggered = this._shortcutTriggered
+    this._shortcutTriggered = false
+    return shortcutTriggered
+  }
+
+  _shouldIgnoreShortcut(event) {
+    return this._isEditableTarget(event.target) && !event.ctrlKey && !event.metaKey
+  }
+
+  _isEditableTarget(target) {
+    if (!(target instanceof Element)) {
+      return false
+    }
+
+    return target.matches(SELECTOR_EDITABLE_TARGET) || target.closest(SELECTOR_EDITABLE_TARGET)
+  }
+
+  _normalizeKey(key) {
+    return KEY_ALIASES[key.toLowerCase()] || key.toLowerCase()
+  }
+
+  _parseShortcut(shortcut) {
+    return shortcut
+      .split(',')
+      .map(value => value.trim())
+      .filter(Boolean)
+      .map(value => {
+        const keys = value.split('+').map(part => this._normalizeKey(part.trim()))
+        const modifiers = {
+          alt: false,
+          ctrl: false,
+          meta: false,
+          shift: false
+        }
+
+        let key = ''
+
+        for (const part of keys) {
+          if (MODIFIER_KEYS.has(part)) {
+            modifiers[part] = true
+            continue
+          }
+
+          key = part
+        }
+
+        return {
+          key,
+          modifiers,
+          shortcut: value
+        }
+      })
+  }
+
+  _matchesShortcut(shortcut, event) {
+    if (!shortcut.key || this._normalizeKey(event.key) !== shortcut.key) {
+      return false
+    }
+
+    return shortcut.modifiers.alt === event.altKey &&
+      shortcut.modifiers.ctrl === event.ctrlKey &&
+      shortcut.modifiers.meta === event.metaKey &&
+      shortcut.modifiers.shift === event.shiftKey
+  }
+
+  _formatShortcutTokens(shortcut) {
+    return shortcut
+      .split('+')
+      .map(part => this._normalizeKey(part.trim()))
+      .map(part => this._getKeyLabel(part))
+  }
+
+  _getPlatform() {
+    return window.navigator.userAgentData?.platform ||
+      window.navigator.platform ||
+      window.navigator.userAgent ||
+      ''
+  }
+
+  _isMacOS() {
+    return /Mac|iPhone|iPad|iPod|macOS|Macintosh/.test(this._getPlatform())
+  }
+
+  _getPreferredShortcut(shortcuts) {
+    return shortcuts.find(shortcut => {
+      return this._isMacOS() ? shortcut.modifiers.meta : shortcut.modifiers.ctrl
+    }) || shortcuts[0] || null
+  }
+
+  _getPressedKeys(event) {
+    const pressedKeys = new Set()
+
+    if (event.altKey) {
+      pressedKeys.add(KEY_LABELS.alt)
+    }
+
+    if (event.ctrlKey) {
+      pressedKeys.add(KEY_LABELS.ctrl)
+    }
+
+    if (event.metaKey) {
+      pressedKeys.add(KEY_LABELS.meta)
+    }
+
+    if (event.shiftKey) {
+      pressedKeys.add(KEY_LABELS.shift)
+    }
+
+    const normalizedKey = this._normalizeKey(event.key)
+    const keyLabel = this._getKeyLabel(normalizedKey)
+
+    if (!MODIFIER_KEYS.has(normalizedKey) && event.type === 'keydown') {
+      pressedKeys.add(keyLabel)
+    }
+
+    return pressedKeys
+  }
+
+  _getKeyLabel(key) {
+    return KEY_LABELS[key] || (key.length === 1 ? key.toUpperCase() : `${key.charAt(0).toUpperCase()}${key.slice(1)}`)
+  }
+
+  // Static
+  static searchButtonInterface(element, config) {
+    const data = SearchButton.getOrCreateInstance(element, config)
+
+    if (typeof config === 'string') {
+      if (config.startsWith('_') || typeof data[config] !== 'function') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config]()
+    }
+  }
+
+  static jQueryInterface(config) {
+    return this.each(function () {
+      SearchButton.searchButtonInterface(this, config)
+    })
+  }
+
+  static _initializeDataApi() {
+    for (const button of document.querySelectorAll(SELECTOR_DATA_TOGGLE)) {
+      SearchButton.getOrCreateInstance(button)
+    }
+  }
+
+  static _handleDataApiClick(event) {
+    event.preventDefault()
+
+    const button = event.target.closest(SELECTOR_DATA_TOGGLE)
+    const data = SearchButton.getOrCreateInstance(button)
+    const shortcutTriggered = data._consumeShortcutTrigger()
+
+    if (shortcutTriggered) {
+      data._triggerEvent('shortcut')
+      return
+    }
+
+    data._triggerEvent('click')
+  }
+
+  static _handleDataApiKeydown(event) {
+    for (const button of document.querySelectorAll(SELECTOR_DATA_TOGGLE)) {
+      const data = SearchButton.getOrCreateInstance(button)
+      data._syncActiveKeys(event)
+
+      if (data._handleShortcut(event)) {
+        break
+      }
+    }
+  }
+
+  static _handleDataApiKeyup(event) {
+    for (const button of document.querySelectorAll(SELECTOR_DATA_TOGGLE)) {
+      SearchButton.getOrCreateInstance(button)._syncActiveKeys(event)
+    }
+  }
+
+  static _handleDataApiBlur() {
+    for (const button of document.querySelectorAll(SELECTOR_DATA_TOGGLE)) {
+      SearchButton.getOrCreateInstance(button)._clearActiveKeys()
+    }
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+EventHandler.on(document, `DOMContentLoaded${EVENT_KEY}${DATA_API_KEY}`, () => {
+  SearchButton._initializeDataApi()
+})
+
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
+  SearchButton._handleDataApiClick(event)
+})
+
+EventHandler.on(document, EVENT_KEYDOWN_DATA_API, event => {
+  SearchButton._handleDataApiKeydown(event)
+})
+
+EventHandler.on(document, EVENT_KEYUP_DATA_API, event => {
+  SearchButton._handleDataApiKeyup(event)
+})
+
+EventHandler.on(window, EVENT_BLUR_DATA_API, () => {
+  SearchButton._handleDataApiBlur()
+})
+
+/**
+ * jQuery
+ */
+
+defineJQueryPlugin(SearchButton)
+
+export default SearchButton

package/js/src/sidebar.js

@@ -155,14 +155,14 @@ class Sidebar extends BaseComponent {
 
   narrow() {
     if (!this._isMobile()) {
-      this._addClassName(CLASS_NAME_SIDEBAR_NARROW)
+      this._element.classList.add(CLASS_NAME_SIDEBAR_NARROW)
       this._narrow = true
     }
   }
 
   unfoldable() {
     if (!this._isMobile()) {
-      this._addClassName(CLASS_NAME_SIDEBAR_NARROW_UNFOLDABLE)
+      this._element.classList.add(CLASS_NAME_SIDEBAR_NARROW_UNFOLDABLE)
       this._unfoldable = true
     }
   }
@@ -234,21 +234,17 @@ class Sidebar extends BaseComponent {
     )
   }
 
-  _addClassName(className) {
-    this._element.classList.add(className)
-  }
-
-  _clickOutListener(event, sidebar) {
+  _clickOutListener(event) {
     if (event.target.closest(SELECTOR_SIDEBAR) === null) {
       event.preventDefault()
       event.stopPropagation()
-      sidebar.hide()
+      this.hide()
     }
   }
 
   _addClickOutListener() {
     EventHandler.on(document, EVENT_CLICK_DATA_API, event => {
-      this._clickOutListener(event, this)
+      this._clickOutListener(event)
     })
   }
 
@@ -268,7 +264,7 @@ class Sidebar extends BaseComponent {
 
     EventHandler.on(this._element, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
       event.preventDefault()
-      const toggle = Manipulator.getDataAttribute(event.target, 'toggle')
+      const toggle = Manipulator.getDataAttribute(event.target.closest(SELECTOR_DATA_TOGGLE), 'toggle')
 
       if (toggle === 'narrow') {
         this.toggleNarrow()

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.6.0",
+  "version": "5.7.0",
   "config": {
-    "version_short": "5.6"
+    "version_short": "5.7"
   },
   "keywords": [
     "css",
@@ -102,30 +102,31 @@
   "devDependencies": {
     "@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",
+    "@babel/preset-env": "^7.29.5",
+    "@coreui/internal-links": "^5.1.0",
+    "@docsearch/css": "^4.6.3",
+    "@docsearch/js": "^4.6.3",
     "@eslint/markdown": "^7.5.1",
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-babel": "^7.0.0",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
     "@stackblitz/sdk": "^1.11.0",
-    "autoprefixer": "^10.4.27",
+    "autoprefixer": "^10.5.0",
     "bootstrap": "^5.3.8",
-    "bundlewatch": "^0.4.1",
+    "bundlewatch": "^0.4.2",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
     "cross-env": "^10.1.0",
-    "eslint": "^9.39.3",
+    "eslint": "^9.39.4",
     "eslint-config-xo": "0.49.0",
     "eslint-plugin-html": "^8.1.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-unicorn": "^62.0.0",
-    "find-unused-sass-variables": "^6.1.1",
+    "find-unused-sass-variables": "^6.2.0",
     "globals": "^16.5.0",
-    "globby": "^16.1.1",
+    "globby": "^16.2.0",
     "hammer-simulator": "0.0.1",
     "html-entities": "^2.6.0",
     "hugo-bin": "^0.149.2",
@@ -144,18 +145,18 @@
     "lockfile-lint": "^5.0.0",
     "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.14",
     "postcss-cli": "^11.0.1",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "rimraf": "^6.1.3",
-    "rollup": "^4.59.0",
+    "rollup": "^4.60.4",
     "rollup-plugin-istanbul": "^5.0.0",
-    "sass-embedded": "^1.97.3",
+    "sass-embedded": "^1.99.0",
     "sass-true": "^10.1.0",
     "shelljs": "^0.10.0",
     "stylelint": "^16.26.1",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
-    "terser": "5.46.0",
+    "terser": "5.47.1",
     "vnu-jar": "25.12.31"
   },
   "files": [

package/scss/_banner.scss

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

package/scss/_root.scss

@@ -1,5 +1,6 @@
 @use "sass:meta";
 @use "functions/color" as *;
+@use "functions/color-translucent" as *;
 @use "functions/to-rgb" as *;
 @use "mixins/color-mode" as *;
 @use "vendor/rfs" as *;
@@ -88,6 +89,7 @@
   --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
   --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
   --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+  --#{$prefix}tertiary-bg-translucent: #{color-translucent($body-tertiary-bg)};
 
   --#{$prefix}body-color-dark: #{$body-color-dark};
   --#{$prefix}body-color-rgb-dark: #{to-rgb($body-color-dark)};
@@ -191,6 +193,7 @@
     --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
     --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
     --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+    --#{$prefix}tertiary-bg-translucent: #{color-translucent($body-tertiary-bg-dark, .1, $body-bg-dark)};
 
     --#{$prefix}high-emphasis: #{$high-emphasis-dark}; // Deprecated in v5.0.0
     --#{$prefix}medium-emphasis: #{$medium-emphasis-dark}; // Deprecated in v5.0.0