From cf0564585658eac29f8810042e6d3532487d5fd6 Mon Sep 17 00:00:00 2001
From: shruti862 <shrutiyadav862@gmail.com>
Date: Sun, 8 Dec 2024 17:03:50 +0530
Subject: [PATCH 1/6] updated lib/KListWithOverflow.vue and
 lib/KBreadcrumbs.vue

---
 lib/KBreadcrumbs.vue      | 402 ++++++--------------------------------
 lib/KListWithOverflow.vue |  42 ++--
 2 files changed, 89 insertions(+), 355 deletions(-)

diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index 58c1466f4..351e3e3dc 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -1,381 +1,97 @@
 <template>
 
-  <div
-    v-show="showSingleItem || crumbs.length > 1"
-    :class="{ 'breadcrumbs-collapsed': collapsedCrumbs.length }"
+  <KListWithOverflow
+    overflowDirection="start"
+    :items="preparedCrumbs"
   >
-    <nav class="breadcrumbs" v-bind="$attrs" :aria-label="$attrs.ariaLabel">
-      <div
-        v-show="collapsedCrumbs.length"
-        class="breadcrumbs-dropdown-wrapper"
-      >
-        <KIconButton
-          size="small"
-          :icon="showDropdown ? 'chevronUp' : 'chevronDown'"
-          appearance="raised-button"
-          @click="showDropdown = !showDropdown"
-        />
-        <div
-          v-if="showDropdown"
-          class="breadcrumbs-dropdown"
-          :style="{ background: $themeTokens.surface }"
+    <!-- Render individual breadcrumb items -->
+    <template #item="{ item }">
+      <li>
+        <KRouterLink
+          v-if="item.link"
+          :text="item.text"
+          :to="item.link"
         >
-          <ol class="breadcrumbs-dropdown-items">
-            <li
-              v-for="(crumb, index) in collapsedCrumbs"
-              :key="index"
-              class="breadcrumbs-dropdown-item"
-            >
-              <KRouterLink
-                v-if="crumb.link"
-                class="krouter-item"
-                :text="crumb.text"
-                :to="crumb.link"
-              >
-                <template #text="{ text }">
-                  <span class="breadcrumbs-crumb-text" dir="auto">{{ text }}</span>
-                </template>
-              </KRouterLink>
-              <span v-else dir="auto">{{ crumb.text }}</span>
-            </li>
-          </ol>
-        </div>
-      </div>
-
-      <ol class="breadcrumbs-visible-items">
-        <template v-for="(crumb, index) in crumbs">
-          <li
-            v-if="index !== crumbs.length - 1"
-            v-show="!crumb.collapsed"
-            :key="index"
-            class="breadcrumbs-visible-item breadcrumbs-visible-item-notlast"
-          >
-            <KRouterLink
-              v-if="crumb.link"
-              :text="crumb.text"
-              :to="crumb.link"
-              dir="auto"
-            >
-              <template #text="{ text }">
-                <span class="breadcrumbs-crumb-text">{{ text }}</span>
-              </template>
-            </KRouterLink>
-            <span v-else>{{ crumb.text }}</span>
-          </li>
-
-          <li
-            v-else
-            :key="index"
-            class="breadcrumb-visible-item-last breadcrumbs-visible-item"
-          >
-            <span
-              class="breadcrumbs-crumb-text"
-              :style="{ maxWidth: lastBreadcrumbMaxWidth }"
-              dir="auto"
-            >
-              {{ crumb.text }}
-            </span>
-          </li>
-        </template>
-      </ol>
-    </nav>
 
-
-    <!-- This is a duplicate of breacrumbs-visible-items to help to reference sizes. -->
-    <div class="breadcrumbs breadcrumbs-offscreen" aria-hidden="true">
-      <ol class="breadcrumbs-visible-items">
-        <template v-for="(crumb, index) in crumbs">
-          <li
-            v-if="index !== crumbs.length - 1"
-            :ref="`crumb${index}`"
-            :key="index"
-            class="breadcrumbs-visible-item breadcrumbs-visible-item-notlast"
-          >
-            <KRouterLink v-if="crumb.link" :text="crumb.text" :to="crumb.link" tabindex="-1">
-              <template #text="{ text }">
-                <span class="breadcrumbs-crumb-text">{{ text }}</span>
-              </template>
-            </KRouterLink>
-            <span v-else>{{ crumb.text }}</span>
-          </li>
-
-          <li
-            v-else
-            :ref="`crumb${index}`"
-            :key="index"
-            class="breadcrumb-visible-item-last breadcrumbs-visible-item"
-          >
-            <span
-              class="breadcrumbs-crumb-text"
-              :style="{ maxWidth: lastBreadcrumbMaxWidth }"  
-            >
-              {{ crumb.text }}
-            </span>
-          </li>
+          <template #text="{ text }">
+            <span class="breadcrumbs-crumb-text">{{ text }}</span>
+          </template>
+        </KRouterLink>
+        <span v-else>{{ item.text }}</span>
+      </li>
+    </template>
+
+    <!-- Render the separator between items -->
+    <template #divider>
+      <span class="breadcrumbs-divider">›</span>
+    </template>
+
+    <!-- Render the "more" overflow dropdown and its separator -->
+    <template #more="{ overflowItems }">
+      <KIconButton
+        size="small"
+        icon="chevronDown"
+        appearance="raised-button"
+      >
+        <template #menu>
+          <KDropdownMenu
+            :options="overflowItems
+              .filter(item => item.type !== 'separator') // Filter out separators
+              .map(item => ({
+                label: item.text, // Display 'text' in the menu
+                link: item.link ? item.link.path : null // Use 'path' for the actual hyperlink
+              }))"
+          />
         </template>
