v6: Chips & Badges updates, remove Badges example page (#42400)

* Rename chip-input to chips

* More edits

* Remove the badges example

diff --git a/js/index.js b/js/index.js
index 4c7f8ebd5681e28e7d741fddd5865de58bd144e1..7030887c229d6db469dd504823628d3748543bdc 100644 (file)
--- a/js/index.js
+++ b/js/index.js
@@ -17,7 +17,7 @@ export { default as NavOverflow } from './src/nav-overflow.js'
 export { default as Drawer } from './src/drawer.js'
 export { default as Strength } from './src/strength.js'
 export { default as OtpInput } from './src/otp-input.js'
-export { default as ChipInput } from './src/chip-input.js'
+export { default as Chips } from './src/chips.js'
 export { default as Popover } from './src/popover.js'
 export { default as ScrollSpy } from './src/scrollspy.js'
 export { default as Tab } from './src/tab.js'

diff --git a/js/src/chip-input.js b/js/src/chips.js
similarity index 97%
rename from js/src/chip-input.js
rename to js/src/chips.js
index 925dd9068dfeaca04dea73d9cabafc0537e0cd7f..1e165f635c0b9ea53e867f8e4bf022ecb7238fdb 100644 (file)
--- a/js/src/chip-input.js
+++ b/js/src/chips.js
@@ -1,6 +1,6 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap chip-input.js
+ * Bootstrap chips.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -13,8 +13,8 @@ import SelectorEngine from './dom/selector-engine.js'
  * Constants
  */
 
-const NAME = 'chipInput'
-const DATA_KEY = 'bs.chip-input'
+const NAME = 'chips'
+const DATA_KEY = 'bs.chips'
 const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
@@ -23,7 +23,7 @@ const EVENT_REMOVE = `remove${EVENT_KEY}`
 const EVENT_CHANGE = `change${EVENT_KEY}`
 const EVENT_SELECT = `select${EVENT_KEY}`
 
-const SELECTOR_DATA_CHIP_INPUT = '[data-bs-chip-input]'
+const SELECTOR_DATA_CHIPS = '[data-bs-chips]'
 const SELECTOR_GHOST_INPUT = '.form-ghost'
 const SELECTOR_CHIP = '.chip'
 const SELECTOR_CHIP_DISMISS = '.chip-dismiss'
@@ -58,7 +58,7 @@ const DefaultType = {
  * Class definition
  */
 
-class ChipInput extends BaseComponent {
+class Chips extends BaseComponent {
   constructor(element, config) {
     super(element, config)
 
@@ -625,9 +625,9 @@ class ChipInput extends BaseComponent {
  */
 
 EventHandler.on(document, `DOMContentLoaded${EVENT_KEY}${DATA_API_KEY}`, () => {
-  for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP_INPUT)) {
-    ChipInput.getOrCreateInstance(element)
+  for (const element of SelectorEngine.find(SELECTOR_DATA_CHIPS)) {
+    Chips.getOrCreateInstance(element)
   }
 })
 
-export default ChipInput
+export default Chips

diff --git a/site/data/examples.yml b/site/data/examples.yml
index cf6bccf8078f704048ec8fbe6058125edbb63d42..0cc0167a9eafc8d1cdb01955bb1a2ed15b1ce11c 100644 (file)
--- a/site/data/examples.yml
+++ b/site/data/examples.yml
@@ -55,8 +55,6 @@
       description: 'Extend list groups with utilities and custom styles for any content.'
     - name: Dialogs
       description: 'Transform dialogs to serve any purpose, from feature tours to confirmations.'
-    - name: Badges
-      description: 'Make badges work with custom inner HTML and new looks.'
     - name: Breadcrumbs
       description: 'Integrate custom icons and create stepper components.'
     - name: Buttons

diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 5170b4c278f39d10ae999e23a94629d6caea42e1..b3036aa120684067ce676d978dcc05d822c5cdf3 100644 (file)
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -88,7 +88,7 @@
     - title: Form adorn
       meta:
         - added: 6.0.0
-    - title: Chip input
+    - title: Chips
       meta:
         - added: 6.0.0
     - title: Combobox

diff --git a/site/src/assets/examples/badges/badges.css b/site/src/assets/examples/badges/badges.css
deleted file mode 100644 (file)
index b6ce0f5..0000000
--- a/site/src/assets/examples/badges/badges.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.badge > a {
-  color: inherit;
-}

diff --git a/site/src/assets/examples/badges/index.astro b/site/src/assets/examples/badges/index.astro
deleted file mode 100644 (file)
index 182e3cd..0000000
--- a/site/src/assets/examples/badges/index.astro
+++ /dev/null
@@ -1,146 +0,0 @@
----
-export const title = 'Badges'
-export const extra_css = ['badges.css']
----
-
-<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
-  <symbol id="x-circle-fill" viewBox="0 0 16 16">
-    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
-  </symbol>
-</svg>
-
-<div class="d-flex gap-2 justify-content-center py-5">
-  <span class="badge text-bg-primary rounded-pill">Primary</span>
-  <span class="badge text-bg-secondary rounded-pill">Secondary</span>
-  <span class="badge text-bg-success rounded-pill">Success</span>
-  <span class="badge text-bg-danger rounded-pill">Danger</span>
-  <span class="badge text-bg-warning rounded-pill">Warning</span>
-  <span class="badge text-bg-info rounded-pill">Info</span>
-  <span class="badge text-bg-light rounded-pill">Light</span>
-  <span class="badge text-bg-dark rounded-pill">Dark</span>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="d-flex gap-2 justify-content-center py-5">
-  <span class="badge bg-primary-subtle text-primary-emphasis rounded-pill">Primary</span>
-  <span class="badge bg-secondary-subtle text-secondary-emphasis rounded-pill">Secondary</span>
-  <span class="badge bg-success-subtle text-success-emphasis rounded-pill">Success</span>
-  <span class="badge bg-danger-subtle text-danger-emphasis rounded-pill">Danger</span>
-  <span class="badge bg-warning-subtle text-warning-emphasis rounded-pill">Warning</span>
-  <span class="badge bg-info-subtle text-info-emphasis rounded-pill">Info</span>
-  <span class="badge bg-light-subtle text-light-emphasis rounded-pill">Light</span>
-  <span class="badge bg-dark-subtle text-dark-emphasis rounded-pill">Dark</span>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="d-flex gap-2 justify-content-center py-5">
-  <span class="badge bg-primary-subtle border border-primary-subtle text-primary-emphasis rounded-pill">Primary</span>
-  <span class="badge bg-secondary-subtle border border-secondary-subtle text-secondary-emphasis rounded-pill">Secondary</span>
-  <span class="badge bg-success-subtle border border-success-subtle text-success-emphasis rounded-pill">Success</span>
-  <span class="badge bg-danger-subtle border border-danger-subtle text-danger-emphasis rounded-pill">Danger</span>
-  <span class="badge bg-warning-subtle border border-warning-subtle text-warning-emphasis rounded-pill">Warning</span>
-  <span class="badge bg-info-subtle border border-info-subtle text-info-emphasis rounded-pill">Info</span>
-  <span class="badge bg-light-subtle border border-light-subtle text-light-emphasis rounded-pill">Light</span>
-  <span class="badge bg-dark-subtle border border-dark-subtle text-dark-emphasis rounded-pill">Dark</span>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="d-flex gap-2 justify-content-center py-5">
-  <span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Primary
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Secondary
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Success
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Danger
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Warning
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Info
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Light
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">Dark
-  </span>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="d-flex gap-2 justify-content-center py-5">
-  <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
-    <span class="px-1">Primary 1</span>
-    <a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-  <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
-    <span class="px-1">Primary 2</span>
-    <a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-  <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
-    <span class="px-1">Primary 3</span>
-    <a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-</div>
-
-<div class="b-example-divider"></div>
-
-<div class="d-flex gap-2 justify-content-center py-5">
-  <span class="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
-    Primary
-    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
-    Secondary
-    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
-    Success
-    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
-    Danger
-    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
-    Warning
-    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
-    Info
-    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
-    Light
-    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-  <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
-    <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
-    Dark
-    <span class="vr mx-2"></span>
-    <a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use href="#x-circle-fill"/></svg></a>
-  </span>
-</div>

diff --git a/site/src/content/docs/components/badge.mdx b/site/src/content/docs/components/badge.mdx
index 48a916322c8d8b1da4ac7b8609507c7850535e7e..c31ce687d9e0f528bbf1bfa48cb28c6d9d6f8c16 100644 (file)
--- a/site/src/content/docs/components/badge.mdx
+++ b/site/src/content/docs/components/badge.mdx
@@ -1,15 +1,17 @@
 ---
 title: Badges
-description: Documentation and examples for badges, our small count and labeling component.
+description: Small components for indicating status and counts, or labelling items.
 toc: true
 css_layer: components
 ---
 
 import { getData } from '@libs/data'
 
-## Example
+## Examples
 
-Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. Badges come in three variants: solid (default), subtle, and outline.
+Badges are tiny, static display components used for adding context to other elements. They can be used as part of navigation, buttons, and more to provide a counter or label. Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
+
+Badges come in three variants: solid (default), subtle, and outline.
 
 <Example code={`<span class="badge theme-primary">New</span>
   <span class="badge badge-subtle theme-primary">New</span>

diff --git a/site/src/content/docs/forms/chip-input.mdx b/site/src/content/docs/forms/chips.mdx
similarity index 80%
rename from site/src/content/docs/forms/chip-input.mdx
rename to site/src/content/docs/forms/chips.mdx
index c14e9b905c822005adc1cb93c9b196880e847da5..5c90cd563d2e0f0bf04bf4847d4ab14343c53cc1 100644 (file)
--- a/site/src/content/docs/forms/chip-input.mdx
+++ b/site/src/content/docs/forms/chips.mdx
@@ -1,6 +1,6 @@
 ---
-title: Chip input
-description: Create tag-like inputs for multi-value fields like skills, categories, or email recipients using themed chips.
+title: Chips
+description: Small interactive elements representing entities like people, places, tags, or values. Combine with inputs for multi-value fields like skills, categories, or email recipients using themed chips.
 toc: true
 css_layer: forms
 js: required
@@ -10,9 +10,10 @@ import { getData } from '@libs/data'
 
 ## Overview
 
-Chips are similar to badges, but they have a single size and more defined visual styles useful for indicating state and selection.
+Chips are small interactive elements representing entities. They can be used to group and select values in forms or other interactive contexts. They're similar to the older [Badges]([[docsref:/components/badge]]) component, but have some meaningful differences.
 
-- Chips are statically sized—they don’t scale with the parent element by default.
+- Chips are interactive elements, not static like Badges.
+- Chips have one size—they don't scale with the parent `font-size` like Badges.
 - Chips can have icons, avatars, and dismiss buttons.
 - Chips can be themed, individually or as a group on the parent container. By default, chips use the `subtle` and `text` theme tokens, while active state uses the `bg` and `contrast` tokens.
 - Chips can be active or disabled.
@@ -21,7 +22,7 @@ Chips are similar to badges, but they have a single size and more defined visual
 
 See examples of all of this in action below.
 
-## Basic chips
+## Chips
 
 Use `.chip` for standalone chips. Add `.chip-icon` for a leading icon, `.chip-img` for an image like an avatar, and `.chip-dismiss` for a remove button. Note that we use an inline SVG for the dismiss button icon—you can modify this as needed. JavaScript users can use the `dismissIcon` option for passing a custom SVG.
 
@@ -68,9 +69,11 @@ Add `.active` to make chips use the solid appearance (bg/contrast). This is usef
 
 ## Chip input
 
-Wrap chips and a ghost input in `.chip-input` to create a tag input field. Add `data-bs-chip-input` to enable JavaScript behavior. Chips are grayscale by default, with primary blue for active states, but you can apply any theme color to the container so that chips within inherit the color of your choosing.
+Wrap chips and a ghost input in `.chip-input` to create a tag input field. Add `data-bs-chips` to enable JavaScript behavior. Chips are grayscale by default, with primary blue for active states, but you can apply any theme color to the container so that chips within inherit the color of your choosing.
 
-<Example code={`<div class="chip-input" data-bs-chip-input>
+Type into the input below and press <kbd>Enter</kbd> or <kbd>,</kbd> to add new chips. Use the <kbd>Backspace</kbd> or <kbd>Delete</kbd> keys to remove chips. See the [Keyboard behavior](#keyboard-behavior) section for more details.
+
+<Example code={`<div class="chip-input" data-bs-chips>
     <label class="chip-input-label" for="skillsInput">Skills:</label>
     <span class="chip">
       JavaScript
@@ -85,13 +88,13 @@ Wrap chips and a ghost input in `.chip-input` to create a tag input field. Add `
 
 Add a `.theme-*` class to the `.chip-input` container to apply a theme color to all chips within.
 
-<Example class="vstack gap-3" code={`<div class="chip-input theme-primary" data-bs-chip-input>
+<Example class="vstack gap-3" code={`<div class="chip-input theme-primary" data-bs-chips>
     <span class="chip">Approved</span>
     <span class="chip">Verified</span>
     <input type="text" class="form-ghost" placeholder="Add status...">
   </div>
 
-  <div class="chip-input theme-danger" data-bs-chip-input>
+  <div class="chip-input theme-danger" data-bs-chips>
     <span class="chip">Bug</span>
     <span class="chip">Critical</span>
     <input type="text" class="form-ghost" placeholder="Add issue">
@@ -99,7 +102,7 @@ Add a `.theme-*` class to the `.chip-input` container to apply a theme color to
 
 You can also individually apply a theme color to a chip by adding a `.theme-*` class to the chip element.
 
-<Example code={`<div class="chip-input theme-primary" data-bs-chip-input>
+<Example code={`<div class="chip-input theme-primary" data-bs-chips>
     <span class="chip theme-warning">Bug</span>
     <span class="chip theme-danger">Critical</span>
     <input type="text" class="form-ghost" placeholder="Add issue">
@@ -109,7 +112,7 @@ You can also individually apply a theme color to a chip by adding a `.theme-*` c
 
 Start with just the ghost input—chips are created as users type.
 
-<Example code={`<div class="chip-input theme-primary" data-bs-chip-input>
+<Example code={`<div class="chip-input theme-primary" data-bs-chips>
     <input type="text" class="form-ghost" placeholder="Type and press Enter">
   </div>`} />
 
@@ -119,7 +122,7 @@ Use a form label for better accessibility.
 
 <Example code={`<div class="form-field">
     <label class="form-label" for="skillsInputLabel">Skills</label>
-    <div class="chip-input theme-primary" data-bs-chip-input>
+    <div class="chip-input theme-primary" data-bs-chips>
       <span class="chip">
         React
         <button type="button" class="chip-dismiss" aria-label="Remove">
@@ -131,11 +134,11 @@ Use a form label for better accessibility.
     <div class="form-text">Press Enter or comma to add a skill.</div>
   </div>`} />
 
-## Disabled
+### Disabled
 
 Disable the ghost input to prevent adding new chips. Existing chips become non-interactive.
 
-<Example code={`<div class="chip-input theme-primary" data-bs-chip-input>
+<Example code={`<div class="chip-input theme-primary" data-bs-chips>
     <span class="chip">
       Read only
       <button type="button" class="chip-dismiss" aria-label="Remove">
@@ -149,12 +152,12 @@ Disable the ghost input to prevent adding new chips. Existing chips become non-i
 
 ### Via data attributes
 
-Add `data-bs-chip-input` to your container element to automatically initialize the chip input behavior. Options can be passed as data attributes.
+Add `data-bs-chips` to your container element to automatically initialize the chip input behavior. Options can be passed as data attributes.
 
 <BsTable>
 | Attribute | Description |
 | --- | --- |
-| `data-bs-chip-input` | Initializes the chip input on the container element. |
+| `data-bs-chips` | Initializes the chip input on the container element. |
 | `data-bs-separator` | Character that creates a new chip when typed (or `null` to disable). |
 | `data-bs-allow-duplicates` | Whether duplicate chip values are allowed. |
 | `data-bs-max-chips` | Maximum number of chips (`null` for no limit). |
@@ -162,7 +165,7 @@ Add `data-bs-chip-input` to your container element to automatically initialize t
 </BsTable>
 
 ```html
-<div class="chip-input theme-primary" data-bs-chip-input data-bs-separator="," data-bs-allow-duplicates="false">
+<div class="chip-input theme-primary" data-bs-chips data-bs-separator="," data-bs-allow-duplicates="false">
   <input type="text" class="form-ghost" placeholder="Add tags...">
 </div>
 ```
@@ -173,7 +176,7 @@ Initialize manually with JavaScript:
 
 ```js
 const chipInputElement = document.querySelector('.chip-input')
-const chipInput = new bootstrap.ChipInput(chipInputElement, {
+const chips = new bootstrap.Chips(chipInputElement, {
   separator: ',',
   maxChips: 5
 })
@@ -214,20 +217,20 @@ Options can be passed via data attributes or JavaScript:
 
 ```js
 const chipInputElement = document.querySelector('.chip-input')
-const chipInput = bootstrap.ChipInput.getOrCreateInstance(chipInputElement)
+const chips = bootstrap.Chips.getOrCreateInstance(chipInputElement)
 
 // Add chips programmatically
-chipInput.add('JavaScript')
-chipInput.add('TypeScript')
+chips.add('JavaScript')
+chips.add('TypeScript')
 
 // Get all values
-console.log(chipInput.getValues()) // ['JavaScript', 'TypeScript']
+console.log(chips.getValues()) // ['JavaScript', 'TypeScript']
 
 // Remove a specific chip
-chipInput.remove('JavaScript')
+chips.remove('JavaScript')
 
 // Clear all chips
-chipInput.clear()
+chips.clear()
 ```
 
 ### Events
@@ -235,16 +238,16 @@ chipInput.clear()
 <BsTable>
 | Event | Description |
 | --- | --- |
-| `add.bs.chip-input` | Fired before a chip is added. Call `event.preventDefault()` to cancel. |
-| `remove.bs.chip-input` | Fired before a chip is removed. Call `event.preventDefault()` to cancel. |
-| `change.bs.chip-input` | Fired after any chip is added or removed. Contains `values` array. |
-| `select.bs.chip-input` | Fired when chip selection changes. Contains `selected` array of values. |
+| `add.bs.chips` | Fired before a chip is added. Call `event.preventDefault()` to cancel. |
+| `remove.bs.chips` | Fired before a chip is removed. Call `event.preventDefault()` to cancel. |
+| `change.bs.chips` | Fired after any chip is added or removed. Contains `values` array. |
+| `select.bs.chips` | Fired when chip selection changes. Contains `selected` array of values. |
 </BsTable>
 
 ```js
 const chipInputElement = document.querySelector('.chip-input')
 
-chipInputElement.addEventListener('add.bs.chip-input', event => {
+chipInputElement.addEventListener('add.bs.chips', event => {
   console.log('Adding chip:', event.value)
 
   // Validate and optionally prevent
@@ -253,16 +256,16 @@ chipInputElement.addEventListener('add.bs.chip-input', event => {
   }
 })
 
-chipInputElement.addEventListener('remove.bs.chip-input', event => {
+chipInputElement.addEventListener('remove.bs.chips', event => {
   console.log('Removing chip:', event.value)
 })
 
-chipInputElement.addEventListener('change.bs.chip-input', event => {
+chipInputElement.addEventListener('change.bs.chips', event => {
   console.log('Current values:', event.values)
   // Sync with hidden input or state
 })
 
-chipInputElement.addEventListener('select.bs.chip-input', event => {
+chipInputElement.addEventListener('select.bs.chips', event => {
   console.log('Selected:', event.selected)
 })
 ```

diff --git a/site/src/content/docs/guides/migration.mdx b/site/src/content/docs/guides/migration.mdx
index 1007b97b77a6b1c0328d1671978f272e8e7169c8..fa4f58222930f7c966efe4e6d5c965cbf310db08 100644 (file)
--- a/site/src/content/docs/guides/migration.mdx
+++ b/site/src/content/docs/guides/migration.mdx
@@ -378,7 +378,7 @@ Bootstrap 6 is a major release with many breaking changes to modernize our codeb
 - **Dialog** — replaces Modal, built on the native `<dialog>` element. See the Components section above for the full migration.
 - **Stepper** — new `.stepper` component for multi-step workflows with `.stepper-item` and `.stepper-horizontal` variant. CSS-only.
 - **Avatar** — new `.avatar` component with sizes (`.avatar-xs` through `.avatar-xl`), status indicators (`.avatar-status .status-online|offline|busy|away`), subtle variant, and `.avatar-stack` for grouped avatars.
-- **Chip and Chip Input** — new `.chip` component for tags/tokens and `.chip-input` for interactive chip entry. `ChipInput` JavaScript plugin with events: `add.bs.chip-input`, `remove.bs.chip-input`, `change.bs.chip-input`.
+- **Chip and Chip Input** — new `.chip` component for tags/tokens and `.chip-input` for interactive chip entry. `Chips` JavaScript plugin with events: `add.bs.chips`, `remove.bs.chips`, `change.bs.chips`.
 - **OTP Input** — new `.otp` component for one-time password fields. `OtpInput` JavaScript plugin with events: `input.bs.otp-input`, `complete.bs.otp-input`.
 - **Password Strength** — `Strength` JavaScript plugin for password strength metering with `strengthChange.bs.strength` event.
 - **Toggler** — `Toggler` JavaScript plugin for toggling classes or attributes on elements via `data-bs-toggle="toggler"`.

diff --git a/site/static/docs/[version]/assets/img/examples/badges-dark.png b/site/static/docs/[version]/assets/img/examples/badges-dark.png
deleted file mode 100644 (file)
index 58c71c6..0000000
Binary files a/site/static/docs/[version]/assets/img/examples/badges-dark.png and /dev/null differ

diff --git a/site/static/docs/[version]/assets/img/examples/badges-dark@2x.png b/site/static/docs/[version]/assets/img/examples/badges-dark@2x.png
deleted file mode 100644 (file)
index efd57cd..0000000
Binary files a/site/static/docs/[version]/assets/img/examples/badges-dark@2x.png and /dev/null differ

diff --git a/site/static/docs/[version]/assets/img/examples/badges.png b/site/static/docs/[version]/assets/img/examples/badges.png
deleted file mode 100644 (file)
index d73b797..0000000
Binary files a/site/static/docs/[version]/assets/img/examples/badges.png and /dev/null differ

diff --git a/site/static/docs/[version]/assets/img/examples/badges@2x.png b/site/static/docs/[version]/assets/img/examples/badges@2x.png
deleted file mode 100644 (file)
index 886c962..0000000
Binary files a/site/static/docs/[version]/assets/img/examples/badges@2x.png and /dev/null differ