v6: More component tweaks (accordion, spinner, badge, button) (#42676)

Author: mdo

scss/_accordion.scss

@@ -4,6 +4,7 @@
 @use "mixins/focus-ring" as *;
 @use "mixins/tokens" as *;
 
+// stylelint-disable custom-property-no-missing-var-function
 $accordion-tokens: () !default;
 
 // scss-docs-start accordion-tokens
@@ -31,6 +32,7 @@ $accordion-tokens: defaults(
   $accordion-tokens
 );
 // scss-docs-end accordion-tokens
+// stylelint-enable custom-property-no-missing-var-function
 
 @layer components {
   .accordion {
@@ -76,6 +78,7 @@ $accordion-tokens: defaults(
   }
 
   .accordion-item {
+    position: relative;
     color: var(--accordion-color);
     background-color: var(--accordion-bg);
     border: var(--accordion-border-width) solid var(--accordion-border-color);
@@ -99,7 +102,8 @@ $accordion-tokens: defaults(
     }
 
     &:not(:first-of-type) {
-      border-block-start: 0;
+      // border-block-start: 0;
+      margin-top: calc(-1 * var(--accordion-border-width));
     }
 
     // Only set a border-radius on the last item if the accordion is collapsed
@@ -117,8 +121,9 @@ $accordion-tokens: defaults(
 
     // Open state - details[open] applies these styles
     &[open] {
-
+      z-index: 2;
       border-color: var(--theme-border, var(--accordion-border-color));
+
       &::details-content {
         block-size: auto;
       }
@@ -142,6 +147,21 @@ $accordion-tokens: defaults(
 
   .accordion-body {
     padding: var(--accordion-body-padding-y, var(--accordion-padding-y)) var(--accordion-body-padding-x, var(--accordion-padding-x));
+    font-size: var(--accordion-font-size, var(--font-size-base));
+  }
+
+
+  // Small accordion
+  //
+  // Tighten up padding, border-radius, and font size for a more compact accordion.
+
+  .accordion-sm {
+    // scss-docs-start accordion-sm-css-vars
+    --accordion-padding-x: .875rem;
+    --accordion-padding-y: .625rem;
+    --accordion-border-radius: var(--radius-5);
+    --accordion-font-size: var(--font-size-sm);
+    // scss-docs-end accordion-sm-css-vars
   }
 
 

scss/_badge.scss

@@ -9,6 +9,7 @@ $badge-tokens: () !default;
 // scss-docs-start badge-tokens
 $badge-tokens: defaults(
   (
+    --badge-gap: .375em,
     --badge-padding-x: .625em,
     --badge-padding-y: .25em,
     --badge-font-size: clamp(12px, .75em, .75em),
@@ -45,6 +46,7 @@ $badge-variants: (
     @include tokens($badge-tokens);
 
     display: inline-flex;
+    gap: var(--badge-gap);
     align-items: center;
     justify-content: center;
     min-height: 1.375rem;
@@ -59,7 +61,6 @@ $badge-variants: (
     background-color: var(--theme-bg, var(--badge-bg));
     border: var(--badge-border-width) solid var(--badge-border-color);
     @include border-radius(var(--badge-border-radius));
-    // @include gradient-bg();
 
     // Empty badges collapse automatically
     &:empty {

scss/_spinner.scss

@@ -9,11 +9,11 @@ $spinner-border-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $spinner-border-tokens: defaults(
   (
-    --spinner-width: 2rem,
-    --spinner-height: 2rem,
-    --spinner-vertical-align: -.125em,
-    --spinner-border-width: .25em,
-    --spinner-animation-speed: .75s,
+    --spinner-width: 1em,
+    --spinner-height: 1em,
+    --spinner-border-width: .125em,
+    --spinner-animation-speed: 1s,
+    --spinner-animation-timing-function: linear,
     --spinner-animation-name: spinner-border,
   ),
   $spinner-border-tokens
@@ -26,10 +26,10 @@ $spinner-grow-tokens: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $spinner-grow-tokens: defaults(
   (
-    --spinner-width: 2rem,
-    --spinner-height: 2rem,
-    --spinner-vertical-align: -.125em,
-    --spinner-animation-speed: .75s,
+    --spinner-width: 1em,
+    --spinner-height: 1em,
+    --spinner-animation-speed: 1s,
+    --spinner-animation-timing-function: ease-in-out,
     --spinner-animation-name: spinner-grow,
   ),
   $spinner-grow-tokens
@@ -43,17 +43,16 @@ $spinner-grow-tokens: defaults(
 //
 
 @layer components {
-  // TODO: refactor this to assume flex parent and remove `vertical-align`
+  // Assumes a flex parent
   .spinner-grow,
   .spinner-border {
-    display: inline-block;
+    display: inline-flex;
     flex-shrink: 0;
     width: var(--spinner-width);
     height: var(--spinner-height);
-    vertical-align: var(--spinner-vertical-align);
     // stylelint-disable-next-line property-disallowed-list
     border-radius: 50%;
-    animation: var(--spinner-animation-speed) linear infinite var(--spinner-animation-name);
+    animation: var(--spinner-animation-speed) var(--spinner-animation-timing-function) infinite var(--spinner-animation-name);
   }
 
   // scss-docs-start spinner-border-keyframes
@@ -69,11 +68,10 @@ $spinner-grow-tokens: defaults(
     border-inline-end-color: transparent;
   }
 
-  .spinner-border-sm {
+  .spinner-sm {
     // scss-docs-start spinner-border-sm-css-vars
-    --spinner-width: 1rem;
-    --spinner-height: 1rem;
-    --spinner-border-width: .2em;
+    --spinner-width: .75em;
+    --spinner-height: .75em;
     // scss-docs-end spinner-border-sm-css-vars
   }
 
@@ -100,11 +98,9 @@ $spinner-grow-tokens: defaults(
     opacity: 0;
   }
 
-  .spinner-grow-sm {
-    // scss-docs-start spinner-grow-sm-css-vars
-    --spinner-width: 1rem;
-    --spinner-height: 1rem;
-    // scss-docs-end spinner-grow-sm-css-vars
+  // Generic class for rotating custom spinners
+  .spinner-rotate {
+    animation: 1s linear infinite spinner-border;
   }
 
   @if $enable-reduced-motion {

scss/buttons/_button.scss

@@ -72,7 +72,7 @@ $button-styled-tokens: defaults(
     --btn-border-hover-mix-amount: 12.5%,
     --btn-border-active-mix-amount: 20%,
     --btn-shadow: "0 1px 2px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 10%)",
-    --btn-active-shadow: inset 0 2px 4px rgb(0 0 0 / .15) ,
+    --btn-active-shadow: inset 0 2px 4px rgb(0 0 0 / .15),
   ),
   $button-styled-tokens
 );
@@ -177,12 +177,11 @@ $btn-variant-selectors: (string.unquote(".btn"), string.unquote(".btn-link"), st
     @include tokens($button-tokens);
 
     display: inline-flex;
-    gap: var(--btn-gap, .25rem);
+    gap: var(--btn-gap, .375rem);
     align-items: center;
     justify-content: center;
     min-height: var(--btn-min-height);
     padding: var(--btn-padding-y) var(--btn-padding-x);
-    // font-family: var(--btn-font-family);
     font-size: var(--btn-font-size);
     font-weight: var(--btn-font-weight);
     line-height: var(--btn-line-height);

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

@@ -81,13 +81,51 @@ Use the contextual `.theme-{color}` classes to apply a semantic theme color to o
         <strong>This is the third item’s accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code>&lt;details&gt;</code> elements.
       </div>
     </details>
+  </div>`} customMarkup={`<div class="accordion theme-primary"><!--[!code highlight]-->
+    <!-- Accordion items here -->
+  </div>`} />
+
+## Small
+
+Add `.accordion-sm` to the `.accordion` for a more compact accordion with tighter padding, a smaller border radius, and a smaller font size.
+
+<Example code={`<div class="accordion accordion-sm">
+    <details class="accordion-item" name="accordionSmall" open>
+      <summary class="accordion-header">
+        Accordion Item #1
+        <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
+      </summary>
+      <div class="accordion-body">
+        <strong>This is the first item’s accordion body.</strong> The <code>.accordion-sm</code> class tightens up the padding, border radius, and font size for a more compact presentation.
+      </div>
+    </details>
+    <details class="accordion-item" name="accordionSmall">
+      <summary class="accordion-header">
+        Accordion Item #2
+        <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
+      </summary>
+      <div class="accordion-body">
+        <strong>This is the second item’s accordion body.</strong> Everything is driven by CSS custom properties, so you can fine-tune the compact sizing to taste.
+      </div>
+    </details>
+    <details class="accordion-item" name="accordionSmall">
+      <summary class="accordion-header">
+        Accordion Item #3
+        <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
+      </summary>
+      <div class="accordion-body">
+        <strong>This is the third item’s accordion body.</strong> Combine <code>.accordion-sm</code> with other variants like <code>.accordion-flush</code> as needed.
+      </div>
+    </details>
+  </div>`} customMarkup={`<div class="accordion accordion-sm"><!--[!code highlight]-->
+    <!-- Accordion items here -->
   </div>`} />
 
 ## Flush
 
 Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.
 
-<Example class="bg-body-secondary" code={`<div class="accordion accordion-flush">
+<Example class="bg-1" code={`<div class="accordion accordion-flush">
     <details class="accordion-item" name="accordionFlushExample">
       <summary class="accordion-header">
         Accordion Item #1
@@ -109,6 +147,8 @@ Add `.accordion-flush` to remove some borders and rounded corners to render acco
       </summary>
       <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item’s accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
     </details>
+  </div>`} customMarkup={`<div class="accordion accordion-flush"><!--[!code highlight]-->
+    <!-- Accordion items here -->
   </div>`} />
 
 ## Always open
@@ -143,6 +183,11 @@ Omit the `name` attribute on each `<details>` element to allow multiple accordio
         <strong>This is the third item’s accordion body.</strong> Each item is completely independent—open or close them in any combination you like.
       </div>
     </details>
+  </div>`} customMarkup={`<div class="accordion">
+    <details class="accordion-item" open><!--[!code highlight]-->
+      <!-- No name attribute, so items open independently -->
+    </details>
+    <!-- More accordion items here -->
   </div>`} />
 
 ## Nested