From 4ada24cc425592406237fedc7e43c0d30dcfbc8d Mon Sep 17 00:00:00 2001
From: shruti862 <shrutiyadav862@gmail.com>
Date: Thu, 12 Dec 2024 18:18:14 +0530
Subject: [PATCH] new commit

---
 docs/assets/definitions.scss                  |  3 +-
 docs/common/DocsDoNot.vue                     |  8 ++-
 .../common/DocsPageTemplate/SideNav/index.vue |  2 +-
 docs/common/DocsPageTemplate/index.vue        |  2 +-
 .../DocsPageTemplate/jsdocs/EventsTable.vue   |  4 +-
 .../DocsPageTemplate/jsdocs/MethodsTable.vue  |  4 +-
 .../DocsPageTemplate/jsdocs/PropsTable.vue    |  4 +-
 .../DocsPageTemplate/jsdocs/SlotsTable.vue    |  4 +-
 docs/common/DocsShowCode/webpack-loader.js    |  9 ++--
 docs/pages/appbars/index.vue                  | 26 +++++----
 docs/pages/buttons.vue                        |  2 +-
 docs/pages/colors.vue                         | 28 +++++++---
 docs/pages/errors/index.vue                   | 34 +++++++-----
 docs/pages/glossary/index.vue                 |  8 ++-
 docs/pages/icons/IconTable.vue                | 24 ++++++---
 docs/pages/kcard.vue                          |  2 +-
 docs/pages/kcardgrid.vue                      |  4 +-
 docs/pages/kemptyplaceholder.vue              | 44 +++++++++++----
 docs/pages/kimg.vue                           | 16 ++++--
 docs/pages/klistwithoverflow.vue              |  2 +-
 docs/pages/klogo.vue                          | 20 +++++--
 docs/pages/ktabs.vue                          | 24 ++++++---
 docs/pages/ktabslist.vue                      | 12 +++--
 docs/pages/layout/index.vue                   | 10 ++--
 docs/pages/menus/index.vue                    | 24 ++++++---
 docs/pages/modals/index.vue                   | 52 +++++++++++-------
 docs/pages/pageheader/index.vue               |  4 +-
 docs/pages/playground/cards.vue               |  4 +-
 docs/pages/styling/index.vue                  | 28 +++++++---
 docs/pages/tabs.vue                           | 12 +++--
 docs/pages/textfields/index.vue               | 54 ++++++++++++-------
 docs/pages/usekliveregion.vue                 |  8 ++-
 docs/pages/usekshow.vue                       | 10 ++--
 jest.conf/index.js                            |  6 ++-
 jest.conf/setup.js                            |  6 +--
 lib/KDateRange/KDateCalendar.vue              |  8 +--
 lib/KDateRange/KDateDay.vue                   | 16 +++---
 .../__tests__/ValidationMachine.spec.js       |  8 +--
 lib/KDateRange/index.vue                      |  2 +-
 lib/KIcon/index.vue                           |  2 +-
 lib/KImg/__tests__/KImg.spec.js               |  2 +-
 lib/KModal.vue                                | 15 ++----
 lib/KRadioButton.vue                          |  2 +-
 lib/KSelect/index.vue                         | 37 +++++++++----
 lib/KTable/index.vue                          | 10 ++--
 lib/KTable/useSorting/__tests__/index.spec.js | 14 ++---
 lib/KTable/useSorting/index.js                |  2 +-
 lib/KTooltip/Popper.vue                       |  2 +-
 lib/buttons-and-links/buttonMixin.js          |  2 +-
 lib/buttons-and-links/buttons.scss            |  7 +--
 lib/cards/KCard.vue                           |  6 +--
 lib/cards/KCardGrid.vue                       |  2 +-
 lib/cards/useGridLayout.js                    |  2 +-
 lib/cards/useGridLoading.js                   |  4 +-
 lib/cards/utils.js                            |  2 +-
 lib/composables/_useOverlay/index.js          |  2 +-
 lib/grids/KFixedGridItem.vue                  |  2 +-
 lib/grids/test/KFixedGrid.spec.js             |  2 +-
 lib/loaders/KCircularLoader.vue               |  4 +-
 lib/styles/darkenColors.js                    | 12 +++--
 lib/styles/definitions.scss                   | 12 ++---
 lib/styles/theme.js                           |  2 +-
 lib/styles/trackInputModality.js              | 12 ++---
 lib/tabs/KTabsList.vue                        |  4 +-
 lib/tabs/__tests__/KTabsList.spec.js          |  4 +-
 lib/utils/focusManagement.js                  |  2 +-
 nuxt.config.js                                |  3 +-
 utils/extractApi.js                           |  2 +-
 utils/extractEnvironment.js                   |  2 +-
 utils/extractRstIcons.js                      |  4 +-
 70 files changed, 457 insertions(+), 261 deletions(-)

diff --git a/docs/assets/definitions.scss b/docs/assets/definitions.scss
index 189800664..d5b47a33d 100644
--- a/docs/assets/definitions.scss
+++ b/docs/assets/definitions.scss
@@ -4,6 +4,5 @@ $code-color: #696680;
 $link-color: #368d74;
 $link-hover-color: #26614d;
 $selection-color: #badbd2;
-$basic-transition: color 0.25s ease,
-  fill 0.25s ease;
+$basic-transition: color 0.25s ease, fill 0.25s ease;
 $nav-width: 260px;
diff --git a/docs/common/DocsDoNot.vue b/docs/common/DocsDoNot.vue
index 0f2bf3588..2dbc2dd1b 100644
--- a/docs/common/DocsDoNot.vue
+++ b/docs/common/DocsDoNot.vue
@@ -5,7 +5,9 @@
       v-if="$slots.do"
       class="show"
     >
-      <div class="header"><span class="do mark">✔</span> Do</div>
+      <div class="header">
+        <span class="do mark">✔</span> Do
+      </div>
       <div class="content">
         <slot name="do"></slot>
       </div>
@@ -14,7 +16,9 @@
       v-if="$slots.not"
       class="show"
     >
-      <div class="header"><span class="mark not">✘</span> Don't</div>
+      <div class="header">
+        <span class="mark not">✘</span> Don't
+      </div>
       <div class="content">
         <slot name="not"></slot>
       </div>
diff --git a/docs/common/DocsPageTemplate/SideNav/index.vue b/docs/common/DocsPageTemplate/SideNav/index.vue
index 8a66d9619..217b3df4f 100644
--- a/docs/common/DocsPageTemplate/SideNav/index.vue
+++ b/docs/common/DocsPageTemplate/SideNav/index.vue
@@ -67,7 +67,7 @@
           // otherwise, check for matching pages by title and keywords
           else {
             const matchingPages = section.pages.filter(page =>
-              matches(this.terms, page.title + page.keywords.join(' ')),
+              matches(this.terms, page.title + page.keywords.join(' '))
             );
             if (matchingPages.length) {
               toc.push(section.clone({ pages: matchingPages }));
diff --git a/docs/common/DocsPageTemplate/index.vue b/docs/common/DocsPageTemplate/index.vue
index 40e874a84..854be74fe 100644
--- a/docs/common/DocsPageTemplate/index.vue
+++ b/docs/common/DocsPageTemplate/index.vue
@@ -60,7 +60,7 @@
         node =>
           node.componentOptions &&
           node.componentOptions.tag === DocsPageSection.name &&
-          node.componentOptions.propsData.anchor,
+          node.componentOptions.propsData.anchor
       )
       .map(node => node.componentOptions.propsData);
   }
diff --git a/docs/common/DocsPageTemplate/jsdocs/EventsTable.vue b/docs/common/DocsPageTemplate/jsdocs/EventsTable.vue
index a024a2394..93038f640 100644
--- a/docs/common/DocsPageTemplate/jsdocs/EventsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/EventsTable.vue
@@ -4,7 +4,9 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">Description</th>
+        <th class="stretch">
+          Description
+        </th>
       </tr>
     </thead>
     <tbody>
diff --git a/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue b/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue
index 8d871c2d5..72af96c5e 100644
--- a/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue
@@ -4,7 +4,9 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">Description</th>
+        <th class="stretch">
+          Description
+        </th>
       </tr>
     </thead>
     <tbody>
diff --git a/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue b/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue
index a9e6f4103..02e038588 100644
--- a/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue
@@ -4,7 +4,9 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">Description</th>
+        <th class="stretch">
+          Description
+        </th>
         <th>Type</th>
         <th>Default</th>
         <th>Required</th>
diff --git a/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue b/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue
index 7b9b54171..4a7cd754d 100644
--- a/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue
@@ -4,7 +4,9 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">Description</th>
+        <th class="stretch">
+          Description
+        </th>
       </tr>
     </thead>
     <tbody>
diff --git a/docs/common/DocsShowCode/webpack-loader.js b/docs/common/DocsShowCode/webpack-loader.js
index 3a9bda661..39799e5f5 100644
--- a/docs/common/DocsShowCode/webpack-loader.js
+++ b/docs/common/DocsShowCode/webpack-loader.js
@@ -1,11 +1,14 @@
 var TAG_PATTERN = new RegExp(`<DocsShowCode(.*?)>(.*?)</DocsShowCode>`, 'gms');
 
 function escape(unsafe) {
-  return (unsafe || '').replace(/&/gm, '&amp;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;');
+  return (unsafe || '')
+    .replace(/&/gm, '&amp;')
+    .replace(/</gm, '&lt;')
+    .replace(/>/gm, '&gt;');
 }
 
