Improve accordion docs examples and button line height (#3076)

.changeset/accordion-button-line-height.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated `.accordion-button` line height to `1.25rem` via the `--tblr-accordion-btn-line-height` variable.

.changeset/docs-accordion-bg-surface.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Updated accordion docs examples to use `.bg-surface` on each `.accordion-item`.

core/scss/_variables.scss

@@ -1331,6 +1331,7 @@ $accordion-body-padding-y: $accordion-padding-y !default;
 $accordion-body-padding-x: $accordion-padding-x !default;
 
 $accordion-button-padding-y: $accordion-padding-y !default;
+$accordion-button-line-height: 1.25rem !default;
 $accordion-button-bg: transparent !default;
 $accordion-button-active-color: inherit !default;
 $accordion-btn-gap: 0.75rem !default;

core/scss/ui/_accordion.scss

@@ -14,6 +14,7 @@
   --accordion-btn-padding-x: var(--accordion-padding-x);
   --accordion-btn-padding-y: #{$accordion-button-padding-y};
   --accordion-btn-font-weight: var(--font-weight-medium);
+  --accordion-btn-line-height: #{$accordion-button-line-height};
   --accordion-body-padding-x: var(--accordion-padding-x);
   --accordion-body-padding-y: #{$accordion-body-padding-y};
   --accordion-btn-gap: #{$accordion-btn-gap};
@@ -34,6 +35,7 @@
   padding: var(--accordion-btn-padding-y) var(--accordion-padding-x);
   font-size: inherit;
   font-weight: var(--accordion-btn-font-weight);
+  line-height: var(--accordion-btn-line-height);
   color: inherit;
   text-align: inherit;
   background-color: transparent;

docs/content/ui/components/accordion.mdx

@@ -44,26 +44,26 @@ This preview shows the base structure with one expanded section.
 
 <Example>
 <div class="accordion" id="accordion-overview">
-  <div class="accordion-item">
+  <div class="accordion-item bg-surface">
-    <h2 class="accordion-header">
+    <h3 class="accordion-header">
       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-1" aria-expanded="true" aria-controls="overview-item-1"> Account details <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
-    </h2>
+    </h3>
     <div id="overview-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-overview">
       <div class="accordion-body">Update profile fields, contact details, and team role settings in this section.</div>
     </div>
   </div>
-  <div class="accordion-item">
+  <div class="accordion-item bg-surface">
-    <h2 class="accordion-header">
+    <h3 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-2" aria-expanded="false" aria-controls="overview-item-2"> Security settings <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
-    </h2>
+    </h3>
     <div id="overview-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-overview">
       <div class="accordion-body">Configure password policy, two-factor requirements, and active device sessions.</div>
     </div>
   </div>
-  <div class="accordion-item">
+  <div class="accordion-item bg-surface">
-    <h2 class="accordion-header">
+    <h3 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-3" aria-expanded="false" aria-controls="overview-item-3"> Notification preferences <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
-    </h2>
+    </h3>
     <div id="overview-item-3" class="accordion-collapse collapse" data-bs-parent="#accordion-overview">
       <div class="accordion-body"> Choose which updates to receive by email, browser push, and weekly digest. You can set separate rules for account alerts and product announcements. </div>
     </div>
@@ -79,10 +79,10 @@ Use `.accordion-button-toggle-plus` to hide the first SVG path when expanded. Th
 
 <Example>
 <div class="accordion" id="accordion-plus">
-  <div class="accordion-item">
+  <div class="accordion-item bg-surface">
-    <h2 class="accordion-header">
+    <h3 class="accordion-header">
       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#plus-item-1" aria-expanded="true" aria-controls="plus-item-1"> Billing details <span class="accordion-button-toggle accordion-button-toggle-plus"> <Icon name="plus" /> </span> </button>
-    </h2>
+    </h3>
     <div id="plus-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-plus">
       <div class="accordion-body">View invoices, payment method status, and tax details.</div>
     </div>
@@ -96,13 +96,13 @@ Use `.accordion-button-icon` when a row needs a small icon before the label. The
 
 <Example>
 <div class="accordion" id="accordion-icon">
-  <div class="accordion-item">
+  <div class="accordion-item bg-surface">
-    <h2 class="accordion-header">
+    <h3 class="accordion-header">
       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#icon-item-1" aria-expanded="true" aria-controls="icon-item-1">
         <span class="accordion-button-icon"><Icon name="user" /></span> Team profile
         <span class="accordion-button-toggle"><Icon name="chevron-down" /></span>
       </button>
-    </h2>
+    </h3>
     <div id="icon-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-icon">
       <div class="accordion-body">Manage member names, avatars, and workspace profile details.</div>
     </div>
@@ -116,18 +116,18 @@ Use `.accordion-flush` to remove side borders and border radius. The first and l
 
 <Example>
 <div class="accordion accordion-flush" id="accordion-flush">
-  <div class="accordion-item">
+  <div class="accordion-item bg-surface">
-    <h2 class="accordion-header">
+    <h3 class="accordion-header">
       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-item-1" aria-expanded="true" aria-controls="flush-item-1"> API access <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
-    </h2>
+    </h3>
     <div id="flush-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-flush">
       <div class="accordion-body">Generate tokens and control access scopes.</div>
     </div>
   </div>
-  <div class="accordion-item">
+  <div class="accordion-item bg-surface">
-    <h2 class="accordion-header">
+    <h3 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-item-2" aria-expanded="false" aria-controls="flush-item-2"> Webhooks <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
-    </h2>
+    </h3>
     <div id="flush-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-flush">
       <div class="accordion-body">Manage delivery URLs, retry policy, and event subscriptions.</div>
     </div>
@@ -143,18 +143,18 @@ Use `.accordion-tabs` to add a gap between items and keep full borders around ea
 
 <Example>
 <div class="accordion accordion-tabs" id="accordion-tabs">
-  <div class="accordion-item">
+  <div class="accordion-item bg-surface">
-    <h2 class="accordion-header">
+    <h3 class="accordion-header">
       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#tabs-item-1" aria-expanded="true" aria-controls="tabs-item-1"> Workspace <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
-    </h2>
+    </h3>
     <div id="tabs-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-tabs">
       <div class="accordion-body">Configure workspace name, slug, and timezone.</div>
     </div>
   </div>
-  <div class="accordion-item">
+  <div class="accordion-item bg-surface">
-    <h2 class="accordion-header">
+    <h3 class="accordion-header">
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tabs-item-2" aria-expanded="false" aria-controls="tabs-item-2"> Notifications <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
-    </h2>
+    </h3>
     <div id="tabs-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-tabs">
       <div class="accordion-body">Control email, push, and digest notification preferences.</div>
     </div>
@@ -168,10 +168,10 @@ Use `.accordion-inverted` to move the toggle to the start of the button row. Thi
 
 <Example>
 <div class="accordion accordion-inverted" id="accordion-inverted">
-  <div class="accordion-item">
+  <div class="accordion-item bg-surface">
-    <h2 class="accordion-header">
+    <h3 class="accordion-header">
       <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#inverted-item-1" aria-expanded="true" aria-controls="inverted-item-1"> Access policy <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
-    </h2>
+    </h3>
     <div id="inverted-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-inverted">
       <div class="accordion-body">Set default policy, invite flow, and sign-in restrictions.</div>
     </div>