diff --git a/.storybook/test-runner.js b/.storybook/test-runner.js
index a64857c2a..a883233d7 100644
--- a/.storybook/test-runner.js
+++ b/.storybook/test-runner.js
@@ -23,9 +23,9 @@ module.exports = {
         axeOptions: {
           rules: {
             // TODO: enable this rule again once all color contrast issues are fixed
-            "color-contrast": {
-              enabled: false
-            }
+            'color-contrast': {
+              enabled: false,
+            },
           },
         },
         detailedReport: true,
diff --git a/scss/bitstyles/atoms/dropdown/dropdown.stories.js b/scss/bitstyles/atoms/dropdown/dropdown.stories.js
index 82a63d641..60543cb13 100644
--- a/scss/bitstyles/atoms/dropdown/dropdown.stories.js
+++ b/scss/bitstyles/atoms/dropdown/dropdown.stories.js
@@ -62,7 +62,7 @@ const menu = `
           colorVariant: ['transparent'],
           shapeVariant: ['menu'],
           children: 'Settings',
-          element: 'a',
+          classname: ['u-width-full'],
         }).outerHTML
       }
     </li>
@@ -72,7 +72,7 @@ const menu = `
           colorVariant: ['transparent'],
           shapeVariant: ['menu'],
           children: 'Help',
-          element: 'a',
+          classname: ['u-width-full'],
         }).outerHTML
       }
     </li>
@@ -82,7 +82,7 @@ const menu = `
           colorVariant: ['transparent'],
           shapeVariant: ['menu'],
           children: 'Privacy',
-          element: 'a',
+          classname: ['u-width-full'],
         }).outerHTML
       }
     </li>
@@ -92,7 +92,7 @@ const menu = `
           colorVariant: ['transparent'],
           shapeVariant: ['menu'],
           children: 'Sign out',
-          element: 'a',
+          classname: ['u-width-full'],
         }).outerHTML
       }
     </li>