-      </ol>
-    </div>
-  </div>
+      </KIconButton>
+      <span class="breadcrumbs-divider">›</span>
+    </template>
+  </KListWithOverflow>
 
 </template>
 
-
 <script>
 
-  import filter from 'lodash/filter';
-  import startsWith from 'lodash/startsWith';
-  import throttle from 'lodash/throttle';
-  import every from 'lodash/every';
-  import keys from 'lodash/keys';
-  import useKResponsiveElement from './composables/useKResponsiveElement';
-
-  const DROPDOWN_BTN_WIDTH = 55;
-  const DEFAULT_LAST_BREADCRUMB_MAX_WIDTH = 300;
-
-  function validateLinkObject(object) {
-    const validKeys = ['name', 'path', 'params', 'query'];
-    return every(keys(object), key => validKeys.includes(key));
-  }
-
-  /**
-   * Used to aid deeply nested navigation of content channels, topics, and resources
-   */
   export default {
-    name: 'KBreadcrumbs',
-    inheritAttrs: false,
-    setup() {
-      const { elementWidth } = useKResponsiveElement();
-      return { elementWidth };
-    },
     props: {
-      /**
-       * An array of objects, each with a `text` attribute (String) and a
-       * `link` attribute (vue router link object). The `link` attribute
-       * of the last item in the array is optional and ignored. The `link`
-       * attribute can be set to `null` which will render the breadcrumb only
-       * as text, regardless of its position in the breadcrumb.
-       */
       items: {
         type: Array,
         required: true,
-        validator(crumbItems) {
-          // All must have text
-          if (!crumbItems.every(crumb => Boolean(crumb.text))) {
-            return false;
-          }
-          // If link is truthy make sure it is a valid router link
-          return crumbItems.every(crumb => !crumb.link || validateLinkObject(crumb.link));
-        },
       },
-      /**
-       * By default, the breadcrums will be hidden when the length of items is 1.
-       * When set to `true`, a breadcrumb will be shown even when there is only one.
-       */
       showSingleItem: {
         type: Boolean,
         default: false,
       },
     },
-
-    data: () => ({
-      // Array of crumb objects.
-      // Each object contains:
-      // text, router-link 'to' object, vue ref, and its collapsed state
-      crumbs: [],
-      showDropdown: false,
-      lastBreadcrumbMaxWidth: `${DEFAULT_LAST_BREADCRUMB_MAX_WIDTH}px`,
-    }),
     computed: {
-      collapsedCrumbs() {
-        return this.crumbs.filter(crumb => crumb.collapsed === true).reverse();
-      },
-      parentWidth() {
-        return this.elementWidth;
-      },
-    },
-    watch: {
-      items(val) {
-        this.crumbs = Array.from(val);
-        this.attachRefs();
-      },
-    },
-    created() {
-      this.crumbs = Array.from(this.items);
-    },
-    mounted() {
-      this.attachRefs();
-      // The throttled update function is defined here and not as a method on purpose
-      // since having it defined as a method on the options object would cause problems
-      // when there are more KBreadcrumbs instances rendered on one page.
-      // In such a scenario, all instances would share the same throttled function
-      // resulting in some instances not being updated when they should be.
-      // This is happening because of how the Vue component constructor and instances are built.
-      // Having it defined in the context of the `mounted` function ensures that each component
-      // instance will have its own throttled update function.
-      const throttledUpdateCrumbs = throttle(this.updateCrumbs, 100);
-      this.$watch('parentWidth', throttledUpdateCrumbs);
-    },
-    methods: {
-      attachRefs() {
-        this.$nextTick(() => {
-          const crumbRefs = filter(this.$refs, (value, key) => startsWith(key, 'crumb'));
-          this.crumbs = this.crumbs.map((crumb, index) => {
-            const updatedCrumb = crumb;
-            updatedCrumb.ref = crumbRefs[index];
-            return updatedCrumb;
-          });
-          this.updateCrumbs();
-        });
-      },
-      updateCrumbs() {
-        if (this.crumbs.length) {
-          // needs to be reset before another re-calculation
-          // otherwise calculactions below won't be precise
-          this.lastBreadcrumbMaxWidth = `${DEFAULT_LAST_BREADCRUMB_MAX_WIDTH}px`;
-
-          this.$nextTick(() => {
-            const tempCrumbs = Array.from(this.crumbs);
-            let lastCrumbWidth = Math.ceil(tempCrumbs.pop().ref[0].getBoundingClientRect().width);
-            let remainingWidth = this.parentWidth - DROPDOWN_BTN_WIDTH - lastCrumbWidth;
-            let trackingIndex = this.crumbs.length - 2;
-
-            while (tempCrumbs.length) {
-              if (remainingWidth <= 0) {
-                tempCrumbs.forEach((crumb, index) => {
-                  const updatedCrumb = crumb;
-                  updatedCrumb.collapsed = true;
-                  this.crumbs.splice(index, 1, updatedCrumb);
-                });
-                break;
-              }
-
-              lastCrumbWidth = Math.ceil(
-                tempCrumbs[tempCrumbs.length - 1].ref[0].getBoundingClientRect().width
-              );
-
-              if (lastCrumbWidth > remainingWidth) {
-                tempCrumbs.forEach((crumb, index) => {
-                  const updatedCrumb = crumb;
-                  updatedCrumb.collapsed = true;
-                  this.crumbs.splice(index, 1, updatedCrumb);
-                });
-                break;
-              }
-
-              remainingWidth -= lastCrumbWidth;
-              const lastCrumb = tempCrumbs.pop();
-              lastCrumb.collapsed = false;
-              this.crumbs.splice(trackingIndex, 1, lastCrumb);
-              trackingIndex -= 1;
-            }
-
-            // Allow the last breadcrumb use all space available
-            // Fixes https://github.com/learningequality/kolibri-design-system/issues/198
-            // and https://github.com/learningequality/kolibri/issues/6918
-            if (remainingWidth > 0) {
-              this.lastBreadcrumbMaxWidth = `${DEFAULT_LAST_BREADCRUMB_MAX_WIDTH +
-                remainingWidth}px`;
-            }
-          });
+      preparedCrumbs() {
+        const crumbs = [...this.items];
+        if (!this.showSingleItem && crumbs.length <= 1) {
+          return [];
         }
+        // Add separators between items
+        return crumbs.flatMap((item, index) =>
+          index > 0 ? [{ type: 'separator' }, item] : [item]
+        );
       },
     },
   };
 
 </script>
 
-
-<style lang="scss" scoped>
-
-  @import './styles/definitions';
-  $crumb-max-width: 300px;
-
-  .breadcrumbs {
-    height: 32px;
-    margin-top: 8px;
-    margin-bottom: 8px;
-    font-size: 16px;
-    font-weight: bold;
-    line-height: 32px;
-    white-space: nowrap;
+<style scoped>
+  .breadcrumbs-divider {
+    margin: 0 10px;
+    color: black; /* Adjust color for the ">" separator */
   }
 
   .breadcrumbs-crumb-text {
-    display: inline-block;
-    width: 100%;
-    max-width: $crumb-max-width;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    vertical-align: bottom;
-  }
-
-  .breadcrumbs-dropdown-wrapper {
-    display: inline-block;
-
-    &::after {
-      margin-right: 8px;
-      margin-left: 8px;
-      content: '›';
-    }
-  }
-
-  .breadcrumbs-dropdown {
-    @extend %dropshadow-2dp;
-
-    position: absolute;
-    z-index: 8;
-    max-width: 100%;
-    padding: 16px;
+    color: #007aff; /* Link color */
+    text-decoration: none;
     font-weight: bold;
   }
 
-  .breadcrumbs-dropdown-items {
-    padding: 0;
-    margin: 0;
-    list-style: none;
+  li {
+    display: inline;
   }
-
-  .breadcrumbs-dropdown-item {
-    display: block;
-    padding-top: 8px;
-    padding-bottom: 8px;
-
-    .krouter-item {
-      width: 100%;
-    }
-  }
-
-  .breadcrumbs-visible-items {
-    display: inline-block;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    white-space: nowrap;
-    list-style: none;
-
-    .breadcrumbs-collapsed & {
-      // account for dropdown button width
-      width: calc(100% - 55px);
-    }
-  }
-
-  .breadcrumbs-visible-item {
-    display: inline-block;
-    max-width: 100%;
-  }
-
-  .breadcrumbs-visible-item-notlast {
-    &::after {
-      margin-right: 8px;
-      margin-left: 8px;
-      content: '›';
-    }
-  }
-
-  .breadcrumbs-offscreen {
-    position: absolute;
-    left: -1000em;
-  }
-
 </style>
diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
index b16574dcf..19d6b5312 100644
--- a/lib/KListWithOverflow.vue
+++ b/lib/KListWithOverflow.vue
@@ -28,6 +28,7 @@
     <div
       ref="moreButtonWrapper"
       class="more-button-wrapper"
+      :class="{ 'start-button': overflowDirection === 'start' }"
     >
       <!-- @slot Slot responsible of rendering the "see more" button. This slot receives as prop a list `overflowItems` with items that dont fit into the visible list.-->
       <slot
@@ -70,6 +71,13 @@
         type: [Object, String],
         default: null,
       },
+      overflowDirection: {
+        type: String,
+        default: 'end',
+        validator(value) {
+          return ['start', 'end'].includes(value);
+        },
+      },
     },
     data() {
       return {
@@ -129,6 +137,8 @@
        */
       setOverflowItems() {
         const { list, listWrapper, moreButtonWrapper } = this.$refs;
+
+        // Exit early if necessary refs are not available
         if (!this.mounted || !listWrapper || !list) {
           this.overflowItems = [];
           return;
@@ -146,20 +156,19 @@
 
         const itemsSizes = [];
 
+        // Collect the sizes of all items
         for (let i = 0; i < list.children.length; i++) {
           const item = list.children[i];
           const itemSize = this.getSize(item);
           itemsSizes.push(itemSize);
         }
-
+        const indexSequence = [...Array(list.children.length).keys()];
+        const directionIndexes =
+          this.overflowDirection === 'start' ? indexSequence.reverse() : indexSequence;
         const overflowItemsIdx = [];
-        for (let i = 0; i < list.children.length; i++) {
-          const item = list.children[i];
+        directionIndexes.forEach(i => {
           const itemWidth = itemsSizes[i].width;
-
-          // If the item dont fit in the available space or if we have already
-          // overflowed items, we hide it. This means that once one item overflows,
-          // all the following items will be hidden.
+          const item = list.children[i];
           if (itemWidth >= availableWidth || overflowItemsIdx.length > 0) {
             overflowItemsIdx.push(i);
             item.style.visibility = 'hidden';
@@ -174,7 +183,7 @@
               maxHeight = itemHeight;
             }
           }
-        }
+        });
 
         // check if overflowed items would fit if the moreButton were not visible
         const overflowedWidth = overflowItemsIdx.reduce(
@@ -201,6 +210,7 @@
         list.style.maxWidth = `${maxWidth}px`;
         list.style.maxHeight = `${maxHeight}px`;
       },
+
       /**
        * Fixes the visibility of the dividers that are shown and hidden when the list overflows.
        * The visible list should not end with a divider, and the overflowed items should not
@@ -254,17 +264,17 @@
 
 
 <style scoped>
-
   .list-wrapper {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-between; 
     width: 100%;
   }
+
   .list {
     overflow: visible;
     display: flex;
     flex-wrap: wrap;
-    position: relative;
+    
     align-items: center;
   }
 
@@ -274,7 +284,15 @@
   }
 
   .more-button-wrapper {
-    visibility: hidden;
+    visibility: visible;
+    order: 0; /* Ensure it remains in its original position for keyboard navigation */
+  }
+
+  /* When the 'start-button' class is added, position visually at the start */
+  .more-button-wrapper.start-button {
+    order: -1; /* Moves visually to the start */
+    z-index: 1; /* Ensure it's in front if needed */
   }
 
 </style>
+

From cd730f1821ceef5becb428b01d392dfdf1ae546c Mon Sep 17 00:00:00 2001
From: shruti862 <shrutiyadav862@gmail.com>
Date: Sun, 8 Dec 2024 17:03:50 +0530
Subject: [PATCH 2/6] added comments to reference issues  in
 lib/KBreadcrumbs.vue

---
 lib/KBreadcrumbs.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index 351e3e3dc..b37b26a2b 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -22,6 +22,7 @@
     </template>
 
     <!-- Render the separator between items -->
+    <!-- issue :: but right now it is not placing separators between items of list -->
     <template #divider>
       <span class="breadcrumbs-divider">›</span>
     </template>
@@ -34,12 +35,13 @@
         appearance="raised-button"
       >
         <template #menu>
+          <!-- issue :: dropdown menu shows only text of the overflowItems but not the link , I don't know whether i am doing the right way to reference link or not -->
           <KDropdownMenu
             :options="overflowItems
               .filter(item => item.type !== 'separator') // Filter out separators
               .map(item => ({
                 label: item.text, // Display 'text' in the menu
-                link: item.link ? item.link.path : null // Use 'path' for the actual hyperlink
+                link: item.link ? item.link : null 
               }))"
           />
         </template>

From 77c86a0e70b6d0121468301267d3aea02b7d3723 Mon Sep 17 00:00:00 2001
From: shruti862 <shrutiyadav862@gmail.com>
Date: Thu, 12 Dec 2024 17:21:14 +0530
Subject: [PATCH 3/6] new commits

---
 lib/KBreadcrumbs.vue      | 171 +++++++++++++++++++++++++-------------
 lib/KDropdownMenu.vue     |  11 ++-
 lib/KListWithOverflow.vue |  36 +++++---
 3 files changed, 144 insertions(+), 74 deletions(-)

diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index b37b26a2b..e2f589098 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -1,54 +1,66 @@
 <template>
 
-  <KListWithOverflow
-    overflowDirection="start"
-    :items="preparedCrumbs"
-  >
-    <!-- Render individual breadcrumb items -->
-    <template #item="{ item }">
-      <li>
-        <KRouterLink
-          v-if="item.link"
-          :text="item.text"
-          :to="item.link"
-        >
+  <div class="breadcrumbs">
+    <KListWithOverflow
+      overflowDirection="start"
+      :items="preparedCrumbs"
+    >
+      <!-- Render individual breadcrumb items -->
+      <template #item="{ item }">
+        <li>
+          <KRouterLink
+            v-if="item.link"
+            :text="item.text"
+            :to="item.link"
+          >
+
+            <template #text="{ text }">
+              <span class="breadcrumbs-crumb-text">{{ text }}</span>
+            </template>
+          </KRouterLink>
+          <span v-else>{{ item.text }}</span>
+        </li>
+      </template>
+
 
-          <template #text="{ text }">
-            <span class="breadcrumbs-crumb-text">{{ text }}</span>
+      <template #divider>
+        <span class="breadcrumbs-divider">›</span>
+      </template>
+
+
+      <template #more="{ overflowItems }">
+        <KIconButton
+          size="small"
+          icon="chevronDown"
+          appearance="raised-button"
+        >
+          <template #menu>
+            <KDropdownMenu
+              :options="overflowItems
+                .filter(item => item.type !== 'divider') 
+                .map(item => ({
+                  label: item.text, 
+                  link: item.link ? item.link : null 
+                }))"
+            >
+              <template #option="{ option }">
+                <template v-if="option.link">
+                  <a :href="option.link" class="dropdown-link" target="_blank" rel="noopener noreferrer">
+                    {{ option.label }}
+                  </a>
+                </template>
+                <template v-else>
+                  <span class="dropdown-text">{{ option.label }}</span>
+                </template>
+              </template>
+            </KDropdownMenu>
           </template>
-        </KRouterLink>
-        <span v-else>{{ item.text }}</span>
-      </li>
-    </template>
-
-    <!-- Render the separator between items -->
-    <!-- issue :: but right now it is not placing separators between items of list -->
-    <template #divider>
-      <span class="breadcrumbs-divider">›</span>
-    </template>
-
-    <!-- Render the "more" overflow dropdown and its separator -->
-    <template #more="{ overflowItems }">
-      <KIconButton
-        size="small"
-        icon="chevronDown"
-        appearance="raised-button"
-      >
-        <template #menu>
-          <!-- issue :: dropdown menu shows only text of the overflowItems but not the link , I don't know whether i am doing the right way to reference link or not -->
-          <KDropdownMenu
-            :options="overflowItems
-              .filter(item => item.type !== 'separator') // Filter out separators
-              .map(item => ({
-                label: item.text, // Display 'text' in the menu
-                link: item.link ? item.link : null 
-              }))"
-          />
-        </template>
-      </KIconButton>
-      <span class="breadcrumbs-divider">›</span>
-    </template>
-  </KListWithOverflow>
+        </KIconButton>
+
+      </template>
+    </KListWithOverflow>
+
+  </div>
 
 </template>
 
@@ -71,29 +83,76 @@
         if (!this.showSingleItem && crumbs.length <= 1) {
           return [];
         }
-        // Add separators between items
-        return crumbs.flatMap((item, index) =>
-          index > 0 ? [{ type: 'separator' }, item] : [item]
-        );
+        // Add dividers between items
+        return crumbs.flatMap((item, index) => (index > 0 ? [{ type: 'divider' }, item] : [item]));
       },
     },
+    mounted() {
+      console.log('Prepared Crumbs on Mount:', this.preparedCrumbs);
+    },
   };
 
 </script>
 
-<style scoped>
-  .breadcrumbs-divider {
-    margin: 0 10px;
-    color: black; /* Adjust color for the ">" separator */
+<style scoped lang="scss">
+
+  $crumb-max-width: 300px;
+  .breadcrumbs {
+    height: 32px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    overflow: visible;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 32px;
+    white-space: nowrap;
   }
 
   .breadcrumbs-crumb-text {
-    color: #007aff; /* Link color */
+    display: inline-block;
+    width: 100%;
+    max-width: $crumb-max-width;
+    overflow: hidden;
+    font-weight: bold;
     text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: bottom;
+  }
+  .breadcrumbs-divider {
+    margin-right: 8px;
+    margin-left: 8px;
+    color: #000000;
+  }
+
+  .breadcrumbs-crumb-text {
     font-weight: bold;
+    color: #007aff;
+    text-decoration: none;
   }
 
   li {
+    position: static;
     display: inline;
   }
+  .dropdown-link {
+    display: inline-block;
+    padding: 16px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #4368f5;
+    text-decoration: underline;
+    cursor: pointer;
+    background-color: transparent;
+  }
+
+  /* Dropdown text styles (non-clickable items) */
+  .dropdown-text {
+    display: inline-block;
+    padding: 16px;
+    font-size: 16px;
+    color: #000000;
+    background-color: transparent;
+  }
+
 </style>
diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
index 625b40b37..acc3f921d 100644
--- a/lib/KDropdownMenu.vue
+++ b/lib/KDropdownMenu.vue
@@ -17,12 +17,11 @@
     >
       <!-- Slot to set a header to the dropdown menu -->
       <slot name="header"></slot>
-      <UiMenu 
-        ref="menu" 
-        :options="options" 
-        :hasIcons="hasIcons" 
-        @select="handleSelection" 
-      />
+      <UiMenu ref="menu" :options="options" :hasIcons="hasIcons" @select="handleSelection">
+        <template #option="{ option }">
+          <slot name="option" :option="option"></slot>
+        </template> 
+      </UiMenu>
     </UiPopover>
   </div>
 
diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
index 19d6b5312..a9ca628e0 100644
--- a/lib/KListWithOverflow.vue
+++ b/lib/KListWithOverflow.vue
@@ -5,19 +5,31 @@
     class="list-wrapper"
     :style="appearanceOverrides"
   >
+    <!-- Render More Button Before List for 'start' Direction -->
+    <div
+      v-if="overflowDirection === 'start'"
+      ref="moreButtonWrapper"
+      class="more-button-wrapper"
+    >
+      <slot
+        v-if="isMoreButtonVisible"
+        name="more"
+        :overflowItems="overflowItems"
+      ></slot>
+    </div>
+
     <div
       ref="list"
       class="list"
     >
       <template v-for="(item) in items">
-        <!-- @slot Slot for rendering divider items -->
+        <!-- Divider Slot -->
         <slot
           v-if="isDivider(item)"
           name="divider"
           :divider="item"
-        >
-        </slot>
-        <!-- @slot Slot responsible of rendering each item in the visible list -->
+        ></slot>
+        <!-- Item Slot -->
         <slot
           v-else
           name="item"
@@ -25,12 +37,13 @@
         ></slot>
       </template>
     </div>
+
+    <!-- Render More Button After List for 'end' Direction -->
     <div
+      v-if="overflowDirection === 'end'"
       ref="moreButtonWrapper"
       class="more-button-wrapper"
-      :class="{ 'start-button': overflowDirection === 'start' }"
     >
-      <!-- @slot Slot responsible of rendering the "see more" button. This slot receives as prop a list `overflowItems` with items that dont fit into the visible list.-->
       <slot
         v-if="isMoreButtonVisible"
         name="more"
@@ -42,6 +55,7 @@
 </template>
 
 
+
 <script>
 
   import throttle from 'lodash/throttle';
@@ -73,7 +87,7 @@
       },
       overflowDirection: {
         type: String,
-        default: 'end',
+        default: 'start',
         validator(value) {
           return ['start', 'end'].includes(value);
         },
@@ -156,7 +170,6 @@
 
         const itemsSizes = [];
 
-        // Collect the sizes of all items
         for (let i = 0; i < list.children.length; i++) {
           const item = list.children[i];
           const itemSize = this.getSize(item);
@@ -266,7 +279,7 @@
 <style scoped>
   .list-wrapper {
     display: flex;
-    justify-content: space-between; 
+     justify-content:flex-start;
     width: 100%;
   }
 
@@ -274,7 +287,7 @@
     overflow: visible;
     display: flex;
     flex-wrap: wrap;
-    
+    justify-content:flex-start;
     align-items: center;
   }
 
@@ -285,12 +298,11 @@
 
   .more-button-wrapper {
     visibility: visible;
-    order: 0; /* Ensure it remains in its original position for keyboard navigation */
   }
 
   /* When the 'start-button' class is added, position visually at the start */
   .more-button-wrapper.start-button {
-    order: -1; /* Moves visually to the start */
+  order:-1;
     z-index: 1; /* Ensure it's in front if needed */
   }
 

From cfa0321e3b5f1c0e6e33bdb6c57f8842852c2f5d Mon Sep 17 00:00:00 2001
From: shruti862 <shrutiyadav862@gmail.com>
Date: Thu, 12 Dec 2024 17:50:30 +0530
Subject: [PATCH 4/6] new commit

---
 lib/KBreadcrumbs.vue      | 9 ++-------
 lib/KListWithOverflow.vue | 3 +--
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index e2f589098..ed4bd09e3 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -64,6 +64,7 @@
 
 </template>
 
+
 <script>
 
   export default {
@@ -94,6 +95,7 @@
 
 </script>
 
+
 <style scoped lang="scss">
 
   $crumb-max-width: 300px;
@@ -125,12 +127,6 @@
     color: #000000;
   }
 
-  .breadcrumbs-crumb-text {
-    font-weight: bold;
-    color: #007aff;
-    text-decoration: none;
-  }
-
   li {
     position: static;
     display: inline;
@@ -146,7 +142,6 @@
     background-color: transparent;
   }
 
-  /* Dropdown text styles (non-clickable items) */
   .dropdown-text {
     display: inline-block;
     padding: 16px;
diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
index a9ca628e0..65f3916f6 100644
--- a/lib/KListWithOverflow.vue
+++ b/lib/KListWithOverflow.vue
@@ -55,7 +55,6 @@
 </template>
 
 
-
 <script>
 
   import throttle from 'lodash/throttle';
@@ -87,7 +86,7 @@
       },
       overflowDirection: {
         type: String,
-        default: 'start',
+        default: 'end',
         validator(value) {
           return ['start', 'end'].includes(value);
         },

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 5/6] 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}`)
     );
   });
 }

From 01aededc7ac60f49278ebf9ff15db89d8aec0581 Mon Sep 17 00:00:00 2001
From: shruti862 <shrutiyadav862@gmail.com>
Date: Thu, 12 Dec 2024 18:23:58 +0530
Subject: [PATCH 6/6] Revert "new commit"

This reverts commit 4ada24cc425592406237fedc7e43c0d30dcfbc8d.
---
 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, 261 insertions(+), 457 deletions(-)

diff --git a/docs/assets/definitions.scss b/docs/assets/definitions.scss
index d5b47a33d..189800664 100644
--- a/docs/assets/definitions.scss
+++ b/docs/assets/definitions.scss
@@ -4,5 +4,6 @@ $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 2dbc2dd1b..0f2bf3588 100644
--- a/docs/common/DocsDoNot.vue
+++ b/docs/common/DocsDoNot.vue
@@ -5,9 +5,7 @@
       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>
@@ -16,9 +14,7 @@
       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 217b3df4f..8a66d9619 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 854be74fe..40e874a84 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 93038f640..a024a2394 100644
--- a/docs/common/DocsPageTemplate/jsdocs/EventsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/EventsTable.vue
@@ -4,9 +4,7 @@
     <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 72af96c5e..8d871c2d5 100644
--- a/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue
@@ -4,9 +4,7 @@
     <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 02e038588..a9e6f4103 100644
--- a/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue
@@ -4,9 +4,7 @@
     <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 4a7cd754d..7b9b54171 100644
--- a/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue
@@ -4,9 +4,7 @@
     <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 39799e5f5..3a9bda661 100644
--- a/docs/common/DocsShowCode/webpack-loader.js
+++ b/docs/common/DocsShowCode/webpack-loader.js
@@ -1,14 +1,11 @@
 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 cf653de15..d54ddb1a4 100644
--- a/docs/pages/appbars/index.vue
+++ b/docs/pages/appbars/index.vue
@@ -101,16 +101,12 @@
 
     <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>
 
@@ -123,7 +119,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
@@ -133,19 +129,15 @@
 
     <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 bd544e5f0..9539b8559 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 d9143e1c6..389bbf537 100644
--- a/docs/pages/colors.vue
+++ b/docs/pages/colors.vue
@@ -63,17 +63,13 @@
       </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>
@@ -87,7 +83,7 @@
       </p>
 
       <DocsShowCode language="html">
-        <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })">
+        <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })" >
       </DocsShowCode>
 
       <p>
@@ -112,18 +108,10 @@
       </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
@@ -513,7 +501,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 4609bf5c6..ed364eec3 100644
--- a/docs/pages/errors/index.vue
+++ b/docs/pages/errors/index.vue
@@ -50,9 +50,7 @@
       </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">
@@ -70,14 +68,10 @@
       </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>
@@ -86,14 +80,10 @@
       </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>
@@ -112,27 +102,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
@@ -151,7 +141,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.
@@ -166,14 +156,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 a3d824b5f..924fec84b 100644
--- a/docs/pages/glossary/index.vue
+++ b/docs/pages/glossary/index.vue
@@ -34,13 +34,9 @@
       <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 ffeb6f82a..c21256371 100644
--- a/docs/pages/icons/IconTable.vue
+++ b/docs/pages/icons/IconTable.vue
@@ -6,9 +6,7 @@
       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"
@@ -18,9 +16,7 @@
       />
     </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"
@@ -30,9 +26,7 @@
       />
     </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"
@@ -42,9 +36,7 @@
       />
     </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"
@@ -129,22 +121,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 12c51b9b9..876a09e12 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 16d670a60..6c5edc280 100644
--- a/docs/pages/kcardgrid.vue
+++ b/docs/pages/kcardgrid.vue
@@ -856,9 +856,7 @@
           >
             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 ffa119e35..bbb169be4 100644
--- a/docs/pages/kemptyplaceholder.vue
+++ b/docs/pages/kemptyplaceholder.vue
@@ -28,50 +28,28 @@
         <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 6f135ac60..a85b8c788 100644
--- a/docs/pages/kimg.vue
+++ b/docs/pages/kimg.vue
@@ -22,9 +22,7 @@
           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>
@@ -72,9 +70,7 @@
       <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">
@@ -129,14 +125,10 @@
         />
       </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 9b0bfbe98..c8f895293 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 67801067b..8ff34c83f 100644
--- a/docs/pages/klogo.vue
+++ b/docs/pages/klogo.vue
@@ -25,9 +25,7 @@
           :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">
@@ -48,9 +46,7 @@
           :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">
@@ -72,9 +68,7 @@
           :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">
@@ -121,9 +115,7 @@
             'blackGrey',
           ]"
         >
-          <p :key="`text${colorScheme}`">
-            Color scheme: {{ colorScheme }}
-          </p>
+          <p :key="`text${colorScheme}`">Color scheme: {{ colorScheme }}</p>
           <KLogo
             :ref="`${colorScheme}LogoWithBackground`"
             :key="colorScheme"
@@ -137,9 +129,7 @@
             :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 6edb5c583..f809f5782 100644
--- a/docs/pages/ktabs.vue
+++ b/docs/pages/ktabs.vue
@@ -13,15 +13,9 @@
           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>
 
@@ -52,15 +46,9 @@
           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 7d9c1a652..4dd3b87f4 100644
--- a/docs/pages/ktabslist.vue
+++ b/docs/pages/ktabslist.vue
@@ -63,15 +63,9 @@
           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 b8d742c37..046ea04e1 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 d27089233..e0d52236a 100644
--- a/docs/pages/menus/index.vue
+++ b/docs/pages/menus/index.vue
@@ -50,16 +50,12 @@
 
     <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>
 
@@ -89,16 +85,12 @@
 
     <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 4028e8a71..084e54909 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,61 +150,45 @@
     >
       <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 772054bfa..a48cb314c 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 1adeda684..01c916016 100644
--- a/docs/pages/playground/cards.vue
+++ b/docs/pages/playground/cards.vue
@@ -1,9 +1,7 @@
 <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 5af8c4816..9764d79c8 100644
--- a/docs/pages/styling/index.vue
+++ b/docs/pages/styling/index.vue
@@ -60,9 +60,7 @@
         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 -->
@@ -79,9 +77,7 @@
       <!-- 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.
@@ -131,15 +127,9 @@
       </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>
@@ -214,12 +204,8 @@
         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 999a5ee57..936998558 100644
--- a/docs/pages/tabs.vue
+++ b/docs/pages/tabs.vue
@@ -17,15 +17,9 @@
           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 bc5e9d322..b5ba3c5a3 100644
--- a/docs/pages/textfields/index.vue
+++ b/docs/pages/textfields/index.vue
@@ -50,16 +50,14 @@
 
     <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>
@@ -78,7 +76,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>
@@ -87,25 +85,21 @@
 
     <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>
@@ -114,7 +108,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>
@@ -123,7 +117,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
@@ -150,28 +144,22 @@
 
       <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>
@@ -185,7 +173,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>
@@ -194,10 +182,8 @@
 
     <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 9f84cc7d0..7d317a839 100644
--- a/docs/pages/usekliveregion.vue
+++ b/docs/pages/usekliveregion.vue
@@ -121,9 +121,7 @@
           :value="politeMessageInput"
           @input="updatePoliteMessage"
         />
-        <KButton @click="sendPoliteMessage(politeMessageInput)">
-          Send
-        </KButton>
+        <KButton @click="sendPoliteMessage(politeMessageInput)"> Send </KButton>
       </DocsShow>
 
       <DocsShow language="html">
@@ -132,9 +130,7 @@
           :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 c0d3fd39d..8f30661c5 100644
--- a/docs/pages/usekshow.vue
+++ b/docs/pages/usekshow.vue
@@ -21,12 +21,8 @@
       <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 -->
@@ -200,7 +196,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 d534833b3..4bc5ed6f6 100644
--- a/jest.conf/index.js
+++ b/jest.conf/index.js
@@ -1,10 +1,8 @@
 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 305950201..24cdaeb3f 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 be6adccc9..f28eca95e 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 96b619361..59bef559d 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 6f6e1e80e..3cef036ad 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 bad5b45ec..ca0a5164a 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 d367c0ff8..d8f777b78 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 86ca046fc..f016d1553 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 9f3fe5376..dca8a956c 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,13 +439,18 @@
   }
 
   .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 13f57ece6..32f461843 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 d1ec42f0c..4437ebbce 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,28 +642,7 @@
       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)) {
@@ -673,7 +652,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]);
@@ -721,7 +700,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) {
@@ -896,7 +875,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)'),
             );
           }
         });
@@ -949,7 +928,7 @@
         const notEnoughSpaceBelow =
           buttonPosition > this.maxDropdownHeight &&
           this.scrollableAncestor.offsetHeight - buttonPosition <
-            buttonHeight + this.maxDropdownHeight;
+          buttonHeight + this.maxDropdownHeight;
 
         this.dropdownButtonBottom = notEnoughSpaceBelow ? buttonHeight + 'px' : 'auto';
       },
@@ -1085,7 +1064,9 @@
     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 8e7def0dc..0900a55f1 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 004eaa0da..42a8be538 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 90b357537..1436174eb 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 12f71949b..094ef5bef 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 d87a7d3e8..954e4a4d3 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 76879d173..0f3caf237 100644
--- a/lib/buttons-and-links/buttons.scss
+++ b/lib/buttons-and-links/buttons.scss
@@ -1,7 +1,10 @@
 @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 616649129..8ed22ef5c 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 9de23a5f0..57145ec7a 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 b800fe7f5..4d753aa74 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 48d7745bb..f58ba7743 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 d8809a5ba..19c98c0a2 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 1105f40c9..a1f39e024 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 28c2700a2..c6a2acee4 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 7a4a6c729..534472d1f 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 11f73467a..1cf85558b 100644
--- a/lib/loaders/KCircularLoader.vue
+++ b/lib/loaders/KCircularLoader.vue
@@ -275,7 +275,9 @@
 
   .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 12a5cd6da..3d9ecc79e 100644
--- a/lib/styles/darkenColors.js
+++ b/lib/styles/darkenColors.js
@@ -1,19 +1,13 @@
 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 c692705db..523247843 100644
--- a/lib/styles/definitions.scss
+++ b/lib/styles/definitions.scss
@@ -60,12 +60,16 @@ $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.
@@ -83,7 +87,9 @@ $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 987ba72ab..055807577 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 80ba227e4..65cba287f 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 113f9059a..3fa01f86e 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 a6d7cf4ff..cde20b369 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 7f9b67d3e..d663b54c3 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 c0c66f50f..2258b4f2e 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -10,8 +10,7 @@ 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 ae82ac528..422ade86b 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 97f26347b..6cd3bf6ba 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 a850d144f..5f8ebb897 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}`),
     );
   });
 }