-module.exports = function (content) {
-  return content.replace(TAG_PATTERN, function (_, attributes, innerText) {
+module.exports = function(content) {
+  return content.replace(TAG_PATTERN, function(_, attributes, innerText) {
     return `<DocsShowCode${attributes}>${escape(innerText)}</DocsShowCode>`;
   });
 };
diff --git a/docs/pages/appbars/index.vue b/docs/pages/appbars/index.vue
index d54ddb1a4..cf653de15 100644
--- a/docs/pages/appbars/index.vue
+++ b/docs/pages/appbars/index.vue
@@ -101,12 +101,16 @@
 
     <DocsDoNot>
       <template #do>
-        <img src="./do-1.png" >
-        <p class="do-dont">Use general titles in top bars</p>
+        <img src="./do-1.png">
+        <p class="do-dont">
+          Use general titles in top bars
+        </p>
       </template>
       <template #not>
-        <img src="./dont-1.png" >
-        <p class="do-dont">Use user-generated text in top bars</p>
+        <img src="./dont-1.png">
+        <p class="do-dont">
+          Use user-generated text in top bars
+        </p>
       </template>
     </DocsDoNot>
 
@@ -119,7 +123,7 @@
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./exception-1.png" >
+        <img src="./exception-1.png">
         <p class="do-dont">
           Change top app bar color to white if visual contrast is needed between the background and
           action buttons
@@ -129,15 +133,19 @@
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./exception-2.png" >
-        <p class="do-dont">Place learning aids in top bars</p>
+        <img src="./exception-2.png">
+        <p class="do-dont">
+          Place learning aids in top bars
+        </p>
       </template>
     </DocsDoNot>
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./exception-3.png" >
-        <p class="do-dont">Place custom search fields in top bars</p>
+        <img src="./exception-3.png">
+        <p class="do-dont">
+          Place custom search fields in top bars
+        </p>
       </template>
     </DocsDoNot>
 
diff --git a/docs/pages/buttons.vue b/docs/pages/buttons.vue
index 9539b8559..bd544e5f0 100644
--- a/docs/pages/buttons.vue
+++ b/docs/pages/buttons.vue
@@ -107,7 +107,7 @@
             appearance="raised-button"
           />
         </KButtonGroup>
-        <br >
+        <br>
         <KButtonGroup>
           <KButton
             text="Primary"
diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
index 389bbf537..d9143e1c6 100644
--- a/docs/pages/colors.vue
+++ b/docs/pages/colors.vue
@@ -63,13 +63,17 @@
       </p>
 
       <DocsShowCode language="html">
-        <div :style="{ color: $themeTokens.error }">This is an error</div>
+        <div :style="{ color: $themeTokens.error }">
+          This is an error
+        </div>
       </DocsShowCode>
 
       <p>This will display:</p>
 
       <DocsShow>
-        <div :style="{ color: $themeTokens.error }">This is an error</div>
+        <div :style="{ color: $themeTokens.error }">
+          This is an error
+        </div>
       </DocsShow>
 
       <p>Move style definitions from the template to computed props if the style gets complex.</p>
@@ -83,7 +87,7 @@
       </p>
 
       <DocsShowCode language="html">
-        <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })" >
+        <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })">
       </DocsShowCode>
 
       <p>
@@ -108,10 +112,18 @@
       </p>
 
       <DocsShowCode language="html">
-        <div :style="{ backgroundColor: $themePalette.red.v_600 }">base</div>
-        <div :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">$darken1</div>
-        <div :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">$darken2</div>
-        <div :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">$darken3</div>
+        <div :style="{ backgroundColor: $themePalette.red.v_600 }">
+          base
+        </div>
+        <div :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
+          $darken1
+        </div>
+        <div :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
+          $darken2
+        </div>
+        <div :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
+          $darken3
+        </div>
       </DocsShowCode>
       <DocsShow>
         <div
@@ -501,7 +513,7 @@
         for (const color in this.$themePalette) {
           if (color !== 'grey' && typeof this.$themePalette[color] === 'object') {
             palette.push(
-              Object.keys(this.$themePalette[color]).map(variant => `palette.${color}.${variant}`),
+              Object.keys(this.$themePalette[color]).map(variant => `palette.${color}.${variant}`)
             );
           }
         }
diff --git a/docs/pages/errors/index.vue b/docs/pages/errors/index.vue
index ed364eec3..4609bf5c6 100644
--- a/docs/pages/errors/index.vue
+++ b/docs/pages/errors/index.vue
@@ -50,7 +50,9 @@
       </p>
       <DocsDoNot>
         <template #do>
-          <p class="do-dont">“Sorry, something went wrong. <u>Refresh page</u>"</p>
+          <p class="do-dont">
+            “Sorry, something went wrong. <u>Refresh page</u>"
+          </p>
         </template>
         <template #not>
           <p class="do-dont">
@@ -68,10 +70,14 @@
       </p>
       <DocsDoNot>
         <template #do>
-          <p class="do-dont">“Please enter a valid email”</p>
+          <p class="do-dont">
+            “Please enter a valid email”
+          </p>
         </template>
         <template #not>
-          <p class="do-dont">“WARNING!! You didn’t fill this out”</p>
+          <p class="do-dont">
+            “WARNING!! You didn’t fill this out”
+          </p>
         </template>
       </DocsDoNot>
       <p>
@@ -80,10 +86,14 @@
       </p>
       <DocsDoNot>
         <template #do>
-          <p class="do-dont">“Storage limit reached”</p>
+          <p class="do-dont">
+            “Storage limit reached”
+          </p>
         </template>
         <template #not>
-          <p class="do-dont">“Whoops! Looks like the tank is too full &#x1f60e;"</p>
+          <p class="do-dont">
+            “Whoops! Looks like the tank is too full &#x1f60e;"
+          </p>
         </template>
       </DocsDoNot>
     </DocsPageSection>
@@ -102,27 +112,27 @@
         Banners are appended to the app bar and notify the user about global system errors and/or
         notifications that affect the whole app experience.
       </p>
-      <img src="./banner.png" >
+      <img src="./banner.png">
       <h3>Error summary</h3>
       <p>
         Error summaries should appear at the top of the page and use an alert component. Use them in
         forms or for page-level errors that are not associated with a specific component or location
         on the page.
       </p>
-      <img src="./alert.png" >
+      <img src="./alert.png">
       <h3>Inline error messages</h3>
       <p>
         Place inline error messages in close proximity to where the error occurred. This can be an
         icon only, or icon and text. When paired with text, use <code>KLabeledIcon</code>
       </p>
-      <img src="./inline-error.png" >
+      <img src="./inline-error.png">
       <h3>Page error</h3>
       <p>
         Sometimes pages do not load because of 404 or 500 errors, unsupported browsers, and
         restricted permissions. Users should see a brief explanation of what went wrong and an
         action that might help address the problem.
       </p>
-      <img src="./page.png" >
+      <img src="./page.png">
     </DocsPageSection>
 
     <DocsPageSection
@@ -141,7 +151,7 @@
         the user with context as to what is possible. It should be clear to the user what they need
         to do for the action to become possible.
       </p>
-      <img src="./disable.png" >
+      <img src="./disable.png">
       <p>
         However, forms that create or update data generally should not have a disabled submit button
         and follow our form validation patterns instead.
@@ -156,14 +166,14 @@
         with <code>palette.orange.v_200</code> and informative language of the consequences under
         the current condition.
       </p>
-      <img src="./warning.png" >
+      <img src="./warning.png">
       <h3>Undo</h3>
       <p>
         Modals are helpful for preventing errors but should not be overused since they can disrupt
         user flow. For operations with relatively significant but not critical consequences, provide
         the option to undo an action.
       </p>
-      <img src="./undo.png" >
+      <img src="./undo.png">
       <h3>Good defaults</h3>
       <p>
         Especially for repetitive, common actions, setting configurations to
diff --git a/docs/pages/glossary/index.vue b/docs/pages/glossary/index.vue
index 924fec84b..a3d824b5f 100644
--- a/docs/pages/glossary/index.vue
+++ b/docs/pages/glossary/index.vue
@@ -34,9 +34,13 @@
       <table style="max-width: 1000px">
         <thead>
           <tr>
-            <th style="min-width: 200px">Term</th>
+            <th style="min-width: 200px">
+              Term
+            </th>
             <th>Part of speech</th>
-            <th class="stretch">Description</th>
+            <th class="stretch">
+              Description
+            </th>
           </tr>
         </thead>
         <tbody>
diff --git a/docs/pages/icons/IconTable.vue b/docs/pages/icons/IconTable.vue
index c21256371..ffeb6f82a 100644
--- a/docs/pages/icons/IconTable.vue
+++ b/docs/pages/icons/IconTable.vue
@@ -6,7 +6,9 @@
       class="filter"
     />
 
-    <h3 v-if="general.length">General use</h3>
+    <h3 v-if="general.length">
+      General use
+    </h3>
     <div class="icon-table">
       <IconBlock
         v-for="(aliasList, index) in general"
@@ -16,7 +18,9 @@
       />
     </div>
 
-    <h3 v-if="withColor.length">Aliases with default colors</h3>
+    <h3 v-if="withColor.length">
+      Aliases with default colors
+    </h3>
     <div class="icon-table">
       <IconBlock
         v-for="(aliasList, index) in withColor"
@@ -26,7 +30,9 @@
       />
     </div>
 
-    <h3 v-if="learningActivities.length">Learning activities</h3>
+    <h3 v-if="learningActivities.length">
+      Learning activities
+    </h3>
     <div class="icon-table">
       <IconBlock
         v-for="(aliasList, index) in learningActivities"
@@ -36,7 +42,9 @@
       />
     </div>
 
-    <h3 v-if="resourceCategories.length">Resource categories</h3>
+    <h3 v-if="resourceCategories.length">
+      Resource categories
+    </h3>
     <div class="icon-table">
       <IconBlock
         v-for="(aliasList, index) in resourceCategories"
@@ -121,22 +129,22 @@
               !KolibriIcons[alias].learningActivity &&
               !KolibriIcons[alias].resourceCategory
             );
-          }),
+          })
         ).filter(this.termFilter);
       },
       withColor() {
         return sortedIconAliases(
-          getIconGroups(alias => Boolean(KolibriIcons[alias].defaultColor)),
+          getIconGroups(alias => Boolean(KolibriIcons[alias].defaultColor))
         ).filter(this.termFilter);
       },
       learningActivities() {
         return sortedIconAliases(
-          getIconGroups(alias => Boolean(KolibriIcons[alias].learningActivity)),
+          getIconGroups(alias => Boolean(KolibriIcons[alias].learningActivity))
         ).filter(this.termFilter);
       },
       resourceCategories() {
         return sortedIconAliases(
-          getIconGroups(alias => Boolean(KolibriIcons[alias].resourceCategory)),
+          getIconGroups(alias => Boolean(KolibriIcons[alias].resourceCategory))
         ).filter(this.termFilter);
       },
     },
diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
index 876a09e12..12c51b9b9 100644
--- a/docs/pages/kcard.vue
+++ b/docs/pages/kcard.vue
@@ -186,7 +186,7 @@
             <!-- eslint-enable -->
           </template>
           <template #not>
-            <span>Build cards in such a way<br >that <code>KCard</code> is not a direct child of
+            <span>Build cards in such a way<br>that <code>KCard</code> is not a direct child of
               <code>KCardGrid</code></span>
             <!-- eslint-disable -->
             <DocsShowCode language="html">
diff --git a/docs/pages/kcardgrid.vue b/docs/pages/kcardgrid.vue
index 6c5edc280..16d670a60 100644
--- a/docs/pages/kcardgrid.vue
+++ b/docs/pages/kcardgrid.vue
@@ -856,7 +856,9 @@
           >
             Load (4 s)
           </KButton>
-          <KButton @click="debug = !debug"> Debug: {{ debug ? 'On' : 'Off' }} </KButton>
+          <KButton @click="debug = !debug">
+            Debug: {{ debug ? 'On' : 'Off' }}
+          </KButton>
         </KButtonGroup>
       </div>
 
diff --git a/docs/pages/kemptyplaceholder.vue b/docs/pages/kemptyplaceholder.vue
index bbb169be4..ffa119e35 100644
--- a/docs/pages/kemptyplaceholder.vue
+++ b/docs/pages/kemptyplaceholder.vue
@@ -28,28 +28,50 @@
         <table>
           <thead>
             <tr>
-              <th class="table-text">Username</th>
-              <th class="table-number">Number of exercises</th>
-              <th class="table-number">Average score</th>
+              <th class="table-text">
+                Username
+              </th>
+              <th class="table-number">
+                Number of exercises
+              </th>
+              <th class="table-number">
+                Average score
+              </th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td class="table-text">user_1</td>
-              <td class="table-number">11</td>
-              <td class="table-number">85%</td>
+              <td class="table-text">
+                user_1
+              </td>
+              <td class="table-number">
+                11
+              </td>
+              <td class="table-number">
+                85%
+              </td>
             </tr>
             <tr>
-              <td class="table-text">user_2</td>
-              <td class="table-number">0</td>
+              <td class="table-text">
+                user_2
+              </td>
+              <td class="table-number">
+                0
+              </td>
               <td class="table-number">
                 <KEmptyPlaceholder />
               </td>
             </tr>
             <tr>
-              <td class="table-text">user_3</td>
-              <td class="table-number">5</td>
-              <td class="table-number">100%</td>
+              <td class="table-text">
+                user_3
+              </td>
+              <td class="table-number">
+                5
+              </td>
+              <td class="table-number">
+                100%
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/docs/pages/kimg.vue b/docs/pages/kimg.vue
index a85b8c788..6f135ac60 100644
--- a/docs/pages/kimg.vue
+++ b/docs/pages/kimg.vue
@@ -22,7 +22,9 @@
           image itself.</em>
         If you need to apply dimensions, aspect ratio, etc. directly to the image, you can use
         <code>'fitXY'</code>
-        <DocsInternalLink href="/kimg#prop:scaleType"> scale type </DocsInternalLink>.
+        <DocsInternalLink href="/kimg#prop:scaleType">
+          scale type
+        </DocsInternalLink>.
       </p>
 
       <p>
@@ -70,7 +72,9 @@
       <p>
         When rendered within a block element, the image container fills the parent block element and
         the image scales with the <code>'centerInside'</code>
-        <DocsInternalLink href="/kimg#prop:scaleType"> scale type </DocsInternalLink> by default.
+        <DocsInternalLink href="/kimg#prop:scaleType">
+          scale type
+        </DocsInternalLink> by default.
       </p>
 
       <DocsShowCode language="html">
@@ -125,10 +129,14 @@
         />
       </DocsShowCode>
 
-      <h3 id="scaling">Scaling</h3>
+      <h3 id="scaling">
+        Scaling
+      </h3>
 
       <p>
-        The <DocsInternalLink href="/kimg#prop:scaleType"> scale type </DocsInternalLink> determines
+        The <DocsInternalLink href="/kimg#prop:scaleType">
+          scale type
+        </DocsInternalLink> determines
         how an image scales within the image container.
       </p>
 
diff --git a/docs/pages/klistwithoverflow.vue b/docs/pages/klistwithoverflow.vue
index c8f895293..9b0bfbe98 100644
--- a/docs/pages/klistwithoverflow.vue
+++ b/docs/pages/klistwithoverflow.vue
@@ -201,7 +201,7 @@
         return Array.from({ length: number }, (_, i) =>
           dividerMod && i && i % dividerMod === 0
             ? { type: 'divider' }
-            : { label: `Item ${i + 1}`, icon: 'edit' },
+            : { label: `Item ${i + 1}`, icon: 'edit' }
         );
       },
     },
diff --git a/docs/pages/klogo.vue b/docs/pages/klogo.vue
index 8ff34c83f..67801067b 100644
--- a/docs/pages/klogo.vue
+++ b/docs/pages/klogo.vue
@@ -25,7 +25,9 @@
           :size="150"
         />
         <div style="display: none; width: 100%; text-align: center">
-          <KButton @click="saveSVG('defaultLogoNoBackground')"> Save SVG </KButton>
+          <KButton @click="saveSVG('defaultLogoNoBackground')">
+            Save SVG
+          </KButton>
         </div>
       </DocsShow>
       <DocsShowCode language="html">
@@ -46,7 +48,9 @@
           :size="150"
         />
         <div style="display: none; width: 100%; text-align: center">
-          <KButton @click="saveSVG('defaultLogoWithBackground')"> Save SVG </KButton>
+          <KButton @click="saveSVG('defaultLogoWithBackground')">
+            Save SVG
+          </KButton>
         </div>
       </DocsShow>
       <DocsShowCode language="html">
@@ -68,7 +72,9 @@
           :size="150"
         />
         <div style="display: none; width: 100%; text-align: center">
-          <KButton @click="saveSVG('defaultLogoWithRectBackground')"> Save SVG </KButton>
+          <KButton @click="saveSVG('defaultLogoWithRectBackground')">
+            Save SVG
+          </KButton>
         </div>
       </DocsShow>
       <DocsShowCode language="html">
@@ -115,7 +121,9 @@
             'blackGrey',
           ]"
         >
-          <p :key="`text${colorScheme}`">Color scheme: {{ colorScheme }}</p>
+          <p :key="`text${colorScheme}`">
+            Color scheme: {{ colorScheme }}
+          </p>
           <KLogo
             :ref="`${colorScheme}LogoWithBackground`"
             :key="colorScheme"
@@ -129,7 +137,9 @@
             :key="`button${colorScheme}`"
             style="display: none; width: 100%; text-align: center"
           >
-            <KButton @click="saveSVG(`${colorScheme}LogoWithBackground`)"> Save SVG </KButton>
+            <KButton @click="saveSVG(`${colorScheme}LogoWithBackground`)">
+              Save SVG
+            </KButton>
           </div>
         </template>
       </DocsShow>
diff --git a/docs/pages/ktabs.vue b/docs/pages/ktabs.vue
index f809f5782..6edb5c583 100644
--- a/docs/pages/ktabs.vue
+++ b/docs/pages/ktabs.vue
@@ -13,9 +13,15 @@
           ariaLabel="Coach reports"
           :tabs="tabs"
         >
-          <template #tabLessons> Lessons tab content </template>
-          <template #tabLearners> Learners tab content </template>
-          <template #tabGroups> Groups tab content </template>
+          <template #tabLessons>
+            Lessons tab content
+          </template>
+          <template #tabLearners>
+            Learners tab content
+          </template>
+          <template #tabGroups>
+            Groups tab content
+          </template>
         </KTabs>
       </DocsShow>
 
@@ -46,9 +52,15 @@
           ariaLabel="Coach reports"
           :tabs="tabs"
         >
-          <template #tabLessons> Lessons tab content </template>
-          <template #tabLearners> Learners tab content </template>
-          <template #tabGroups> Groups tab content </template>
+          <template #tabLessons>
+            Lessons tab content
+          </template>
+          <template #tabLearners>
+            Learners tab content
+          </template>
+          <template #tabGroups>
+            Groups tab content
+          </template>
         </KTabs>
       </DocsShowCode>
 
diff --git a/docs/pages/ktabslist.vue b/docs/pages/ktabslist.vue
index 4dd3b87f4..7d9c1a652 100644
--- a/docs/pages/ktabslist.vue
+++ b/docs/pages/ktabslist.vue
@@ -63,9 +63,15 @@
           tabsId="coachReportsTabs"
           :activeTabId="activeTabId"
         >
-          <template #tabLessons> Lessons tab content </template>
-          <template #tabLearners> Learners tab content </template>
-          <template #tabGroups> Groups tab content </template>
+          <template #tabLessons>
+            Lessons tab content
+          </template>
+          <template #tabLearners>
+            Learners tab content
+          </template>
+          <template #tabGroups>
+            Groups tab content
+          </template>
         </KTabsPanel>
       </DocsShowCode>
 
diff --git a/docs/pages/layout/index.vue b/docs/pages/layout/index.vue
index 046ea04e1..b8d742c37 100644
--- a/docs/pages/layout/index.vue
+++ b/docs/pages/layout/index.vue
@@ -64,7 +64,7 @@
         />, described below.
       </p>
       <p>To reduce visual noise, avoid nesting containers in containers.</p>
-      <img src="./containers.png" >
+      <img src="./containers.png">
       <h3>Maximum width</h3>
       <p>
         If a page container contains text, set its maximum width to <code>1000px</code> in order to
@@ -86,7 +86,7 @@
         Use sparingly and reserve them for situations where white space does not properly separate
         elements or groups of elements, such as a table, compact list items, or list sections.
       </p>
