Nav & Tab docs updates, plus add Chip Input to JS bundle (#42214)

* Document data attributes

* Split nav and tab docs

* Fix v6 todo: reduce selectors in JS tab plugin

* fix css lint

* bump bw

* fix ids

Author: mdo

.bundlewatch.config.json

@@ -34,19 +34,19 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",
-      "maxSize": "70.0 kB"
+      "maxSize": "72.5 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "49.25 kB"
+      "maxSize": "51.0 kB"
     },
     {
       "path": "./dist/js/bootstrap.js",
-      "maxSize": "41.0 kB"
+      "maxSize": "43.5 kB"
     },
     {
       "path": "./dist/js/bootstrap.min.js",
-      "maxSize": "27.0 kB"
+      "maxSize": "28.75 kB"
     }
   ],
   "ci": {

js/index.js

@@ -17,6 +17,7 @@ export { default as NavOverflow } from './src/nav-overflow.js'
 export { default as Offcanvas } from './src/offcanvas.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 Popover } from './src/popover.js'
 export { default as ScrollSpy } from './src/scrollspy.js'
 export { default as Tab } from './src/tab.js'

js/src/tab.js

@@ -43,10 +43,10 @@ const NOT_SELECTOR_MENU_TOGGLE = `:not(${SELECTOR_MENU_TOGGLE})`
 const SELECTOR_TAB_PANEL = '.list-group, .nav, [role="tablist"]'
 const SELECTOR_OUTER = '.nav-item, .list-group-item'
 const SELECTOR_INNER = `.nav-link${NOT_SELECTOR_MENU_TOGGLE}, .list-group-item${NOT_SELECTOR_MENU_TOGGLE}, [role="tab"]${NOT_SELECTOR_MENU_TOGGLE}`
-const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]' // TODO: could only be `tab` in v6
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"]'
 const SELECTOR_INNER_ELEM = `${SELECTOR_INNER}, ${SELECTOR_DATA_TOGGLE}`
 
-const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE}[data-bs-toggle="tab"], .${CLASS_NAME_ACTIVE}[data-bs-toggle="pill"], .${CLASS_NAME_ACTIVE}[data-bs-toggle="list"]`
+const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE}[data-bs-toggle="tab"]`
 
 /**
  * Class definition

site/data/plugins.yml

@@ -40,7 +40,7 @@
 
 - name: Tab
   description: Allow Bootstrap nav components to toggle contents.
-  link: components/navs-tabs/
+  link: components/tab/
 
 - name: Toast
   description: Show and hide notifications to your visitors.

site/data/sidebar.yml

@@ -109,7 +109,8 @@
       pages:
         - title: Breadcrumb
         - title: Menu
-        - title: Navs & tabs
+        - title: Nav
+        - title: Tab
         - title: Nav overflow
         - title: Navbar
         - title: Pagination

site/src/assets/examples/cheatsheet/index.astro

@@ -1118,7 +1118,7 @@ export const body_class = 'bg-body-tertiary'
     <article class="my-3" id="navs">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>Navs</h3>
-        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/navs-tabs')}>Documentation</a>
+        <a class="d-flex align-items-center" href={getVersionedDocsPath('components/nav')}>Documentation</a>
       </div>
 
       <div>

site/src/content/docs/components/alert.mdx

@@ -120,6 +120,14 @@ For the sole purpose of dismissing an alert, it isn’t necessary to initialize
 See the [triggers](#triggers) section for more details.
 </Callout>
 
+### Via data attributes
+
+<BsTable>
+| Attribute | Description |
+| --- | --- |
+| `data-bs-dismiss="alert"` | On a close control, dismisses (and removes) the alert when activated. |
+</BsTable>
+
 ### Triggers
 
 <JsDismiss name="alert" />

site/src/content/docs/components/button-group.mdx

@@ -18,7 +18,7 @@ Wrap a series of buttons in `.btn-group`.
 Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them.
 </Callout>
 
-These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]([[docsref:/components/navs-tabs]]).
+These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]([[docsref:/components/nav]]).
 
 <Example code={`<div class="btn-group">
     <a href="#" class="btn-solid theme-primary active" aria-current="page">Active link</a>

site/src/content/docs/components/buttons.mdx

@@ -248,6 +248,14 @@ Add `data-bs-toggle="button"` to toggle a button’s `active` state. If you’re
   <a href="#" class="btn-solid theme-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
   <a class="btn-solid theme-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>`} />
 
+### Via data attributes
+
+<BsTable>
+| Attribute | Description |
+| --- | --- |
+| `data-bs-toggle="button"` | Toggles the button’s active (`pressed`) state via the Button plugin. |
+</BsTable>
+
 ### Methods
 
 You can create a button instance with the button constructor, for example:

site/src/content/docs/components/card.mdx

@@ -257,7 +257,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
 
 ## Navigation
 
-Add some navigation to a card’s header (or block) with Bootstrap’s [nav components]([[docsref:/components/navs-tabs]]).
+Add some navigation to a card’s header (or block) with Bootstrap’s [nav components]([[docsref:/components/nav]]).
 
 <Example code={`<div class="card text-center">
     <div class="card-header">