From cf75a89979022d1f30666613d1a324e9a8da189a Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Mon, 9 Dec 2024 12:44:42 -0800
Subject: [PATCH] Update all linting for latest version of kolibri-format.

---
 .eslintrc.js                                  |  27 +-
 .prettierrc.js                                |   2 +-
 docs/assets/definitions.scss                  |   3 +-
 docs/common/DocsAnchorTarget.vue              |   6 +-
 docs/common/DocsColorBlock.vue                |  15 +-
 docs/common/DocsDoNot.vue                     |  18 +-
 docs/common/DocsExternalLink.vue              |  11 +-
 docs/common/DocsGithubLink.vue                |  10 +-
 docs/common/DocsPageSection.vue               |  10 +-
 docs/common/DocsPageTemplate/BranchLink.vue   |   9 +-
 docs/common/DocsPageTemplate/Header.vue       |  28 +-
 .../DocsPageTemplate/SideNav/NavLink.vue      |   4 +-
 .../common/DocsPageTemplate/SideNav/index.vue |   9 +-
 docs/common/DocsPageTemplate/index.vue        |   9 +-
 .../DocsPageTemplate/jsdocs/EventsTable.vue   |  14 +-
 .../DocsPageTemplate/jsdocs/MethodsTable.vue  |  14 +-
 .../DocsPageTemplate/jsdocs/PropsTable.vue    |  18 +-
 .../DocsPageTemplate/jsdocs/SlotsTable.vue    |  14 +-
 docs/common/DocsShow.vue                      |   5 +-
 docs/common/DocsShowCode/index.vue            |   5 +-
 docs/common/DocsShowCode/webpack-loader.js    |   9 +-
 docs/common/DocsToggleButton.vue              |   6 +-
 docs/pages-components/DocsKCard.vue           |  86 +++-
 docs/pages/accessibility.vue                  |  90 +++-
 docs/pages/appbars/index.vue                  | 126 +++--
 docs/pages/buttons.vue                        | 238 +++++++---
 docs/pages/colors.vue                         | 372 ++++++++++-----
 docs/pages/errors/index.vue                   | 234 ++++++----
 docs/pages/filters/index.vue                  | 160 ++++---
 docs/pages/glossary/index.vue                 |  52 ++-
 docs/pages/icons/IconBlock.vue                |   5 +-
 docs/pages/icons/IconTable.vue                |  30 +-
 docs/pages/icons/index.vue                    | 175 +++++--
 docs/pages/index.vue                          | 110 ++++-
 docs/pages/installation.vue                   |  66 ++-
 docs/pages/kbreadcrumbs.vue                   |  42 +-
 docs/pages/kbutton.vue                        |  71 ++-
 docs/pages/kbuttongroup.vue                   |  29 +-
 docs/pages/kcard.vue                          | 429 +++++++++++++-----
 docs/pages/kcardgrid.vue                      | 427 +++++++++++++----
 docs/pages/kcheckbox.vue                      |  77 +++-
 docs/pages/kcircularloader.vue                |  47 +-
 docs/pages/kdaterange.vue                     |  18 +-
 docs/pages/kdropdownmenu.vue                  |  55 +--
 docs/pages/kemptyplaceholder.vue              |  66 ++-
 docs/pages/kexternallink.vue                  |  65 ++-
 docs/pages/kfixedgrid.vue                     |  11 +-
 docs/pages/kfixedgriditem.vue                 |  12 +-
 docs/pages/kfocustrap.vue                     |  17 +-
 docs/pages/kgrid.vue                          |  21 +-
 docs/pages/kgriditem.vue                      |  22 +-
 docs/pages/kicon.vue                          |  14 +-
 docs/pages/kiconbutton.vue                    |  71 ++-
 docs/pages/kimg.vue                           | 165 +++++--
 docs/pages/klinearloader.vue                  |  47 +-
 docs/pages/klistwithoverflow.vue              |  79 ++--
 docs/pages/klogo.vue                          | 100 ++--
 docs/pages/kmodal.vue                         |  11 +-
 docs/pages/koptionaltext.vue                  |  82 ++--
 docs/pages/koverlay.vue                       |  39 +-
 docs/pages/kradiobutton.vue                   |  74 ++-
 docs/pages/kradiobuttongroup.vue              |  10 +-
 docs/pages/krouterlink.vue                    |  75 ++-
 docs/pages/kselect.vue                        |  65 ++-
 docs/pages/kswitch.vue                        |  57 ++-
 docs/pages/ktable.vue                         |  88 +++-
 docs/pages/ktabs.vue                          | 136 ++++--
 docs/pages/ktabslist.vue                      | 188 +++++---
 docs/pages/ktabspanel.vue                     |  28 +-
 docs/pages/ktextbox.vue                       |  79 +++-
 docs/pages/ktexttruncator.vue                 |  16 +-
 docs/pages/ktransition.vue                    |  64 ++-
 docs/pages/layout/index.vue                   | 294 ++++++++----
 docs/pages/loaders/index.vue                  |  75 +--
 docs/pages/menus/index.vue                    | 104 +++--
 docs/pages/modals/index.vue                   | 196 ++++----
 docs/pages/pageheader/index.vue               |  87 ++--
 docs/pages/playground/cards.vue               |  79 +++-
 docs/pages/playground/index.vue               |   1 -
 docs/pages/principles.vue                     |  69 ++-
 docs/pages/release-process.vue                | 196 +++++---
 docs/pages/snackbars.vue                      |  59 ++-
 docs/pages/styling/index.vue                  | 190 +++++---
 docs/pages/tabs.vue                           |  31 +-
 docs/pages/textfields/index.vue               | 172 ++++---
 docs/pages/usekliveregion.vue                 | 117 ++++-
 docs/pages/usekresponsiveelement.vue          |  29 +-
 docs/pages/usekresponsivewindow.vue           |  95 +++-
 docs/pages/usekshow.vue                       | 100 ++--
 docs/pages/writing.vue                        |  87 +++-
 jest.conf/index.js                            |   6 +-
 jest.conf/setup.js                            |   6 +-
 lib/KBreadcrumbs.vue                          |  38 +-
 lib/KCheckbox.vue                             |  13 +-
 lib/KDateRange/KDateCalendar.vue              | 191 ++++++--
 lib/KDateRange/KDateDay.vue                   |  46 +-
 lib/KDateRange/KDateInput.vue                 |  12 +-
 lib/KDateRange/ValidationMachine.js           |   6 +-
 .../__tests__/ValidationMachine.spec.js       |   8 +-
 lib/KDateRange/index.vue                      |  10 +-
 lib/KDropdownMenu.vue                         |  24 +-
 lib/KFocusTrap.vue                            |   6 +-
 lib/KIcon/iconDefinitions.js                  |  10 +-
 lib/KIcon/index.vue                           |   2 +-
 lib/KImg/__tests__/KImg.spec.js               |   2 +-
 lib/KImg/index.vue                            |   8 +-
 lib/KLabeledIcon.vue                          |  35 +-
 lib/KListWithOverflow.vue                     |  17 +-
 lib/KLogo/index.vue                           | 160 +++++--
 lib/KModal.vue                                |  46 +-
 lib/KOptionalText.vue                         |   8 +-
 lib/KOverlay/index.vue                        |   1 -
 lib/KRadioButton.vue                          |  21 +-
 lib/KRadioButtonGroup.vue                     |  10 +-
 lib/KSelect/KSelectOption.vue                 |  45 +-
 lib/KSelect/index.vue                         | 114 +++--
 lib/KSwitch.vue                               |  15 +-
 lib/KTable/KTableGridItem.vue                 |  13 +-
 lib/KTable/index.vue                          | 202 ++++++---
 lib/KTable/useSorting/__tests__/index.spec.js |  14 +-
 lib/KTable/useSorting/index.js                |  10 +-
 lib/KThemePlugin.js                           |   5 +-
 lib/KToolbar.vue                              |  29 +-
 lib/KTooltip/Popper.vue                       |  65 ++-
 lib/KTooltip/index.vue                        |  11 +-
 lib/__tests__/KModal.spec.js                  |   4 +-
 lib/__tests__/KRadioButtonGroup.spec.js       |   6 +-
 lib/__tests__/KTable.spec.js                  |  11 +-
 lib/buttons-and-links/KButton.vue             |   7 +-
 lib/buttons-and-links/KButtonGroup.vue        |   4 +-
 lib/buttons-and-links/KExternalLink.vue       |  14 +-
 lib/buttons-and-links/KIconButton.vue         |  10 +-
 lib/buttons-and-links/KRouterLink.vue         |  10 +-
 lib/buttons-and-links/buttonMixin.js          |   5 +-
 lib/buttons-and-links/buttons.scss            |   7 +-
 lib/cards/KCard.vue                           |  26 +-
 lib/cards/KCardGrid.vue                       |  28 +-
 lib/cards/SkeletonCard.vue                    |  11 +-
 lib/cards/__tests__/KCard.spec.js             |   2 +-
 lib/cards/useGridLoading.js                   |   4 +-
 lib/cards/utils.js                            |   2 +-
 lib/composables/_useOverlay/index.js          |   3 +-
 lib/composables/useKLiveRegion/index.js       |   1 +
 lib/grids/KFixedGrid.vue                      |   7 +-
 lib/grids/KFixedGridItem.vue                  |   8 +-
 lib/grids/KGridItem.vue                       |   5 +-
 lib/grids/Overlay.vue                         |   9 +-
 lib/grids/extra-units.css                     |  37 --
 lib/grids/test/KFixedGrid.spec.js             |   6 +-
 lib/grids/test/KFixedGridItem.spec.js         |  10 +-
 lib/grids/test/KGridItem.spec.js              |  12 +-
 lib/loaders/KCircularLoader.vue               |  29 +-
 lib/loaders/KLinearLoader.vue                 |  11 +-
 lib/styles/darkenColors.js                    |  12 +-
 lib/styles/definitions.scss                   |  12 +-
 lib/styles/theme.js                           |   2 +-
 lib/styles/trackInputModality.js              |  12 +-
 lib/tabs/KTabs.vue                            |  24 +-
 lib/tabs/KTabsList.vue                        |   4 +-
 lib/tabs/KTabsPanel.vue                       |   5 +-
 lib/tabs/__tests__/KTabsList.spec.js          |  12 +-
 lib/tabs/__tests__/KTabsPanel.spec.js         |   4 +-
 lib/utils/focusManagement.js                  |   2 +-
 nuxt.config.js                                |   3 +-
 utils/extractApi.js                           |   2 +-
 utils/extractEnvironment.js                   |   2 +-
 utils/extractRstIcons.js                      |  10 +-
 167 files changed, 5799 insertions(+), 2673 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index ddcf841b4..4595554bd 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,18 +1,23 @@
 const esLintConfig = require('kolibri-format/.eslintrc');
 
-// Vuetify's helper attributes use hyphens and they would
-// not be recognized if auto-formatted to camel case
-esLintConfig.rules['vue/attribute-hyphenation'] = 0;
-
-// This rule conflicts with Nuxt page naming
-esLintConfig.rules['kolibri/vue-filename-and-component-name-match'] = 0;
+const nuxtDocsRules = {
+  // Vuetify's helper attributes use hyphens and they would
+  // not be recognized if auto-formatted to camel case
+  'vue/attribute-hyphenation': 0,
+  // This rule conflicts with Nuxt page naming
+  'vue/no-reserved-component-names': 0,
+  // This rule conflicts with Nuxt page naming
+  'kolibri/vue-filename-and-component-name-match': 0,
+  // max-len rules are unhelpful for documentation
+  'max-len': 0,
+  'vue/max-len': 0,
+};
 
-// This rule is currently disabled in kolibri-format/.eslintrc
-esLintConfig.rules['vue/require-default-prop'] = 1;
+esLintConfig.overrides.push({
+  files: ['docs/**/*.vue'],
+  rules: nuxtDocsRules,
+});
 
-// max-len rules are unhelpful for documentation
-esLintConfig.rules['max-len'] = 0;
-esLintConfig.rules['vue/max-len'] = 0;
 
 // Allow nuxt resources to be found
 esLintConfig.settings['import/resolver'].nuxt = {
diff --git a/.prettierrc.js b/.prettierrc.js
index 68851adda..aa0587e6a 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1 +1 @@
-module.exports = require('kolibri-tools/.prettierrc');
+module.exports = require('kolibri-format/.prettierrc');
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/DocsAnchorTarget.vue b/docs/common/DocsAnchorTarget.vue
index bfd7fbbb6..59a4e2d6a 100644
--- a/docs/common/DocsAnchorTarget.vue
+++ b/docs/common/DocsAnchorTarget.vue
@@ -14,7 +14,11 @@
       />
     </DocsInternalLink>
     <!-- hidden target to account for variable height of header -->
-    <a :id="anchorId" :href="anchor" class="offset-target">#</a>
+    <a
+      :id="anchorId"
+      :href="anchor"
+      class="offset-target"
+    >#</a>
   </div>
 
 </template>
diff --git a/docs/common/DocsColorBlock.vue b/docs/common/DocsColorBlock.vue
index 86fdf3840..71d0db1b9 100644
--- a/docs/common/DocsColorBlock.vue
+++ b/docs/common/DocsColorBlock.vue
@@ -1,9 +1,15 @@
 <template>
 
   <div class="block-wrapper">
-    <div class="color-block" :style="{ backgroundColor: value }"></div>
+    <div
+      class="color-block"
+      :style="{ backgroundColor: value }"
+    ></div>
     <div class="code name">
-      <code>{{ name }}</code><DocsAnchorTarget v-if="definition" :anchor="anchor" />
+      <code>{{ name }}</code><DocsAnchorTarget
+        v-if="definition"
+        :anchor="anchor"
+      />
     </div>
     <div class="code value">
       <DocsInternalLink
@@ -15,7 +21,10 @@
       <code v-else-if="isToken">{{ tokenSource }}</code>
       <code v-else>{{ value }}</code>
     </div>
-    <p v-if="$slots.default" class="description">
+    <p
+      v-if="$slots.default"
+      class="description"
+    >
       <slot></slot>
     </p>
   </div>
diff --git a/docs/common/DocsDoNot.vue b/docs/common/DocsDoNot.vue
index 8cfe03368..0f2bf3588 100644
--- a/docs/common/DocsDoNot.vue
+++ b/docs/common/DocsDoNot.vue
@@ -1,18 +1,20 @@
 <template>
 
   <div>
-    <div v-if="$slots.do" class="show">
-      <div class="header">
-        <span class="do mark">✔</span> Do
-      </div>
+    <div
+      v-if="$slots.do"
+      class="show"
+    >
+      <div class="header"><span class="do mark">✔</span> Do</div>
       <div class="content">
         <slot name="do"></slot>
       </div>
     </div>
-    <div v-if="$slots.not" class="show">
-      <div class="header">
-        <span class="mark not">✘</span> Don't
-      </div>
+    <div
+      v-if="$slots.not"
+      class="show"
+    >
+      <div class="header"><span class="mark not">✘</span> Don't</div>
       <div class="content">
         <slot name="not"></slot>
       </div>
diff --git a/docs/common/DocsExternalLink.vue b/docs/common/DocsExternalLink.vue
index 8db893ebf..715ec4067 100644
--- a/docs/common/DocsExternalLink.vue
+++ b/docs/common/DocsExternalLink.vue
@@ -2,7 +2,16 @@
 
   <!-- eslint-disable -->
   <!-- prevent line from wrapping so that icon displays correctly -->
-  <a :href="href" target="_blank"><template v-if="text">{{ text }}</template><template v-else><slot></slot></template><KIcon icon="openNewTab" class="pop" disableColor /></a>
+  <a
+    :href="href"
+    target="_blank"
+    ><template v-if="text">{{ text }}</template
+    ><template v-else><slot></slot></template
+    ><KIcon
+      icon="openNewTab"
+      class="pop"
+      disableColor
+  /></a>
   <!-- eslint-enable -->
 
 </template>
diff --git a/docs/common/DocsGithubLink.vue b/docs/common/DocsGithubLink.vue
index 7b75cfcf1..bee513313 100644
--- a/docs/common/DocsGithubLink.vue
+++ b/docs/common/DocsGithubLink.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <a :href="linkUrl" target="_blank">
+  <a
+    :href="linkUrl"
+    target="_blank"
+  >
     <svg
       class="logo"
       role="img"
@@ -8,8 +11,9 @@
       xmlns="http://www.w3.org/2000/svg"
     >
       <title>GitHub</title>
-      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-    </svg><span>{{ linkText }}</span>
+      <path
+        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+      /></svg><span>{{ linkText }}</span>
   </a>
 
 </template>
diff --git a/docs/common/DocsPageSection.vue b/docs/common/DocsPageSection.vue
index e50acaed7..fdf3e4d04 100644
--- a/docs/common/DocsPageSection.vue
+++ b/docs/common/DocsPageSection.vue
@@ -1,9 +1,15 @@
 <template>
 
-  <section :style="style" class="section-wrapper">
+  <section
+    :style="style"
+    class="section-wrapper"
+  >
     <h2 v-if="title">
       {{ title }}
-      <DocsAnchorTarget v-if="anchor" :anchor="anchor" />
+      <DocsAnchorTarget
+        v-if="anchor"
+        :anchor="anchor"
+      />
     </h2>
     <slot></slot>
   </section>
diff --git a/docs/common/DocsPageTemplate/BranchLink.vue b/docs/common/DocsPageTemplate/BranchLink.vue
index 34537b103..96756a4ae 100644
--- a/docs/common/DocsPageTemplate/BranchLink.vue
+++ b/docs/common/DocsPageTemplate/BranchLink.vue
@@ -6,11 +6,12 @@
       :href="linkUrl"
       :text="linkText"
     />
-    <span v-else>
-      Local environment
-    </span>
+    <span v-else> Local environment </span>
     <span>|</span>
-    <DocsGithubLink text="Release notes" href="https://github.com/learningequality/kolibri-design-system/releases" />
+    <DocsGithubLink
+      text="Release notes"
+      href="https://github.com/learningequality/kolibri-design-system/releases"
+    />
   </div>
 
 </template>
diff --git a/docs/common/DocsPageTemplate/Header.vue b/docs/common/DocsPageTemplate/Header.vue
index c529a00ae..4571fc565 100644
--- a/docs/common/DocsPageTemplate/Header.vue
+++ b/docs/common/DocsPageTemplate/Header.vue
@@ -1,10 +1,16 @@
 <template>
 
-  <div class="header" :class="{ scrolled }">
+  <div
+    class="header"
+    :class="{ scrolled }"
+  >
     <div>
       <h1 class="header-text">
         <span :class="{ code: codeStyle }">{{ title }}</span>
-        <a href="#" @click="scrollToTop">
+        <a
+          href="#"
+          @click="scrollToTop"
+        >
           <file-svg
             src="../../assets/link.svg"
             class="icon-link"
@@ -15,10 +21,20 @@
       </h1>
       <BranchLink style="float: right" />
     </div>
-    <div style="clear: both;"></div>
-    <ul v-if="sections.length" class="nav">
-      <li v-for="(section, i) in sections" :key="i" class="nav-item">
-        <DocsInternalLink :href="section.anchor" :text="section.title" />
+    <div style="clear: both"></div>
+    <ul
+      v-if="sections.length"
+      class="nav"
+    >
+      <li
+        v-for="(section, i) in sections"
+        :key="i"
+        class="nav-item"
+      >
+        <DocsInternalLink
+          :href="section.anchor"
+          :text="section.title"
+        />
       </li>
     </ul>
   </div>
diff --git a/docs/common/DocsPageTemplate/SideNav/NavLink.vue b/docs/common/DocsPageTemplate/SideNav/NavLink.vue
index 9c39acba3..d3be54076 100644
--- a/docs/common/DocsPageTemplate/SideNav/NavLink.vue
+++ b/docs/common/DocsPageTemplate/SideNav/NavLink.vue
@@ -11,7 +11,7 @@
     v-else
     class="block enabled-link"
     :href="page.path"
-    :class="{ currentPage, code: page.isCode }"
+    :class="{ 'current-page': currentPage, code: page.isCode }"
   >
     {{ page.title }}
   </a>
@@ -74,7 +74,7 @@
     }
   }
 
-  .currentPage {
+  .current-page {
     color: black;
     background-color: $border-color;
 
diff --git a/docs/common/DocsPageTemplate/SideNav/index.vue b/docs/common/DocsPageTemplate/SideNav/index.vue
index 5b7450671..8a66d9619 100644
--- a/docs/common/DocsPageTemplate/SideNav/index.vue
+++ b/docs/common/DocsPageTemplate/SideNav/index.vue
@@ -8,7 +8,11 @@
     >
       <template if="loaded">
         <h1 class="header">
-          <KLogo altText="Design System" size="60" :showBackground="true" />
+          <KLogo
+            altText="Design System"
+            size="60"
+            :showBackground="true"
+          />
           <span class="header-text">Design System</span>
         </h1>
 
@@ -22,7 +26,6 @@
           />
         </div>
       </template>
-
     </nav>
 
     <!-- used to help indicate that there is more to see if one scrolls down -->
@@ -64,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 fd9fb915d..40e874a84 100644
--- a/docs/common/DocsPageTemplate/index.vue
+++ b/docs/common/DocsPageTemplate/index.vue
@@ -14,7 +14,7 @@
         :sections="pageSections"
         :title="page.title"
         :codeStyle="page.isCode"
-        style="visibility: hidden;"
+        style="visibility: hidden"
       />
 
       <div class="content">
@@ -26,7 +26,10 @@
           :anchor="section.anchor"
           fullwidth
         >
-          <component :is="section.component" :api="api[section.key]" />
+          <component
+            :is="section.component"
+            :api="api[section.key]"
+          />
         </DocsPageSection>
       </div>
     </div>
@@ -57,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 2ac8546d0..a024a2394 100644
--- a/docs/common/DocsPageTemplate/jsdocs/EventsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/EventsTable.vue
@@ -4,19 +4,23 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">
-          Description
-        </th>
+        <th class="stretch">Description</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(event, i) in publicApi" :key="i">
+      <tr
+        v-for="(event, i) in publicApi"
+        :key="i"
+      >
         <td class="first-col">
           <code>{{ event.name }}</code>
           <DocsAnchorTarget :anchor="`#event:${event.name}`" />
         </td>
         <td>
-          <vue-simple-markdown v-if="event.description" :source="event.description" />
+          <vue-simple-markdown
+            v-if="event.description"
+            :source="event.description"
+          />
           <KEmptyPlaceholder v-else />
         </td>
       </tr>
diff --git a/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue b/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue
index 830f1b625..8d871c2d5 100644
--- a/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue
@@ -4,19 +4,23 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">
-          Description
-        </th>
+        <th class="stretch">Description</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(method, i) in api" :key="i">
+      <tr
+        v-for="(method, i) in api"
+        :key="i"
+      >
         <td class="first-col">
           <code>{{ method.name }}</code>
           <DocsAnchorTarget :anchor="`#method:${method.name}`" />
         </td>
         <td>
-          <vue-simple-markdown v-if="method.description" :source="method.description" />
+          <vue-simple-markdown
+            v-if="method.description"
+            :source="method.description"
+          />
           <KEmptyPlaceholder v-else />
         </td>
       </tr>
diff --git a/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue b/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue
index 5d775fedd..a9e6f4103 100644
--- a/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue
@@ -4,25 +4,31 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">
-          Description
-        </th>
+        <th class="stretch">Description</th>
         <th>Type</th>
         <th>Default</th>
         <th>Required</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(prop, i) in publicApi" :key="i">
+      <tr
+        v-for="(prop, i) in publicApi"
+        :key="i"
+      >
         <td class="first-col">
           <code>{{ prop.name }}</code>
           <DocsAnchorTarget :anchor="`#prop:${prop.name}`" />
         </td>
         <td>
-          <vue-simple-markdown v-if="prop.description" :source="prop.description" />
+          <vue-simple-markdown
+            v-if="prop.description"
+            :source="prop.description"
+          />
           <KEmptyPlaceholder v-else />
         </td>
-        <td><code>{{ prop.type.name }}</code></td>
+        <td>
+          <code>{{ prop.type.name }}</code>
+        </td>
         <td>
           <code v-if="prop.defaultValue">
             {{ prop.defaultValue.value }}
diff --git a/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue b/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue
index 651c622ff..7b9b54171 100644
--- a/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue
+++ b/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue
@@ -4,19 +4,23 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">
-          Description
-        </th>
+        <th class="stretch">Description</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(slot, i) in api" :key="i">
+      <tr
+        v-for="(slot, i) in api"
+        :key="i"
+      >
         <td class="first-col">
           <code>{{ slot.name }}</code>
           <DocsAnchorTarget :anchor="`#slot:${slot.name}`" />
         </td>
         <td>
-          <vue-simple-markdown v-if="slot.description" :source="slot.description" />
+          <vue-simple-markdown
+            v-if="slot.description"
+            :source="slot.description"
+          />
           <KEmptyPlaceholder v-else />
         </td>
       </tr>
diff --git a/docs/common/DocsShow.vue b/docs/common/DocsShow.vue
index 8155abe26..8306b0894 100644
--- a/docs/common/DocsShow.vue
+++ b/docs/common/DocsShow.vue
@@ -1,7 +1,10 @@
 <template>
 
   <div>
-    <div class="show" :style="style">
+    <div
+      class="show"
+      :style="style"
+    >
       <slot></slot>
     </div>
   </div>
diff --git a/docs/common/DocsShowCode/index.vue b/docs/common/DocsShowCode/index.vue
index b56029d3a..9a2257702 100644
--- a/docs/common/DocsShowCode/index.vue
+++ b/docs/common/DocsShowCode/index.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <DocsShow :block="block" :padding="false">
+  <DocsShow
+    :block="block"
+    :padding="false"
+  >
     <!-- Note that slot contents are HTML-escaped using webpack-loader.js -->
     <PrismComponent :language="language">
       <slot></slot>
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/common/DocsToggleButton.vue b/docs/common/DocsToggleButton.vue
index 92e59b2b3..86dd0929b 100644
--- a/docs/common/DocsToggleButton.vue
+++ b/docs/common/DocsToggleButton.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <button class="toggle" @click="onClick">
+  <button
+    class="toggle"
+    @click="onClick"
+  >
     <span v-if="show">{{ hideText }}<KIcon icon="dropup" /></span>
     <span v-else>{{ showText }}<KIcon icon="dropdown" /></span>
   </button>
@@ -83,6 +86,7 @@
 
     &:hover {
       color: $link-hover-color;
+
       svg {
         fill: $link-hover-color;
       }
diff --git a/docs/pages-components/DocsKCard.vue b/docs/pages-components/DocsKCard.vue
index 8ecb732fe..4c28a3b36 100644
--- a/docs/pages-components/DocsKCard.vue
+++ b/docs/pages-components/DocsKCard.vue
@@ -6,48 +6,80 @@
     :orientation="orientation"
     :thumbnailDisplay="thumbnailDisplay"
     :thumbnailAlign="thumbnailAlign"
-    :thumbnailSrc="thumbnailSrc === null ? null : require('../assets/hummingbird-large-cc-by-sa-4.jpg')"
+    :thumbnailSrc="
+      thumbnailSrc === null ? null : require('../assets/hummingbird-large-cc-by-sa-4.jpg')
+    "
     :title="cardTitle"
   >
-
-    <template v-if="$slots.thumbnailPlaceholder" #thumbnailPlaceholder>
+    <template
+      v-if="$slots.thumbnailPlaceholder"
+      #thumbnailPlaceholder
+    >
       <slot name="thumbnailPlaceholder"></slot>
     </template>
-    <template v-else #thumbnailPlaceholder>
+    <template
+      v-else
+      #thumbnailPlaceholder
+    >
       <KIcon
         :style="{ fontSize: '48px' }"
         icon="readSolid"
       />
     </template>
 
-    <template v-if="$slots.aboveTitle" #aboveTitle>
+    <template
+      v-if="$slots.aboveTitle"
+      #aboveTitle
+    >
       <slot name="aboveTitle"></slot>
     </template>
 
-    <template v-if="$scopedSlots.title" #title="{ titleText }">
-      <slot name="title" :titleText="titleText"></slot>
+    <template
+      v-if="$scopedSlots.title"
+      #title="{ titleText }"
+    >
+      <slot
+        name="title"
+        :titleText="titleText"
+      ></slot>
     </template>
 
-    <template v-if="$slots.belowTitle" #belowTitle>
+    <template
+      v-if="$slots.belowTitle"
+      #belowTitle
+    >
       <slot name="belowTitle"></slot>
     </template>
-    <template v-else #belowTitle>
+    <template
+      v-else
+      #belowTitle
+    >
       <KTextTruncator
         text="Discover how hummingbirds play a big role in nature despite their small size. Find out more about their beauty, how they help plants grow, and where they live."
         :maxLines="5"
       />
     </template>
 
-    <template v-if="$slots.footer && !hideFooter" #footer>
+    <template
+      v-if="$slots.footer && !hideFooter"
+      #footer
+    >
       <slot name="footer"></slot>
     </template>
-    <template v-else-if="!hideFooter" #footer>
+    <template
+      v-else-if="!hideFooter"
+      #footer
+    >
       <div class="footer-wrapper">
-        <div class="pills" :style="{ 'color': $themeTokens.annotation }">
-          <span
-            :style="{ 'background-color': $themePalette.grey.v_100 }"
-          >
-            <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
+        <div
+          class="pills"
+          :style="{ color: $themeTokens.annotation }"
+        >
+          <span :style="{ 'background-color': $themePalette.grey.v_100 }">
+            <KIcon
+              icon="readSolid"
+              :style="{ fontSize: '13px', position: 'relative', top: '3px' }"
+            />
             Read
           </span>
           <span
@@ -68,20 +100,32 @@
         :style="{ marginTop: '8px' }"
       >
         <KFixedGrid :numCols="4">
-          <KFixedGridItem :span="3" :style="{ paddingTop: '8px' }">
+          <KFixedGridItem
+            :span="3"
+            :style="{ paddingTop: '8px' }"
+          >
             <KLinearLoader
               type="determinate"
               :progress="20"
             />
           </KFixedGridItem>
-          <KFixedGridItem :span="1" alignment="right">
-            <KIcon icon="schedule" :style="{ fontSize: '18px' }" />
+          <KFixedGridItem
+            :span="1"
+            alignment="right"
+          >
+            <KIcon
+              icon="schedule"
+              :style="{ fontSize: '18px' }"
+            />
           </KFixedGridItem>
         </KFixedGrid>
       </div>
     </template>
 
-    <template v-if="$slots.select" #select>
+    <template
+      v-if="$slots.select"
+      #select
+    >
       <slot name="select"></slot>
     </template>
   </KCard>
@@ -179,4 +223,4 @@
     }
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/pages/accessibility.vue b/docs/pages/accessibility.vue
index 4e1263e91..b91bd56c7 100644
--- a/docs/pages/accessibility.vue
+++ b/docs/pages/accessibility.vue
@@ -1,12 +1,19 @@
 <template>
 
   <DocsPageTemplate>
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Kolibri products should be accessible to the widest possible audience, in the broadest sense of the word 'accessible'. It should run on wide variety of devices, render correctly on a wide variety of screen sizes and assistive technologies, be understandable to people from a wide variety of backgrounds, and be usable by people with diverse abilities.
+        Kolibri products should be accessible to the widest possible audience, in the broadest sense
+        of the word 'accessible'. It should run on wide variety of devices, render correctly on a
+        wide variety of screen sizes and assistive technologies, be understandable to people from a
+        wide variety of backgrounds, and be usable by people with diverse abilities.
       </p>
       <p>
-        At a high level, we follow the web content accessibility guideline that for all users, information should be:
+        At a high level, we follow the web content accessibility guideline that for all users,
+        information should be:
       </p>
       <ul>
         <li>Perceivable</li>
@@ -16,21 +23,42 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Window size and zoom" anchor="#responsiveness">
+    <DocsPageSection
+      title="Window size and zoom"
+      anchor="#responsiveness"
+    >
       <p>
-        Users will use devices that have a wide range of screen sizes. Additionally, some users with poor vision may zoom far in, which effectively lowers the size.
+        Users will use devices that have a wide range of screen sizes. Additionally, some users with
+        poor vision may zoom far in, which effectively lowers the size.
       </p>
       <p>
-        We should aim to allow zooming up to 200%, and down to 480x600 px in both profile and landscape. The app should always remain functional in all extreme screen sizes. Depending on the context, we may want to put additional effort into creating custom layouts optimized for particular screen sizes. For example, we should put additional effort into optimizing the mobile Learner experience, while for administrators this might not be as critical.
+        We should aim to allow zooming up to 200%, and down to 480x600 px in both profile and
+        landscape. The app should always remain functional in all extreme screen sizes. Depending on
+        the context, we may want to put additional effort into creating custom layouts optimized for
+        particular screen sizes. For example, we should put additional effort into optimizing the
+        mobile Learner experience, while for administrators this might not be as critical.
       </p>
       <p>
-        When designing and building layouts, we use the breakpoints defined by Material Design. These are exposed in our app by the <DocsLibraryLink component="useKResponsiveWindow" /> composable. We should never use CSS media queries. See the <DocsInternalLink href="/layout" text="See the Layout page" /> for more information.
+        When designing and building layouts, we use the breakpoints defined by Material Design.
+        These are exposed in our app by the
+        <DocsLibraryLink component="useKResponsiveWindow" /> composable. We should never use CSS
+        media queries. See the
+        <DocsInternalLink
+          href="/layout"
+          text="See the Layout page"
+        />
+        for more information.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Keyboard navigation" anchor="#keyboard">
+    <DocsPageSection
+      title="Keyboard navigation"
+      anchor="#keyboard"
+    >
       <p>
-        Every interaction that can be performed with a mouse or touchscreen should also be accessible by using the keyboard. As much as possible, we should follow best practices including:
+        Every interaction that can be performed with a mouse or touchscreen should also be
+        accessible by using the keyboard. As much as possible, we should follow best practices
+        including:
       </p>
       <ul>
         <li>high-contrast focus indicators</li>
@@ -38,38 +66,56 @@
         <li>conventional keyboard shortcuts for common input widgets</li>
       </ul>
       <p>
-        Using the built-in components outlined in this guide is a good way to ensure that your UI will be navigable by keyboard. When building custom components, use our standard focus outline <code>$coreOutline</code> as described in <DocsInternalLink href="/styling#focus-outline" text="the Styling page" />.
+        Using the built-in components outlined in this guide is a good way to ensure that your UI
+        will be navigable by keyboard. When building custom components, use our standard focus
+        outline <code>$coreOutline</code> as described in
+        <DocsInternalLink
+          href="/styling#focus-outline"
+          text="the Styling page"
+        />.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Screen reader support" anchor="#screen-readers">
+    <DocsPageSection
+      title="Screen reader support"
+      anchor="#screen-readers"
+    >
       <p>
-        All content that can be read by sighted users should be readable by screen readers. Additionally, the app should leverage screen-reader-specific functionality – such as labels, semantically correct HTML tags, and visually-hidden text – that associates descriptive text with functionality.
+        All content that can be read by sighted users should be readable by screen readers.
+        Additionally, the app should leverage screen-reader-specific functionality – such as labels,
+        semantically correct HTML tags, and visually-hidden text – that associates descriptive text
+        with functionality.
       </p>
       <p>
-        Like with keyboard navigation, using the built-in components is a good way to ensure compatibility with screen readers. However, it's also critical to test all new functionality. See this <DocsExternalLink href="https://kolibri-dev.readthedocs.io/en/develop/manual_testing/a11y_resources/index.html" text="comprehensive list of accessibility testing tools" />.
-      </p>
-      <p>
-        Some specific things to watch for:
+        Like with keyboard navigation, using the built-in components is a good way to ensure
+        compatibility with screen readers. However, it's also critical to test all new
+        functionality. See this
+        <DocsExternalLink
+          href="https://kolibri-dev.readthedocs.io/en/develop/manual_testing/a11y_resources/index.html"
+          text="comprehensive list of accessibility testing tools"
+        />.
       </p>
+      <p>Some specific things to watch for:</p>
       <ul>
         <li>
           Use ARIA attributes when appropriate. (In general, this is <em>only</em>
           when using semantically correct HTML is not possible.)
         </li>
-        <li>
-          Nest header tags properly: <code>h1</code>, <code>h2</code>, <code>h3</code>, etc.
-        </li>
+        <li>Nest header tags properly: <code>h1</code>, <code>h2</code>, <code>h3</code>, etc.</li>
         <li><code>alt</code> text on images</li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Color and contrast" anchor="#color">
+    <DocsPageSection
+      title="Color and contrast"
+      anchor="#color"
+    >
       <p>
-        Contrast should be at least 3:1 for large text and 4.5:1 for smaller text. Colors should either be color-blindness-safe, or be redundant with a non-color-based representation of information.
+        Contrast should be at least 3:1 for large text and 4.5:1 for smaller text. Colors should
+        either be color-blindness-safe, or be redundant with a non-color-based representation of
+        information.
       </p>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/appbars/index.vue b/docs/pages/appbars/index.vue
index 3222709a8..d54ddb1a4 100644
--- a/docs/pages/appbars/index.vue
+++ b/docs/pages/appbars/index.vue
@@ -1,45 +1,74 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        App bars show information and actions related to the current page. They can be used for branding, navigation, and providing actions to the user
+        App bars show information and actions related to the current page. They can be used for
+        branding, navigation, and providing actions to the user
       </p>
 
       <p>
-        We have one type of bottom app bar and three types of top app bars: <em>primary bars</em>, <em>back arrow bars</em>, and <em>full-screen modal bars</em>
+        We have one type of bottom app bar and three types of top app bars: <em>primary bars</em>,
+        <em>back arrow bars</em>, and <em>full-screen modal bars</em>
       </p>
 
       <h3>Primary bars</h3>
-      <p>Primary bars are placed on top level pages. They may contain tabs that lead to top-level sections in this part of the application</p>
+      <p>
+        Primary bars are placed on top level pages. They may contain tabs that lead to top-level
+        sections in this part of the application
+      </p>
       <DocsShow>
-        <img class="modal-img" src="./primary-1.png">
+        <img
+          class="modal-img"
+          src="./primary-1.png"
+        >
       </DocsShow>
       <DocsShow>
-        <img class="modal-img" src="./primary-2.png">
+        <img
+          class="modal-img"
+          src="./primary-2.png"
+        >
       </DocsShow>
 
       <h3>Back arrow bars</h3>
       <p>Back arrow buttons allow users to navigate back to the parent page in the hierarchy</p>
       <DocsShow>
-        <img class="modal-img" src="./back-1.png">
+        <img
+          class="modal-img"
+          src="./back-1.png"
+        >
       </DocsShow>
 
       <h3>Full-screen modal bars</h3>
       <p>Full-screen modal bars allows users to dismiss a full-screen form from view</p>
       <DocsShow>
-        <img class="modal-img" src="./form-1.png">
+        <img
+          class="modal-img"
+          src="./form-1.png"
+        >
       </DocsShow>
 
       <h3>Bottom bars</h3>
-      <p>Bottom bars contain contextual metadata and actions related to a page. Use bottom bars to accompany pages with full-screen forms or content selection. Bottom bars are usually sticky to the bottom of a page</p>
+      <p>
+        Bottom bars contain contextual metadata and actions related to a page. Use bottom bars to
+        accompany pages with full-screen forms or content selection. Bottom bars are usually sticky
+        to the bottom of a page
+      </p>
       <DocsShow>
-        <img class="modal-img" src="./bottom-1.png">
+        <img
+          class="modal-img"
+          src="./bottom-1.png"
+        >
       </DocsShow>
     </DocsPageSection>
 
-    <DocsPageSection title="Layout" anchor="#layout">
+    <DocsPageSection
+      title="Layout"
+      anchor="#layout"
+    >
       <h3>Top bars</h3>
       <ul>
         <li>Place navigation icons on the far left</li>
@@ -55,63 +84,67 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Titles" anchor="#titles">
+    <DocsPageSection
+      title="Titles"
+      anchor="#titles"
+    >
       <p>Top bars must have titles that describe the current page</p>
       <ul>
         <li>Titles can describe a feature a user is engaged in (e.g. Create Quiz)</li>
         <li>Titles can describe a high-level section of an app (e.g. Learn, Coach)</li>
         <li>Titles can describe an application being used (e.g. Kolibri Studio)</li>
-        <li>Titles should never include names of user generated text (e.g. resource title or username)</li>
+        <li>
+          Titles should never include names of user generated text (e.g. resource title or username)
+        </li>
       </ul>
     </DocsPageSection>
 
     <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>
 
-    <DocsPageSection title="Exceptions" anchor="#exceptions">
+    <DocsPageSection
+      title="Exceptions"
+      anchor="#exceptions"
+    >
       <p>Purposeful exceptions can be made to incorporate special elements into top bars</p>
     </DocsPageSection>
 
-    <DocsDoNot style="display: inline-block;">
+    <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
+          Change top app bar color to white if visual contrast is needed between the background and
+          action buttons
         </p>
       </template>
     </DocsDoNot>
 
-    <DocsDoNot style="display: inline-block;">
+    <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;">
+    <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>
 
-    <DocsPageSection title="Icons" anchor="#icons">
+    <DocsPageSection
+      title="Icons"
+      anchor="#icons"
+    >
       <ul>
         <li>Menu icon: opens up a navigation drawer</li>
         <li>Back arrow: takes the user back to the previous page</li>
@@ -119,7 +152,10 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Behaviors" anchor="#behaviors">
+    <DocsPageSection
+      title="Behaviors"
+      anchor="#behaviors"
+    >
       <p>Small screens and browser windows have an effect on different top bar components</p>
       <h3>Scrolling</h3>
       <ul>
@@ -135,13 +171,21 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Accessibility" anchor="#accessibility">
+    <DocsPageSection
+      title="Accessibility"
+      anchor="#accessibility"
+    >
       <ul>
         <li>Icon and title placement become mirrored for right-to-left languages</li>
-        <li>Top bar titles and iconography colors must meet <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html" target="_blank">1.4.3 Contrast (Level AA) criteria</a></li>
+        <li>
+          Top bar titles and iconography colors must meet
+          <a
+            href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html"
+            target="_blank"
+          >1.4.3 Contrast (Level AA) criteria</a>
+        </li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/buttons.vue b/docs/pages/buttons.vue
index b033f57dd..9539b8559 100644
--- a/docs/pages/buttons.vue
+++ b/docs/pages/buttons.vue
@@ -1,143 +1,242 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        Buttons use the <code>&lt;button&gt;</code> HTML tag and trigger an action on the current
+        page. Links use the <code>&lt;a&gt;</code> HTML tag and navigate to a new URL.
+      </p>
       <p>
-        Buttons use the <code>&lt;button&gt;</code> HTML tag and trigger an action on the current page. Links use the <code>&lt;a&gt;</code> HTML tag and navigate to a new URL.
+        Buttons and links are <em>not</em> visually distinguishable. Buttons can visually look like
+        classic links, and links can visually look like classic buttons.
       </p>
       <p>
-        Buttons and links are <em>not</em> visually distinguishable. Buttons can visually look like classic links, and links can visually look like classic buttons.
+        When the user would expect to use navigation history, right-click to copy a URL, or
+        control-click to open a page in a new tab, then a link should be used. Otherwise, a button
+        should be used.
       </p>
       <p>
-        When the user would expect to use navigation history, right-click to copy a URL, or control-click to open a page in a new tab, then a link should be used. Otherwise, a button should be used.
+        As such, there are three components that all behave similarly, but are used for different
+        purposes:
       </p>
-      <p>As such, there are three components that all behave similarly, but are used for different purposes:</p>
       <ul>
         <li>
-          <DocsLibraryLink component="KButton" /> is used to create <code>&lt;button&gt;</code> tags with <code>@click</code> event handlers.
+          <DocsLibraryLink component="KButton" /> is used to create <code>&lt;button&gt;</code> tags
+          with <code>@click</code> event handlers.
         </li>
         <li>
-          <DocsLibraryLink component="KRouterLink" /> is used to create Vue router <code>&lt;router-link&gt;</code> components with <code>:to</code> properties. These compile into <code>&lt;a&gt;</code> tags.
+          <DocsLibraryLink component="KRouterLink" /> is used to create Vue router
+          <code>&lt;router-link&gt;</code> components with <code>:to</code> properties. These
+          compile into <code>&lt;a&gt;</code> tags.
         </li>
         <li>
-          <DocsLibraryLink component="KExternalLink" /> is used to create standard <code>&lt;a&gt;</code> tags with an <code>href</code> attribute.
+          <DocsLibraryLink component="KExternalLink" /> is used to create standard
+          <code>&lt;a&gt;</code> tags with an <code>href</code> attribute.
         </li>
       </ul>
       <p>We also provide:</p>
       <ul>
-        <li>a <DocsLibraryLink component="KButtonGroup" /> wrapper component to set standardized spacing between groups of buttons.</li>
+        <li>
+          a <DocsLibraryLink component="KButtonGroup" /> wrapper component to set standardized
+          spacing between groups of buttons.
+        </li>
         <li>a <DocsLibraryLink component="KIconButton" /> for smaller icon-and-tooltip buttons</li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Visual styles" anchor="#visualstyles">
+    <DocsPageSection
+      title="Visual styles"
+      anchor="#visualstyles"
+    >
       <p>
-        There are 3 main appearances of button and link components. (Remember that a button component can visually look like a link, and a link component can visually look like a button.) Each appearance maps to a different level of <DocsExternalLink href="https://en.wikipedia.org/wiki/Visual_hierarchy" text="visual hierarchy" />:
+        There are 3 main appearances of button and link components. (Remember that a button
+        component can visually look like a link, and a link component can visually look like a
+        button.) Each appearance maps to a different level of
+        <DocsExternalLink
+          href="https://en.wikipedia.org/wiki/Visual_hierarchy"
+          text="visual hierarchy"
+        />:
       </p>
       <ul>
+        <li><strong>Raised buttons:</strong> button-like appearance for more prominent actions</li>
+        <li><strong>Flat buttons:</strong> button-like appearance for less prominent actions</li>
         <li>
-          <strong>Raised buttons:</strong> button-like appearance for more prominent actions
-        </li>
-        <li>
-          <strong>Flat buttons:</strong> button-like appearance for less prominent actions
-        </li>
-        <li>
-          <strong>Basic links:</strong> hyperlink-like appearance for deemphasized actions, or actions inline within text
+          <strong>Basic links:</strong> hyperlink-like appearance for deemphasized actions, or
+          actions inline within text
         </li>
       </ul>
       <DocsShow>
         <KButtonGroup>
-          <KButton text="Raised button" :primary="true" appearance="raised-button" />
-          <KButton text="Flat button" :primary="true" appearance="flat-button" />
-          <KButton text="Basic link" :primary="true" appearance="basic-link" />
+          <KButton
+            text="Raised button"
+            :primary="true"
+            appearance="raised-button"
+          />
+          <KButton
+            text="Flat button"
+            :primary="true"
+            appearance="flat-button"
+          />
+          <KButton
+            text="Basic link"
+            :primary="true"
+            appearance="basic-link"
+          />
         </KButtonGroup>
       </DocsShow>
 
       <p>
-        Actions with a button-like appearance can also be <strong>primary</strong> or <strong>secondary</strong>. There should only be one primary button visible at a time, and it should be a common or default action.
+        Actions with a button-like appearance can also be <strong>primary</strong> or
+        <strong>secondary</strong>. There should only be one primary button visible at a time, and
+        it should be a common or default action.
       </p>
 
       <DocsShow>
-        <KButtonGroup style="margin-bottom: 8px;">
-          <KButton text="Primary" :primary="true" appearance="raised-button" />
-          <KButton text="Secondary" :primary="false" appearance="raised-button" />
+        <KButtonGroup style="margin-bottom: 8px">
+          <KButton
+            text="Primary"
+            :primary="true"
+            appearance="raised-button"
+          />
+          <KButton
+            text="Secondary"
+            :primary="false"
+            appearance="raised-button"
+          />
         </KButtonGroup>
-        <br>
+        <br >
         <KButtonGroup>
-          <KButton text="Primary" :primary="true" appearance="flat-button" />
-          <KButton text="Secondary" :primary="false" appearance="flat-button" />
+          <KButton
+            text="Primary"
+            :primary="true"
+            appearance="flat-button"
+          />
+          <KButton
+            text="Secondary"
+            :primary="false"
+            appearance="flat-button"
+          />
         </KButtonGroup>
       </DocsShow>
 
+      <p>Note that we don't have a "secondary basic link" style.</p>
       <p>
-        Note that we don't have a "secondary basic link" style.
-      </p>
-      <p>
-        Buttons can also contain an icon. Based on the need, the icon can come either before or after the text. Icons should be used sparingly when it adds significant value to the meaning of the button.
+        Buttons can also contain an icon. Based on the need, the icon can come either before or
+        after the text. Icons should be used sparingly when it adds significant value to the meaning
+        of the button.
       </p>
 
       <DocsShow>
         <KButtonGroup>
-          <KButton text="Previous" :primary="true" icon="back" appearance="raised-button" />
-          <KButton text="Next" :primary="true" iconAfter="forward" appearance="raised-button" />
+          <KButton
+            text="Previous"
+            :primary="true"
+            icon="back"
+            appearance="raised-button"
+          />
+          <KButton
+            text="Next"
+            :primary="true"
+            iconAfter="forward"
+            appearance="raised-button"
+          />
         </KButtonGroup>
       </DocsShow>
-
     </DocsPageSection>
-    <DocsPageSection title="Label text" anchor="#labels">
+    <DocsPageSection
+      title="Label text"
+      anchor="#labels"
+    >
       <ul>
-        <li>Labels should typically have a single word, or two at most, although there is an exception for links</li>
         <li>
-          Avoid ambiguity; be specific about the action that will be performed. For example,
-          use 'Save' instead of 'OK'
+          Labels should typically have a single word, or two at most, although there is an exception
+          for links
+        </li>
+        <li>
+          Avoid ambiguity; be specific about the action that will be performed. For example, use
+          'Save' instead of 'OK'
         </li>
         <li>Avoid commas and other punctuation</li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Placement" anchor="#placement">
-      <p>
-        We have some conventions regarding placement of 'raised' and 'flat' buttons:
-      </p>
+    <DocsPageSection
+      title="Placement"
+      anchor="#placement"
+    >
+      <p>We have some conventions regarding placement of 'raised' and 'flat' buttons:</p>
       <ul>
         <li>Right-aligned at the bottom of modal pop-ups</li>
         <li>Left-aligned at the bottom of page forms</li>
-        <li>Global actions related to full pages should be right-aligned and to the right of the page title on large screens, and left-aligned below the title on small screens. Use of <code>KGrid</code> is recommended</li>
+        <li>
+          Global actions related to full pages should be right-aligned and to the right of the page
+          title on large screens, and left-aligned below the title on small screens. Use of
+          <code>KGrid</code> is recommended
+        </li>
       </ul>
       <p>
-        Use the <DocsLibraryLink component="KButtonGroup" /> component to add spacing between adjacent buttons.
+        Use the <DocsLibraryLink component="KButtonGroup" /> component to add spacing between
+        adjacent buttons.
       </p>
-
     </DocsPageSection>
 
-    <DocsPageSection title="Icon buttons" anchor="#icon_buttons">
-      <p>
-        Use <DocsLibraryLink component="KIconButton" /> in situations where larger buttons with visible text would hinder the user experience. Use the flat secondary style unless the action should be highlighted.
-      </p>
+    <DocsPageSection
+      title="Icon buttons"
+      anchor="#icon_buttons"
+    >
       <p>
-        A tooltip with the name of the action is required for an icon button.
+        Use <DocsLibraryLink component="KIconButton" /> in situations where larger buttons with
+        visible text would hinder the user experience. Use the flat secondary style unless the
+        action should be highlighted.
       </p>
+      <p>A tooltip with the name of the action is required for an icon button.</p>
       <DocsShow>
         <KButtonGroup>
-          <KIconButton tooltip="Add" icon="plus" :primary="true" appearance="raised-button" />
-          <KIconButton tooltip="Subtract" icon="minus" :primary="false" appearance="raised-button" />
-          <KIconButton tooltip="Add" text="Flat button" :primary="true" icon="plus" appearance="flat-button" />
-          <KIconButton tooltip="Subtract" text="Flat button" :primary="false" icon="minus" appearance="flat-button" />
+          <KIconButton
+            tooltip="Add"
+            icon="plus"
+            :primary="true"
+            appearance="raised-button"
+          />
+          <KIconButton
+            tooltip="Subtract"
+            icon="minus"
+            :primary="false"
+            appearance="raised-button"
+          />
+          <KIconButton
+            tooltip="Add"
+            text="Flat button"
+            :primary="true"
+            icon="plus"
+            appearance="flat-button"
+          />
+          <KIconButton
+            tooltip="Subtract"
+            text="Flat button"
+            :primary="false"
+            icon="minus"
+            appearance="flat-button"
+          />
         </KButtonGroup>
       </DocsShow>
       <p>
-        Be sure to consider internationalization, translation, and cultural implications when choosing icons.
+        Be sure to consider internationalization, translation, and cultural implications when
+        choosing icons.
       </p>
-
     </DocsPageSection>
 
-    <DocsPageSection title="Dropdowns" anchor="#dropdowns">
+    <DocsPageSection
+      title="Dropdowns"
+      anchor="#dropdowns"
+    >
+      <p>Buttons can also have drop-down menus.</p>
       <p>
-        Buttons can also have drop-down menus. 
-      </p>
-      <p> 
-        <code>KDropdownMenu</code> component can be added using <code>#menu</code> slot in either a <code>KButton</code> or a <code>KIconButton</code>. 
+        <code>KDropdownMenu</code> component can be added using <code>#menu</code> slot in either a
+        <code>KButton</code> or a <code>KIconButton</code>.
       </p>
 
       <DocsShow>
@@ -148,7 +247,7 @@
             iconAfter="chevronDown"
           >
             <KDropdownMenu
-              style="margin-right: 16px;"
+              style="margin-right: 16px"
               text="Primary"
               :primary="true"
               :options="['Option 1', 'Option 2']"
@@ -163,7 +262,7 @@
           >
             <template #menu>
               <KDropdownMenu
-                style="margin-right: 16px;"
+                style="margin-right: 16px"
                 text="Primary"
                 :primary="true"
                 :options="['Option 1', 'Option 2']"
@@ -172,12 +271,14 @@
             </template>
           </KIconButton>
         </KButtonGroup>
-
       </DocsShow>
       <p>For more guidance, see the <DocsLibraryLink component="KDropdownMenu" /> component.</p>
     </DocsPageSection>
 
-    <DocsPageSection title="Visual specs" anchor="#specs" />
+    <DocsPageSection
+      title="Visual specs"
+      anchor="#specs"
+    />
     <ul>
       <li>Border radius: 2px</li>
       <li>Elevation: 4dp</li>
@@ -186,7 +287,6 @@
       <li>Text button padding: 8px 16px</li>
       <li>Icon button padding: 8px</li>
     </ul>
-
   </DocsPageTemplate>
 
 </template>
@@ -196,4 +296,4 @@
 
   export default {};
 
-</script>
\ No newline at end of file
+</script>
diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
index de29ed610..389bbf537 100644
--- a/docs/pages/colors.vue
+++ b/docs/pages/colors.vue
@@ -1,19 +1,20 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        During design and development, colors should be referenced by name. Using named colors has a few important benefits:
+        During design and development, colors should be referenced by name. Using named colors has a
+        few important benefits:
       </p>
       <ul>
         <li>More meaningful than hex values in mockups and code</li>
         <li>Encourages consistency and accessibility across the application</li>
         <li>Support for alternate themes</li>
       </ul>
-      <p>
-        Some examples of named colors in the Kolibri Design System include:
-      </p>
+      <p>Some examples of named colors in the Kolibri Design System include:</p>
       <DocsColorBlock name="tokens.text" />
       <DocsColorBlock name="tokens.error" />
       <DocsColorBlock name="tokens.primary" />
@@ -22,7 +23,8 @@
       <DocsColorBlock name="palette.grey.v_400" />
 
       <p>
-        Care must be taken as we adjust the colors in the application. There are a number of considerations to take into account, including:
+        Care must be taken as we adjust the colors in the application. There are a number of
+        considerations to take into account, including:
       </p>
       <ul>
         <li>Branding, aesthetics, and color harmony</li>
@@ -31,15 +33,18 @@
         <li>Maintainability and consistency of the application and code</li>
         <li>Amenability to theming by using tokens correctly</li>
       </ul>
-
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
-
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <h3>Computed styles</h3>
 
       <p>
-        For technical reasons relating to supporting dynamic themes colors must be set using Javascript. Adding <code>Vue.use(KThemePlugin)</code> makes all colors available on every Vue component in your application under the following objects:
+        For technical reasons relating to supporting dynamic themes colors must be set using
+        Javascript. Adding <code>Vue.use(KThemePlugin)</code> makes all colors available on every
+        Vue component in your application under the following objects:
       </p>
 
       <ul>
@@ -49,23 +54,22 @@
       </ul>
 
       <p>
-        For example, to color text using <code>$themeTokens.error</code> you use can a <DocsExternalLink text="computed style" href="https://vuejs.org/v2/guide/class-and-style.html" /> to write:
+        For example, to color text using <code>$themeTokens.error</code> you use can a
+        <DocsExternalLink
+          text="computed style"
+          href="https://vuejs.org/v2/guide/class-and-style.html"
+        />
+        to write:
       </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>
+      <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>
@@ -73,19 +77,22 @@
       <h3>Computed classes</h3>
 
       <p>
-        We also attach a special helper function <code>$computedClass</code> which can be used to dynamically create new classes. This is useful for specifying colors in pseudo-elements such as <code>:hover</code> or <code>:focus</code>. For example:
+        We also attach a special helper function <code>$computedClass</code> which can be used to
+        dynamically create new classes. This is useful for specifying colors in pseudo-elements such
+        as <code>:hover</code> or <code>:focus</code>. For example:
       </p>
 
       <DocsShowCode language="html">
-        <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })">
+        <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })" >
       </DocsShowCode>
 
-      <p>This is usually not necessary, and using <code>style</code> is preferred for simplicity when possible.</p>
-
-      <h3>Notation</h3>
       <p>
-        In the references below we use the following shorthand:
+        This is usually not necessary, and using <code>style</code> is preferred for simplicity when
+        possible.
       </p>
+
+      <h3>Notation</h3>
+      <p>In the references below we use the following shorthand:</p>
       <ul>
         <li><code>brand</code> refers to <code>$themeBrand</code></li>
         <li><code>tokens</code> refers to <code>$themeTokens</code></li>
@@ -94,149 +101,278 @@
 
       <h3>Darken utilities</h3>
 
-      <p>You can apply darken utilities <code>$darken1</code>, <code>$darken2</code>, and <code>$darken3</code> to palette colors and tokens to achieve their darker shades. They are available on every Vue component.</p>
+      <p>
+        You can apply darken utilities <code>$darken1</code>, <code>$darken2</code>, and
+        <code>$darken3</code> to palette colors and tokens to achieve their darker shades. They are
+        available on every Vue component.
+      </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 class="darken-block" :style="{ backgroundColor: $themePalette.red.v_600 }">
+        <div
+          class="darken-block"
+          :style="{ backgroundColor: $themePalette.red.v_600 }"
+        >
           <code>base</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
+        <div
+          class="darken-block"
+          :style="{ backgroundColor: $darken1($themePalette.red.v_600) }"
+        >
           <code>$darken1</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
+        <div
+          class="darken-block"
+          :style="{ backgroundColor: $darken2($themePalette.red.v_600) }"
+        >
           <code>$darken2</code>
         </div>
-        <div class="darken-block" :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
+        <div
+          class="darken-block"
+          :style="{ backgroundColor: $darken3($themePalette.red.v_600) }"
+        >
           <code>$darken3</code>
         </div>
       </DocsShow>
 
-      <p>These utilities shouldn't be overused. Always check if there is a shade in the palette available that can be used instead.</p>
+      <p>
+        These utilities shouldn't be overused. Always check if there is a shade in the palette
+        available that can be used instead.
+      </p>
     </DocsPageSection>
 
-
-    <DocsPageSection title="Tokens" anchor="#tokens">
+    <DocsPageSection
+      title="Tokens"
+      anchor="#tokens"
+    >
       <p>
-        Color tokens are the most important set of named colors because they have a specific, well-defined usage within the application. Over time, our set of tokens should grow and shrink as necessary to fit the needs of the application.
+        Color tokens are the most important set of named colors because they have a specific,
+        well-defined usage within the application. Over time, our set of tokens should grow and
+        shrink as necessary to fit the needs of the application.
       </p>
       <p>
-        Color tokens are by themselves abstract and defined by a purpose, not a color value. A theme makes them concrete by mapping them to specific
-        <DocsInternalLink text="brand colors" href="#brand" />
+        Color tokens are by themselves abstract and defined by a purpose, not a color value. A theme
+        makes them concrete by mapping them to specific
+        <DocsInternalLink
+          text="brand colors"
+          href="#brand"
+        />
         and
-        <DocsInternalLink text="palette colors" href="#palette" />.
+        <DocsInternalLink
+          text="palette colors"
+          href="#palette"
+        />.
       </p>
       <p>
-        When using tokens, it's very important to choose them based on their semantic purpose, not because of their color values. This ensures that new themes can be created effectively.
+        When using tokens, it's very important to choose them based on their semantic purpose, not
+        because of their color values. This ensures that new themes can be created effectively.
       </p>
 
       <h3>Brand shortcuts</h3>
-      <DocsColorBlock name="tokens.primary" definition>
+      <DocsColorBlock
+        name="tokens.primary"
+        definition
+      >
         Default primary brand color. Commonly used for interactive elements
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.primaryDark" definition>
-        Default dark variant of the primary brand color. Commonly used for the hover state of interactive elements
+      <DocsColorBlock
+        name="tokens.primaryDark"
+        definition
+      >
+        Default dark variant of the primary brand color. Commonly used for the hover state of
+        interactive elements
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.secondary" definition>
+      <DocsColorBlock
+        name="tokens.secondary"
+        definition
+      >
         Default secondary brand color
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.secondaryDark" definition>
+      <DocsColorBlock
+        name="tokens.secondaryDark"
+        definition
+      >
         Default dark variant of the secondary brand color
       </DocsColorBlock>
 
       <h3>UI Colors</h3>
-      <DocsColorBlock name="tokens.surface" definition>
+      <DocsColorBlock
+        name="tokens.surface"
+        definition
+      >
         Default background color
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.appBar" definition>
+      <DocsColorBlock
+        name="tokens.appBar"
+        definition
+      >
         Default app bar component color
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.appBarDark" definition>
+      <DocsColorBlock
+        name="tokens.appBarDark"
+        definition
+      >
         Default dark color of the app bar component
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.link" definition>
+      <DocsColorBlock
+        name="tokens.link"
+        definition
+      >
         Hyperlink text color with the application
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.fineLine" definition>
+      <DocsColorBlock
+        name="tokens.fineLine"
+        definition
+      >
         Used for divider lines and rules
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.loading" definition>
+      <DocsColorBlock
+        name="tokens.loading"
+        definition
+      >
         Color for loaders, spinners, and other progress indicators
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.success" definition>
+      <DocsColorBlock
+        name="tokens.success"
+        definition
+      >
         Indicates the successful completion of an action in the application
       </DocsColorBlock>
 
       <h3>Text</h3>
-      <DocsColorBlock name="tokens.text" definition>
+      <DocsColorBlock
+        name="tokens.text"
+        definition
+      >
         Normal text color. (Typically used on top of the <code>$themeTokens.surface</code> color)
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.annotation" definition>
-        Text color with lower visual weight. (Typically used on top of the <code>$themeTokens.surface</code> color)
+      <DocsColorBlock
+        name="tokens.annotation"
+        definition
+      >
+        Text color with lower visual weight. (Typically used on top of the
+        <code>$themeTokens.surface</code> color)
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.textDisabled" definition>
-        Text color with lowest visual weight. (Typically used on top of the <code>$themeTokens.surface</code> color)
+      <DocsColorBlock
+        name="tokens.textDisabled"
+        definition
+      >
+        Text color with lowest visual weight. (Typically used on top of the
+        <code>$themeTokens.surface</code> color)
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.textInverted" definition>
-        Text color for creating sufficient contrast when used on dark backgrounds (such as <code>$themeTokens.primary</code>)
+      <DocsColorBlock
+        name="tokens.textInverted"
+        definition
+      >
+        Text color for creating sufficient contrast when used on dark backgrounds (such as
+        <code>$themeTokens.primary</code>)
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.focusOutline" definition>
+      <DocsColorBlock
+        name="tokens.focusOutline"
+        definition
+      >
         Used to indicate keyboard focus
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.error" definition>
+      <DocsColorBlock
+        name="tokens.error"
+        definition
+      >
         Indicates an application or validation error
       </DocsColorBlock>
 
       <h3>Learner activity</h3>
-      <DocsColorBlock name="tokens.progress" definition>
+      <DocsColorBlock
+        name="tokens.progress"
+        definition
+      >
         Indicates "in-progress" learner activity
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.mastered" definition>
+      <DocsColorBlock
+        name="tokens.mastered"
+        definition
+      >
         Indicates learner mastery or completion
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.correct" definition>
+      <DocsColorBlock
+        name="tokens.correct"
+        definition
+      >
         Indicates a correct response by a learner
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.incorrect" definition>
+      <DocsColorBlock
+        name="tokens.incorrect"
+        definition
+      >
         Indicates an incorrect response by a learner
       </DocsColorBlock>
 
       <h3>User-related labels</h3>
-      <DocsColorBlock name="tokens.coachContent" definition>
+      <DocsColorBlock
+        name="tokens.coachContent"
+        definition
+      >
         Used for coloring coach content icons
       </DocsColorBlock>
-      <DocsColorBlock name="tokens.superAdmin" definition>
+      <DocsColorBlock
+        name="tokens.superAdmin"
+        definition
+      >
         Used for coloring super admin permission key icons
       </DocsColorBlock>
 
       <h3>Content-related labels</h3>
-      <DocsColorBlock name="tokens.practice" definition />
-      <DocsColorBlock name="tokens.watch" definition />
-      <DocsColorBlock name="tokens.listen" definition />
-      <DocsColorBlock name="tokens.read" definition />
-      <DocsColorBlock name="tokens.explore" definition />
-      <DocsColorBlock name="tokens.create" definition />
-      <DocsColorBlock name="tokens.reflect" definition />
-      <DocsColorBlock name="tokens.topic" definition />
-
+      <DocsColorBlock
+        name="tokens.practice"
+        definition
+      />
+      <DocsColorBlock
+        name="tokens.watch"
+        definition
+      />
+      <DocsColorBlock
+        name="tokens.listen"
+        definition
+      />
+      <DocsColorBlock
+        name="tokens.read"
+        definition
+      />
+      <DocsColorBlock
+        name="tokens.explore"
+        definition
+      />
+      <DocsColorBlock
+        name="tokens.create"
+        definition
+      />
+      <DocsColorBlock
+        name="tokens.reflect"
+        definition
+      />
+      <DocsColorBlock
+        name="tokens.topic"
+        definition
+      />
     </DocsPageSection>
 
-    <DocsPageSection title="Scales" anchor="#scales">
+    <DocsPageSection
+      title="Scales"
+      anchor="#scales"
+    >
       <p>
-        A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow <DocsExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into brightness levels, named <code>v_100</code>, <code>v_200</code>, <code>v_300</code>, <code>v_400</code>, <code>v_500</code>, <code>v_600</code>:
+        A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a
+        particular color hue. In the Kolibri Design System, we follow
+        <DocsExternalLink
+          text="Google's Material convention"
+          href="https://material.io/archive/guidelines/style/color.html"
+        />
+        and segment colors into brightness levels, named <code>v_100</code>, <code>v_200</code>,
+        <code>v_300</code>, <code>v_400</code>, <code>v_500</code>, <code>v_600</code>:
       </p>
       <DocsColorBlock name="palette.green.v_100" />
       <DocsColorBlock name="palette.green.v_200" />
@@ -245,13 +381,28 @@
       <DocsColorBlock name="palette.green.v_500" />
       <DocsColorBlock name="palette.green.v_600" />
       <p>
-        Due to the inconsistent way that humans perceive color and light, computing these scales is <DocsExternalLink text="both art and science" href="https://uxplanet.org/designing-systematic-colors-b5d2605b15c" />. It should not be done by simply sliding a "brightness" setting. We used <DocsExternalLink text="materialpalettes.com" href="https://materialpalettes.com/" /> to generate the scales for our primary and secondary brand colors. The same should be done for new themes.
+        Due to the inconsistent way that humans perceive color and light, computing these scales is
+        <DocsExternalLink
+          text="both art and science"
+          href="https://uxplanet.org/designing-systematic-colors-b5d2605b15c"
+        />. It should not be done by simply sliding a "brightness" setting. We used
+        <DocsExternalLink
+          text="materialpalettes.com"
+          href="https://materialpalettes.com/"
+        />
+        to generate the scales for our primary and secondary brand colors. The same should be done
+        for new themes.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Brand colors" anchor="#brand">
+    <DocsPageSection
+      title="Brand colors"
+      anchor="#brand"
+    >
       <p>
-        Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues.
+        Brand colors are chosen to reflect the mood, identity, or trademark of an application or an
+        organization. The design system defines primary (dominant) and secondary (accent) branded
+        color hues.
       </p>
 
       <div>
@@ -272,24 +423,41 @@
           />
         </div>
       </div>
-
     </DocsPageSection>
 
-    <DocsPageSection title="Palette" anchor="#palette">
+    <DocsPageSection
+      title="Palette"
+      anchor="#palette"
+    >
       <p>
-        A color palette is a set of generic base colors that cover a wide range of the color spectrum. We use the <DocsExternalLink text="2014 Material Design color palette" href="https://material.io/archive/guidelines/style/color.html#color-color-tool" />, which has many colors to choose from.
+        A color palette is a set of generic base colors that cover a wide range of the color
+        spectrum. We use the
+        <DocsExternalLink
+          text="2014 Material Design color palette"
+          href="https://material.io/archive/guidelines/style/color.html#color-color-tool"
+        />, which has many colors to choose from.
       </p>
       <p>
-        In our design system, colors from the palette have names like <code>pink</code>, <code>grey</code>, and <code>amber</code>.
+        In our design system, colors from the palette have names like <code>pink</code>,
+        <code>grey</code>, and <code>amber</code>.
       </p>
       <p>
-        With the exception of grey values, choosing arbitrary colors from the palette is only slightly better than choosing arbitrary hex values from the full color spectrum. No consistency or meaning is ensured, and they should generally be avoided in favor of specific color tokens and brand colors.
+        With the exception of grey values, choosing arbitrary colors from the palette is only
+        slightly better than choosing arbitrary hex values from the full color spectrum. No
+        consistency or meaning is ensured, and they should generally be avoided in favor of specific
+        color tokens and brand colors.
       </p>
 
       <h3>Grey values</h3>
       <p>A scale of standard greys</p>
-      <DocsColorBlock name="palette.white" definition />
-      <DocsColorBlock name="palette.black" definition />
+      <DocsColorBlock
+        name="palette.white"
+        definition
+      />
+      <DocsColorBlock
+        name="palette.black"
+        definition
+      />
       <DocsColorBlock
         v-for="(hex, variant) in $themePalette.grey"
         :key="variant"
@@ -313,9 +481,7 @@
           />
         </div>
       </div>
-
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
@@ -335,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 c8abf6269..ed364eec3 100644
--- a/docs/pages/errors/index.vue
+++ b/docs/pages/errors/index.vue
@@ -1,189 +1,223 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Errors occur when the software fails to do what the user expected it to or when the system fails. The system should display clear messages to help users identify when these errors happen and ways to quickly understand and resolve them.
+        Errors occur when the software fails to do what the user expected it to or when the system
+        fails. The system should display clear messages to help users identify when these errors
+        happen and ways to quickly understand and resolve them.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Error types" anchor="#error-types">
-      <h3>
-        User errors
-      </h3>
+    <DocsPageSection
+      title="Error types"
+      anchor="#error-types"
+    >
+      <h3>User errors</h3>
       <p>
-        User errors occur when a user input or interaction isn’t understood by the system. Examples include invalid field inputs and accessing blocked pages.
+        User errors occur when a user input or interaction isn’t understood by the system. Examples
+        include invalid field inputs and accessing blocked pages.
       </p>
-      <h3>
-        System errors
-      </h3>
+      <h3>System errors</h3>
       <p>
-        System errors are usually caused by factors that are not the fault of the user. Examples include connectivity or network issues, missing data or page not found, and other unexpected issues.
+        System errors are usually caused by factors that are not the fault of the user. Examples
+        include connectivity or network issues, missing data or page not found, and other unexpected
+        issues.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Language" anchor="#language">
+    <DocsPageSection
+      title="Language"
+      anchor="#language"
+    >
       <p>
-        Follow the <DocsInternalLink text="writing guidelines" href="/writing" /> with a special focus on clear, concise, and natural language. Explain causes of errors if it will help the user resolve their issue, but do not use complex technical terms and run-on explanations.
+        Follow the
+        <DocsInternalLink
+          text="writing guidelines"
+          href="/writing"
+        />
+        with a special focus on clear, concise, and natural language. Explain causes of errors if it
+        will help the user resolve their issue, but do not use complex technical terms and run-on
+        explanations.
       </p>
       <p>
-        Error messages should also be actionable. Offer the solution as an action when possible and make sure the action label is specific to the outcome. If including an action isn’t possible, then briefly explain how the user can fix their problem.
+        Error messages should also be actionable. Offer the solution as an action when possible and
+        make sure the action label is specific to the outcome. If including an action isn’t
+        possible, then briefly explain how the user can fix their problem.
       </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">
-            “500 internal server error. It looks like the server failed to fulfill an apparently valid GET or POST request. We are aware of this issue and you can try solving it by reloading the page. We apologize for the inconvenience and hope this doesn’t occur again.”
+            “500 internal server error. It looks like the server failed to fulfill an apparently
+            valid GET or POST request. We are aware of this issue and you can try solving it by
+            reloading the page. We apologize for the inconvenience and hope this doesn’t occur
+            again.”
           </p>
         </template>
       </DocsDoNot>
-      <h3>
-        Tone
-      </h3>
+      <h3>Tone</h3>
       <p>
-        Let the user know what went wrong without blaming them. Do not use all caps, exclamation points, or other alarmist language.
+        Let the user know what went wrong without blaming them. Do not use all caps, exclamation
+        points, or other alarmist language.
       </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>
-        Even though errors can induce negative emotions, avoid being too whimsical and lighthearted. This can have the opposite effect and cause more frustration.
+        Even though errors can induce negative emotions, avoid being too whimsical and lighthearted.
+        This can have the opposite effect and cause more frustration.
       </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>
 
-    <DocsPageSection title="Components and patterns" anchor="#components">
-      <h3>
-        Color
-      </h3>
+    <DocsPageSection
+      title="Components and patterns"
+      anchor="#components"
+    >
+      <h3>Color</h3>
       <DocsColorBlock name="tokens.error" />
-      <h3>
-        Icon
-      </h3>
+      <h3>Icon</h3>
       <KIcon icon="error" />
+      <p>Sizes: <code>14px</code>, <code>24px</code></p>
+      <h3>Banner</h3>
       <p>
-        Sizes: <code>14px</code>, <code>24px</code>
+        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>
-      <h3>
-        Banner
-      </h3>
+      <img src="./banner.png" >
+      <h3>Error summary</h3>
       <p>
-        Banners are appended to the app bar and notify the user about global system errors and/or notifications that affect the whole app experience.
+        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="./banner.png">
-      <h3>
-        Error summary
-      </h3>
+      <img src="./alert.png" >
+      <h3>Inline error messages</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.
+        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="./alert.png">
-      <h3>
-        Inline error messages
-      </h3>
+      <img src="./inline-error.png" >
+      <h3>Page error</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>
+        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="./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 title="Preventing errors" anchor="#preventing-errors">
+    <DocsPageSection
+      title="Preventing errors"
+      anchor="#preventing-errors"
+    >
       <p>
-        One of the best ways to handle errors is to prevent them from happening in the first place. Following is a non-exhaustive list of common patterns that our products use to minimize the chance of users experiencing frustration from errors.
+        One of the best ways to handle errors is to prevent them from happening in the first place.
+        Following is a non-exhaustive list of common patterns that our products use to minimize the
+        chance of users experiencing frustration from errors.
       </p>
-      <h3>
-        Disable, don't hide
-      </h3>
+      <h3>Disable, don't hide</h3>
       <p>
-        If an operation can cause unintentional and irreversible data loss, or will create errors under the current condition, disable the action rather than hiding it. Disabling it provides 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.
+        If an operation can cause unintentional and irreversible data loss, or will create errors
+        under the current condition, disable the action rather than hiding it. Disabling it provides
+        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.
+        However, forms that create or update data generally should not have a disabled submit button
+        and follow our form validation patterns instead.
       </p>
-      <h3>
-        Warnings
-      </h3>
+      <h3>Warnings</h3>
       <p>
-        For operations that imply risky permanent data loss, use modals for the user to confirm they really intend to remove that data. Be sure to clearly explain the consequences.
+        For operations that imply risky permanent data loss, use modals for the user to confirm they
+        really intend to remove that data. Be sure to clearly explain the consequences.
       </p>
       <p>
-        For conditions which partially block or interrupt the user experience, use a warning icon with <code>palette.orange.v_200</code> and informative language of the consequences under the current condition.
+        For conditions which partially block or interrupt the user experience, use a warning icon
+        with <code>palette.orange.v_200</code> and informative language of the consequences under
+        the current condition.
       </p>
-      <img src="./warning.png">
-      <h3>
-        Undo
-      </h3>
+      <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.
+        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">
-      <h3>
-        Good defaults
-      </h3>
+      <img src="./undo.png" >
+      <h3>Good defaults</h3>
       <p>
-        Especially for repetitive, common actions, setting configurations to <strong>known</strong> commonly used defaults can help people save time and avoid overlooking unintentional errors.
+        Especially for repetitive, common actions, setting configurations to
+        <strong>known</strong> commonly used defaults can help people save time and avoid
+        overlooking unintentional errors.
       </p>
-      <h3>
-        Progressive disclosure
-      </h3>
+      <h3>Progressive disclosure</h3>
       <p>
-        Error messages are important, but should not overwhelm the user. Apply the concept of <DocsExternalLink href="https://www.interaction-design.org/literature/topics/progressive-disclosure" text="progressive disclosure" /> to prevent surprises and frustration.
+        Error messages are important, but should not overwhelm the user. Apply the concept of
+        <DocsExternalLink
+          href="https://www.interaction-design.org/literature/topics/progressive-disclosure"
+          text="progressive disclosure"
+        />
+        to prevent surprises and frustration.
       </p>
       <p>
-        For error messages, this means not showing all error messages at once. Show enough information for the user to discover where the problem is, and present the detail they need at the moment of resolving the error.
+        For error messages, this means not showing all error messages at once. Show enough
+        information for the user to discover where the problem is, and present the detail they need
+        at the moment of resolving the error.
       </p>
       <DocsDoNot>
         <template #do>
-          <img class="do-dont" src="./disclosure-do.png">
+          <img
+            class="do-dont"
+            src="./disclosure-do.png"
+          >
         </template>
         <template #not>
-          <img class="do-dont" src="./disclosure-dont.png">
+          <img
+            class="do-dont"
+            src="./disclosure-dont.png"
+          >
         </template>
       </DocsDoNot>
     </DocsPageSection>
 
-    <DocsPageSection title="Accessibility" anchor="#accessibility">
+    <DocsPageSection
+      title="Accessibility"
+      anchor="#accessibility"
+    >
       <p>
-        Do not use red color as the only indicator for errors. Color alone is not sufficient to indicate an error state. Errors must be accompanied by an additional visual indicator such as an icon as mentioned in <DocsInternalLink text="inline error messages" href="/errors#components" />.
+        Do not use red color as the only indicator for errors. Color alone is not sufficient to
+        indicate an error state. Errors must be accompanied by an additional visual indicator such
+        as an icon as mentioned in
+        <DocsInternalLink
+          text="inline error messages"
+          href="/errors#components"
+        />.
       </p>
       <p>
-        Important information to resolve errors should also be keyboard accessible. Avoid using snackbars and tooltips as the primary way to access this critical information.
+        Important information to resolve errors should also be keyboard accessible. Avoid using
+        snackbars and tooltips as the primary way to access this critical information.
       </p>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/filters/index.vue b/docs/pages/filters/index.vue
index 66a9e724b..a96703ed4 100644
--- a/docs/pages/filters/index.vue
+++ b/docs/pages/filters/index.vue
@@ -1,105 +1,163 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Filters allow users to show or hide data from view and can also be used to narrow down displayed information to a specific criteria. Filters can be placed in interfaces with search functionality and can accompany other components and patterns like lists and data tables.
+        Filters allow users to show or hide data from view and can also be used to narrow down
+        displayed information to a specific criteria. Filters can be placed in interfaces with
+        search functionality and can accompany other components and patterns like lists and data
+        tables.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Components" anchor="#components">
-      <h3>
-        Dropdown menus
-      </h3>
-      <p>
-        Use dropdown menu filters when you would like users to filter by one criteria at a time and when there are less than 10 options to select from. 
-      </p>
-      <img class="img-med" src="./dropdown-menu.png">
-      <p>
-        Dropdown menu filters use the <DocsInternalLink text="menu" href="/menus" /> component and are usually left-aligned at the top of a list or table. The label should specify what type of information is being filtered.
+    <DocsPageSection
+      title="Components"
+      anchor="#components"
+    >
+      <h3>Dropdown menus</h3>
+      <p>
+        Use dropdown menu filters when you would like users to filter by one criteria at a time and
+        when there are less than 10 options to select from.
+      </p>
+      <img
+        class="img-med"
+        src="./dropdown-menu.png"
+      >
+      <p>
+        Dropdown menu filters use the
+        <DocsInternalLink
+          text="menu"
+          href="/menus"
+        />
+        component and are usually left-aligned at the top of a list or table. The label should
+        specify what type of information is being filtered.
       </p>
       <h3>Text input dropdowns</h3>
-      <img class="img-med" src="./text-input-dropdown.png">
+      <img
+        class="img-med"
+        src="./text-input-dropdown.png"
+      >
       <p>
-        Text input dropdowns use the <DocsInternalLink text="text field" href="/textfields" /> component. They allow the user to select from a list of options and quickly filter down from many options by inputting text. Use this component when there are at least 10 options to select from.
+        Text input dropdowns use the
+        <DocsInternalLink
+          text="text field"
+          href="/textfields"
+        />
+        component. They allow the user to select from a list of options and quickly filter down from
+        many options by inputting text. Use this component when there are at least 10 options to
+        select from.
       </p>
-      <h3>
-        Text filters
-      </h3>
+      <h3>Text filters</h3>
       <p>
-        Use text filters to help users narrow down lists or tables that contain many items. Text filters should be right-aligned above lists and tables.
+        Use text filters to help users narrow down lists or tables that contain many items. Text
+        filters should be right-aligned above lists and tables.
       </p>
-      <img class="img-med" src="./text-filter.png">
+      <img
+        class="img-med"
+        src="./text-filter.png"
+      >
       <p>
-        By default, results should update as the user types. If updating as the user types would cause noticeable performance and load time issues, then update the list of results after the user loses focus on the text filter.
+        By default, results should update as the user types. If updating as the user types would
+        cause noticeable performance and load time issues, then update the list of results after the
+        user loses focus on the text filter.
       </p>
       <p>
-        Placeholder text should let the user know what data can be filtered when they input text. State this concisely in the imperative form.
+        Placeholder text should let the user know what data can be filtered when they input text.
+        State this concisely in the imperative form.
       </p>
       <DocsDoNot>
         <template #do>
-          <img class="do-dont" src="./text-filter-do.png">
+          <img
+            class="do-dont"
+            src="./text-filter-do.png"
+          >
         </template>
         <template #not>
-          <img class="do-dont" src="./text-filter-dont.png">
+          <img
+            class="do-dont"
+            src="./text-filter-dont.png"
+          >
         </template>
       </DocsDoNot>
-      <h3>
-        Checkbox lists
-      </h3>
+      <h3>Checkbox lists</h3>
       <p>
-        Use a checkbox list if you’d like to allow multiple options within a category to be filtered for at once. They can also be used when you’d like to provide more visibility to the options themselves. 
+        Use a checkbox list if you’d like to allow multiple options within a category to be filtered
+        for at once. They can also be used when you’d like to provide more visibility to the options
+        themselves.
       </p>
       <p>
-        By default, the list of results should update as the user selects different checkbox options.
-      </p>
-      <p>
-        Frame the text of options concisely and as affirmative statements.
+        By default, the list of results should update as the user selects different checkbox
+        options.
       </p>
+      <p>Frame the text of options concisely and as affirmative statements.</p>
       <DocsDoNot>
         <template #do>
-          <img class="do-dont" src="./checkbox-1.png">
+          <img
+            class="do-dont"
+            src="./checkbox-1.png"
+          >
         </template>
         <template #not>
-          <img class="do-dont" src="./checkbox-2.png">
+          <img
+            class="do-dont"
+            src="./checkbox-2.png"
+          >
         </template>
       </DocsDoNot>
     </DocsPageSection>
 
-    <DocsPageSection title="Behaviors" anchor="#behaviors">
-      <p>
-        Any filters that have been applied should persist on refresh or browser back.
-      </p>
+    <DocsPageSection
+      title="Behaviors"
+      anchor="#behaviors"
+    >
+      <p>Any filters that have been applied should persist on refresh or browser back.</p>
       <p>
-        By default, data should be filtered by the “all data” option. However, pre-filtering to one or more options can happen in exceptional cases where doing so improves the experience.
+        By default, data should be filtered by the “all data” option. However, pre-filtering to one
+        or more options can happen in exceptional cases where doing so improves the experience.
       </p>
       <h3>Hiding vs disabling</h3>
       <p>
-        If selecting a filter option would result in “0 results” being shown, that option should be hidden from the dropdown, hide the filter option. If all filter options in a dropdown would always result in “0 results,” hide the entire filter.
+        If selecting a filter option would result in “0 results” being shown, that option should be
+        hidden from the dropdown, hide the filter option. If all filter options in a dropdown would
+        always result in “0 results,” hide the entire filter.
       </p>
       <p>
-        If one or more filters have already been applied, and combining remaining filter options would show “0 results,” those remaining filters should be disabled. If all potential remaining selections in a filter dropdown/section will show “0 results,” disable the entire filter section until the current filter sections are cleared.
+        If one or more filters have already been applied, and combining remaining filter options
+        would show “0 results,” those remaining filters should be disabled. If all potential
+        remaining selections in a filter dropdown/section will show “0 results,” disable the entire
+        filter section until the current filter sections are cleared.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Filter groups" anchor="#filtergroups">
+    <DocsPageSection
+      title="Filter groups"
+      anchor="#filtergroups"
+    >
       <p>
-        Filters can be flexibly combined in groups horizontally or vertically to create a more customized filtering experience. 
+        Filters can be flexibly combined in groups horizontally or vertically to create a more
+        customized filtering experience.
       </p>
-      <h3>
-        Layout
-      </h3>
+      <h3>Layout</h3>
       <p>
-        Text filters and dropdown filters should be aligned in the same row when placed above data tables.
+        Text filters and dropdown filters should be aligned in the same row when placed above data
+        tables.
       </p>
-      <img class="img-lg" src="./table.png">
+      <img
+        class="img-lg"
+        src="./table.png"
+      >
       <p>
-        Filters can also be left-aligned for lists and search results. Use clearable chips to show which filters have been selected and offer the option to clear all selected filters. 
+        Filters can also be left-aligned for lists and search results. Use clearable chips to show
+        which filters have been selected and offer the option to clear all selected filters.
       </p>
-      <img class="img-lg" src="./left-align.png">
+      <img
+        class="img-lg"
+        src="./left-align.png"
+      >
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/glossary/index.vue b/docs/pages/glossary/index.vue
index 30baf2096..924fec84b 100644
--- a/docs/pages/glossary/index.vue
+++ b/docs/pages/glossary/index.vue
@@ -1,45 +1,61 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Certain words have special meanings in the context of the Kolibri ecosystem which might be different or more specific than when used in general language. Additionally, many of the terms have been carefully chosen from among alternatives, and it's important to consistently use this terminology across the product ecosystem.
+        Certain words have special meanings in the context of the Kolibri ecosystem which might be
+        different or more specific than when used in general language. Additionally, many of the
+        terms have been carefully chosen from among alternatives, and it's important to consistently
+        use this terminology across the product ecosystem.
       </p>
       <p>
-        The glossary is stored in the <DocsExternalLink text="the TBX-Glossary format" href="http://www.ttt.org/tbxg/" /> format, and should be uploaded to all Crowdin projects so that translators have this context.
+        The glossary is stored in the
+        <DocsExternalLink
+          text="the TBX-Glossary format"
+          href="http://www.ttt.org/tbxg/"
+        />
+        format, and should be uploaded to all Crowdin projects so that translators have this
+        context.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Terms" anchor="#terms" fullwidth>
-      <DocsFilter v-model="filterText" class="filter" />
+    <DocsPageSection
+      title="Terms"
+      anchor="#terms"
+      fullwidth
+    >
+      <DocsFilter
+        v-model="filterText"
+        class="filter"
+      />
       <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>
-          <tr v-for="(term, i) in visibleTerms" :key="i">
+          <tr
+            v-for="(term, i) in visibleTerms"
+            :key="i"
+          >
             <th>
               {{ term.term }}
-              <DocsAnchorTarget
-                :anchor="anchor(term)"
-              />
+              <DocsAnchorTarget :anchor="anchor(term)" />
             </th>
-            <td><em>{{ term.note }}</em></td>
+            <td>
+              <em>{{ term.note }}</em>
+            </td>
             <td>{{ term.description }}</td>
           </tr>
         </tbody>
       </table>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/icons/IconBlock.vue b/docs/pages/icons/IconBlock.vue
index 989f80feb..91cc08757 100644
--- a/docs/pages/icons/IconBlock.vue
+++ b/docs/pages/icons/IconBlock.vue
@@ -9,7 +9,10 @@
       />
     </div>
     <div class="alias code">
-      <div v-for="(aliasItem, index) in aliasList" :key="index">
+      <div
+        v-for="(aliasItem, index) in aliasList"
+        :key="index"
+      >
         <code>{{ aliasItem }}</code>
         <DocsAnchorTarget
           :verticalOffset="2"
diff --git a/docs/pages/icons/IconTable.vue b/docs/pages/icons/IconTable.vue
index 39987ad8b..c21256371 100644
--- a/docs/pages/icons/IconTable.vue
+++ b/docs/pages/icons/IconTable.vue
@@ -1,11 +1,12 @@
 <template>
 
   <div>
-    <DocsFilter v-model="filterText" class="filter" />
+    <DocsFilter
+      v-model="filterText"
+      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"
@@ -15,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"
@@ -27,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"
@@ -39,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"
@@ -50,7 +45,6 @@
         class="icon-block"
       />
     </div>
-
   </div>
 
 </template>
@@ -127,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/icons/index.vue b/docs/pages/icons/index.vue
index 73f732010..28a9e35bb 100644
--- a/docs/pages/icons/index.vue
+++ b/docs/pages/icons/index.vue
@@ -1,101 +1,204 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Kolibri products use a large number of icons that have a special meaning within our ecosystem. They generally draw from <DocsExternalLink text="Material Icons" href="https://material.io/resources/icons/" />, but may also include custom icons.
+        Kolibri products use a large number of icons that have a special meaning within our
+        ecosystem. They generally draw from
+        <DocsExternalLink
+          text="Material Icons"
+          href="https://material.io/resources/icons/"
+        />, but may also include custom icons.
       </p>
       <p>
-        Importantly, we reference icons by a token specific to the Kolibri Design System rather than Material's names, in order to make token references more meaningful to designers and developers.
+        Importantly, we reference icons by a token specific to the Kolibri Design System rather than
+        Material's names, in order to make token references more meaningful to designers and
+        developers.
       </p>
       <p>
-        You can use the <DocsLibraryLink component="KIcon" /> and <DocsLibraryLink component="KLabeledIcon" /> components to easily insert any icon. Some other components such as links and buttons also provide props as shortcuts for easily inserting icons by token name.
+        You can use the <DocsLibraryLink component="KIcon" /> and
+        <DocsLibraryLink component="KLabeledIcon" /> components to easily insert any icon. Some
+        other components such as links and buttons also provide props as shortcuts for easily
+        inserting icons by token name.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Size and text" anchor="#size-text">
+    <DocsPageSection
+      title="Size and text"
+      anchor="#size-text"
+    >
       <p>
-        Icons should be scaled relative to their surrounding text size. Use the <code>KLabeledIcon</code> component to automatically set a consistent sizing and spacing with associated text:
+        Icons should be scaled relative to their surrounding text size. Use the
+        <code>KLabeledIcon</code> component to automatically set a consistent sizing and spacing
+        with associated text:
       </p>
       <DocsShow>
         <h3>
-          <KLabeledIcon icon="lesson" label="Header 3" />
+          <KLabeledIcon
+            icon="lesson"
+            label="Header 3"
+          />
         </h3>
         <h4>
-          <KLabeledIcon icon="lesson" label="Header 4" />
+          <KLabeledIcon
+            icon="lesson"
+            label="Header 4"
+          />
         </h4>
         <h5>
-          <KLabeledIcon icon="lesson" label="Header 5" />
+          <KLabeledIcon
+            icon="lesson"
+            label="Header 5"
+          />
         </h5>
       </DocsShow>
-
     </DocsPageSection>
 
-    <DocsPageSection title="Color" anchor="#color">
+    <DocsPageSection
+      title="Color"
+      anchor="#color"
+    >
       <p>
-        Many of these icons also are used with <DocsInternalLink href="/colors" text="conventional colors" /> in the design system. For example, the <DocsInternalLink href="#tokens-coachContent" text="coachContent" code /> icon is often shown using the <DocsInternalLink href="/colors#tokens-coachContent" text="coachContent" code /> color, e.g. <KIcon icon="coachContent" />. Icons often have a default color associated with them, and this can be overridden as needed.
-      </p>
-      <p>
-        When inline with text, icons should usually be the same color as the text:
+        Many of these icons also are used with
+        <DocsInternalLink
+          href="/colors"
+          text="conventional colors"
+        />
+        in the design system. For example, the
+        <DocsInternalLink
+          href="#tokens-coachContent"
+          text="coachContent"
+          code
+        />
+        icon is often shown using the
+        <DocsInternalLink
+          href="/colors#tokens-coachContent"
+          text="coachContent"
+          code
+        />
+        color, e.g. <KIcon icon="coachContent" />. Icons often have a default color associated with
+        them, and this can be overridden as needed.
       </p>
+      <p>When inline with text, icons should usually be the same color as the text:</p>
       <DocsDoNot>
         <template #do>
           <h4>
-            <KLabeledIcon icon="video" label="Awesome video" />
+            <KLabeledIcon
+              icon="video"
+              label="Awesome video"
+            />
           </h4>
         </template>
         <template #not>
           <h4>
-            <KLabeledIcon icon="video" color="green" label="Awesome video" class="wrong-colors" />
+            <KLabeledIcon
+              icon="video"
+              color="green"
+              label="Awesome video"
+              class="wrong-colors"
+            />
           </h4>
         </template>
       </DocsDoNot>
       <p>
-        There are exceptions to this pattern, however. For example in the columns of coach reports, most text is dark gray for readibility color while the icons for Mastered, In-progress, etc are colored.
+        There are exceptions to this pattern, however. For example in the columns of coach reports,
+        most text is dark gray for readibility color while the icons for Mastered, In-progress, etc
+        are colored.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Internationalization" anchor="#i18n">
+    <DocsPageSection
+      title="Internationalization"
+      anchor="#i18n"
+    >
+      <p>Avoid using icons that are culture- or context-specific.</p>
       <p>
-        Avoid using icons that are culture- or context-specific.
+        Icons which in some sense relate to the passage of time must be mirrored when viewed in a
+        right-to-left language. Read more about
+        <DocsExternalLink
+          href="https://material.io/design/usability/bidirectionality.html#mirroring-elements"
+          text="icon bidirectionality"
+        />
+        from the Material design guidelines.
       </p>
       <p>
-        Icons which in some sense relate to the passage of time must be mirrored when viewed in a right-to-left language. Read more about <DocsExternalLink href="https://material.io/design/usability/bidirectionality.html#mirroring-elements" text="icon bidirectionality" /> from the Material design guidelines.
-      </p>
-      <p>
-        When used with the <code>KIcon</code> component, icons will be automatically flipped when appropriate.
+        When used with the <code>KIcon</code> component, icons will be automatically flipped when
+        appropriate.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Accessibility" anchor="#a11y">
+    <DocsPageSection
+      title="Accessibility"
+      anchor="#a11y"
+    >
       <p>
-        If it is not purely decorative, ensure that the icon or its parent component has associated text that can be read by a screen reader.
+        If it is not purely decorative, ensure that the icon or its parent component has associated
+        text that can be read by a screen reader.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Icons" anchor="#icons">
+    <DocsPageSection
+      title="Icons"
+      anchor="#icons"
+    >
       <p>These icons have special meaning in Kolibri products</p>
       <IconTable />
     </DocsPageSection>
 
-    <DocsPageSection title="Custom icons" anchor="#custom-icons">
-      <p>If the default Material icon library and/or community-contributed libraries are insufficient, use <DocsExternalLink href="https://material.io/design/iconography/system-icons.html" text="Material's icon creation guidelines" /> to create a new one.</p>
+    <DocsPageSection
+      title="Custom icons"
+      anchor="#custom-icons"
+    >
+      <p>
+        If the default Material icon library and/or community-contributed libraries are
+        insufficient, use
+        <DocsExternalLink
+          href="https://material.io/design/iconography/system-icons.html"
+          text="Material's icon creation guidelines"
+        />
+        to create a new one.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage in documentation" anchor="#rst">
+    <DocsPageSection
+      title="Usage in documentation"
+      anchor="#rst"
+    >
       <p>
-        For use in documentation such as the <DocsExternalLink href="https://kolibri.readthedocs.io/" text="Kolibri User Docs" />, all icons above have substitutions available in <DocsExternalLink href="https://docutils.sourceforge.io/docs/ref/rst/directives.html#directives-for-substitution-definitions" text="reStructuredText replacement syntax" /> below:
+        For use in documentation such as the
+        <DocsExternalLink
+          href="https://kolibri.readthedocs.io/"
+          text="Kolibri User Docs"
+        />, all icons above have substitutions available in
+        <DocsExternalLink
+          href="https://docutils.sourceforge.io/docs/ref/rst/directives.html#directives-for-substitution-definitions"
+          text="reStructuredText replacement syntax"
+        />
+        below:
       </p>
-      <textarea v-model="text" class="code replacements" readonly></textarea>
+      <textarea
+        v-model="text"
+        class="code replacements"
+        readonly
+      ></textarea>
       <p>
-        Copy and paste it into a file such as <code>rstIconReplacements.txt</code> and then add it to your <code>conf.py</code> file <DocsExternalLink href="https://github.com/learningequality/kolibri-docs/blob/d582797e0d62d1482501954b6d0680031bce18cd/docs/conf.py#L174-L181" text="like this" />.
+        Copy and paste it into a file such as <code>rstIconReplacements.txt</code> and then add it
+        to your <code>conf.py</code> file
+        <DocsExternalLink
+          href="https://github.com/learningequality/kolibri-docs/blob/d582797e0d62d1482501954b6d0680031bce18cd/docs/conf.py#L174-L181"
+          text="like this"
+        />.
       </p>
       <p>
-        Then in <code>*.rst</code> files you can use, for example, <code>|video|</code> to insert the <KIcon icon="video" /> video icon. Note that these icons will <em>not</em> have screen-reader-accessible labels associated with them, so they should always be accompanied by descriptive text.
+        Then in <code>*.rst</code> files you can use, for example, <code>|video|</code> to insert
+        the <KIcon icon="video" /> video icon. Note that these icons will <em>not</em> have
+        screen-reader-accessible labels associated with them, so they should always be accompanied
+        by descriptive text.
       </p>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index ea2704d12..c8ccbe194 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -1,10 +1,13 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Purpose" anchor="#purpose">
+    <DocsPageSection
+      title="Purpose"
+      anchor="#purpose"
+    >
       <p>
-        The Kolibri Design System contains resources for designers and developers building Kolibri products. The purpose is to:
+        The Kolibri Design System contains resources for designers and developers building Kolibri
+        products. The purpose is to:
       </p>
       <ul>
         <li>Reduce the time it takes to design and build our products</li>
@@ -12,46 +15,117 @@
         <li>Ensure accessibility, responsiveness, and cross-browser compatibility</li>
       </ul>
       <p>
-        The design system includes both documentation design patterns and a shared front-end UI library. Together, these provide solutions to common design and implementation needs in Kolibri products.
+        The design system includes both documentation design patterns and a shared front-end UI
+        library. Together, these provide solutions to common design and implementation needs in
+        Kolibri products.
       </p>
       <p>
-        If the design system is failing to achieve the objectives above, it needs to be updated. Your contributions and input are appreciated. For more information, see the <DocsInternalLink text="Updates" href="#updates" /> section below, the <DocsExternalLink text="GitHub repository" href="https://github.com/learningequality/kolibri-design-system" />, the <DocsExternalLink text="Notion project" href="https://www.notion.so/learningequality/Kolibri-Design-System-for-LE-products-976ea82b50f844ea9149a7abed497ea9" />, or the <DocsExternalLink text="Kolibri Design System Figma file" href="https://www.figma.com/file/JPL94qI0O1s9FOHV92OeCmpS/Kolibri-Design-System?node-id=0%3A1" />.
+        If the design system is failing to achieve the objectives above, it needs to be updated.
+        Your contributions and input are appreciated. For more information, see the
+        <DocsInternalLink
+          text="Updates"
+          href="#updates"
+        />
+        section below, the
+        <DocsExternalLink
+          text="GitHub repository"
+          href="https://github.com/learningequality/kolibri-design-system"
+        />, the
+        <DocsExternalLink
+          text="Notion project"
+          href="https://www.notion.so/learningequality/Kolibri-Design-System-for-LE-products-976ea82b50f844ea9149a7abed497ea9"
+        />, or the
+        <DocsExternalLink
+          text="Kolibri Design System Figma file"
+          href="https://www.figma.com/file/JPL94qI0O1s9FOHV92OeCmpS/Kolibri-Design-System?node-id=0%3A1"
+        />.
       </p>
     </DocsPageSection>
-    <DocsPageSection title="Scope" anchor="#scope">
+    <DocsPageSection
+      title="Scope"
+      anchor="#scope"
+    >
       <p>
-        The Kolibri Design System contains guidance and functionality that reflects very common design patterns across all of our products. It also gives guidance about patterns and component that are consistently different between products, for example due to different user needs or browser requirements.
+        The Kolibri Design System contains guidance and functionality that reflects very common
+        design patterns across all of our products. It also gives guidance about patterns and
+        component that are consistently different between products, for example due to different
+        user needs or browser requirements.
       </p>
       <p>
-        It should <em>not</em> contain design patterns, UI components, or configuration parameters that are rarely used or liable to change in the future.
+        It should <em>not</em> contain design patterns, UI components, or configuration parameters
+        that are rarely used or liable to change in the future.
       </p>
       <p>
-        The public API of the shared UI library is <em>only</em> that which is documented in this site. Functionality which is not documented here should be considered either experimental or a private implementation detail.
+        The public API of the shared UI library is <em>only</em> that which is documented in this
+        site. Functionality which is not documented here should be considered either experimental or
+        a private implementation detail.
       </p>
     </DocsPageSection>
-    <DocsPageSection title="Exceptions" anchor="#exceptions">
+    <DocsPageSection
+      title="Exceptions"
+      anchor="#exceptions"
+    >
       <p>
-        If using an existing pattern or component would <em>significantly</em> degrade the user experience compared to designing and building an alternate user interface, we should prioritize the user experience and build the custom UI.
+        If using an existing pattern or component would <em>significantly</em> degrade the user
+        experience compared to designing and building an alternate user interface, we should
+        prioritize the user experience and build the custom UI.
       </p>
       <p>
-        On the other hand, if using an existing pattern or component would not significantly degrade the UX, we should prioritize consistency and reuse. The benefits of standardization here outweigh the marginal benefits of a UI customized for a narrow need.
+        On the other hand, if using an existing pattern or component would not significantly degrade
+        the UX, we should prioritize consistency and reuse. The benefits of standardization here
+        outweigh the marginal benefits of a UI customized for a narrow need.
       </p>
       <p>
-        Decisions to deviate from the design system should be made intentionally, and the justification to do so should be documented. Undocumented deviations may be mistakes, oversights, or technical/UX debt.
+        Decisions to deviate from the design system should be made intentionally, and the
+        justification to do so should be documented. Undocumented deviations may be mistakes,
+        oversights, or technical/UX debt.
       </p>
       <p>
-        Over time we should be able to observe patterns in the intentional deviations, and use them as guidance for implementing updates to the design system that benefit the rest of the product ecosystem.
+        Over time we should be able to observe patterns in the intentional deviations, and use them
+        as guidance for implementing updates to the design system that benefit the rest of the
+        product ecosystem.
       </p>
     </DocsPageSection>
-    <DocsPageSection title="Contributing" anchor="#contributing">
+    <DocsPageSection
+      title="Contributing"
+      anchor="#contributing"
+    >
       <p>
-        We welcome feedback and contributions! It's important that the Design System works for you, so please help shape it. To get started contributing to the design system, see the <DocsInternalLink text="release process" href="/release-process" /> and the <DocsExternalLink text="project readme" href="https://github.com/learningequality/kolibri-design-system#readme" />. Feel free to submit a <DocsExternalLink text="pull request" href="https://github.com/learningequality/kolibri-design-system/pulls" /> or <DocsExternalLink text="issue" href="https://github.com/learningequality/kolibri-design-system/issues" /> to the GitHub repo.
+        We welcome feedback and contributions! It's important that the Design System works for you,
+        so please help shape it. To get started contributing to the design system, see the
+        <DocsInternalLink
+          text="release process"
+          href="/release-process"
+        />
+        and the
+        <DocsExternalLink
+          text="project readme"
+          href="https://github.com/learningequality/kolibri-design-system#readme"
+        />. Feel free to submit a
+        <DocsExternalLink
+          text="pull request"
+          href="https://github.com/learningequality/kolibri-design-system/pulls"
+        />
+        or
+        <DocsExternalLink
+          text="issue"
+          href="https://github.com/learningequality/kolibri-design-system/issues"
+        />
+        to the GitHub repo.
       </p>
       <p>
-        To contribute to the Kolibri ecosystem and Learning Equality more generally, see <DocsExternalLink text="ways to contribute" href="https://kolibri-dev.readthedocs.io/en/develop/contributing/ways_to_contribute.html" /> in the developer documentation or get in touch on our <DocsExternalLink text="community forums" href="https://community.learningequality.org/" />.
+        To contribute to the Kolibri ecosystem and Learning Equality more generally, see
+        <DocsExternalLink
+          text="ways to contribute"
+          href="https://kolibri-dev.readthedocs.io/en/develop/contributing/ways_to_contribute.html"
+        />
+        in the developer documentation or get in touch on our
+        <DocsExternalLink
+          text="community forums"
+          href="https://community.learningequality.org/"
+        />.
       </p>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/installation.vue b/docs/pages/installation.vue
index 442731521..17e8491fe 100644
--- a/docs/pages/installation.vue
+++ b/docs/pages/installation.vue
@@ -1,41 +1,69 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="1. Install the plugin" anchor="#install-plugin">
-      <p>Kolibri Design System (KDS) is a Vue plugin. Register it in your application alongside scripts that are needed for its full functioning:</p>
+    <DocsPageSection
+      title="1. Install the plugin"
+      anchor="#install-plugin"
+    >
+      <p>
+        Kolibri Design System (KDS) is a Vue plugin. Register it in your application alongside
+        scripts that are needed for its full functioning:
+      </p>
 
       <!-- eslint-disable -->
       <DocsShowCode language="javascript">
-        import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
-        import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
-        import trackMediaType from 'kolibri-design-system/lib/styles/trackMediaType';
-
-        Vue.use(KThemePlugin);
-
-        trackInputModality();
-        trackMediaType();
+        import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin'; import trackInputModality
+        from 'kolibri-design-system/lib/styles/trackInputModality'; import trackMediaType from
+        'kolibri-design-system/lib/styles/trackMediaType'; Vue.use(KThemePlugin);
+        trackInputModality(); trackMediaType();
       </DocsShowCode>
       <!-- eslint-enable -->
 
       This ensures the following:
 
       <ul>
-        <li>Installs <code>$themeBrand</code>, <code>$themeTokens</code> <code>$themePalette</code>, and <code>$computedClass</code> helpers on all Vue instances (see <DocsInternalLink href="/colors/#usage" text="Colors" />).</li>
-        <li>Provides <code>$coreOutline</code>, <code>$inputModality</code>, <code>$mediaType</code>, and <code>$isPrint</code> computed properties as well as <code>$print</code> method to all Vue instances.</li>
+        <li>
+          Installs <code>$themeBrand</code>, <code>$themeTokens</code> <code>$themePalette</code>,
+          and <code>$computedClass</code> helpers on all Vue instances (see
+          <DocsInternalLink
+            href="/colors/#usage"
+            text="Colors"
+          />).
+        </li>
+        <li>
+          Provides <code>$coreOutline</code>, <code>$inputModality</code>, <code>$mediaType</code>,
+          and <code>$isPrint</code> computed properties as well as <code>$print</code> method to all
+          Vue instances.
+        </li>
         <li>Globally registers all KDS Vue components.</li>
-        <li>Inserts assertive and polite ARIA live regions <code>#k-live-region</code> to an application's document body (see <DocsInternalLink href="/usekliveregion" text="useKLiveRegion" />).</li>
-        <li>Inserts the overlay container element <code>#k-overlay</code> to an application's document body (see <DocsLibraryLink component="KOverlay" /> or search for <code>appendToOverlay</code> prop on components).</li>
+        <li>
+          Inserts assertive and polite ARIA live regions <code>#k-live-region</code> to an
+          application's document body (see
+          <DocsInternalLink
+            href="/usekliveregion"
+            text="useKLiveRegion"
+          />).
+        </li>
+        <li>
+          Inserts the overlay container element <code>#k-overlay</code> to an application's document
+          body (see <DocsLibraryLink component="KOverlay" /> or search for
+          <code>appendToOverlay</code> prop on components).
+        </li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="2. Initialize theme" anchor="#initialize-theme">
+    <DocsPageSection
+      title="2. Initialize theme"
+      anchor="#initialize-theme"
+    >
       <p>
-        Until this section is better documented, refer to <DocsExternalLink href="https://github.com/learningequality/kolibri/blob/develop/kolibri/core/assets/src/styles/initializeTheme.js" text="Kolibri's initializeTheme.js" />.
+        Until this section is better documented, refer to
+        <DocsExternalLink
+          href="https://github.com/learningequality/kolibri/blob/develop/kolibri/core/assets/src/styles/initializeTheme.js"
+          text="Kolibri's initializeTheme.js"
+        />.
       </p>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
-
diff --git a/docs/pages/kbreadcrumbs.vue b/docs/pages/kbreadcrumbs.vue
index c00bfcf90..921e7693a 100644
--- a/docs/pages/kbreadcrumbs.vue
+++ b/docs/pages/kbreadcrumbs.vue
@@ -1,10 +1,13 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <div>
-        Breadcrumbs help understand the hierarchy among levels and a user's location in it. We often use breadcrumbs to aid navigation across channels, topic trees, and resources.
+        Breadcrumbs help understand the hierarchy among levels and a user's location in it. We often
+        use breadcrumbs to aid navigation across channels, topic trees, and resources.
 
         <DocsShow block>
           <KBreadcrumbs
@@ -18,7 +21,9 @@
       </div>
 
       <div>
-        Breadcrumbs take the full width of their container. When there is not enough space available, items that can't be displayed will automatically collapse into the drop-down and visible items might also get truncated:
+        Breadcrumbs take the full width of their container. When there is not enough space
+        available, items that can't be displayed will automatically collapse into the drop-down and
+        visible items might also get truncated:
 
         <DocsShow
           block
@@ -29,27 +34,27 @@
               { text: 'Global Digital Library', link: { path: '#' } },
               { text: 'English', link: { path: '#' } },
               { text: 'Level 2 ', link: { path: '#' } },
-              { text: 'Kaka and Munni: A Folktale from Punjab', link: { path: '#' } }
+              { text: 'Kaka and Munni: A Folktale from Punjab', link: { path: '#' } },
             ]"
           />
         </DocsShow>
       </div>
 
       <div>
-        When there is only one item, it won't be displayed by default. You can set <code>showSingleItem</code> to <code>true</code> to show it:
+        When there is only one item, it won't be displayed by default. You can set
+        <code>showSingleItem</code> to <code>true</code> to show it:
 
         <DocsShow block>
           <KBreadcrumbs
-            :items="[
-              { text: 'Global Digital Library', link: { path: '#' } },
-            ]"
-            showSingleItem 
+            :items="[{ text: 'Global Digital Library', link: { path: '#' } }]"
+            showSingleItem
           />
         </DocsShow>
       </div>
 
       <div>
-        Links to intermediary items can be disabled by omitting the <code>link</code> attribute, or making it falsey.
+        Links to intermediary items can be disabled by omitting the <code>link</code> attribute, or
+        making it falsey.
 
         <DocsShow block>
           <KBreadcrumbs
@@ -64,17 +69,26 @@
       </div>
     </DocsPageSection>
 
-    <DocsPageSection title="Placement" anchor="#placement">
+    <DocsPageSection
+      title="Placement"
+      anchor="#placement"
+    >
       <ul>
         <li>Directly above the content to be navigated through</li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Guidelines" anchor="#guidelines">
+    <DocsPageSection
+      title="Guidelines"
+      anchor="#guidelines"
+    >
       <ul>
         <li>It should include the current item</li>
         <li>The current item can be repeated in a page header</li>
-        <li>Allow the single breadcrumb (<code>showSingleItem=true</code>) only when there isn't any other page header or label that shows what the current level is</li>
+        <li>
+          Allow the single breadcrumb (<code>showSingleItem=true</code>) only when there isn't any
+          other page header or label that shows what the current level is
+        </li>
       </ul>
     </DocsPageSection>
   </DocsPageTemplate>
diff --git a/docs/pages/kbutton.vue b/docs/pages/kbutton.vue
index fedd22535..d4c81d6f3 100644
--- a/docs/pages/kbutton.vue
+++ b/docs/pages/kbutton.vue
@@ -1,46 +1,87 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Creates a <code>&lt;button&gt;</code> tag and is appropriate for triggering javascript functions on-click. It can take on a number of visual styles, including both links and buttons.
+        Creates a <code>&lt;button&gt;</code> tag and is appropriate for triggering javascript
+        functions on-click. It can take on a number of visual styles, including both links and
+        buttons.
       </p>
       <DocsShow>
         <p>
-          <KButton text="Link" appearance="basic-link" />
+          <KButton
+            text="Link"
+            appearance="basic-link"
+          />
         </p>
         <p>
-          <KButton text="Link with icon" appearance="basic-link" icon="person" />
+          <KButton
+            text="Link with icon"
+            appearance="basic-link"
+            icon="person"
+          />
         </p>
       </DocsShow>
       <DocsShow>
         <KButtonGroup>
-          <KButton text="Button" :primary="true" appearance="raised-button" />
-          <KButton text="Flat button" :primary="true" appearance="flat-button" />
+          <KButton
+            text="Button"
+            :primary="true"
+            appearance="raised-button"
+          />
+          <KButton
+            text="Flat button"
+            :primary="true"
+            appearance="flat-button"
+          />
         </KButtonGroup>
       </DocsShow>
       <DocsShow>
         <KButtonGroup>
-          <KButton text="Secondary button" :primary="false" appearance="raised-button" />
-          <KButton text="Secondary flat button" :primary="false" appearance="flat-button" />
+          <KButton
+            text="Secondary button"
+            :primary="false"
+            appearance="raised-button"
+          />
+          <KButton
+            text="Secondary flat button"
+            :primary="false"
+            appearance="flat-button"
+          />
         </KButtonGroup>
       </DocsShow>
     </DocsPageSection>
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsInternalLink text="Buttons and links" href="/buttons" /> has an overview and usage guidance
+          <DocsInternalLink
+            text="Buttons and links"
+            href="/buttons"
+          />
+          has an overview and usage guidance
         </li>
-        <li><DocsLibraryLink component="KExternalLink" /> and <DocsLibraryLink component="KRouterLink" /> are similar but handle events differently</li>
         <li>
-          <DocsLibraryLink component="KIconButton" /> has a tooltip instead of a text label
+          <DocsLibraryLink component="KExternalLink" /> and
+          <DocsLibraryLink component="KRouterLink" /> are similar but handle events differently
         </li>
+        <li><DocsLibraryLink component="KIconButton" /> has a tooltip instead of a text label</li>
         <li><DocsLibraryLink component="KButtonGroup" /> is used for button layout</li>
-        <li><DocsLibraryLink component="KDropdownMenu" /> and <DocsInternalLink text="Buttons and links" href="/buttons" /> have more detail about adding a menu of options to a button component</li>
+        <li>
+          <DocsLibraryLink component="KDropdownMenu" /> and
+          <DocsInternalLink
+            text="Buttons and links"
+            href="/buttons"
+          />
+          have more detail about adding a menu of options to a button component
+        </li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/kbuttongroup.vue b/docs/pages/kbuttongroup.vue
index 8a54a62d0..ad4a14796 100644
--- a/docs/pages/kbuttongroup.vue
+++ b/docs/pages/kbuttongroup.vue
@@ -1,22 +1,26 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        For an overview of buttons and links in Kolibri, see the <DocsInternalLink text="Buttons and links" href="/buttons" /> page.
+        For an overview of buttons and links in Kolibri, see the
+        <DocsInternalLink
+          text="Buttons and links"
+          href="/buttons"
+        />
+        page.
       </p>
       <p>
-        The <code>KButtonGroup</code> component is used to provide consistent, 8px spacing for buttons. For example:
+        The <code>KButtonGroup</code> component is used to provide consistent, 8px spacing for
+        buttons. For example:
       </p>
       <DocsShow>
         <KButtonGroup>
-          <KButton
-            text="Button 1"
-          />
-          <KButton
-            text="Button 2"
-          />
+          <KButton text="Button 1" />
+          <KButton text="Button 2" />
           <KButton
             text="Primary button"
             primary
@@ -24,10 +28,11 @@
         </KButtonGroup>
       </DocsShow>
       <p>
-        It is most often used with the <DocsLibraryLink component="KButton" />, <DocsLibraryLink component="KRouterLink" /> and <DocsLibraryLink component="KExternalLink" /> components.
+        It is most often used with the <DocsLibraryLink component="KButton" />,
+        <DocsLibraryLink component="KRouterLink" /> and
+        <DocsLibraryLink component="KExternalLink" /> components.
       </p>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
index e92fdfeca..7a4f234ae 100644
--- a/docs/pages/kcard.vue
+++ b/docs/pages/kcard.vue
@@ -1,16 +1,29 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p><code>KCard</code> is a versatile and accessible base component for creating various types of cards, such as lesson cards, resource cards, and more.</p>
-
-      <p>It manages the layout, including the thumbnail image, title, and other content. It offers several base layouts and many customization options. Cards like the examples shown can be created, and many others.</p>
-
-      <DocsShow block :style="{ maxWidth: '800px' }">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        <code>KCard</code> is a versatile and accessible base component for creating various types
+        of cards, such as lesson cards, resource cards, and more.
+      </p>
+
+      <p>
+        It manages the layout, including the thumbnail image, title, and other content. It offers
+        several base layouts and many customization options. Cards like the examples shown can be
+        created, and many others.
+      </p>
+
+      <DocsShow
+        block
+        :style="{ maxWidth: '800px' }"
+      >
         <KCardGrid
           layout="1-1-1"
           :skeletonsConfig="skeletonsConfig1"
-          :loading="loading"  
+          :loading="loading"
         >
           <DocsKCard
             :headingLevel="3"
@@ -23,27 +36,79 @@
         </KCardGrid>
       </DocsShow>
 
-      <p>It is intended for use with <code>KCardGrid</code>. Below is an overview of <code>KCard</code>'s features and best practices focused on its inner content. To learn more about card grids and related <code>KCard</code> features, see <DocsLibraryLink component="KCardGrid" />.</p>
+      <p>
+        It is intended for use with <code>KCardGrid</code>. Below is an overview of
+        <code>KCard</code>'s features and best practices focused on its inner content. To learn more
+        about card grids and related <code>KCard</code> features, see
+        <DocsLibraryLink component="KCardGrid" />.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Guidelines" anchor="#guidelines">
+    <DocsPageSection
+      title="Guidelines"
+      anchor="#guidelines"
+    >
       <ul>
         <li>
-          Use <code>KCard</code> within <code>KCardGrid</code> as its direct child (<DocsInternalLink text="KCard and KCardGrid" href="#k-card-and-grid" />)
+          Use <code>KCard</code> within <code>KCardGrid</code> as its direct child
+          (<DocsInternalLink
+            text="KCard and KCardGrid"
+            href="#k-card-and-grid"
+          />)
+        </li>
+        <li>
+          Set a correct heading level (<DocsInternalLink
+            text="Title"
+            href="#title"
+          />)
+        </li>
+        <li>
+          Ensure each card title is unique within a card grid (<DocsInternalLink
+            text="Title"
+            href="#title"
+          />)
         </li>
-        <li>Set a correct heading level (<DocsInternalLink text="Title" href="#title" />)</li>
-        <li>Ensure each card title is unique within a card grid (<DocsInternalLink text="Title" href="#title" />)</li>
         <li>Do not use a heading element within the <code>title</code> slot</li>
-        <li>Ensure content provided via slots is accessible (<DocsInternalLink text="Accessibility" href="#a11y" />)</li>
-        <li>Even if a thumbnail image is available, provide a placeholder element (<DocsInternalLink text="Placeholder" href="#thumbnail-placeholder" />)</li>
-        <li>If using selection controls, use pre-defined labels (<DocsInternalLink text="Selection controls" href="#selection-controls" />)</li>
-        <li>Test final cards for semantic structure, accessibility, and right-to-left support (<DocsInternalLink text="Accessibility" href="#a11y" />)</li>
+        <li>
+          Ensure content provided via slots is accessible (<DocsInternalLink
+            text="Accessibility"
+            href="#a11y"
+          />)
+        </li>
+        <li>
+          Even if a thumbnail image is available, provide a placeholder element (<DocsInternalLink
+            text="Placeholder"
+            href="#thumbnail-placeholder"
+          />)
+        </li>
+        <li>
+          If using selection controls, use pre-defined labels (<DocsInternalLink
+            text="Selection controls"
+            href="#selection-controls"
+          />)
+        </li>
+        <li>
+          Test final cards for semantic structure, accessibility, and right-to-left support
+          (<DocsInternalLink
+            text="Accessibility"
+            href="#a11y"
+          />)
+        </li>
       </ul>
 
-      <p>Also follow <DocsInternalLink text="KCardGrid guidelines" href="/kcardgrid#guidelines" />.</p>
+      <p>
+        Also follow
+        <DocsInternalLink
+          text="KCardGrid guidelines"
+          href="/kcardgrid#guidelines"
+        />.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <DocsSubNav
         :items="[
           { text: 'KCard and KCardGrid', href: '#k-card-and-grid' },
@@ -55,7 +120,7 @@
           { text: 'Content slots', href: '#content-slots' },
           { text: 'Thumbnail', href: '#thumbnail' },
           { text: 'Interactive elements', href: '#interactive-elements' },
-          { text: 'Selection controls', href: '#selection-controls' }
+          { text: 'Selection controls', href: '#selection-controls' },
         ]"
       />
 
@@ -64,7 +129,13 @@
         <DocsAnchorTarget anchor="#k-card-and-grid" />
       </h3>
 
-      <p><em><code>KCard</code> must always be used within <code>KCardGrid</code> as its direct child</em> to ensure proper semantics and accessibility. Refer to <DocsLibraryLink component="KCardGrid" /> to see how these components work together. <DocsToggleButton contentId="more-card-and-grid" /></p>
+      <p>
+        <em><code>KCard</code> must always be used within <code>KCardGrid</code> as its direct
+          child</em>
+        to ensure proper semantics and accessibility. Refer to
+        <DocsLibraryLink component="KCardGrid" /> to see how these components work together.
+        <DocsToggleButton contentId="more-card-and-grid" />
+      </p>
 
       <DocsToggleContent id="more-card-and-grid">
         <DocsDoNot>
@@ -109,17 +180,14 @@
             <DocsShowCode language="html">
               <!-- MyCardComponent.vue -->
               <template>
-                <KCard>
-
-                  ...
-
-                </KCard>
+                <KCard> ... </KCard>
               </template>
             </DocsShowCode>
             <!-- eslint-enable -->
           </template>
           <template #not>
-            <span>Build cards in such a way<br>that <code>KCard</code> is not a direct child of <code>KCardGrid</code></span>
+            <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">
               <KCardGrid>
@@ -133,9 +201,7 @@
               <!-- MyCardComponent.vue -->
               <template>
                 <div>
-                  <KCard>
-                    ...
-                  </KCard>
+                  <KCard> ... </KCard>
                 </div>
               </template>
             </DocsShowCode>
@@ -149,24 +215,41 @@
         <DocsAnchorTarget anchor="#title" />
       </h3>
 
-      <p><em>Always use the <code>title</code> prop to assign an unique title to each card in a grid, and the <code>headingLevel</code> prop to set the heading level on it. The level needs to correspond to the surrounding context.</em> <DocsToggleButton contentId="more-heading-level" /></p>
+      <p>
+        <em>Always use the <code>title</code> prop to assign an unique title to each card in a grid,
+          and the <code>headingLevel</code> prop to set the heading level on it. The level needs to
+          correspond to the surrounding context.</em>
+        <DocsToggleButton contentId="more-heading-level" />
+      </p>
 
       <DocsToggleContent id="more-heading-level">
         <p>Examples:</p>
         <ul>
-          <li>If a page with cards has an <code>h1</code> and no subsections, set <code>headingLevel</code> to <code>2</code> to render card titles as <code>h2</code>.</li>
-
-          <li>If there's an <code>h2</code> subsection with cards, set <code>headingLevel</code> to <code>3</code> to render card titles as <code>h3</code>.</li>
+          <li>
+            If a page with cards has an <code>h1</code> and no subsections, set
+            <code>headingLevel</code> to <code>2</code> to render card titles as <code>h2</code>.
+          </li>
+
+          <li>
+            If there's an <code>h2</code> subsection with cards, set <code>headingLevel</code> to
+            <code>3</code> to render card titles as <code>h3</code>.
+          </li>
         </ul>
       </DocsToggleContent>
 
-      <p>The scoped <code>title</code> slot with its <code>titleText</code> attribute can be used to customize the title.</p>
+      <p>
+        The scoped <code>title</code> slot with its <code>titleText</code> attribute can be used to
+        customize the title.
+      </p>
 
-      <DocsShow block :style="{ maxWidth: '600px' }">
+      <DocsShow
+        block
+        :style="{ maxWidth: '600px' }"
+      >
         <KCardGrid
           layout="1-1-1"
           :skeletonsConfig="skeletonsConfig9"
-          :loading="loading"  
+          :loading="loading"
         >
           <DocsKCard
             :headingLevel="3"
@@ -211,7 +294,12 @@
       </DocsShowCode>
       <!-- eslint-enable -->
 
-      <p><em>Do not use a heading element within the <code>title</code> slot to avoid duplicate headings in the markup output.</em><code>KCard</code> already handles a heading element internally.<DocsToggleButton contentId="more-title-slot" /></p>
+      <p>
+        <em>Do not use a heading element within the <code>title</code> slot to avoid duplicate
+          headings in the markup output.</em><code>KCard</code> already handles a heading element internally.<DocsToggleButton
+          contentId="more-title-slot"
+        />
+      </p>
 
       <DocsToggleContent id="more-title-slot">
         <DocsDoNot>
@@ -242,16 +330,33 @@
         </DocsDoNot>
       </DocsToggleContent>
 
-      <p>The <code>titleMaxLines</code> prop can be used to truncate the title to a set number of lines.</p>
+      <p>
+        The <code>titleMaxLines</code> prop can be used to truncate the title to a set number of
+        lines.
+      </p>
 
       <h3>
         Accessibility
         <DocsAnchorTarget anchor="#a11y" />
       </h3>
 
-      <p><code>KCard</code> and <code>KCardGrid</code> offer built-in accessibility. For the parts they are responsible for, they manage proper semantics, screen reader support, and right-to-left language compatibility.</p>
-
-      <p>However, <em>it is necessary to ensure that cards built with <code>KCard</code> are fully accessible, particularly the slot content that <code>KCard</code> doesn't control.</em> Refer to <DocsInternalLink text="Interactive elements" href="#interactive-elements" /> for one such example.</p>
+      <p>
+        <code>KCard</code> and <code>KCardGrid</code> offer built-in accessibility. For the parts
+        they are responsible for, they manage proper semantics, screen reader support, and
+        right-to-left language compatibility.
+      </p>
+
+      <p>
+        However,
+        <em>it is necessary to ensure that cards built with <code>KCard</code> are fully accessible,
+          particularly the slot content that <code>KCard</code> doesn't control.</em>
+        Refer to
+        <DocsInternalLink
+          text="Interactive elements"
+          href="#interactive-elements"
+        />
+        for one such example.
+      </p>
 
       <p><em>Always test semantics, accessibility, and right-to-left of the final cards.</em></p>
 
@@ -277,7 +382,10 @@
         </KCardGrid>
       </DocsShowCode>
 
-      <p>Listen to the <code>click</code> event to perform a custom action (whether or not the <code>to</code> prop is used).</p>
+      <p>
+        Listen to the <code>click</code> event to perform a custom action (whether or not the
+        <code>to</code> prop is used).
+      </p>
 
       <DocsShowCode language="html">
         <KCardGrid ...>
@@ -295,32 +403,40 @@
 
       <!-- eslint-disable -->
       <DocsShowCode language="javascript">
-        export default {
-          methods() {
-            onClick() {
-              console.log('Card clicked');
-            }
-          },
-        };
+        export default { methods() { onClick() { console.log('Card clicked'); } }, };
       </DocsShowCode>
       <!-- eslint-enable -->
 
       <p>Note that long clicks are ignored to allow for text selection.</p>
 
-      <p>See <DocsInternalLink text="Interactive elements" href="#interactive-elements" /> to learn how to disable card navigation in favor of a custom handler when elements like buttons are rendered within a card.</p>
+      <p>
+        See
+        <DocsInternalLink
+          text="Interactive elements"
+          href="#interactive-elements"
+        />
+        to learn how to disable card navigation in favor of a custom handler when elements like
+        buttons are rendered within a card.
+      </p>
 
       <h3>
         Layout
         <DocsAnchorTarget anchor="#layout" />
       </h3>
 
-      <p><code>KCard</code> has two orientations: horizontal and vertical. It is also possible to configure whether a thumbnail area is displayed, its size and alignment. By combining <code>orientation</code>, <code>thumbnailDisplay</code> and <code>thumbnailAlign</code> props, the following card layouts can be achieved to organize diverse kinds of content:</p>
+      <p>
+        <code>KCard</code> has two orientations: horizontal and vertical. It is also possible to
+        configure whether a thumbnail area is displayed, its size and alignment. By combining
+        <code>orientation</code>, <code>thumbnailDisplay</code> and
+        <code>thumbnailAlign</code> props, the following card layouts can be achieved to organize
+        diverse kinds of content:
+      </p>
 
       <DocsShow block>
         <KCardGrid
           layout="1-2-3"
           :skeletonsConfig="skeletonsConfig2"
-          :loading="loading"  
+          :loading="loading"
         >
           <DocsKCard
             :headingLevel="4"
@@ -329,20 +445,20 @@
             prependTitle="(1)"
           >
             <template #aboveTitle>
-              <KLabeledIcon icon="readSolid" label="Read" />
+              <KLabeledIcon
+                icon="readSolid"
+                label="Read"
+              />
             </template>
             <template #footer>
-              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
-                <span
-                  :style="{ 'background-color': $themePalette.grey.v_100 }"
-                >
+              <div
+                class="pills"
+                :style="{ color: $themeTokens.annotation }"
+              >
+                <span :style="{ 'background-color': $themePalette.grey.v_100 }">
                   Short Activity
                 </span>
-                <span
-                  :style="{ 'background-color': $themePalette.grey.v_100 }"
-                >
-                  Biology
-                </span>
+                <span :style="{ 'background-color': $themePalette.grey.v_100 }"> Biology </span>
               </div>
             </template>
           </DocsKCard>
@@ -354,13 +470,17 @@
             prependTitle="(2)"
           >
             <template #aboveTitle>
-              <KLabeledIcon icon="readSolid" label="Read" />
+              <KLabeledIcon
+                icon="readSolid"
+                label="Read"
+              />
             </template>
             <template #footer>
-              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
-                <span
-                  :style="{ 'background-color': $themePalette.grey.v_100 }"
-                >
+              <div
+                class="pills"
+                :style="{ color: $themeTokens.annotation }"
+              >
+                <span :style="{ 'background-color': $themePalette.grey.v_100 }">
                   Short Activity
                 </span>
               </div>
@@ -374,7 +494,10 @@
             hideFooter
           >
             <template #aboveTitle>
-              <KLabeledIcon icon="readSolid" label="Read" />
+              <KLabeledIcon
+                icon="readSolid"
+                label="Read"
+              />
             </template>
           </DocsKCard>
         </KCardGrid>
@@ -384,7 +507,7 @@
         <KCardGrid
           layout="1-2-2"
           :skeletonsConfig="skeletonsConfig3"
-          :loading="loading"  
+          :loading="loading"
         >
           <DocsKCard
             :headingLevel="4"
@@ -489,20 +612,35 @@
         <DocsAnchorTarget anchor="#responsiveness" />
       </h3>
 
-      <p>To a large extent, <code>KCardGrid</code> takes care of responsiveness. Depending on a chosen card layout, <code>KCard</code>'s inner area can be further adjusted to offer even better experience. Refer to <DocsInternalLink text="KCardGrid: Fine-tuning responsiveness" href="/kcardgrid#fine-tuning-responsiveness" />.</p>
+      <p>
+        To a large extent, <code>KCardGrid</code> takes care of responsiveness. Depending on a
+        chosen card layout, <code>KCard</code>'s inner area can be further adjusted to offer even
+        better experience. Refer to
+        <DocsInternalLink
+          text="KCardGrid: Fine-tuning responsiveness"
+          href="/kcardgrid#fine-tuning-responsiveness"
+        />.
+      </p>
 
       <h3>
         Content slots
         <DocsAnchorTarget anchor="#content-slots" />
       </h3>
 
-      <p>Use <code>aboveTitle</code>, <code>belowTitle</code>, and <code>footer</code> slots to add content to a card. <code>KCard</code> will organize these areas according to its <DocsInternalLink text="layout configuration" href="#layout" />. Apply custom styling to the inner content of slots to achieve desired effects.</p>
+      <p>
+        Use <code>aboveTitle</code>, <code>belowTitle</code>, and <code>footer</code> slots to add
+        content to a card. <code>KCard</code> will organize these areas according to its
+        <DocsInternalLink
+          text="layout configuration"
+          href="#layout"
+        />. Apply custom styling to the inner content of slots to achieve desired effects.
+      </p>
 
       <DocsShow block>
         <KCardGrid
           layout="1-1-1"
           :skeletonsConfig="skeletonsConfig5"
-          :loading="loading"  
+          :loading="loading"
         >
           <KCard
             :to="{ path: '#guidelines' }"
@@ -512,7 +650,10 @@
             title="Learn everything about hummingbirds: their habitats, feeding patterns, and stunning flight abilities"
           >
             <template #aboveTitle>
-              <KLabeledIcon icon="readSolid" label="Read" />
+              <KLabeledIcon
+                icon="readSolid"
+                label="Read"
+              />
             </template>
             <template #belowTitle>
               <KTextTruncator
@@ -521,17 +662,12 @@
               />
             </template>
             <template #footer>
-              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
-                <span
-                  :style="{ 'backgroundColor': $themePalette.grey.v_100 }"
-                >
-                  Short Activity
-                </span>
-                <span
-                  :style="{ 'backgroundColor': $themePalette.grey.v_100 }"
-                >
-                  Biology
-                </span>
+              <div
+                class="pills"
+                :style="{ color: $themeTokens.annotation }"
+              >
+                <span :style="{ backgroundColor: $themePalette.grey.v_100 }"> Short Activity </span>
+                <span :style="{ backgroundColor: $themePalette.grey.v_100 }"> Biology </span>
               </div>
             </template>
           </KCard>
@@ -543,7 +679,10 @@
         <KCardGrid ...>
           <KCard ...>
             <template #aboveTitle>
-              <KLabeledIcon icon="readSolid" label="Read" />
+              <KLabeledIcon
+                icon="readSolid"
+                label="Read"
+              />
             </template>
             <template #belowTitle>
               <KTextTruncator
@@ -560,37 +699,68 @@
       </DocsShowCode>
       <!-- eslint-enable -->
 
-      <p>The <code>title</code> slot is available as an alternative to the <code>title</code> prop. See <DocsInternalLink text="Title" href="#title" />.</p>
+      <p>
+        The <code>title</code> slot is available as an alternative to the <code>title</code> prop.
+        See
+        <DocsInternalLink
+          text="Title"
+          href="#title"
+        />.
+      </p>
 
       <h3>
         Thumbnail
         <DocsAnchorTarget anchor="#thumbnail" />
       </h3>
 
-      <p><code>KCard</code> offers multiple ways to display thumbnails, depending on these factors:</p>
+      <p>
+        <code>KCard</code> offers multiple ways to display thumbnails, depending on these factors:
+      </p>
 
       <ul>
-        <li>The <code>orientation</code> prop decides if the thumbnail area appears above or beside other content.</li>
+        <li>
+          The <code>orientation</code> prop decides if the thumbnail area appears above or beside
+          other content.
+        </li>
         <li>The <code>thumbnailDisplay</code> prop manages the thumbnail's visibility and size.</li>
-        <li>The <code>thumbnailAlignment</code> prop sets which side the thumbnail appears on in horizontal orientation.</li>
+        <li>
+          The <code>thumbnailAlignment</code> prop sets which side the thumbnail appears on in
+          horizontal orientation.
+        </li>
       </ul>
 
-      <p>See <DocsInternalLink text="Layout" href="#layout" /> to see how these options can be combined to create different card layouts.</p>
+      <p>
+        See
+        <DocsInternalLink
+          text="Layout"
+          href="#layout"
+        />
+        to see how these options can be combined to create different card layouts.
+      </p>
 
       <h4>
         Placeholder
         <DocsAnchorTarget anchor="#thumbnail-placeholder" />
       </h4>
 
-      <p>When <code>KCard</code> is set to display the thumbnail, the thumbnail area acts as a placeholder if the image is missing, fails to load, or is still loading. In such cases, a light gray background is shown in place of the image.</p>
+      <p>
+        When <code>KCard</code> is set to display the thumbnail, the thumbnail area acts as a
+        placeholder if the image is missing, fails to load, or is still loading. In such cases, a
+        light gray background is shown in place of the image.
+      </p>
 
-      <p>Use the <code>thumbnailPlaceholder</code> slot to add a placeholder element, such as an icon, to this area. <em>Provide a placeholder element even if a thumbnail image is available.</em> It serves as fallback content if the image fails to load unexpectedly.</p>
+      <p>
+        Use the <code>thumbnailPlaceholder</code> slot to add a placeholder element, such as an
+        icon, to this area.
+        <em>Provide a placeholder element even if a thumbnail image is available.</em> It serves as
+        fallback content if the image fails to load unexpectedly.
+      </p>
 
       <DocsShow block>
         <KCardGrid
           layout="1-1-1"
           :skeletonsConfig="skeletonsConfig6"
-          :loading="loading"  
+          :loading="loading"
         >
           <DocsKCard
             :headingLevel="4"
@@ -622,20 +792,47 @@
         <DocsAnchorTarget anchor="#thumbnail-image-scaling" />
       </h4>
 
-      <p>The <code>thumbnailScaleType</code> prop determines how a thumbnail image is scaled to fit the thumbnail area. The available options are the same as <code>KImg</code>'s scaling options.</p>
-
-      <p><em>If a thumbnail image's quality and ratio are unknown, which is often the case in our cards, it's best to use the default value  <code>'centerInside'</code></em> since it never distorts the image or impairs its quality.</p>
-
-      <p>See <DocsInternalLink text="KImg's scaling guidance" href="/kimg#scaling" />.</p>
+      <p>
+        The <code>thumbnailScaleType</code> prop determines how a thumbnail image is scaled to fit
+        the thumbnail area. The available options are the same as <code>KImg</code>'s scaling
+        options.
+      </p>
+
+      <p>
+        <em>If a thumbnail image's quality and ratio are unknown, which is often the case in our
+          cards, it's best to use the default value <code>'centerInside'</code></em>
+        since it never distorts the image or impairs its quality.
+      </p>
+
+      <p>
+        See
+        <DocsInternalLink
+          text="KImg's scaling guidance"
+          href="/kimg#scaling"
+        />.
+      </p>
 
       <h3>
         Interactive elements
         <DocsAnchorTarget anchor="#interactive-elements" />
       </h3>
 
-      <p>When adding interactive elements like buttons to a card via slots, apply the <code>.stop</code> event modifier to their <code>@click</code> event to prevent the card <DocsInternalLink text="click event and navigation" href="#click-navigation" />.</p>
-
-      <p><em>This applies to all slot content, but considering accessibility is especially important with interactive elements.</em> For instance, <code>ariaLabel</code> is applied to the bookmark icon button in the following example so that screenreaders can communicate its purpose. In production, more work would be needed to indicate the bookmark's toggled state. Always assess on a case-by-case basis.</p>
+      <p>
+        When adding interactive elements like buttons to a card via slots, apply the
+        <code>.stop</code> event modifier to their <code>@click</code> event to prevent the card
+        <DocsInternalLink
+          text="click event and navigation"
+          href="#click-navigation"
+        />.
+      </p>
+
+      <p>
+        <em>This applies to all slot content, but considering accessibility is especially important
+          with interactive elements.</em>
+        For instance, <code>ariaLabel</code> is applied to the bookmark icon button in the following
+        example so that screenreaders can communicate its purpose. In production, more work would be
+        needed to indicate the bookmark's toggled state. Always assess on a case-by-case basis.
+      </p>
 
       <DocsShow block>
         <KCardGrid
@@ -681,15 +878,29 @@
         <DocsAnchorTarget anchor="#selection-controls" />
       </h3>
 
-      <p>Selection controls like checkboxes or radio buttons can be placed next to the card's main area via the <code>select</code> slot.</p>
+      <p>
+        Selection controls like checkboxes or radio buttons can be placed next to the card's main
+        area via the <code>select</code> slot.
+      </p>
 
-      <p><em>Use <span :style="{ fontStyle: 'italic' }">"Select '[card title]'"</span> as label and hide it with the <code>visuallyhidden</code> class to keep the label available for screen readers.</em></p>
+      <p>
+        <em>Use <span :style="{ fontStyle: 'italic' }">"Select '[card title]'"</span> as label and
+          hide it with the <code>visuallyhidden</code> class to keep the label available for screen
+          readers.</em>
+      </p>
 
-      <p><code>KCard</code> handles all remaining accessibility aspects, including semantics and focus order. If there are other interactive elements in a card, a selection control will receive focus last in the keyboard navigation order.</p>
+      <p>
+        <code>KCard</code> handles all remaining accessibility aspects, including semantics and
+        focus order. If there are other interactive elements in a card, a selection control will
+        receive focus last in the keyboard navigation order.
+      </p>
 
       <p>Managing the selection state is not <code>KCard</code>'s responsibility.</p>
 
-      <DocsShow block :style="{ maxWidth: '800px' }">
+      <DocsShow
+        block
+        :style="{ maxWidth: '800px' }"
+      >
         <KCardGrid
           layout="1-1-1"
           :skeletonsConfig="skeletonsConfig8"
@@ -747,7 +958,6 @@
         </KCardGrid>
       </DocsShow>
 
-
       <!-- eslint-disable -->
       <DocsShowCode language="html">
         <KCardGrid ...>
@@ -777,7 +987,10 @@
       <!-- eslint-enable -->
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
           <DocsLibraryLink component="KCardGrid" /> is a component for use with <code>KCard</code>
@@ -965,4 +1178,4 @@
     }
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/pages/kcardgrid.vue b/docs/pages/kcardgrid.vue
index 7b33dbb99..6c5edc280 100644
--- a/docs/pages/kcardgrid.vue
+++ b/docs/pages/kcardgrid.vue
@@ -1,45 +1,109 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>Displays a grid of cards <DocsLibraryLink component="KCard" />.</p>
 
-      <p><code>KCardGrid</code> provides base layouts for the most common grids in our ecosystem, as well as customization or complete override of the base layouts.</p>
-
-      <p>Together with <code>KCard</code>, it ensures accessible navigation within card lists, such as announcing only their titles when using the tab key to avoid overwhelming screen reader outputs.</p>
-
-      <p>Grid's visual behavior is based on the <DocsInternalLink text="window breakpoint system" href="/layout#responsiveness" />. <code>KCardGrid</code> determines how many cards per row to display based on its layout and a current window breakpoint.</p>
-
-      <p><code>KCardGrid</code> doesn't manage inner card content. This is <code>KCard</code>'s responsibility.</p>
+      <p>
+        <code>KCardGrid</code> provides base layouts for the most common grids in our ecosystem, as
+        well as customization or complete override of the base layouts.
+      </p>
+
+      <p>
+        Together with <code>KCard</code>, it ensures accessible navigation within card lists, such
+        as announcing only their titles when using the tab key to avoid overwhelming screen reader
+        outputs.
+      </p>
+
+      <p>
+        Grid's visual behavior is based on the
+        <DocsInternalLink
+          text="window breakpoint system"
+          href="/layout#responsiveness"
+        />. <code>KCardGrid</code> determines how many cards per row to display based on its layout
+        and a current window breakpoint.
+      </p>
+
+      <p>
+        <code>KCardGrid</code> doesn't manage inner card content. This is <code>KCard</code>'s
+        responsibility.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Guidelines" anchor="#guidelines">
+    <DocsPageSection
+      title="Guidelines"
+      anchor="#guidelines"
+    >
       <ul>
         <li>
-          <code>KCardGrid</code> must be a direct parent of <code>KCard</code> (<DocsInternalLink text="KCard: KCard and KCardGrid" href="/kcard#k-card-and-grid" />)
+          <code>KCardGrid</code> must be a direct parent of <code>KCard</code> (<DocsInternalLink
+            text="KCard: KCard and KCardGrid"
+            href="/kcard#k-card-and-grid"
+          />)
+        </li>
+        <li>
+          Avoid setting card widths. Rely on <code>KCardGrid</code> layouts and customization
+          options (<DocsInternalLink
+            text="Base layouts"
+            href="#base-layouts"
+          />,
+          <DocsInternalLink
+            text="Layout customization"
+            href="#layout-customization"
+          />)
+        </li>
+        <li>
+          Avoid setting card heights. Instead, set heights on card sections, use text truncation, or
+          limit content in other ways (<DocsInternalLink
+            text="Card height, content tolerance and  alignment"
+            href="#card-height-and-alignment"
+          />)
         </li>
         <li>
-          Avoid setting  card widths. Rely on <code>KCardGrid</code> layouts and customization options (<DocsInternalLink text="Base layouts" href="#base-layouts" />, <DocsInternalLink text="Layout customization" href="#layout-customization" />)
+          Ensure robust content tolerance and consistent content alignment (<DocsInternalLink
+            text="Card height, content tolerance and  alignment"
+            href="#card-height-and-alignment"
+          />)
         </li>
         <li>
-          Avoid setting card heights. Instead, set heights on card sections, use text truncation, or limit content in other ways (<DocsInternalLink text="Card height, content tolerance and  alignment" href="#card-height-and-alignment" />)
+          Preview cards on all screen sizes (<DocsInternalLink
+            text="Fine-tuning responsiveness"
+            href="#fine-tuning-responsiveness"
+          />)
         </li>
         <li>
-          Ensure robust content tolerance and consistent content alignment (<DocsInternalLink text="Card height, content tolerance and  alignment" href="#card-height-and-alignment" />)
+          Configure loading skeleton cards to match the expected visual output of cards with loaded
+          data as closely as possible on all screen sizes (<DocsInternalLink
+            text="Loading state"
+            href="#loading-state"
+          />)
         </li>
-        <li>Preview cards on all screen sizes  (<DocsInternalLink text="Fine-tuning responsiveness" href="#fine-tuning-responsiveness" />)</li>
-        <li>Configure loading skeleton cards to match the expected visual output of cards with loaded data as closely as possible on all screen sizes (<DocsInternalLink text="Loading state" href="#loading-state" />)</li>
       </ul>
 
-      <p>Also follow <DocsInternalLink text="KCard guidelines" href="/kcard#guidelines" />.</p>
+      <p>
+        Also follow
+        <DocsInternalLink
+          text="KCard guidelines"
+          href="/kcard#guidelines"
+        />.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <DocsSubNav
         :items="[
           { text: 'Base layouts', href: '#base-layouts' },
           { text: 'Layout customization', href: '#layout-customization' },
-          { text: 'Card height, content tolerance and  alignment', href: '#card-height-and-alignment' },
+          {
+            text: 'Card height, content tolerance and  alignment',
+            href: '#card-height-and-alignment',
+          },
           { text: 'Fine-tuning responsiveness', href: '#fine-tuning-responsiveness' },
           { text: 'Loading state', href: '#loading-state' },
         ]"
@@ -50,13 +114,27 @@
         <DocsAnchorTarget anchor="#base-layouts" />
       </h3>
 
-      <p>Three base layouts are available: <code>'1-1-1'</code>, <code>'1-2-2'</code>, and <code>'1-2-3'</code>. They determine the number of cards per row for each <DocsInternalLink text="window breakpoint level" href="/layout#responsiveness" />.</p>
+      <p>
+        Three base layouts are available: <code>'1-1-1'</code>, <code>'1-2-2'</code>, and
+        <code>'1-2-3'</code>. They determine the number of cards per row for each
+        <DocsInternalLink
+          text="window breakpoint level"
+          href="/layout#responsiveness"
+        />.
+      </p>
 
       <h4>
         '1-1-1' grid
         <DocsAnchorTarget anchor="#1-1-1-grid" />
       </h4>
-      <p>Displays a grid with 1 card per row on every screen size. <DocsToggleButton contentId="more-1-1-1-grid" showText="Show full definition" hideText="Hide full definition" /></p>
+      <p>
+        Displays a grid with 1 card per row on every screen size.
+        <DocsToggleButton
+          contentId="more-1-1-1-grid"
+          showText="Show full definition"
+          hideText="Hide full definition"
+        />
+      </p>
 
       <DocsToggleContent id="more-1-1-1-grid">
         <DocsTable>
@@ -116,7 +194,15 @@
         '1-2-2' grid
         <DocsAnchorTarget anchor="#1-2-2-grid" />
       </h4>
-      <p>Displays a grid with 1 card per row on smaller screens, and 2 cards per row on medium and larger screens. <DocsToggleButton contentId="more-1-2-2-grid" showText="Show full definition" hideText="Hide full definition" /></p>
+      <p>
+        Displays a grid with 1 card per row on smaller screens, and 2 cards per row on medium and
+        larger screens.
+        <DocsToggleButton
+          contentId="more-1-2-2-grid"
+          showText="Show full definition"
+          hideText="Hide full definition"
+        />
+      </p>
 
       <DocsToggleContent id="more-1-2-2-grid">
         <DocsTable>
@@ -149,7 +235,7 @@
         <KCardGrid
           layout="1-2-2"
           :skeletonsConfig="skeletonsConfig2"
-          :loading="loading"  
+          :loading="loading"
         >
           <DocsKCard
             v-for="i in 3"
@@ -175,7 +261,15 @@
         '1-2-3' grid
         <DocsAnchorTarget anchor="#1-2-3-grid" />
       </h4>
-      <p>Displays a grid with 1 card per row on smaller screens, 2 cards per row on medium screens, and 3 cards per row on larger screens. <DocsToggleButton contentId="more-1-2-3-grid" showText="Show full definition" hideText="Hide full definition" /></p>
+      <p>
+        Displays a grid with 1 card per row on smaller screens, 2 cards per row on medium screens,
+        and 3 cards per row on larger screens.
+        <DocsToggleButton
+          contentId="more-1-2-3-grid"
+          showText="Show full definition"
+          hideText="Hide full definition"
+        />
+      </p>
 
       <DocsToggleContent id="more-1-2-3-grid">
         <DocsTable>
@@ -235,12 +329,28 @@
         <DocsAnchorTarget anchor="#layout-customization" />
       </h3>
 
-      <p>Base layouts can be customized or even completely overriden via the <code>layoutOverride</code> prop. <code>layoutOverride</code> takes an array of objects <code>{ breakpoints, cardsPerRow, columnGap, rowGap }</code>, where:</p>
+      <p>
+        Base layouts can be customized or even completely overriden via the
+        <code>layoutOverride</code> prop. <code>layoutOverride</code> takes an array of objects
+        <code>{ breakpoints, cardsPerRow, columnGap, rowGap }</code>, where:
+      </p>
 
       <ul>
-        <li><code>breakpoints</code> is an array of <code>0-7</code> values corresponding to the <DocsInternalLink text="window breakpoint levels" href="/layout#responsiveness" />. All other attributes in the same object take effect on these breakpoints.</li>
-        <li><code>cardsPerRow</code> overrides the number of cards per row for the specified breakpoints.</li>
-        <li><code>columnGap</code>/<code>rowGap</code> overrides grid column/row gaps for the specified breakpoints.</li>
+        <li>
+          <code>breakpoints</code> is an array of <code>0-7</code> values corresponding to the
+          <DocsInternalLink
+            text="window breakpoint levels"
+            href="/layout#responsiveness"
+          />. All other attributes in the same object take effect on these breakpoints.
+        </li>
+        <li>
+          <code>cardsPerRow</code> overrides the number of cards per row for the specified
+          breakpoints.
+        </li>
+        <li>
+          <code>columnGap</code>/<code>rowGap</code> overrides grid column/row gaps for the
+          specified breakpoints.
+        </li>
       </ul>
 
       <p>For example:</p>
@@ -277,6 +387,7 @@
       <!-- eslint-enable -->
 
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         export default {
           ...
@@ -299,22 +410,37 @@
       </DocsShowCode>
       <!-- eslint-enable -->
 
-      <p>Here, the base <code>1-2-3</code> layout is overriden partially. Column and row gaps are decreased to <code>20px</code> on breakpoints <code>0-1</code>, and the number of cards per row is increased to 4 on breakpoints <code>4-7</code>.</p>
+      <p>
+        Here, the base <code>1-2-3</code> layout is overriden partially. Column and row gaps are
+        decreased to <code>20px</code> on breakpoints <code>0-1</code>, and the number of cards per
+        row is increased to 4 on breakpoints <code>4-7</code>.
+      </p>
 
       <h3>
-        Card height, content tolerance and  alignment
+        Card height, content tolerance and alignment
         <DocsAnchorTarget anchor="#card-height-and-alignment" />
       </h3>
 
-      <p>Cards displayed in <code>KCardGrid</code> stretch vertically to fit their content, making a grid row height match its tallest card.</p>
-
-      <p><em>Setting height on cards is discouraged. Instead, manage height bottom-up, for example by setting height on card sections, using text truncation, or other ways to limit its inner content.</em> Such approaches ensure content tolerance, prevent from unexpected overflows or excessive height, and keep vertical alignment of card sections consistent on a grid row. This is especially important when dealing with unknown lenghts or amounts of content displayed in cards. Consider:</p>
+      <p>
+        Cards displayed in <code>KCardGrid</code> stretch vertically to fit their content, making a
+        grid row height match its tallest card.
+      </p>
+
+      <p>
+        <em>Setting height on cards is discouraged. Instead, manage height bottom-up, for example by
+          setting height on card sections, using text truncation, or other ways to limit its inner
+          content.</em>
+        Such approaches ensure content tolerance, prevent from unexpected overflows or excessive
+        height, and keep vertical alignment of card sections consistent on a grid row. This is
+        especially important when dealing with unknown lenghts or amounts of content displayed in
+        cards. Consider:
+      </p>
 
       <DocsShow block>
         <KCardGrid
           layout="1-2-3"
           :skeletonsConfig="skeletonsConfig5"
-          :loading="loading"  
+          :loading="loading"
         >
           <DocsKCard
             :headingLevel="4"
@@ -322,7 +448,10 @@
           >
             <template #aboveTitle>
               <div :style="{ height: '24px' }">
-                <KLabeledIcon icon="readSolid" label="Read" />
+                <KLabeledIcon
+                  icon="readSolid"
+                  label="Read"
+                />
               </div>
             </template>
             <template #title>
@@ -340,7 +469,10 @@
               />
             </template>
             <template #footer>
-              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
+              <div
+                class="pills"
+                :style="{ color: $themeTokens.annotation }"
+              >
                 <span
                   v-for="(pill, i) in slicedPills"
                   :key="i"
@@ -358,7 +490,10 @@
           >
             <template #aboveTitle>
               <div :style="{ height: '24px' }">
-                <KLabeledIcon icon="readSolid" label="Read" />
+                <KLabeledIcon
+                  icon="readSolid"
+                  label="Read"
+                />
               </div>
             </template>
             <template #title>
@@ -402,7 +537,10 @@
               />
             </template>
             <template #footer>
-              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
+              <div
+                class="pills"
+                :style="{ color: $themeTokens.annotation }"
+              >
                 <span
                   v-for="(pill, i) in slicedPills"
                   :key="i"
@@ -424,9 +562,7 @@
             preserveAboveTitle
           >
             <template #aboveTitle>
-              <div :style="{ height: '24px' }">
-                ...
-              </div>
+              <div :style="{ height: '24px' }">...</div>
             </template>
             <template #title>
               <div :style="{ height: '52px' }">
@@ -443,9 +579,7 @@
               />
             </template>
             <template #footer>
-              <span v-for="pill in slicedPills">
-                ...
-              </span>
+              <span v-for="pill in slicedPills"> ... </span>
             </template>
           </KCard>
         </KCardGrid>
@@ -453,6 +587,7 @@
       <!-- eslint-enable -->
 
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         export default {
           ...
@@ -465,28 +600,46 @@
       </DocsShowCode>
       <!-- eslint-enable -->
 
-      <p>Here, <code>KCard</code> has the following adjustments related to its visual output in the grid:</p>
+      <p>
+        Here, <code>KCard</code> has the following adjustments related to its visual output in the
+        grid:
+      </p>
       <ul>
-        <li>Height is set on its <code>aboveTitle</code> slot content, and its <code>preserveAboveTitle</code> prop keeps the slot area even without content. This results in consistent alignment of all cards' titles on a grid row.</li>
-        <li>Similarly, height is set on its <code>title</code> slot, and the title is truncated.</li>
+        <li>
+          Height is set on its <code>aboveTitle</code> slot content, and its
+          <code>preserveAboveTitle</code> prop keeps the slot area even without content. This
+          results in consistent alignment of all cards' titles on a grid row.
+        </li>
+        <li>
+          Similarly, height is set on its <code>title</code> slot, and the title is truncated.
+        </li>
         <li>Its <code>belowTitle</code> slot's content is truncated.</li>
-        <li>The number of pills in its <code>footer</code> slot is limited to a reasonable amount.</li>
+        <li>
+          The number of pills in its <code>footer</code> slot is limited to a reasonable amount.
+        </li>
       </ul>
 
-      <p><code>KCard</code> offers other <code>preserve...</code> props corresponding to its slots.</p>
+      <p>
+        <code>KCard</code> offers other <code>preserve...</code> props corresponding to its slots.
+      </p>
 
       <h3>
         Fine-tuning responsiveness
         <DocsAnchorTarget anchor="#fine-tuning-responsiveness" />
       </h3>
 
-      <p>Grid configuration can be combined with <code>KCard</code>'s settings to further improve responsive experience. A common pattern is switching <code>KCard</code>'s horizontal orientation to vertical for smaller screens to organize content more effectively in limited space:</p>
+      <p>
+        Grid configuration can be combined with <code>KCard</code>'s settings to further improve
+        responsive experience. A common pattern is switching <code>KCard</code>'s horizontal
+        orientation to vertical for smaller screens to organize content more effectively in limited
+        space:
+      </p>
 
       <DocsShow block>
         <KCardGrid
           layout="1-2-2"
           :skeletonsConfig="skeletonsConfig6"
-          :loading="loading"  
+          :loading="loading"
         >
           <DocsKCard
             v-for="i in 2"
@@ -499,6 +652,7 @@
       </DocsShow>
 
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
@@ -523,13 +677,16 @@
       </DocsShowCode>
       <!-- eslint-enable -->
 
-      <p>This technique also works for adjusting <code>KCard</code> slots content. In the following example, some metadata pills are hidden on smaller screens:</p>
+      <p>
+        This technique also works for adjusting <code>KCard</code> slots content. In the following
+        example, some metadata pills are hidden on smaller screens:
+      </p>
 
       <DocsShow block>
         <KCardGrid
           layout="1-2-2"
           :skeletonsConfig="skeletonsConfig7"
-          :loading="loading"  
+          :loading="loading"
         >
           <DocsKCard
             v-for="i in 2"
@@ -538,29 +695,23 @@
             :prependTitle="`(${i})`"
           >
             <template #footer>
-              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
-                <span
-                  :style="{ 'background-color': $themePalette.grey.v_100 }"
-                >
-                  <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
+              <div
+                class="pills"
+                :style="{ color: $themeTokens.annotation }"
+              >
+                <span :style="{ 'background-color': $themePalette.grey.v_100 }">
+                  <KIcon
+                    icon="readSolid"
+                    :style="{ fontSize: '13px', position: 'relative', top: '3px' }"
+                  />
                   Read
                 </span>
-                <span
-                  :style="{ 'background-color': $themePalette.grey.v_100 }"
-                >
+                <span :style="{ 'background-color': $themePalette.grey.v_100 }">
                   Short Activity
                 </span>
                 <template v-if="windowBreakpoint > 3">
-                  <span
-                    :style="{ 'background-color': $themePalette.grey.v_100 }"
-                  >
-                    Biology
-                  </span>
-                  <span
-                    :style="{ 'background-color': $themePalette.grey.v_100 }"
-                  >
-                    Ecology
-                  </span>
+                  <span :style="{ 'background-color': $themePalette.grey.v_100 }"> Biology </span>
+                  <span :style="{ 'background-color': $themePalette.grey.v_100 }"> Ecology </span>
                 </template>
               </div>
             </template>
@@ -593,7 +744,12 @@
         <DocsAnchorTarget anchor="#loading-state" />
       </h3>
 
-      <p>While data is loading, <code>KCardGrid</code> shows loading skeleton cards. Use the <code>loading</code> prop to toggle the loading state. Note that <code>KCardGrid</code> internal optimizations may affect how closely the visual loading experience matches the <code>loading</code> value:</p>
+      <p>
+        While data is loading, <code>KCardGrid</code> shows loading skeleton cards. Use the
+        <code>loading</code> prop to toggle the loading state. Note that
+        <code>KCardGrid</code> internal optimizations may affect how closely the visual loading
+        experience matches the <code>loading</code> value:
+      </p>
 
       <ul>
         <li>The loading skeletons won't be displayed for short loading times (&lt; 1s)</li>
@@ -602,41 +758,105 @@
 
       <p>Use the buttons in the example below to preview.</p>
 
-      <h4>Number of loading skeletons <DocsAnchorTarget anchor="#loading-state-skeletons-count" /></h4>
+      <h4>
+        Number of loading skeletons <DocsAnchorTarget anchor="#loading-state-skeletons-count" />
+      </h4>
 
-      <p>By default, the number of loading skeletons corresponds to the number of cards in a single grid row if it were full. This behavior can be overridden via the <code>count</code> attribute (below), however do not override it unless indicated in the designs.</p>
+      <p>
+        By default, the number of loading skeletons corresponds to the number of cards in a single
+        grid row if it were full. This behavior can be overridden via the
+        <code>count</code> attribute (below), however do not override it unless indicated in the
+        designs.
+      </p>
 
       <h4>Loading skeletons configuration</h4>
 
-      <p>Use the <code>skeletonsConfig</code> prop to configure skeleton cards to match the expected visual output of loaded cards on all screen sizes. Preview the layout and height of cards with loaded data and adjust <code>skeletonsConfig</code> accordingly.</p>
+      <p>
+        Use the <code>skeletonsConfig</code> prop to configure skeleton cards to match the expected
+        visual output of loaded cards on all screen sizes. Preview the layout and height of cards
+        with loaded data and adjust <code>skeletonsConfig</code> accordingly.
+      </p>
 
-      <p><code>skeletonsConfig</code> takes an array of objects <code>{ breakpoints, count, height, orientation, thumbnailDisplay, thumbnailAlign }</code>, where:</p>
+      <p>
+        <code>skeletonsConfig</code> takes an array of objects
+        <code>{ breakpoints, count, height, orientation, thumbnailDisplay, thumbnailAlign }</code>,
+        where:
+      </p>
 
       <ul>
-        <li><code>breakpoints</code> is an array of <code>0-7</code> values corresponding to the <DocsInternalLink text="window breakpoint levels" href="/layout#responsiveness" />. All other attributes in the same object take effect on these breakpoints.</li>
-        <li><code>count</code> sets the number of skeleton cards for the specified breakpoints. See <DocsInternalLink text="Number of loading skeletons" href="#loading-state-skeletons-count" />.</li>
-        <li><code>height</code> sets the height of skeleton cards for the specified breakpoints.</li>
-        <li><code>orientation</code> sets the orientation of skeleton cards for the specified breakpoints. Corresponds to <DocsInternalLink text="KCard's orientation" href="/kcard#prop:orientation" code />.</li>
-        <li><code>thumbnailDisplay</code> sets the thumbnail display of skeleton cards for the specified breakpoints. Corresponds to <DocsInternalLink text="KCard's thumbnailDisplay" href="/kcard#prop:thumbnailDisplay" code />.</li>
-        <li><code>thumbnailAlign</code> sets the thumbnail alignment of skeleton cards for the specified breakpoints. Corresponds to <DocsInternalLink text="KCard's thumbnailAlign" href="/kcard#prop:thumbnailAlign" code />.</li>
+        <li>
+          <code>breakpoints</code> is an array of <code>0-7</code> values corresponding to the
+          <DocsInternalLink
+            text="window breakpoint levels"
+            href="/layout#responsiveness"
+          />. All other attributes in the same object take effect on these breakpoints.
+        </li>
+        <li>
+          <code>count</code> sets the number of skeleton cards for the specified breakpoints. See
+          <DocsInternalLink
+            text="Number of loading skeletons"
+            href="#loading-state-skeletons-count"
+          />.
+        </li>
+        <li>
+          <code>height</code> sets the height of skeleton cards for the specified breakpoints.
+        </li>
+        <li>
+          <code>orientation</code> sets the orientation of skeleton cards for the specified
+          breakpoints. Corresponds to
+          <DocsInternalLink
+            text="KCard's orientation"
+            href="/kcard#prop:orientation"
+            code
+          />.
+        </li>
+        <li>
+          <code>thumbnailDisplay</code> sets the thumbnail display of skeleton cards for the
+          specified breakpoints. Corresponds to
+          <DocsInternalLink
+            text="KCard's thumbnailDisplay"
+            href="/kcard#prop:thumbnailDisplay"
+            code
+          />.
+        </li>
+        <li>
+          <code>thumbnailAlign</code> sets the thumbnail alignment of skeleton cards for the
+          specified breakpoints. Corresponds to
+          <DocsInternalLink
+            text="KCard's thumbnailAlign"
+            href="/kcard#prop:thumbnailAlign"
+            code
+          />.
+        </li>
       </ul>
 
-      <p>For easier development, enable the <code>debug</code> prop to display the current breakpoint in the top left corner of the grid. Use the button in the example below to preview the debug mode.</p>
+      <p>
+        For easier development, enable the <code>debug</code> prop to display the current breakpoint
+        in the top left corner of the grid. Use the button in the example below to preview the debug
+        mode.
+      </p>
 
       <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
         <KButtonGroup>
-          <KButton primary @click="load500">
+          <KButton
+            primary
+            @click="load500"
+          >
             Load (0.5 s)
           </KButton>
-          <KButton primary @click="load1200">
+          <KButton
+            primary
+            @click="load1200"
+          >
             Load (1.2 s)
           </KButton>
-          <KButton primary @click="load4000">
+          <KButton
+            primary
+            @click="load4000"
+          >
             Load (4 s)
           </KButton>
-          <KButton @click="debug = !debug">
-            Debug: {{ debug ? 'On' : 'Off' }}
-          </KButton>
+          <KButton @click="debug = !debug"> Debug: {{ debug ? 'On' : 'Off' }} </KButton>
         </KButtonGroup>
       </div>
 
@@ -676,6 +896,7 @@
       <!-- eslint-enable -->
 
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         export default {
           ...
@@ -701,18 +922,36 @@
       </DocsShowCode>
       <!-- eslint-enable -->
 
-      <p>Here, the height of loading skeleton cards is <code>400px</code> with vertical orientation on breakpoints <code>0-3</code>, and <code>220px</code> with horizontal orientation on breakpoints <code>4-7</code>. This makes skeleton cards resemble loaded cards at all breakpoints, creating a smooth transition for users during data loading. Note the bottom-up approach where we begin with a base setup for all breakpoints and gradually override on higher breakpoints. This simplifies the configuration object.</p>
-
-      <p>To get a sense of what skeleton layouts can be achieved, reload this page and the <code>KCard</code> page to preview the loading state in all examples.</p>
+      <p>
+        Here, the height of loading skeleton cards is <code>400px</code> with vertical orientation
+        on breakpoints <code>0-3</code>, and <code>220px</code> with horizontal orientation on
+        breakpoints <code>4-7</code>. This makes skeleton cards resemble loaded cards at all
+        breakpoints, creating a smooth transition for users during data loading. Note the bottom-up
+        approach where we begin with a base setup for all breakpoints and gradually override on
+        higher breakpoints. This simplifies the configuration object.
+      </p>
+
+      <p>
+        To get a sense of what skeleton layouts can be achieved, reload this page and the
+        <code>KCard</code> page to preview the loading state in all examples.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
           <DocsLibraryLink component="KCard" /> is a component for use within <code>KCardGrid</code>
         </li>
         <li>
-          <DocsLibraryLink component="useKResponsiveWindow" /> can be used to detect the current window breakpoint for <DocsInternalLink text="fine-tuning responsiveness" href="#fine-tuning-responsiveness" />
+          <DocsLibraryLink component="useKResponsiveWindow" /> can be used to detect the current
+          window breakpoint for
+          <DocsInternalLink
+            text="fine-tuning responsiveness"
+            href="#fine-tuning-responsiveness"
+          />
         </li>
       </ul>
     </DocsPageSection>
@@ -904,4 +1143,4 @@
     }
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/pages/kcheckbox.vue b/docs/pages/kcheckbox.vue
index 1ca7edf1a..a64a3d1e8 100644
--- a/docs/pages/kcheckbox.vue
+++ b/docs/pages/kcheckbox.vue
@@ -1,8 +1,10 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>The checkbox is generally used to select one of two possible values in a form.</p>
       <DocsShow>
         <KCheckbox
@@ -18,7 +20,10 @@
       </DocsShow>
     </DocsPageSection>
 
-    <DocsPageSection title="Layout" anchor="#layout">
+    <DocsPageSection
+      title="Layout"
+      anchor="#layout"
+    >
       <ul>
         <li>Aligned with container margin</li>
         <li>When used in a group, vertically stacked</li>
@@ -26,17 +31,27 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Guidelines" anchor="#guidelines">
+    <DocsPageSection
+      title="Guidelines"
+      anchor="#guidelines"
+    >
       <ul>
         <li>Labels should be short and concise</li>
-        <li>Checkbox should not be used to make real-time changes; for this situation, use a <DocsLibraryLink component="KSwitch" /> component instead</li>
+        <li>
+          Checkbox should not be used to make real-time changes; for this situation, use a
+          <DocsLibraryLink component="KSwitch" /> component instead
+        </li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="States" anchor="#states">
+    <DocsPageSection
+      title="States"
+      anchor="#states"
+    >
       <p>The checked state represents an affirmative value.</p>
       <p>
-        Checkboxes can also have a "partially-checked" or "indeterminate" state used in cases where the value is neither true nor false, such as when a subset of a topic is selected:
+        Checkboxes can also have a "partially-checked" or "indeterminate" state used in cases where
+        the value is neither true nor false, such as when a subset of a topic is selected:
       </p>
       <DocsShow>
         <KCheckbox
@@ -47,36 +62,54 @@
         />
       </DocsShow>
       <p>
-        A user cannot enter the indeterminate state by interacting directly with the checkbox; it only occurs due to external interactions.
+        A user cannot enter the indeterminate state by interacting directly with the checkbox; it
+        only occurs due to external interactions.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Example: Label content" anchor="#example-labels">
+    <DocsPageSection
+      title="Example: Label content"
+      anchor="#example-labels"
+    >
       Label content can be passed via the <code>label</code> property:
 
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="html">
         <KCheckbox label="First lesson" />
       </DocsShowCode>
       <!-- eslint-enable -->
       <DocsShow>
-        <KCheckbox label="First lesson" :checked="checked4" @change="checked4 = !checked4" />
+        <KCheckbox
+          label="First lesson"
+          :checked="checked4"
+          @change="checked4 = !checked4"
+        />
       </DocsShow>
 
-      In more complex situations, for example when another component is responsible for rendering the label, the default slot can be used:
+      In more complex situations, for example when another component is responsible for rendering
+      the label, the default slot can be used:
 
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="html">
         <KCheckbox>
-          <KLabeledIcon icon="lesson" label="First lesson" />
+          <KLabeledIcon
+            icon="lesson"
+            label="First lesson"
+          />
         </KCheckbox>
       </DocsShowCode>
       <!-- eslint-enable -->
       <DocsShow>
-        <KCheckbox :checked="checked5" @change="checked5 = !checked5">
-          <KLabeledIcon icon="lesson" label="First lesson" />
+        <KCheckbox
+          :checked="checked5"
+          @change="checked5 = !checked5"
+        >
+          <KLabeledIcon
+            icon="lesson"
+            label="First lesson"
+          />
         </KCheckbox>
       </DocsShow>
 
@@ -84,17 +117,23 @@
         <template #not>
           <p>Don't wrap the default slot's content in <code>&lt;label&gt;</code>:</p>
           <!-- eslint-disable -->
-          <!-- prevent prettier from changing indentation -->
+          <!-- prettier-ignore -->
           <DocsShowCode language="html">
             <KCheckbox>
               <label>
-                <KLabeledIcon icon="lesson" label="First lesson"></KLabeledIcon>
+                <KLabeledIcon
+                  icon="lesson"
+                  label="First lesson"
+                ></KLabeledIcon>
               </label>
             </KCheckbox>
           </DocsShowCode>
           <!-- eslint-enable -->
 
-          <p>That would cause two nested <code>&lt;label&gt;</code> elements to be rendered as <code>KCheckbox</code> takes care of it already.</p>
+          <p>
+            That would cause two nested <code>&lt;label&gt;</code> elements to be rendered as
+            <code>KCheckbox</code> takes care of it already.
+          </p>
         </template>
       </DocsDoNot>
     </DocsPageSection>
diff --git a/docs/pages/kcircularloader.vue b/docs/pages/kcircularloader.vue
index bf6549b5a..053b44bf4 100644
--- a/docs/pages/kcircularloader.vue
+++ b/docs/pages/kcircularloader.vue
@@ -1,20 +1,27 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>
-        Circular loaders illustrate progress by moving an indicator along a circular track.
-      </p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>Circular loaders illustrate progress by moving an indicator along a circular track.</p>
       <DocsShow>
         <KCircularLoader style="margin: 24px" />
       </DocsShow>
 
-      See the <DocsInternalLink href="/loaders" text="loaders page" /> for more information.
-
+      See the
+      <DocsInternalLink
+        href="/loaders"
+        text="loaders page"
+      />
+      for more information.
     </DocsPageSection>
 
-    <DocsPageSection title="Specifications" anchor="#specifications">
+    <DocsPageSection
+      title="Specifications"
+      anchor="#specifications"
+    >
       <ul>
         <li>Dimensions do not exceed 48x48px</li>
         <li>Progress indicator uses palette.grey.v_800</li>
@@ -22,18 +29,34 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Placement" anchor="#placement">
+    <DocsPageSection
+      title="Placement"
+      anchor="#placement"
+    >
       <ul>
         <li>When loading new content, center the loader</li>
         <li>The loader can routinely appear and disappear when indicating a background task</li>
-        <li>Do not break the flow of information or content by placing between items (e.g. list items, content cards, table rows)</li>
+        <li>
+          Do not break the flow of information or content by placing between items (e.g. list items,
+          content cards, table rows)
+        </li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <code>KCircularLoader</code>'s <code>minVisibleTime</code> isn't sufficient when switching between more components, for example as part of <code>v-if/v-else</code> blocks. In such situations, <DocsInternalLink text="useKShow" href="/usekshow" /> may come handy.
+          <code>KCircularLoader</code>'s <code>minVisibleTime</code> isn't sufficient when switching
+          between more components, for example as part of <code>v-if/v-else</code> blocks. In such
+          situations,
+          <DocsInternalLink
+            text="useKShow"
+            href="/usekshow"
+          />
+          may come handy.
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/pages/kdaterange.vue b/docs/pages/kdaterange.vue
index 1b4b7ec2e..395029054 100644
--- a/docs/pages/kdaterange.vue
+++ b/docs/pages/kdaterange.vue
@@ -1,12 +1,20 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
-      The KDateRange is a modal component that contains two input components and a calendar component that 
-      allow for a start and end date selection. 
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      The KDateRange is a modal component that contains two input components and a calendar
+      component that allow for a start and end date selection.
       <div>
-        <KButton text="open demo" :primary="true" appearance="flat-button" :style="{ marginTop: '5px' }" @click="modalShown = true" />
+        <KButton
+          text="open demo"
+          :primary="true"
+          appearance="flat-button"
+          :style="{ marginTop: '5px' }"
+          @click="modalShown = true"
+        />
         <ClientOnly>
           <KDateRange
             v-if="modalShown"
diff --git a/docs/pages/kdropdownmenu.vue b/docs/pages/kdropdownmenu.vue
index b535ef5cb..408c88349 100644
--- a/docs/pages/kdropdownmenu.vue
+++ b/docs/pages/kdropdownmenu.vue
@@ -1,65 +1,66 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Implements a dropdown set of options, based on <DocsExternalLink text="Keen's UI Menu" href="https://josephuspaye.github.io/Keen-UI/#/ui-menu" />. See these docs to understand the current implementation of the options object array.
+        Implements a dropdown set of options, based on
+        <DocsExternalLink
+          text="Keen's UI Menu"
+          href="https://josephuspaye.github.io/Keen-UI/#/ui-menu"
+        />. See these docs to understand the current implementation of the options object array.
       </p>
       <p>
-        Notable possible for configuring the menu include: icons, text, secondary text, and dividers.
+        Notable possible for configuring the menu include: icons, text, secondary text, and
+        dividers.
       </p>
       <p>
-        Please see the <DocsInternalLink href="/buttons#dropdowns" text="Dropdown section of the Buttons and links page" /> on the buttons page for more details about how to use with a button, and a code example.
+        Please see the
+        <DocsInternalLink
+          href="/buttons#dropdowns"
+          text="Dropdown section of the Buttons and links page"
+        />
+        on the buttons page for more details about how to use with a button, and a code example.
       </p>
 
       <h3>Context menu</h3>
 
       <p>
-        This component can be also used to create a context menu, which is a dropdown menu that appears when a user right-clicks on an element.
+        This component can be also used to create a context menu, which is a dropdown menu that
+        appears when a user right-clicks on an element.
       </p>
 
       <DocsShow block>
-        <p>
-          For example, you can right click on this paragraph to see a context menu.
-        </p>
+        <p>For example, you can right click on this paragraph to see a context menu.</p>
         <KDropdownMenu
           isContextMenu
-          :options="[
-            { label: 'Option 1' },
-            { label: 'Option 2' },
-            { label: 'Option 3' },
-          ]"
+          :options="[{ label: 'Option 1' }, { label: 'Option 2' }, { label: 'Option 3' }]"
         />
       </DocsShow>
 
       <DocsShow block>
         <p>
-          Note that just one context menu can be open at a time. If you right-click on this paragraph, any other context menu will close.
+          Note that just one context menu can be open at a time. If you right-click on this
+          paragraph, any other context menu will close.
         </p>
         <KDropdownMenu
           isContextMenu
-          :options="[
-            { label: 'Option 1' },
-            { label: 'Option 2' },
-          ]"
+          :options="[{ label: 'Option 1' }, { label: 'Option 2' }]"
         />
       </DocsShow>
 
       <p>
-        To achieve this, set the <code>isContextMenu</code> prop to true.
-        The context menu will then be attached to the parent element.
+        To achieve this, set the <code>isContextMenu</code> prop to true. The context menu will then
+        be attached to the parent element.
       </p>
       <DocsShowCode language="html">
         <div>
-          <p> ... </p>
+          <p>...</p>
           <KDropdownMenu
             isContextMenu
-            :options="[
-              { label: 'Option 1' },
-              { label: 'Option 2' },
-              { label: 'Option 3' },
-            ]"
+            :options="[{ label: 'Option 1' }, { label: 'Option 2' }, { label: 'Option 3' }]"
           />
         </div>
       </DocsShowCode>
diff --git a/docs/pages/kemptyplaceholder.vue b/docs/pages/kemptyplaceholder.vue
index ee0eb06da..bbb169be4 100644
--- a/docs/pages/kemptyplaceholder.vue
+++ b/docs/pages/kemptyplaceholder.vue
@@ -1,72 +1,60 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        The <code>KEmptyPlaceholder</code> component is used in situations where the value is not applicable ("N/A") or does not exist. It is a wide, light-gray dash, like this: <KEmptyPlaceholder />
+        The <code>KEmptyPlaceholder</code> component is used in situations where the value is not
+        applicable ("N/A") or does not exist. It is a wide, light-gray dash, like this:
+        <KEmptyPlaceholder />
       </p>
       <p>
-        Using the placeholder component is preferred to leaving a empty or blank space because it communicates to the user that a value <em>could</em> possibly exist there, and aids with visual scanning in tables, grids, and lists of data.
+        Using the placeholder component is preferred to leaving a empty or blank space because it
+        communicates to the user that a value <em>could</em> possibly exist there, and aids with
+        visual scanning in tables, grids, and lists of data.
       </p>
     </DocsPageSection>
-    <DocsPageSection title="Example" anchor="#example">
+    <DocsPageSection
+      title="Example"
+      anchor="#example"
+    >
       <p>
-        In the example below, an average score cannot be calculated until the user has attempted at least one exercise:
+        In the example below, an average score cannot be calculated until the user has attempted at
+        least one exercise:
       </p>
       <DocsShow>
         <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>
       </DocsShow>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/kexternallink.vue b/docs/pages/kexternallink.vue
index a4f40c03d..992d36938 100644
--- a/docs/pages/kexternallink.vue
+++ b/docs/pages/kexternallink.vue
@@ -1,44 +1,75 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Creates an <code>&lt;a&gt;</code> tag and is appropriate for links that use server-side routing.
+        Creates an <code>&lt;a&gt;</code> tag and is appropriate for links that use server-side
+        routing.
       </p>
       <DocsShow>
         <p>
-          <KExternalLink text="Link" appearance="basic-link" />
+          <KExternalLink
+            text="Link"
+            appearance="basic-link"
+          />
         </p>
         <p>
-          <KExternalLink text="Link with icon before" appearance="basic-link" icon="person" />
+          <KExternalLink
+            text="Link with icon before"
+            appearance="basic-link"
+            icon="person"
+          />
         </p>
       </DocsShow>
-      <p>
-        and buttons:
-      </p>
+      <p>and buttons:</p>
       <DocsShow>
         <KButtonGroup>
-          <KExternalLink text="Primary" :primary="true" appearance="raised-button" />
-          <KExternalLink text="Primary flat" :primary="true" appearance="flat-button" />
-          <KExternalLink text="Secondary" :primary="false" appearance="raised-button" />
-          <KExternalLink text="Secondary flat" :primary="false" appearance="flat-button" />
+          <KExternalLink
+            text="Primary"
+            :primary="true"
+            appearance="raised-button"
+          />
+          <KExternalLink
+            text="Primary flat"
+            :primary="true"
+            appearance="flat-button"
+          />
+          <KExternalLink
+            text="Secondary"
+            :primary="false"
+            appearance="raised-button"
+          />
+          <KExternalLink
+            text="Secondary flat"
+            :primary="false"
+            appearance="flat-button"
+          />
         </KButtonGroup>
       </DocsShow>
     </DocsPageSection>
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsInternalLink text="Buttons and links" href="/buttons" /> has an overview and usage guidance
+          <DocsInternalLink
+            text="Buttons and links"
+            href="/buttons"
+          />
+          has an overview and usage guidance
         </li>
-        <li><DocsLibraryLink component="KButton" /> and <DocsLibraryLink component="KRouterLink" /> are similar but handle events differently</li>
         <li>
-          <DocsLibraryLink component="KIconButton" /> has a tooltip instead of a text label
+          <DocsLibraryLink component="KButton" /> and
+          <DocsLibraryLink component="KRouterLink" /> are similar but handle events differently
         </li>
+        <li><DocsLibraryLink component="KIconButton" /> has a tooltip instead of a text label</li>
         <li><DocsLibraryLink component="KButtonGroup" /> is used for button layout</li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/kfixedgrid.vue b/docs/pages/kfixedgrid.vue
index bfdea6293..208bfb718 100644
--- a/docs/pages/kfixedgrid.vue
+++ b/docs/pages/kfixedgrid.vue
@@ -1,12 +1,17 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Grid layout with a fixed number of columns. Use with <DocsLibraryLink component="KFixedGridItem" />.
+        Grid layout with a fixed number of columns. Use with
+        <DocsLibraryLink component="KFixedGridItem" />.
       </p>
       <p>
-        For a responsive grid with a variable number of columns based on screen size, see <DocsLibraryLink component="KGrid" /> and <DocsLibraryLink component="KGridItem" />.
+        For a responsive grid with a variable number of columns based on screen size, see
+        <DocsLibraryLink component="KGrid" /> and <DocsLibraryLink component="KGridItem" />.
       </p>
     </DocsPageSection>
   </DocsPageTemplate>
diff --git a/docs/pages/kfixedgriditem.vue b/docs/pages/kfixedgriditem.vue
index 0b4a419fd..a3f32ba7f 100644
--- a/docs/pages/kfixedgriditem.vue
+++ b/docs/pages/kfixedgriditem.vue
@@ -1,12 +1,14 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>For use within <DocsLibraryLink component="KFixedGrid" />.</p>
       <p>
-        For use within <DocsLibraryLink component="KFixedGrid" />.
-      </p>
-      <p>
-        For a responsive grid with a variable number of columns based on screen size, see <DocsLibraryLink component="KGrid" /> and <DocsLibraryLink component="KGridItem" />.
+        For a responsive grid with a variable number of columns based on screen size, see
+        <DocsLibraryLink component="KGrid" /> and <DocsLibraryLink component="KGridItem" />.
       </p>
     </DocsPageSection>
   </DocsPageTemplate>
diff --git a/docs/pages/kfocustrap.vue b/docs/pages/kfocustrap.vue
index ea663f8e2..e121bef1e 100644
--- a/docs/pages/kfocustrap.vue
+++ b/docs/pages/kfocustrap.vue
@@ -1,20 +1,21 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
     <!-- Overview Section -->
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        The <code>KFocusTrap</code> component ensures that keyboard focus is trapped within a specific region of the page. 
+        The <code>KFocusTrap</code> component ensures that keyboard focus is trapped within a
+        specific region of the page.
       </p>
       <p>
-        When the <code>disabled</code> prop is set to <code>true</code>, focus trapping is disabled, allowing normal tab behavior. The focus trap moves the focus between the first and last elements in the slot content.
+        When the <code>disabled</code> prop is set to <code>true</code>, focus trapping is disabled,
+        allowing normal tab behavior. The focus trap moves the focus between the first and last
+        elements in the slot content.
       </p>
-
     </DocsPageSection>
-
-
   </DocsPageTemplate>
 
 </template>
-  
\ No newline at end of file
diff --git a/docs/pages/kgrid.vue b/docs/pages/kgrid.vue
index 48515dcc8..07b8b9fcf 100644
--- a/docs/pages/kgrid.vue
+++ b/docs/pages/kgrid.vue
@@ -1,23 +1,26 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>
-        Grid layout with a dynamic number of columns based on the current window width.
-      </p>
-      <p>
-        The grid will have:
-      </p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>Grid layout with a dynamic number of columns based on the current window width.</p>
+      <p>The grid will have:</p>
       <ul>
         <li>4 columns for small windows (<code>width &lt; 840px</code>)</li>
         <li>8 columns for medium windows (<code>840px &lt;= width &lt; 960px</code>)</li>
         <li>12 columns for large windows (<code>960px &lt;= width</code>)</li>
       </ul>
       <p>
-        Use with <DocsLibraryLink component="KGridItem" />, which accept "layout objects" as props. These layout objects can define values for <code>span</code>, <code>alignment</code>, or both.
+        Use with <DocsLibraryLink component="KGridItem" />, which accept "layout objects" as props.
+        These layout objects can define values for <code>span</code>, <code>alignment</code>, or
+        both.
       </p>
       <p>
-        For a grid with a fixed number of columns, see <DocsLibraryLink component="KFixedGrid" /> and <DocsLibraryLink component="KFixedGridItem" />.
+        For a grid with a fixed number of columns, see
+        <DocsLibraryLink component="KFixedGrid" /> and
+        <DocsLibraryLink component="KFixedGridItem" />.
       </p>
     </DocsPageSection>
   </DocsPageTemplate>
diff --git a/docs/pages/kgriditem.vue b/docs/pages/kgriditem.vue
index 3d758446f..33ceb0e41 100644
--- a/docs/pages/kgriditem.vue
+++ b/docs/pages/kgriditem.vue
@@ -1,21 +1,21 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-
-      <p>
-        For use within <DocsLibraryLink component="KGrid" />.
-      </p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>For use within <DocsLibraryLink component="KGrid" />.</p>
       <p>
-        Layout input objects can define values for <code>span</code>, <code>alignment</code>, or both. They can define different layouts for different screen sizes which is very convenient for quickly building responsive layouts.
+        Layout input objects can define values for <code>span</code>, <code>alignment</code>, or
+        both. They can define different layouts for different screen sizes which is very convenient
+        for quickly building responsive layouts.
       </p>
+      <p>If no span is defined for a particular grid item, it span the full width of the grid.</p>
       <p>
-        If no span is defined for a particular grid item, it span the full width of the grid.
+        If no alignment is defined for a particular layout, the item's contents will be
+        left-aligned.
       </p>
-      <p>
-        If no alignment is defined for a particular layout, the item's contents will be left-aligned.
-      </p>
-
     </DocsPageSection>
   </DocsPageTemplate>
 
diff --git a/docs/pages/kicon.vue b/docs/pages/kicon.vue
index a8621dcce..8eb72b8ed 100644
--- a/docs/pages/kicon.vue
+++ b/docs/pages/kicon.vue
@@ -1,8 +1,18 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      See <DocsInternalLink href="/icons" text="the page on icons" /> for design guidance and a list of available icons. If an invalid icon is used, in development Vue.js validation will warn about the error. The icon will display as a broken image <KIcon icon="brokenImage" /> icon.
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      See
+      <DocsInternalLink
+        href="/icons"
+        text="the page on icons"
+      />
+      for design guidance and a list of available icons. If an invalid icon is used, in development
+      Vue.js validation will warn about the error. The icon will display as a broken image
+      <KIcon icon="brokenImage" /> icon.
     </DocsPageSection>
   </DocsPageTemplate>
 
diff --git a/docs/pages/kiconbutton.vue b/docs/pages/kiconbutton.vue
index ac0013e6a..9fae2d11a 100644
--- a/docs/pages/kiconbutton.vue
+++ b/docs/pages/kiconbutton.vue
@@ -1,34 +1,75 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>
-        Use <DocsLibraryLink component="KIconButton" /> in situations where larger buttons with visible text would hinder the user experience. Use the flat secondary style unless the action should be highlighted.
-      </p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        A tooltip with the name of the action is required for an icon button.
+        Use <DocsLibraryLink component="KIconButton" /> in situations where larger buttons with
+        visible text would hinder the user experience. Use the flat secondary style unless the
+        action should be highlighted.
       </p>
+      <p>A tooltip with the name of the action is required for an icon button.</p>
       <DocsShow>
         <KButtonGroup>
-          <KIconButton tooltip="Add" icon="plus" :primary="true" appearance="raised-button" />
-          <KIconButton tooltip="Subtract" icon="minus" :primary="false" appearance="raised-button" />
-          <KIconButton tooltip="Add" text="Flat button" :primary="true" icon="plus" appearance="flat-button" />
-          <KIconButton tooltip="Subtract" text="Flat button" :primary="false" icon="minus" appearance="flat-button" />
+          <KIconButton
+            tooltip="Add"
+            icon="plus"
+            :primary="true"
+            appearance="raised-button"
+          />
+          <KIconButton
+            tooltip="Subtract"
+            icon="minus"
+            :primary="false"
+            appearance="raised-button"
+          />
+          <KIconButton
+            tooltip="Add"
+            text="Flat button"
+            :primary="true"
+            icon="plus"
+            appearance="flat-button"
+          />
+          <KIconButton
+            tooltip="Subtract"
+            text="Flat button"
+            :primary="false"
+            icon="minus"
+            appearance="flat-button"
+          />
         </KButtonGroup>
       </DocsShow>
     </DocsPageSection>
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsInternalLink text="Buttons and links" href="/buttons" /> has an overview and usage guidance
+          <DocsInternalLink
+            text="Buttons and links"
+            href="/buttons"
+          />
+          has an overview and usage guidance
+        </li>
+        <li>
+          <DocsLibraryLink component="KButton" />, <DocsLibraryLink component="KExternalLink" />,
+          and <DocsLibraryLink component="KRouterLink" /> are all similar but handle events
+          differently
         </li>
-        <li><DocsLibraryLink component="KButton" />, <DocsLibraryLink component="KExternalLink" />, and <DocsLibraryLink component="KRouterLink" /> are all similar but handle events differently</li>
         <li><DocsLibraryLink component="KButtonGroup" /> is used for button layout</li>
-        <li><DocsLibraryLink component="KDropdownMenu" /> and <DocsInternalLink text="Buttons and links" href="/buttons" /> have more detail about adding a menu of options to a button component</li>
+        <li>
+          <DocsLibraryLink component="KDropdownMenu" /> and
+          <DocsInternalLink
+            text="Buttons and links"
+            href="/buttons"
+          />
+          have more detail about adding a menu of options to a button component
+        </li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/kimg.vue b/docs/pages/kimg.vue
index 19f82ecf5..a85b8c788 100644
--- a/docs/pages/kimg.vue
+++ b/docs/pages/kimg.vue
@@ -1,32 +1,52 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p><code>KImg</code> displays an image and provides functionality to manipulate it such as setting its dimensions, aspect ratio, scaling, letterboxing, and more.</p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        <code>KImg</code> displays an image and provides functionality to manipulate it such as
+        setting its dimensions, aspect ratio, scaling, letterboxing, and more.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <p>Unless you set fixed dimensions, <code>KImg</code> is responsive by default.</p>
 
       <p>
-        <em>Note that the majority of settings are applied to the image container rather than the 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>.
+        <em>Note that the majority of settings are applied to the image container rather than the
+          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>.
       </p>
 
       <p>
-        Depending on the scale type and other settings, the image may be letterboxed. When an image is letterboxed, <DocsInternalLink href="/kimg#prop:backgroundColor">
+        Depending on the scale type and other settings, the image may be letterboxed. When an image
+        is letterboxed,
+        <DocsInternalLink href="/kimg#prop:backgroundColor">
           <code>backgroundColor</code>
-        </DocsInternalLink> (gray by default) fills the remaining space.
+        </DocsInternalLink>
+        (gray by default) fills the remaining space.
       </p>
 
-      <p>This is in more detail illustrated in the examples below, where the original image dimensions are 200×114 px.</p>
+      <p>
+        This is in more detail illustrated in the examples below, where the original image
+        dimensions are 200×114 px.
+      </p>
 
       <h3>Rendering within inline and block elements</h3>
 
       <h4>Inline</h4>
 
-      <p>When rendered within an inline element, the image preserves its original dimensions by default.</p>
+      <p>
+        When rendered within an inline element, the image preserves its original dimensions by
+        default.
+      </p>
 
       <DocsShowCode language="html">
         <span>
@@ -45,13 +65,12 @@
         </span>
       </DocsShow>
 
-
       <h4>Block</h4>
 
       <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.
+        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.
       </p>
 
       <DocsShowCode language="html">
@@ -74,7 +93,12 @@
       <h3>Alternative text</h3>
 
       <p>
-        Unless an image is <DocsExternalLink text="decorative" href="https://www.w3.org/WAI/tutorials/images/decorative/" />, you need to provide alternative text via <DocsInternalLink href="/kimg#prop:altText">
+        Unless an image is
+        <DocsExternalLink
+          text="decorative"
+          href="https://www.w3.org/WAI/tutorials/images/decorative/"
+        />, you need to provide alternative text via
+        <DocsInternalLink href="/kimg#prop:altText">
           <code>altText</code>
         </DocsInternalLink>.
       </p>
@@ -87,9 +111,11 @@
       </DocsShowCode>
 
       <p>
-        If it's meant to be decorative, indicate it by using <DocsInternalLink href="/kimg#prop:isDecorative">
+        If it's meant to be decorative, indicate it by using
+        <DocsInternalLink href="/kimg#prop:isDecorative">
           <code>isDecorative</code>
-        </DocsInternalLink>. Alternative text won't be required in this case and the image will be hidden from assistive technologies.
+        </DocsInternalLink>. Alternative text won't be required in this case and the image will be hidden from
+        assistive technologies.
       </p>
 
       <DocsShowCode language="html">
@@ -99,19 +125,21 @@
         />
       </DocsShowCode>
 
-      <h3 id="scaling">
-        Scaling
-      </h3>
+      <h3 id="scaling">Scaling</h3>
 
       <p>
-        The <DocsInternalLink href="/kimg#prop:scaleType">
-          scale type
-        </DocsInternalLink> determines how an image scales within the image container.
+        The <DocsInternalLink href="/kimg#prop:scaleType"> scale type </DocsInternalLink> determines
+        how an image scales within the image container.
       </p>
 
       <h4><code style="font-weight: bold">'centerInside'</code> scale type</h4>
 
-      <p>Scales an image uniformly and maintains its original aspect ratio. Both its width and height are equal to or less than the width and height of the image container. An image can be letterboxed. It's the safest mode as it <em>never distorts an image or impairs its quality.</em></p>
+      <p>
+        Scales an image uniformly and maintains its original aspect ratio. Both its width and height
+        are equal to or less than the width and height of the image container. An image can be
+        letterboxed. It's the safest mode as it
+        <em>never distorts an image or impairs its quality.</em>
+      </p>
 
       <DocsShowCode language="html">
         <div>
@@ -136,7 +164,12 @@
 
       <h4><code style="font-weight: bold">'contain'</code> scale type</h4>
 
-      <p>Behaves similarly to <code>'centerInside'</code> except it ensures that at least one axis of an image fits the image container exactly. The original aspect ratio is maintained. An image can be letterboxed. This mode <em>may impair an image's quality by enlarging it above its original size</em>.</p>
+      <p>
+        Behaves similarly to <code>'centerInside'</code> except it ensures that at least one axis of
+        an image fits the image container exactly. The original aspect ratio is maintained. An image
+        can be letterboxed. This mode
+        <em>may impair an image's quality by enlarging it above its original size</em>.
+      </p>
 
       <DocsShowCode language="html">
         <div>
@@ -161,7 +194,12 @@
 
       <h4><code style="font-weight: bold">'fitXY'</code> scale type</h4>
 
-      <p>Scales X and Y axis of an image independently, so that the image matches the container exactly. An image is never letterboxed. This mode <em>may impair an image's quality by enlarging it above its original size, or distort its aspect ratio.</em></p>
+      <p>
+        Scales X and Y axis of an image independently, so that the image matches the container
+        exactly. An image is never letterboxed. This mode
+        <em>may impair an image's quality by enlarging it above its original size, or distort its
+          aspect ratio.</em>
+      </p>
 
       <DocsShowCode language="html">
         <div>
@@ -187,13 +225,19 @@
       <h3>Aspect ratio</h3>
 
       <p>
-        You can set the aspect ratio of the image container with 
+        You can set the aspect ratio of the image container with
         <DocsInternalLink href="/kimg#prop:aspectRatio">
           <code>aspectRatio</code>
-        </DocsInternalLink> and combine it with any of the scale types.
+        </DocsInternalLink>
+        and combine it with any of the scale types.
       </p>
 
-      <p>Note that the ratio styles calculations need to have the width information, therefore it needs to be available in some way. For example, you can set the width directly on <code>KImg</code>. Alternatively, you could ensure that <code>KImg</code>'s parent element has width by setting it explicitly or by using a block element.</p>
+      <p>
+        Note that the ratio styles calculations need to have the width information, therefore it
+        needs to be available in some way. For example, you can set the width directly on
+        <code>KImg</code>. Alternatively, you could ensure that <code>KImg</code>'s parent element
+        has width by setting it explicitly or by using a block element.
+      </p>
 
       <DocsShowCode language="html">
         <div>
@@ -217,9 +261,14 @@
       <h3>Placeholder area</h3>
 
       <p>
-        The placeholder area is displayed when an image is not available. The area respects the dimensions set on the image container and is gray by default. You can change the area color via <DocsInternalLink href="/kimg#prop:backgroundColor">
+        The placeholder area is displayed when an image is not available. The area respects the
+        dimensions set on the image container and is gray by default. You can change the area color
+        via
+        <DocsInternalLink href="/kimg#prop:backgroundColor">
           <code>backgroundColor</code>
-        </DocsInternalLink> and use the <DocsInternalLink href="/kimg#slot:placeholder">
+        </DocsInternalLink>
+        and use the
+        <DocsInternalLink href="/kimg#slot:placeholder">
           <code>#placeholder</code>
         </DocsInternalLink>
         slot to place content in the area.
@@ -234,7 +283,14 @@
             :style="{ maxWidth: '200px' }"
           >
             <template #placeholder>
-              <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+              <span
+                :style="{
+                  display: 'flex',
+                  height: '100%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }"
+              >
                 <KIcon icon="readSolid" />
               </span>
             </template>
@@ -250,7 +306,14 @@
             :style="{ maxWidth: '200px' }"
           >
             <template #placeholder>
-              <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+              <span
+                :style="{
+                  display: 'flex',
+                  height: '100%',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }"
+              >
                 <KIcon icon="readSolid" />
               </span>
             </template>
@@ -261,15 +324,20 @@
       <h3>Displaying content on top of an image</h3>
 
       <p>
-        Use <DocsInternalLink href="/kimg#slot:topLeft">
+        Use
+        <DocsInternalLink href="/kimg#slot:topLeft">
           <code>#topLeft</code>
-        </DocsInternalLink>, <DocsInternalLink href="/kimg#slot:topRight">
+        </DocsInternalLink>,
+        <DocsInternalLink href="/kimg#slot:topRight">
           <code>#topRight</code>
-        </DocsInternalLink>, <DocsInternalLink href="/kimg#slot:bottomLeft">
+        </DocsInternalLink>,
+        <DocsInternalLink href="/kimg#slot:bottomLeft">
           <code>#bottomLeft</code>
-        </DocsInternalLink>, or <DocsInternalLink href="/kimg#slot:bottomRight">
+        </DocsInternalLink>, or
+        <DocsInternalLink href="/kimg#slot:bottomRight">
           <code>#bottomRight</code>
-        </DocsInternalLink> slots to place content on top of the image container.
+        </DocsInternalLink>
+        slots to place content on top of the image container.
       </p>
 
       <DocsShowCode language="html">
@@ -278,7 +346,14 @@
           altText="A sitting hummingbird"
         >
           <template #topLeft>
-            <span :style="{ display: 'inline-block', margin: '8px', padding: '2px', backgroundColor: 'white' }">
+            <span
+              :style="{
+                display: 'inline-block',
+                margin: '8px',
+                padding: '2px',
+                backgroundColor: 'white',
+              }"
+            >
               Top left
             </span>
           </template>
@@ -290,16 +365,20 @@
           altText="A sitting hummingbird"
         >
           <template #topLeft>
-            <span :style="{ display: 'inline-block', margin: '8px', padding: '2px', backgroundColor: 'white' }">
+            <span
+              :style="{
+                display: 'inline-block',
+                margin: '8px',
+                padding: '2px',
+                backgroundColor: 'white',
+              }"
+            >
               Top left
             </span>
           </template>
         </KImg>
       </DocsShow>
-
-
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/klinearloader.vue b/docs/pages/klinearloader.vue
index 8ceab7685..82fb44375 100644
--- a/docs/pages/klinearloader.vue
+++ b/docs/pages/klinearloader.vue
@@ -1,14 +1,20 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Linear loaders illustrate progress by moving an indicator along a horizontal track. There are two types of linear loaders:
+        Linear loaders illustrate progress by moving an indicator along a horizontal track. There
+        are two types of linear loaders:
       </p>
 
       <ul>
-        <li>Determinate: these loaders show a visual indicator of detectable and measurable progress percentage</li>
+        <li>
+          Determinate: these loaders show a visual indicator of detectable and measurable progress
+          percentage
+        </li>
         <DocsShow>
           <KLinearLoader
             :progress="75"
@@ -17,7 +23,10 @@
             style="width: 400px; margin: 24px"
           />
         </DocsShow>
-        <li>Indeterminate: these loaders show an ongoing process with an unspecified or undetectable percentage completion</li>
+        <li>
+          Indeterminate: these loaders show an ongoing process with an unspecified or undetectable
+          percentage completion
+        </li>
         <DocsShow>
           <KLinearLoader
             :progress="75"
@@ -28,32 +37,38 @@
         </DocsShow>
       </ul>
 
-
-      See the <DocsInternalLink href="/loaders" text="loaders page" /> for more information.
-
+      See the
+      <DocsInternalLink
+        href="/loaders"
+        text="loaders page"
+      />
+      for more information.
     </DocsPageSection>
 
-    <DocsPageSection title="Specifications" anchor="#specifications">
-
+    <DocsPageSection
+      title="Specifications"
+      anchor="#specifications"
+    >
       <ul>
         <li>Progress track uses palette.grey.v_200</li>
         <li>Progress indicator uses palette.grey.v_800</li>
         <li>Progress track height is 4px</li>
         <li>Include a 2px corner radius</li>
-        <li>Remove the corner radius when appended to other components, such as appbars or data tables</li>
+        <li>
+          Remove the corner radius when appended to other components, such as appbars or data tables
+        </li>
       </ul>
-
     </DocsPageSection>
 
-    <DocsPageSection title="Placement" anchor="#placement">
-
+    <DocsPageSection
+      title="Placement"
+      anchor="#placement"
+    >
       <ul>
         <li>Can be attached to existing components such as appbars or table rows</li>
         <li>As a progress bar, should be near task-related metadata</li>
       </ul>
-
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/klistwithoverflow.vue b/docs/pages/klistwithoverflow.vue
index fa7bc5570..c8f895293 100644
--- a/docs/pages/klistwithoverflow.vue
+++ b/docs/pages/klistwithoverflow.vue
@@ -1,20 +1,29 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        The <code>KListWithOverflow</code> component is useful when we want a horizontal list that is responsive and adaptable to the container size. The list only shows the items that fit on the container element. When items exceed the available space, the component seamlessly integrates a "see more" button to show additional items.
+        The <code>KListWithOverflow</code> component is useful when we want a horizontal list that
+        is responsive and adaptable to the container size. The list only shows the items that fit on
+        the container element. When items exceed the available space, the component seamlessly
+        integrates a "see more" button to show additional items.
       </p>
     </DocsPageSection>
-    <DocsPageSection title="Example" anchor="#example">
+    <DocsPageSection
+      title="Example"
+      anchor="#example"
+    >
       <p>
-        When a number of items fit within the screen boundaries, the list will be displayed without any changes. For example, since there are only 3 items here, we can see the entire list without problems.
+        When a number of items fit within the screen boundaries, the list will be displayed without
+        any changes. For example, since there are only 3 items here, we can see the entire list
+        without problems.
       </p>
       <div class="klist-example">
         <DocsShow block>
-          <KListWithOverflow
-            :items="getItems(3)"
-          >
+          <KListWithOverflow :items="getItems(3)">
             <template #item="{ item }">
               <KIconButton
                 :tooltip="item.label"
@@ -29,9 +38,7 @@
                 :primary="false"
               >
                 <template #menu>
-                  <KDropdownMenu
-                    :options="overflowItems"
-                  />
+                  <KDropdownMenu :options="overflowItems" />
                 </template>
               </KIconButton>
             </template>
@@ -39,13 +46,13 @@
         </DocsShow>
       </div>
       <p>
-        But if the list becomes very long, and does not fit within the screen, then the overflowed items will be cut, and an element will be placed to show more. For example, here are 12 items in the list.
+        But if the list becomes very long, and does not fit within the screen, then the overflowed
+        items will be cut, and an element will be placed to show more. For example, here are 12
+        items in the list.
       </p>
       <div class="klist-example">
         <DocsShow block>
-          <KListWithOverflow
-            :items="getItems(12)"
-          >
+          <KListWithOverflow :items="getItems(12)">
             <template #item="{ item }">
               <KIconButton
                 :tooltip="item.label"
@@ -60,23 +67,16 @@
                 :primary="false"
               >
                 <template #menu>
-                  <KDropdownMenu
-                    :options="overflowItems"
-                  />
+                  <KDropdownMenu :options="overflowItems" />
                 </template>
               </KIconButton>
             </template>
           </KListWithOverflow>
         </DocsShow>
       </div>
-      <p>
-        The following is a code example to render the above examples:
-      </p>
+      <p>The following is a code example to render the above examples:</p>
       <DocsShowCode language="html">
-        <KListWithOverflow
-          :items="items"
-        >
-
+        <KListWithOverflow :items="items">
           <template #item="{ item }">
             <KIconButton
               :tooltip="item.label"
@@ -90,16 +90,14 @@
               icon="optionsVertical"
             >
               <template #menu>
-                <KDropdownMenu
-                  :options="overflowItems"
-                />
+                <KDropdownMenu :options="overflowItems" />
               </template>
             </KIconButton>
           </template>
-
         </KListWithOverflow>
       </DocsShowCode>
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -115,14 +113,14 @@
       </DocsShowCode>
       <!-- eslint-enable -->
       <p>
-        You can also use dividers within the list by passing a <code>{ type: "divider" }</code> object, and set a #divider slot.
-        Note that the visible list will not end with a divider. And a divider object will not be passed as a first overflowed item.
+        You can also use dividers within the list by passing a
+        <code>{ type: "divider" }</code> object, and set a #divider slot. Note that the visible list
+        will not end with a divider. And a divider object will not be passed as a first overflowed
+        item.
       </p>
       <div class="klist-example">
         <DocsShow block>
-          <KListWithOverflow
-            :items="getItems(12, 2)"
-          >
+          <KListWithOverflow :items="getItems(12, 2)">
             <template #item="{ item }">
               <KIconButton
                 :tooltip="item.label"
@@ -137,9 +135,7 @@
                 :primary="false"
               >
                 <template #menu>
-                  <KDropdownMenu
-                    :options="overflowItems"
-                  />
+                  <KDropdownMenu :options="overflowItems" />
                 </template>
               </KIconButton>
             </template>
@@ -152,12 +148,11 @@
         </DocsShow>
       </div>
       <p>
-        To use dividers, you can include a divider object in the items list, and add a #divider slot.
+        To use dividers, you can include a divider object in the items list, and add a #divider
+        slot.
       </p>
       <DocsShowCode language="html">
-        <KListWithOverflow
-          :items="items"
-        >
+        <KListWithOverflow :items="items">
           <!-- ... -->
           <template #divider>
             <div class="divider-wrapper">
@@ -167,6 +162,7 @@
         </KListWithOverflow>
       </DocsShowCode>
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -182,7 +178,6 @@
       </DocsShowCode>
       <!-- eslint-enable -->
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
@@ -206,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 c39801023..8ff34c83f 100644
--- a/docs/pages/klogo.vue
+++ b/docs/pages/klogo.vue
@@ -1,11 +1,20 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p><code>KLogo</code> displays the Kolibri logo and provides functionality to manipulate it such as setting its dimensions, color scheme, animation, and background.</p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        <code>KLogo</code> displays the Kolibri logo and provides functionality to manipulate it
+        such as setting its dimensions, color scheme, animation, and background.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <h3>Default display</h3>
       <p>Shows Kolibri logo.</p>
 
@@ -15,10 +24,8 @@
           altText="Kolibri Logo"
           :size="150"
         />
-        <div style="width: 100%; text-align: center; display: none;">
-          <KButton @click="saveSVG('defaultLogoNoBackground')">
-            Save SVG
-          </KButton>
+        <div style="display: none; width: 100%; text-align: center">
+          <KButton @click="saveSVG('defaultLogoNoBackground')"> Save SVG </KButton>
         </div>
       </DocsShow>
       <DocsShowCode language="html">
@@ -38,10 +45,8 @@
           :showBackground="true"
           :size="150"
         />
-        <div style="width: 100%; text-align: center; display: none;">
-          <KButton @click="saveSVG('defaultLogoWithBackground')">
-            Save SVG
-          </KButton>
+        <div style="display: none; width: 100%; text-align: center">
+          <KButton @click="saveSVG('defaultLogoWithBackground')"> Save SVG </KButton>
         </div>
       </DocsShow>
       <DocsShowCode language="html">
@@ -62,10 +67,8 @@
           :showBackground="true"
           :size="150"
         />
-        <div style="width: 100%; text-align: center; display: none;">
-          <KButton @click="saveSVG('defaultLogoWithRectBackground')">
-            Save SVG
-          </KButton>
+        <div style="display: none; width: 100%; text-align: center">
+          <KButton @click="saveSVG('defaultLogoWithRectBackground')"> Save SVG </KButton>
         </div>
       </DocsShow>
       <DocsShowCode language="html">
@@ -96,15 +99,23 @@
       </DocsShowCode>
 
       <h3>Display with different color schemes</h3>
-      <p>Different color schemes can be used - but only with the showBackground prop. Note the transparent lines for the monochrome logos.</p>
+      <p>
+        Different color schemes can be used - but only with the showBackground prop. Note the
+        transparent lines for the monochrome logos.
+      </p>
 
       <DocsShow>
         <template
-          v-for="colorScheme in ['monoBlack', 'monoWhite', 'monoPrimary', 'monoSecondary', 'whiteGrey', 'blackGrey']"
+          v-for="colorScheme in [
+            'monoBlack',
+            'monoWhite',
+            'monoPrimary',
+            'monoSecondary',
+            'whiteGrey',
+            'blackGrey',
+          ]"
         >
-          <p :key="`text${colorScheme}`">
-            Color scheme: {{ colorScheme }}
-          </p>
+          <p :key="`text${colorScheme}`">Color scheme: {{ colorScheme }}</p>
           <KLogo
             :ref="`${colorScheme}LogoWithBackground`"
             :key="colorScheme"
@@ -114,13 +125,11 @@
             :showBackground="true"
             :size="150"
           />
-          <div 
+          <div
             :key="`button${colorScheme}`"
-            style="width: 100%; text-align: center; display: none;"
+            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>
@@ -128,13 +137,19 @@
       <h3>Dimensions</h3>
 
       <p>
-        You can apply the most common dimensions to the image container via the props <DocsInternalLink href="/kimg#prop:size">
+        You can apply the most common dimensions to the image container via the props
+        <DocsInternalLink href="/kimg#prop:size">
           <code>size</code>
-        </DocsInternalLink>, <DocsInternalLink href="/kimg#prop:maxSize">
+        </DocsInternalLink>,
+        <DocsInternalLink href="/kimg#prop:maxSize">
           <code>maxSize</code>
-        </DocsInternalLink>, and <DocsInternalLink href="/kimg#prop:minSize">
+        </DocsInternalLink>, and
+        <DocsInternalLink href="/kimg#prop:minSize">
           <code>minSize</code>
-        </DocsInternalLink>. Values may be either numbers or strings consisting of a numeral and a valid unit. The following units are supported: <code>%, cm, em, ex, ch, in, lh, mm, px, rem, rlh, vh, vw</code>. If you don't provide a unit, <code>px</code> will be used by default.
+        </DocsInternalLink>. Values may be either numbers or strings consisting of a numeral and a valid unit. The
+        following units are supported:
+        <code>%, cm, em, ex, ch, in, lh, mm, px, rem, rlh, vh, vw</code>. If you don't provide a
+        unit, <code>px</code> will be used by default.
       </p>
 
       <DocsShowCode language="html">
@@ -148,13 +163,18 @@
 
       <h3>Alternative text</h3>
 
-      <p>Alternative text (<code>altText</code>) is required for the logo image. When creating it, consider the following:</p>
+      <p>
+        Alternative text (<code>altText</code>) is required for the logo image. When creating it,
+        consider the following:
+      </p>
       <ul>
         <li>If the logo is used as a flat image, you can use the string "Kolibri logo"</li>
-        <li>If the the logo is used as a link, then the alternative text needs to give the context where the link is leading (for example "Go to home page", or similar)</li>
+        <li>
+          If the the logo is used as a link, then the alternative text needs to give the context
+          where the link is leading (for example "Go to home page", or similar)
+        </li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
@@ -202,14 +222,14 @@
 <style scoped>
 
   .halfsquare-background {
-    background-size: 10px 10px; /* size of the squares */
-    background-image: 
-      linear-gradient(45deg, #ffffff 50%, #F5F5F5 50%),
-      linear-gradient(45deg, #F5F5F5 50%, #ffffff 50%);
-    background-position:
-      0 0, /* this is the position of the first pattern */
-      5px 5px; /* this position offsets the second pattern to create the checker effect */
+    background-image: linear-gradient(45deg, #ffffff 50%, #f5f5f5 50%),
+      linear-gradient(45deg, #f5f5f5 50%, #ffffff 50%);
     background-repeat: repeat;
+    background-position:
+      0 0,
+      /* this is the position of the first pattern */ 5px 5px; /* this position offsets the second pattern to create the checker effect */
+
+    background-size: 10px 10px; /* size of the squares */
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/pages/kmodal.vue b/docs/pages/kmodal.vue
index 27c646b60..668c65e2c 100644
--- a/docs/pages/kmodal.vue
+++ b/docs/pages/kmodal.vue
@@ -1,8 +1,15 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      For design guidance, see the page on <DocsInternalLink href="/modals" text="modals" />.
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      For design guidance, see the page on
+      <DocsInternalLink
+        href="/modals"
+        text="modals"
+      />.
     </DocsPageSection>
   </DocsPageTemplate>
 
diff --git a/docs/pages/koptionaltext.vue b/docs/pages/koptionaltext.vue
index 04fed65ca..1e89d86f1 100644
--- a/docs/pages/koptionaltext.vue
+++ b/docs/pages/koptionaltext.vue
@@ -1,17 +1,29 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        The <code>KOptionalText</code> component is a wrapper for <DocsLibraryLink component="KEmptyPlaceholder" /> used in situations where a text can be missing. If the text exists and is not empty, the text will be rendered, if not, a wide, light-gray dash will be rendered, like this: <KEmptyPlaceholder />
+        The <code>KOptionalText</code> component is a wrapper for
+        <DocsLibraryLink component="KEmptyPlaceholder" /> used in situations where a text can be
+        missing. If the text exists and is not empty, the text will be rendered, if not, a wide,
+        light-gray dash will be rendered, like this: <KEmptyPlaceholder />
       </p>
       <p>
-        Using the KOptionalText component is preferred to leaving a empty or blank space because it communicates to the user that a value <em>could</em> possibly exist there, and aids with visual scanning in tables, grids, and lists of data.
+        Using the KOptionalText component is preferred to leaving a empty or blank space because it
+        communicates to the user that a value <em>could</em> possibly exist there, and aids with
+        visual scanning in tables, grids, and lists of data.
       </p>
     </DocsPageSection>
-    <DocsPageSection title="Example using props" anchor="#example-props">
+    <DocsPageSection
+      title="Example using props"
+      anchor="#example-props"
+    >
       <p>
-        In the example below, an average score cannot be calculated until the user has attempted at least one exercise:
+        In the example below, an average score cannot be calculated until the user has attempted at
+        least one exercise:
       </p>
       <DocsShow>
         <table>
@@ -37,7 +49,10 @@
                 <KOptionalText text="11" />
               </td>
               <td class="table-number">
-                <KOptionalText text="9%" :appearanceOverrides="{ color: 'red' }" />
+                <KOptionalText
+                  text="9%"
+                  :appearanceOverrides="{ color: 'red' }"
+                />
               </td>
             </tr>
             <tr>
@@ -59,70 +74,77 @@
                 <KOptionalText text="5" />
               </td>
               <td class="table-number">
-                <KOptionalText text="100%" appearanceOverrides="color: green" />
+                <KOptionalText
+                  text="100%"
+                  appearanceOverrides="color: green"
+                />
               </td>
             </tr>
           </tbody>
         </table>
       </DocsShow>
       <p>
-        For this example, `text` prop is used to pass in the text to be displayed. If the text is empty or undefined, the placeholder will be displayed:
+        For this example, `text` prop is used to pass in the text to be displayed. If the text is
+        empty or undefined, the placeholder will be displayed:
       </p>
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="html">
-    <KOptionalText text="9%" :appearanceOverrides="{ color: 'red' }" />
-    <KOptionalText text="" /> <!-- empty string, show placeholder -->
+        <KOptionalText
+          text="9%"
+          :appearanceOverrides="{ color: 'red' }"
+        />
+        <KOptionalText text="" />
+        <!-- empty string, show placeholder -->
       </DocsShowCode>
       <!-- eslint-enable -->
     </DocsPageSection>
-    <DocsPageSection title="Example using slot" anchor="#example-slot">
+    <DocsPageSection
+      title="Example using slot"
+      anchor="#example-slot"
+    >
       <p>
-        In the example below, it displays user information, highlighting the user's last name, but first and last names are optional:
+        In the example below, it displays user information, highlighting the user's last name, but
+        first and last names are optional:
       </p>
       <DocsShow>
         <ul>
-          <li>
-            <strong>Id:</strong> 1
-          </li>
+          <li><strong>Id:</strong> 1</li>
           <li>
             <strong>Name:&nbsp;</strong>
             <KOptionalText>
               <span> </span>
-              <span style="color: black; background: yellow;"> </span>
+              <span style="color: black; background: yellow"> </span>
             </KOptionalText>
           </li>
           ...
         </ul>
       </DocsShow>
-      <p>
-        An example of a user that has a first and last name:
-      </p>
+      <p>An example of a user that has a first and last name:</p>
       <DocsShow>
         <ul>
-          <li>
-            <strong>Id:</strong> 2
-          </li>
+          <li><strong>Id:</strong> 2</li>
           <li>
             <strong>Name:&nbsp;</strong>
             <KOptionalText>
               <span>Peter</span>
-              <span style="color: black; background: yellow;">Jhonson</span>
+              <span style="color: black; background: yellow">Jhonson</span>
             </KOptionalText>
           </li>
           ...
         </ul>
       </DocsShow>
       <p>
-        For this example, component slot is used to pass in some spans to be displayed. Slots can be used when there is a more complex structure to be displayed.
+        For this example, component slot is used to pass in some spans to be displayed. Slots can be
+        used when there is a more complex structure to be displayed.
       </p>
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="html">
-    <KOptionalText>
-      {{ userExampleName }}
-      {{ userExampleLastName }}
-    </KOptionalText>
+        <KOptionalText>
+          {{ userExampleName }}
+          {{ userExampleLastName }}
+        </KOptionalText>
       </DocsShowCode>
       <!-- eslint-enable -->
     </DocsPageSection>
diff --git a/docs/pages/koverlay.vue b/docs/pages/koverlay.vue
index 6ae4320dd..2cf62054e 100644
--- a/docs/pages/koverlay.vue
+++ b/docs/pages/koverlay.vue
@@ -1,12 +1,31 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>Use <code>KOverlay</code> to move an element from its original place in the DOM to the overlay container element <code>#k-overlay</code> that is inserted to an application's document body automatically <DocsInternalLink href="/installation#install-plugin" text="during the KDS installation process" />. This is often useful for modals, tooltips, dropdowns, or other elements that should appear on top of other content.</p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        Use <code>KOverlay</code> to move an element from its original place in the DOM to the
+        overlay container element <code>#k-overlay</code> that is inserted to an application's
+        document body automatically
+        <DocsInternalLink
+          href="/installation#install-plugin"
+          text="during the KDS installation process"
+        />. This is often useful for modals, tooltips, dropdowns, or other elements that should
+        appear on top of other content.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
-      <p>First, check whether you need <code>KOverlay</code>. Some KDS components already utilize it internally and you only need to instruct them to activate it, typically via the <code>appendToOverlay</code> prop.</p>
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
+      <p>
+        First, check whether you need <code>KOverlay</code>. Some KDS components already utilize it
+        internally and you only need to instruct them to activate it, typically via the
+        <code>appendToOverlay</code> prop.
+      </p>
 
       <p>If you need to use <code>KOverlay</code>, simply wrap an element or a component in it:</p>
 
@@ -17,10 +36,18 @@
       </DocsShowCode>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsInternalLink href="/installation#install-plugin" text="KDS installation step" /> that attaches the overlay container element <code>#k-overlay</code> to an application's document body
+          <DocsInternalLink
+            href="/installation#install-plugin"
+            text="KDS installation step"
+          />
+          that attaches the overlay container element <code>#k-overlay</code> to an application's
+          document body
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/pages/kradiobutton.vue b/docs/pages/kradiobutton.vue
index a9f188332..8edeaef87 100644
--- a/docs/pages/kradiobutton.vue
+++ b/docs/pages/kradiobutton.vue
@@ -1,13 +1,25 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>A radio button is used to make a single selection from a group of options. Radio buttons should be used instead of checkboxes if only one option can be selected.</p>
-
-      <p><code>KRadioButton</code>'s are always be wrapped in <DocsLibraryLink component="KRadioButtonGroup" />.</p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        A radio button is used to make a single selection from a group of options. Radio buttons
+        should be used instead of checkboxes if only one option can be selected.
+      </p>
+
+      <p>
+        <code>KRadioButton</code>'s are always be wrapped in
+        <DocsLibraryLink component="KRadioButtonGroup" />.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <DocsShow>
         <KRadioButtonGroup>
           <KRadioButton
@@ -33,9 +45,7 @@
             truncateLabel
           />
         </KRadioButtonGroup>
-        <p>
-          Current value: {{ exampleValue }}
-        </p>
+        <p>Current value: {{ exampleValue }}</p>
       </DocsShow>
 
       <DocsShowCode language="html">
@@ -67,10 +77,13 @@
 
       <h3>With grid layout</h3>
 
-      <p>It is possible to use radio buttons together with grid layout components such as <DocsLibraryLink component="KGrid" /> or <DocsLibraryLink component="KFixedGrid" />. For example: </p>
+      <p>
+        It is possible to use radio buttons together with grid layout components such as
+        <DocsLibraryLink component="KGrid" /> or <DocsLibraryLink component="KFixedGrid" />. For
+        example:
+      </p>
 
       <DocsShow>
-
         <KRadioButtonGroup>
           <KFixedGrid :numCols="2">
             <KFixedGridItem :span="1">
@@ -102,9 +115,7 @@
           </KFixedGrid>
         </KRadioButtonGroup>
 
-        <p>
-          Current value: {{ exampleValue }}
-        </p>
+        <p>Current value: {{ exampleValue }}</p>
       </DocsShow>
 
       <DocsShowCode language="html">
@@ -141,36 +152,53 @@
       </DocsShowCode>
     </DocsPageSection>
 
-    <DocsPageSection title="Layout" anchor="#layout">
+    <DocsPageSection
+      title="Layout"
+      anchor="#layout"
+    >
       <ul>
         <li>Align with container margin</li>
         <li>Stack vertically in lists</li>
-        <li>
-          Avoid nesting radio buttons
-        </li>
+        <li>Avoid nesting radio buttons</li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Label" anchor="#label">
+    <DocsPageSection
+      title="Label"
+      anchor="#label"
+    >
       <ul>
         <li>Labels should be short and concise</li>
         <li>Labels should be positioned above the radio button group</li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Guidelines" anchor="#guidelines">
+    <DocsPageSection
+      title="Guidelines"
+      anchor="#guidelines"
+    >
       <ul>
-        <li>Always wrap <code>KRadioButton</code> group in <DocsLibraryLink component="KRadioButtonGroup" /></li>
+        <li>
+          Always wrap <code>KRadioButton</code> group in
+          <DocsLibraryLink component="KRadioButtonGroup" />
+        </li>
         <li>There must always be exactly one radio button selected within a group</li>
         <li>If the user is allowed to not select any of the options, provide a "None" option</li>
-        <li>By default, the first radio option is selected, but may be configured to have any option preselected</li>
+        <li>
+          By default, the first radio option is selected, but may be configured to have any option
+          preselected
+        </li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsLibraryLink component="KRadioButtonGroup" /> ensures <code>KRadioButton</code> groups are accessible in all supported browsers.
+          <DocsLibraryLink component="KRadioButtonGroup" /> ensures <code>KRadioButton</code> groups
+          are accessible in all supported browsers.
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/pages/kradiobuttongroup.vue b/docs/pages/kradiobuttongroup.vue
index a3c4fe493..d060ac906 100644
--- a/docs/pages/kradiobuttongroup.vue
+++ b/docs/pages/kradiobuttongroup.vue
@@ -1,13 +1,15 @@
 <template>
 
   <DocsPageTemplate :apiDocs="true">
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Ensures <code>KRadioButton</code> groups are accessible in all supported browsers. Refer to <DocsLibraryLink component="KRadioButton" /> for more.
+        Ensures <code>KRadioButton</code> groups are accessible in all supported browsers. Refer to
+        <DocsLibraryLink component="KRadioButton" /> for more.
       </p>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/krouterlink.vue b/docs/pages/krouterlink.vue
index ac3c1c1d4..4c2497c84 100644
--- a/docs/pages/krouterlink.vue
+++ b/docs/pages/krouterlink.vue
@@ -1,44 +1,85 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Creates a <DocsExternalLink href="https://router.vuejs.org/api/" text="Vue client-side router" /> link. It can take on a number of visual styles, including links:
+        Creates a
+        <DocsExternalLink
+          href="https://router.vuejs.org/api/"
+          text="Vue client-side router"
+        />
+        link. It can take on a number of visual styles, including links:
       </p>
       <DocsShow>
         <p>
-          <KRouterLink :to="{}" text="Link" appearance="basic-link" />
+          <KRouterLink
+            :to="{}"
+            text="Link"
+            appearance="basic-link"
+          />
         </p>
         <p>
-          <KRouterLink :to="{}" text="Link with icon before" appearance="basic-link" icon="person" />
+          <KRouterLink
+            :to="{}"
+            text="Link with icon before"
+            appearance="basic-link"
+            icon="person"
+          />
         </p>
       </DocsShow>
-      <p>
-        and buttons:
-      </p>
+      <p>and buttons:</p>
       <DocsShow>
         <KButtonGroup>
-          <KRouterLink :to="{}" text="Primary" :primary="true" appearance="raised-button" />
-          <KRouterLink :to="{}" text="Primary flat" :primary="true" appearance="flat-button" />
-          <KRouterLink :to="{}" text="Secondary" :primary="false" appearance="raised-button" />
-          <KRouterLink :to="{}" text="Secondary flat" :primary="false" appearance="flat-button" />
+          <KRouterLink
+            :to="{}"
+            text="Primary"
+            :primary="true"
+            appearance="raised-button"
+          />
+          <KRouterLink
+            :to="{}"
+            text="Primary flat"
+            :primary="true"
+            appearance="flat-button"
+          />
+          <KRouterLink
+            :to="{}"
+            text="Secondary"
+            :primary="false"
+            appearance="raised-button"
+          />
+          <KRouterLink
+            :to="{}"
+            text="Secondary flat"
+            :primary="false"
+            appearance="flat-button"
+          />
         </KButtonGroup>
       </DocsShow>
     </DocsPageSection>
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsInternalLink text="Buttons and links" href="/buttons" /> has an overview and usage guidance
+          <DocsInternalLink
+            text="Buttons and links"
+            href="/buttons"
+          />
+          has an overview and usage guidance
         </li>
-        <li><DocsLibraryLink component="KButton" /> and <DocsLibraryLink component="KExternalLink" /> are similar but handle events differently</li>
         <li>
-          <DocsLibraryLink component="KIconButton" /> has a tooltip instead of a text label
+          <DocsLibraryLink component="KButton" /> and
+          <DocsLibraryLink component="KExternalLink" /> are similar but handle events differently
         </li>
+        <li><DocsLibraryLink component="KIconButton" /> has a tooltip instead of a text label</li>
         <li><DocsLibraryLink component="KButtonGroup" /> is used for button layout</li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/kselect.vue b/docs/pages/kselect.vue
index 0395121e6..76d62c153 100644
--- a/docs/pages/kselect.vue
+++ b/docs/pages/kselect.vue
@@ -1,58 +1,85 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <DocsShow>
         <KSelect
           v-model="exampleData"
           :options="options"
           label="Who are you?"
           placeholder="Nobody"
-          style="width:300px;"
+          style="width: 300px"
         />
         <p>Value: {{ exampleData }}</p>
       </DocsShow>
       <p>
-        A select dropdown component that allows users to select an item from a range of options.
-        The options are specified with a value and a label for that value to display to the user.
+        A select dropdown component that allows users to select an item from a range of options. The
+        options are specified with a value and a label for that value to display to the user.
         Additionally, the component can take slots to customize the display of each option.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <p>
-        Select dropdowns are used alongside form components such as text fields and radio selects. They can also be used to filter options in lists and tables.
+        Select dropdowns are used alongside form components such as text fields and radio selects.
+        They can also be used to filter options in lists and tables.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Specifications" anchor="#specifications">
-      <p>
-        Default width:
-      </p>
+    <DocsPageSection
+      title="Specifications"
+      anchor="#specifications"
+    >
+      <p>Default width:</p>
       <ul>
         <li>As a filter for lists and tables: 150px</li>
         <li>In a form: 300px</li>
       </ul>
-      <p>Increase or decrease this width to fit appropriately with other components in forms or filter groups.</p>
-      <p>The select label should be very short and descriptive. Stick to using one word to describe the field, if possible.</p>
+      <p>
+        Increase or decrease this width to fit appropriately with other components in forms or
+        filter groups.
+      </p>
+      <p>
+        The select label should be very short and descriptive. Stick to using one word to describe
+        the field, if possible.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Guidelines" anchor="#guidelines">
+    <DocsPageSection
+      title="Guidelines"
+      anchor="#guidelines"
+    >
       <p>
-        Consider using a select when there are 4 or more options available to select for a field. With fewer options, consider using radios or checkboxes.
+        Consider using a select when there are 4 or more options available to select for a field.
+        With fewer options, consider using radios or checkboxes.
       </p>
       <h3>Forms</h3>
       <p>
-        Sometimes the same select field is used in forms for different variations of an editable object (e.g. the “completion” field of a PDF document vs a video file). If a select option for a particular variation of an editable object is not applicable or will create a confusing or negative user experience, it should be hidden from the select. If all options will create the same adverse experience, the entire select should be hidden from that form.
+        Sometimes the same select field is used in forms for different variations of an editable
+        object (e.g. the “completion” field of a PDF document vs a video file). If a select option
+        for a particular variation of an editable object is not applicable or will create a
+        confusing or negative user experience, it should be hidden from the select. If all options
+        will create the same adverse experience, the entire select should be hidden from that form.
       </p>
       <p>
-        Hiding is better than disabling in this case because there is no condition where it would benefit the user experience to be selectable for that object.
+        Hiding is better than disabling in this case because there is no condition where it would
+        benefit the user experience to be selectable for that object.
       </p>
       <h3>Filters</h3>
-      <p>For design guidance on using selects for filtering, see the <DocsInternalLink href="/filters" text="Filters page" />.</p>
+      <p>
+        For design guidance on using selects for filtering, see the
+        <DocsInternalLink
+          href="/filters"
+          text="Filters page"
+        />.
+      </p>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/kswitch.vue b/docs/pages/kswitch.vue
index 20f0d12c6..c6051e1e3 100644
--- a/docs/pages/kswitch.vue
+++ b/docs/pages/kswitch.vue
@@ -1,8 +1,10 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <DocsShow>
         <KSwitch
           v-model="exampleData"
@@ -11,17 +13,21 @@
         <p>Value: {{ exampleData }}</p>
       </DocsShow>
       <p>
-        A switch toggle is used to select and execute an action instantly, in real time. A switch is toggled successfully when the switch thumb slides to the other side of the track upon click or press.
+        A switch toggle is used to select and execute an action instantly, in real time. A switch is
+        toggled successfully when the switch thumb slides to the other side of the track upon click
+        or press.
       </p>
       <p>
-        For selections that require a confirmation to execute and are housed in a form, use <DocsLibraryLink component="KCheckbox" /> component instead.
+        For selections that require a confirmation to execute and are housed in a form, use
+        <DocsLibraryLink component="KCheckbox" /> component instead.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
-      <p>
-        Use a switch for the following:
-      </p>
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
+      <p>Use a switch for the following:</p>
       <ul>
         <li>When an instant response is required without final confirmation</li>
         <li>Actions that do not need a formal review</li>
@@ -29,28 +35,50 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Specifications" anchor="#specifications">
+    <DocsPageSection
+      title="Specifications"
+      anchor="#specifications"
+    >
       <ul>
         <li>
           Thumb ON color:
-          <DocsInternalLink code text="brand.primary.v_500" href="/colors#brand-primary-v_500" />
+          <DocsInternalLink
+            code
+            text="brand.primary.v_500"
+            href="/colors#brand-primary-v_500"
+          />
         </li>
         <li>
           Track ON color:
-          <DocsInternalLink code text="brand.primary.v_200" href="/colors#brand-primary-v_200" />
+          <DocsInternalLink
+            code
+            text="brand.primary.v_200"
+            href="/colors#brand-primary-v_200"
+          />
         </li>
         <li>
           Thumb OFF color:
-          <DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
+          <DocsInternalLink
+            code
+            text="palette.grey.v_100"
+            href="/colors#palette-grey-v_100"
+          />
         </li>
         <li>
           Track OFF color:
-          <DocsInternalLink code text="palette.grey.v_300" href="/colors#palette-grey-v_300" />
+          <DocsInternalLink
+            code
+            text="palette.grey.v_300"
+            href="/colors#palette-grey-v_300"
+          />
         </li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Guidelines" anchor="#guidelines">
+    <DocsPageSection
+      title="Guidelines"
+      anchor="#guidelines"
+    >
       <ul>
         <li>Align a switch with the container margin</li>
         <li>Align a switch to the right of the text label</li>
@@ -58,7 +86,6 @@
         <li>Switch text labels Labels should concisely describe the action to be executed</li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index 831535b15..b42347117 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -1,24 +1,33 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        The <code>KTable</code> component is an accessible and customizable table component designed to handle a variety of data presentation needs. The component is suitable for both simple and complex data tables. It offers:
-        <ul>
-          <li>Offers built-in sorting by default</li>
-          <li>Integrates with already sorted data</li>
-          <li>Keyboard navigation</li>
-          <li>Dynamic column resizing</li>
-          <li>Sticky headers</li>
-        </ul>
+        The <code>KTable</code> component is an accessible and customizable table component designed
+        to handle a variety of data presentation needs. The component is suitable for both simple
+        and complex data tables. It offers:
       </p>
+      <ul>
+        <li>Offers built-in sorting by default</li>
+        <li>Integrates with already sorted data</li>
+        <li>Keyboard navigation</li>
+        <li>Dynamic column resizing</li>
+        <li>Sticky headers</li>
+      </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <!--Non-Sortable Table-->
       <h3>Table without sorting functionality</h3>
       <p>
-        This is an example to show how <code>KTable</code> can be used without any sorting functionality, as a simple table. 
+        This is an example to show how <code>KTable</code> can be used without any sorting
+        functionality, as a simple table.
       </p>
 
       <DocsShowCode language="html">
@@ -27,10 +36,10 @@
           :rows="rows"
           caption="Non Sortable Table"
         />
-
       </DocsShowCode>
 
       <!-- eslint-disable-->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -63,10 +72,15 @@
       <!-- Frontend Sorting Example-->
       <h3>Table with sorting</h3>
       <p>
-        The <code>KTable</code> offers built-in sorting functionality. There are 4 permissible data types - <code>string</code>,<code>number</code>,<code>date</code> and <code>undefined</code>. Columns declared with <code>undefined</code> data type are not sortable. This example demonstrates a table with sorting enabled via the <code>sortable</code> prop.
+        The <code>KTable</code> offers built-in sorting functionality. There are 4 permissible data
+        types - <code>string</code>,<code>number</code>,<code>date</code> and
+        <code>undefined</code>. Columns declared with <code>undefined</code> data type are not
+        sortable. This example demonstrates a table with sorting enabled via the
+        <code>sortable</code> prop.
       </p>
       <p>
-        Clicking the same header multiple times toggles the sort direction cyclically in the order of ascending, descending, and unsorted.
+        Clicking the same header multiple times toggles the sort direction cyclically in the order
+        of ascending, descending, and unsorted.
       </p>
 
       <DocsShowCode language="html">
@@ -76,10 +90,10 @@
           caption="Table with built-in sorting"
           sortable
         />
-
       </DocsShowCode>
 
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -113,7 +127,9 @@
       <!--Table showing use of slots-->
       <h3>Table showing use of slots</h3>
       <p>
-        This is an example to show how slots can be used in <code>KTable</code>. The table currently provides slots for <code>header</code> and <code>cell</code> which can be used to customize the table header and cell content respectively.
+        This is an example to show how slots can be used in <code>KTable</code>. The table currently
+        provides slots for <code>header</code> and <code>cell</code> which can be used to customize
+        the table header and cell content respectively.
       </p>
 
       <!-- eslint-disable -->
@@ -135,6 +151,7 @@
         </KTable>
       </DocsShowCode>
 
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -177,7 +194,11 @@
       <!--Table with custom column widths-->
       <h3>Table with custom column widths</h3>
       <p>
-        This is an example to show how <code>KTable</code> can be used with custom column widths. The column widths are defined in the <code>headers</code> prop. The <code>width</code> property is used to define the overall width of the column. The <code>minWidth</code> defines the minimum width of column, below which the column will not shrink.
+        This is an example to show how <code>KTable</code> can be used with custom column widths.
+        The column widths are defined in the <code>headers</code> prop. The
+        <code>width</code> property is used to define the overall width of the column. The
+        <code>minWidth</code> defines the minimum width of column, below which the column will not
+        shrink.
       </p>
 
       <!-- eslint-disable -->
@@ -190,6 +211,7 @@
         />
       </DocsShowCode>
 
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -235,15 +257,21 @@
       <!--Table with default sort-->
       <h3>Table with default sort</h3>
       <p>
-        This is an example to show how to use the <code>defaultSort</code> prop to sort the table based on a particular column upon the initial load. The <code>defaultSort</code> attribute can be used irrespective of the <code>sortable</code> attribute.
+        This is an example to show how to use the <code>defaultSort</code> prop to sort the table
+        based on a particular column upon the initial load. The <code>defaultSort</code> attribute
+        can be used irrespective of the <code>sortable</code> attribute.
       </p>
 
       <p>
-        The <code>defaultSort</code> attribute takes an object with two properties - <code>columnId</code> and <code>direction</code>. The <code>columnId</code> is the unique identifier of the column based on which the table should be sorted. The <code>direction</code> can be either <code>asc</code> or <code>desc</code>.
+        The <code>defaultSort</code> attribute takes an object with two properties -
+        <code>columnId</code> and <code>direction</code>. The <code>columnId</code> is the unique
+        identifier of the column based on which the table should be sorted. The
+        <code>direction</code> can be either <code>asc</code> or <code>desc</code>.
       </p>
 
       <p>
-        To make use of <code>defaultSort</code>, please ensure that the <code>disableBuiltinSorting</code> attribute is not set to <code>true</code>.
+        To make use of <code>defaultSort</code>, please ensure that the
+        <code>disableBuiltinSorting</code> attribute is not set to <code>true</code>.
       </p>
 
       <DocsShowCode language="html">
@@ -257,7 +285,7 @@
         />
 
         <h4>Unsortable table with rows sorted by 'Age' column</h4>
-        <KTable 
+        <KTable
           :headers="headers"
           :rows="rows"
           caption="Unsortable Table with Rows Sorted by 'Age' Column"
@@ -266,6 +294,7 @@
       </DocsShowCode>
 
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -309,11 +338,20 @@
       <!-- Disable built-in sorting -->
       <h3>Disable built-in sorting</h3>
       <p>
-        For <code>sortable</code> tables, you can use the <code>disableBuiltinSorting</code> prop to disable built-in sort function. This is useful when the table receives already sorted data, for example when sorting is done by backend or a custom sorting function outside the table. In this case, when one of the header sort buttons is clicked, the table won't sort the column itself, but only emit the <code>changeSort</code> event to notify the parent component to handle the sorting logic. The event contains column index of the header and the sort order in its payload.
+        For <code>sortable</code> tables, you can use the <code>disableBuiltinSorting</code> prop to
+        disable built-in sort function. This is useful when the table receives already sorted data,
+        for example when sorting is done by backend or a custom sorting function outside the table.
+        In this case, when one of the header sort buttons is clicked, the table won't sort the
+        column itself, but only emit the <code>changeSort</code> event to notify the parent
+        component to handle the sorting logic. The event contains column index of the header and the
+        sort order in its payload.
       </p>
 
       <p>
-        You should not use this attribute if <code>sortable</code> is set to <code>false</code>. If <code>sortable</code> is set to <code>true</code>, then the table component will emit a <code>changeSort</code> event with column index of the header clicked and the sort order to notify the parent component to handle the sorting logic. 
+        You should not use this attribute if <code>sortable</code> is set to <code>false</code>. If
+        <code>sortable</code> is set to <code>true</code>, then the table component will emit a
+        <code>changeSort</code> event with column index of the header clicked and the sort order to
+        notify the parent component to handle the sorting logic.
       </p>
 
       <DocsShowCode language="html">
@@ -328,6 +366,7 @@
       </DocsShowCode>
 
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -364,9 +403,7 @@
           @changeSort="changeSortHandler"
         />
       </DocsShow>
-
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
@@ -433,6 +470,7 @@
     },
     methods: {
       changeSortHandler(index, sortOrder) {
+        // eslint-disable-next-line no-console
         console.log(`changeSort event emitted with index: ${index} and sortOrder: ${sortOrder}`);
       },
     },
diff --git a/docs/pages/ktabs.vue b/docs/pages/ktabs.vue
index 3cec22a28..f809f5782 100644
--- a/docs/pages/ktabs.vue
+++ b/docs/pages/ktabs.vue
@@ -1,7 +1,10 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>Displays tabs:</p>
 
       <DocsShow>
@@ -10,25 +13,32 @@
           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>
 
-      <p>This component is the most straightforward way to implement tabs. Its usage is recommended whenever possible.</p>
+      <p>
+        This component is the most straightforward way to implement tabs. Its usage is recommended
+        whenever possible.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Basic usage" anchor="#basic-usage">
-      <p>Tab panels' content is passed via slots named by corresponding tabs' IDs from objects of the <code>tabs</code> array.</p>
-
-      <p>Each tabbed interface needs to have <code>ariaLabel</code> or <code>ariaLabelledBy</code> and also an identifier, <code>tabsID</code>, that is unique in regard to a page where tabs are rendered.</p>
+    <DocsPageSection
+      title="Basic usage"
+      anchor="#basic-usage"
+    >
+      <p>
+        Tab panels' content is passed via slots named by corresponding tabs' IDs from objects of the
+        <code>tabs</code> array.
+      </p>
+
+      <p>
+        Each tabbed interface needs to have <code>ariaLabel</code> or
+        <code>ariaLabelledBy</code> and also an identifier, <code>tabsID</code>, that is unique in
+        regard to a page where tabs are rendered.
+      </p>
 
       <DocsShowCode language="html">
         <KTabs
@@ -36,20 +46,14 @@
           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>
 
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -64,13 +68,22 @@
       <!-- eslint-enable -->
     </DocsPageSection>
 
-    <DocsPageSection title="With router" anchor="#with-router">
-      <p>When implementing tabs with the router, it's the router view rather than <code>KTabs</code> that is responsible for displaying the active tab content.</p>
+    <DocsPageSection
+      title="With router"
+      anchor="#with-router"
+    >
+      <p>
+        When implementing tabs with the router, it's the router view rather than
+        <code>KTabs</code> that is responsible for displaying the active tab content.
+      </p>
 
-      <p>In such a case, define <code>to</code> property with a router link object as its value in objects of the <code>tabs</code> array:</p>
+      <p>
+        In such a case, define <code>to</code> property with a router link object as its value in
+        objects of the <code>tabs</code> array:
+      </p>
 
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         data() {
           return {
@@ -84,7 +97,10 @@
       </DocsShowCode>
       <!-- eslint-enable -->
 
-      <p>Then, tabs will be rendered as router links and you can use the router view to display the active tab content:</p>
+      <p>
+        Then, tabs will be rendered as router links and you can use the router view to display the
+        active tab content:
+      </p>
 
       <DocsShowCode language="html">
         <KTabs
@@ -96,16 +112,23 @@
         </KTabs>
       </DocsShowCode>
 
-      <p>Note that here, tabs content is not passed to <code>KTabs</code> via named slots, for it's the router view that's responsible for rendering it.</p> 
+      <p>
+        Note that here, tabs content is not passed to <code>KTabs</code> via named slots, for it's
+        the router view that's responsible for rendering it.
+      </p>
 
-      <p>However, it is still required to wrap the active tab content in <code>KTabs</code>. Otherwise, even though tabs may seem to function correctly at first glance, accessibility would be broken.</p>
+      <p>
+        However, it is still required to wrap the active tab content in <code>KTabs</code>.
+        Otherwise, even though tabs may seem to function correctly at first glance, accessibility
+        would be broken.
+      </p>
 
       <DocsDoNot>
         <template #not>
           <DocsShowCode language="html">
             <KTabs
               tabsId="coachReportsTabs"
-              ariaLabel="Coach reports"  
+              ariaLabel="Coach reports"
               :tabs="tabs"
             />
             <!-- the active tab content is displayed in this router view -->
@@ -132,8 +155,15 @@
       </DocsDoNot>
     </DocsPageSection>
 
-    <DocsPageSection title="More tabs on a page" anchor="#more-tabs-on-a-page">
-      <p>When there are two or more tabbed interfaces on one page, it is important to identify each one of them with an ID unique in regard to the page. Otherwise, some a11y features may break.</p>
+    <DocsPageSection
+      title="More tabs on a page"
+      anchor="#more-tabs-on-a-page"
+    >
+      <p>
+        When there are two or more tabbed interfaces on one page, it is important to identify each
+        one of them with an ID unique in regard to the page. Otherwise, some a11y features may
+        break.
+      </p>
 
       <p>This is achieved by providing a unique value to <code>tabsId</code> property:</p>
 
@@ -143,20 +173,44 @@
       </DocsShowCode>
     </DocsPageSection>
 
-    <DocsPageSection title="Appearance" anchor="#appearance">
-      <p>There are several ways to adjust tabs styling. You can refer to the props and slots overview below and also to <DocsInternalLink text="KTabsList: Appearance" href="/ktabslist#appearance" /> to see examples as <DocsLibraryLink component="KTabsList" /> accepts exactly the same styling props and slots.</p>
+    <DocsPageSection
+      title="Appearance"
+      anchor="#appearance"
+    >
+      <p>
+        There are several ways to adjust tabs styling. You can refer to the props and slots overview
+        below and also to
+        <DocsInternalLink
+          text="KTabsList: Appearance"
+          href="/ktabslist#appearance"
+        />
+        to see examples as <DocsLibraryLink component="KTabsList" /> accepts exactly the same
+        styling props and slots.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsInternalLink text="Tabs page" href="/tabs" /> has an overview and usage guidance for all tab-related components
+          <DocsInternalLink
+            text="Tabs page"
+            href="/tabs"
+          />
+          has an overview and usage guidance for all tab-related components
         </li>
         <li>
-          <DocsLibraryLink component="KTabsList" /> and <DocsLibraryLink component="KTabsPanel" /> present an alternative way to implement tabs
+          <DocsLibraryLink component="KTabsList" /> and
+          <DocsLibraryLink component="KTabsPanel" /> present an alternative way to implement tabs
         </li>
         <li>
-          <DocsInternalLink text="KTabsList: Appearance" href="/ktabslist#appearance" /> contains examples of tabs styling that apply to <code>KTabs</code>as well
+          <DocsInternalLink
+            text="KTabsList: Appearance"
+            href="/ktabslist#appearance"
+          />
+          contains examples of tabs styling that apply to <code>KTabs</code>as well
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/pages/ktabslist.vue b/docs/pages/ktabslist.vue
index 3aa3d22f9..62e04a701 100644
--- a/docs/pages/ktabslist.vue
+++ b/docs/pages/ktabslist.vue
@@ -1,8 +1,10 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>Displays the tab list of a tabbed interface:</p>
 
       <DocsShow language="html">
@@ -18,13 +20,34 @@
         />
       </DocsShow>
 
-      <p><code>KTabsList</code> is meant to be used together with <DocsLibraryLink component="KTabsPanel" />, which displays tabs' content. Using these two components is recommended in situations when <DocsLibraryLink component="KTabs" /> is not sufficient, for example, when a tab list is rendered within a different component than tab panels.</p>
+      <p>
+        <code>KTabsList</code> is meant to be used together with
+        <DocsLibraryLink component="KTabsPanel" />, which displays tabs' content. Using these two
+        components is recommended in situations when <DocsLibraryLink component="KTabs" /> is not
+        sufficient, for example, when a tab list is rendered within a different component than tab
+        panels.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Basic usage" anchor="#basic-usage">
-      <p>Tab list items are rendered as buttons. Tab panels' content is passed via <DocsLibraryLink component="KTabsPanel" /> slots named by corresponding tabs' IDs from objects of the <code>tabs</code> array. The component takes care of displaying only content corresponding to the active tab.</p>
-
-      <p>Each tabbed interface needs to have <code>ariaLabel</code> or <code>ariaLabelledBy</code> and also an identifier, <code>tabsID</code>, that is unique in regard to a page where tabs are rendered. Another purpose of <code>tabsId</code> is to link <code>KTabsList</code> and <DocsLibraryLink component="KTabsPanel" /> representing a single tabbed interface. These two components also need to share information about the currently active tab stored in <code>activeTabId</code>.</p>
+    <DocsPageSection
+      title="Basic usage"
+      anchor="#basic-usage"
+    >
+      <p>
+        Tab list items are rendered as buttons. Tab panels' content is passed via
+        <DocsLibraryLink component="KTabsPanel" /> slots named by corresponding tabs' IDs from
+        objects of the <code>tabs</code> array. The component takes care of displaying only content
+        corresponding to the active tab.
+      </p>
+
+      <p>
+        Each tabbed interface needs to have <code>ariaLabel</code> or
+        <code>ariaLabelledBy</code> and also an identifier, <code>tabsID</code>, that is unique in
+        regard to a page where tabs are rendered. Another purpose of <code>tabsId</code> is to link
+        <code>KTabsList</code> and <DocsLibraryLink component="KTabsPanel" /> representing a single
+        tabbed interface. These two components also need to share information about the currently
+        active tab stored in <code>activeTabId</code>.
+      </p>
 
       <DocsShowCode language="html">
         <AppBar>
@@ -40,62 +63,55 @@
           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>
 
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
-        data() {
-          return {
-            activeTabId: 'tabLessons',
-            tabs: [
-              { id: 'tabLessons', label: 'Lessons' },
-              { id: 'tabLearners', label: 'Learners' },
-              { id: 'tabGroups', label: 'Groups' },
-            ],
-          };
-        },
+        data() { return { activeTabId: 'tabLessons', tabs: [ { id: 'tabLessons', label: 'Lessons' },
+        { id: 'tabLearners', label: 'Learners' }, { id: 'tabGroups', label: 'Groups' }, ], }; },
       </DocsShowCode>
       <!-- eslint-enable -->
     </DocsPageSection>
 
-    <DocsPageSection title="With router" anchor="#with-router">
-      <p>When implementing tabs with the router, it's the router view rather than <DocsLibraryLink component="KTabsPanel" /> that is responsible for displaying the active tab content.</p>
-
-      <p>In such a case, define <code>to</code> property with a router link object as its value in objects of the <code>tabs</code> array:</p>
+    <DocsPageSection
+      title="With router"
+      anchor="#with-router"
+    >
+      <p>
+        When implementing tabs with the router, it's the router view rather than
+        <DocsLibraryLink component="KTabsPanel" /> that is responsible for displaying the active tab
+        content.
+      </p>
+
+      <p>
+        In such a case, define <code>to</code> property with a router link object as its value in
+        objects of the <code>tabs</code> array:
+      </p>
 
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
-        data() {
-          return {
-            tabs: [
-              { id: 'tabLessons', label: 'Lessons', to: { path: '/lessons' } },
-              { id: 'tabLearners', label: 'Learners', to: { path: '/learners' } },
-              { id: 'tabGroups', label: 'Groups', to: { path: '/groups' } },
-            ],
-          };
-        },
+        data() { return { tabs: [ { id: 'tabLessons', label: 'Lessons', to: { path: '/lessons' } },
+        { id: 'tabLearners', label: 'Learners', to: { path: '/learners' } }, { id: 'tabGroups',
+        label: 'Groups', to: { path: '/groups' } }, ], }; },
       </DocsShowCode>
       <!-- eslint-enable -->
 
-      <p>Then, tabs will be rendered as router links and you can use the router view to display the active tab content:</p>
+      <p>
+        Then, tabs will be rendered as router links and you can use the router view to display the
+        active tab content:
+      </p>
 
       <DocsShowCode language="html">
         <AppBar>
           <KTabsList
             v-model="activeTabId"
-            tabsId="coachReportsTabs"  
+            tabsId="coachReportsTabs"
             ariaLabel="Coach reports"
             :tabs="tabs"
           />
@@ -109,9 +125,16 @@
         </KTabsPanel>
       </DocsShowCode>
 
-      <p>Note that here, tabs content is not passed to <DocsLibraryLink component="KTabsPanel" /> via named slots, for it's the router view that's responsible for rendering it.</p> 
+      <p>
+        Note that here, tabs content is not passed to <DocsLibraryLink component="KTabsPanel" /> via
+        named slots, for it's the router view that's responsible for rendering it.
+      </p>
 
-      <p>However, it is still required to wrap the active tab content in <DocsLibraryLink component="KTabsPanel" />. Otherwise, even though tabs may seem to function correctly at first glance, accessibility would be broken.</p>
+      <p>
+        However, it is still required to wrap the active tab content in
+        <DocsLibraryLink component="KTabsPanel" />. Otherwise, even though tabs may seem to function
+        correctly at first glance, accessibility would be broken.
+      </p>
 
       <DocsDoNot>
         <template #not>
@@ -132,7 +155,10 @@
             <!-- the active tab content is displayed in this router view -->
             <router-view />
           </DocsShowCode>
-          <p>Place the router view outside of <DocsLibraryLink component="KTabsPanel" /> or forget to use <DocsLibraryLink component="KTabsPanel" /> altogether</p>
+          <p>
+            Place the router view outside of <DocsLibraryLink component="KTabsPanel" /> or forget to
+            use <DocsLibraryLink component="KTabsPanel" /> altogether
+          </p>
         </template>
 
         <template #do>
@@ -159,8 +185,15 @@
       </DocsDoNot>
     </DocsPageSection>
 
-    <DocsPageSection title="More tabs on a page" anchor="#more-tabs-on-a-page">
-      <p>When there are two or more tabbed interfaces on one page, it is important to identify each one of them with an ID unique in regard to the page. Otherwise, some a11y features may break.</p>
+    <DocsPageSection
+      title="More tabs on a page"
+      anchor="#more-tabs-on-a-page"
+    >
+      <p>
+        When there are two or more tabbed interfaces on one page, it is important to identify each
+        one of them with an ID unique in regard to the page. Otherwise, some a11y features may
+        break.
+      </p>
 
       <p>This is achieved by providing a unique value to <code>tabsId</code> property:</p>
 
@@ -173,12 +206,18 @@
       </DocsShowCode>
     </DocsPageSection>
 
-    <DocsPageSection title="Appearance" anchor="#appearance">
+    <DocsPageSection
+      title="Appearance"
+      anchor="#appearance"
+    >
       <p>There are several ways to adjust tabs styling.</p>
 
       <p>Using props is the most straightforward:</p>
 
-      <DocsShow language="html" dark>
+      <DocsShow
+        language="html"
+        dark
+      >
         <KTabsList
           v-model="ex2activeTabId"
           tabsId="tabsProps"
@@ -208,7 +247,12 @@
         />
       </DocsShowCode>
 
-      <p>When that's not sufficient, <code>appearanceOverrides</code> and <code>appearanceOverridesActive</code> can be used, where the former complements or overrides styles common to all tabs and the latter contains styles specific to an active tab:</p>
+      <p>
+        When that's not sufficient, <code>appearanceOverrides</code> and
+        <code>appearanceOverridesActive</code> can be used, where the former complements or
+        overrides styles common to all tabs and the latter contains styles specific to an active
+        tab:
+      </p>
 
       <DocsShow language="html">
         <KTabsList
@@ -218,13 +262,13 @@
           :tabs="tabs"
           :appearanceOverrides="{
             ':hover': {
-              color: $themeTokens.primary
+              color: $themeTokens.primary,
             },
             textTransform: 'none',
-            margin: '0 32px'
+            margin: '0 32px',
           }"
           :appearanceOverridesActive="{
-            borderBottomWidth: '6px'
+            borderBottomWidth: '6px',
           }"
         />
         <KTabsPanel
@@ -241,18 +285,22 @@
           :tabs="tabs"
           :appearanceOverrides="{
             ':hover': {
-              color: $themeTokens.primary
+              color: $themeTokens.primary,
             },
             textTransform: 'none',
-            margin: '0 32px'
+            margin: '0 32px',
           }"
           :appearanceOverridesActive="{
-            borderBottomWidth: '6px'
+            borderBottomWidth: '6px',
           }"
         />
       </DocsShowCode>
 
-      <p>Lastly, the <code>tab</code> slot can be used to adjust labels, for example to add icons. It's a scoped slot that exposes <code>tab</code> object and <code>isActive</code> boolean value:</p> 
+      <p>
+        Lastly, the <code>tab</code> slot can be used to adjust labels, for example to add icons.
+        It's a scoped slot that exposes <code>tab</code> object and <code>isActive</code> boolean
+        value:
+      </p>
 
       <DocsShow language="html">
         <KTabsList
@@ -293,26 +341,30 @@
       </DocsShowCode>
 
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
-        icons: {
-          tabLessons: 'lesson',
-          tabLearners: 'person',
-          tabGroups: 'people',
-        },
+        icons: { tabLessons: 'lesson', tabLearners: 'person', tabGroups: 'people', },
       </DocsShowCode>
       <!-- eslint-enable -->
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsInternalLink text="Tabs page" href="/tabs" /> has an overview and usage guidance for all tab-related components
+          <DocsInternalLink
+            text="Tabs page"
+            href="/tabs"
+          />
+          has an overview and usage guidance for all tab-related components
         </li>
-        <li><DocsLibraryLink component="KTabsPanel" /> is a component to be used together with <code>KTabsList</code></li>
         <li>
-          <DocsLibraryLink component="KTabs" /> is an alternative way to implement tabs
+          <DocsLibraryLink component="KTabsPanel" /> is a component to be used together with
+          <code>KTabsList</code>
         </li>
+        <li><DocsLibraryLink component="KTabs" /> is an alternative way to implement tabs</li>
       </ul>
     </DocsPageSection>
   </DocsPageTemplate>
diff --git a/docs/pages/ktabspanel.vue b/docs/pages/ktabspanel.vue
index fdc2ce03c..277fd0573 100644
--- a/docs/pages/ktabspanel.vue
+++ b/docs/pages/ktabspanel.vue
@@ -1,19 +1,35 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>A part of a tabbed interface that displays content associated with the active tab. It is meant to be used together with <DocsLibraryLink component="KTabsList" />. Please study <DocsLibraryLink component="KTabsList" /> page to understand how to use <code>KTabsPanel</code>.</p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        A part of a tabbed interface that displays content associated with the active tab. It is
+        meant to be used together with <DocsLibraryLink component="KTabsList" />. Please study
+        <DocsLibraryLink component="KTabsList" /> page to understand how to use
+        <code>KTabsPanel</code>.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsInternalLink text="Tabs page" href="/tabs" /> has an overview and usage guidance for all tab-related components
+          <DocsInternalLink
+            text="Tabs page"
+            href="/tabs"
+          />
+          has an overview and usage guidance for all tab-related components
         </li>
-        <li><DocsLibraryLink component="KTabsList" /> is a component to be used together with <code>KTabsPanel</code> and contains detailed guidance on using both these components</li>
         <li>
-          <DocsLibraryLink component="KTabs" /> is an alternative way to implement tabs
+          <DocsLibraryLink component="KTabsList" /> is a component to be used together with
+          <code>KTabsPanel</code> and contains detailed guidance on using both these components
         </li>
+        <li><DocsLibraryLink component="KTabs" /> is an alternative way to implement tabs</li>
       </ul>
     </DocsPageSection>
   </DocsPageTemplate>
diff --git a/docs/pages/ktextbox.vue b/docs/pages/ktextbox.vue
index c0aa96e6b..ce61361cb 100644
--- a/docs/pages/ktextbox.vue
+++ b/docs/pages/ktextbox.vue
@@ -1,18 +1,30 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      For detailed design guidance, refer to the page on <DocsInternalLink href="/textfields" text="text fields" />.
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      For detailed design guidance, refer to the page on
+      <DocsInternalLink
+        href="/textfields"
+        text="text fields"
+      />.
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <h3>Input with label</h3>
       <KTextbox label="Input with label" />
       <DocsShowCode language="html">
         <KTextbox label="Input with label" />
       </DocsShowCode>
-      <p>This text box includes a visible label, providing clear guidance and context to the user about the expected input.</p>
-
+      <p>
+        This text box includes a visible label, providing clear guidance and context to the user
+        about the expected input.
+      </p>
 
       <h3>Valid and invalid input</h3>
 
@@ -32,44 +44,65 @@
         />
       </DocsShowCode>
 
-
-      <p>This text box only accepts numeric input. If any non-numeric character is entered, it will be considered invalid.</p>
+      <p>
+        This text box only accepts numeric input. If any non-numeric character is entered, it will
+        be considered invalid.
+      </p>
 
       <h3>Disabled input</h3>
-      <KTextbox label="Disabled input" disabled />
+      <KTextbox
+        label="Disabled input"
+        disabled
+      />
       <DocsShowCode language="html">
-        <KTextbox label="Disabled input" disabled />
+        <KTextbox
+          label="Disabled input"
+          disabled
+        />
       </DocsShowCode>
-      <p>This text box is disabled. It cannot be edited or focused, so it will be skipped during keyboard navigation.</p>
-
+      <p>
+        This text box is disabled. It cannot be edited or focused, so it will be skipped during
+        keyboard navigation.
+      </p>
 
       <h3>Number input</h3>
-      <KTextbox label="Number input" type="number" :min="0" :max="100" />
+      <KTextbox
+        label="Number input"
+        type="number"
+        :min="0"
+        :max="100"
+      />
 
       <DocsShowCode language="html">
-
-        <KTextbox label="Number Input" type="number" :min="0" :max="100" />
-
+        <KTextbox
+          label="Number Input"
+          type="number"
+          :min="0"
+          :max="100"
+        />
       </DocsShowCode>
 
       <p>
         This is a numeric input field where users can input values within the range of 0 to 100.
       </p>
       <p>
-        <strong>Note:</strong> The KTextbox does not automatically validate the min and max values, however, it is recommended to use them for accessibility purposes while using the invalid and invalidText props to handle validation as needed.
+        <strong>Note:</strong> The KTextbox does not automatically validate the min and max values,
+        however, it is recommended to use them for accessibility purposes while using the invalid
+        and invalidText props to handle validation as needed.
       </p>
 
-
       <h3>Text area</h3>
-      <KTextbox label="Text area" :textArea="true" />
+      <KTextbox
+        label="Text area"
+        :textArea="true"
+      />
       <DocsShowCode language="html">
-
-        <KTextbox label="Text area" :textArea="true" />
-
+        <KTextbox
+          label="Text area"
+          :textArea="true"
+        />
       </DocsShowCode>
       <p>This is a multi-line text input area, suitable for longer text entries.</p>
-
-
     </DocsPageSection>
   </DocsPageTemplate>
 
diff --git a/docs/pages/ktexttruncator.vue b/docs/pages/ktexttruncator.vue
index 82751e2ca..5a61e4493 100644
--- a/docs/pages/ktexttruncator.vue
+++ b/docs/pages/ktexttruncator.vue
@@ -1,18 +1,20 @@
 <template>
 
   <DocsPageTemplate :apiDocs="true">
-
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>
-        Truncates the text to a certain number of lines and adds an ellipsis character "…".
-      </p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>Truncates the text to a certain number of lines and adds an ellipsis character "…".</p>
       <DocsShow>
         <p>
-          <KTextTruncator text="This is a long text that will be truncated to two line. This is a long text that will be truncated to two line. This is a long text that will be truncated to two line. This is a long text that will be truncated to two line. This is a long text that will be truncated to two line." :maxLines="2" />
+          <KTextTruncator
+            text="This is a long text that will be truncated to two line. This is a long text that will be truncated to two line. This is a long text that will be truncated to two line. This is a long text that will be truncated to two line. This is a long text that will be truncated to two line."
+            :maxLines="2"
+          />
         </p>
       </DocsShow>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/ktransition.vue b/docs/pages/ktransition.vue
index 8c5d2dde5..d1e1ad691 100644
--- a/docs/pages/ktransition.vue
+++ b/docs/pages/ktransition.vue
@@ -1,51 +1,89 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>Exposes predefined set of transitions built on top of Vue's <code>&lt;transition&gt;</code>.</p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        Exposes predefined set of transitions built on top of Vue's <code>&lt;transition&gt;</code>.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <ul>
-        <li>Don't forget to define <code>key</code> on child elements of <code>KTransition</code> as described <DocsExternalLink text="in Vue documentation" href="https://v2.vuejs.org/v2/guide/transitions#Transitioning-Between-Elements" />.</li>
+        <li>
+          Don't forget to define <code>key</code> on child elements of <code>KTransition</code> as
+          described
+          <DocsExternalLink
+            text="in Vue documentation"
+            href="https://v2.vuejs.org/v2/guide/transitions#Transitioning-Between-Elements"
+          />.
+        </li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Available transitions" anchor="#overview">
+    <DocsPageSection
+      title="Available transitions"
+      anchor="#overview"
+    >
       <section>
         <h3><code>component-fade-out-in</code></h3>
         <p>Suitable when switching between two elements/components.</p>
 
         <DocsShowCode language="html">
           <KTransition kind="component-fade-out-in">
-            <div v-if="isTruthy" key="key-1">
+            <div
+              v-if="isTruthy"
+              key="key-1"
+            >
               First component
             </div>
-            <div v-else key="key-2">
+            <div
+              v-else
+              key="key-2"
+            >
               Second component
             </div>
           </KTransition>
         </DocsShowCode>
 
         <p>Output:</p>
-        <DocsShow block language="html">
+        <DocsShow
+          block
+          language="html"
+        >
           <KTransition kind="component-fade-out-in">
-            <div v-if="isTruthy" key="key-1">
+            <div
+              v-if="isTruthy"
+              key="key-1"
+            >
               First component
             </div>
-            <div v-else key="key-2">
+            <div
+              v-else
+              key="key-2"
+            >
               Second component
             </div>
           </KTransition>
         </DocsShow>
       </section>
-
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsExternalLink text="Vue's transitions documentation" href="https://v2.vuejs.org/v2/guide/transitions" />
+          <DocsExternalLink
+            text="Vue's transitions documentation"
+            href="https://v2.vuejs.org/v2/guide/transitions"
+          />
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/pages/layout/index.vue b/docs/pages/layout/index.vue
index 264498573..b889c8309 100644
--- a/docs/pages/layout/index.vue
+++ b/docs/pages/layout/index.vue
@@ -1,63 +1,112 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>The goal of good layout is legibility - to aid the user in quickly identifying what they need on the page. This is achieved through effective use of white space, graphics, typography, and visual separators.</p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        The goal of good layout is legibility - to aid the user in quickly identifying what they
+        need on the page. This is achieved through effective use of white space, graphics,
+        typography, and visual separators.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Spacing" anchor="#spacing">
+    <DocsPageSection
+      title="Spacing"
+      anchor="#spacing"
+    >
       <p>
-        To aid with alignment, all UI elements should be spaced out in increments of <code>8px</code>. On smaller screens or in more compact spaces, the increment can be reduced to <code>4px</code>. All margin and padding measurements should be incremented by these units.
+        To aid with alignment, all UI elements should be spaced out in increments of
+        <code>8px</code>. On smaller screens or in more compact spaces, the increment can be reduced
+        to <code>4px</code>. All margin and padding measurements should be incremented by these
+        units.
       </p>
       <p>
-        Similarly, define <DocsExternalLink href="https://material.io/design/layout/spacing-methods.html#spacing" text="keylines" /> in increments of <code>4px</code> or <code>8px</code> when UI elements must be placed outside of the alignment to columns and rows within a grid.
+        Similarly, define
+        <DocsExternalLink
+          href="https://material.io/design/layout/spacing-methods.html#spacing"
+          text="keylines"
+        />
+        in increments of <code>4px</code> or <code>8px</code> when UI elements must be placed
+        outside of the alignment to columns and rows within a grid.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Page containers" anchor="#page-containers">
-      <p>
-        A page container is a shape used to represent an enclosed area. Page containers can hold various UI elements such as an image, icon, or surface. They can be flexible and accommodate the width or height of the content within, or they can be rigid and fixed in size.
-      </p>
-      <p>
-        Page containers can be implemented using <DocsInternalLink text="KPageContainer" href="/kpagecontainer" code /> which includes responsive internal padding that automatically gets smaller on smaller windows. Containers and their contents can be arranged using <DocsInternalLink text="KGrid" href="/kgrid" code /> or <DocsInternalLink text="KFixedGrid" href="/kfixedgrid" code />, described below.
+    <DocsPageSection
+      title="Page containers"
+      anchor="#page-containers"
+    >
+      <p>
+        A page container is a shape used to represent an enclosed area. Page containers can hold
+        various UI elements such as an image, icon, or surface. They can be flexible and accommodate
+        the width or height of the content within, or they can be rigid and fixed in size.
+      </p>
+      <p>
+        Page containers can be implemented using
+        <DocsInternalLink
+          text="KPageContainer"
+          href="/kpagecontainer"
+          code
+        />
+        which includes responsive internal padding that automatically gets smaller on smaller
+        windows. Containers and their contents can be arranged using
+        <DocsInternalLink
+          text="KGrid"
+          href="/kgrid"
+          code
+        />
+        or
+        <DocsInternalLink
+          text="KFixedGrid"
+          href="/kfixedgrid"
+          code
+        />, described below.
       </p>
       <p>To reduce visual noise, avoid nesting containers in containers.</p>
-      <img src="./containers.png">
-      <h3>
-        Maximum width
-      </h3>
+      <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 aid readability on larger screens. Extra space should be allocated equally on both sides such that the page container is centered.
+        If a page container contains text, set its maximum width to <code>1000px</code> in order to
+        aid readability on larger screens. Extra space should be allocated equally on both sides
+        such that the page container is centered.
       </p>
 
-      <h3>
-        Dividers
-      </h3>
+      <h3>Dividers</h3>
       <p>
-        Use dividers to create visual distinction between sections within a page container. A divider should span the entire width of a container and be <code>1px</code> high with color <DocsInternalLink code text="tokens.fineline" href="/colors#tokens-fineLine" />.
+        Use dividers to create visual distinction between sections within a page container. A
+        divider should span the entire width of a container and be <code>1px</code> high with color
+        <DocsInternalLink
+          code
+          text="tokens.fineline"
+          href="/colors#tokens-fineLine"
+        />.
       </p>
       <p>
-        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.
+        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.
+        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.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Responsiveness" anchor="#responsiveness">
+    <DocsPageSection
+      title="Responsiveness"
+      anchor="#responsiveness"
+    >
       <p>
-        There are three primary breakpoints in the design system that should suffice to design and build responsive layouts in the majority of cases. These are:
+        There are three primary breakpoints in the design system that should suffice to design and
+        build responsive layouts in the majority of cases. These are:
       </p>
       <ul>
         <li>Small: <code>width &lt; 600px</code></li>
         <li>Medium: <code>600px &lt; width &lt; 840px</code></li>
         <li>Large: <code>840px &lt; width</code></li>
       </ul>
-      <p>
-        If more granularity is necessary there are additional breakpoints defined:
-      </p>
+      <p>If more granularity is necessary there are additional breakpoints defined:</p>
       <ul>
         <li>Level 0: <code>&lt; 480px</code></li>
         <li>Level 1: <code>&lt; 600px</code></li>
@@ -69,30 +118,52 @@
         <li>Level 7: <code>&gt;= 1600px</code></li>
       </ul>
       <p>
-        Responsive layouts in the design system are built using reactive JavaScript state in Vue components rather than CSS media queries. This is done using <DocsLibraryLink component="useKResponsiveWindow" /> when reactive window's size information is needed or <DocsLibraryLink component="KResponsiveElement" /> when reactive component's size information is needed.
+        Responsive layouts in the design system are built using reactive JavaScript state in Vue
+        components rather than CSS media queries. This is done using
+        <DocsLibraryLink component="useKResponsiveWindow" /> when reactive window's size information
+        is needed or <DocsLibraryLink component="KResponsiveElement" /> when reactive component's
+        size information is needed.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Grid system" anchor="#grid-system">
+    <DocsPageSection
+      title="Grid system"
+      anchor="#grid-system"
+    >
       <p>
-        Grids allow UI components to adapt to screen sizes and orientations and ensure consistent, visually-appealing layouts both within a particular page and across different pages. Our grid system gives designers and engineers a shared vocabulary for communicating about page page layouts and how they adapt to variations in content and screen sizes.
+        Grids allow UI components to adapt to screen sizes and orientations and ensure consistent,
+        visually-appealing layouts both within a particular page and across different pages. Our
+        grid system gives designers and engineers a shared vocabulary for communicating about page
+        page layouts and how they adapt to variations in content and screen sizes.
       </p>
       <p>
-        The design conventions and Vue components provided by the design system work well together, but both can also be used on their own: Designs specified using the grid system do not need to be implemented using grid components, and grid components can be used even when not explicitly specified in the designs.
+        The design conventions and Vue components provided by the design system work well together,
+        but both can also be used on their own: Designs specified using the grid system do not need
+        to be implemented using grid components, and grid components can be used even when not
+        explicitly specified in the designs.
       </p>
       <p>
-        That said, when designers use grid system conventions and engineers use grid system components we can more easily:
+        That said, when designers use grid system conventions and engineers use grid system
+        components we can more easily:
       </p>
       <ul>
         <li>Align elements on the page to aid readability and improve aesthetics</li>
-        <li>Design and build responsive behaviors which are robust to changes in content and screen size</li>
+        <li>
+          Design and build responsive behaviors which are robust to changes in content and screen
+          size
+        </li>
       </ul>
       <p>
-        Like many aspects of our design system, the grid system draws heavily from Material's <DocsExternalLink href="https://material.io/design/layout/responsive-layout-grid.html#" text="Responsive layout grid" />. Some of the illustrations below are also copied from the Material site.
+        Like many aspects of our design system, the grid system draws heavily from Material's
+        <DocsExternalLink
+          href="https://material.io/design/layout/responsive-layout-grid.html#"
+          text="Responsive layout grid"
+        />. Some of the illustrations below are also copied from the Material site.
       </p>
       <h3>Key concepts</h3>
       <p>
-        Four key concepts form the basis of our grid system. Explicitly using these concepts in designs will help translate layouts to implementation:
+        Four key concepts form the basis of our grid system. Explicitly using these concepts in
+        designs will help translate layouts to implementation:
       </p>
       <ol>
         <li><strong>Columns</strong> define boundaries for horizontal alignment</li>
@@ -101,26 +172,46 @@
         <li><strong>Grid items</strong> hold content in blocks that span some number of columns</li>
       </ol>
       <p>
-        <strong>Columns</strong>, <strong>gutters</strong>, and <strong>margins</strong> are defined the same as in Material Design:
+        <strong>Columns</strong>, <strong>gutters</strong>, and <strong>margins</strong> are defined
+        the same as in Material Design:
       </p>
-      <img src="./concepts.png" width="800px">
+      <img
+        src="./concepts.png"
+        width="800px"
+      >
       <p>
-        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:
+        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 <DocsExternalLink text="same concept from CSS grids" href="https://www.w3schools.com/css/css_grid_item.asp" />. Grid items represent a group of content that should expand and contract together as sizes and contents change. Below, there is a single-column grid item on the far left. Inside 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:
+        <strong>Grid items</strong> are a concept specific to Kolibri's grid system, based loosely
+        on the
+        <DocsExternalLink
+          text="same concept from CSS grids"
+          href="https://www.w3schools.com/css/css_grid_item.asp"
+        />. Grid items represent a group of content that should expand and contract together as
+        sizes and contents change. Below, there is a single-column grid item on the far left. Inside
+        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 trickier, sometimes requiring nesting grids.
+        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
+        trickier, sometimes requiring nesting grids.
       </p>
 
-      <h3>
-        Breakpoints
-      </h3>
+      <h3>Breakpoints</h3>
       <p>
-        The total number of columns on the page constrains the maximum width of the grid items. To ensure reasonable behaviors at all screen sizes, our grid system defines different layouts for different screen sizes corresponding to the responsiveness <DocsInternalLink text="breakpoints defined above" href="#responsiveness" />. Each breakpoint range has default number of columns, gutter width, margin, and padding. These defaults can be changed if necessary.
+        The total number of columns on the page constrains the maximum width of the grid items. To
+        ensure reasonable behaviors at all screen sizes, our grid system defines different layouts
+        for different screen sizes corresponding to the responsiveness
+        <DocsInternalLink
+          text="breakpoints defined above"
+          href="#responsiveness"
+        />. Each breakpoint range has default number of columns, gutter width, margin, and padding.
+        These defaults can be changed if necessary.
       </p>
       <ul>
         <li>Small windows have four columns with <code>16px</code> gutters</li>
@@ -128,17 +219,37 @@
         <li>Large windows have twelve columns with <code>24px</code> gutters</li>
       </ul>
       <p>
-        Note that we also use <DocsExternalLink href="https://v15.vuetifyjs.com/en/framework/grid" text="Vuetify" /> in Studio, and those breakpoints are slightly different.
+        Note that we also use
+        <DocsExternalLink
+          href="https://v15.vuetifyjs.com/en/framework/grid"
+          text="Vuetify"
+        />
+        in Studio, and those breakpoints are slightly different.
       </p>
 
-      <h3>
-        Responsive grids
-      </h3>
-      <p>
-        The <DocsInternalLink text="KGrid" href="/kgrid" code /> and <DocsInternalLink text="KGridItem" href="/kgriditem" code /> components implement grid containers and items with responsiveness built in. <code>KGrid</code> automatically changes the total number of columns based on window size, and <code>KGridItem</code> allows specifying column spans and text alignment for each of the three window size ranges.
-      </p>
-      <p>
-        For example, a common pattern in Kolibri is to have a button right-aligned at the top of a page alongside the header on large windows, but on medium and small windows to move the button underneath the header and left-align it. To do this with the responsive grid:
+      <h3>Responsive grids</h3>
+      <p>
+        The
+        <DocsInternalLink
+          text="KGrid"
+          href="/kgrid"
+          code
+        />
+        and
+        <DocsInternalLink
+          text="KGridItem"
+          href="/kgriditem"
+          code
+        />
+        components implement grid containers and items with responsiveness built in.
+        <code>KGrid</code> automatically changes the total number of columns based on window size,
+        and <code>KGridItem</code> allows specifying column spans and text alignment for each of the
+        three window size ranges.
+      </p>
+      <p>
+        For example, a common pattern in Kolibri is to have a button right-aligned at the top of a
+        page alongside the header on large windows, but on medium and small windows to move the
+        button underneath the header and left-align it. To do this with the responsive grid:
       </p>
       <DocsShowCode language="html">
         <KGrid>
@@ -146,20 +257,27 @@
             <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
           </KGridItem>
           <KGridItem :layout12="{ span: 3, alignment: 'right' }">
-            <KButton text="Button" primary />
+            <KButton
+              text="Button"
+              primary
+            />
           </KGridItem>
         </KGrid>
       </DocsShowCode>
 
       <p>
-        Each grid item is described by layout objects which can contain a column <code>span</code> and default text <code>alignment</code>. When no additional layout information is provided, the <code>span</code> defaults to the total number of columns (i.e. full-width), and <code>alignment</code> defaults to <code>'right'</code>.
-      </p>
-      <p>
-        In the code above, we leave the defaults for <code>layout4</code> and <code>layout8</code> breakpoints. For large-screen, twelve-column layouts however we specify that the header grid item should span 9 columns and the button grid item should span 3 and be right-aligned.
+        Each grid item is described by layout objects which can contain a column
+        <code>span</code> and default text <code>alignment</code>. When no additional layout
+        information is provided, the <code>span</code> defaults to the total number of columns (i.e.
+        full-width), and <code>alignment</code> defaults to <code>'right'</code>.
       </p>
       <p>
-        Try resizing the browser to see the behavior:
+        In the code above, we leave the defaults for <code>layout4</code> and
+        <code>layout8</code> breakpoints. For large-screen, twelve-column layouts however we specify
+        that the header grid item should span 9 columns and the button grid item should span 3 and
+        be right-aligned.
       </p>
+      <p>Try resizing the browser to see the behavior:</p>
       <DocsShow>
         <KGrid>
           <KGridItem :layout12="{ span: 9 }">
@@ -175,34 +293,46 @@
         </KGrid>
       </DocsShow>
       <p>
-        Note that an additional complexity not shown in the example above is that conditional styling sometimes needs to be applied using <code>useKResponsiveWindow</code> properties. See the source code of this page for details.
+        Note that an additional complexity not shown in the example above is that conditional
+        styling sometimes needs to be applied using <code>useKResponsiveWindow</code> properties.
+        See the source code of this page for details.
       </p>
       <p>
-        Also note that grid containers have a <code>debug</code> property that will show helpful visual information about columns and grid items when set to <code>true</code>.
+        Also note that grid containers have a <code>debug</code> property that will show helpful
+        visual information about columns and grid items when set to <code>true</code>.
       </p>
-      <h3>
-        Fixed grids
-      </h3>
+      <h3>Fixed grids</h3>
       <p>
-        There are some situations where it is not desirable to have the number of columns vary dynamically with screen size. In these situations you can use the The <DocsInternalLink text="KFixedGrid" href="/kfixedgrid" code /> and <DocsInternalLink text="KFixedGridItem" href="/kfixedgriditem" code /> components. <code>KFixedGrid</code> has a <code>numCols</code> property to set the number of columns, and <code>KFixedGridItem</code> takes simple <code>span</code> and <code>alignment</code> properties rather than the layout objects.
+        There are some situations where it is not desirable to have the number of columns vary
+        dynamically with screen size. In these situations you can use the The
+        <DocsInternalLink
+          text="KFixedGrid"
+          href="/kfixedgrid"
+          code
+        />
+        and
+        <DocsInternalLink
+          text="KFixedGridItem"
+          href="/kfixedgriditem"
+          code
+        />
+        components. <code>KFixedGrid</code> has a <code>numCols</code> property to set the number of
+        columns, and <code>KFixedGridItem</code> takes simple <code>span</code> and
+        <code>alignment</code> properties rather than the layout objects.
       </p>
-      <h3>
-        Nested grids
-      </h3>
+      <h3>Nested grids</h3>
       <p>
-        A page can contain nested grids. A container component can exist on a grid and also have its own grid that its contained components can lie on. This can be valuable for handling complex layouts.
+        A page can contain nested grids. A container component can exist on a grid and also have its
+        own grid that its contained components can lie on. This can be valuable for handling complex
+        layouts.
       </p>
+      <p>The example shown above would probably need to be implemented using nested grids:</p>
+      <img src="./nested2.png" >
       <p>
-        The example shown above would probably need to be implemented using nested grids:
+        Here it might make sense to make the outer grid responsive, and implement the inner page
+        containers or cards with fixed grids.
       </p>
-      <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.
-      </p>
-
     </DocsPageSection>
-
-
   </DocsPageTemplate>
 
 </template>
@@ -219,4 +349,4 @@
     },
   };
 
-</script>
\ No newline at end of file
+</script>
diff --git a/docs/pages/loaders/index.vue b/docs/pages/loaders/index.vue
index ce6fef5f6..c50fa0d14 100644
--- a/docs/pages/loaders/index.vue
+++ b/docs/pages/loaders/index.vue
@@ -1,20 +1,25 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Loading indicators are used to convey to the user that they will need to wait some time for a software- or hardware-related operation to complete. They can be used to convey a range of ongoing processes, including network, disk and CPU operations.
+        Loading indicators are used to convey to the user that they will need to wait some time for
+        a software- or hardware-related operation to complete. They can be used to convey a range of
+        ongoing processes, including network, disk and CPU operations.
       </p>
       <p>
         Generally, loading indicators should be used if the wait period is longer than a second.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Using linear loaders" anchor="#linearloaders">
-      <p>
-        Use linear loaders for the following:
-      </p>
+    <DocsPageSection
+      title="Using linear loaders"
+      anchor="#linearloaders"
+    >
+      <p>Use linear loaders for the following:</p>
       <ul>
         <li>Loading initial page content</li>
         <li>Representing the progress of a measurable task</li>
@@ -23,36 +28,39 @@
 
     <DocsDoNot>
       <template #do>
-        <img src="../loaders/topbar.png" style="max-width:400px;">
-        <p>
-          Append linear loaders to appbars to load page content
-        </p>
+        <img
+          src="../loaders/topbar.png"
+          style="max-width: 400px"
+        >
+        <p>Append linear loaders to appbars to load page content</p>
       </template>
     </DocsDoNot>
 
     <DocsDoNot>
       <template #do>
-        <img src="../loaders/tasks.png" style="max-width:400px;">
-        <p>
-          Place linear loaders near information related to the task being measured
-        </p>
+        <img
+          src="../loaders/tasks.png"
+          style="max-width: 400px"
+        >
+        <p>Place linear loaders near information related to the task being measured</p>
       </template>
     </DocsDoNot>
 
     <DocsDoNot>
       <template #do>
-        <img src="../loaders/tables.png" style="max-width:400px;">
-        <p>
-          Append linear loaders to data tables
-        </p>
+        <img
+          src="../loaders/tables.png"
+          style="max-width: 400px"
+        >
+        <p>Append linear loaders to data tables</p>
       </template>
     </DocsDoNot>
 
-
-    <DocsPageSection title="Using circular loaders" anchor="#circularloaders">
-      <p>
-        Use circular loaders for the following:
-      </p>
+    <DocsPageSection
+      title="Using circular loaders"
+      anchor="#circularloaders"
+    >
+      <p>Use circular loaders for the following:</p>
       <ul>
         <li>Loading learning content renderers</li>
         <li>Indicating the presence of a working background task</li>
@@ -63,22 +71,23 @@
 
     <DocsDoNot>
       <template #do>
-        <img src="../loaders/loading-more.png" style="max-width:400px;">
-        <p>
-          Place below existing content to indicate where new content appears
-        </p>
+        <img
+          src="../loaders/loading-more.png"
+          style="max-width: 400px"
+        >
+        <p>Place below existing content to indicate where new content appears</p>
       </template>
     </DocsDoNot>
 
     <DocsDoNot>
       <template #do>
-        <img src="../loaders/centering.png" style="max-width:400px;">
-        <p>
-          Center circular loaders when loading new information
-        </p>
+        <img
+          src="../loaders/centering.png"
+          style="max-width: 400px"
+        >
+        <p>Center circular loaders when loading new information</p>
       </template>
     </DocsDoNot>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/menus/index.vue b/docs/pages/menus/index.vue
index 3d38ac218..e0d52236a 100644
--- a/docs/pages/menus/index.vue
+++ b/docs/pages/menus/index.vue
@@ -1,31 +1,46 @@
 <template>
 
   <DocsPageTemplate>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        Menus allow users to make a selection from a list of options. We use two types of menus:
+        <em>Dropdown</em> and <em>Filter</em>.
+      </p>
 
-    <DocsPageSection title="Overview" anchor="#overview">
-
-      <p>Menus allow users to make a selection from a list of options. We use two types of menus: <em>Dropdown</em> and <em>Filter</em>.</p>
-
-      <h3>
-        Dropdown menu
-      </h3>
+      <h3>Dropdown menu</h3>
       <p>
-        Allow users to discover and access complex actions. They can be generated from buttons, icons, and in some cases by right-clicking a location.
+        Allow users to discover and access complex actions. They can be generated from buttons,
+        icons, and in some cases by right-clicking a location.
       </p>
 
       <DocsShow>
-        <img class="modal-img" src="./dropdown-menu.png">
+        <img
+          class="modal-img"
+          src="./dropdown-menu.png"
+        >
       </DocsShow>
 
       <h3>Filter menu</h3>
-      <p>Filter menus allow users to filter information by selecting from a long list of options. They can be generated by clicking a text field.</p>
+      <p>
+        Filter menus allow users to filter information by selecting from a long list of options.
+        They can be generated by clicking a text field.
+      </p>
 
       <DocsShow>
-        <img class="modal-img" src="./filter-menu.png">
+        <img
+          class="modal-img"
+          src="./filter-menu.png"
+        >
       </DocsShow>
     </DocsPageSection>
 
-    <DocsPageSection title="Menu text" anchor="#menu-text">
+    <DocsPageSection
+      title="Menu text"
+      anchor="#menu-text"
+    >
       <ul>
         <li>Menu options can be user-generated text</li>
         <li>Menu text is 2-3 words by default</li>
@@ -35,20 +50,19 @@
 
     <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>
 
-    <DocsPageSection title="Layout" anchor="#layout">
+    <DocsPageSection
+      title="Layout"
+      anchor="#layout"
+    >
       <ul>
         <li>Menus appear above all other UI elements</li>
         <li>Menus appear directly below the element that generated it</li>
@@ -57,7 +71,10 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Guidelines" anchor="#guidelines">
+    <DocsPageSection
+      title="Guidelines"
+      anchor="#guidelines"
+    >
       <ul>
         <li>Menus can contain icons</li>
         <li>Menus can have dividers to group relevant options together</li>
@@ -68,38 +85,53 @@
 
     <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>
 
-    <DocsPageSection title="Specifications" anchor="#specifications">
+    <DocsPageSection
+      title="Specifications"
+      anchor="#specifications"
+    >
       <ul>
         <li>Min width: 128px</li>
         <li>Menu elevation: 4dp</li>
         <li>
           Background color:
-          <DocsInternalLink code text="tokens.surface" href="/colors#palette.white" />
+          <DocsInternalLink
+            code
+            text="tokens.surface"
+            href="/colors#palette.white"
+          />
         </li>
         <li>
           Option text color:
-          <DocsInternalLink code text="tokens.text" href="/colors#palette-grey-v_200" />
+          <DocsInternalLink
+            code
+            text="tokens.text"
+            href="/colors#palette-grey-v_200"
+          />
         </li>
         <li>
           Option text hover color:
-          <DocsInternalLink code text="palette.grey.v_200" href="/colors#palette-grey-v_200" />
+          <DocsInternalLink
+            code
+            text="palette.grey.v_200"
+            href="/colors#palette-grey-v_200"
+          />
         </li>
         <li>
           Iconography color:
-          <DocsInternalLink code text="palette.grey.v_800" href="/colors#palette-grey-v_800" />
+          <DocsInternalLink
+            code
+            text="palette.grey.v_800"
+            href="/colors#palette-grey-v_800"
+          />
         </li>
       </ul>
       <h3>Dropdown menu</h3>
@@ -113,8 +145,6 @@
         <li>Menu option height: 48px</li>
       </ul>
     </DocsPageSection>
-
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/modals/index.vue b/docs/pages/modals/index.vue
index bc0c5d147..084e54909 100644
--- a/docs/pages/modals/index.vue
+++ b/docs/pages/modals/index.vue
@@ -1,48 +1,57 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>
-        Simple modals break the user’s attention away from the main UI in order to focus attention on a singular action or task. They can contain alerts about important information and allow the user to edit data.
-      </p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        You can use the <DocsLibraryLink component="KModal" /> component to implement modals.
+        Simple modals break the user’s attention away from the main UI in order to focus attention
+        on a singular action or task. They can contain alerts about important information and allow
+        the user to edit data.
       </p>
+      <p>You can use the <DocsLibraryLink component="KModal" /> component to implement modals.</p>
     </DocsPageSection>
 
-    <DocsPageSection title="Layout" anchor="#layout">
-      <p>
-        Modals have 3 sections that are always present: <strong>title, content</strong>, and <strong>actions</strong>.
-      </p>
+    <DocsPageSection
+      title="Layout"
+      anchor="#layout"
+    >
       <p>
-        Optional:
+        Modals have 3 sections that are always present: <strong>title, content</strong>, and
+        <strong>actions</strong>.
       </p>
+      <p>Optional:</p>
       <ul>
         <li>Text prop below title</li>
         <li>Secondary button</li>
       </ul>
       <DocsShow>
-        <img class="modal-img" src="./modal.png">
-        <img class="modal-img" src="./modal-info.png">
+        <img
+          class="modal-img"
+          src="./modal.png"
+        >
+        <img
+          class="modal-img"
+          src="./modal-info.png"
+        >
       </DocsShow>
-      <h3>
-        Title
-      </h3>
+      <h3>Title</h3>
       <p>
-        Keep this short, concise, and easy for the user to understand. Titles should not be structured as a sentence or question, and should not contain user-generated text. Use verbs 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.
+        Keep this short, concise, and easy for the user to understand. Titles should not be
+        structured as a sentence or question, and should not contain user-generated text. Use verbs
+        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.
       </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>
+      <h3>Content</h3>
       <p>
         Along with text, the following UI elements are allowed in the content section of a modal:
       </p>
@@ -55,145 +64,134 @@
         <li>Loaders</li>
         <li>Link buttons and icon buttons</li>
       </ul>
-      <h3>
-        Scrolling
-      </h3>
-      <p>
-        If a modal happens to have a content section that expands beyond the max height, enable vertical scrolling.
-      </p>
-      <p>
-        There should never be horizontal scrolling inside a modal.
-      </p>
-      <h3>
-        Actions
-      </h3>
+      <h3>Scrolling</h3>
       <p>
-        There is always a raised action button present at the bottom right. Should always be affirmative (i.e. will save data or continue user to the next step).
+        If a modal happens to have a content section that expands beyond the max height, enable
+        vertical scrolling.
       </p>
+      <p>There should never be horizontal scrolling inside a modal.</p>
+      <h3>Actions</h3>
       <p>
-        If there is a need for a secondary action, use a flat secondary button that is placed to the left of the action button. Secondary actions should always be dismissive (i.e. does not save any altered data, or cancels a next step).
+        There is always a raised action button present at the bottom right. Should always be
+        affirmative (i.e. will save data or continue user to the next step).
       </p>
       <p>
-        The button group should be right-aligned.
+        If there is a need for a secondary action, use a flat secondary button that is placed to the
+        left of the action button. Secondary actions should always be dismissive (i.e. does not save
+        any altered data, or cancels a next step).
       </p>
+      <p>The button group should be right-aligned.</p>
     </DocsPageSection>
 
-    <DocsPageSection title="Style" anchor="#style">
+    <DocsPageSection
+      title="Style"
+      anchor="#style"
+    >
       <h3>Size</h3>
-      <p>
-        Generally, modals should be of three sizes to accommodate varied screen sizes:
-      </p>
+      <p>Generally, modals should be of three sizes to accommodate varied screen sizes:</p>
       <ul>
         <li><strong>Small:</strong> 300px width. Default size of modals</li>
         <li><strong>Medium:</strong> 450px width. Use for text-heavy modals</li>
         <li><strong>Large:</strong> 100% width. Use on an exceptional, case-by-case basis</li>
       </ul>
       <p>
-        If there are other cases when a simple modal should be increased in width, follow Material’s guide: <strong>increment by 56px</strong>.
+        If there are other cases when a simple modal should be increased in width, follow Material’s
+        guide: <strong>increment by 56px</strong>.
       </p>
-      <h3>
-        Scrim
-      </h3>
+      <h3>Scrim</h3>
       <p>
-        The scrim is the semi-translucent backdrop which covers the rest of the page. It should be <code>rgba(0,0,0,0.7)</code>.
+        The scrim is the semi-translucent backdrop which covers the rest of the page. It should be
+        <code>rgba(0,0,0,0.7)</code>.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Behaviors" anchor="#behaviors">
-      <h3>
-        URL behavior
-      </h3>
-      <p>
-        Simple modals should not have a URL.
-      </p>
-      <h3>
-        Dismissing modals
-      </h3>
-      <p>
-        Modals with a primary button can be dismissed in a few ways: through a “cancel/close” button within the modal, or pressing the escape key. For these modals, the enter key should trigger the primary action.
-      </p>
+    <DocsPageSection
+      title="Behaviors"
+      anchor="#behaviors"
+    >
+      <h3>URL behavior</h3>
+      <p>Simple modals should not have a URL.</p>
+      <h3>Dismissing modals</h3>
       <p>
-        Modals that are purely informational and contain only a single dismissive button can also be dismissed with the escape key or the enter key.
+        Modals with a primary button can be dismissed in a few ways: through a “cancel/close” button
+        within the modal, or pressing the escape key. For these modals, the enter key should trigger
+        the primary action.
       </p>
       <p>
-        Modals are never dismissible by clicking the scrim.
+        Modals that are purely informational and contain only a single dismissive button can also be
+        dismissed with the escape key or the enter key.
       </p>
+      <p>Modals are never dismissible by clicking the scrim.</p>
     </DocsPageSection>
 
-    <DocsPageSection title="Errors" anchor="#errors">
+    <DocsPageSection
+      title="Errors"
+      anchor="#errors"
+    >
       <p>
-        If the user experiences a client-side or server-side error, the corresponding validation messages should display within the modal.
+        If the user experiences a client-side or server-side error, the corresponding validation
+        messages should display within the modal.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Accessibility" anchor="#accessibility">
+    <DocsPageSection
+      title="Accessibility"
+      anchor="#accessibility"
+    >
       <p>
-        Modals should be keyboard accessible for users who use assistive technology. Tabbing should limit the user to the options within a modal only and not extend to the UI beneath it.
+        Modals should be keyboard accessible for users who use assistive technology. Tabbing should
+        limit the user to the options within a modal only and not extend to the UI beneath it.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Examples" anchor="#examples">
+    <DocsPageSection
+      title="Examples"
+      anchor="#examples"
+    >
       <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>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/pageheader/index.vue b/docs/pages/pageheader/index.vue
index c04c2f08e..a48cb314c 100644
--- a/docs/pages/pageheader/index.vue
+++ b/docs/pages/pageheader/index.vue
@@ -1,52 +1,82 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        The page header displays under the app bar and contains information about the current page, as well as any page-level actions or navigation.
+        The page header displays under the app bar and contains information about the current page,
+        as well as any page-level actions or navigation.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Components" anchor="#components">
-      <img src="./page-header.png">
+    <DocsPageSection
+      title="Components"
+      anchor="#components"
+    >
+      <img src="./page-header.png" >
       <p>
         The following components can show up in the page header. Only the page title is required.
       </p>
       <ol>
         <li>
-          <strong>Navigation.</strong> This should lead the user to the parent page in the hierarchy. Do not use this on pages that have <DocsInternalLink href="/appbars" text="back arrow bars" />.
+          <strong>Navigation.</strong> This should lead the user to the parent page in the
+          hierarchy. Do not use this on pages that have
+          <DocsInternalLink
+            href="/appbars"
+            text="back arrow bars"
+          />.
         </li>
         <li>
-          <strong>Page title.</strong> Keep the title limited to a few words at maximum, and make it specific to the content within the current page. Icons can be also be placed inline of page titles.
+          <strong>Page title.</strong> Keep the title limited to a few words at maximum, and make it
+          specific to the content within the current page. Icons can be also be placed inline of
+          page titles.
         </li>
         <li>
-          <strong>Buttons.</strong> Use up to two buttons in the page header. Primary buttons usually begin a flow to add new things to the page. Secondary buttons usually open menus and begin other flows that affect the whole page. Follow <DocsInternalLink href="/buttons" text="button guidelines" />.
+          <strong>Buttons.</strong> Use up to two buttons in the page header. Primary buttons
+          usually begin a flow to add new things to the page. Secondary buttons usually open menus
+          and begin other flows that affect the whole page. Follow
+          <DocsInternalLink
+            href="/buttons"
+            text="button guidelines"
+          />.
         </li>
         <li>
-          <strong>Description.</strong> This should be a one-line summary of what the user can accomplish on the current page.
+          <strong>Description.</strong> This should be a one-line summary of what the user can
+          accomplish on the current page.
         </li>
       </ol>
 
       <h3>More on page titles</h3>
       <p>
-        Page titles should correspond to <DocsInternalLink href="/appbars/#titles" text="app bar titles" />. 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.
+        Page titles should correspond to
+        <DocsInternalLink
+          href="/appbars/#titles"
+          text="app bar titles"
+        />. 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.
+        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.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Page titles and the browser" anchor="#browser">
-      <p>
-        Page titles should be short and meaningful without context. They should follow a standard naming convention to help users scan multiple tabs, their browser history, bookmarks, and more.
-      </p>
+    <DocsPageSection
+      title="Page titles and the browser"
+      anchor="#browser"
+    >
       <p>
-        Use an en dash to separate each title section.
+        Page titles should be short and meaningful without context. They should follow a standard
+        naming convention to help users scan multiple tabs, their browser history, bookmarks, and
+        more.
       </p>
+      <p>Use an en dash to separate each title section.</p>
       <p>
-        If the page title is also an editable field on the current page, update the page title after the title field loses focus and changes have been saved.
+        If the page title is also an editable field on the current page, update the page title after
+        the title field loses focus and changes have been saved.
       </p>
       <h3>Browser tab title format examples</h3>
       <ol>
@@ -54,9 +84,7 @@
           <p>
             <strong>Simple</strong>
           </p>
-          <p>
-            [Current page title] &#8211; [Class/Channel/Plugin] &#8211; [Product name]
-          </p>
+          <p>[Current page title] &#8211; [Class/Channel/Plugin] &#8211; [Product name]</p>
           <p>
             <i>Biology &#8211; MIT Blossoms &#8211; Kolibri Studio</i>
           </p>
@@ -66,7 +94,8 @@
             <strong>Subtabs, deep hierarchy</strong>
           </p>
           <p>
-            [Subtab title] &#8211; [Current page title] &#8211; [Class/Channel/Plugin] &#8211; [Product name]
+            [Subtab title] &#8211; [Current page title] &#8211; [Class/Channel/Plugin] &#8211;
+            [Product name]
           </p>
           <p>
             <i>Difficult questions &#8211; Quiz 22 &#8211; Class 1A &#8211; Kolibri</i>
@@ -77,24 +106,24 @@
             <strong>Fullscreen modals in deep hierarchy (has URL)</strong>
           </p>
           <p>
-            [Modal title] &#8211; [Parent page title] &#8211; [Class/Channel/Plugin] &#8211; [Product name]
+            [Modal title] &#8211; [Parent page title] &#8211; [Class/Channel/Plugin] &#8211;
+            [Product name]
           </p>
           <p>
-            <i>How to steam vegetables &#8211; Level 1 Cooking Lesson &#8211; Class 1A &#8211; Kolibri</i>
+            <i>How to steam vegetables &#8211; Level 1 Cooking Lesson &#8211; Class 1A &#8211;
+              Kolibri</i>
           </p>
         </li>
       </ol>
-      <h3>
-        Truncation
-      </h3>
+      <h3>Truncation</h3>
       <p>
-        Page titles should have a maximum of 70 characters before truncating. Always display the product name, and truncate other text that appears before it.
+        Page titles should have a maximum of 70 characters before truncating. Always display the
+        product name, and truncate other text that appears before it.
       </p>
       <p>
         <i>Worked example: Subtracting 3-digit numbers (regrouping t... &#8211; Kolibri</i>
       </p>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/playground/cards.vue b/docs/pages/playground/cards.vue
index f1cb46683..01c916016 100644
--- a/docs/pages/playground/cards.vue
+++ b/docs/pages/playground/cards.vue
@@ -1,10 +1,11 @@
 <template>
 
   <div style="padding: 80px">
-    <h1 id="link-target">
-      Cards QA page
-    </h1>
-    <p>Also preview live examples on <code>KCardGrid</code> and <code>KCard</code> documentation pages.</p>
+    <h1 id="link-target">Cards QA page</h1>
+    <p>
+      Also preview live examples on <code>KCardGrid</code> and <code>KCard</code> documentation
+      pages.
+    </p>
 
     <section>
       <h2>Horizontal cards with large amount of content</h2>
@@ -21,7 +22,10 @@
           :title="`With thumbnail display: '${display}' and thumbnail align: '${align}'`"
         >
           <template #aboveTitle>
-            <KLabeledIcon icon="readSolid" label="Read" />
+            <KLabeledIcon
+              icon="readSolid"
+              label="Read"
+            />
           </template>
           <template #belowTitle>
             <KTextTruncator
@@ -31,11 +35,15 @@
           </template>
           <template #footer>
             <div class="footer-wrapper">
-              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
-                <span
-                  :style="{ 'background-color': $themePalette.grey.v_100 }"
-                >
-                  <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
+              <div
+                class="pills"
+                :style="{ color: $themeTokens.annotation }"
+              >
+                <span :style="{ 'background-color': $themePalette.grey.v_100 }">
+                  <KIcon
+                    icon="readSolid"
+                    :style="{ fontSize: '13px', position: 'relative', top: '3px' }"
+                  />
                   Read
                 </span>
                 <span :style="{ 'background-color': $themePalette.grey.v_100 }">
@@ -45,14 +53,23 @@
             </div>
             <div :style="{ marginTop: '8px' }">
               <KFixedGrid :numCols="4">
-                <KFixedGridItem :span="3" :style="{ paddingTop: '8px' }">
+                <KFixedGridItem
+                  :span="3"
+                  :style="{ paddingTop: '8px' }"
+                >
                   <KLinearLoader
                     type="determinate"
                     :progress="20"
                   />
                 </KFixedGridItem>
-                <KFixedGridItem :span="1" alignment="right">
-                  <KIcon icon="schedule" :style="{ fontSize: '18px' }" />
+                <KFixedGridItem
+                  :span="1"
+                  alignment="right"
+                >
+                  <KIcon
+                    icon="schedule"
+                    :style="{ fontSize: '18px' }"
+                  />
                 </KFixedGridItem>
               </KFixedGrid>
             </div>
@@ -98,7 +115,10 @@
           :title="`With thumbnail display: '${display}'`"
         >
           <template #aboveTitle>
-            <KLabeledIcon icon="readSolid" label="Read" />
+            <KLabeledIcon
+              icon="readSolid"
+              label="Read"
+            />
           </template>
           <template #belowTitle>
             <KTextTruncator
@@ -108,11 +128,15 @@
           </template>
           <template #footer>
             <div class="footer-wrapper">
-              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
-                <span
-                  :style="{ 'background-color': $themePalette.grey.v_100 }"
-                >
-                  <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
+              <div
+                class="pills"
+                :style="{ color: $themeTokens.annotation }"
+              >
+                <span :style="{ 'background-color': $themePalette.grey.v_100 }">
+                  <KIcon
+                    icon="readSolid"
+                    :style="{ fontSize: '13px', position: 'relative', top: '3px' }"
+                  />
                   Read
                 </span>
                 <span :style="{ 'background-color': $themePalette.grey.v_100 }">
@@ -122,14 +146,23 @@
             </div>
             <div :style="{ marginTop: '8px' }">
               <KFixedGrid :numCols="4">
-                <KFixedGridItem :span="3" :style="{ paddingTop: '8px' }">
+                <KFixedGridItem
+                  :span="3"
+                  :style="{ paddingTop: '8px' }"
+                >
                   <KLinearLoader
                     type="determinate"
                     :progress="20"
                   />
                 </KFixedGridItem>
-                <KFixedGridItem :span="1" alignment="right">
-                  <KIcon icon="schedule" :style="{ fontSize: '18px' }" />
+                <KFixedGridItem
+                  :span="1"
+                  alignment="right"
+                >
+                  <KIcon
+                    icon="schedule"
+                    :style="{ fontSize: '18px' }"
+                  />
                 </KFixedGridItem>
               </KFixedGrid>
             </div>
@@ -274,4 +307,4 @@
     }
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/pages/playground/index.vue b/docs/pages/playground/index.vue
index 686423285..d279dc8f8 100644
--- a/docs/pages/playground/index.vue
+++ b/docs/pages/playground/index.vue
@@ -23,7 +23,6 @@
     /> -->
 
     <!-- Play around with your component here: -->
-
   </div>
 
 </template>
diff --git a/docs/pages/principles.vue b/docs/pages/principles.vue
index 28c8ee1aa..1daef9d65 100644
--- a/docs/pages/principles.vue
+++ b/docs/pages/principles.vue
@@ -1,37 +1,70 @@
 <template>
 
   <DocsPageTemplate>
-
     <DocsPageSection>
-      <p>These principles allow Learning Equality to apply its core values to the product design process. For non-designers, they also shed light on how the design team makes and prioritizes design decisions internally.</p>
-      <p>When making decisions that affect our users, we encourage you to reference these principles during the product development process and to hold yourself accountable to these standards.</p>
-      <p>Finally, these principles are a work in progress. The intent is that this is a living set of principles that will evolve to better serve the design team, the product process, and our users.</p>
+      <p>
+        These principles allow Learning Equality to apply its core values to the product design
+        process. For non-designers, they also shed light on how the design team makes and
+        prioritizes design decisions internally.
+      </p>
+      <p>
+        When making decisions that affect our users, we encourage you to reference these principles
+        during the product development process and to hold yourself accountable to these standards.
+      </p>
+      <p>
+        Finally, these principles are a work in progress. The intent is that this is a living set of
+        principles that will evolve to better serve the design team, the product process, and our
+        users.
+      </p>
     </DocsPageSection>
-    <DocsPageSection title="Equitable access" anchor="#equitable">
+    <DocsPageSection
+      title="Equitable access"
+      anchor="#equitable"
+    >
       <p class="description">
-        Equity is at the heart of Learning Equality’s mission. Our products address barriers of access to education that are faced by marginalized communities and populations.
+        Equity is at the heart of Learning Equality’s mission. Our products address barriers of
+        access to education that are faced by marginalized communities and populations.
       </p>
       <ul>
-        <li>Aim to be as functional as possible in situations with unstable or no internet access</li>
+        <li>
+          Aim to be as functional as possible in situations with unstable or no internet access
+        </li>
         <li>Support old, legacy, and low-powered devices</li>
         <li>Products should be easy to use for people of any experience level with technology</li>
-        <li>Products should adapt to any language and be accessible across varying physical and cognitive abilities</li>
+        <li>
+          Products should adapt to any language and be accessible across varying physical and
+          cognitive abilities
+        </li>
       </ul>
     </DocsPageSection>
-    <DocsPageSection title="Effective learning" anchor="#effective">
+    <DocsPageSection
+      title="Effective learning"
+      anchor="#effective"
+    >
       <p class="description">
-        The learning process can sometimes feel tiring and challenging. Learning can be far more effective by keeping people motivated and engaged. We support not only concept and skill proficiency but also the process of learning.
+        The learning process can sometimes feel tiring and challenging. Learning can be far more
+        effective by keeping people motivated and engaged. We support not only concept and skill
+        proficiency but also the process of learning.
       </p>
       <ul>
         <li>Support learner progression as people master and engage content more deeply</li>
         <li>Don’t interrupt the learning process unless doing so is conducive to learning</li>
         <li>Allow for assessment practice without penalizing mistakes</li>
-        <li>Learn from and integrate new practices from other sectors, including education and learning sciences</li>
+        <li>
+          Learn from and integrate new practices from other sectors, including education and
+          learning sciences
+        </li>
       </ul>
     </DocsPageSection>
-    <DocsPageSection title="Community ownership" anchor="#community">
+    <DocsPageSection
+      title="Community ownership"
+      anchor="#community"
+    >
       <p class="description">
-        Communities understand their own needs best. Our tools enable them to have ownership over how their goals, educational resources, and identities are represented. We understand that one size doesn’t fit all, so we design to serve the unique needs of our communities in these ways:
+        Communities understand their own needs best. Our tools enable them to have ownership over
+        how their goals, educational resources, and identities are represented. We understand that
+        one size doesn’t fit all, so we design to serve the unique needs of our communities in these
+        ways:
       </p>
       <ul>
         <li>Make it easy to share and collaborate online and offline</li>
@@ -40,9 +73,14 @@
         <li>Design helpful defaults but allow customization if the need arises</li>
       </ul>
     </DocsPageSection>
-    <DocsPageSection title="Consistent experiences" anchor="#consistent">
+    <DocsPageSection
+      title="Consistent experiences"
+      anchor="#consistent"
+    >
       <p class="description">
-        Consistency removes friction with the product, allowing people to focus on what they’re trying to get done. Each function of our products should feel empowering and coherent with the rest of the product ecosystem.
+        Consistency removes friction with the product, allowing people to focus on what they’re
+        trying to get done. Each function of our products should feel empowering and coherent with
+        the rest of the product ecosystem.
       </p>
       <ul>
         <li>Lean on established patterns and components that live in our design system</li>
@@ -50,7 +88,6 @@
         <li>Tweak patterns and components if it helps meet a user groups’ unique needs</li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/release-process.vue b/docs/pages/release-process.vue
index 4cb94b84d..26c0f0226 100644
--- a/docs/pages/release-process.vue
+++ b/docs/pages/release-process.vue
@@ -1,31 +1,63 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Motivations" anchor="#motivations">
-      <p>For users of the design system who are contributing to Kolibri product ecosystem development, two needs are in conflict:</p>
+    <DocsPageSection
+      title="Motivations"
+      anchor="#motivations"
+    >
+      <p>
+        For users of the design system who are contributing to Kolibri product ecosystem
+        development, two needs are in conflict:
+      </p>
       <ol>
-        <li><strong>Rapid iteration</strong> allows the design system to rapidly respond to needs with new and improved components, new and improved design patterns, and rapid fixes</li>
-        <li><strong>Long-term stability</strong> allows the design system to form a stable and predictable foundation on which contributors can confidently build, with the expectation that the resulting work will not need to be revisited or break in the future</li>
+        <li>
+          <strong>Rapid iteration</strong> allows the design system to rapidly respond to needs with
+          new and improved components, new and improved design patterns, and rapid fixes
+        </li>
+        <li>
+          <strong>Long-term stability</strong> allows the design system to form a stable and
+          predictable foundation on which contributors can confidently build, with the expectation
+          that the resulting work will not need to be revisited or break in the future
+        </li>
       </ol>
-      <p>Our release process is designed to support both of these needs by being precise about what kinds of changes can happen in which types of releases, and also and facilitating an upgrade process to help all Kolibri products (specifically the Learning Platform, Studio, and Data Portal) stay up-to-date.</p>
-    </DocsPageSection>
-
-    <DocsPageSection title="Semantic versioning" anchor="#semver">
       <p>
-        We use <DocsExternalLink text="semantic versioning" href="https://semver.org/" /> to help define what kinds of changes go in different kinds of releases.
+        Our release process is designed to support both of these needs by being precise about what
+        kinds of changes can happen in which types of releases, and also and facilitating an upgrade
+        process to help all Kolibri products (specifically the Learning Platform, Studio, and Data
+        Portal) stay up-to-date.
       </p>
+    </DocsPageSection>
+
+    <DocsPageSection
+      title="Semantic versioning"
+      anchor="#semver"
+    >
       <p>
-        Given a version number <code>MAJOR.MINOR.PATCH</code>, we increment the:
+        We use
+        <DocsExternalLink
+          text="semantic versioning"
+          href="https://semver.org/"
+        />
+        to help define what kinds of changes go in different kinds of releases.
       </p>
+      <p>Given a version number <code>MAJOR.MINOR.PATCH</code>, we increment the:</p>
       <ul>
         <li>
           <code>MAJOR</code> version for incompatible or breaking changes. For example:
           <ul>
             <li>A previously optional prop becomes required</li>
-            <li>New design guidance is added that contradicts previous guidance or creates a new fixed rule</li>
-            <li>Layout updates are made to a component, e.g. a CSS <code>display</code> prop changes from <code>block</code> to <code>inline</code> or the default width changes</li>
-            <li>Clarifying question: an update would potentially require someone updating their code, e.g. renaming a component</li>
+            <li>
+              New design guidance is added that contradicts previous guidance or creates a new fixed
+              rule
+            </li>
+            <li>
+              Layout updates are made to a component, e.g. a CSS <code>display</code> prop changes
+              from <code>block</code> to <code>inline</code> or the default width changes
+            </li>
+            <li>
+              Clarifying question: an update would potentially require someone updating their code,
+              e.g. renaming a component
+            </li>
           </ul>
         </li>
         <li>
@@ -46,83 +78,147 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Design patterns and APIs" anchor="#design-patterns">
-
-      <p>The design system provides two kinds of "contracts" which may change from release to release:</p>
+    <DocsPageSection
+      title="Design patterns and APIs"
+      anchor="#design-patterns"
+    >
+      <p>
+        The design system provides two kinds of "contracts" which may change from release to
+        release:
+      </p>
 
       <ul>
-        <li>The set of design patterns and guidance describe the current UX/UI conventions and best practices</li>
-        <li>The set of library components and their configuration options describe the current API</li>
+        <li>
+          The set of design patterns and guidance describe the current UX/UI conventions and best
+          practices
+        </li>
+        <li>
+          The set of library components and their configuration options describe the current API
+        </li>
       </ul>
 
       <p>
-        Significant changes to design patterns can be as important as API changes. For example, if we were to introduce strict new guidance that says "No text should ever be smaller than 11px", this would be considered a <code>MAJOR</code> version change because it requires us to go through the Learning Platform, Studio, and Data Portal to ensure that this new guidance is actually being followed.
+        Significant changes to design patterns can be as important as API changes. For example, if
+        we were to introduce strict new guidance that says "No text should ever be smaller than
+        11px", this would be considered a <code>MAJOR</code> version change because it requires us
+        to go through the Learning Platform, Studio, and Data Portal to ensure that this new
+        guidance is actually being followed.
       </p>
-
     </DocsPageSection>
 
-
-    <DocsPageSection title="Technical details" anchor="#technical-details">
-
+    <DocsPageSection
+      title="Technical details"
+      anchor="#technical-details"
+    >
       <h3>Git branches and tags</h3>
       <p>
-        The design system is currently developed and released from a single <code>main</code> branch. Updates are made in transient feature branches, tested, and merged into <code>main</code>. Specific releases (such as <code>v1.2.3</code>) are represented as <DocsExternalLink text="Github releases" href="https://docs.github.com/en/github/administering-a-repository/releasing-projects-on-github/managing-releases-in-a-repository" /> and <DocsExternalLink text="Git tags" href="https://git-scm.com/book/en/v2/Git-Basics-Tagging" />.
+        The design system is currently developed and released from a single
+        <code>main</code> branch. Updates are made in transient feature branches, tested, and merged
+        into <code>main</code>. Specific releases (such as <code>v1.2.3</code>) are represented as
+        <DocsExternalLink
+          text="Github releases"
+          href="https://docs.github.com/en/github/administering-a-repository/releasing-projects-on-github/managing-releases-in-a-repository"
+        />
+        and
+        <DocsExternalLink
+          text="Git tags"
+          href="https://git-scm.com/book/en/v2/Git-Basics-Tagging"
+        />.
       </p>
       <p>
-        The single-branch model does not support maintaining multiple releases in parallel – for example, releasing a new <code>v1.2.3</code> after <code>v1.3.0</code> has already happened. If this becomes necessary at some point we would make a dedicated release branch called <code>v1.2.x</code> for the purpose, similar to Kolibri's <DocsExternalLink text="branching model" href="https://kolibri-dev.readthedocs.io/en/develop/release_process.html#branches-and-tags" />.
+        The single-branch model does not support maintaining multiple releases in parallel – for
+        example, releasing a new <code>v1.2.3</code> after <code>v1.3.0</code> has already happened.
+        If this becomes necessary at some point we would make a dedicated release branch called
+        <code>v1.2.x</code> for the purpose, similar to Kolibri's
+        <DocsExternalLink
+          text="branching model"
+          href="https://kolibri-dev.readthedocs.io/en/develop/release_process.html#branches-and-tags"
+        />.
       </p>
 
       <h3>Update policies</h3>
       <ul>
-        <li>All user-facing changes for each release should be documented in the <DocsGithubLink text="changelog" href="https://github.com/learningequality/kolibri-design-system/blob/main/CHANGELOG.md" />.</li>
-        <li>The unstable or develop branches of product repos should track the <code>HEAD</code> of the design system <code>main</code> branch. It is the responsibility of the Design System Circle to make sure this happens.</li>
-        <li>The stable or release branches of product repos should be pinned to a stable, tagged version of the design system.</li>
+        <li>
+          All user-facing changes for each release should be documented in the
+          <DocsGithubLink
+            text="changelog"
+            href="https://github.com/learningequality/kolibri-design-system/blob/main/CHANGELOG.md"
+          />.
+        </li>
+        <li>
+          The unstable or develop branches of product repos should track the <code>HEAD</code> of
+          the design system <code>main</code> branch. It is the responsibility of the Design System
+          Circle to make sure this happens.
+        </li>
+        <li>
+          The stable or release branches of product repos should be pinned to a stable, tagged
+          version of the design system.
+        </li>
       </ul>
 
       <h3>'Next' and 'Deprecated' components</h3>
       <p>
-        To help smooth upgrades, the design system has a process for making both pre-release and deprecated versions of individual components available from a single monorepo:
+        To help smooth upgrades, the design system has a process for making both pre-release and
+        deprecated versions of individual components available from a single monorepo:
       </p>
       <p>
-        Within a major design system release, components always have a current stable version. Components may also optionally have a <code>next</code> and/or <code>deprecated</code> version available, allowing access to newer or older major versions respectively.
+        Within a major design system release, components always have a current stable version.
+        Components may also optionally have a <code>next</code> and/or
+        <code>deprecated</code> version available, allowing access to newer or older major versions
+        respectively.
+      </p>
+      <p>
+        For illustration, assume that the current stable version of the design system is
+        <code>2.3.4</code>. All importable modules are by default the 'current' version. For
+        example:
       </p>
-      <p>For illustration, assume that the current stable version of the design system is <code>2.3.4</code>. All importable modules are by default the 'current' version. For example:</p>
       <DocsShowCode language="javascript">
-        // imports KButton version 2.3.4 (current stable)
-        import KModal from 'kolibri-design-system/lib/KButton';
+        // imports KButton version 2.3.4 (current stable) import KModal from
+        'kolibri-design-system/lib/KButton';
       </DocsShowCode>
       <p>
-        If <strong>(and only if)</strong> we plan on introducing breaking changes to a component, we would add a sub-directory called <code>next</code> to house this work and allow people to test or even use the alpha version while they are still mostly using <code>2.x.y</code> stable:
+        If <strong>(and only if)</strong> we plan on introducing breaking changes to a component, we
+        would add a sub-directory called <code>next</code> to house this work and allow people to
+        test or even use the alpha version while they are still mostly using
+        <code>2.x.y</code> stable:
       </p>
       <DocsShowCode language="javascript">
-        // imports KButton version 3.0.0-alpha (next unstable)
-        import KModal from 'kolibri-design-system/lib/KButton/next';
+        // imports KButton version 3.0.0-alpha (next unstable) import KModal from
+        'kolibri-design-system/lib/KButton/next';
       </DocsShowCode>
       <p>
-        An update to <code>next</code> code might count as a patch release bump for the current stable semantic version. For example, we might release <code>2.3.5</code> with a changelog entry like:
+        An update to <code>next</code> code might count as a patch release bump for the current
+        stable semantic version. For example, we might release <code>2.3.5</code> with a changelog
+        entry like:
       </p>
       <p>
-        <em><strong>Version 2.3.5</strong>: Renamed the <code>text</code> prop in <code>lib/KButton/next</code> to <code>label</code></em>
+        <em><strong>Version 2.3.5</strong>: Renamed the <code>text</code> prop in
+          <code>lib/KButton/next</code> to <code>label</code></em>
       </p>
       <p>
-        Once we release KDS version <code>3.0.0</code> stable, code in <code>next</code> becomes stable, and stable becomes <code>deprecated</code>:
+        Once we release KDS version <code>3.0.0</code> stable, code in <code>next</code> becomes
+        stable, and stable becomes <code>deprecated</code>:
       </p>
       <p>
-        <em><strong>Version 3.0.0</strong>: Added a new version of <code>KButton</code> addressing API inconsistency</em>
+        <em><strong>Version 3.0.0</strong>: Added a new version of <code>KButton</code> addressing
+          API inconsistency</em>
       </p>
       <DocsShowCode language="javascript">
-        // imports KButton version 2.3.5 (deprecated)
-        import KModal from 'kolibri-design-system/lib/KButton/deprecated';
-
-        // imports KButton version 3.0.0 (current stable)
-        import KModal from 'kolibri-design-system/lib/KButton';
+        // imports KButton version 2.3.5 (deprecated) import KModal from
+        'kolibri-design-system/lib/KButton/deprecated'; // imports KButton version 3.0.0 (current
+        stable) import KModal from 'kolibri-design-system/lib/KButton';
       </DocsShowCode>
       <p>
-        It's unlikely that at this point a new <code>next</code> version of <code>KButton</code> would also be introduced, because we want to minimize churn and and unnecessary breaking changes. However, in rare cases we might need to do this, and there be three versions all available simultaneously:
+        It's unlikely that at this point a new <code>next</code> version of
+        <code>KButton</code> would also be introduced, because we want to minimize churn and and
+        unnecessary breaking changes. However, in rare cases we might need to do this, and there be
+        three versions all available simultaneously:
       </p>
       <p>
-        <em><strong>Version 3.0.1</strong>: Added a new alpha version of <code>KButton</code> to address unexpected issue</em>
+        <em><strong>Version 3.0.1</strong>: Added a new alpha version of <code>KButton</code> to
+          address unexpected issue</em>
       </p>
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         // imports KButton version 2.3.5 (deprecated)
         import KModal from 'kolibri-design-system/lib/KButton/deprecated';
@@ -133,11 +229,7 @@
         // imports KButton version 4.0.0-alpha (next unstable)
         import KModal from 'kolibri-design-system/lib/KButton/next';
       </DocsShowCode>
-
     </DocsPageSection>
-
-
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/snackbars.vue b/docs/pages/snackbars.vue
index 93c88a03c..1f1b8b9e1 100644
--- a/docs/pages/snackbars.vue
+++ b/docs/pages/snackbars.vue
@@ -1,46 +1,72 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Snackbars are short and affirmative messages that momentarily grab the user’s attention to convey non-critical information. They are transient and do not persist on the page.
+        Snackbars are short and affirmative messages that momentarily grab the user’s attention to
+        convey non-critical information. They are transient and do not persist on the page.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <p>
-        Snackbars typically appear following an action taken by the user, and the contents of the snackbar should inform the user something about the results of an operation starting or completing successfully.
+        Snackbars typically appear following an action taken by the user, and the contents of the
+        snackbar should inform the user something about the results of an operation starting or
+        completing successfully.
       </p>
       <p>Snackbars should be located 24px from the bottom-left corner of the screen.</p>
-      <p>Only one snackbar should be visible at a time. If multiple snackbars need to appear, have them appear sequentially, replacing the previous snackbar.</p>
       <p>
-        Avoid using snackbars for critical information. It may be difficult for users with low dexterity or vision to access it. Consider using an alert banner or modal instead.
+        Only one snackbar should be visible at a time. If multiple snackbars need to appear, have
+        them appear sequentially, replacing the previous snackbar.
       </p>
       <p>
-        Snackbars can occasionally be used for other purposes. Some atypical use-cases include alerts for being signed out due to inactivity, or prompting the user to move on after completing a resource.
+        Avoid using snackbars for critical information. It may be difficult for users with low
+        dexterity or vision to access it. Consider using an alert banner or modal instead.
       </p>
-    </DocsPageSection>
-
-    <DocsPageSection title="Inline buttons" anchor="#inline-buttons">
       <p>
-        Snackbars may occasionally include a button so the user can take a follow up, non-critical action. Common examples are 'undo' and 'retry'. Note that some users will never have the opportunity to click this button.
+        Snackbars can occasionally be used for other purposes. Some atypical use-cases include
+        alerts for being signed out due to inactivity, or prompting the user to move on after
+        completing a resource.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Text content" anchor="#text-content">
+    <DocsPageSection
+      title="Inline buttons"
+      anchor="#inline-buttons"
+    >
       <p>
-        Snackbar messages should be concisely written sentence fragments. Examples include:
+        Snackbars may occasionally include a button so the user can take a follow up, non-critical
+        action. Common examples are 'undo' and 'retry'. Note that some users will never have the
+        opportunity to click this button.
       </p>
+    </DocsPageSection>
+
+    <DocsPageSection
+      title="Text content"
+      anchor="#text-content"
+    >
+      <p>Snackbar messages should be concisely written sentence fragments. Examples include:</p>
       <ul>
         <li>Profile updated</li>
         <li>Changes saved</li>
         <li>Resource added</li>
       </ul>
-      <p>Avoid including user-inputted text such as the name of a resource or lesson because we have less control over the length of this text.</p>
+      <p>
+        Avoid including user-inputted text such as the name of a resource or lesson because we have
+        less control over the length of this text.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Specifications" anchor="#specifications">
+    <DocsPageSection
+      title="Specifications"
+      anchor="#specifications"
+    >
       <ul>
         <li>Background color: $k-grey-900</li>
         <li>Text: 14px white and bolded</li>
@@ -53,7 +79,6 @@
         <li>Timeout: 4 seconds</li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/styling/index.vue b/docs/pages/styling/index.vue
index 74f128b55..9764d79c8 100644
--- a/docs/pages/styling/index.vue
+++ b/docs/pages/styling/index.vue
@@ -1,39 +1,69 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Typeface" anchor="#typeface">
+    <DocsPageSection
+      title="Typeface"
+      anchor="#typeface"
+    >
       <p>
-        Kolibri is translated into upwards of 30 languages, and the public content library contains resources in dozens more. There is no way to know in advance what text will be displayed, or which fonts are already available on the user's device.
+        Kolibri is translated into upwards of 30 languages, and the public content library contains
+        resources in dozens more. There is no way to know in advance what text will be displayed, or
+        which fonts are already available on the user's device.
       </p>
       <DocsShow>
-        <img src="./noto.png" style="width: 50%;">
+        <img
+          src="./noto.png"
+          style="width: 50%"
+        >
       </DocsShow>
       <p>
-        To work around this challenge, products in the Kolibri ecosystem use the open source typeface <DocsExternalLink text="Noto Sans" href="https://fonts.google.com/noto" /> maintained by Google. Noto includes a wide range of fonts that cover an enormous number of languages, scripts, and glyphs.
+        To work around this challenge, products in the Kolibri ecosystem use the open source
+        typeface
+        <DocsExternalLink
+          text="Noto Sans"
+          href="https://fonts.google.com/noto"
+        />
+        maintained by Google. Noto includes a wide range of fonts that cover an enormous number of
+        languages, scripts, and glyphs.
       </p>
       <p>
-        Kolibri must work offline, and therefore the design system has some special logic for loading fonts as-needed from the device. Studio on the other hand is in the cloud and relies on the Google Fonts API to load Noto.
+        Kolibri must work offline, and therefore the design system has some special logic for
+        loading fonts as-needed from the device. Studio on the other hand is in the cloud and relies
+        on the Google Fonts API to load Noto.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Globally-available styles" anchor="#definitions">
+    <DocsPageSection
+      title="Globally-available styles"
+      anchor="#definitions"
+    >
       <p>
         The design system provides a set of reusable style constants, snippets, and dynamic values.
       </p>
       <p>
-        Constants are made available as <DocsExternalLink text="SCSS variables" href="https://sass-lang.com/documentation/variables" /> and snippets are made available as <DocsExternalLink text="SCSS placeholder selectors" href="https://sass-lang.com/documentation/style-rules/placeholder-selectors" />. For example, we provide a constant called <code>$radius</code> (defined as <code>4px</code>) and a placeholder selector called <code>%dropshadow-2dp</code> which creates a 2dp drop shadow. These can be used to style an element by importing the definitions file:
+        Constants are made available as
+        <DocsExternalLink
+          text="SCSS variables"
+          href="https://sass-lang.com/documentation/variables"
+        />
+        and snippets are made available as
+        <DocsExternalLink
+          text="SCSS placeholder selectors"
+          href="https://sass-lang.com/documentation/style-rules/placeholder-selectors"
+        />. For example, we provide a constant called <code>$radius</code> (defined as
+        <code>4px</code>) and a placeholder selector called <code>%dropshadow-2dp</code> which
+        creates a 2dp drop shadow. These can be used to style an element by importing the
+        definitions file:
       </p>
       <p>
-        Use these by importing the design system's <code>definitions.scss</code> file. For example, this HTML and SCSS in a Vue template:
+        Use these by importing the design system's <code>definitions.scss</code> file. For example,
+        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 -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="css">
         @import '~kolibri-design-system/lib/styles/definitions'
 
@@ -47,12 +77,12 @@
       <!-- 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. Instead, colors are defined in Javascript. Every Vue component instance gets a few reactive Vue objects attached to it which can be accessed in computed styles:
+        In order for Kolibri to be dynamically themed colors cannot be defined as SCSS constants.
+        Instead, colors are defined in Javascript. Every Vue component instance gets a few reactive
+        Vue objects attached to it which can be accessed in computed styles:
       </p>
       <ul>
         <li><code>$themeBrand</code> contains colors related to the aesthetic color scheme</li>
@@ -60,48 +90,61 @@
         <li><code>$themePalette</code> contains a wide range of additional compatible colors</li>
       </ul>
       <p>
-        For more informatiom see the <DocsInternalLink text="Colors page" href="/colors" />.
+        For more informatiom see the
+        <DocsInternalLink
+          text="Colors page"
+          href="/colors"
+        />.
       </p>
-
     </DocsPageSection>
 
-    <DocsPageSection title="Elevation and shadow" anchor="#elevation">
+    <DocsPageSection
+      title="Elevation and shadow"
+      anchor="#elevation"
+    >
       <p>
-        Kolibri products use a system of elevation based roughly on Google's <DocsExternalLink href="https://material.io/archive/guidelines/material-design/elevation-shadows.html" text="Material Design" />. Material introduces the idea that  UI container elements (menus, modals, side-bars, etc) exist on a particular "elevation" on the page, which defines which one is visible when they overlap.
+        Kolibri products use a system of elevation based roughly on Google's
+        <DocsExternalLink
+          href="https://material.io/archive/guidelines/material-design/elevation-shadows.html"
+          text="Material Design"
+        />. Material introduces the idea that UI container elements (menus, modals, side-bars, etc)
+        exist on a particular "elevation" on the page, which defines which one is visible when they
+        overlap.
       </p>
 
       <h3>Drop shadows</h3>
       <p>
-        In the real world, the shadow an object casts is often a physical manifestation of its elevation.
+        In the real world, the shadow an object casts is often a physical manifestation of its
+        elevation.
       </p>
       <p>
-        The design system provides a set of pre-defined <DocsExternalLink text="SCSS placeholder selectors" href="https://sass-lang.com/documentation/style-rules/placeholder-selectors" /> which allow consistent application of realistic-looking shadows: 1dp, 2dp, and 6dp:
+        The design system provides a set of pre-defined
+        <DocsExternalLink
+          text="SCSS placeholder selectors"
+          href="https://sass-lang.com/documentation/style-rules/placeholder-selectors"
+        />
+        which allow consistent application of realistic-looking shadows: 1dp, 2dp, and 6dp:
       </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>
       <dl>
-        <dt>1dp</dt><dd>containers, panels, controls</dd>
-        <dt>2dp</dt><dd>cards, app bars, buttons, menu, tooltips, snackbars</dd>
-        <dt>6dp</dt><dd>modals, card hover</dd>
+        <dt>1dp</dt>
+        <dd>containers, panels, controls</dd>
+        <dt>2dp</dt>
+        <dd>cards, app bars, buttons, menu, tooltips, snackbars</dd>
+        <dt>6dp</dt>
+        <dd>modals, card hover</dd>
       </dl>
 
-      <p>
-        This can be achieved by with the dropshadow helpers:
-      </p>
+      <p>This can be achieved by with the dropshadow helpers:</p>
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="css">
         @import '~kolibri-design-system/lib/styles/definitions'
 
@@ -121,55 +164,66 @@
 
       <h3>Z-indexes</h3>
       <p>
-        CSS <code>z-index</code> is sometimes used to determine whether some element will show in front of or behind overlapping elements. A common challenge is that <code>z-index</code> values get set to arbitrary numbers, which leads to ever-increasing and bizarre values to force one element to display over another.
+        CSS <code>z-index</code> is sometimes used to determine whether some element will show in
+        front of or behind overlapping elements. A common challenge is that
+        <code>z-index</code> values get set to arbitrary numbers, which leads to ever-increasing and
+        bizarre values to force one element to display over another.
       </p>
       <p>
-        In Kolibri products we try to use the conventional elevation dp values shown above as default <code>z-index</code> values. This ensures that, for example, a custom menu should always show below a custom nav drawer even if there was no coordination between the authors of those components.
+        In Kolibri products we try to use the conventional elevation dp values shown above as
+        default <code>z-index</code> values. This ensures that, for example, a custom menu should
+        always show below a custom nav drawer even if there was no coordination between the authors
+        of those components.
       </p>
       <p>
-        Note that it is <em>not</em> encouraged to set a <code>z-index</code> on every element. There are many reliable ways in CSS to show one item over another and <code>z-index</code> is often used a last resort.
+        Note that it is <em>not</em> encouraged to set a <code>z-index</code> on every element.
+        There are many reliable ways in CSS to show one item over another and
+        <code>z-index</code> is often used a last resort.
       </p>
 
-      <p>
-        The diagram below (with credit to Google) shows the conventional elevations:
-      </p>
+      <p>The diagram below (with credit to Google) shows the conventional elevations:</p>
       <DocsShow>
-        <img src="./3d-elevation.png" style="width: 700px;">
+        <img
+          src="./3d-elevation.png"
+          style="width: 700px"
+        >
       </DocsShow>
       <p>
-        Applying these conventions consistently helps build components that look and interact with each other in predictable ways.
+        Applying these conventions consistently helps build components that look and interact with
+        each other in predictable ways.
       </p>
-
     </DocsPageSection>
 
-    <DocsPageSection title="Easing and timing" anchor="#easing">
+    <DocsPageSection
+      title="Easing and timing"
+      anchor="#easing"
+    >
       <p>
-        Rapid visual transitions for elements that move or change state help users understand what is happening on the page and add a level of polish that makes the app feel smooth and responsive:
+        Rapid visual transitions for elements that move or change state help users understand what
+        is happening on the page and add a level of polish that makes the app feel smooth and
+        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 changes.
+        Easing functions should be applied to every visual state transition, including color
+        changes.
       </p>
       <p>
-        We have a "standard" easing curve as well as curves for for outgoing items (accelerating) and incoming items (decelerating). Apply a transition with default duration <code>$core-time</code> and use one of the SCSS placeholder selectors:
+        We have a "standard" easing curve as well as curves for for outgoing items (accelerating)
+        and incoming items (decelerating). Apply a transition with default duration
+        <code>$core-time</code> and use one of the SCSS placeholder selectors:
       </p>
       <ul>
         <li><code>%md-standard-func</code></li>
         <li><code>%md-accelerate-func</code></li>
         <li><code>%md-decelerate-func</code></li>
       </ul>
-      <p>
-        For example:
-      </p>
+      <p>For example:</p>
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="css">
         @import '~kolibri-design-system/lib/styles/definitions'
 
@@ -182,16 +236,18 @@
         }
       </DocsShowCode>
       <!-- eslint-enable -->
-
     </DocsPageSection>
 
-    <DocsPageSection title="Focus outline" anchor="#focus-outline">
+    <DocsPageSection
+      title="Focus outline"
+      anchor="#focus-outline"
+    >
       <p>
-        We provide a consistent, high-contrast focus highlight that is enabled only when we detect that the user is navigating using the keyboard (i.e. tabbing from item to item). Use the <code>$coreOutline</code> attribute attached to Vue objects for this.
+        We provide a consistent, high-contrast focus highlight that is enabled only when we detect
+        that the user is navigating using the keyboard (i.e. tabbing from item to item). Use the
+        <code>$coreOutline</code> attribute attached to Vue objects for this.
       </p>
     </DocsPageSection>
-
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/tabs.vue b/docs/pages/tabs.vue
index 50837de40..936998558 100644
--- a/docs/pages/tabs.vue
+++ b/docs/pages/tabs.vue
@@ -1,8 +1,15 @@
 <template>
 
   <DocsPageTemplate>
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>Tabs are a design pattern describing a set of tab elements and panels containing content associated with them. Only one panel, the one corresponding to the active tab, is displayed at a time.</p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        Tabs are a design pattern describing a set of tab elements and panels containing content
+        associated with them. Only one panel, the one corresponding to the active tab, is displayed
+        at a time.
+      </p>
 
       <DocsShow>
         <KTabs
@@ -10,25 +17,21 @@
           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>
 
       <p>They can be implemented by means of the following components:</p>
       <ul>
         <li>
-          <DocsLibraryLink component="KTabs" /> is the simplest and recommended way to implement tabs
+          <DocsLibraryLink component="KTabs" /> is the simplest and recommended way to implement
+          tabs
         </li>
         <li>
-          Using <DocsLibraryLink component="KTabsList" /> together with <DocsLibraryLink component="KTabsPanel" /> is an alternative for more complex scenarios
+          Using <DocsLibraryLink component="KTabsList" /> together with
+          <DocsLibraryLink component="KTabsPanel" /> is an alternative for more complex scenarios
         </li>
       </ul>
     </DocsPageSection>
@@ -51,4 +54,4 @@
     },
   };
 
-</script>
\ No newline at end of file
+</script>
diff --git a/docs/pages/textfields/index.vue b/docs/pages/textfields/index.vue
index 7f92ad9fd..b5ba3c5a3 100644
--- a/docs/pages/textfields/index.vue
+++ b/docs/pages/textfields/index.vue
@@ -1,17 +1,24 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        Text fields allow users to enter or edit text within forms and modals. They also support multiple text formats including email and numbers. Additionally, they can trigger the appearance of dropdown menus.
+        Text fields allow users to enter or edit text within forms and modals. They also support
+        multiple text formats including email and numbers. Additionally, they can trigger the
+        appearance of dropdown menus.
       </p>
       <p>
         You can use the <DocsLibraryLink component="KTextbox" /> component to implement text fields.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Text" anchor="#text">
+    <DocsPageSection
+      title="Text"
+      anchor="#text"
+    >
       <ul>
         <li>Do not use placeholder text</li>
         <li>Do not autocapitalize text inputs</li>
@@ -21,146 +28,152 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Layout" anchor="#layout">
+    <DocsPageSection
+      title="Layout"
+      anchor="#layout"
+    >
       <ul>
         <li>Do not wrap text or icons to a new line</li>
-        <li>When text fields are vertically stacked (e.g. in a form), no one field should extend past the form container</li>
+        <li>
+          When text fields are vertically stacked (e.g. in a form), no one field should extend past
+          the form container
+        </li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Assistive elements" anchor="#assistiveelements">
-      <p>
-        Assistive elements provide users with helpful information regarding their input:
-      </p>
+    <DocsPageSection
+      title="Assistive elements"
+      anchor="#assistiveelements"
+    >
+      <p>Assistive elements provide users with helpful information regarding their input:</p>
     </DocsPageSection>
 
     <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>
       </template>
     </DocsDoNot>
 
-    <DocsPageSection title="Iconography" anchor="#iconography">
+    <DocsPageSection
+      title="Iconography"
+      anchor="#iconography"
+    >
       <p>
-        Iconography should be used sparingly and purposefully. Here are common text field and icon pairings:
+        Iconography should be used sparingly and purposefully. Here are common text field and icon
+        pairings:
       </p>
     </DocsPageSection>
 
-    <DocsDoNot style="display: inline-block;">
+    <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>
       </template>
     </DocsDoNot>
 
-    <DocsDoNot style="display: inline-block;">
+    <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;">
+    <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;">
+    <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>
       </template>
     </DocsDoNot>
 
-    <DocsDoNot style="display: inline-block;">
+    <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>
       </template>
     </DocsDoNot>
 
-    <DocsDoNot style="display: inline-block;">
+    <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
+          Include an icon signifier to the left of the label to indicates a theme or category of the
+          dropdown menu options
         </p>
       </template>
     </DocsDoNot>
 
-    <DocsPageSection title="Error text" anchor="#errortext">
+    <DocsPageSection
+      title="Error text"
+      anchor="#errortext"
+    >
       <p>
-        Error text appears when there is an error detected with the user's input. Error text should replace helper text where applicable.
+        Error text appears when there is an error detected with the user's input. Error text should
+        replace helper text where applicable.
       </p>
       <ul>
         <li>Error text is written in sentence case</li>
         <li>Error text should describe specifically how to resolve the error</li>
         <li>Error text disappears when the error is resolved</li>
-        <li>Error text should be paired with an error icon to aid visibility for colorblind users</li>
+        <li>
+          Error text should be paired with an error icon to aid visibility for colorblind users
+        </li>
       </ul>
 
       <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>
 
-    <DocsPageSection title="Advanced configurations" anchor="#advanced">
-      <p>
-        Text fields can have a few behavioral exceptions:
-      </p>
+    <DocsPageSection
+      title="Advanced configurations"
+      anchor="#advanced"
+    >
+      <p>Text fields can have a few behavioral exceptions:</p>
     </DocsPageSection>
 
     <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>
@@ -169,44 +182,61 @@
 
     <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>
 
-
-    <DocsPageSection title="Specifications" anchor="#specifications">
+    <DocsPageSection
+      title="Specifications"
+      anchor="#specifications"
+    >
       <ul>
         <li>Height: 54px</li>
         <li>Min width: 252px</li>
         <li>Corner radius: 2px</li>
         <li>
           Fill color:
-          <DocsInternalLink code text="palette.grey.v_100" href="/colors#palette-grey-v_100" />
+          <DocsInternalLink
+            code
+            text="palette.grey.v_100"
+            href="/colors#palette-grey-v_100"
+          />
         </li>
         <li>
           Bottom stroke color:
-          <DocsInternalLink code text="palette.grey.v_700" href="/colors#palette-grey-v_700" />
+          <DocsInternalLink
+            code
+            text="palette.grey.v_700"
+            href="/colors#palette-grey-v_700"
+          />
         </li>
         <li>
           Bottom stroke focused color:
-          <DocsInternalLink code text="tokens.primary" href="/colors#tokens.primary" />
+          <DocsInternalLink
+            code
+            text="tokens.primary"
+            href="/colors#tokens.primary"
+          />
         </li>
         <li>
           Label text color:
-          <DocsInternalLink code text="palette.grey.v_700" href="/colors#palette-grey-v_700" />
+          <DocsInternalLink
+            code
+            text="palette.grey.v_700"
+            href="/colors#palette-grey-v_700"
+          />
         </li>
         <li>
           Focused text color:
-          <DocsInternalLink code text="tokens.text" href="/colors#tokens.primary" />
+          <DocsInternalLink
+            code
+            text="tokens.text"
+            href="/colors#tokens.primary"
+          />
         </li>
       </ul>
     </DocsPageSection>
-
-
-
   </DocsPageTemplate>
 
 </template>
diff --git a/docs/pages/usekliveregion.vue b/docs/pages/usekliveregion.vue
index 32445206a..7d317a839 100644
--- a/docs/pages/usekliveregion.vue
+++ b/docs/pages/usekliveregion.vue
@@ -1,28 +1,72 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>A composable that offers <code>sendPoliteMessage</code> and <code>sendAssertiveMessage</code> functions that send polite and assertive messages to their corresponding <DocsExternalLink href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" text="ARIA live regions" />.</p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        A composable that offers <code>sendPoliteMessage</code> and
+        <code>sendAssertiveMessage</code> functions that send polite and assertive messages to their
+        corresponding
+        <DocsExternalLink
+          href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"
+          text="ARIA live regions"
+        />.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="When to use live regions" anchor="#usage">
-      <p>Before sending messages to live regions, always research carefully if you really need it for the task ahead. Live regions can be <DocsExternalLink href="https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#avoid-live-regions-if-you-can" text="buggy and inconsistent" />. There are often better alternatives, such as utilizing <DocsExternalLink href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes" text="WAI-ARIA attributes" />. A good rule of thumb is to use live regions only when there's no other way.</p>
+    <DocsPageSection
+      title="When to use live regions"
+      anchor="#usage"
+    >
+      <p>
+        Before sending messages to live regions, always research carefully if you really need it for
+        the task ahead. Live regions can be
+        <DocsExternalLink
+          href="https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#avoid-live-regions-if-you-can"
+          text="buggy and inconsistent"
+        />. There are often better alternatives, such as utilizing
+        <DocsExternalLink
+          href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes"
+          text="WAI-ARIA attributes"
+        />. A good rule of thumb is to use live regions only when there's no other way.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
-      <p>Since polite and assertive regions are inserted to an application's document body automatically <DocsInternalLink href="/installation#install-plugin" text="during the KDS installation process" />, the only thing you need to do to deliver messages is to import and call <code>sendPoliteMessage</code> or <code>sendAssertiveMessage</code> from any place in your application.</p>
-
-      <p>These two methods are also used internally from some KDS components to provide a11y out of the box. Always check that you don't send messages to announce updates that are already being announced from KDS to prevent from duplicate announcements.</p>
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
+      <p>
+        Since polite and assertive regions are inserted to an application's document body
+        automatically
+        <DocsInternalLink
+          href="/installation#install-plugin"
+          text="during the KDS installation process"
+        />, the only thing you need to do to deliver messages is to import and call
+        <code>sendPoliteMessage</code> or <code>sendAssertiveMessage</code> from any place in your
+        application.
+      </p>
+
+      <p>
+        These two methods are also used internally from some KDS components to provide a11y out of
+        the box. Always check that you don't send messages to announce updates that are already
+        being announced from KDS to prevent from duplicate announcements.
+      </p>
 
       <h3>Polite message</h3>
 
-      <p>Sending a polite message updates the text content of <code>aria-live="polite"</code> region. <em>Use it to send messages that can wait to be announced until the user is idle. This message should typically be the most commonly used.</em></p>
+      <p>
+        Sending a polite message updates the text content of <code>aria-live="polite"</code> region.
+        <em>Use it to send messages that can wait to be announced until the user is idle. This
+          message should typically be the most commonly used.</em>
+      </p>
 
       <p>Send polite messages with <code>sendPoliteMessage(message)</code>:</p>
 
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
 
@@ -37,12 +81,17 @@
 
       <h3>Assertive message</h3>
 
-      <p>Sending an assertive message updates the text content of <code>aria-live="assertive"</code> region. <em>It should be used with caution because it disrupts the user's flow. Use it only to send messages that require immediate attention, such as errors.</em></p>
+      <p>
+        Sending an assertive message updates the text content of
+        <code>aria-live="assertive"</code> region.
+        <em>It should be used with caution because it disrupts the user's flow. Use it only to send
+          messages that require immediate attention, such as errors.</em>
+      </p>
 
       <p>Send assertive messages with <code>sendAssertiveMessage(message)</code>:</p>
 
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
 
@@ -56,28 +105,46 @@
       <!-- eslint-enable -->
     </DocsPageSection>
 
-    <DocsPageSection title="Demo" anchor="#demo">
-      <p>Send messages below and turn on your screen reader. You could also observe the content of <code>&lt;div id="k-live-region"&gt;</code> in the browser console, but note that an announcement will be visible for just a very brief moment.</p>
+    <DocsPageSection
+      title="Demo"
+      anchor="#demo"
+    >
+      <p>
+        Send messages below and turn on your screen reader. You could also observe the content of
+        <code>&lt;div id="k-live-region"&gt;</code> in the browser console, but note that an
+        announcement will be visible for just a very brief moment.
+      </p>
 
       <DocsShow language="html">
-        <KTextbox label="Polite message" :value="politeMessageInput" @input="updatePoliteMessage" />
-        <KButton @click="sendPoliteMessage(politeMessageInput)">
-          Send
-        </KButton>
+        <KTextbox
+          label="Polite message"
+          :value="politeMessageInput"
+          @input="updatePoliteMessage"
+        />
+        <KButton @click="sendPoliteMessage(politeMessageInput)"> Send </KButton>
       </DocsShow>
 
       <DocsShow language="html">
-        <KTextbox label="Assertive message" :value="assertiveMessageInput" @input="updateAssertiveMessage" />
-        <KButton @click="sendAssertiveMessage(assertiveMessageInput)">
-          Send
-        </KButton>
+        <KTextbox
+          label="Assertive message"
+          :value="assertiveMessageInput"
+          @input="updateAssertiveMessage"
+        />
+        <KButton @click="sendAssertiveMessage(assertiveMessageInput)"> Send </KButton>
       </DocsShow>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsInternalLink href="/installation#install-plugin" text="KDS installation step" /> that attaches live regions to an application's document body
+          <DocsInternalLink
+            href="/installation#install-plugin"
+            text="KDS installation step"
+          />
+          that attaches live regions to an application's document body
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/pages/usekresponsiveelement.vue b/docs/pages/usekresponsiveelement.vue
index 12fb6f15c..7fff9fdd7 100644
--- a/docs/pages/usekresponsiveelement.vue
+++ b/docs/pages/usekresponsiveelement.vue
@@ -1,8 +1,10 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>Provides the following reactive element's size information:</p>
 
       <dl>
@@ -10,15 +12,22 @@
         <dd>The component's element <code>$el</code> height in pixels (integer)</dd>
 
         <dt><code>elementWidth</code></dt>
-        <dd>The component's element <code>$el</code> width in pixels  (integer)</dd>
+        <dd>The component's element <code>$el</code> width in pixels (integer)</dd>
       </dl>
 
-      <p>Provided these reactive properties are typically used when the available space is determined by the layout which should influence reponsive behavior of a child component rather than relying on the overall window size.</p>
+      <p>
+        Provided these reactive properties are typically used when the available space is determined
+        by the layout which should influence reponsive behavior of a child component rather than
+        relying on the overall window size.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         import useKResponsiveElement from 'kolibri-design-system/lib/composables/useKResponsiveElement';
 
@@ -34,10 +43,14 @@
       <!-- eslint-enable -->
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          See <DocsLibraryLink component="useKResponsiveWindow" /> if you need the window's size reactive information rather than that of a component
+          See <DocsLibraryLink component="useKResponsiveWindow" /> if you need the window's size
+          reactive information rather than that of a component
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/pages/usekresponsivewindow.vue b/docs/pages/usekresponsivewindow.vue
index 1b188e964..d8ed9873b 100644
--- a/docs/pages/usekresponsivewindow.vue
+++ b/docs/pages/usekresponsivewindow.vue
@@ -1,13 +1,25 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>Provides the following reactive window's size information:</p>
 
       <dl>
-        <dt><code>windowIsSmall</code>, <code>windowIsMedium</code>, and <code>windowIsLarge</code></dt>
-        <dd>Returns <code>true</code> when the window width fits the small, medium, or large breakpoint respectively as defined in <DocsInternalLink text="Layout: Responsiveness" href="/layout#responsiveness" /> (boolean)</dd>
+        <dt>
+          <code>windowIsSmall</code>, <code>windowIsMedium</code>, and <code>windowIsLarge</code>
+        </dt>
+        <dd>
+          Returns <code>true</code> when the window width fits the small, medium, or large
+          breakpoint respectively as defined in
+          <DocsInternalLink
+            text="Layout: Responsiveness"
+            href="/layout#responsiveness"
+          />
+          (boolean)
+        </dd>
 
         <dt><code>windowHeight</code></dt>
         <dd>Returns the window height in pixels (integer)</dd>
@@ -16,15 +28,29 @@
         <dd>Returns the window width in pixels (integer)</dd>
 
         <dt><code>windowBreakpoint</code></dt>
-        <dd>Returns one of the granular breakpoints defined as levels in <DocsInternalLink text="Layout: Responsiveness" href="/layout#responsiveness" /> (integer, 0-7)</dd>
+        <dd>
+          Returns one of the granular breakpoints defined as levels in
+          <DocsInternalLink
+            text="Layout: Responsiveness"
+            href="/layout#responsiveness"
+          />
+          (integer, 0-7)
+        </dd>
       </dl>
 
-      <p>Provided reactive properties are typically used to dynamically drive the layout of components by adjusting inline styles, CSS classes, component visibility, or even swapping out one component for a completely different one.</p>
+      <p>
+        Provided reactive properties are typically used to dynamically drive the layout of
+        components by adjusting inline styles, CSS classes, component visibility, or even swapping
+        out one component for a completely different one.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 
@@ -44,20 +70,28 @@
       <!-- eslint-enable -->
     </DocsPageSection>
 
-    <DocsPageSection title="Example" anchor="#example">
-      <p>
-        Consider a Vue file with the following template and script:
-      </p>
+    <DocsPageSection
+      title="Example"
+      anchor="#example"
+    >
+      <p>Consider a Vue file with the following template and script:</p>
       <!-- eslint-disable -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="html">
-        <div class="box" :style="boxStyle">
+        <div
+          class="box"
+          :style="boxStyle"
+        >
           Box 1
         </div>
-        <div class="box" :style="boxStyle">
+        <div
+          class="box"
+          :style="boxStyle"
+        >
           Box 2
         </div>
       </DocsShowCode>
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         import { computed } from '@vue/composition-api';
         import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
@@ -80,31 +114,44 @@
       </DocsShowCode>
       <!-- eslint-enable -->
       <p>
-        This results in two boxes that stack vertically on small screens and otherwise display side-by-side:
+        This results in two boxes that stack vertically on small screens and otherwise display
+        side-by-side:
       </p>
       <DocsShow>
         <div>Window is large: {{ windowIsLarge }}</div>
         <div>
-          <div class="box" :style="boxStyle">
+          <div
+            class="box"
+            :style="boxStyle"
+          >
             Box 1
           </div>
-          <div class="box" :style="boxStyle">
+          <div
+            class="box"
+            :style="boxStyle"
+          >
             Box 2
           </div>
         </div>
       </DocsShow>
-      <p>
-        Try adjusting your browser window size to see the example in action.
-      </p>
+      <p>Try adjusting your browser window size to see the example in action.</p>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          <DocsInternalLink text="Layout: Responsiveness" href="/layout#responsiveness" /> has an overview of breakpoints
+          <DocsInternalLink
+            text="Layout: Responsiveness"
+            href="/layout#responsiveness"
+          />
+          has an overview of breakpoints
         </li>
         <li>
-          See <DocsLibraryLink component="useKResponsiveElement" /> if you need a component's size reactive information rather than that of the window
+          See <DocsLibraryLink component="useKResponsiveElement" /> if you need a component's size
+          reactive information rather than that of the window
         </li>
       </ul>
     </DocsPageSection>
diff --git a/docs/pages/usekshow.vue b/docs/pages/usekshow.vue
index df2d6b137..8f30661c5 100644
--- a/docs/pages/usekshow.vue
+++ b/docs/pages/usekshow.vue
@@ -1,24 +1,31 @@
 <template>
 
   <DocsPageTemplate apiDocs>
-
-    <DocsPageSection title="Overview" anchor="#overview">
-      <p>A composable that offers the <code>show</code> reactive function. This function guarantees that something will be displayed at least for a specified duration after an initial trigger. This is typically used to prevent a jarring user experience when showing or hiding certain elements. For example, it can be used to ensure that a loader remains visible for a certain amount of time, even when the related data has already been loaded.</p>
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
+      <p>
+        A composable that offers the <code>show</code> reactive function. This function guarantees
+        that something will be displayed at least for a specified duration after an initial trigger.
+        This is typically used to prevent a jarring user experience when showing or hiding certain
+        elements. For example, it can be used to ensure that a loader remains visible for a certain
+        amount of time, even when the related data has already been loaded.
+      </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
+    <DocsPageSection
+      title="Usage"
+      anchor="#usage"
+    >
       <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 -->
-      <!-- prevent prettier from changing indentation -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
         import useKShow from 'kolibri-design-system/lib/composables/useKShow';
 
@@ -32,9 +39,17 @@
       <!-- eslint-enable -->
     </DocsPageSection>
 
-    <DocsPageSection title="Example" anchor="#example">
-      <p>This is a simulation of a typical use-case of showing a loader while fetching data. You can set your own fetch request length and minimum visible time, and then hit the fetch button to see the output.</p>
-
+    <DocsPageSection
+      title="Example"
+      anchor="#example"
+    >
+      <p>
+        This is a simulation of a typical use-case of showing a loader while fetching data. You can
+        set your own fetch request length and minimum visible time, and then hit the fetch button to
+        see the output.
+      </p>
+
+      <!-- prettier-ignore -->
       <DocsShowCode language="html">
         <KTransition kind="component-fade-out-in">
           <KCircularLoader
@@ -50,15 +65,28 @@
         <div>
           <span :style="{ marginLeft: '8px' }">Output:</span>
           <DocsShow>
-            <div :style="{ width: '200px', height: '160px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '12px 2px 4px 2px' }">
+            <div
+              :style="{
+                width: '200px',
+                height: '160px',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                padding: '12px 2px 4px 2px',
+              }"
+            >
               <div>
                 <KTransition kind="component-fade-out-in">
                   <KCircularLoader
-                    v-if="show('key-1', isFetching, minVisibleTime )"
+                    v-if="show('key-1', isFetching, minVisibleTime)"
                     key="loader"
                     disableDefaultTransition
                   />
-                  <div v-else key="message" :style="{ textAlign: 'center' }">
+                  <div
+                    v-else
+                    key="message"
+                    :style="{ textAlign: 'center' }"
+                  >
                     Loaded!
                   </div>
                 </KTransition>
@@ -77,7 +105,7 @@
               v-model="fetchingTimeInput"
               type="number"
               :style="{ display: 'block' }"
-            >  
+            >
           </span>
           <span>
             <label :style="{ display: 'block', marginTop: '12px' }">
@@ -87,32 +115,52 @@
               v-model="minVisibleTimeInput"
               type="number"
               :style="{ display: 'block' }"
-            >  
+            >
           </span>
-          <KButton :style="{ marginTop: '24px' }" @click="fetchData">
+          <KButton
+            :style="{ marginTop: '24px' }"
+            @click="fetchData"
+          >
             Fetch data
           </KButton>
         </div>
       </div>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
+    <DocsPageSection
+      title="Related"
+      anchor="#related"
+    >
       <ul>
         <li>
-          Some components offer a simpler interfance to achieve the same effect when there is no need to be switching between more components. For example, see <DocsInternalLink href="/kcircularloader#prop:minVisibleTime">
+          Some components offer a simpler interfance to achieve the same effect when there is no
+          need to be switching between more components. For example, see
+          <DocsInternalLink href="/kcircularloader#prop:minVisibleTime">
             KCircularLoader's <code>minVisibleTime</code>
           </DocsInternalLink>.
         </li>
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Parameters" anchor="#parameters">
+    <DocsPageSection
+      title="Parameters"
+      anchor="#parameters"
+    >
       <PropsTable :api="params" />
     </DocsPageSection>
 
-    <DocsPageSection title="Returns" anchor="#returns">
+    <DocsPageSection
+      title="Returns"
+      anchor="#returns"
+    >
       <p><span style="font-weight: bold">Type:</span> <code>boolean</code></p>
-      <p><span style="font-weight: bold">Description:</span> Returns <code>true</code> after <code>shouldShow</code> becomes truthy and keeps returning <code>true</code> for the duration of <code>minVisibleTime</code> (even when <code>shouldShow</code> changes back to falsy meanwhile). After <code>minVisibleTime</code> elapses and when <code>shouldShow</code> is falsy already, it returns <code>false</code>.</p> 
+      <p>
+        <span style="font-weight: bold">Description:</span> Returns <code>true</code> after
+        <code>shouldShow</code> becomes truthy and keeps returning <code>true</code> for the
+        duration of <code>minVisibleTime</code> (even when <code>shouldShow</code> changes back to
+        falsy meanwhile). After <code>minVisibleTime</code> elapses and when
+        <code>shouldShow</code> is falsy already, it returns <code>false</code>.
+      </p>
     </DocsPageSection>
   </DocsPageTemplate>
 
@@ -148,7 +196,7 @@
         minVisibleTime.value = minVisibleTimeInput.value;
         isFetching.value = true;
 
-        timeoutId = setTimeout(function() {
+        timeoutId = setTimeout(function () {
           isFetching.value = false;
         }, fetchingTime.value);
       }
diff --git a/docs/pages/writing.vue b/docs/pages/writing.vue
index 7bc4d2d67..1e5493436 100644
--- a/docs/pages/writing.vue
+++ b/docs/pages/writing.vue
@@ -1,18 +1,34 @@
 <template>
 
   <DocsPageTemplate>
-
-    <DocsPageSection title="Overview" anchor="#overview">
+    <DocsPageSection
+      title="Overview"
+      anchor="#overview"
+    >
       <p>
-        In general, we follow <DocsExternalLink href="https://material.io/archive/guidelines/style/writing.html" text="Material Design's writing guidelines" />. Our slightly adapted version is below.
+        In general, we follow
+        <DocsExternalLink
+          href="https://material.io/archive/guidelines/style/writing.html"
+          text="Material Design's writing guidelines"
+        />. Our slightly adapted version is below.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Language &amp; tone" anchor="#language">
+    <DocsPageSection
+      title="Language &amp; tone"
+      anchor="#language"
+    >
       <p>Most of these tips are the same as Material's guidelines:</p>
       <ul>
         <li>Address the user as 'you', and avoid using 'we'</li>
-        <li>Use the <DocsExternalLink href="https://en.wikipedia.org/wiki/Singular_they" text="gender-neutral singular" /> 'they'</li>
+        <li>
+          Use the
+          <DocsExternalLink
+            href="https://en.wikipedia.org/wiki/Singular_they"
+            text="gender-neutral singular"
+          />
+          'they'
+        </li>
         <li>Be concise</li>
         <li>Write in the present tense</li>
         <li>Write simply and directly</li>
@@ -24,11 +40,20 @@
         <li>Communicate only essential details</li>
       </ul>
       <p>
-        In Kolibri products, avoid creating new Proper Nouns in casual messages. For example, "You are a coach", not "You are a Coach". <DocsInternalLink href="/glossary" text="See also the Glossary page" /> which outlines terms that have a specific meaning in the Kolibri product ecosystem.
+        In Kolibri products, avoid creating new Proper Nouns in casual messages. For example, "You
+        are a coach", not "You are a Coach".
+        <DocsInternalLink
+          href="/glossary"
+          text="See also the Glossary page"
+        />
+        which outlines terms that have a specific meaning in the Kolibri product ecosystem.
       </p>
     </DocsPageSection>
 
-    <DocsPageSection title="Punctuation" anchor="#punctuation">
+    <DocsPageSection
+      title="Punctuation"
+      anchor="#punctuation"
+    >
       <ul>
         <li>Use "Sentence case" capitalization for titles, not "Title Case" capitalization</li>
         <li>Skip periods and unnecessary punctuation</li>
@@ -38,30 +63,60 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Internationalization" anchor="#i18n">
+    <DocsPageSection
+      title="Internationalization"
+      anchor="#i18n"
+    >
       <p>
-        All user-facing text and iconography needs to be internationalized. For text strings, numbers, dates, and times, this means "wrapping" the messages such that they can be mapped to messages in other languages using the <DocsExternalLink href="https://formatjs.io/guides/message-syntax/" text="ICU message syntax" />. See our <DocsExternalLink href="https://kolibri-dev.readthedocs.io/en/develop/i18n.html" text="developer docs" /> for more information.
+        All user-facing text and iconography needs to be internationalized. For text strings,
+        numbers, dates, and times, this means "wrapping" the messages such that they can be mapped
+        to messages in other languages using the
+        <DocsExternalLink
+          href="https://formatjs.io/guides/message-syntax/"
+          text="ICU message syntax"
+        />. See our
+        <DocsExternalLink
+          href="https://kolibri-dev.readthedocs.io/en/develop/i18n.html"
+          text="developer docs"
+        />
+        for more information.
       </p>
       <p>
-        Phrases that might not be globally understood should be avoided because they will be cause issues with translation.
+        Phrases that might not be globally understood should be avoided because they will be cause
+        issues with translation.
       </p>
       <p>
-        Note that currently our i18n framework does not support formatting such as bold or italics within a translated string.
+        Note that currently our i18n framework does not support formatting such as bold or italics
+        within a translated string.
       </p>
       <p>
-        The built-in components in this guide support right-to-left languages out of the box. If you design or build custom components, these need to be fully tested using an RTL language. We use a <DocsExternalLink href="https://www.npmjs.com/package/webpack-rtl-plugin" text="webpack plugin" /> to automatically flip most of the CSS, and the global <code>isRtl</code> attribute on all Vue components can be used to customize behavior if necessary.
+        The built-in components in this guide support right-to-left languages out of the box. If you
+        design or build custom components, these need to be fully tested using an RTL language. We
+        use a
+        <DocsExternalLink
+          href="https://www.npmjs.com/package/webpack-rtl-plugin"
+          text="webpack plugin"
+        />
+        to automatically flip most of the CSS, and the global <code>isRtl</code> attribute on all
+        Vue components can be used to customize behavior if necessary.
       </p>
       <p>
-        To properly support right-to-left languages and bi-directional text in custom components, follow the following guidelines:
+        To properly support right-to-left languages and bi-directional text in custom components,
+        follow the following guidelines:
       </p>
       <ul>
-        <li>No displayed user data or content should have <code>right</code> or <code>left</code> set for the <code>text-align</code> property (<code>center</code> is OK)</li>
+        <li>
+          No displayed user data or content should have <code>right</code> or <code>left</code> set
+          for the <code>text-align</code> property (<code>center</code> is OK)
+        </li>
         <li>All displayed user data and content should have <code>dir="auto"</code></li>
-        <li><code>dir="auto"</code> should not generally be set on 'wrapper' nodes - it should be as close to the text as possible</li>
+        <li>
+          <code>dir="auto"</code> should not generally be set on 'wrapper' nodes - it should be as
+          close to the text as possible
+        </li>
         <li>Translated "app text" does not generally need to have <code>dir="auto"</code></li>
       </ul>
     </DocsPageSection>
-
   </DocsPageTemplate>
 
 </template>
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/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index 58c1466f4..589d7813b 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -4,7 +4,11 @@
     v-show="showSingleItem || crumbs.length > 1"
     :class="{ 'breadcrumbs-collapsed': collapsedCrumbs.length }"
   >
-    <nav class="breadcrumbs" v-bind="$attrs" :aria-label="$attrs.ariaLabel">
+    <nav
+      class="breadcrumbs"
+      v-bind="$attrs"
+      :aria-label="$attrs.ariaLabel"
+    >
       <div
         v-show="collapsedCrumbs.length"
         class="breadcrumbs-dropdown-wrapper"
@@ -33,10 +37,16 @@
                 :to="crumb.link"
               >
                 <template #text="{ text }">
-                  <span class="breadcrumbs-crumb-text" dir="auto">{{ text }}</span>
+                  <span
+                    class="breadcrumbs-crumb-text"
+                    dir="auto"
+                  >{{ text }}</span>
                 </template>
               </KRouterLink>
-              <span v-else dir="auto">{{ crumb.text }}</span>
+              <span
+                v-else
+                dir="auto"
+              >{{ crumb.text }}</span>
             </li>
           </ol>
         </div>
@@ -80,9 +90,11 @@
       </ol>
     </nav>
 
-
     <!-- This is a duplicate of breacrumbs-visible-items to help to reference sizes. -->
-    <div class="breadcrumbs breadcrumbs-offscreen" aria-hidden="true">
+    <div
+      class="breadcrumbs breadcrumbs-offscreen"
+      aria-hidden="true"
+    >
       <ol class="breadcrumbs-visible-items">
         <template v-for="(crumb, index) in crumbs">
           <li
@@ -91,7 +103,12 @@
             :key="index"
             class="breadcrumbs-visible-item breadcrumbs-visible-item-notlast"
           >
-            <KRouterLink v-if="crumb.link" :text="crumb.text" :to="crumb.link" tabindex="-1">
+            <KRouterLink
+              v-if="crumb.link"
+              :text="crumb.text"
+              :to="crumb.link"
+              tabindex="-1"
+            >
               <template #text="{ text }">
                 <span class="breadcrumbs-crumb-text">{{ text }}</span>
               </template>
@@ -107,7 +124,7 @@
           >
             <span
               class="breadcrumbs-crumb-text"
-              :style="{ maxWidth: lastBreadcrumbMaxWidth }"  
+              :style="{ maxWidth: lastBreadcrumbMaxWidth }"
             >
               {{ crumb.text }}
             </span>
@@ -250,7 +267,7 @@
               }
 
               lastCrumbWidth = Math.ceil(
-                tempCrumbs[tempCrumbs.length - 1].ref[0].getBoundingClientRect().width
+                tempCrumbs[tempCrumbs.length - 1].ref[0].getBoundingClientRect().width,
               );
 
               if (lastCrumbWidth > remainingWidth) {
@@ -273,8 +290,9 @@
             // 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`;
+              this.lastBreadcrumbMaxWidth = `${
+                DEFAULT_LAST_BREADCRUMB_MAX_WIDTH + remainingWidth
+              }px`;
             }
           });
         }
diff --git a/lib/KCheckbox.vue b/lib/KCheckbox.vue
index a9927ebd6..5ca2cf837 100644
--- a/lib/KCheckbox.vue
+++ b/lib/KCheckbox.vue
@@ -6,7 +6,6 @@
     @click="toggleCheck"
   >
     <div class="tr">
-
       <div class="k-checkbox">
         <input
           :id="id"
@@ -31,24 +30,23 @@
         />
         <KIcon
           v-else-if="!indeterminate && checked"
-          :style="[ notBlank, activeOutline ]"
+          :style="[notBlank, activeOutline]"
           class="checkbox-icon"
           icon="checked"
         />
         <KIcon
           v-else
-          :style="[ blank, activeOutline ]"
+          :style="[blank, activeOutline]"
           class="checkbox-icon"
           icon="unchecked"
         />
-
       </div>
 
       <label
         :dir="labelDir"
         class="k-checkbox-label"
         :for="id"
-        :class="{ 'visuallyhidden': !showLabel }"
+        :class="{ visuallyhidden: !showLabel }"
         :style="labelStyle"
         @click.prevent
       >
@@ -59,7 +57,10 @@
         <template v-else>
           {{ label }}
         </template>
-        <div v-if="description" class="description">
+        <div
+          v-if="description"
+          class="description"
+        >
           {{ description }}
         </div>
       </label>
diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue
index 38aa3c3cb..f28eca95e 100644
--- a/lib/KDateRange/KDateCalendar.vue
+++ b/lib/KDateRange/KDateCalendar.vue
@@ -21,31 +21,78 @@
         @click="goNextMonth"
       />
       <div class="calendar-month-left">
-        <div class="months-text" data-test="previousMonth">
+        <div
+          class="months-text"
+          data-test="previousMonth"
+        >
           {{ monthString(activeMonth) + ' ' + activeYearStart }}
         </div>
-        <ul v-for="weekIndex in 6" :key="weekIndex" class="calendar-days">
+        <ul
+          v-for="weekIndex in 6"
+          :key="weekIndex"
+          class="calendar-days"
+        >
           <li
             v-for="dayInWeekIndex in numOfDays"
             :key="dayInWeekIndex"
             :style="[
-              (selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'first') ||
-                (selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second') ?
-                  { backgroundColor: $themeBrand.primary.v_100 } : {}
+              selectionOrder(
+                weekIndex,
+                dayInWeekIndex,
+                'first',
+                activeMonthDay,
+                activeMonthDate,
+              ) === 'first' ||
+                selectionOrder(
+                  weekIndex,
+                  dayInWeekIndex,
+                  'first',
+                  activeMonthDay,
+                  activeMonthDate,
+                ) === 'second'
+                ? { backgroundColor: $themeBrand.primary.v_100 }
+                : {},
+            ]"
+            :class="[
+              {
+                'calendar-days-disabled':
+                  isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) ||
+                  isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay),
+                'selected-first':
+                  selectionOrder(
+                    weekIndex,
+                    dayInWeekIndex,
+                    'first',
+                    activeMonthDay,
+                    activeMonthDate,
+                  ) === 'first',
+                'selected-second':
+                  selectionOrder(
+                    weekIndex,
+                    dayInWeekIndex,
+                    'first',
+                    activeMonthDay,
+                    activeMonthDate,
+                  ) === 'second',
+              },
             ]"
-            :class="[{
-              'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) || isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay),
-              'selected-first': ( selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'first'),
-              'selected-second': ( selectionOrder(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate) === 'second'),
-            }]"
             @click="selectFirstItem(weekIndex, dayInWeekIndex)"
           >
             <KDateDay
               :day="getDayCell(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate)"
-              :isSelected="isDateSelected(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate)"
-              :isInRange="isDateInRange(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate)"
-              :isDisabled="isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) || isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay)"
-              :isLastDay="isLastDay(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate)"
+              :isSelected="
+                isDateSelected(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate)
+              "
+              :isInRange="
+                isDateInRange(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate)
+              "
+              :isDisabled="
+                isDateDisabled(weekIndex, dayInWeekIndex, activeMonthDay, activeMonthDate) ||
+                  isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay)
+              "
+              :isLastDay="
+                isLastDay(weekIndex, dayInWeekIndex, 'first', activeMonthDay, activeMonthDate)
+              "
               :isEndOfWeek="dayInWeekIndex === 7"
               :isStartOfWeek="dayInWeekIndex === 1"
               :activeMonth="activeMonth"
@@ -54,31 +101,104 @@
         </ul>
       </div>
       <div class="calendar-month-right">
-        <div class="months-text" data-test="currentMonth">
+        <div
+          class="months-text"
+          data-test="currentMonth"
+        >
           {{ monthString(nextActiveMonth) + ' ' + activeYearEnd }}
         </div>
-        <ul v-for="weekIndex in 6" :key="weekIndex" class="calendar-days">
+        <ul
+          v-for="weekIndex in 6"
+          :key="weekIndex"
+          class="calendar-days"
+        >
           <li
             v-for="dayInWeekIndex in numOfDays"
             :key="dayInWeekIndex"
             :style="[
-              (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'first') ||
-                (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'second') ?
-                  { backgroundColor: $themeBrand.primary.v_100 } : {}
+              selectionOrder(
+                weekIndex,
+                dayInWeekIndex,
+                'second',
+                nextActiveMonthDay,
+                nextActiveMonthDate,
+              ) === 'first' ||
+                selectionOrder(
+                  weekIndex,
+                  dayInWeekIndex,
+                  'second',
+                  nextActiveMonthDay,
+                  nextActiveMonthDate,
+                ) === 'second'
+                ? { backgroundColor: $themeBrand.primary.v_100 }
+                : {},
+            ]"
+            :class="[
+              {
+                'calendar-days-disabled':
+                  isDateDisabled(
+                    weekIndex,
+                    dayInWeekIndex,
+                    nextActiveMonthDay,
+                    nextActiveMonthDate,
+                  ) || isDateDisabledRight(weekIndex, dayInWeekIndex, nextActiveMonthDay),
+                'selected-first':
+                  selectionOrder(
+                    weekIndex,
+                    dayInWeekIndex,
+                    'second',
+                    nextActiveMonthDay,
+                    nextActiveMonthDate,
+                  ) === 'first',
+                'selected-second':
+                  selectionOrder(
+                    weekIndex,
+                    dayInWeekIndex,
+                    'second',
+                    nextActiveMonthDay,
+                    nextActiveMonthDate,
+                  ) === 'second',
+              },
             ]"
-            :class="[{
-              'calendar-days--disabled': isDateDisabled(weekIndex, dayInWeekIndex, nextActiveMonthDay, nextActiveMonthDate) || isDateDisabledRight(weekIndex, dayInWeekIndex, nextActiveMonthDay),
-              'selected-first': (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'first'),
-              'selected-second': (selectionOrder(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate) === 'second')
-            }]"
             @click="selectSecondItem(weekIndex, dayInWeekIndex)"
           >
             <KDateDay
               :day="getDayCell(weekIndex, dayInWeekIndex, nextActiveMonthDay, nextActiveMonthDate)"
-              :isSelected="isDateSelected(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate)"
-              :isInRange="isDateInRange(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate)"
-              :isDisabled="isDateDisabled(weekIndex, dayInWeekIndex, nextActiveMonthDay, nextActiveMonthDate) || isDateDisabledRight(weekIndex, dayInWeekIndex, nextActiveMonthDay)"
-              :isLastDay="isLastDay(weekIndex, dayInWeekIndex, 'second', nextActiveMonthDay, nextActiveMonthDate)"
+              :isSelected="
+                isDateSelected(
+                  weekIndex,
+                  dayInWeekIndex,
+                  'second',
+                  nextActiveMonthDay,
+                  nextActiveMonthDate,
+                )
+              "
+              :isInRange="
+                isDateInRange(
+                  weekIndex,
+                  dayInWeekIndex,
+                  'second',
+                  nextActiveMonthDay,
+                  nextActiveMonthDate,
+                )
+              "
+              :isDisabled="
+                isDateDisabled(
+                  weekIndex,
+                  dayInWeekIndex,
+                  nextActiveMonthDay,
+                  nextActiveMonthDate,
+                ) || isDateDisabledRight(weekIndex, dayInWeekIndex, nextActiveMonthDay)
+              "
+              :isLastDay="
+                isLastDay(
+                  weekIndex,
+                  dayInWeekIndex,
+                  'second',
+                  nextActiveMonthDay,
+                  nextActiveMonthDate,
+                )
+              "
               :isEndOfWeek="dayInWeekIndex === 7"
               :isStartOfWeek="dayInWeekIndex === 1"
               :activeMonth="nextActiveMonth"
@@ -245,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);
       },
@@ -254,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);
       },
@@ -284,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 &&
@@ -324,7 +444,8 @@
         return !(result > 0 && result <= activeMonthDate);
       },
       /**
-       * returns true for disabled dates before the firstAllowedDate; should be visible but grayed out
+       * returns true for disabled dates before the firstAllowedDate;
+       * should be visible but grayed out
        */
       isDateDisabledLeft(weekIndex, dayInWeekIndex, activeMonthDay) {
         const result = this.getDayIndexInMonth(weekIndex, dayInWeekIndex, activeMonthDay);
@@ -347,7 +468,7 @@
           weekIndex,
           dayInWeekIndex,
           nextActiveMonthDay,
-          nextActiveMonthDate
+          nextActiveMonthDate,
         );
         const lastDay =
           key === 'first'
@@ -454,7 +575,7 @@
     margin-top: 6px;
   }
 
-  .calendar-days li.calendar-days--disabled {
+  .calendar-days li.calendar-days-disabled {
     pointer-events: none;
     cursor: not-allowed;
     opacity: 0.3;
@@ -470,4 +591,4 @@
     border-bottom-right-radius: 60px;
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/lib/KDateRange/KDateDay.vue b/lib/KDateRange/KDateDay.vue
index bceab329c..59bef559d 100644
--- a/lib/KDateRange/KDateDay.vue
+++ b/lib/KDateRange/KDateDay.vue
@@ -8,18 +8,26 @@
     :style="[inRangeStyle, selectedStyle]"
     :disabled="isDisabled"
     :aria-hidden="isDisabled"
-    :class="[{
-      'calendar-days-selected': isSelected,
-      'calendar-days-in-range': isInRange,
-      'end-of-week': isEndOfWeek,
-      'start-of-week': isStartOfWeek,
-      'first-day': isFirstDay,
-      'last-day': isLastDay,
-    }]"
+    :class="[
+      {
+        'calendar-days-selected': isSelected,
+        'calendar-days-in-range': isInRange,
+        'end-of-week': isEndOfWeek,
+        'start-of-week': isStartOfWeek,
+        'first-day': isFirstDay,
+        'last-day': isLastDay,
+      },
+    ]"
   >
     {{ day }}
-    <span aria-hidden="true" class="k-date-vhidden">{{ day }}</span>
-    <span :aria-hidden="isDisabled" class="k-date-vhidden">{{ toMonthName(activeMonth) }}</span>
+    <span
+      aria-hidden="true"
+      class="k-date-vhidden"
+    >{{ day }}</span>
+    <span
+      :aria-hidden="isDisabled"
+      class="k-date-vhidden"
+    >{{ toMonthName(activeMonth) }}</span>
   </KButton>
 
 </template>
@@ -69,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() {
@@ -149,4 +157,4 @@
     border: 0;
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/lib/KDateRange/KDateInput.vue b/lib/KDateRange/KDateInput.vue
index 7e8721c89..3149b5167 100644
--- a/lib/KDateRange/KDateInput.vue
+++ b/lib/KDateRange/KDateInput.vue
@@ -1,7 +1,12 @@
 <template>
 
   <div>
-    <fieldset :aria-label="legendText" class="date-input-fieldset" :aria-describedby="inputId" aria-live="polite">
+    <fieldset
+      :aria-label="legendText"
+      class="date-input-fieldset"
+      :aria-describedby="inputId"
+      aria-live="polite"
+    >
       <KTextBox
         :ref="inputRef"
         :value="value"
@@ -16,7 +21,10 @@
         @input="handleInput"
       />
       <span class="k-date-vhidden">
-        <span v-if="value" :id="inputId">
+        <span
+          v-if="value"
+          :id="inputId"
+        >
           {{ dateDescription }}
         </span>
       </span>
diff --git a/lib/KDateRange/ValidationMachine.js b/lib/KDateRange/ValidationMachine.js
index 59d099c39..7cec21e52 100644
--- a/lib/KDateRange/ValidationMachine.js
+++ b/lib/KDateRange/ValidationMachine.js
@@ -36,7 +36,8 @@ const isEndDateAfterStart = (startDate, endDate) => {
 
 /**
  * @params dateStr - The input date string value
- * @params lastAllowedDate - date passed to context object that contrains dateStr to before this date
+ * @params lastAllowedDate - date passed to context object that
+ * constrains dateStr to before this date
  * Returns if the given date string is after the last allowed date
  **/
 const isDateAfterLastAllowed = (dateStr, lastAllowedDate) => {
@@ -49,7 +50,8 @@ const isDateAfterLastAllowed = (dateStr, lastAllowedDate) => {
 
 /**
  * @params dateStr - The input date string value
- * @params firstAllowedDate - date passed to context object that contrains dateStr to after this date
+ * @params firstAllowedDate - date passed to context object that
+ * constrains dateStr to after this date
  * Returns if the given date string is before the first allowed date
  **/
 const isDateBeforeFirstAllowed = (dateStr, firstAllowedDate) => {
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 917cbb372..ca0a5164a 100644
--- a/lib/KDateRange/index.vue
+++ b/lib/KDateRange/index.vue
@@ -13,7 +13,11 @@
     <div>
       <!-- @slot Description of modal -->
       <slot name="description">
-        <p id="modal-description" ref="description" class="description">
+        <p
+          id="modal-description"
+          ref="description"
+          class="description"
+        >
           {{ description }}
         </p>
       </slot>
@@ -220,7 +224,7 @@
         firstAllowedDate: this.firstAllowedDate,
       };
       this.validationMachine = interpret(
-        validationMachine.withContext({ ...initialContext, ...currentContext })
+        validationMachine.withContext({ ...initialContext, ...currentContext }),
       );
       this.validationMachine.start();
 
@@ -333,4 +337,4 @@
     width: 49%;
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
index 4510f84ef..426619456 100644
--- a/lib/KDropdownMenu.vue
+++ b/lib/KDropdownMenu.vue
@@ -4,7 +4,7 @@
     <UiPopover
       v-if="trigger"
       ref="popover"
-      :z-index="100"
+      :zIndex="100"
       :trigger="trigger"
       :containFocus="true"
       :dropdownPosition="position"
@@ -17,11 +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"
       />
     </UiPopover>
   </div>
@@ -62,7 +62,8 @@
     },
     props: {
       /**
-       * The dropdown menu popover flips its position to avoid overflows within the parent. Setting it to false disables the flipping behavior.
+       * The dropdown menu popover flips its position to avoid overflows within the parent.
+       * Setting it to false disables the flipping behavior.
        */
       constrainToScrollParent: {
         type: Boolean,
@@ -145,9 +146,11 @@
       window.removeEventListener('keydown', this.handleOpenMenuNavigation, true);
     },
     methods: {
-      handleOpen() {
+      async handleOpen() {
         this.lastFocusElement = document.activeElement;
-        this.$nextTick(() => this.$nextTick(() => this.setFocus()));
+        await this.$nextTick();
+        await this.$nextTick();
+        this.setFocus();
         window.addEventListener('keydown', this.handleOpenMenuNavigation, true);
       },
       setFocus() {
@@ -215,7 +218,8 @@
           //Chekcing if next sibling is divider and skipping it
           const sibling = this.getNextFocusableSibling(focusedElement);
           sibling ? this.$nextTick(() => sibling.focus()) : this.$nextTick(() => this.setFocus());
-          // if a TAB key, not an arrow key, close the popover and advance to next item in the tab index
+          // if a TAB key, not an arrow key,
+          // close the popover and advance to next item in the tab index
         } else if ((event.key == 'Tab' || event.keyCode == 9) && popoverIsOpen) {
           this.$emit('tab', event);
           this.closePopover();
diff --git a/lib/KFocusTrap.vue b/lib/KFocusTrap.vue
index 9fadf7eae..128eb8cf9 100644
--- a/lib/KFocusTrap.vue
+++ b/lib/KFocusTrap.vue
@@ -10,9 +10,7 @@
     ></div>
 
     <!--@slot Default slot where the focusable content will be rendered -->
-    <slot>
-
-    </slot>
+    <slot> </slot>
 
     <!-- Focus trap ending point. If not disabled, focuses this last when tabbing. -->
     <div
@@ -107,8 +105,10 @@
 
 
 <style scoped>
+
   .focus-trap-first,
   .focus-trap-last {
     outline: none; /* Prevents focus outline */
   }
+
 </style>
diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js
index bf2f7c279..3a905f684 100644
--- a/lib/KIcon/iconDefinitions.js
+++ b/lib/KIcon/iconDefinitions.js
@@ -188,8 +188,8 @@ const KolibriIcons = {
 
   // Miscellaneous
   dot: { icon: require('./precompiled-icons/material-icons/brightness_1/baseline.vue').default },
-  // Setting a color for the a11y icon - it doesn't use the color for its fill, but this ensures it's
-  // displayed alongside other icons with a defaultColor
+  // Setting a color for the a11y icon - it doesn't use the color for its fill,
+  // but this ensures it's displayed alongside other icons with a defaultColor
   a11y: {
     icon: require('./precompiled-icons/le/a11y.vue').default,
     defaultColor: themeTokens().text,
@@ -207,7 +207,7 @@ const KolibriIcons = {
   },
   info: { icon: require('./precompiled-icons/material-icons/info/baseline.vue').default },
   infoOutline: { icon: require('./precompiled-icons/material-icons/info/outline.vue').default },
-  // infoPrimary is Primarily in place for use in RST docs as we cannot change the fill dynamically in RST
+  // infoPrimary is Primarily in place for use in RST docs as we cannot change the fill dynamically
   infoPrimary: {
     icon: require('./precompiled-icons/material-icons/info/baseline.vue').default,
     defaultColor: themeTokens().primary,
@@ -397,8 +397,8 @@ const KolibriIcons = {
   collapseAll: { icon: require('./precompiled-icons/mdi/collapse-all.vue').default },
   expandAll: { icon: require('./precompiled-icons/mdi/expand-all.vue').default },
   dragHorizontal: { icon: require('./precompiled-icons/le/drag_horizontal.vue').default },
-  // Setting a color for the points* icons - they don't use the color for their fill, but this ensures they're
-  // displayed alongside other icons with a defaultColor
+  // Setting a color for the points* icons - they don't use the color for their fill,
+  // but this ensures they're displayed alongside other icons with a defaultColor
   pointsActive: {
     icon: require('./precompiled-icons/le/pointsLeafActive.vue').default,
     defaultColor: themeTokens().text,
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/KImg/index.vue b/lib/KImg/index.vue
index f5d9936df..0816c9f82 100644
--- a/lib/KImg/index.vue
+++ b/lib/KImg/index.vue
@@ -7,7 +7,7 @@
         :alt="alternativeText"
         :style="imgStyles"
         @error="onError"
-        @load="onLoad" 
+        @load="onLoad"
       >
       <span
         v-if="$slots.placeholder"
@@ -19,7 +19,7 @@
 
       <span
         v-if="$slots.topLeft"
-        :style="{ position: 'absolute', top: '0',left: '0', zIndex: '2' }"
+        :style="{ position: 'absolute', top: '0', left: '0', zIndex: '2' }"
       >
         <!-- @slot Places content on top of an image, to its top left corner. -->
         <slot name="topLeft"></slot>
@@ -45,7 +45,6 @@
         <!-- @slot Places content on top of an image, to its bottom right corner. -->
         <slot name="bottomRight"></slot>
       </span>
-
     </span>
   </span>
 
@@ -331,7 +330,8 @@
          */
         if (this.$listeners && this.$listeners.error) {
           /**
-           * Emitted when the image fails to load or a misconfiguration error occurs. Expect either an `Event` or `Error`
+           * Emitted when the image fails to load or a misconfiguration error occurs.
+           * Expect either an `Event` or `Error`
            */
           this.$emit('error', event);
         } else {
diff --git a/lib/KLabeledIcon.vue b/lib/KLabeledIcon.vue
index c9332540a..0bb03f3ca 100644
--- a/lib/KLabeledIcon.vue
+++ b/lib/KLabeledIcon.vue
@@ -1,15 +1,29 @@
 <template>
 
-  <span class="labeled-icon-wrapper" v-on="$listeners">
+  <span
+    class="labeled-icon-wrapper"
+    v-on="$listeners"
+  >
     <span class="icon">
       <!-- @slot Optional slot as alternative to `icon` prop -->
       <slot name="icon">
-        <KIcon v-if="icon" :icon="icon" :color="color || $themeTokens.text" style="top: 2px;" />
+        <KIcon
+          v-if="icon"
+          :icon="icon"
+          :color="color || $themeTokens.text"
+          style="top: 2px"
+        />
       </slot>
     </span>
-    <span class="label" :style="labelStyle">
+    <span
+      class="label"
+      :style="labelStyle"
+    >
       <!-- nest slot inside span to get alignment and flow correct for mixed RLT/LTR -->
-      <span dir="auto" class="debug-warning">
+      <span
+        dir="auto"
+        class="debug-warning"
+      >
         <!-- @slot Optional slot as alternative to `label` prop -->
         <slot>
           <span v-if="!labelEmpty">{{ label }}</span>
@@ -21,7 +35,12 @@
     <span class="icon-after">
       <!-- @slot Optional slot as alternative to `iconAfter` prop -->
       <slot name="iconAfter">
-        <KIcon v-if="iconAfter" :icon="iconAfter" :color="color || $themeTokens.text" style="top: 2px;" />
+        <KIcon
+          v-if="iconAfter"
+          :icon="iconAfter"
+          :color="color || $themeTokens.text"
+          style="top: 2px"
+        />
       </slot>
     </span>
   </span>
@@ -47,14 +66,16 @@
         default: null,
       },
       /**
-       * An icon that will be prepended to the label. Uses the same icon names as the `KIcon` component
+       * An icon that will be prepended to the label.
+       * Uses the same icon names as the `KIcon` component
        */
       icon: {
         type: String,
         default: null,
       },
       /**
-       * An icon that will be appended to the label. Uses the same icon names as the `KIcon` component
+       * An icon that will be appended to the label.
+       * Uses the same icon names as the `KIcon` component
        */
       iconAfter: {
         type: String,
diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
index b16574dcf..3ce1a218e 100644
--- a/lib/KListWithOverflow.vue
+++ b/lib/KListWithOverflow.vue
@@ -9,7 +9,7 @@
       ref="list"
       class="list"
     >
-      <template v-for="(item) in items">
+      <template v-for="item in items">
         <!-- @slot Slot for rendering divider items -->
         <slot
           v-if="isDivider(item)"
@@ -29,7 +29,9 @@
       ref="moreButtonWrapper"
       class="more-button-wrapper"
     >
-      <!-- @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 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"
@@ -105,7 +107,7 @@
       // Add resize observer to watch inner list items size changes
       if (typeof window !== 'undefined' && window.ResizeObserver) {
         this.resizeObserver = new ResizeObserver(() =>
-          requestAnimationFrame(this.throttledSetOverflowItems)
+          requestAnimationFrame(this.throttledSetOverflowItems),
         );
         this.resizeObserver.observe(this.$refs.list);
       }
@@ -179,7 +181,7 @@
         // check if overflowed items would fit if the moreButton were not visible
         const overflowedWidth = overflowItemsIdx.reduce(
           (acc, idx) => acc + itemsSizes[idx].width,
-          0
+          0,
         );
         if (overflowedWidth <= this.moreButtonWidth + availableWidth) {
           while (overflowItemsIdx.length > 0) {
@@ -260,17 +262,18 @@
     justify-content: space-between;
     width: 100%;
   }
+
   .list {
-    overflow: visible;
+    position: relative;
     display: flex;
     flex-wrap: wrap;
-    position: relative;
     align-items: center;
+    overflow: visible;
   }
 
   .list > * {
-    visibility: hidden;
     flex-shrink: 0;
+    visibility: hidden;
   }
 
   .more-button-wrapper {
diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue
index a76da44ee..b1cef7fd0 100644
--- a/lib/KLogo/index.vue
+++ b/lib/KLogo/index.vue
@@ -15,14 +15,53 @@
     :aria-label="altText"
   >
     <title>{{ altText }}</title>
-    <use v-if="showBackground" :href="backgroundHref" :fill="blobColor" :mask="applyMask ? 'url(#cutout-mask)' : null" />
-    <use v-if="!applyMask" href="#body" :stroke="strokeColor" />
-    <use v-if="!applyMask" href="#right-wing-inner" class="wing-inner" :stroke="strokeColor" />
-    <use v-if="!applyMask" href="#right-wing-middle" class="wing-middle" :stroke="strokeColor" />
-    <use v-if="!applyMask" href="#right-wing-outer" class="wing-outer" :stroke="strokeColor" />
-    <use v-if="!applyMask" href="#left-wing-inner" class="wing-inner" :stroke="strokeColor" />
-    <use v-if="!applyMask" href="#left-wing-middle" class="wing-middle" :stroke="strokeColor" />
-    <use v-if="!applyMask" href="#left-wing-outer" class="wing-outer" :stroke="strokeColor" />
+    <use
+      v-if="showBackground"
+      :href="backgroundHref"
+      :fill="blobColor"
+      :mask="applyMask ? 'url(#cutout-mask)' : null"
+    />
+    <use
+      v-if="!applyMask"
+      href="#body"
+      :stroke="strokeColor"
+    />
+    <use
+      v-if="!applyMask"
+      href="#right-wing-inner"
+      class="wing-inner"
+      :stroke="strokeColor"
+    />
+    <use
+      v-if="!applyMask"
+      href="#right-wing-middle"
+      class="wing-middle"
+      :stroke="strokeColor"
+    />
+    <use
+      v-if="!applyMask"
+      href="#right-wing-outer"
+      class="wing-outer"
+      :stroke="strokeColor"
+    />
+    <use
+      v-if="!applyMask"
+      href="#left-wing-inner"
+      class="wing-inner"
+      :stroke="strokeColor"
+    />
+    <use
+      v-if="!applyMask"
+      href="#left-wing-middle"
+      class="wing-middle"
+      :stroke="strokeColor"
+    />
+    <use
+      v-if="!applyMask"
+      href="#left-wing-outer"
+      class="wing-outer"
+      :stroke="strokeColor"
+    />
     <defs>
       <g id="blob-background">
         <path
@@ -34,7 +73,12 @@
         />
       </g>
       <g id="rect-background">
-        <rect width="200" height="200" rx="20" ry="20" />
+        <rect
+          width="200"
+          height="200"
+          rx="20"
+          ry="20"
+        />
       </g>
       <g id="body">
         <path
@@ -42,13 +86,13 @@
           151.879 115.5 154.5C114.566 159.01 110.376 162.409 106.255 159.3C104.108 157.681
           102.698 154.847 102.209 152.3C101.265 147.375 102.751 141.099 105 133.5ZM105 133.5C92
           121.5 80.5894 106.993 86.0001 88C87.8773 81.4102 91.5066 76.5374 92.5907 67.8576C92.9229
-          65.1979 92.0525 63.0863 92.5907 60.3303C93.1958 57.2315 95.7567 53.5948 99.6458 52.8029C101.94
-          52.3358 104.538 52.8993 106.701 54.6847C108.251 55.9644 109.53 57.5443 109.801 59.5775C110.137
-          62.0918 109.848 65.8372 109.969 68.8091C110.064 71.1567 111.01 74.3275 111.846 76.5C123.727
-          101.615 117 110.5 105 133.5ZM102.455 52.7427C104.844 53.1793 107.316 54.5807 111.846
-          51.9511C117.52 46.8315 124.682 39.4836 129.898 34.0323C123.952 40.1759 122.341 41.8109
-          114.35 49.692C112.985 51.7283 111.085 54.0494 110.647 55.8138C110.089 58.0588 109.812
-          61.4633 109.967 63.8191"
+          65.1979 92.0525 63.0863 92.5907 60.3303C93.1958 57.2315 95.7567 53.5948 99.6458 
+          2.8029C101.94 52.3358 104.538 52.8993 106.701 54.6847C108.251 55.9644 109.53 57.5443
+          109.801 59.5775C110.137 62.0918 109.848 65.8372 109.969 68.8091C110.064 71.1567 111.01
+          74.3275 111.846 76.5C123.727 101.615 117 110.5 105 133.5ZM102.455 52.7427C104.844 53.1793
+          107.316 54.5807 111.846 51.9511C117.52 46.8315 124.682 39.4836 129.898 34.0323C123.952
+          40.1759 122.341 41.8109 114.35 49.692C112.985 51.7283 111.085 54.0494 110.647
+          55.8138C110.089 58.0588 109.812 61.4633 109.967 63.8191"
           stroke-width="6"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -110,15 +154,48 @@
       </g>
       <mask id="cutout-mask">
         <!-- Start with a white rectangle as the base of the mask -->
-        <rect x="0" y="0" width="200" height="200" fill="white" />
+        <rect
+          x="0"
+          y="0"
+          width="200"
+          height="200"
+          fill="white"
+        />
         <!-- Cut out the shapes that make up the logo from the mask -->
-        <use href="#body" stroke="black" />
-        <use href="#right-wing-inner" class="wing-inner" stroke="black" />
-        <use href="#right-wing-middle" class="wing-middle" stroke="black" />
-        <use href="#right-wing-outer" class="wing-outer" stroke="black" />
-        <use href="#left-wing-inner" class="wing-inner" stroke="black" />
-        <use href="#left-wing-middle" class="wing-middle" stroke="black" />
-        <use href="#left-wing-outer" class="wing-outer" stroke="black" />
+        <use
+          href="#body"
+          stroke="black"
+        />
+        <use
+          href="#right-wing-inner"
+          class="wing-inner"
+          stroke="black"
+        />
+        <use
+          href="#right-wing-middle"
+          class="wing-middle"
+          stroke="black"
+        />
+        <use
+          href="#right-wing-outer"
+          class="wing-outer"
+          stroke="black"
+        />
+        <use
+          href="#left-wing-inner"
+          class="wing-inner"
+          stroke="black"
+        />
+        <use
+          href="#left-wing-middle"
+          class="wing-middle"
+          stroke="black"
+        />
+        <use
+          href="#left-wing-outer"
+          class="wing-outer"
+          stroke="black"
+        />
       </mask>
     </defs>
   </svg>
@@ -211,7 +288,8 @@
         validator: value => backgroundStyles.includes(value),
       },
       /**
-       * The color scheme for the logo: default, monoBlack, monoWhite, monoPrimary, monoSecondary, whiteGrey, blackGrey
+       * The color scheme for the logo:
+       * default, monoBlack, monoWhite, monoPrimary, monoSecondary, whiteGrey, blackGrey
        */
       colorScheme: {
         type: String,
@@ -257,69 +335,69 @@
 <style>
 
   .animate .wing-inner {
-    animation: flapInner 2s 1.2s both infinite;
+    animation: flap-inner 2s 1.2s both infinite;
   }
 
   .animate .wing-middle {
-    animation: flapMiddle 2s 1.2s both infinite;
+    animation: flap-middle 2s 1.2s both infinite;
   }
 
   .animate .wing-outer {
-    animation: flapOuter 2s 1.2s both infinite;
-  }
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
+    animation: flap-outer 2s 1.2s both infinite;
   }
 
-  @keyframes flapInner {
+  @keyframes flap-inner {
     0% {
       opacity: 0;
     }
+
     10% {
       opacity: 1;
     }
+
     30% {
       opacity: 1;
     }
+
     100% {
       opacity: 0;
     }
   }
 
-  @keyframes flapMiddle {
+  @keyframes flap-middle {
     0% {
       opacity: 0;
     }
+
     20% {
       opacity: 0;
     }
+
     40% {
       opacity: 1;
     }
+
     100% {
       opacity: 0;
     }
   }
 
-  @keyframes flapOuter {
+  @keyframes flap-outer {
     0% {
       opacity: 0;
     }
+
     40% {
       opacity: 0;
     }
+
     50% {
       opacity: 1;
     }
+
     100% {
       opacity: 0;
     }
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/lib/KModal.vue b/lib/KModal.vue
index e65b7e72b..dca8a956c 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -2,7 +2,10 @@
 
   <component :is="wrapper">
     <!-- Accessibility properties for the overlay -->
-    <transition name="modal-fade" appear>
+    <transition
+      name="modal-fade"
+      appear
+    >
       <KFocusTrap>
         <div
           id="modal-window"
@@ -21,10 +24,9 @@
             :style="[
               modalSizeStyles,
               { background: $themeTokens.surface },
-              containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' }
+              containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' },
             ]"
           >
-
             <!-- Modal Title -->
             <h1
               id="modal-title"
@@ -41,7 +43,8 @@
               </span>
             </h1>
 
-            <!-- Stop propagation of enter key to prevent the submit event from being emitted twice -->
+            <!-- Stop propagation of enter key 
+             to prevent the submit event from being emitted twice -->
             <form
               class="form"
               @submit.prevent="emitSubmitEvent"
@@ -51,13 +54,18 @@
               <div
                 ref="content"
                 class="content"
-                :style="[ contentSectionMaxHeight, scrollShadow ? {
-                  borderTop: `1px solid ${$themeTokens.fineLine}`,
-                  borderBottom: `1px solid ${$themeTokens.fineLine}`,
-                } : {} ]"
+                :style="[
+                  contentSectionMaxHeight,
+                  scrollShadow
+                    ? {
+                      borderTop: `1px solid ${$themeTokens.fineLine}`,
+                      borderBottom: `1px solid ${$themeTokens.fineLine}`,
+                    }
+                    : {},
+                ]"
                 :class="{
                   'scroll-shadow': scrollShadow,
-                  'contains-kselect': containsKSelect
+                  'contains-kselect': containsKSelect,
                 }"
               >
                 <!-- @slot Main content of modal -->
@@ -243,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.',
         );
       }
     },
@@ -295,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 -
@@ -310,8 +318,9 @@
             this.scrollShadow = this.maxContentHeight < this.$refs.content.scrollHeight;
           }
 
-          // make sure that overflow-y won't be updated to 'auto' if this function is running for the first time
-          // (otherwise Firefox would add a vertical scrollbar right away) + don't apply if modal contains KSelect
+          // make sure that overflow-y won't be updated to 'auto' if this function is running
+          // for the first time (otherwise Firefox would add a vertical scrollbar right away)
+          // + don't apply if modal contains KSelect
           // (otherwise KSelect will be trapped inside modal if KSelect is opened a second time)
           if (this.$refs.content.clientHeight !== 0 && !this.containsKSelect) {
             // add a vertical scrollbar if content doesn't fit
@@ -430,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/KOptionalText.vue b/lib/KOptionalText.vue
index 5535a9073..b3e312869 100644
--- a/lib/KOptionalText.vue
+++ b/lib/KOptionalText.vue
@@ -1,11 +1,15 @@
 <template>
 
-  <span v-if="!textEmpty" :style="appearanceOverrides">
+  <span
+    v-if="!textEmpty"
+    :style="appearanceOverrides"
+  >
     <template v-if="text">
       {{ text }}
     </template>
     <template v-else>
-      <!-- @slot Pass sub-components to render, if none of the nodes in the entire node hierarchy contain text, then the `KEmptyPlaceholder` component will be rendered -->
+      <!-- @slot Pass sub-components to render, if none of the nodes in the entire node hierarchy
+       contain text, then the `KEmptyPlaceholder` component will be rendered -->
       <slot></slot>
     </template>
   </span>
diff --git a/lib/KOverlay/index.vue b/lib/KOverlay/index.vue
index 1d191de95..a03849f7a 100644
--- a/lib/KOverlay/index.vue
+++ b/lib/KOverlay/index.vue
@@ -33,4 +33,3 @@
   };
 
 </script>
-
diff --git a/lib/KRadioButton.vue b/lib/KRadioButton.vue
index c291aa064..32f461843 100644
--- a/lib/KRadioButton.vue
+++ b/lib/KRadioButton.vue
@@ -1,6 +1,10 @@
 <template>
 
-  <div class="k-radio-button-container" :class="{ 'k-radio-button-disabled': disabled }" @click="toggleCheck">
+  <div
+    class="k-radio-button-container"
+    :class="{ 'k-radio-button-disabled': disabled }"
+    @click="toggleCheck"
+  >
     <div class="tr">
       <div class="k-radio-button">
         <input
@@ -25,14 +29,14 @@
           icon="radioSelected"
           class="radio-button-icon"
           name="radio_button_checked"
-          :style="[{ fill: $themeTokens.primary }, disabledStyle, activeStyle ]"
+          :style="[{ fill: $themeTokens.primary }, disabledStyle, activeStyle]"
         />
         <KIcon
           v-else
           icon="radioUnselected"
           class="radio-button-icon"
           name="radio_button_unchecked"
-          :style="[{ fill: $themeTokens.annotation }, disabledStyle, activeStyle ]"
+          :style="[{ fill: $themeTokens.annotation }, disabledStyle, activeStyle]"
         />
       </div>
 
@@ -40,7 +44,7 @@
         :dir="labelDir"
         class="k-radio-button-label"
         :for="id"
-        :class="{ 'visuallyhidden': !showLabel }"
+        :class="{ visuallyhidden: !showLabel }"
         :style="labelStyle"
         @click.prevent
       >
@@ -51,7 +55,11 @@
         <template v-else>
           <div :class="[truncateText]">{{ label }}</div>
         </template>
-        <div v-if="description" class="description" :style="[{ color: disabled ? '' : $themeTokens.annotation }, disabledStyle ]">
+        <div
+          v-if="description"
+          class="description"
+          :style="[{ color: disabled ? '' : $themeTokens.annotation }, disabledStyle]"
+        >
           {{ description }}
         </div>
       </label>
@@ -192,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') {
@@ -260,6 +268,7 @@
           parent = parent.$parent;
         }
         // If we get here, no KRadioButtonGroup was found
+        // eslint-disable-next-line no-console
         console.warn('KRadioButton should be nested inside a KRadioButtonGroup component.');
       },
     },
diff --git a/lib/KRadioButtonGroup.vue b/lib/KRadioButtonGroup.vue
index 6757792c7..c9f02213c 100644
--- a/lib/KRadioButtonGroup.vue
+++ b/lib/KRadioButtonGroup.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <div class="k-radio-button-group" role="radiogroup">
+  <div
+    class="k-radio-button-group"
+    role="radiogroup"
+  >
     <!-- @slot For `KRadioButton`s -->
     <slot></slot>
   </div>
@@ -64,7 +67,8 @@
        * Sets a tabIndex attribute on each KRadioButton and adds it to an array to enable navigation
        * between radio buttons using arrow keys in Firefox Browser.
        *
-       * @param {Array<object>} children - An array of objects where each object represents a child component of KRadioButtonGroup.
+       * @param {Array<object>} children - An array of objects where each object represents a child
+       * component of KRadioButtonGroup.
        * @returns {void}
        */
       queryAndAddRadioBtns(children) {
@@ -102,7 +106,7 @@
         }
       },
       focusPreviousRadio(event) {
-        let newFocusedRadioIdx =
+        const newFocusedRadioIdx =
           this.focusedRadioIdx === this.firstRadioIdx
             ? this.lastRadioIdx
             : this.focusedRadioIdx - 1;
diff --git a/lib/KSelect/KSelectOption.vue b/lib/KSelect/KSelectOption.vue
index 3d2faef2e..da71b56e7 100644
--- a/lib/KSelect/KSelectOption.vue
+++ b/lib/KSelect/KSelectOption.vue
@@ -1,10 +1,23 @@
 <template>
 
-  <li class="ui-select-option" :class="classes" :style="selectedStyle">
+  <li
+    class="ui-select-option"
+    :class="classes"
+    :style="selectedStyle"
+  >
     <slot>
-      <div v-if="multiple" class="ui-select-option-checkbox" :style="selectedStyle">
+      <div
+        v-if="multiple"
+        class="ui-select-option-checkbox"
+        :style="selectedStyle"
+      >
         <UiIcon v-if="selected">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
             <path
               d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563L5.016
             12zm9-14.016C20.11 3 21 3.938 21 5.016v13.97C21 20.062 20.11 21 18.984
@@ -14,7 +27,12 @@
         </UiIcon>
 
         <UiIcon v-else>
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
             <path
               d="M18.984 3C20.062 3 21 3.938 21 5.016v13.97C21 20.062 20.062
             21 18.984 21H5.014C3.938 21 3 20.064 3 18.986V5.015C3 3.94 3.936
@@ -24,16 +42,23 @@
         </UiIcon>
       </div>
 
-      <div v-if="type === 'basic'" class="ui-select-option-basic">
+      <div
+        v-if="type === 'basic'"
+        class="ui-select-option-basic"
+      >
         {{ option[keys.label] || option }}
       </div>
 
-      <div v-if="type === 'image'" class="ui-select-option-image">
-        <div class="ui-select-option-image-object" :style="imageStyle"></div>
-
+      <div
+        v-if="type === 'image'"
+        class="ui-select-option-image"
+      >
         <div
-          class="ui-select-option-image-text"
-        >
+          class="ui-select-option-image-object"
+          :style="imageStyle"
+        ></div>
+
+        <div class="ui-select-option-image-text">
           {{ option[keys.label] }}
         </div>
       </div>
diff --git a/lib/KSelect/index.vue b/lib/KSelect/index.vue
index e0787a29a..56efa83f5 100644
--- a/lib/KSelect/index.vue
+++ b/lib/KSelect/index.vue
@@ -10,14 +10,15 @@
 
    BELOW: KModal targets KeenUiSelect by using div.ui-select selector
   -->
-  <div class="ui-select" :class="classes">
+  <div
+    class="ui-select"
+    :class="classes"
+  >
     <input
       v-if="name"
       class="ui-select-hidden-input"
-
       type="hidden"
       :name="name"
-
       :value="submittedValue"
     >
 
@@ -27,7 +28,6 @@
         class="ui-select-label"
         :class="$computedClass({ ':focus': $coreOutline })"
         :tabindex="disabled ? null : '0'"
-
         @click="toggleDropdown"
         @focus="onFocus"
         @keydown.enter.prevent="openDropdown"
@@ -47,20 +47,38 @@
           <slot>{{ label }}</slot>
         </div>
 
-        <div class="ui-select-display" :style="activeBorderStyle">
+        <div
+          class="ui-select-display"
+          :style="activeBorderStyle"
+        >
           <div
             class="ui-select-display-value"
             :class="{ 'is-placeholder': !hasDisplayText }"
           >
             <!-- @slot Optional slot to override the display of the selected value -->
             <slot name="display">
-              {{ hasDisplayText ? displayText : (
-                hasFloatingLabel && isLabelInline) ? null : placeholder }}
+              {{
+                hasDisplayText
+                  ? displayText
+                  : hasFloatingLabel && isLabelInline
+                    ? null
+                    : placeholder
+              }}
             </slot>
           </div>
 
-          <UiIcon v-if="!clearableState" class="ui-select-dropdown-button">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.984 9.984h10.03L12 15z" /></svg>
+          <UiIcon
+            v-if="!clearableState"
+            class="ui-select-dropdown-button"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path d="M6.984 9.984h10.03L12 15z" />
+            </svg>
           </UiIcon>
           <KIconButton
             v-else
@@ -78,7 +96,11 @@
             v-show="showDropdown"
             ref="dropdown"
             class="ui-select-dropdown"
-            :style="{ color: $themeTokens.primary, backgroundColor: $themeTokens.surface, bottom: dropdownButtonBottom }"
+            :style="{
+              color: $themeTokens.primary,
+              backgroundColor: $themeTokens.surface,
+              bottom: dropdownButtonBottom,
+            }"
             tabindex="-1"
             @keydown.enter.prevent.stop="selectHighlighted"
             @keydown.space.prevent.stop="selectHighlighted"
@@ -102,16 +124,14 @@
                 :multiple="multiple"
                 :option="option"
                 :selected="isOptionSelected(option)"
-
                 type="basic"
                 @click.native.stop="selectOption(option)"
-
                 @mouseover.native.stop="onMouseover(option)"
               >
-                <!-- @slot Optional slot to override the display of the option in the options dropdown -->
+                <!-- @slot Optional slot to override the display of
+                 the option in the options dropdown -->
                 <slot
                   name="option"
-
                   :highlighted="isOptionHighlighted(option)"
                   :index="index"
                   :option="option"
@@ -119,7 +139,10 @@
                 ></slot>
               </KSelectOption>
 
-              <div v-show="hasNoResults" class="ui-select-no-results">
+              <div
+                v-show="hasNoResults"
+                class="ui-select-no-results"
+              >
                 <!-- @slot Optional slot as alternative to `noResultsText` prop -->
                 <slot name="no-results">
                   {{ noResultsText }}
@@ -130,15 +153,24 @@
         </transition>
       </div>
 
-      <div v-if="hasFeedback" class="ui-select-feedback">
-        <div v-if="showError" class="ui-select-feedback-text">
+      <div
+        v-if="hasFeedback"
+        class="ui-select-feedback"
+      >
+        <div
+          v-if="showError"
+          class="ui-select-feedback-text"
+        >
           <!-- @slot Optional slot as alternative to `invalidText` prop -->
           <slot name="error">
             {{ invalidText }}
           </slot>
         </div>
 
-        <div v-else-if="showHelp" class="ui-select-feedback-text">
+        <div
+          v-else-if="showHelp"
+          class="ui-select-feedback-text"
+        >
           <!-- @slot Optional slot as alternative to `help` prop -->
           <slot name="help">
             {{ help }}
@@ -469,7 +501,7 @@
           // Check if matches
           option.startsWith = startswith(
             option[this.keys.label].toLowerCase(),
-            this.quickMatchString.toLowerCase()
+            this.quickMatchString.toLowerCase(),
           );
 
           return option;
@@ -610,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)) {
@@ -641,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]);
@@ -689,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) {
@@ -783,9 +794,11 @@
       },
 
       toggleDropdown() {
-        // if called on dropdown inside modal, dropdown will generally render above input/placeholder when opened,
-        // rather than below it: we want to render dropdown above input only in cases where there isn't enough
-        // space available beneath input, but when dropdown extends outside a modal the func doesn't work as intended
+        // if called on dropdown inside modal,
+        // dropdown will generally render above input/placeholder when opened, rather than below it.
+        // We want to render dropdown above input only in cases where there isn't enough space
+        // available beneath input, but when dropdown extends outside a modal
+        // the func doesn't work as intended
         if (!this.isInsideModal) this.calculateSpaceBelow();
 
         this[this.showDropdown ? 'closeDropdown' : 'openDropdown']();
@@ -862,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)'),
             );
           }
         });
@@ -915,7 +928,7 @@
         const notEnoughSpaceBelow =
           buttonPosition > this.maxDropdownHeight &&
           this.scrollableAncestor.offsetHeight - buttonPosition <
-            buttonHeight + this.maxDropdownHeight;
+          buttonHeight + this.maxDropdownHeight;
 
         this.dropdownButtonBottom = notEnoughSpaceBelow ? buttonHeight + 'px' : 'auto';
       },
@@ -960,6 +973,7 @@
 
     &.is-active:not(.is-disabled) {
       border-bottom-color: $ui-input-border-color--active;
+
       .ui-icon {
         color: $ui-input-icon-color--active;
       }
@@ -1050,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/KSwitch.vue b/lib/KSwitch.vue
index b6b6319a0..08704f914 100644
--- a/lib/KSwitch.vue
+++ b/lib/KSwitch.vue
@@ -1,7 +1,10 @@
 <template>
 
   <!-- Vendored from  UI UISwitch component https://josephuspaye.github.io/Keen-UI/#/ui-switch -->
-  <label class="k-switch" :class="classes">
+  <label
+    class="k-switch"
+    :class="classes"
+  >
     <div :style="isActive ? $coreOutline : {}">
       <div class="k-switch-input-wrapper">
         <input
@@ -9,14 +12,12 @@
           class="k-switch-input"
           type="checkbox"
           dir="auto"
-
           :aria-labelledby="ariaLabelledBy"
           :checked.prop="isChecked"
           :disabled="disabled"
           :name="name"
           :tabindex="tabindex"
           :value="submittedValue"
-
           @blur="onBlur"
           @click="onClick"
           @focus="onFocus"
@@ -27,7 +28,10 @@
       </div>
     </div>
 
-    <div v-if="label || $slots.default" class="k-switch-label-text">
+    <div
+      v-if="label || $slots.default"
+      class="k-switch-label-text"
+    >
       <slot>{{ label }}</slot>
     </div>
   </label>
@@ -44,7 +48,8 @@
     props: {
       /*
        * Specifies the ID of an element that labels this switch component.
-       * Useful for accessibility to provide a label through an external element when `label` is empty
+       * Useful for accessibility to provide a label through an external element
+       * when `label` is empty
        */
       ariaLabelledBy: {
         type: String,
diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
index 4391e2ef7..a1fdfab7e 100644
--- a/lib/KTable/KTableGridItem.vue
+++ b/lib/KTable/KTableGridItem.vue
@@ -58,7 +58,8 @@
     },
     methods: {
       onKeydown(event) {
-        // Ensures that clickable elements within a table cell, such as buttons and links, can be clicked with ENTER key.
+        // Ensures that clickable elements within a table cell, such as buttons and links,
+        // can be clicked with ENTER key.
         const focusedElement = event.target;
         if (
           event.key === 'Enter' &&
@@ -76,10 +77,10 @@
 
 
 <style scoped>
-td {
-  word-wrap: break-word; 
-  white-space: normal; 
-}
 
+  td {
+    word-wrap: break-word;
+    white-space: normal;
+  }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index c815cc2ae..0900a55f1 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -1,13 +1,25 @@
 <template>
 
-  <div ref="tableWrapper" class="k-table-wrapper">
+  <div
+    ref="tableWrapper"
+    class="k-table-wrapper"
+  >
     <template v-if="dataLoading">
       <p><KCircularLoader /></p>
     </template>
     <template v-else>
-      <table v-if="!isTableEmpty" class="k-table" role="grid">
-        <caption v-if="caption" class="visuallyhidden">
-          {{ caption }}
+      <table
+        v-if="!isTableEmpty"
+        class="k-table"
+        role="grid"
+      >
+        <caption
+          v-if="caption"
+          class="visuallyhidden"
+        >
+          {{
+            caption
+          }}
         </caption>
         <thead>
           <tr ref="stickyHeader">
@@ -23,25 +35,54 @@
                 'sticky-header': true,
                 'sticky-column': index === 0,
               }"
-              :style="[getHeaderStyle(header),
-                       isColumnSortActive(index) ? { color: $themeBrand.primary.v_500 } : { color: $themePalette.grey.v_800 },
-                       { backgroundColor: $themePalette.white } ,
-                       isColumnFocused(index) ? { backgroundColor: $themePalette.grey.v_100 } : {},
-                       { textAlign: getTextAlign(header.dataType) }]"
+              :style="[
+                getHeaderStyle(header),
+                isColumnSortActive(index)
+                  ? { color: $themeBrand.primary.v_500 }
+                  : { color: $themePalette.grey.v_800 },
+                { backgroundColor: $themePalette.white },
+                isColumnFocused(index) ? { backgroundColor: $themePalette.grey.v_100 } : {},
+                { textAlign: getTextAlign(header.dataType) },
+              ]"
               role="columnheader"
               data-focus="true"
               :aria-colindex="index + 1"
               @click="sortable ? handleSort(index) : null"
               @keydown="handleKeydown($event, -1, index)"
             >
-              <!--@slot Scoped slot for customizing the content of each header cell. Provides a header object `header` and its column index `colIndex`.-->
-              <slot name="header" :header="header" :colIndex="index">
+              <!--@slot Scoped slot for customizing the content of each header cell.
+               Provides a header object `header` and its column index `colIndex`.-->
+              <slot
+                name="header"
+                :header="header"
+                :colIndex="index"
+              >
                 {{ header.label }}
               </slot>
-              <span v-if="isColumnSortable(index)" class="sort-icon">
-                <span v-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" :color="isColumnSortActive(index) ? $themeBrand.primary.v_600 : $themePalette.grey.v_800 " /></span>
-                <span v-else-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" :color="isColumnSortActive(index) ? $themeBrand.primary.v_600 : $themePalette.grey.v_800 " /></span>
-                <span v-else><KIcon icon="sortColumn" :color="$themePalette.grey.v_800" /></span>
+              <span
+                v-if="isColumnSortable(index)"
+                class="sort-icon"
+              >
+                <span v-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_ASC"><KIcon
+                  icon="dropup"
+                  :color="
+                    isColumnSortActive(index)
+                      ? $themeBrand.primary.v_600
+                      : $themePalette.grey.v_800
+                  "
+                /></span>
+                <span v-else-if="isColumnSortActive(index) && sortOrder === SORT_ORDER_DESC"><KIcon
+                  icon="dropdown"
+                  :color="
+                    isColumnSortActive(index)
+                      ? $themeBrand.primary.v_600
+                      : $themePalette.grey.v_800
+                  "
+                /></span>
+                <span v-else><KIcon
+                  icon="sortColumn"
+                  :color="$themePalette.grey.v_800"
+                /></span>
               </span>
             </th>
           </tr>
@@ -75,8 +116,16 @@
               @keydown="handleKeydown($event, rowIndex, colIndex)"
             >
               <template #default="slotProps">
-                <!--@slot Scoped slot for customizing the content of each data cell. Provides the content of a data cell `content`, its row index `rowIndex`, its column index `colIndex`, and the corresponding whole row object `row`.-->
-                <slot name="cell" :content="slotProps.content" :rowIndex="rowIndex" :colIndex="colIndex" :row="row">
+                <!--@slot Scoped slot for customizing the content of each data cell.
+                 Provides the content of a data cell `content`, its row index `rowIndex`,
+                 its column index `colIndex`, and the corresponding whole row object `row`.-->
+                <slot
+                  name="cell"
+                  :content="slotProps.content"
+                  :rowIndex="rowIndex"
+                  :colIndex="colIndex"
+                  :row="row"
+                >
                   {{ slotProps.content }}
                 </slot>
               </template>
@@ -84,7 +133,10 @@
           </tr>
         </tbody>
       </table>
-      <div v-else class="empty-message">
+      <div
+        v-else
+        class="empty-message"
+      >
         {{ emptyMessage }}
       </div>
     </template>
@@ -133,7 +185,7 @@
         () => props.rows,
         newRows => {
           rows.value = newRows;
-        }
+        },
       );
 
       const handleSort = index => {
@@ -167,15 +219,19 @@
         isTableEmpty,
       };
     },
-    /* eslint-disable kolibri/vue-no-unused-properties */
     props: {
       /**
-       * An array of objects `{ label, dataType, minWidth, width, columnId }`representing the headers of the table. The `dataType` can be one of `'string'`, `'number'`, `'date'`, or `'undefined'`. `label` and `dataType` are required. `minWidth` and `width` are optional. `columnId` is an unique identifier for the column, and can be a `number` or a `string`.
+       * An array of objects:
+       * `{ label, dataType, minWidth, width, columnId }`
+       * representing the headers of the table.
+       * The `dataType` can be one of `'string'`, `'number'`, `'date'`, or `'undefined'`.
+       * `label` and `dataType` are required. `minWidth` and `width` are optional.
+       * `columnId` is an unique identifier for the column, and can be a `number` or a `string`.
        */
       headers: {
         type: Array,
         required: true,
-        validator: function(value) {
+        validator: function (value) {
           const uniqueColumnIds = new Set(value.map(h => h.columnId));
 
           return (
@@ -184,13 +240,14 @@
               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),
             )
           );
         },
       },
       /**
-       * An array of arrays representing the rows of the table. Each row should have the same number of elements as the headers array.
+       * An array of arrays representing the rows of the table.
+       * Each row should have the same number of elements as the headers array.
        */
       rows: {
         type: Array,
@@ -225,13 +282,18 @@
         default: false,
       },
       /**
-       * Indicates whether the table is to be sorted by default by any header or not. By default it is an empty object which means no default sorting is to be used. It accepts a configuration object `{ columnId, direction }`. `columnId` references a `columnId` defined for a header in `headers`. This specifies a column by which the table should be sorted when initially loaded. `direction` can be `'asc'` for ascending or `'desc'` for descending sort direction.
+       * Indicates whether the table is to be sorted by default by any header or not.
+       * By default it is an empty object which means no default sorting is to be used.
+       * It accepts a configuration object `{ columnId, direction }`.
+       * `columnId` references a `columnId` defined for a header in `headers`.
+       * This specifies a column by which the table should be sorted when initially loaded.
+       * `direction` can be `'asc'` for ascending or `'desc'` for descending sort direction.
        */
       defaultSort: {
         type: Object,
         required: false,
         default: () => ({}),
-        validator: function(value) {
+        validator: function (value) {
           if (Object.keys(value).length === 0) {
             return true;
           }
@@ -244,7 +306,9 @@
         },
       },
       /**
-       * Disables built-in sort function. This is useful when you want to define your own sorting logic. Refer to the examples above for more details.
+       * Disables built-in sort function.
+       * This is useful when you want to define your own sorting logic.
+       * Refer to the examples above for more details.
        */
       disableBuiltinSorting: {
         type: Boolean,
@@ -312,8 +376,9 @@
           if (this.defaultSort.columnId) {
             const allHeaderColumnIds = this.headers.map(h => h.columnId);
             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.`,
               );
             }
           }
@@ -562,43 +627,44 @@
 
 
 <style scoped>
-.k-table-wrapper {
-  overflow: auto;
-  position: relative;
-  height:auto;
-}
-
-.k-table {
-  border-collapse: collapse;
-  width: 100%;
-  
-}
-
-th,
-td {
-  padding: 8px;
-  position: relative;
-  z-index: auto;
-}
-
-.sticky-header {
-  position: sticky;
-  top: 0;
-  z-index: 2; 
-}
-
-.sticky-column {
-  position: sticky;
-  left: 0;
-  z-index: 1; 
-}
-
-th.sticky-header.sticky-column,
-td.sticky-header.sticky-column {
-  z-index: 3; 
-}
-.sortable {
-  cursor: pointer;
-}
-
-</style>
\ No newline at end of file
+
+  .k-table-wrapper {
+    position: relative;
+    height: auto;
+    overflow: auto;
+  }
+
+  .k-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  th,
+  td {
+    position: relative;
+    z-index: auto;
+    padding: 8px;
+  }
+
+  .sticky-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  .sticky-column {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  th.sticky-header.sticky-column,
+  td.sticky-header.sticky-column {
+    z-index: 3;
+  }
+
+  .sortable {
+    cursor: pointer;
+  }
+
+</style>
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 0c8e67f6e..1436174eb 100644
--- a/lib/KTable/useSorting/index.js
+++ b/lib/KTable/useSorting/index.js
@@ -13,9 +13,11 @@ export const DATA_TYPE_OTHERS = 'undefined';
  *
  * @param {Ref<Array>} headers - Reactive reference to the table headers.
  * @param {Ref<Array>} rows - Reactive reference to the table rows.
- * @param {Ref<Object>} defaultSort - Computed reactive reference to object describing if default sorting should be used.
- * It has the properties as 'index' denoting the row index to be used for default sorting, and 'direction' denoting the sort order.
- * @param {Ref<Boolean>} disableBuiltinSorting - Reactive reference to disable all forms of sorting by the hook.
+ * @param {Ref<Object>} defaultSort - Computed reactive reference to object describing if default
+ * sorting should be used. It has the properties as 'index' denoting the row index to be used for
+ * default sorting, and 'direction' denoting the sort order.
+ * @param {Ref<Boolean>} disableBuiltinSorting - Reactive reference to disable all forms of sorting
+ * by the hook.
  * @returns {Object} - An object containing reactive references and methods for sorting.
  */
 export default function useSorting(headers, rows, defaultSort, disableBuiltinSorting) {
@@ -36,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/KThemePlugin.js b/lib/KThemePlugin.js
index eeb11f24d..95dec863b 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -75,7 +75,6 @@ export default function KThemePlugin(Vue) {
   }
 
   Vue.mixin({
-    /* eslint-disable kolibri/vue-no-unused-properties */
     computed: {
       $coreOutline() {
         if (globalThemeState.inputModality === 'keyboard') {
@@ -95,14 +94,13 @@ export default function KThemePlugin(Vue) {
         return this.$mediaType === 'print';
       },
     },
-    /* eslint-enable kolibri/vue-no-unused-properties */
-    /* eslint-disable kolibri/vue-no-unused-methods */
     methods: {
       /**
        * Because `window.print()` blocks in most browsers, we need to manually update our
        * `mediaType` before calling it so that the printable version of the page is as we expect.
        *
        * Triggering a print from Ctrl+P or the menu does not have this problem.
+       * @public
        */
       $print() {
         const mediaType = globalThemeState.mediaType;
@@ -114,7 +112,6 @@ export default function KThemePlugin(Vue) {
         });
       },
     },
-    /* eslint-enable kolibri/vue-no-unused-methods */
   });
   Vue.prototype.$themeBrand = themeBrand();
   Vue.prototype.$themeTokens = themeTokens();
diff --git a/lib/KToolbar.vue b/lib/KToolbar.vue
index c52792602..ec0f4d0f0 100644
--- a/lib/KToolbar.vue
+++ b/lib/KToolbar.vue
@@ -1,22 +1,29 @@
 <template>
 
-  <div class="k-toolbar" :class="classes">
+  <div
+    class="k-toolbar"
+    :class="classes"
+  >
     <div class="k-toolbar-left">
-      <div v-if="!removeNavIcon" class="k-toolbar-nav-icon">
+      <div
+        v-if="!removeNavIcon"
+        class="k-toolbar-nav-icon"
+      >
         <slot name="icon">
           <UiIconButton
             size="large"
             type="secondary"
-
             :color="textColor"
             :icon="navIcon"
-
             @click="navIconClick"
           />
         </slot>
       </div>
 
-      <div v-if="brand || $slots.brand" class="k-toolbar-brand">
+      <div
+        v-if="brand || $slots.brand"
+        class="k-toolbar-brand"
+      >
         <slot name="brand">
           <div class="k-toolbar-brand-text">
             {{ brand }}
@@ -24,15 +31,19 @@
         </slot>
       </div>
       <slot>
-        <div v-if="title" class="k-toolbar-title">
+        <div
+          v-if="title"
+          class="k-toolbar-title"
+        >
           {{ title }}
         </div>
       </slot>
-      <slot name="navigation" class="k-toolbar-nav"></slot>
+      <slot
+        name="navigation"
+        class="k-toolbar-nav"
+      ></slot>
     </div>
 
-
-
     <div class="k-toolbar-right">
       <slot name="actions"></slot>
     </div>
diff --git a/lib/KTooltip/Popper.vue b/lib/KTooltip/Popper.vue
index 71de05d44..094ef5bef 100644
--- a/lib/KTooltip/Popper.vue
+++ b/lib/KTooltip/Popper.vue
@@ -11,7 +11,6 @@
        'appendToBody' prop changedto 'appendToEl' and related changes.
   -->
 
-
   <span>
     <transition
       :name="transition"
@@ -248,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;
             }
@@ -345,83 +344,79 @@
 <style>
 
   .popper {
+    position: absolute;
+    z-index: 200000;
+    display: inline-block;
     width: auto;
-    background-color: #fafafa;
-    color: #212121;
-    text-align: center;
     padding: 2px;
-    display: inline-block;
-    border-radius: 3px;
-    position: absolute;
     font-size: 14px;
     font-weight: normal;
+    color: #212121;
+    text-align: center;
+    background-color: #fafafa;
     border: 1px #ebebeb solid;
-    z-index: 200000;
-    -moz-box-shadow: rgb(58, 58, 58) 0 0 6px 0;
-    -webkit-box-shadow: rgb(58, 58, 58) 0 0 6px 0;
+    border-radius: 3px;
     box-shadow: rgb(58, 58, 58) 0 0 6px 0;
   }
 
   .popper .popper-arrow {
+    position: absolute;
     width: 0;
     height: 0;
-    border-style: solid;
-    position: absolute;
     margin: 5px;
+    border-style: solid;
   }
 
-  .popper[x-placement^="top"] {
+  .popper[x-placement^='top'] {
     margin-bottom: 5px;
   }
 
-  .popper[x-placement^="top"] .popper-arrow {
-    border-width: 5px 5px 0 5px;
-    border-color: #fafafa transparent transparent transparent;
+  .popper[x-placement^='top'] .popper-arrow {
     bottom: -5px;
     left: calc(50% - 5px);
     margin-top: 0;
     margin-bottom: 0;
+    border-color: #fafafa transparent transparent;
+    border-width: 5px 5px 0;
   }
 
-  .popper[x-placement^="bottom"] {
+  .popper[x-placement^='bottom'] {
     margin-top: 5px;
   }
 
-  .popper[x-placement^="bottom"] .popper-arrow {
-    border-width: 0 5px 5px 5px;
-    border-color: transparent transparent #fafafa transparent;
+  .popper[x-placement^='bottom'] .popper-arrow {
     top: -5px;
     left: calc(50% - 5px);
     margin-top: 0;
     margin-bottom: 0;
+    border-color: transparent transparent #fafafa;
+    border-width: 0 5px 5px;
   }
 
-  .popper[x-placement^="right"] {
+  .popper[x-placement^='right'] {
     margin-left: 5px;
   }
 
-  .popper[x-placement^="right"] .popper-arrow {
-    border-width: 5px 5px 5px 0;
-    border-color: transparent #fafafa transparent transparent;
-    left: -5px;
+  .popper[x-placement^='right'] .popper-arrow {
     top: calc(50% - 5px);
-    margin-left: 0;
+    left: -5px;
     margin-right: 0;
+    margin-left: 0;
+    border-color: transparent #fafafa transparent transparent;
+    border-width: 5px 5px 5px 0;
   }
 
-  .popper[x-placement^="left"] {
+  .popper[x-placement^='left'] {
     margin-right: 5px;
   }
 
-  .popper[x-placement^="left"] .popper-arrow {
-    border-width: 5px 0 5px 5px;
-    border-color: transparent transparent transparent #fafafa;
-    right: -5px;
+  .popper[x-placement^='left'] .popper-arrow {
     top: calc(50% - 5px);
-    margin-left: 0;
+    right: -5px;
     margin-right: 0;
+    margin-left: 0;
+    border-color: transparent transparent transparent #fafafa;
+    border-width: 5px 0 5px 5px;
   }
 
 </style>
-
-
diff --git a/lib/KTooltip/index.vue b/lib/KTooltip/index.vue
index fe053cd20..bca49feb0 100644
--- a/lib/KTooltip/index.vue
+++ b/lib/KTooltip/index.vue
@@ -12,11 +12,15 @@
     <div
       dir="auto"
       class="k-tooltip"
-      :style="{ backgroundColor: $themeTokens.text, color: $themeTokens.textInverted, maxWidth: maxWidth ? maxWidth : 'calc(100vw - 10px)', }"
+      :style="{
+        backgroundColor: $themeTokens.text,
+        color: $themeTokens.textInverted,
+        maxWidth: maxWidth ? maxWidth : 'calc(100vw - 10px)',
+      }"
     >
       <!-- If text prop is provided, display the text -->
-      <template v-if="text"> 
-        {{ text }} 
+      <template v-if="text">
+        {{ text }}
       </template>
       <!-- @slot Slot alternative to `text` prop -->
       <slot v-else></slot>
@@ -98,7 +102,6 @@
        * Whether or not the tooltip should be moved
        * to the overlay container element `#k-overlay`
        */
-      // eslint-disable-next-line kolibri/vue-no-unused-properties
       appendToOverlay: {
         type: Boolean,
         default: false,
diff --git a/lib/__tests__/KModal.spec.js b/lib/__tests__/KModal.spec.js
index 098fe69c4..8ccde5cae 100644
--- a/lib/__tests__/KModal.spec.js
+++ b/lib/__tests__/KModal.spec.js
@@ -73,7 +73,7 @@ describe('KModal component', () => {
           size: 'large',
         },
       });
-      expect(wrapper.find('.modal').element.style['width']).toEqual('100%');
+      expect(wrapper.find('.modal').element).toHaveStyle({ width: '100%' });
     });
 
     it(`size of modal can be determined by integer prop`, () => {
@@ -82,7 +82,7 @@ describe('KModal component', () => {
           size: 789,
         },
       });
-      expect(wrapper.find('.modal').element.style['width']).toEqual('789px');
+      expect(wrapper.find('.modal').element).toHaveStyle({ width: '789px' });
     });
 
     it(`error message is in a visually hidden span if hasError is true`, () => {
diff --git a/lib/__tests__/KRadioButtonGroup.spec.js b/lib/__tests__/KRadioButtonGroup.spec.js
index 8b0ab905c..a8acf81c4 100644
--- a/lib/__tests__/KRadioButtonGroup.spec.js
+++ b/lib/__tests__/KRadioButtonGroup.spec.js
@@ -40,9 +40,9 @@ describe('KRadioButtonGroup component', () => {
       const radioButtons = wrapper.findAllComponents(KRadioButton);
       expect(radioButtons.length).toBe(3);
 
-      let firstRadioBtnInputElm = radioButtons.at(0).find('input[type="radio"]');
-      let secondRadioBtnInputElm = radioButtons.at(1).find('input[type="radio"]');
-      let thirdRadioBtnInputElm = radioButtons.at(2).find('input[type="radio"]');
+      const firstRadioBtnInputElm = radioButtons.at(0).find('input[type="radio"]');
+      const secondRadioBtnInputElm = radioButtons.at(1).find('input[type="radio"]');
+      const thirdRadioBtnInputElm = radioButtons.at(2).find('input[type="radio"]');
 
       await firstRadioBtnInputElm.trigger('keyup', { key: 'ArrowDown' });
 
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
index 507106afd..7e08ba784 100644
--- a/lib/__tests__/KTable.spec.js
+++ b/lib/__tests__/KTable.spec.js
@@ -200,8 +200,9 @@ describe('KTable.vue', () => {
   });
 
   beforeEach(() => {
-    /*Since our primary concern in this test is checking focus management rather than actual scrolling behavior,
-    mocking scrollIntoView allows the test to focus on the relevant aspects without getting interrupted
+    /*Since our primary concern in this test is checking focus management rather
+    than actual scrolling behavior, mocking scrollIntoView allows the test to
+    focus on the relevant aspects without getting interrupted
     by unsupported methods in the test environment.*/
     window.HTMLElement.prototype.scrollIntoView = jest.fn();
   });
@@ -225,21 +226,21 @@ describe('KTable.vue', () => {
 
     const firstCell = wrapper.find('tbody tr:first-child td:first-child');
     await firstCell.element.focus(); // Focus the first cell directly
-    expect(document.activeElement).toBe(firstCell.element); // Check if the first cell is focused
+    expect(firstCell.element).toHaveFocus(); // Check if the first cell is focused
 
     // Simulate ArrowRight key press
     await firstCell.trigger('keydown', { key: 'ArrowRight' });
 
     const secondCell = wrapper.find('tbody tr:first-child td:nth-child(2)');
     await secondCell.element.focus(); // Focus the second cell directly
-    expect(document.activeElement).toBe(secondCell.element); // Check if the second cell is focused
+    expect(secondCell.element).toHaveFocus(); // Check if the second cell is focused
 
     // Simulate ArrowDown key press
     await secondCell.trigger('keydown', { key: 'ArrowDown' });
 
     const thirdCell = wrapper.find('tbody tr:nth-child(2) td:nth-child(2)');
     await thirdCell.element.focus(); // Focus the third cell directly
-    expect(document.activeElement).toBe(thirdCell.element); // Check if the third cell is focused
+    expect(thirdCell.element).toHaveFocus(); // Check if the third cell is focused
 
     // Cleanup: detach the wrapper from the document body after the test
     wrapper.destroy();
diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
index 0d231dbaa..18b89cdc9 100644
--- a/lib/buttons-and-links/KButton.vue
+++ b/lib/buttons-and-links/KButton.vue
@@ -28,7 +28,10 @@
     <slot v-if="$slots.default"></slot>
 
     <template>
-      <span class="link-text" :style="textStyle">{{ text }}</span>
+      <span
+        class="link-text"
+        :style="textStyle"
+      >{{ text }}</span>
     </template>
 
     <!-- @slot Slot alternative to the `iconAfter` prop -->
@@ -48,7 +51,7 @@
       class="dropdown-arrow"
       :style="arrowStyles"
       data-test="dropdownIcon"
-      style="width: 24px; height: 24px;"
+      style="width: 24px; height: 24px"
     />
   </component>
 
diff --git a/lib/buttons-and-links/KButtonGroup.vue b/lib/buttons-and-links/KButtonGroup.vue
index b429423ec..2ee642fb8 100644
--- a/lib/buttons-and-links/KButtonGroup.vue
+++ b/lib/buttons-and-links/KButtonGroup.vue
@@ -3,8 +3,8 @@
   /**
    * Used to create a consistently spaced horizontal set of buttons and/or links.
    *
-   * KButtonGroup works with KButton, KIconButton, KRouterLink and KExternalLink and any <a> or <button> tags.
-   * in it's default slot.
+   * KButtonGroup works with KButton, KIconButton, KRouterLink, KExternalLink,
+   * and any <a> or <button> tags in its default slot.
    */
 
   export default {
diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue
index cc1f812ef..40c53acb2 100644
--- a/lib/buttons-and-links/KExternalLink.vue
+++ b/lib/buttons-and-links/KExternalLink.vue
@@ -17,7 +17,7 @@
       <KIcon
         v-if="icon"
         :icon="icon"
-        style="top: 4px;"
+        style="top: 4px"
         :color="iconColor"
       />
     </slot>
@@ -25,21 +25,24 @@
     <slot v-if="$slots.default"></slot>
 
     <template v-else>
-      <span class="link-text" :style="spanStyle">{{ text }}</span>
+      <span
+        class="link-text"
+        :style="spanStyle"
+      >{{ text }}</span>
     </template>
 
     <slot name="iconAfter">
       <KIcon
         v-if="iconAfter"
         :icon="iconAfter"
-        style="top: 4px;"
+        style="top: 4px"
         :color="iconColor"
       />
     </slot>
     <KIcon
       v-if="openInNewTab"
       icon="openNewTab"
-      style="top: 4px;"
+      style="top: 4px"
       :color="iconColor"
     />
   </a>
@@ -101,7 +104,8 @@
     },
     computed: {
       /**
-       * If link opens in new tab or if icon is provided, add 8px margin between the icon and the text
+       * If link opens in new tab or if icon is provided,
+       * add 8px margin between the icon and the text
        */
       spanStyle() {
         const styles = {};
diff --git a/lib/buttons-and-links/KIconButton.vue b/lib/buttons-and-links/KIconButton.vue
index e1d8033c8..79cb50bf1 100644
--- a/lib/buttons-and-links/KIconButton.vue
+++ b/lib/buttons-and-links/KIconButton.vue
@@ -14,13 +14,17 @@
     <UiTooltip
       v-if="tooltip"
       :zIndex="24"
-      open-on="hover"
-      :position="tooltipPosition" 
+      openOn="hover"
+      :position="tooltipPosition"
     >
       {{ tooltip }}
     </UiTooltip>
     <!-- UiIconButton used flexbox - 7px is the magic centering number -->
-    <KIcon :icon="icon" :color="color" :style="iconStyles" />
+    <KIcon
+      :icon="icon"
+      :color="color"
+      :style="iconStyles"
+    />
     <!-- @slot Pass sub-components into the button, typically `KDropdownMenu` -->
     <slot name="menu"></slot>
   </KButton>
diff --git a/lib/buttons-and-links/KRouterLink.vue b/lib/buttons-and-links/KRouterLink.vue
index c2e91b09d..3267b79d8 100644
--- a/lib/buttons-and-links/KRouterLink.vue
+++ b/lib/buttons-and-links/KRouterLink.vue
@@ -14,13 +14,12 @@
     @mouseenter.native="hovering = true"
     @mouseleave.native="hovering = false"
   >
-
     <!-- @slot Optional slot as alternative to `icon` prop -->
     <slot name="icon">
       <KIcon
         v-if="icon"
         :icon="icon"
-        style="top: 4px;"
+        style="top: 4px"
         :color="iconColor"
         data-test="icon-before"
       />
@@ -30,7 +29,10 @@
     <slot v-if="$slots.default"></slot>
 
     <template v-else>
-      <span class="link-text" :style="spanStyle">{{ text }}</span>
+      <span
+        class="link-text"
+        :style="spanStyle"
+      >{{ text }}</span>
     </template>
 
     <!-- @slot Optional slot as alternative to `iconAfter` prop -->
@@ -38,7 +40,7 @@
       <KIcon
         v-if="iconAfter"
         :icon="iconAfter"
-        style="top: 4px;"
+        style="top: 4px"
         :color="iconColor"
         data-test="icon-after"
       />
diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
index bbd7d4e91..954e4a4d3 100644
--- a/lib/buttons-and-links/buttonMixin.js
+++ b/lib/buttons-and-links/buttonMixin.js
@@ -36,7 +36,8 @@ export default {
       default: () => ({}),
     },
     /**
-     * Show as primary rather than secondary style (for `'raised-button'` and `'flat-button'` appearance)
+     * Show as primary rather than secondary style
+     * (for `'raised-button'` and `'flat-button'` appearance)
      */
     primary: {
       type: Boolean,
@@ -81,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 6785c2671..8ed22ef5c 100644
--- a/lib/cards/KCard.vue
+++ b/lib/cards/KCard.vue
@@ -14,7 +14,7 @@
     @keyup.enter="onEnter"
   >
     <div
-      :class="['k-card-area', ...cardAreaClasses ]"
+      :class="['k-card-area', ...cardAreaClasses]"
       :style="{ backgroundColor: $themeTokens.surface }"
     >
       <div class="k-upper-card-area">
@@ -27,7 +27,10 @@
         - Prevents undesired screen reader announcements
           when title is customized via the `title` slot
       -->
-          <span :id="`k-card-title-${_uid}`" class="visuallyhidden">
+          <span
+            :id="`k-card-title-${_uid}`"
+            class="visuallyhidden"
+          >
             {{ title }}
           </span>
           <component
@@ -58,8 +61,9 @@
               @blur.native="onTitleBlur"
             >
               <span aria-hidden="true">
-                <!-- @slot A scoped slot via which the `title` can be customized. Provides the `titleText` attribute.-->
-                <slot 
+                <!-- @slot A scoped slot via which the `title` can be customized. 
+                 Provides the `titleText` attribute.-->
+                <slot
                   v-if="$scopedSlots.title"
                   name="title"
                   :titleText="title"
@@ -88,8 +92,9 @@
               @blur="onTitleBlur"
             >
               <span aria-hidden="true">
-                <!-- @slot A scoped slot via which the `title` can be customized. Provides the `titleText` attribute. -->
-                <slot 
+                <!-- @slot A scoped slot via which the `title` can be customized. 
+                 Provides the `titleText` attribute. -->
+                <slot
                   v-if="$scopedSlots.title"
                   name="title"
                   :titleText="title"
@@ -199,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;
@@ -233,6 +238,7 @@
           if (value <= 6 && value >= 2) {
             return true;
           } else {
+            // eslint-disable-next-line no-console
             console.error(`[KCard] 'headingLevel' must be between 2 and 6.`);
             return false;
           }
@@ -794,4 +800,4 @@
     }
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/lib/cards/KCardGrid.vue b/lib/cards/KCardGrid.vue
index 850751923..57145ec7a 100644
--- a/lib/cards/KCardGrid.vue
+++ b/lib/cards/KCardGrid.vue
@@ -4,7 +4,11 @@
     v-if="showGrid"
     class="k-card-grid"
   >
-    <transition name="fade" mode="out-in" appear>
+    <transition
+      name="fade"
+      mode="out-in"
+      appear
+    >
       <ul
         v-if="isLoading"
         key="loading"
@@ -87,14 +91,16 @@
             'row-gap': rowGap,
           };
           gridItemStyle.value = {
-            // remove all column gaps widths from the available width and then divide by the number of cards per row to get a single card width
-            // do not use `flex-basis` to avoid rounding errors causing incorrect display on some screen sizes
+            // remove all column gaps widths from the available width and
+            // then divide by the number of cards per row to get a single card width
+            // do not use `flex-basis` to avoid rounding errors
+            // causing incorrect display on some screen sizes
             width: `calc((100% - ${cardsPerRow - 1} * ${columnGap}) / ${cardsPerRow})`,
           };
         },
         {
           immediate: true,
-        }
+        },
       );
 
       // provide to `KCard`
@@ -118,7 +124,7 @@
        * Sets the base grid layout.
        * Options: `'1-1-1'`, `'1-2-2'`, and `'1-2-3'`.
        */
-      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      // eslint-disable-next-line vue/no-unused-properties
       layout: {
         required: false,
         type: String,
@@ -127,37 +133,33 @@
           return [LAYOUT_1_1_1, LAYOUT_1_2_2, LAYOUT_1_2_3].includes(value);
         },
       },
-      // eslint-enable-next-line kolibri/vue-no-unused-properties
       /**
        * Overrides the base grid `layout` for chosen breakpoints levels
        */
-      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      // eslint-disable-next-line vue/no-unused-properties
       layoutOverride: {
         type: Array,
         required: false,
         default: null,
       },
-      // eslint-enable-next-line kolibri/vue-no-unused-properties
       /**
        * Set to `true` as long as data for cards
        * are being loaded to display loading skeletons
        */
-      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      // eslint-disable-next-line vue/no-unused-properties
       loading: {
         type: Boolean,
         default: false,
       },
-      // eslint-enable-next-line kolibri/vue-no-unused-properties
       /**
        * Configures loading skeletons
        */
-      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      // eslint-disable-next-line vue/no-unused-properties
       skeletonsConfig: {
         type: Array,
         required: false,
         default: null,
       },
-      // eslint-enable kolibri/vue-no-unused-properties
       /**
        * Use for development only. Shows information in
        * the grid's corner that is useful for configuring
@@ -222,4 +224,4 @@
     }
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/lib/cards/SkeletonCard.vue b/lib/cards/SkeletonCard.vue
index 2fa5bf9db..9c0ae6300 100644
--- a/lib/cards/SkeletonCard.vue
+++ b/lib/cards/SkeletonCard.vue
@@ -29,7 +29,7 @@
       >
       </span>
     </template>
-  </kcard>
+  </KCard>
 
 </template>
 
@@ -91,6 +91,7 @@
     0% {
       transform: translateX(-100%);
     }
+
     100% {
       transform: translateX(100%);
     }
@@ -115,8 +116,10 @@
     @extend %dropshadow-2dp; // need to re-apply dropshadow because of `oveflow: hidden`
 
     position: relative;
-    overflow: hidden; // contain animation style within card area
-    border-radius: 0.5em; // prevents sharp corner, should match inner card area border radius in KCard
+    // contain animation style within card area
+    overflow: hidden;
+    // prevents sharp corner, should match inner card area border radius in KCard
+    border-radius: 0.5em;
   }
 
   .k-skeleton-card::before {
@@ -131,4 +134,4 @@
     animation: loading 1.5s infinite ease-in-out;
   }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/lib/cards/__tests__/KCard.spec.js b/lib/cards/__tests__/KCard.spec.js
index a7041dddf..217560b66 100644
--- a/lib/cards/__tests__/KCard.spec.js
+++ b/lib/cards/__tests__/KCard.spec.js
@@ -67,7 +67,7 @@ describe('KCard', () => {
     // <li>
     //  |-- <span> with visually hidden title text
     //  |-- <h[2-6]>
-    //        |--<span> with aria-labelledby pointing to the span with the visually hidden title text
+    //        |--<span> with aria-labelledby pointing to the previous span
     //           |-- <span> with aria-hidden
     //
     const el1 = wrapper.find(':first-child');
diff --git a/lib/cards/useGridLoading.js b/lib/cards/useGridLoading.js
index 81cdab12c..f58ba7743 100644
--- a/lib/cards/useGridLoading.js
+++ b/lib/cards/useGridLoading.js
@@ -1,4 +1,4 @@
-import Vue, { ref, watch, onMounted, toRefs, computed } from 'vue';
+import { ref, watch, onMounted, toRefs, computed, nextTick } from 'vue';
 
 import useGridLayout from './useGridLayout';
 import { getBreakpointConfig } from './utils';
@@ -94,7 +94,7 @@ export default function useGridLoading(props) {
   });
 
   onMounted(() => {
-    Vue.nextTick(() => {
+    nextTick(() => {
       finishedMounting.value = true;
     });
   });
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 4e23013f6..a1f39e024 100644
--- a/lib/composables/_useOverlay/index.js
+++ b/lib/composables/_useOverlay/index.js
@@ -45,8 +45,9 @@ export default function _useOverlay() {
     const overlayEl = window.overlayEl;
     // unlikely to happen, but just in case
     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/composables/useKLiveRegion/index.js b/lib/composables/useKLiveRegion/index.js
index 3b0f89ee0..28b62ed9a 100644
--- a/lib/composables/useKLiveRegion/index.js
+++ b/lib/composables/useKLiveRegion/index.js
@@ -56,6 +56,7 @@ export default function useKLiveRegion() {
     try {
       el.textContent = message;
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.error('[useKLiveRegion] Could not send the message:', error);
     } finally {
       // empty the live region
diff --git a/lib/grids/KFixedGrid.vue b/lib/grids/KFixedGrid.vue
index bfc2a5517..4c8f92c70 100644
--- a/lib/grids/KFixedGrid.vue
+++ b/lib/grids/KFixedGrid.vue
@@ -1,7 +1,10 @@
 <template>
 
-  <div style="direction: inherit;">
-    <div class="pure-g" :style="style">
+  <div style="direction: inherit">
+    <div
+      class="pure-g"
+      :style="style"
+    >
       <!-- @slot Children of a `KFixedGrid` must be `KFixedGridItem` components -->
       <slot></slot>
     </div>
diff --git a/lib/grids/KFixedGridItem.vue b/lib/grids/KFixedGridItem.vue
index 74ed941a9..c6a2acee4 100644
--- a/lib/grids/KFixedGridItem.vue
+++ b/lib/grids/KFixedGridItem.vue
@@ -1,6 +1,10 @@
 <template>
 
-  <div class="grid-item" :class="unitClass" :style="computedStyle">
+  <div
+    class="grid-item"
+    :class="unitClass"
+    :style="computedStyle"
+  >
     <div
       :class="{ debug: gridMetrics.debug, error: !validInputs }"
       :dir="alignment === 'auto' ? 'auto' : null"
@@ -109,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/KGridItem.vue b/lib/grids/KGridItem.vue
index c15918df5..3f6891ff3 100644
--- a/lib/grids/KGridItem.vue
+++ b/lib/grids/KGridItem.vue
@@ -1,6 +1,9 @@
 <template>
 
-  <KFixedGridItem :span="currentSpan" :alignment="currentAlignment">
+  <KFixedGridItem
+    :span="currentSpan"
+    :alignment="currentAlignment"
+  >
     <!-- @slot Contents of the grid item -->
     <slot></slot>
   </KFixedGridItem>
diff --git a/lib/grids/Overlay.vue b/lib/grids/Overlay.vue
index 5a8496732..5125bab78 100644
--- a/lib/grids/Overlay.vue
+++ b/lib/grids/Overlay.vue
@@ -4,20 +4,17 @@
     <div
       class="overlay"
       :style="marginLeftStyle"
-    >
-    </div>
+    ></div>
     <div
       v-for="n in cols - 1"
       :key="n"
       class="overlay"
       :style="gutterStyle(n)"
-    >
-    </div>
+    ></div>
     <div
       class="overlay"
       :style="marginRightStyle"
-    >
-    </div>
+    ></div>
   </div>
 
 </template>
diff --git a/lib/grids/extra-units.css b/lib/grids/extra-units.css
index ea2c287e0..1ace59db6 100644
--- a/lib/grids/extra-units.css
+++ b/lib/grids/extra-units.css
@@ -48,201 +48,164 @@
 }
 
 .pure-u-1-7 {
-  width: 14.2857%;
   *width: 14.2547%;
 }
 
 .pure-u-2-7 {
-  width: 28.5714%;
   *width: 28.5404%;
 }
 
 .pure-u-3-7 {
-  width: 42.8571%;
   *width: 42.8261%;
 }
 
 .pure-u-4-7 {
-  width: 57.1428%;
   *width: 57.1118%;
 }
 
 .pure-u-5-7 {
-  width: 71.4285%;
   *width: 71.3975%;
 }
 
 .pure-u-6-7 {
-  width: 85.7142%;
   *width: 85.6832%;
 }
 
 /* prettier-ignore */
 .pure-u-7-7 {
-  width: 100.0%;
   *width: 99.969%;
 }
 
 .pure-u-1-9 {
-  width: 11.1111%;
   *width: 11.0801%;
 }
 
 .pure-u-2-9 {
-  width: 22.2222%;
   *width: 22.1912%;
 }
 
 .pure-u-3-9 {
-  width: 33.3333%;
   *width: 33.3023%;
 }
 
 .pure-u-4-9 {
-  width: 44.4444%;
   *width: 44.4134%;
 }
 
 .pure-u-5-9 {
-  width: 55.5555%;
   *width: 55.5245%;
 }
 
 .pure-u-6-9 {
-  width: 66.6666%;
   *width: 66.6356%;
 }
 
 .pure-u-7-9 {
-  width: 77.7777%;
   *width: 77.7467%;
 }
 
 .pure-u-8-9 {
-  width: 88.8888%;
   *width: 88.8578%;
 }
 
 /* prettier-ignore */
 .pure-u-9-9 {
-  width: 100.0%;
   *width: 99.969%;
 }
 
 /* prettier-ignore */
 .pure-u-1-10 {
-  width: 10.0%;
   *width: 9.969%;
 }
 
 /* prettier-ignore */
 .pure-u-2-10 {
-  width: 20.0%;
   *width: 19.969%;
 }
 
 /* prettier-ignore */
 .pure-u-3-10 {
-  width: 30.0%;
   *width: 29.969%;
 }
 
 /* prettier-ignore */
 .pure-u-4-10 {
-  width: 40.0%;
   *width: 39.969%;
 }
 
 /* prettier-ignore */
 .pure-u-5-10 {
-  width: 50.0%;
   *width: 49.969%;
 }
 
 /* prettier-ignore */
 .pure-u-6-10 {
-  width: 60.0%;
   *width: 59.969%;
 }
 
 /* prettier-ignore */
 .pure-u-7-10 {
-  width: 70.0%;
   *width: 69.969%;
 }
 
 /* prettier-ignore */
 .pure-u-8-10 {
-  width: 80.0%;
   *width: 79.969%;
 }
 
 /* prettier-ignore */
 .pure-u-9-10 {
-  width: 90.0%;
   *width: 89.969%;
 }
 
 /* prettier-ignore */
 .pure-u-10-10 {
-  width: 100.0%;
   *width: 99.969%;
 }
 
 .pure-u-1-11 {
-  width: 9.0909%;
   *width: 9.0599%;
 }
 
 .pure-u-2-11 {
-  width: 18.1818%;
   *width: 18.1508%;
 }
 
 .pure-u-3-11 {
-  width: 27.2727%;
   *width: 27.2417%;
 }
 
 .pure-u-4-11 {
-  width: 36.3636%;
   *width: 36.3326%;
 }
 
 .pure-u-5-11 {
-  width: 45.4545%;
   *width: 45.4235%;
 }
 
 .pure-u-6-11 {
-  width: 54.5454%;
   *width: 54.5144%;
 }
 
 .pure-u-7-11 {
-  width: 63.6363%;
   *width: 63.6053%;
 }
 
 .pure-u-8-11 {
-  width: 72.7272%;
   *width: 72.6962%;
 }
 
 .pure-u-9-11 {
-  width: 81.8181%;
   *width: 81.7871%;
 }
 
 /* prettier-ignore */
 .pure-u-10-11 {
-  width: 90.9090%;
   *width: 90.8780%;
 }
 
 /* prettier-ignore */
 .pure-u-11-11 {
-  width: 100.0%;
   *width: 99.969%;
 }
 /* stylelint-enable */
diff --git a/lib/grids/test/KFixedGrid.spec.js b/lib/grids/test/KFixedGrid.spec.js
index df7f30037..534472d1f 100644
--- a/lib/grids/test/KFixedGrid.spec.js
+++ b/lib/grids/test/KFixedGrid.spec.js
@@ -23,8 +23,8 @@ describe('KFixedGrid component', () => {
 
   describe('gutters and margins ', () => {
     function assertMarginSize(wrapper, margins) {
-      expect(getGrid(wrapper).element.style['margin-left']).toEqual(`${margins}px`);
-      expect(getGrid(wrapper).element.style['margin-right']).toEqual(`${margins}px`);
+      expect(getGrid(wrapper).element).toHaveStyle({ marginLeft: `${margins}px` });
+      expect(getGrid(wrapper).element).toHaveStyle({ marginRight: `${margins}px` });
     }
 
     const gutterSizesTestCases = [
@@ -50,7 +50,7 @@ describe('KFixedGrid component', () => {
           }
         };
         testAfterResize(checkGutterProperties);
-      }
+      },
     );
 
     it('should have a -5px offset when 10px gutters are specified', () => {
diff --git a/lib/grids/test/KFixedGridItem.spec.js b/lib/grids/test/KFixedGridItem.spec.js
index e7fedf3b6..6dcbd87dc 100644
--- a/lib/grids/test/KFixedGridItem.spec.js
+++ b/lib/grids/test/KFixedGridItem.spec.js
@@ -32,19 +32,19 @@ describe('KFixedGridItem component', () => {
 
   it('should have 8px padding for 16px gutters', () => {
     const wrapper = makeWrapperSmall(KFixedGridItem, { span: 2 });
-    expect(wrapper.element.style['padding-left']).toEqual('8px');
-    expect(wrapper.element.style['padding-right']).toEqual('8px');
+    expect(wrapper.element).toHaveStyle({ paddingLeft: '8px' });
+    expect(wrapper.element).toHaveStyle({ paddingRight: '8px' });
   });
 
   it('should have 12px padding for 24px gutters', () => {
     const wrapper = makeWrapperLarge(KFixedGridItem, { span: 2 });
-    expect(wrapper.element.style['padding-left']).toEqual('12px');
-    expect(wrapper.element.style['padding-right']).toEqual('12px');
+    expect(wrapper.element).toHaveStyle({ paddingLeft: '12px' });
+    expect(wrapper.element).toHaveStyle({ paddingRight: '12px' });
   });
 
   it('should handle non-responsive alignment', () => {
     const wrapper = makeWrapperSmall(KFixedGridItem, { span: 2, alignment: 'center' });
-    expect(wrapper.element.style['text-align']).toEqual('center');
+    expect(wrapper.element).toHaveStyle({ textAlign: 'center' });
   });
 
   it('should handle text-based span', () => {
diff --git a/lib/grids/test/KGridItem.spec.js b/lib/grids/test/KGridItem.spec.js
index cdf0f8588..507cef3fa 100644
--- a/lib/grids/test/KGridItem.spec.js
+++ b/lib/grids/test/KGridItem.spec.js
@@ -19,7 +19,7 @@ describe('KGridItem component', () => {
       const wrapper = makeWrapperSmall(KGridItem, props);
       await wrapper.vm.$nextTick();
       const assertion = () => {
-        expect(wrapper.element.style['text-align']).toEqual('right');
+        expect(wrapper.element).toHaveStyle({ textAlign: 'right' });
       };
       testAfterResize(assertion);
     });
@@ -27,7 +27,7 @@ describe('KGridItem component', () => {
       const wrapper = makeWrapperMedium(KGridItem, props);
       await wrapper.vm.$nextTick();
       const assertion = () => {
-        expect(wrapper.element.style['text-align']).toEqual('left');
+        expect(wrapper.element).toHaveStyle({ textAlign: 'left' });
       };
       testAfterResize(assertion);
     });
@@ -35,7 +35,7 @@ describe('KGridItem component', () => {
       const wrapper = makeWrapperLarge(KGridItem, props);
       await wrapper.vm.$nextTick();
       const assertion = () => {
-        expect(wrapper.element.style['text-align']).toEqual('center');
+        expect(wrapper.element).toHaveStyle({ textAlign: 'center' });
       };
       testAfterResize(assertion);
     });
@@ -95,7 +95,7 @@ describe('KGridItem component', () => {
       const wrapper = makeWrapperSmall(KGridItem, props);
       await wrapper.vm.$nextTick();
       const assertion = () => {
-        expect(wrapper.element.style['text-align']).toEqual('center');
+        expect(wrapper.element).toHaveStyle({ textAlign: 'center' });
         expect(wrapper.classes()[1]).toEqual('pure-u-24-24');
       };
       testAfterResize(assertion);
@@ -105,7 +105,7 @@ describe('KGridItem component', () => {
       const wrapper = makeWrapperMedium(KGridItem, props);
       await wrapper.vm.$nextTick();
       const assertion = () => {
-        expect(wrapper.element.style['text-align']).toEqual('right');
+        expect(wrapper.element).toHaveStyle({ textAlign: 'right' });
         expect(wrapper.classes()[1]).toEqual('pure-u-6-24');
       };
       testAfterResize(assertion);
@@ -115,7 +115,7 @@ describe('KGridItem component', () => {
       const wrapper = makeWrapperLarge(KGridItem, props);
       await wrapper.vm.$nextTick();
       const assertion = () => {
-        expect(wrapper.element.style['text-align']).toEqual('left');
+        expect(wrapper.element).toHaveStyle({ textAlign: 'left' });
         expect(wrapper.classes()[1]).toEqual('pure-u-12-24');
       };
       testAfterResize(assertion);
diff --git a/lib/loaders/KCircularLoader.vue b/lib/loaders/KCircularLoader.vue
index c818856a2..1cf85558b 100644
--- a/lib/loaders/KCircularLoader.vue
+++ b/lib/loaders/KCircularLoader.vue
@@ -8,32 +8,28 @@
    and remove unused logic.
   -->
 
-
   <transition :name="disableDefaultTransition ? '' : 'ui-progress-circular--transition-fade'">
     <div
       v-if="show(_uid, shouldShow, minVisibleTime)"
       class="ui-progress-circular"
       :class="[classes, { delay }]"
-      :style="{ 'width': size + 'px', 'height': size + 'px' }"
+      :style="{ width: size + 'px', height: size + 'px' }"
     >
       <!-- Alternative circle rendering to explore: http://jsfiddle.net/6e3QJ/29/ -->
       <svg
         v-if="type === 'determinate'"
         class="ui-progress-circular-determinate"
-
         role="progressbar"
         :aria-valuemax="100"
         :aria-valuemin="0"
         :aria-valuenow="progress"
         :height="size"
-
         :width="size"
       >
         <circle
           class="ui-progress-circular-determinate-path"
           fill="transparent"
           stroke-dashoffset="0"
-
           :cx="size / 2"
           :cy="size / 2"
           :r="radius"
@@ -50,10 +46,8 @@
         v-else
         class="ui-progress-circular-indeterminate"
         role="progressbar"
-
         viewBox="25 25 50 50"
         :aria-valuemax="100"
-
         :aria-valuemin="0"
         :style="{ stroke: $themeTokens.loading }"
       >
@@ -64,7 +58,6 @@
           fill="none"
           r="20"
           stroke-miterlimit="10"
-
           :stroke-width="calculatedStroke"
           :style="{
             stroke: $themeTokens.loading,
@@ -93,14 +86,17 @@
     },
     props: {
       /**
-       * One of `'determinate'` or `'indeterminate'`. Determinate loaders represent a known completion percentage, while indeterminate loaders simply show that activity is currently happening.
+       * One of `'determinate'` or `'indeterminate'`.
+       * Determinate loaders represent a known completion percentage.
+       * Indeterminate loaders simply show that activity is currently happening.
        */
       type: {
         type: String,
         default: 'indeterminate', // 'indeterminate' or 'determinate'
       },
       /**
-       * Whether the loader should be displayed or not. It needs to be used instead of `v-if/v-show` for `minVisibleTime` to work.
+       * Whether the loader should be displayed or not.
+       * It needs to be used instead of `v-if/v-show` for `minVisibleTime` to work.
        */
       shouldShow: {
         type: Boolean,
@@ -114,14 +110,19 @@
         default: 0,
       },
       /**
-       * Whether there should be a delay before the loader displays. Useful if the action often takes less than a second or two.
+       * Whether there should be a delay before the loader displays.
+       * Useful if the action often takes less than a second or two.
        */
       delay: {
         type: Boolean,
         default: false,
       },
       /**
-       * Do not hide the loader until `minVisibleTime` in milliseconds. Useful to avoid jarring UX when the actions finishes very fast. In comparison to `delay`, `minVisibleTime` emphasizes that an action associated with the loader is indeed taking place. `shouldShow` prop needs to be used instead of `v-if/v-show` for this to work.
+       * Do not hide the loader until `minVisibleTime` in milliseconds.
+       * Useful to avoid jarring UX when the actions finishes very fast.
+       * In comparison to `delay`, `minVisibleTime` emphasizes that an
+       * action associated with the loader is indeed taking place.
+       * `shouldShow` prop needs to be used instead of `v-if/v-show` for this to work.
        */
       minVisibleTime: {
         type: Number,
@@ -274,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/loaders/KLinearLoader.vue b/lib/loaders/KLinearLoader.vue
index cedf78b69..61ab91af4 100644
--- a/lib/loaders/KLinearLoader.vue
+++ b/lib/loaders/KLinearLoader.vue
@@ -16,12 +16,10 @@
       <div
         v-if="type === 'determinate'"
         class="is-determinate ui-progress-linear-progress-bar"
-
         role="progressbar"
         :aria-valuemax="100"
         :aria-valuemin="0"
         :aria-valuenow="moderatedProgress"
-
         :style="{
           transform: `scaleX(${moderatedProgress / 100})`,
           backgroundColor: $themeTokens.loading,
@@ -31,11 +29,9 @@
       <div
         v-else
         class="is-indeterminate ui-progress-linear-progress-bar"
-
         role="progressbar"
         :aria-valuemax="100"
         :aria-valuemin="0"
-
         :style="{ backgroundColor: $themeTokens.loading }"
       ></div>
     </div>
@@ -53,7 +49,9 @@
     name: 'KLinearLoader',
     props: {
       /**
-       * One of `'determinate'` or `'indeterminate'`. Determinate loaders represent a known completion percentage, while indeterminate loaders simply show that activity is currently happening.
+       * One of `'determinate'` or `'indeterminate'`.
+       * Determinate loaders represent a known completion percentage.
+       * Indeterminate loaders simply show that activity is currently happening.
        */
       type: {
         type: String,
@@ -70,7 +68,8 @@
         default: 0,
       },
       /**
-       * Whether there should be a delay before the loader displays. Useful if the action often takes less than a second or two.
+       * Whether there should be a delay before the loader displays.
+       * Useful if the action often takes less than a second or two.
        */
       delay: {
         type: Boolean,
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/KTabs.vue b/lib/tabs/KTabs.vue
index cfddac85c..31cbd02e6 100644
--- a/lib/tabs/KTabs.vue
+++ b/lib/tabs/KTabs.vue
@@ -3,7 +3,19 @@
   <div>
     <KTabsList
       v-model="activeTabId"
-      v-bind="{ tabsId, tabs, ariaLabel, ariaLabelledBy, color, colorActive, backgroundColor, hoverBackgroundColor, appearanceOverrides, appearanceOverridesActive, enablePrint }"
+      v-bind="{
+        tabsId,
+        tabs,
+        ariaLabel,
+        ariaLabelledBy,
+        color,
+        colorActive,
+        backgroundColor,
+        hoverBackgroundColor,
+        appearanceOverrides,
+        appearanceOverridesActive,
+        enablePrint,
+      }"
     >
       <!-- provide the same `tab` slot and send its properties further up from `KTabsList` -->
       <template #tab="{ tab, isActive }">
@@ -25,7 +37,10 @@
       <!-- send the default slot and named slots to `KTabsPanel` which will then process them -->
       <!-- @slot An alternative to using slots named by tabs' IDs. -->
       <slot></slot>
-      <template v-for="(_, slot) in $slots" #[slot]>
+      <template
+        v-for="(_, slot) in $slots"
+        #[slot]
+      >
         <slot :name="slot"></slot>
       </template>
     </KTabsPanel>
@@ -63,11 +78,12 @@
     },
     mounted() {
       // automatically set the first tab as active when not using router
-      // (if a router is used, 'activeTabId' is set by `KTabList` to correspond to the current route)
+      // (if a router is used, 'activeTabId' is set by `KTabList`
+      // to correspond to the current route)
       if (!this.useRouter && this.tabs && this.tabs.length) {
         this.activeTabId = this.tabs[0].id;
       }
     },
   };
 
-</script>
\ No newline at end of file
+</script>
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/KTabsPanel.vue b/lib/tabs/KTabsPanel.vue
index bb2fc0328..68c7c8af3 100644
--- a/lib/tabs/KTabsPanel.vue
+++ b/lib/tabs/KTabsPanel.vue
@@ -9,7 +9,8 @@
   >
     <!-- @slot An alternative to using slots named by tabs' IDs. -->
     <slot></slot>
-    <!-- @slot Slots named by tab's IDs. Only content corresponding to the active tab is displayed. -->
+    <!-- @slot Slots named by tab's IDs.
+     Only content corresponding to the active tab is displayed. -->
     <slot :name="[activeTabId]"></slot>
   </div>
 
@@ -80,4 +81,4 @@
     },
   };
 
-</script>
\ No newline at end of file
+</script>
diff --git a/lib/tabs/__tests__/KTabsList.spec.js b/lib/tabs/__tests__/KTabsList.spec.js
index 9b39c62d9..cde20b369 100644
--- a/lib/tabs/__tests__/KTabsList.spec.js
+++ b/lib/tabs/__tests__/KTabsList.spec.js
@@ -1,5 +1,5 @@
 import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import VueRouter, { isNavigationFailure } from 'vue-router';
 import KTabsList from '../KTabsList.vue';
 
 const localVue = createLocalVue();
@@ -11,12 +11,12 @@ 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);
   }
   return routerPush.call(this, location).catch(err => {
-    if (VueRouter.isNavigationFailure(err)) {
+    if (isNavigationFailure(err)) {
       // resolve err
       return err;
     }
@@ -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'`,
     );
   });
 
@@ -257,7 +257,9 @@ describe(`KTabsList`, () => {
         const links = wrapper.findAll('a');
         links.at(2).trigger('click');
 
-        // see `when mounted - emits 'activate' event with the tab id that corresponds to the current route` test to understand why we need to test the second emitted event here
+        // see `when mounted - emits 'activate' event with the tab id that
+        // corresponds to the current route` test to understand why we
+        // need to test the second emitted event here
         expect(wrapper.emitted().activate.length).toBe(2);
         expect(wrapper.emitted().activate[1][0]).toBe('tabGroups');
       });
diff --git a/lib/tabs/__tests__/KTabsPanel.spec.js b/lib/tabs/__tests__/KTabsPanel.spec.js
index 01dd383e5..855045493 100644
--- a/lib/tabs/__tests__/KTabsPanel.spec.js
+++ b/lib/tabs/__tests__/KTabsPanel.spec.js
@@ -93,8 +93,8 @@ describe(`KTabsPanel`, () => {
     // switch to a tab which has no focusable elements
     wrapper.setProps({ activeTabId: 'lessonsTab' });
 
-    // Need to wait two ticks - initial value change is in response to a watcher on the updated prop,
-    // and then the value is only updated after the nextTick
+    // Need to wait two ticks - initial value change is in response to a watcher
+    // on the updated prop, and then the value is only updated after the nextTick
     await wrapper.vm.$nextTick();
     await wrapper.vm.$nextTick();
     expect(wrapper.attributes('tabindex')).toBe('0');
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 23b09c859..5f8ebb897 100644
--- a/utils/extractRstIcons.js
+++ b/utils/extractRstIcons.js
@@ -36,10 +36,12 @@ const consola = require('consola');
 // Within iconDefinitions.js, match the main object: `const KolibriIcons = {...}`
 const MAIN_OBJECT_PATTERN = /const KolibriIcons = {(.*?\n)}/s;
 
-// Within the main object, match all individual definition objects: `  someIconName: { icon: require('./some/icon/path'), ...}`
+// Within the main object, match all individual definition objects:
+// `  someIconName: { icon: require('./some/icon/path'), ...}`
 const ICON_DEFINITION_PATTERN = /\n {2}(\w+): {.*?\s+icon:\s+require\('(.+?)'\).*?},/gs;
 
-// Within a definition object, match a defaultColor attribute: `defaultColor: themeTokens().someColor`
+// Within a definition object, match a defaultColor attribute:
+// `defaultColor: themeTokens().someColor`
 const ICON_DEFINITION_COLOR_PATTERN = /defaultColor:\s+themeTokens\(\)\.(\w+)/s;
 
 // Within an icon file, match just the SVG tag
@@ -69,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>\``,
       );
     }
 
@@ -77,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}`),
     );
   });
 }