-      <img src="./dividers.png" >
+      <img src="./dividers.png">
       <p>
         Dividers may also have internal page container tabs associated with them, such as in Kolibri
         Coach reports and planning pages. These may be added to the design system in the future.
@@ -183,7 +183,7 @@
         The example below shows a small window with four columns. The page container on the left is
         one column wide and the page containers on the right are three columns wide:
       </p>
-      <img src="./nested.png" >
+      <img src="./nested.png">
       <p>
         <strong>Grid items</strong> are a concept specific to Kolibri's grid system, based loosely
         on the
@@ -195,7 +195,7 @@
         each page container on the right, there is a single-column grid item on the left and a
         two-column grid item on the right:
       </p>
-      <img src="./items.png" >
+      <img src="./items.png">
       <p>
         For browser compatibility reasons our grid system is based on <code>inline-block</code> and
         not CSS grids, so the behavior is slightly different and vertical alignment can be somewhat
@@ -327,7 +327,7 @@
         layouts.
       </p>
       <p>The example shown above would probably need to be implemented using nested grids:</p>
-      <img src="./nested2.png" >
+      <img src="./nested2.png">
       <p>
         Here it might make sense to make the outer grid responsive, and implement the inner page
         containers or cards with fixed grids.
diff --git a/docs/pages/menus/index.vue b/docs/pages/menus/index.vue
index e0d52236a..d27089233 100644
--- a/docs/pages/menus/index.vue
+++ b/docs/pages/menus/index.vue
@@ -50,12 +50,16 @@
 
     <DocsDoNot>
       <template #do>
-        <img src="./text-do.png" >
-        <p class="do-dont">Minimize text and rely on interface clarity</p>
+        <img src="./text-do.png">
+        <p class="do-dont">
+          Minimize text and rely on interface clarity
+        </p>
       </template>
       <template #not>
-        <img src="./text-dont.png" >
-        <p class="do-dont">Write repetitive menu option text</p>
+        <img src="./text-dont.png">
+        <p class="do-dont">
+          Write repetitive menu option text
+        </p>
       </template>
     </DocsDoNot>
 
@@ -85,12 +89,16 @@
 
     <DocsDoNot>
       <template #do>
-        <img src="./icon-do.png" >
-        <p class="do-dont">Use iconography as a visual aid for important actions</p>
+        <img src="./icon-do.png">
+        <p class="do-dont">
+          Use iconography as a visual aid for important actions
+        </p>
       </template>
       <template #not>
-        <img src="./icon-dont.png" >
-        <p class="do-dont">Use repetitive iconography in filter menus</p>
+        <img src="./icon-dont.png">
+        <p class="do-dont">
+          Use repetitive iconography in filter menus
+        </p>
       </template>
     </DocsDoNot>
 
diff --git a/docs/pages/modals/index.vue b/docs/pages/modals/index.vue
index 084e54909..4028e8a71 100644
--- a/docs/pages/modals/index.vue
+++ b/docs/pages/modals/index.vue
@@ -45,10 +45,10 @@
       </p>
       <DocsDoNot>
         <template #do>
-          <img src="./modal-title.png" >
+          <img src="./modal-title.png">
         </template>
         <template #not>
-          <img src="./modal-badtitle.png" >
+          <img src="./modal-badtitle.png">
         </template>
       </DocsDoNot>
       <h3>Content</h3>
@@ -150,45 +150,61 @@
     >
       <DocsDoNot>
         <template #do>
-          <img src="./modal.png" >
-          <p class="do-dont">Present one modal at a time</p>
+          <img src="./modal.png">
+          <p class="do-dont">
+            Present one modal at a time
+          </p>
         </template>
         <template #not>
-          <img src="./modal-overlay.png" >
-          <p class="do-dont">Overlay modals on modals</p>
+          <img src="./modal-overlay.png">
+          <p class="do-dont">
+            Overlay modals on modals
+          </p>
         </template>
       </DocsDoNot>
 
       <DocsDoNot>
         <template #do>
-          <img src="./modal-checks.png" >
-          <p class="do-dont">Use modals for simple, singular, focused tasks</p>
+          <img src="./modal-checks.png">
+          <p class="do-dont">
+            Use modals for simple, singular, focused tasks
+          </p>
         </template>
         <template #not>
-          <img src="./modal-table.png" >
-          <p class="do-dont">Insert a table or other complex interactions</p>
+          <img src="./modal-table.png">
+          <p class="do-dont">
+            Insert a table or other complex interactions
+          </p>
         </template>
       </DocsDoNot>
 
       <DocsDoNot>
         <template #do>
-          <img src="./modal-delete.png" >
-          <p class="do-dont">Use language which directly implies the result of the action</p>
+          <img src="./modal-delete.png">
+          <p class="do-dont">
+            Use language which directly implies the result of the action
+          </p>
         </template>
         <template #not>
-          <img src="./modal-alert.png" >
-          <p class="do-dont">Use ambiguous language for titles, content, and actions</p>
+          <img src="./modal-alert.png">
+          <p class="do-dont">
+            Use ambiguous language for titles, content, and actions
+          </p>
         </template>
       </DocsDoNot>
 
       <DocsDoNot>
         <template #do>
-          <img src="./modal.png" >
-          <p class="do-dont">Present a single way to continue through and exit the modal</p>
+          <img src="./modal.png">
+          <p class="do-dont">
+            Present a single way to continue through and exit the modal
+          </p>
         </template>
         <template #not>
-          <img src="./modal-back.png" >
-          <p class="do-dont">Use an ‘X’ button, back, or other duplicative actions</p>
+          <img src="./modal-back.png">
+          <p class="do-dont">
+            Use an ‘X’ button, back, or other duplicative actions
+          </p>
         </template>
       </DocsDoNot>
     </DocsPageSection>
diff --git a/docs/pages/pageheader/index.vue b/docs/pages/pageheader/index.vue
index a48cb314c..772054bfa 100644
--- a/docs/pages/pageheader/index.vue
+++ b/docs/pages/pageheader/index.vue
@@ -15,7 +15,7 @@
       title="Components"
       anchor="#components"
     >
-      <img src="./page-header.png" >
+      <img src="./page-header.png">
       <p>
         The following components can show up in the page header. Only the page title is required.
       </p>
@@ -57,7 +57,7 @@
         />. If there are tabs in the app bar, the page title should be consistent with the current
         tab, although a word or two can be added on to the page title for clarity.
       </p>
-      <img src="./page-header2.png" >
+      <img src="./page-header2.png">
       <p>
         Write any verbs that appear in page titles in the imperative form. Do not use verbs that end
         in "-ing"; doing so may give users the impression that a task is in progress when it is not.
diff --git a/docs/pages/playground/cards.vue b/docs/pages/playground/cards.vue
index 01c916016..1adeda684 100644
--- a/docs/pages/playground/cards.vue
+++ b/docs/pages/playground/cards.vue
@@ -1,7 +1,9 @@
 <template>
 
   <div style="padding: 80px">
-    <h1 id="link-target">Cards QA page</h1>
+    <h1 id="link-target">
+      Cards QA page
+    </h1>
     <p>
       Also preview live examples on <code>KCardGrid</code> and <code>KCard</code> documentation
       pages.
diff --git a/docs/pages/styling/index.vue b/docs/pages/styling/index.vue
index 9764d79c8..5af8c4816 100644
--- a/docs/pages/styling/index.vue
+++ b/docs/pages/styling/index.vue
@@ -60,7 +60,9 @@
         this HTML and SCSS in a Vue template:
       </p>
       <DocsShowCode language="html">
-        <div class="box">Hello!</div>
+        <div class="box">
+          Hello!
+        </div>
       </DocsShowCode>
       <!-- eslint-disable -->
       <!-- prettier-ignore -->
@@ -77,7 +79,9 @@
       <!-- eslint-enable -->
       <p>can help easily reproduce styles like:</p>
       <DocsShow>
-        <div class="box box-2dp">Hello!</div>
+        <div class="box box-2dp">
+          Hello!
+        </div>
       </DocsShow>
       <p>
         In order for Kolibri to be dynamically themed colors cannot be defined as SCSS constants.
@@ -127,9 +131,15 @@
       </p>
 
       <DocsShow>
-        <div class="box box-1dp">1dp</div>
-        <div class="box box-2dp">2dp</div>
-        <div class="box box-6dp">6dp</div>
+        <div class="box box-1dp">
+          1dp
+        </div>
+        <div class="box box-2dp">
+          2dp
+        </div>
+        <div class="box box-6dp">
+          6dp
+        </div>
       </DocsShow>
 
       <p>Follow the guidance below to decide what depth to use for a drop shadow:</p>
@@ -204,8 +214,12 @@
         responsive:
       </p>
       <DocsShow>
-        <div class="box immediate">Immediate hover</div>
-        <div class="box ease">Easing hover</div>
+        <div class="box immediate">
+          Immediate hover
+        </div>
+        <div class="box ease">
+          Easing hover
+        </div>
       </DocsShow>
       <p>
         Easing functions should be applied to every visual state transition, including color
diff --git a/docs/pages/tabs.vue b/docs/pages/tabs.vue
index 936998558..999a5ee57 100644
--- a/docs/pages/tabs.vue
+++ b/docs/pages/tabs.vue
@@ -17,9 +17,15 @@
           ariaLabel="Coach reports"
           :tabs="tabs"
         >
-          <template #tabLessons> Lessons tab content </template>
-          <template #tabLearners> Learners tab content </template>
-          <template #tabGroups> Groups tab content </template>
+          <template #tabLessons>
+            Lessons tab content
+          </template>
+          <template #tabLearners>
+            Learners tab content
+          </template>
+          <template #tabGroups>
+            Groups tab content
+          </template>
         </KTabs>
       </DocsShow>
 
diff --git a/docs/pages/textfields/index.vue b/docs/pages/textfields/index.vue
index b5ba3c5a3..bc5e9d322 100644
--- a/docs/pages/textfields/index.vue
+++ b/docs/pages/textfields/index.vue
@@ -50,14 +50,16 @@
 
     <DocsDoNot>
       <template #do>