diff --git a/scss/bitstyles/base/forms/forms.stories.mdx b/scss/bitstyles/base/forms/forms.stories.mdx
index 455a6696e..2e939c522 100644
--- a/scss/bitstyles/base/forms/forms.stories.mdx
+++ b/scss/bitstyles/base/forms/forms.stories.mdx
@@ -143,7 +143,7 @@ This includes all standard `type="text"` inputs, plus all the text-based inputs
   <Story name="Select and label (invalid)">
     {`
       <label for="input_d2">Invalid select</label>
-      <select required>
+      <select id="input_d2" required>
         <option value="" disabled hidden selected>Please select</option>
         <option value="value2">Value 2</option>
         <option value="value3">Value 3</option>
diff --git a/scss/bitstyles/base/forms/inputs.stories.mdx b/scss/bitstyles/base/forms/inputs.stories.mdx
index 1e7ed2bb3..04c4a290d 100644
--- a/scss/bitstyles/base/forms/inputs.stories.mdx
+++ b/scss/bitstyles/base/forms/inputs.stories.mdx
@@ -32,12 +32,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - color">
     {`
-      <input type="color">
+      <label><input type="color"> label</label>
     `}
   </Story>
   <Story name="Input - color (disabled)">
     {`
-      <input type="color" disabled>
+      <label><input type="color" disabled> label</label>
     `}
   </Story>
 </Canvas>
@@ -47,12 +47,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - date">
     {`
-      <input type="date">
+      <label>label <input type="date"></label>
     `}
   </Story>
   <Story name="Input - date (disabled)">
     {`
-      <input type="date" disabled>
+      <label>label <input type="date" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -62,12 +62,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - datetime-local">
     {`
-      <input type="datetime-local">
+      <label>label <input type="datetime-local"></label>
     `}
   </Story>
   <Story name="Input - datetime-local (disabled)">
     {`
-      <input type="datetime-local" disabled>
+      <label>label <input type="datetime-local" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -77,12 +77,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - file">
     {`
-      <input type="file">
+      <label>label <input type="file"></label>
     `}
   </Story>
   <Story name="Input - file (disabled)">
     {`
-      <input type="file" disabled>
+      <label>label <input type="file" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -107,12 +107,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - month">
     {`
-      <input type="month">
+      <label>label <input type="month"></label>
     `}
   </Story>
   <Story name="Input - month (disabled)">
     {`
-      <input type="month" disabled>
+      <label>label <input type="month" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -122,12 +122,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - week">
     {`
-      <input type="week">
+      <label>label <input type="week"></label>
     `}
   </Story>
   <Story name="Input - week (disabled)">
     {`
-      <input type="week" disabled>
+      <label>label <input type="week" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -137,12 +137,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - password">
     {`
-      <input type="password" value="Password">
+      <label>label <input type="password" value="Password"></label>
     `}
   </Story>
   <Story name="Input - password (disabled)">
     {`
-      <input type="password" value="Password" disabled>
+      <label>label <input type="password" value="Password" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -167,12 +167,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - search">
     {`
-      <input type="search">
+      <label>label <input type="search"></label>
     `}
   </Story>
   <Story name="Input - search (disabled)">
     {`
-      <input type="search" (disabled)>
+      <label>label <input type="search" (disabled)></label>
     `}
   </Story>
 </Canvas>
@@ -197,12 +197,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - tel">
     {`
-      <input type="tel">
+      <label>label <input type="tel"></label>
     `}
   </Story>
   <Story name="Input - tel (disabled)">
     {`
-      <input type="tel" disabled>
+      <label>label <input type="tel" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -212,12 +212,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - time">
     {`
-      <input type="time">
+      <label>label <input type="time"></label>
     `}
   </Story>
   <Story name="Input - time (disabled)">
     {`
-      <input type="time" disabled>
+      <label>label <input type="time" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -227,12 +227,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - url">
     {`
-      <input type="url">
+      <label>label <input type="url"></label>
     `}
   </Story>
   <Story name="Input - url (disabled)">
     {`
-      <input type="url" disabled>
+      <label>label <input type="url" disabled></label>
     `}
   </Story>
 </Canvas>
diff --git a/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx b/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx
index e941b8d7c..ebd6744b0 100644
--- a/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx
+++ b/scss/bitstyles/base/input-checkbox/input-checkbox.stories.mdx
@@ -7,22 +7,22 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - checkbox">
     {`
-      <input type="checkbox">
+      <label><input type="checkbox"> label</label>
     `}
   </Story>
   <Story name="Input - checkbox (disabled)">
     {`
-      <input type="checkbox" disabled>
+      <label><input type="checkbox" disabled> label</label>
     `}
   </Story>
   <Story name="Input - checkbox (checked)">
     {`
-      <input type="checkbox" checked>
+      <label><input type="checkbox" checked> label</label>
     `}
   </Story>
   <Story name="Input - checkbox (checked, disabled">
     {`
-      <input type="checkbox" checked disabled>
+      <label><input type="checkbox" checked disabled> label</label>
     `}
   </Story>
 </Canvas>
diff --git a/scss/bitstyles/base/input-radio/input-radio.stories.mdx b/scss/bitstyles/base/input-radio/input-radio.stories.mdx
index fa9b1855e..0dbdd781b 100644
--- a/scss/bitstyles/base/input-radio/input-radio.stories.mdx
+++ b/scss/bitstyles/base/input-radio/input-radio.stories.mdx
@@ -7,22 +7,22 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Input - radio">
     {`
-      <input type="radio">
+      <label><input type="radio"> label</label>
     `}
   </Story>
   <Story name="Input - radio (disabled)">
     {`
-      <input type="radio" disabled>
+      <label><input type="radio" disabled> label</label>
     `}
   </Story>
   <Story name="Input - radio (checked)">
     {`
-      <input type="radio" checked>
+      <label><input type="radio" checked> label</label>
     `}
   </Story>
   <Story name="Input - radio (checked, disabled)">
     {`
-      <input type="radio" checked disabled>
+      <label><input type="radio" checked disabled> label</label>
     `}
   </Story>
 </Canvas>
diff --git a/scss/bitstyles/base/input-text/input-text.stories.mdx b/scss/bitstyles/base/input-text/input-text.stories.mdx
index 8dfe8398d..1c012c768 100644
--- a/scss/bitstyles/base/input-text/input-text.stories.mdx
+++ b/scss/bitstyles/base/input-text/input-text.stories.mdx
@@ -13,12 +13,12 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 <Canvas isColumn>
   <Story name="Input - text">
     {`
-      <input type="text" placeholder="Jelly cake marshmallow">
+      <label>label <input type="text" placeholder="Jelly cake marshmallow"></label>
     `}
   </Story>
   <Story name="Input - text (disabled)">
     {`
-      <input type="text" placeholder="Jelly cake marshmallow" disabled>
+      <label>label <input type="text" placeholder="Jelly cake marshmallow" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -28,12 +28,12 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 <Canvas isColumn>
   <Story name="Input - email">
     {`
-      <input type="email" placeholder="jellycake@marshmallow.com">
+      <label>label <input type="email" placeholder="jellycake@marshmallow.com"></label>
     `}
   </Story>
   <Story name="Input - email (disabled)">
     {`
-      <input type="email" placeholder="jellycake@marshmallow.com" disabled>
+      <label>label <input type="email" placeholder="jellycake@marshmallow.com" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -43,12 +43,12 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 <Canvas isColumn>
   <Story name="Input - number">
     {`
-      <input type="number" placeholder="123456789">
+      <label>label <input type="number" placeholder="123456789"></label>
     `}
   </Story>
   <Story name="Input - number (disabled)">
     {`
-      <input type="number" placeholder="123456789" disabled>
+      <label>label <input type="number" placeholder="123456789" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -58,12 +58,12 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 <Canvas isColumn>
   <Story name="Input - range">
     {`
-      <input type="range" min="0" max="10" step="1">
+      <label>label <input type="range" min="0" max="10" step="1"></label>
     `}
   </Story>
   <Story name="Input - range (disabled)">
     {`
-      <input type="range" min="0" max="10" step="1" disabled>
+      <label>label <input type="range" min="0" max="10" step="1" disabled></label>
     `}
   </Story>
 </Canvas>
@@ -73,12 +73,12 @@ You may find [Base/Forms](/docs/base-forms--fieldset) more informative.
 <Canvas isColumn>
   <Story name="Textarea">
     {`
-      <textarea rows="5" cols="30" placeholder="Placeholder text">Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea>
+      <label>label <textarea rows="5" cols="30" placeholder="Placeholder text">Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea></label>
     `}
   </Story>
   <Story name="Textarea (disabled)">
     {`
-      <textarea rows="5" cols="30" placeholder="Placeholder text" disabled>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea>
+      <label>label <textarea rows="5" cols="30" placeholder="Placeholder text" disabled>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea></label>
     `}
   </Story>
 </Canvas>
diff --git a/scss/bitstyles/base/select/select.stories.mdx b/scss/bitstyles/base/select/select.stories.mdx
index 49a2b47f7..3a6b80233 100644
--- a/scss/bitstyles/base/select/select.stories.mdx
+++ b/scss/bitstyles/base/select/select.stories.mdx
@@ -7,29 +7,35 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 <Canvas isColumn>
   <Story name="Select">
     {`
-      <select>
-        <option value="value1" selected>Long option text to see some truncation especially in smaller viewports</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
+      <label>label
+        <select>
+          <option value="value1" selected>Long option text to see some truncation especially in smaller viewports</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+      </label
     `}
   </Story>
   <Story name="Select (disabled)">
     {`
-      <select disabled>
-        <option value="value1" selected>Long option text to see some truncation especially in smaller viewports</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
+      <label>label
+        <select disabled>
+          <option value="value1" selected>Long option text to see some truncation especially in smaller viewports</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+      </label
     `}
   </Story>
   <Story name="Select (invalid)">
     {`
-      <select required>
-        <option value="" disabled hidden selected>Please select</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
+      <label>label
+        <select required>
+          <option value="" disabled hidden selected>Please select</option>
+          <option value="value2">Value 2</option>
+          <option value="value3">Value 3</option>
+        </select>
+      </label
     `}
   </Story>
 </Canvas>
diff --git a/scss/bitstyles/ui/app-layouts.stories.mdx b/scss/bitstyles/ui/app-layouts.stories.mdx
index d98d373fc..71efe9c0d 100644
--- a/scss/bitstyles/ui/app-layouts.stories.mdx
+++ b/scss/bitstyles/ui/app-layouts.stories.mdx
@@ -204,27 +204,27 @@ Sidebar, header, and content that uses all available space.
                   </ul>
                 </div>
               </div>
-              <ul class="u-list-none u-flex u-overflow-x-auto l-items-end a-button--tab-container u-margin-m-bottom" role="tablist" aria-label="Patient data">
-                <li class="u-margin-s2-right">
-                  <button class="a-button a-button--tab" role="tab" aria-selected="true" aria-controls="tab-panel-1" id="tab-1" tabindex="0">
-                    Personal details
-                  </button>
-                </li>
-                <li class="u-margin-s2-right">
-                  <button class="a-button a-button--tab" role="tab" aria-selected="false" aria-controls="tab-panel-2" id="tab-2" tabindex="0">
-                    Anamnese
-                  </button>
-                </li>
-                <li class="u-margin-s2-right">
-                  <button class="a-button a-button--tab" role="tab" aria-selected="false" aria-controls="tab-panel-3" id="tab-3" tabindex="0">
-                    Appointment history
-                  </button>
-                </li>
-              </ul>
+              <div class="u-list-none u-flex u-overflow-x-auto l-items-end a-button--tab-container u-margin-m-bottom" role="tablist" aria-label="Patient data">
+                <button class="a-button a-button--tab u-margin-s2-right" role="tab" aria-selected="true" aria-controls="tab-panel-1" id="tab-1" tabindex="0">
+                  Personal details
+                </button>
+                <button class="a-button a-button--tab u-margin-s2-right" role="tab" aria-selected="false" aria-controls="tab-panel-2" id="tab-2" tabindex="0">
+                  Anamnese
+                </button>
+                <button class="a-button a-button--tab u-margin-s2-right" role="tab" aria-selected="false" aria-controls="tab-panel-3" id="tab-3" tabindex="0">
+                  Appointment history
+                </button>
+              </div>
             </div>
           </header>
           <div class="a-content a-content--full u-padding-l2-y u-flex-grow-1 u-overflow-y-auto">
             <h2 class="u-sr-only">Users</h2>
+            <div id="tab-panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
+            </div>
+            <div id="tab-panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
+            </div>
+            <div id="tab-panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
+            </div>
             <form action="" method="POST" role="search" class="u-margin-m-bottom u-flex">
               <h3 class="u-sr-only">Filter results</h3>
               <ul class="o-joined-ui u-flex u-list-none">
@@ -457,27 +457,28 @@ Sidebar, header, and content that uses all available space.
                   </ul>
                 </div>
               </div>
-              <ul class="u-list-none u-flex u-overflow-x-auto l-items-end a-button--tab-container u-margin-m-bottom" role="tablist" aria-label="Patient data">
-                <li class="u-margin-s2-right">
-                  <button class="a-button a-button--tab" role="tab" aria-selected="true" aria-controls="tab-panel-1" id="tab-1" tabindex="0">
-                    Personal details
-                  </button>
-                </li>
-                <li class="u-margin-s2-right">
-                  <button class="a-button a-button--tab" role="tab" aria-selected="false" aria-controls="tab-panel-2" id="tab-2" tabindex="0">
-                    Anamnese
-                  </button>
-                </li>
-                <li class="u-margin-s2-right">
-                  <button class="a-button a-button--tab" role="tab" aria-selected="false" aria-controls="tab-panel-3" id="tab-3" tabindex="0">
-                    Appointment history
-                  </button>
-                </li>
-              </ul>
+              <div class="u-list-none u-flex u-overflow-x-auto l-items-end a-button--tab-container u-margin-m-bottom" role="tablist" aria-label="Patient data">
+                <button class="a-button a-button--tab u-margin-s2-right" role="tab" aria-selected="true" aria-controls="tab-panel-1" id="tab-1" tabindex="0">
+                  Personal details
+                </button>
+                <button class="a-button a-button--tab u-margin-s2-right" role="tab" aria-selected="false" aria-controls="tab-panel-2" id="tab-2" tabindex="0">
+                  Anamnese
+                </button>
+                <button class="a-button a-button--tab u-margin-s2-right" role="tab" aria-selected="false" aria-controls="tab-panel-3" id="tab-3" tabindex="0">
+                  Appointment history
+                </button>
+              </div>
             </div>
           </header>
           <div class="u-flex-grow-1 u-overflow-y-auto u-grid u-gap-m u-grid-cols-2@xl a-content a-content--full u-margin-0">
             <div class="u-padding-l2-y">
+              <h2 class="u-sr-only">Users</h2>
+              <div id="tab-panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
+              </div>
+              <div id="tab-panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
+              </div>
+              <div id="tab-panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
+              </div>
               <form action="" method="POST" role="search" class="u-margin-m-bottom u-flex">
                 <h3 class="u-sr-only">Filter results</h3>
                 <ul class="o-joined-ui u-flex u-list-none">
diff --git a/scss/bitstyles/ui/filter.stories.mdx b/scss/bitstyles/ui/filter.stories.mdx
index 2e4bc7726..c329e478d 100644
--- a/scss/bitstyles/ui/filter.stories.mdx
+++ b/scss/bitstyles/ui/filter.stories.mdx
@@ -76,7 +76,7 @@ When a user wants to filter a list of objects by fields which have a limited num
                 type="button"
                 class="a-button a-button--outline"
                 title="Filter by category"
-                aria-controls="dropdown-1"
+                aria-controls="dropdown-2"
                 @click="dropdownOpen = !dropdownOpen"
                 :aria-expanded="dropdownOpen"
               >
@@ -96,7 +96,7 @@ When a user wants to filter a list of objects by fields which have a limited num
                 x-transition:leave-end="is-off-screen"
                 @click.away="dropdownOpen = false"
                 class="a-dropdown a-dropdown--right u-overflow-y-auto u-list-none u-margin-s2-top"
-                id="dropdown-1"
+                id="dropdown-2"
               >
                 <li>
                   <label class="a-button a-button--transparent u-flex u-items-center">
@@ -338,7 +338,7 @@ When giving the user filters by category and free text, place the free text sear
                 x-transition:leave-end="is-off-screen"
                 @click.away="dropdownOpen = false"
                 class="a-dropdown a-dropdown--right u-overflow-y-auto u-list-none u-margin-s2-top"
-                id="dropdown-1"
+                id="dropdown-2"
               >
                 <li>
                   <label class="a-button a-button--transparent u-flex u-items-center">
diff --git a/scss/bitstyles/ui/forms.stories.mdx b/scss/bitstyles/ui/forms.stories.mdx
index 84aa812c9..bd28a3f0d 100644
--- a/scss/bitstyles/ui/forms.stories.mdx
+++ b/scss/bitstyles/ui/forms.stories.mdx
@@ -158,7 +158,7 @@ This form has the commonly-required fields for creating an account. Note the wor
               <input id="email" type="email" autocomplete="email" />
             </li>
             <li class="u-margin-m-bottom">
-              <label for="password">Password</label>
+              <label for="new-password">Password</label>
               <input id="new-password" type="password" autocomplete="new-password" />
             </li>
             <li class="u-margin-m-bottom">
@@ -343,6 +343,7 @@ The heights of selects, inputs, and buttons should all match, allowing them to b
           <input type="search" id="filter" placeholder="Username or email…" />
         </li>
         <li class="u-margin-s4-right">
+          <label for="type">Account type</label>
           <select id="type">
             <option value="user">User</option>
             <option value="admin">Admin</option>
diff --git a/scss/bitstyles/ui/stats.stories.mdx b/scss/bitstyles/ui/stats.stories.mdx
index edf81a96d..2a61d742c 100644
--- a/scss/bitstyles/ui/stats.stories.mdx
+++ b/scss/bitstyles/ui/stats.stories.mdx
@@ -58,7 +58,7 @@ Highlighting a few statistics presents us the opportunity to give context and in
   <Story name="Stats (with change indicators)">
     {`
       <div class="a-content">
-        <dl class="u-grid u-grid-cols-3@m u-gap-m">
+        <div class="u-grid u-grid-cols-3@m u-gap-m">
           <div class="a-card u-flex u-items-center">
             <div class="u-flex--shrink-0 u-margin-s2-right">
               <div class="a-badge a-badge--danger u-padding-l2">
@@ -69,8 +69,8 @@ Highlighting a few statistics presents us the opportunity to give context and in
               </div>
             </div>
             <div>
-              <dt class="u-font-medium u-h6 u-fg-grayscale-light-1">In storage</dt>
-              <dd class="u-h2 u-font-bold u-line-height-min">104</dd>
+              <div class="u-font-medium u-h6 u-fg-grayscale-light-1">In storage</div>
+              <div class="u-h2 u-font-bold u-line-height-min">104</div>
             </div>
           </div>
           <div class="a-card u-flex u-items-center">
@@ -83,8 +83,8 @@ Highlighting a few statistics presents us the opportunity to give context and in
               </div>
             </div>
             <div>
-              <dt class="u-font-medium u-h6 u-fg-grayscale-light-1">In transit</dt>
-              <dd class="u-h2 u-font-bold u-line-height-min">32</dd>
+              <div class="u-font-medium u-h6 u-fg-grayscale-light-1">In transit</div>
+              <div class="u-h2 u-font-bold u-line-height-min">32</div>
             </div>
           </div>
           <div class="a-card u-flex u-items-center">
@@ -97,11 +97,11 @@ Highlighting a few statistics presents us the opportunity to give context and in
               </div>
             </div>
             <div>
-              <dt class="u-font-medium u-h6 u-fg-grayscale-light-1">Submitted</dt>
-              <dd class="u-h2 u-font-bold u-line-height-min">379</dd>
+              <div class="u-font-medium u-h6 u-fg-grayscale-light-1">Submitted</div>
+              <div class="u-h2 u-font-bold u-line-height-min">379</div>
             </div>
           </div>
-        </dl>
+        </div>
       </div>
     `}
   </Story>
@@ -113,7 +113,7 @@ As in this next example, the change indicators could be replaced by static icono
   <Story name="Stats (with iconography)">
     {`
       <div class="a-content">
-        <dl class="u-grid u-grid-cols-3@m u-gap-m">
+        <div class="u-grid u-grid-cols-3@m u-gap-m">
           <div class="a-card u-flex u-items-center">
             <div class="u-flex--shrink-0 u-margin-s2-right">
               <div class="a-badge a-badge--danger u-padding-m">
@@ -123,8 +123,8 @@ As in this next example, the change indicators could be replaced by static icono
               </div>
             </div>
             <div>
-              <dt class="u-font-medium u-h6 u-fg-grayscale-light-1">In storage</dt>
-              <dd class="u-h2 u-font-bold u-line-height-min">104</dd>
+              <div class="u-font-medium u-h6 u-fg-grayscale-light-1">In storage</div>
+              <div class="u-h2 u-font-bold u-line-height-min">104</div>
             </div>
           </div>
           <div class="a-card u-flex u-items-center">
@@ -136,8 +136,8 @@ As in this next example, the change indicators could be replaced by static icono
               </div>
             </div>
             <div>
-              <dt class="u-font-medium u-h6 u-fg-grayscale-light-1">In transit</dt>
-              <dd class="u-h2 u-font-bold u-line-height-min">32</dd>
+              <div class="u-font-medium u-h6 u-fg-grayscale-light-1">In transit</div>
+              <div class="u-h2 u-font-bold u-line-height-min">32</div>
             </div>
           </div>
           <div class="a-card u-flex u-items-center">
@@ -150,11 +150,11 @@ As in this next example, the change indicators could be replaced by static icono
               </div>
             </div>
             <div>
-              <dt class="u-font-medium u-h6 u-fg-grayscale-light-1">Submitted</dt>
-              <dd class="u-h2 u-font-bold u-line-height-min">379</dd>
+              <div class="u-font-medium u-h6 u-fg-grayscale-light-1">Submitted</div>
+              <div class="u-h2 u-font-bold u-line-height-min">379</div>
             </div>
           </div>
-        </dl>
+        </div>
       </div>
     `}
   </Story>
diff --git a/scss/bitstyles/ui/tabs.stories.mdx b/scss/bitstyles/ui/tabs.stories.mdx
index ae69b5094..c36b1cf63 100644
--- a/scss/bitstyles/ui/tabs.stories.mdx
+++ b/scss/bitstyles/ui/tabs.stories.mdx
@@ -51,23 +51,17 @@ Also note the differences in attributes of selected/deselected tabs (`aria-selec
     {`
       <div class="u-bg-grayscale-light-3 u-padding-l3-top">
         <div class="a-content">
-          <ul class="u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist" aria-label="Patient data">
-            <li class="u-margin-s2-right">
-              <button class="a-button a-button--tab" role="tab" aria-selected="true" aria-controls="tab-panel-1" id="tab-1" tabindex="0">
-                Personal details
-              </button>
-            </li>
-            <li class="u-margin-s2-right">
-              <button class="a-button a-button--tab" role="tab" aria-selected="false" aria-controls="tab-panel-2" id="tab-2" tabindex="0">
-                Anamnese
-              </button>
-            </li>
-            <li class="u-margin-s2-right">
-              <button class="a-button a-button--tab" role="tab" aria-selected="false" aria-controls="tab-panel-3" id="tab-3" tabindex="0">
-                Appointment history
-              </button>
-            </li>
-          </ul>
+          <div class="u-list-none u-flex u-flex-wrap u-items-end a-button--tab-container u-margin-m-bottom" role="tablist" aria-label="Patient data">
+            <button class="a-button a-button--tab u-margin-s2-right" role="tab" aria-selected="true" aria-controls="tab-panel-1" id="tab-1" tabindex="0">
+              Personal details
+            </button>
+            <button class="a-button a-button--tab u-margin-s2-right" role="tab" aria-selected="false" aria-controls="tab-panel-2" id="tab-2" tabindex="0">
+              Anamnese
+            </button>
+            <button class="a-button a-button--tab u-margin-s2-right" role="tab" aria-selected="false" aria-controls="tab-panel-3" id="tab-3" tabindex="0">
+              Appointment history
+            </button>
+          </div>
         </div>
       </div>
       <div class="a-content u-padding--top">
diff --git a/scss/bitstyles/utilities/overflow/overflow.stories.mdx b/scss/bitstyles/utilities/overflow/overflow.stories.mdx
index a4ada6493..5beacbcc5 100644
--- a/scss/bitstyles/utilities/overflow/overflow.stories.mdx
+++ b/scss/bitstyles/utilities/overflow/overflow.stories.mdx
@@ -13,6 +13,7 @@ By default `hidden`, `auto`, and `scroll` values are available, at all direction
     {`
       <div class="u-overflow-hidden u-bg-brand-2" style="height: 5rem">
         u-overflow-x-auto Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly gingerbread. Pastry gummi bears liquorice tart cotton candy marshmallow. Ice cream cotton candy chocolate cake cookie. Bonbon candy jelly-o sugar plum cotton candy carrot cake icing ice cream. Sweet chocolate marzipan. Candy canes danish cake carrot cake bonbon. Gummi bears sesame snaps tart bear claw pie chocolate bar. Ice cream candy canes sugar plum cookie. Macaroon biscuit biscuit carrot cake liquorice. Muffin pudding gingerbread powder jelly-o chocolate bar powder jelly beans toffee.
+         <a href="https://duckduckgo.com">DDG</a>
       </div>
     `}
   </Story>
@@ -20,6 +21,7 @@ By default `hidden`, `auto`, and `scroll` values are available, at all direction
     {`
       <div class="u-overflow-scroll u-bg-brand-2" style="height: 5rem">
         u-overflow-x-auto Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly gingerbread. Pastry gummi bears liquorice tart cotton candy marshmallow. Ice cream cotton candy chocolate cake cookie. Bonbon candy jelly-o sugar plum cotton candy carrot cake icing ice cream. Sweet chocolate marzipan. Candy canes danish cake carrot cake bonbon. Gummi bears sesame snaps tart bear claw pie chocolate bar. Ice cream candy canes sugar plum cookie. Macaroon biscuit biscuit carrot cake liquorice. Muffin pudding gingerbread powder jelly-o chocolate bar powder jelly beans toffee.
+         <a href="https://duckduckgo.com">DDG</a>
       </div>
     `}
   </Story>
@@ -27,6 +29,7 @@ By default `hidden`, `auto`, and `scroll` values are available, at all direction
     {`
       <div class="u-overflow-auto u-bg-brand-2" style="height: 5rem">
         u-overflow-x-auto Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly gingerbread. Pastry gummi bears liquorice tart cotton candy marshmallow. Ice cream cotton candy chocolate cake cookie. Bonbon candy jelly-o sugar plum cotton candy carrot cake icing ice cream. Sweet chocolate marzipan. Candy canes danish cake carrot cake bonbon. Gummi bears sesame snaps tart bear claw pie chocolate bar. Ice cream candy canes sugar plum cookie. Macaroon biscuit biscuit carrot cake liquorice. Muffin pudding gingerbread powder jelly-o chocolate bar powder jelly beans toffee.
+         <a href="https://duckduckgo.com">DDG</a>
       </div>
     `}
   </Story>
@@ -41,13 +44,14 @@ Commonly we want to limit the height or width of an element, and allow scrolling
     {`
       <div class="u-overflow-y-auto u-bg-brand-2" style="height: 5rem">
         u-overflow-x-auto Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer. Gummies cheesecake oat cake sugar plum icing cupcake tiramisu bonbon. Cotton candy chupa chups tootsie roll chupa chups cotton candy liquorice jelly gingerbread. Pastry gummi bears liquorice tart cotton candy marshmallow. Ice cream cotton candy chocolate cake cookie. Bonbon candy jelly-o sugar plum cotton candy carrot cake icing ice cream. Sweet chocolate marzipan. Candy canes danish cake carrot cake bonbon. Gummi bears sesame snaps tart bear claw pie chocolate bar. Ice cream candy canes sugar plum cookie. Macaroon biscuit biscuit carrot cake liquorice. Muffin pudding gingerbread powder jelly-o chocolate bar powder jelly beans toffee.
+         <a href="https://duckduckgo.com">DDG</a>
       </div>
     `}
   </Story>
   <Story name="u-overflow-x-auto">
     {`
       <div class="u-overflow-x-auto u-bg-brand-2" style="width: 10rem">
-        u-overflow-x-auto Jelly&nbsp;cake&nbsp;marshmallow.&nbsp;Pie&nbsp;cotton&nbsp;candy&nbsp;chupa&nbsp;chups&nbsp;marzipan&nbsp;liquorice&nbsp;cheesecake&nbsp;wafer.
+        u-overflow-x-auto Jelly&nbsp;cake&nbsp;marshmallow.&nbsp;Pie&nbsp;cotton&nbsp;candy&nbsp;chupa&nbsp;chups&nbsp;marzipan&nbsp;liquorice&nbsp;cheesecake&nbsp;wafer. <a href="https://duckduckgo.com">DDG</a>
       </div>
     `}
   </Story>