@coreui/coreui 5.6.1 → 5.7.1

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.1",
+  "version": "5.7.1",
   "config": {
-    "version_short": "5.6"
+    "version_short": "5.7"
   },
   "keywords": [
     "css",
@@ -102,9 +102,10 @@
   "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": "^7.0.0",
@@ -112,20 +113,20 @@
     "@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.98.0",
+    "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.1 (https://coreui.io)
+ * CoreUI #{$file} v5.7.1 (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

package/scss/_search-button.scss

@@ -0,0 +1,127 @@
+@use "variables" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/transition" as *;
+@use "vendor/rfs" as *;
+
+// scss-docs-start search-button-variables
+$search-button-height:              $input-height !default;
+$search-button-padding-x:           $input-padding-x !default;
+$search-button-font-family:         $input-font-family !default;
+$search-button-font-size:           $input-font-size !default;
+$search-button-font-weight:         $input-font-weight !default;
+$search-button-color:               $input-placeholder-color !default;
+$search-button-bg:                  $input-bg !default;
+$search-button-border-width:        $input-border-width !default;
+$search-button-border-color:        $input-border-color !default;
+$search-button-border-radius:       $input-border-radius !default;
+$search-button-box-shadow:          $input-box-shadow !default;
+$search-button-transition:          $input-transition !default;
+
+$search-button-focus-color:         $input-focus-color !default;
+$search-button-focus-bg:            $input-focus-bg !default;
+$search-button-focus-border-color:  $input-focus-border-color !default;
+$search-button-focus-box-shadow:    $input-focus-box-shadow !default;
+
+$search-button-icon-size:           1.125rem !default;
+
+$search-button-keys-gap:            .25rem !default;
+$search-button-key-width:           1.5rem !default;
+$search-button-key-height:          1.5rem !default;
+$search-button-key-padding-inline:  .25rem !default;
+$search-button-key-font-size:       .75rem !default;
+$search-button-key-bg:              var(--#{$prefix}tertiary-bg) !default;
+$search-button-key-border-radius:   var(--#{$prefix}border-radius-sm) !default;
+$search-button-key-active-bg:       var(--#{$prefix}secondary-bg) !default;
+
+$search-button-placeholder-margin-inline:  .55rem 2rem !default;
+// scss-docs-end search-button-variables
+
+.search-button {
+  // scss-docs-start search-button-css-vars
+  --#{$prefix}search-button-height: #{$search-button-height};
+  --#{$prefix}search-button-padding-x: #{$search-button-padding-x};
+  --#{$prefix}search-button-font-family: #{$search-button-font-family};
+  --#{$prefix}search-button-font-size: #{$search-button-font-size};
+  --#{$prefix}search-button-font-weight: #{$search-button-font-weight};
+  --#{$prefix}search-button-color: #{$search-button-color};
+  --#{$prefix}search-button-bg: #{$search-button-bg};
+  --#{$prefix}search-button-border-width: #{$search-button-border-width};
+  --#{$prefix}search-button-border-color: #{$search-button-border-color};
+  --#{$prefix}search-button-border-radius: #{$search-button-border-radius};
+  --#{$prefix}search-button-box-shadow: #{$search-button-box-shadow};
+  --#{$prefix}search-button-transition: #{$search-button-transition};
+  --#{$prefix}search-button-focus-color: #{$search-button-focus-color};
+  --#{$prefix}search-button-focus-bg: #{$search-button-focus-bg};
+  --#{$prefix}search-button-focus-border-color: #{$search-button-focus-border-color};
+  --#{$prefix}search-button-focus-box-shadow: #{$search-button-focus-box-shadow};
+  --#{$prefix}search-button-icon-size: #{$search-button-icon-size};
+  --#{$prefix}search-button-keys-gap: #{$search-button-keys-gap};
+  --#{$prefix}search-button-key-width: #{$search-button-key-width};
+  --#{$prefix}search-button-key-height: #{$search-button-key-height};
+  --#{$prefix}search-button-key-padding-inline: #{$search-button-key-padding-inline};
+  --#{$prefix}search-button-key-font-size: #{$search-button-key-font-size};
+  --#{$prefix}search-button-key-bg: #{$search-button-key-bg};
+  --#{$prefix}search-button-key-border-radius: #{$search-button-key-border-radius};
+  --#{$prefix}search-button-key-active-bg: #{$search-button-key-active-bg};
+  --#{$prefix}search-button-placeholder-margin-inline: #{$search-button-placeholder-margin-inline};
+  // scss-docs-end search-button-css-vars
+
+  display: flex;
+  align-items: center;
+  height: var(--#{$prefix}search-button-height);
+  padding-inline: var(--#{$prefix}search-button-padding-x);
+  font-family: var(--#{$prefix}search-button-font-family);
+  @include font-size(var(--#{$prefix}search-button-font-size));
+  font-weight: var(--#{$prefix}search-button-font-weight);
+  color: var(--#{$prefix}search-button-color);
+  background-color: var(--#{$prefix}search-button-bg);
+  border: var(--#{$prefix}search-button-border-width) solid var(--#{$prefix}search-button-border-color);
+
+  @include border-radius(var(--#{$prefix}search-button-border-radius), 0);
+  @include box-shadow(var(--#{$prefix}search-button-box-shadow));
+  @include transition(var(--#{$prefix}search-button-transition));
+
+  &:focus {
+    color: var(--#{$prefix}search-button-focus-color);
+    background-color: var(--#{$prefix}search-button-focus-bg);
+    border-color: var(--#{$prefix}search-button-focus-border-color);
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow(var(--#{$prefix}search-button-box-shadow), var(--#{$prefix}search-button-focus-box-shadow));
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: var(--#{$prefix}search-button-focus-box-shadow);
+    }
+  }
+}
+
+.search-button-icon {
+  width: var(--#{$prefix}search-button-icon-size);
+  height: var(--#{$prefix}search-button-icon-size);
+}
+
+.search-button-keys {
+  display: inline-flex;
+  gap: var(--#{$prefix}search-button-keys-gap);
+}
+
+.search-button-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--#{$prefix}search-button-key-width);
+  height: var(--#{$prefix}search-button-key-height);
+  padding-inline: var(--#{$prefix}search-button-key-padding-inline);
+  font-size: var(--#{$prefix}search-button-key-font-size);
+  background-color: var(--#{$prefix}search-button-key-bg);
+  @include border-radius(var(--#{$prefix}search-button-key-border-radius));
+
+  &.active {
+    background-color: var(--#{$prefix}search-button-key-active-bg);
+  }
+}
+
+.search-button-placeholder {
+  margin-inline: var(--#{$prefix}search-button-placeholder-margin-inline);
+}