-        <img src="./assistive-1.png" >
-        <p class="do-dont">Use helper text to indicate an input is required</p>
+        <img src="./assistive-1.png">
+        <p class="do-dont">
+          Use helper text to indicate an input is required
+        </p>
       </template>
     </DocsDoNot>
 
     <DocsDoNot>
       <template #do>
-        <img src="./assistive-2.png" >
+        <img src="./assistive-2.png">
         <p class="do-dont">
           Show a ratio of characters used and total character limit for fields with character limits
         </p>
@@ -76,7 +78,7 @@
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./icon-1.png" >
+        <img src="./icon-1.png">
         <p class="do-dont">
           Include a clear icon to indicate an ability to clear the field when text is present
         </p>
@@ -85,21 +87,25 @@
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./icon-2.png" >
-        <p class="do-dont">Include a copy icon to indicate information is able to be copied</p>
+        <img src="./icon-2.png">
+        <p class="do-dont">
+          Include a copy icon to indicate information is able to be copied
+        </p>
       </template>
     </DocsDoNot>
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./icon-3.png" >
-        <p class="do-dont">Include an info icon that reveals more information on hover or click</p>
+        <img src="./icon-3.png">
+        <p class="do-dont">
+          Include an info icon that reveals more information on hover or click
+        </p>
       </template>
     </DocsDoNot>
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./icon-4.png" >
+        <img src="./icon-4.png">
         <p class="do-dont">
           Include controls that can affect the the input of a numeric text field
         </p>
@@ -108,7 +114,7 @@
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./icon-5.png" >
+        <img src="./icon-5.png">
         <p class="do-dont">
           Include a dropdown icon to indicate the presence of a nested menu component
         </p>
@@ -117,7 +123,7 @@
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./icon-6.png" >
+        <img src="./icon-6.png">
         <p class="do-dont">
           Include an icon signifier to the left of the label to indicates a theme or category of the
           dropdown menu options
@@ -144,22 +150,28 @@
 
       <DocsDoNot>
         <template #do>
-          <img src="./errors-1.png" >
-          <p class="do-dont">Be specific as possible about how to resolve the error</p>
+          <img src="./errors-1.png">
+          <p class="do-dont">
+            Be specific as possible about how to resolve the error
+          </p>
         </template>
       </DocsDoNot>
 
       <DocsDoNot>
         <template #do>
-          <img src="./errors-2.png" >
-          <p class="do-dont">Provide general error text for nonspecific errors</p>
+          <img src="./errors-2.png">
+          <p class="do-dont">
+            Provide general error text for nonspecific errors
+          </p>
         </template>
       </DocsDoNot>
 
       <DocsDoNot>
         <template #not>
-          <img src="./errors-3.png" >
-          <p class="do-dont">Stack error text below helper text</p>
+          <img src="./errors-3.png">
+          <p class="do-dont">
+            Stack error text below helper text
+          </p>
         </template>
       </DocsDoNot>
     </DocsPageSection>
@@ -173,7 +185,7 @@
 
     <DocsDoNot>
       <template #do>
-        <img src="./advanced-1.png" >
+        <img src="./advanced-1.png">
         <p class="do-dont">
           Prompt autocomplete suggestions to help users navigate lengthy dropdown menus
         </p>
@@ -182,8 +194,10 @@
 
     <DocsDoNot>
       <template #do>
-        <img src="./advanced-2.png" >
-        <p class="do-dont">Display multiple selections as chips</p>
+        <img src="./advanced-2.png">
+        <p class="do-dont">
+          Display multiple selections as chips
+        </p>
       </template>
     </DocsDoNot>
 
diff --git a/docs/pages/usekliveregion.vue b/docs/pages/usekliveregion.vue
index 7d317a839..9f84cc7d0 100644
--- a/docs/pages/usekliveregion.vue
+++ b/docs/pages/usekliveregion.vue
@@ -121,7 +121,9 @@
           :value="politeMessageInput"
           @input="updatePoliteMessage"
         />
-        <KButton @click="sendPoliteMessage(politeMessageInput)"> Send </KButton>
+        <KButton @click="sendPoliteMessage(politeMessageInput)">
+          Send
+        </KButton>
       </DocsShow>
 
       <DocsShow language="html">
@@ -130,7 +132,9 @@
           :value="assertiveMessageInput"
           @input="updateAssertiveMessage"
         />
-        <KButton @click="sendAssertiveMessage(assertiveMessageInput)"> Send </KButton>
+        <KButton @click="sendAssertiveMessage(assertiveMessageInput)">
+          Send
+        </KButton>
       </DocsShow>
     </DocsPageSection>
 
diff --git a/docs/pages/usekshow.vue b/docs/pages/usekshow.vue
index 8f30661c5..c0d3fd39d 100644
--- a/docs/pages/usekshow.vue
+++ b/docs/pages/usekshow.vue
@@ -21,8 +21,12 @@
       <code>show(key, shouldShow, minVisibleTime)</code>
 
       <DocsShowCode language="html">
-        <div v-if="show('key-1', isLoading, minVisibleTime)">Loading...</div>
-        <div v-else>Loaded!</div>
+        <div v-if="show('key-1', isLoading, minVisibleTime)">
+          Loading...
+        </div>
+        <div v-else>
+          Loaded!
+        </div>
       </DocsShowCode>
       <!-- eslint-disable -->
       <!-- prettier-ignore -->
@@ -196,7 +200,7 @@
         minVisibleTime.value = minVisibleTimeInput.value;
         isFetching.value = true;
 
-        timeoutId = setTimeout(function () {
+        timeoutId = setTimeout(function() {
           isFetching.value = false;
         }, fetchingTime.value);
       }
diff --git a/jest.conf/index.js b/jest.conf/index.js
index 4bc5ed6f6..d534833b3 100644
--- a/jest.conf/index.js
+++ b/jest.conf/index.js
@@ -1,8 +1,10 @@
 const path = require('node:path');
 
 const moduleNameMapper = {
-  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$':
-    path.resolve(__dirname, './fileMock.js'),
+  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$': path.resolve(
+    __dirname,
+    './fileMock.js'
+  ),
 };
 
 module.exports = {
diff --git a/jest.conf/setup.js b/jest.conf/setup.js
index 24cdaeb3f..305950201 100644
--- a/jest.conf/setup.js
+++ b/jest.conf/setup.js
@@ -47,14 +47,14 @@ process.on('unhandledRejection', (reason, p) => {
 
 // Copied from https://github.com/kentor/flush-promises/blob/f33ac564190c784019f1f689dd544187f4b77eb2/index.js
 global.flushPromises = function flushPromises() {
-  return new Promise(function (resolve) {
+  return new Promise(function(resolve) {
     setImmediate(resolve);
   });
 };
 
 function removeWhitespaceFromHtml(htmlString) {
   // https://stackoverflow.com/a/33108909
-  return htmlString.replace(/>\s+|\s+</g, function (m) {
+  return htmlString.replace(/>\s+|\s+</g, function(m) {
     return m.trim();
   });
 }
@@ -64,7 +64,7 @@ global.expect.extend({
 
   toBeInDom(received) {
     const pass = removeWhitespaceFromHtml(document.body.innerHTML).includes(
-      removeWhitespaceFromHtml(received),
+      removeWhitespaceFromHtml(received)
     );
     if (pass) {
       return {
diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue
index f28eca95e..be6adccc9 100644
--- a/lib/KDateRange/KDateCalendar.vue
+++ b/lib/KDateRange/KDateCalendar.vue
@@ -365,7 +365,7 @@
         this.dateRange = Object.assign(
           {},
           this.dateRange,
-          this.getNewDateRange(result, this.activeMonth, this.activeYearStart),
+          this.getNewDateRange(result, this.activeMonth, this.activeYearStart)
         );
         this.$emit('updateSelectedDates', this.dateRange);
       },
@@ -374,7 +374,7 @@
         this.dateRange = Object.assign(
           {},
           this.dateRange,
-          this.getNewDateRange(result, this.nextActiveMonth, this.activeYearEnd),
+          this.getNewDateRange(result, this.nextActiveMonth, this.activeYearEnd)
         );
         this.$emit('updateSelectedDates', this.dateRange);
       },
@@ -404,7 +404,7 @@
           this.isValidDate(this.selectedEndDate) &&
           isAfter(this.selectedEndDate, this.selectedStartDate) &&
           format(this.selectedStartDate, 'DD/MM/YYYY') !==
-          format(this.selectedEndDate, 'DD/MM/YYYY')
+            format(this.selectedEndDate, 'DD/MM/YYYY')
         ) {
           if (
             this.selectedStartDate &&
@@ -468,7 +468,7 @@
           weekIndex,
           dayInWeekIndex,
           nextActiveMonthDay,
-          nextActiveMonthDate,
+          nextActiveMonthDate
         );
         const lastDay =
           key === 'first'
diff --git a/lib/KDateRange/KDateDay.vue b/lib/KDateRange/KDateDay.vue
index 59bef559d..96b619361 100644
--- a/lib/KDateRange/KDateDay.vue
+++ b/lib/KDateRange/KDateDay.vue
@@ -77,19 +77,19 @@
       inRangeStyle() {
         return this.isInRange
           ? {
-            backgroundColor: this.$themeBrand.primary.v_100,
-            ':hover': {
-              backgroundColor: this.$themePalette.grey.v_300,
-            },
-          }
+              backgroundColor: this.$themeBrand.primary.v_100,
+              ':hover': {
+                backgroundColor: this.$themePalette.grey.v_300,
+              },
+            }
           : {};
       },
       selectedStyle() {
         return this.isSelected
           ? {
-            backgroundColor: this.$themeBrand.primary.v_500,
-            color: this.$themePalette.white + '!important',
-          }
+              backgroundColor: this.$themeBrand.primary.v_500,
+              color: this.$themePalette.white + '!important',
+            }
           : {};
       },
       styleOverrides() {
diff --git a/lib/KDateRange/__tests__/ValidationMachine.spec.js b/lib/KDateRange/__tests__/ValidationMachine.spec.js
index 3cef036ad..6f6e1e80e 100644
--- a/lib/KDateRange/__tests__/ValidationMachine.spec.js
+++ b/lib/KDateRange/__tests__/ValidationMachine.spec.js
@@ -12,7 +12,7 @@ describe('Validation Machine', () => {
   let validateService;
   beforeAll(() => {
     validateService = interpret(
-      validationMachine.withContext({ ...initialContext, ...currentContext }),
+      validationMachine.withContext({ ...initialContext, ...currentContext })
     );
     validateService.start();
   });
@@ -39,7 +39,7 @@ describe('Validation Machine', () => {
     validateService.send('REVALIDATE', { startDate: '2022-01-09', endDate: '2022-01-06' });
     expect(validateService._state.value).toEqual('failure');
     expect(validateService._state.context.startDateInvalid).toEqual(
-      validationConstants.START_DATE_AFTER_END_DATE,
+      validationConstants.START_DATE_AFTER_END_DATE
     );
     expect(validateService._state.context.endDateInvalid).toBeFalsy();
   });
@@ -48,7 +48,7 @@ describe('Validation Machine', () => {
     validateService.send('REVALIDATE', { startDate: '2019-01-12', endDate: 'aaaaaa' });
     expect(validateService._state.value).toEqual('failure');
     expect(validateService._state.context.startDateInvalid).toEqual(
-      validationConstants.DATE_BEFORE_FIRST_ALLOWED,
+      validationConstants.DATE_BEFORE_FIRST_ALLOWED
     );
     expect(validateService._state.context.endDateInvalid).toEqual(validationConstants.MALFORMED);
   });
@@ -58,7 +58,7 @@ describe('Validation Machine', () => {
     expect(validateService._state.value).toEqual('failure');
     expect(validateService._state.context.startDateInvalid).toEqual(validationConstants.MALFORMED);
     expect(validateService._state.context.endDateInvalid).toEqual(
-      validationConstants.DATE_BEFORE_FIRST_ALLOWED,
+      validationConstants.DATE_BEFORE_FIRST_ALLOWED
     );
   });
 
diff --git a/lib/KDateRange/index.vue b/lib/KDateRange/index.vue
index ca0a5164a..bad5b45ec 100644
--- a/lib/KDateRange/index.vue
+++ b/lib/KDateRange/index.vue
@@ -224,7 +224,7 @@
         firstAllowedDate: this.firstAllowedDate,
       };
       this.validationMachine = interpret(
-        validationMachine.withContext({ ...initialContext, ...currentContext }),
+        validationMachine.withContext({ ...initialContext, ...currentContext })
       );
       this.validationMachine.start();
 
diff --git a/lib/KIcon/index.vue b/lib/KIcon/index.vue
index d8f777b78..d367c0ff8 100644
--- a/lib/KIcon/index.vue
+++ b/lib/KIcon/index.vue
@@ -78,7 +78,7 @@
       if (KolibriIcons[this.icon].fixedColor && this.color) {
         // eslint-disable-next-line no-console
         console.error(
-          `KIcon: ${this.icon} color property will not be applied because the icon has a fixed color.`,
+          `KIcon: ${this.icon} color property will not be applied because the icon has a fixed color.`
         );
       }
     },
diff --git a/lib/KImg/__tests__/KImg.spec.js b/lib/KImg/__tests__/KImg.spec.js
index f016d1553..86ca046fc 100644
--- a/lib/KImg/__tests__/KImg.spec.js
+++ b/lib/KImg/__tests__/KImg.spec.js
@@ -31,7 +31,7 @@ describe('KImg', () => {
     expect(error).toHaveBeenCalled();
     expect(error.mock.calls[0][0]).toBeInstanceOf(Error);
     expect(error.mock.calls[0][0].message).toBe(
-      'Missing required prop - provide altText or indicate isDecorative',
+      'Missing required prop - provide altText or indicate isDecorative'
     );
   });
 
diff --git a/lib/KModal.vue b/lib/KModal.vue
index dca8a956c..9f3fe5376 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -251,13 +251,13 @@
       if (this.$props.cancelText && !this.$listeners.cancel) {
         // eslint-disable-next-line no-console
         console.error(
-          'A "cancelText" has been set, but there is no "cancel" listener. The "cancel" button may not work correctly.',
+          'A "cancelText" has been set, but there is no "cancel" listener. The "cancel" button may not work correctly.'
         );
       }
       if (this.$props.submitText && !this.$listeners.submit) {
         // eslint-disable-next-line no-console
         console.error(
-          'A "submitText" has been set, but there is no "submit" listener. The "submit" button may not work correctly.',
+          'A "submitText" has been set, but there is no "submit" listener. The "submit" button may not work correctly.'
         );
       }
     },
@@ -303,7 +303,7 @@
        * If there is not enough vertical space, create a vertically scrollable area and a
        * scroll shadow
        */
-      updateContentSectionStyle: debounce(function () {
+      updateContentSectionStyle: debounce(function() {
         if (this.$refs.title && this.$refs.actions) {
           const maxContentHeightCheck =
             this.windowHeight -
@@ -439,18 +439,13 @@
   }
 
   .scroll-shadow {
-    background:
-      linear-gradient(white 30%, hsla(0deg, 0%, 100%, 0)),
+    background: linear-gradient(white 30%, hsla(0deg, 0%, 100%, 0)),
       linear-gradient(hsla(0deg, 0%, 100%, 0) 10px, white 70%) bottom,
       radial-gradient(at top, rgba(0, 0, 0, 0.2), transparent 70%),
       radial-gradient(at bottom, rgba(0, 0, 0, 0.2), transparent 70%) bottom;
     background-repeat: no-repeat;
     background-attachment: local, local, scroll, scroll;
-    background-size:
-      100% 20px,
-      100% 20px,
-      100% 10px,
-      100% 10px;
+    background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
   }
 
   .contains-kselect {
diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
index 32f461843..13f57ece6 100644
--- a/lib/KRadioButton.vue
+++ b/lib/KRadioButton.vue
@@ -200,7 +200,7 @@
       if (this.buttonValue === null) {
         // eslint-disable-next-line no-console
         console.warn(
-          "KRadioButton: 'value' prop is deprecated and will be removed in a future release. Please use 'buttonValue' instead.",
+          "KRadioButton: 'value' prop is deprecated and will be removed in a future release. Please use 'buttonValue' instead."
         );
       }
       if (process.env.NODE_ENV !== 'production') {
diff --git a/lib/KSelect/index.vue b/lib/KSelect/index.vue
index 4437ebbce..d1ec42f0c 100644
--- a/lib/KSelect/index.vue
+++ b/lib/KSelect/index.vue
@@ -501,7 +501,7 @@
           // Check if matches
           option.startsWith = startswith(
             option[this.keys.label].toLowerCase(),
-            this.quickMatchString.toLowerCase(),
+            this.quickMatchString.toLowerCase()
           );
 
           return option;
@@ -642,7 +642,28 @@
       highlightQuickMatch(event) {
         // https://github.com/ccampbell/mousetrap/blob/master/mousetrap.js#L39
         const specialKeyCodes = [
-          8, 9, 13, 16, 17, 18, 20, 27, 32, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 91, 93, 224,
+          8,
+          9,
+          13,
+          16,
+          17,
+          18,
+          20,
+          27,
+          32,
+          33,
+          34,
+          35,
+          36,
+          37,
+          38,
+          39,
+          40,
+          45,
+          46,
+          91,
+          93,
+          224,
         ];
         const keyCode = event.keyCode;
         if (specialKeyCodes.includes(keyCode)) {
@@ -652,7 +673,7 @@
         const character = event.key.toString();
         this.quickMatchString += character;
         let matchingItems = this.annotatedOptions.filter(
-          option => option.startsWith && !option.disabled,
+          option => option.startsWith && !option.disabled
         );
         if (matchingItems.length !== 0) {
           matchingItems = sortby(matchingItems, [this.keys.label]);
@@ -700,7 +721,7 @@
 
         if (options.autoScroll) {
           const index = this.filteredOptions.findIndex(option =>
-            looseEqual(this.highlightedOption, option),
+            looseEqual(this.highlightedOption, option)
           );
           const optionToScrollTo = this.$refs.options[index];
           if (optionToScrollTo) {
@@ -875,7 +896,7 @@
             this.scrollOptionIntoView(selectedOption);
           } else {
             this.scrollOptionIntoView(
-              this.$refs.optionsList.querySelector('.ui-select-option:not(.is-disabled)'),
+              this.$refs.optionsList.querySelector('.ui-select-option:not(.is-disabled)')
             );
           }
         });
@@ -928,7 +949,7 @@
         const notEnoughSpaceBelow =
           buttonPosition > this.maxDropdownHeight &&
           this.scrollableAncestor.offsetHeight - buttonPosition <
-          buttonHeight + this.maxDropdownHeight;
+            buttonHeight + this.maxDropdownHeight;
 
         this.dropdownButtonBottom = notEnoughSpaceBelow ? buttonHeight + 'px' : 'auto';
       },
@@ -1064,9 +1085,7 @@
     line-height: $ui-input-label-line-height;
     color: $ui-input-label-color;
     cursor: default;
-    transition:
-      color 0.1s ease,
-      transform 0.2s ease;
+    transition: color 0.1s ease, transform 0.2s ease;
     transform-origin: left;
   }
 
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 0900a55f1..8e7def0dc 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -185,7 +185,7 @@
         () => props.rows,
         newRows => {
           rows.value = newRows;
-        },
+        }
       );
 
       const handleSort = index => {
@@ -231,7 +231,7 @@
       headers: {
         type: Array,
         required: true,
-        validator: function (value) {
+        validator: function(value) {
           const uniqueColumnIds = new Set(value.map(h => h.columnId));
 
           return (
@@ -240,7 +240,7 @@
               header =>
                 ['label', 'dataType', 'columnId'].every(key => key in header) &&
                 ['string', 'number', 'date', 'undefined'].includes(header.dataType) &&
-                ['string', 'number'].includes(typeof header.columnId),
+                ['string', 'number'].includes(typeof header.columnId)
             )
           );
         },
@@ -293,7 +293,7 @@
         type: Object,
         required: false,
         default: () => ({}),
-        validator: function (value) {
+        validator: function(value) {
           if (Object.keys(value).length === 0) {
             return true;
           }
@@ -378,7 +378,7 @@
             if (!allHeaderColumnIds.includes(this.defaultSort.columnId)) {
               // eslint-disable-next-line no-console
               console.error(
-                `The columnId used for default sorting is ${this.defaultSort.columnId}, but the same was not found to be defined in any headers.`,
+                `The columnId used for default sorting is ${this.defaultSort.columnId}, but the same was not found to be defined in any headers.`
               );
             }
           }
diff --git a/lib/KTable/useSorting/__tests__/index.spec.js b/lib/KTable/useSorting/__tests__/index.spec.js
index 42a8be538..004eaa0da 100644
--- a/lib/KTable/useSorting/__tests__/index.spec.js
+++ b/lib/KTable/useSorting/__tests__/index.spec.js
@@ -126,7 +126,7 @@ describe('useSorting', () => {
         headers,
         rows,
         defaultSort,
-        disableBuiltinSorting,
+        disableBuiltinSorting
       );
       handleSort(0); // Sort by 'Name'
       expect(sortedRows.value).toEqual(rows.value);
@@ -138,7 +138,7 @@ describe('useSorting', () => {
       headers,
       rows,
       defaultSort,
-      disableBuiltinSorting,
+      disableBuiltinSorting
     );
 
     handleSort(0); // Sort by 'Name'
@@ -154,7 +154,7 @@ describe('useSorting', () => {
       headers,
       rows,
       defaultSort,
-      disableBuiltinSorting,
+      disableBuiltinSorting
     );
 
     handleSort(1); // Sort by 'Age'
@@ -187,7 +187,7 @@ describe('useSorting', () => {
       headers,
       rows,
       defaultSort,
-      disableBuiltinSorting,
+      disableBuiltinSorting
     );
 
     handleSort(2); // Sort by 'Birthdate'
@@ -203,7 +203,7 @@ describe('useSorting', () => {
       headers,
       rows,
       defaultSort,
-      disableBuiltinSorting,
+      disableBuiltinSorting
     );
 
     handleSort(3); // Attempt to sort by 'Other'
@@ -216,7 +216,7 @@ describe('useSorting', () => {
       headers,
       rows,
       defaultSort,
-      disableBuiltinSorting,
+      disableBuiltinSorting
     );
 
     expect(getAriaSort(0)).toBe('none');
@@ -233,7 +233,7 @@ describe('useSorting', () => {
       headers,
       rows,
       defaultSort,
-      disableBuiltinSorting,
+      disableBuiltinSorting
     );
 
     handleSort(0); // Sort by 'Name'
diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
index 1436174eb..90b357537 100644
--- a/lib/KTable/useSorting/index.js
+++ b/lib/KTable/useSorting/index.js
@@ -38,7 +38,7 @@ export default function useSorting(headers, rows, defaultSort, disableBuiltinSor
       return _.orderBy(
         rows.value,
         [row => row[defaultSort.value.index]],
-        [defaultSort.value.direction],
+        [defaultSort.value.direction]
       );
     }
 
diff --git a/lib/KTooltip/Popper.vue b/lib/KTooltip/Popper.vue
index 094ef5bef..12f71949b 100644
--- a/lib/KTooltip/Popper.vue
+++ b/lib/KTooltip/Popper.vue
@@ -247,7 +247,7 @@
               this.popperOptions.modifiers = Object.assign({}, this.popperOptions.modifiers);
               this.popperOptions.modifiers.preventOverflow = Object.assign(
                 {},
-                this.popperOptions.modifiers.preventOverflow,
+                this.popperOptions.modifiers.preventOverflow
               );
               this.popperOptions.modifiers.preventOverflow.boundariesElement = boundariesElement;
             }
diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
index 954e4a4d3..d87a7d3e8 100644
--- a/lib/buttons-and-links/buttonMixin.js
+++ b/lib/buttons-and-links/buttonMixin.js
@@ -82,7 +82,7 @@ export default {
               fill: $primaryRaisedDisabledColor,
             },
           },
-          disabledStyle,
+          disabledStyle
         ),
         svg: {
           fill: $primaryRaisedColor,
diff --git a/lib/buttons-and-links/buttons.scss b/lib/buttons-and-links/buttons.scss
index 0f3caf237..76879d173 100644
--- a/lib/buttons-and-links/buttons.scss
+++ b/lib/buttons-and-links/buttons.scss
@@ -1,10 +1,7 @@
 @import '../styles/definitions';
 
-$transition: color $core-time ease,
-  background-color $core-time ease,
-  box-shadow $core-time ease;
-$raised-shadow: 0 1px 5px rgba(0, 0, 0, 0.2),
-  0 2px 2px rgba(0, 0, 0, 0.14),
+$transition: color $core-time ease, background-color $core-time ease, box-shadow $core-time ease;
+$raised-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14),
   0 3px 1px -2px rgba(0, 0, 0, 0.12);
 
 .button {
diff --git a/lib/cards/KCard.vue b/lib/cards/KCard.vue
index 8ed22ef5c..616649129 100644
--- a/lib/cards/KCard.vue
+++ b/lib/cards/KCard.vue
@@ -204,12 +204,12 @@
   };
 
   function cardValidator(allowedValues, propName) {
-    return function (value) {
+    return function(value) {
       if (!Object.values(allowedValues).includes(value)) {
         throw new Error(
           `Invalid ${propName} value: '${value}'. Allowed values are: ${Object.values(
-            allowedValues,
-          ).join(', ')}`,
+            allowedValues
+          ).join(', ')}`
         );
       }
       return true;
diff --git a/lib/cards/KCardGrid.vue b/lib/cards/KCardGrid.vue
index 57145ec7a..9de23a5f0 100644
--- a/lib/cards/KCardGrid.vue
+++ b/lib/cards/KCardGrid.vue
@@ -100,7 +100,7 @@
         },
         {
           immediate: true,
-        },
+        }
       );
 
       // provide to `KCard`
diff --git a/lib/cards/useGridLayout.js b/lib/cards/useGridLayout.js
index 4d753aa74..b800fe7f5 100644
--- a/lib/cards/useGridLayout.js
+++ b/lib/cards/useGridLayout.js
@@ -60,7 +60,7 @@ export default function useGridLayout(props) {
     ([newBreakpoint]) => {
       currentBreakpointConfig.value = getLayoutConfigForBreakpoint(props, newBreakpoint);
     },
-    { immediate: true, deep: true },
+    { immediate: true, deep: true }
   );
 
   return { currentBreakpointConfig, windowBreakpoint };
diff --git a/lib/cards/useGridLoading.js b/lib/cards/useGridLoading.js
index f58ba7743..48d7745bb 100644
--- a/lib/cards/useGridLoading.js
+++ b/lib/cards/useGridLoading.js
@@ -83,7 +83,7 @@ export default function useGridLoading(props) {
         }, remainingLoadingTime);
       }
     },
-    { immediate: true },
+    { immediate: true }
   );
 
   // Used by `KCardGrid` to prevent jarring UX:
@@ -125,7 +125,7 @@ export default function useGridLoading(props) {
         }
       }
     },
-    { immediate: true, deep: true },
+    { immediate: true, deep: true }
   );
 
   return {
diff --git a/lib/cards/utils.js b/lib/cards/utils.js
index 19c98c0a2..d8809a5ba 100644
--- a/lib/cards/utils.js
+++ b/lib/cards/utils.js
@@ -16,7 +16,7 @@ export function getBreakpointConfig(config, breakpoint) {
   // for the breakpoint...
   const matchingConfigs = config.filter(
     breakpointConfig =>
-      breakpointConfig.breakpoints && breakpointConfig.breakpoints.includes(breakpoint),
+      breakpointConfig.breakpoints && breakpointConfig.breakpoints.includes(breakpoint)
   );
 
   // ...and populate all configurations related to the breakpoint
diff --git a/lib/composables/_useOverlay/index.js b/lib/composables/_useOverlay/index.js
index a1f39e024..1105f40c9 100644
--- a/lib/composables/_useOverlay/index.js
+++ b/lib/composables/_useOverlay/index.js
@@ -47,7 +47,7 @@ export default function _useOverlay() {
     if (!overlayEl) {
       // eslint-disable-next-line no-console
       console.error(
-        '[KDS] The overlay container element #k-overlay is missing. KDS initialization failed?',
+        '[KDS] The overlay container element #k-overlay is missing. KDS initialization failed?'
       );
       return;
     }
diff --git a/lib/grids/KFixedGridItem.vue b/lib/grids/KFixedGridItem.vue
index c6a2acee4..28c2700a2 100644
--- a/lib/grids/KFixedGridItem.vue
+++ b/lib/grids/KFixedGridItem.vue
@@ -113,7 +113,7 @@
         if (this.computedSpan > this.gridMetrics.numCols) {
           // eslint-disable-next-line no-console
           console.error(
-            `Item span (${this.computedSpan}) is larger than grid size (${this.gridMetrics.numCols})`,
+            `Item span (${this.computedSpan}) is larger than grid size (${this.gridMetrics.numCols})`
           );
           return false;
         }
diff --git a/lib/grids/test/KFixedGrid.spec.js b/lib/grids/test/KFixedGrid.spec.js
index 534472d1f..7a4a6c729 100644
--- a/lib/grids/test/KFixedGrid.spec.js
+++ b/lib/grids/test/KFixedGrid.spec.js
@@ -50,7 +50,7 @@ describe('KFixedGrid component', () => {
           }
         };
         testAfterResize(checkGutterProperties);
-      },
+      }
     );
 
     it('should have a -5px offset when 10px gutters are specified', () => {
diff --git a/lib/loaders/KCircularLoader.vue b/lib/loaders/KCircularLoader.vue
index 1cf85558b..11f73467a 100644
--- a/lib/loaders/KCircularLoader.vue
+++ b/lib/loaders/KCircularLoader.vue
@@ -275,9 +275,7 @@
 
   .ui-progress-circular--transition-fade-enter-active,
   .ui-progress-circular--transition-fade-leave-active {
-    transition:
-      opacity 0.3s ease,
-      transform 0.3s ease;
+    transition: opacity 0.3s ease, transform 0.3s ease;
   }
 
   .ui-progress-circular--transition-fade-enter,
diff --git a/lib/styles/darkenColors.js b/lib/styles/darkenColors.js
index 3d9ecc79e..12a5cd6da 100644
--- a/lib/styles/darkenColors.js
+++ b/lib/styles/darkenColors.js
@@ -1,13 +1,19 @@
 import Color from 'color';
 
 export function darken1(color) {
-  return Color(color).darken(0.19).hex();
+  return Color(color)
+    .darken(0.19)
+    .hex();
 }
 
 export function darken2(color) {
-  return Color(color).darken(0.4).hex();
+  return Color(color)
+    .darken(0.4)
+    .hex();
 }
 
 export function darken3(color) {
-  return Color(color).darken(0.58).hex();
+  return Color(color)
+    .darken(0.58)
+    .hex();
 }
diff --git a/lib/styles/definitions.scss b/lib/styles/definitions.scss
index 523247843..c692705db 100644
--- a/lib/styles/definitions.scss
+++ b/lib/styles/definitions.scss
@@ -60,16 +60,12 @@ $core-time: 0.15s;
 // dropshadows from Angular Material via https://stackoverflow.com/a/39199702
 
 %dropshadow-1dp {
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.2),
-    0 1px 1px 0 rgba(0, 0, 0, 0.14),
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
     0 2px 1px -1px rgba(0, 0, 0, 0.12);
 }
 
 %dropshadow-2dp {
-  box-shadow:
-    0 1px 5px 0 rgba(0, 0, 0, 0.2),
-    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 3px 1px -2px rgba(0, 0, 0, 0.12);
 }
 //NOTE: uncommenting needs to be discussed with designers and should be aligned with the guidelines.
@@ -87,9 +83,7 @@ $core-time: 0.15s;
 //     0 1px 14px 0 rgba(0, 0, 0, 0.12);
 // }
 %dropshadow-6dp {
-  box-shadow:
-    0 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0 6px 10px 0 rgba(0, 0, 0, 0.14),
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
     0 1px 18px 0 rgba(0, 0, 0, 0.12);
 }
 // %dropshadow-7dp {
diff --git a/lib/styles/theme.js b/lib/styles/theme.js
index 055807577..987ba72ab 100644
--- a/lib/styles/theme.js
+++ b/lib/styles/theme.js
@@ -14,7 +14,7 @@ const tokens = {};
 function generateTokenToColorMapping() {
   const newTokens = {};
   // look at each token map
-  Object.keys(globalThemeState.tokenMapping).forEach(function (tokenName) {
+  Object.keys(globalThemeState.tokenMapping).forEach(function(tokenName) {
     const mapString = globalThemeState.tokenMapping[tokenName];
     // if it doesn't look like a path, interpret value as a CSS color value
     if (mapString.indexOf('.') === -1) {
diff --git a/lib/styles/trackInputModality.js b/lib/styles/trackInputModality.js
index 65cba287f..80ba227e4 100644
--- a/lib/styles/trackInputModality.js
+++ b/lib/styles/trackInputModality.js
@@ -54,7 +54,7 @@ function setUpEventHandlers(disableFocusRingByDefault) {
     }
   })();
 
-  const focusTriggersKeyboardModality = function (el) {
+  const focusTriggersKeyboardModality = function(el) {
     let triggers = false;
 
     if (matcher) {
@@ -64,7 +64,7 @@ function setUpEventHandlers(disableFocusRingByDefault) {
     return triggers;
   };
 
-  const focusSetExplicitly = function (el) {
+  const focusSetExplicitly = function(el) {
     let triggers = false;
 
     if (matcher) {
@@ -104,7 +104,7 @@ function setUpEventHandlers(disableFocusRingByDefault) {
         hadKeyboardEvent = false;
       }, 300);
     },
-    true,
+    true
   );
 
   document.body.addEventListener('mousedown', () => {
@@ -127,7 +127,7 @@ function setUpEventHandlers(disableFocusRingByDefault) {
         document.body.setAttribute('modality', '');
       }
     },
-    true,
+    true
   );
 
   document.body.addEventListener(
@@ -136,7 +136,7 @@ function setUpEventHandlers(disableFocusRingByDefault) {
       globalThemeState.inputModality = null;
       document.body.setAttribute('modality', '');
     },
-    true,
+    true
   );
 }
 
@@ -150,7 +150,7 @@ function setUpEventHandlers(disableFocusRingByDefault) {
 export default function trackInputModality({ disableFocusRingByDefault = true } = {}) {
   // skip for SSR
   if (typeof document !== 'undefined') {
-    document.addEventListener('DOMContentLoaded', function () {
+    document.addEventListener('DOMContentLoaded', function() {
       setUpEventHandlers(disableFocusRingByDefault);
     });
   }
diff --git a/lib/tabs/KTabsList.vue b/lib/tabs/KTabsList.vue
index 3fa01f86e..113f9059a 100644
--- a/lib/tabs/KTabsList.vue
+++ b/lib/tabs/KTabsList.vue
@@ -156,8 +156,8 @@
             this.styles,
             this.appearanceOverrides,
             this.stylesActive,
-            this.appearanceOverridesActive,
-          ),
+            this.appearanceOverridesActive
+          )
         );
       },
     },
diff --git a/lib/tabs/__tests__/KTabsList.spec.js b/lib/tabs/__tests__/KTabsList.spec.js
index cde20b369..a6d7cf4ff 100644
--- a/lib/tabs/__tests__/KTabsList.spec.js
+++ b/lib/tabs/__tests__/KTabsList.spec.js
@@ -11,7 +11,7 @@ const routerPush = router.push;
 
 // Override router push to avoid test failures from NavigationDuplicated errors
 // @see https://github.com/vuejs/vue-router/issues/2881#issuecomment-520554378
-router.push = function (location, onResolve, onReject) {
+router.push = function(location, onResolve, onReject) {
   if (onResolve || onReject) {
     return routerPush.call(this, location, onResolve, onReject);
   }
@@ -75,7 +75,7 @@ describe(`KTabsList`, () => {
     expect(errorListener).toHaveBeenCalledTimes(1);
     expect(errorListener.mock.calls[0][0]).toBeInstanceOf(Error);
     expect(errorListener.mock.calls[0][0].message).toBe(
-      `[KTabsList] Missing 'ariaLabel' or 'ariaLabelledBy'`,
+      `[KTabsList] Missing 'ariaLabel' or 'ariaLabelledBy'`
     );
   });
 
diff --git a/lib/utils/focusManagement.js b/lib/utils/focusManagement.js
index d663b54c3..7f9b67d3e 100644
--- a/lib/utils/focusManagement.js
+++ b/lib/utils/focusManagement.js
@@ -11,7 +11,7 @@ export function getFirstFocusableChild(parent) {
   }
   // https://gomakethings.com/how-to-get-the-first-and-last-focusable-elements-in-the-dom/
   const focusableElements = parent.querySelectorAll(
-    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
   );
   return focusableElements.length > 0 ? focusableElements[0] : null;
 }
diff --git a/nuxt.config.js b/nuxt.config.js
index 2258b4f2e..c0c66f50f 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -10,7 +10,8 @@ export default {
       { rel: 'icon', type: 'image/x-icon', href: '/kolibri.ico' },
       {
         rel: 'stylesheet',
-        href: 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Source+Code+Pro:wght@400&display=swap&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese',
+        href:
+          'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Source+Code+Pro:wght@400&display=swap&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese',
       },
     ],
   },
diff --git a/utils/extractApi.js b/utils/extractApi.js
index 422ade86b..ae82ac528 100644
--- a/utils/extractApi.js
+++ b/utils/extractApi.js
@@ -48,7 +48,7 @@ async function writeApi() {
 
   const outputPath = path.resolve('./docs/jsdocs.js');
   fs.writeFile(outputPath, docsOutputString + JSON.stringify(output, null, 2), () =>
-    consola.info('Wrote jsdocs to', outputPath),
+    consola.info('Wrote jsdocs to', outputPath)
   );
 }
 
diff --git a/utils/extractEnvironment.js b/utils/extractEnvironment.js
index 6cd3bf6ba..97f26347b 100644
--- a/utils/extractEnvironment.js
+++ b/utils/extractEnvironment.js
@@ -52,7 +52,7 @@ function writeEnvironment() {
   const outputPath = path.resolve('./docs/environment.js');
   const env = JSON.stringify(environmentInfo, null, 2);
   fs.writeFile(outputPath, gitOutputString + env + ';\n', () =>
-    consola.info(`Wrote environment to ${outputPath}`),
+    consola.info(`Wrote environment to ${outputPath}`)
   );
 }
 
diff --git a/utils/extractRstIcons.js b/utils/extractRstIcons.js
index 5f8ebb897..a850d144f 100644
--- a/utils/extractRstIcons.js
+++ b/utils/extractRstIcons.js
@@ -71,7 +71,7 @@ function writeRstIcons() {
       // what to dump into icon-replacements.txt? (used in rst_prolog)
       const wrapperSpanColorClass = colorMatch ? ` design-system-icon-color-${colorMatch[1]}` : '';
       output.push(
-        `.. |${aliasName}| replace:: :raw-html:\`<span class="design-system-icon${wrapperSpanColorClass}">${svgContent}</span>\``,
+        `.. |${aliasName}| replace:: :raw-html:\`<span class="design-system-icon${wrapperSpanColorClass}">${svgContent}</span>\``
       );
     }
 
@@ -79,7 +79,7 @@ function writeRstIcons() {
     output.sort();
     const outputPath = path.resolve('./docs/rstIconReplacements.txt');
     fs.writeFile(outputPath, output.join('\n') + '\n', () =>
-      consola.info(`Wrote rst icon replacement strings to ${outputPath}`),
+      consola.info(`Wrote rst icon replacement strings to ${outputPath}`)
     );
   });
 }