From cdeff2c86f2bc7892ba81b0cdee6537e965d3b74 Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Tue, 2 Jan 2024 16:01:07 -0800
Subject: [PATCH] web: last-minute pre-commit cleanup.

---
 web/src/admin/outposts/OutpostForm.ts         |  8 ++--
 .../ak-dual-select/ak-dual-select-provider.ts |  2 +-
 .../elements/ak-dual-select/ak-dual-select.ts | 13 ++----
 .../ak-dual-select-available-pane.ts          | 16 +++----
 .../components/ak-dual-select-controls.ts     | 12 ++---
 .../ak-dual-select-selected-pane.ts           |  8 ++--
 .../components/ak-pagination.ts               |  2 +-
 .../ak-dual-select/components/styles.css.ts   | 44 +++++++++---------
 web/src/elements/ak-dual-select/index.ts      |  3 +-
 .../ak-dual-select-available-pane.stories.ts  |  8 ++--
 .../stories/ak-dual-select-master.stories.ts  | 45 ++++++++++---------
 .../ak-dual-select-selected-pane.stories.ts   |  9 ++--
 .../stories/sb-host-provider.ts               |  5 ++-
 web/src/elements/ak-dual-select/types.ts      |  2 +-
 14 files changed, 83 insertions(+), 94 deletions(-)

diff --git a/web/src/admin/outposts/OutpostForm.ts b/web/src/admin/outposts/OutpostForm.ts
index 76af2df32..65c418c19 100644
--- a/web/src/admin/outposts/OutpostForm.ts
+++ b/web/src/admin/outposts/OutpostForm.ts
@@ -110,7 +110,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
 
     async load(): Promise<void> {
         this.defaultConfig = await new OutpostsApi(
-            DEFAULT_CONFIG
+            DEFAULT_CONFIG,
         ).outpostsInstancesDefaultSettingsRetrieve();
         this.providers = providerProvider(this.type);
     }
@@ -188,7 +188,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
                             args.search = query;
                         }
                         const items = await new OutpostsApi(
-                            DEFAULT_CONFIG
+                            DEFAULT_CONFIG,
                         ).outpostsServiceConnectionsAllList(args);
                         return items.results;
                     }}
@@ -213,7 +213,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
                 </ak-search-select>
                 <p class="pf-c-form__helper-text">
                     ${msg(
-                        "Selecting an integration enables the management of the outpost by authentik."
+                        "Selecting an integration enables the management of the outpost by authentik.",
                     )}
                 </p>
                 <p class="pf-c-form__helper-text">
@@ -239,7 +239,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
                 <ak-codemirror
                     mode=${CodeMirrorMode.YAML}
                     value="${YAML.stringify(
-                        this.instance ? this.instance.config : this.defaultConfig?.config
+                        this.instance ? this.instance.config : this.defaultConfig?.config,
                     )}"
                 ></ak-codemirror>
                 <p class="pf-c-form__helper-text">
diff --git a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
index 7029b13d3..4ffa1ee79 100644
--- a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
+++ b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts
@@ -26,7 +26,7 @@ import type { DataProvider, DualSelectPair } from "./types";
 @customElement("ak-dual-select-provider")
 export class AkDualSelectProvider extends CustomListenerElement(AKElement) {
     // A function that takes a page and returns the DualSelectPair[] collection with which to update
-        // the "Available" pane.
+    // the "Available" pane.
     @property({ type: Object })
     provider!: DataProvider;
 
diff --git a/web/src/elements/ak-dual-select/ak-dual-select.ts b/web/src/elements/ak-dual-select/ak-dual-select.ts
index cfcbcad41..82dac2cea 100644
--- a/web/src/elements/ak-dual-select/ak-dual-select.ts
+++ b/web/src/elements/ak-dual-select/ak-dual-select.ts
@@ -5,7 +5,7 @@ import {
 } from "@goauthentik/elements/utils/eventEmitter";
 
 import { msg, str } from "@lit/localize";
-import { PropertyValues, TemplateResult, css, html, nothing } from "lit";
+import { PropertyValues, TemplateResult, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import type { Ref } from "lit/directives/ref.js";
@@ -36,19 +36,14 @@ type PairValue = string | TemplateResult;
 type Pair = [string, PairValue];
 const alphaSort = ([_k1, v1]: Pair, [_k2, v2]: Pair) => (v1 < v2 ? -1 : v1 > v2 ? 1 : 0);
 
-const styles = [
-    PFBase,
-    PFButton,
-    globalVariables,
-    mainStyles,
-];
+const styles = [PFBase, PFButton, globalVariables, mainStyles];
 
 /**
  * @element ak-dual-select
  *
  * A master (but independent) component that shows two lists-- one of "available options" and one of
  * "selected options".  The Available Options panel supports pagination if it receives a valid and
- * active pagination object (based on Django's pagination object) from the invoking component.  
+ * active pagination object (based on Django's pagination object) from the invoking component.
  *
  * @fires ak-dual-select-change - A custom change event with the current `selected` list.
  */
@@ -153,7 +148,7 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE
 
             default:
                 throw new Error(
-                    `AkDualSelect.handleMove received unknown event type: ${eventName}`
+                    `AkDualSelect.handleMove received unknown event type: ${eventName}`,
                 );
         }
         this.dispatchCustomEvent("ak-dual-select-change", { value: this.value });
diff --git a/web/src/elements/ak-dual-select/components/ak-dual-select-available-pane.ts b/web/src/elements/ak-dual-select/components/ak-dual-select-available-pane.ts
index d0780d2ff..e7380ca98 100644
--- a/web/src/elements/ak-dual-select/components/ak-dual-select-available-pane.ts
+++ b/web/src/elements/ak-dual-select/components/ak-dual-select-available-pane.ts
@@ -1,26 +1,20 @@
 import { AKElement } from "@goauthentik/elements/Base";
 import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
 
-import { PropertyValues, css, html, nothing } from "lit";
+import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { map } from "lit/directives/map.js";
 
+import { availablePaneStyles, listStyles } from "./styles.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { EVENT_ADD_ONE } from "../constants";
 import type { DualSelectPair } from "../types";
-import { availablePaneStyles, listStyles } from "./styles.css";
 
-const styles = [
-    PFBase,
-    PFButton,
-    PFDualListSelector,
-    listStyles,
-    availablePaneStyles
-];
+const styles = [PFBase, PFButton, PFDualListSelector, listStyles, availablePaneStyles];
 
 const hostAttributes = [
     ["aria-labelledby", "dual-list-selector-available-pane-status"],
@@ -39,7 +33,7 @@ const hostAttributes = [
  * @fires ak-dual-select-available-move-changed - When the list of "to move" entries changed.
  * Includes the current * `toMove` content.
  *
- * @fires ak-dual-select-add-one - Doubleclick with the element clicked on.
+ * @fires ak-dual-select-add-one - Double-click with the element clicked on.
  *
  * It is not expected that the `ak-dual-select-available-move-changed` event will be used; instead,
  * the attribute will be read by the parent when a control is clicked.
@@ -105,7 +99,7 @@ export class AkDualSelectAvailablePane extends CustomEmitterElement(AKElement) {
         }
         this.dispatchCustomEvent(
             "ak-dual-select-available-move-changed",
-            Array.from(this.toMove.values()).sort()
+            Array.from(this.toMove.values()).sort(),
         );
         this.dispatchCustomEvent("ak-dual-select-move");
         // Necessary because updating a map won't trigger a state change
diff --git a/web/src/elements/ak-dual-select/components/ak-dual-select-controls.ts b/web/src/elements/ak-dual-select/components/ak-dual-select-controls.ts
index c8c88ac8d..0dd181074 100644
--- a/web/src/elements/ak-dual-select/components/ak-dual-select-controls.ts
+++ b/web/src/elements/ak-dual-select/components/ak-dual-select-controls.ts
@@ -64,7 +64,7 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
     removeActive = false;
 
     /* Set to true if *all* the currently visible elements can be moved
-     * into the selected list (essentially, if any visible elemnets are
+     * into the selected list (essentially, if any visible elements are
      * not currently selected
      */
     @property({ attribute: "add-all-active", type: Boolean })
@@ -125,7 +125,7 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
                     msg("Add"),
                     EVENT_ADD_SELECTED,
                     this.addActive,
-                    "fa-angle-right"
+                    "fa-angle-right",
                 )}
                 ${this.selectAll
                     ? html`
@@ -133,13 +133,13 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
                               msg("Add All Available"),
                               EVENT_ADD_ALL,
                               this.addAllActive,
-                              "fa-angle-double-right"
+                              "fa-angle-double-right",
                           )}
                           ${this.renderButton(
                               msg("Remove All Available"),
                               EVENT_REMOVE_ALL,
                               this.removeAllActive,
-                              "fa-angle-double-left"
+                              "fa-angle-double-left",
                           )}
                       `
                     : nothing}
@@ -147,14 +147,14 @@ export class AkDualSelectControls extends CustomEmitterElement(AKElement) {
                     msg("Remove"),
                     EVENT_REMOVE_SELECTED,
                     this.removeActive,
-                    "fa-angle-left"
+                    "fa-angle-left",
                 )}
                 ${this.deleteAll
                     ? html`${this.renderButton(
                           msg("Remove All"),
                           EVENT_DELETE_ALL,
                           this.enableDeleteAll,
-                          "fa-times"
+                          "fa-times",
                       )}`
                     : nothing}
             </div>
diff --git a/web/src/elements/ak-dual-select/components/ak-dual-select-selected-pane.ts b/web/src/elements/ak-dual-select/components/ak-dual-select-selected-pane.ts
index 12cf0d608..6325f1533 100644
--- a/web/src/elements/ak-dual-select/components/ak-dual-select-selected-pane.ts
+++ b/web/src/elements/ak-dual-select/components/ak-dual-select-selected-pane.ts
@@ -1,18 +1,18 @@
 import { AKElement } from "@goauthentik/elements/Base";
 import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
 
-import { css, html } from "lit";
+import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { map } from "lit/directives/map.js";
 
+import { listStyles, selectedPaneStyles } from "./styles.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDualListSelector from "@patternfly/patternfly/components/DualListSelector/dual-list-selector.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { EVENT_REMOVE_ONE } from "../constants";
 import type { DualSelectPair } from "../types";
-import { listStyles, selectedPaneStyles } from "./styles.css";
 
 const styles = [PFBase, PFButton, PFDualListSelector, listStyles, selectedPaneStyles];
 
@@ -31,7 +31,7 @@ const hostAttributes = [
  * @fires ak-dual-select-selected-move-changed - When the list of "to move" entries changed.
  * Includes the current * `toMove` content.
  *
- * @fires ak-dual-select-remove-one - Doubleclick with the element clicked on.
+ * @fires ak-dual-select-remove-one - Double-click with the element clicked on.
  *
  * It is not expected that the `ak-dual-select-selected-move-changed` will be used; instead, the
  * attribute will be read by the parent when a control is clicked.
@@ -79,7 +79,7 @@ export class AkDualSelectSelectedPane extends CustomEmitterElement(AKElement) {
         }
         this.dispatchCustomEvent(
             "ak-dual-select-selected-move-changed",
-            Array.from(this.toMove.values()).sort()
+            Array.from(this.toMove.values()).sort(),
         );
         this.dispatchCustomEvent("ak-dual-select-move");
         // Necessary because updating a map won't trigger a state change
diff --git a/web/src/elements/ak-dual-select/components/ak-pagination.ts b/web/src/elements/ak-dual-select/components/ak-pagination.ts
index 25b08e859..21065549e 100644
--- a/web/src/elements/ak-dual-select/components/ak-pagination.ts
+++ b/web/src/elements/ak-dual-select/components/ak-pagination.ts
@@ -54,7 +54,7 @@ export class AkPagination extends CustomEmitterElement(AKElement) {
                           <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
                               <span class="pf-c-options-menu__toggle-text">
                                   ${msg(
-                                      str`${this.pages?.startIndex} - ${this.pages?.endIndex} of ${this.pages?.count}`
+                                      str`${this.pages?.startIndex} - ${this.pages?.endIndex} of ${this.pages?.count}`,
                                   )}
                               </span>
                           </div>
diff --git a/web/src/elements/ak-dual-select/components/styles.css.ts b/web/src/elements/ak-dual-select/components/styles.css.ts
index 60a2b3c8c..bf693a9ae 100644
--- a/web/src/elements/ak-dual-select/components/styles.css.ts
+++ b/web/src/elements/ak-dual-select/components/styles.css.ts
@@ -126,35 +126,33 @@ export const mainStyles = css`
 `;
 
 export const listStyles = css`
-        :host {
-            display: block;
-            overflow: hidden;
-            max-width: 100%;
-        }
+    :host {
+        display: block;
+        overflow: hidden;
+        max-width: 100%;
+    }
 
-        .pf-c-dual-list-selector__menu {
-            max-width: 100%;
-            height: 100%;
-        }
+    .pf-c-dual-list-selector__menu {
+        max-width: 100%;
+        height: 100%;
+    }
 
-        .pf-c-dual-list-selector__list {
-            max-width: 100%;
-            display: block;
-        }
+    .pf-c-dual-list-selector__list {
+        max-width: 100%;
+        display: block;
+    }
 
-        .pf-c-dual-list-selector__item {
-            padding: 0.25rem;
-            width: auto;
-        }
-
-        .pf-c-dual-list-selector__item-text {
-            user-select: none;
-            flex-grow: 0;
-        }
+    .pf-c-dual-list-selector__item {
+        padding: 0.25rem;
+        width: auto;
+    }
 
+    .pf-c-dual-list-selector__item-text {
+        user-select: none;
+        flex-grow: 0;
+    }
 `;
 
-
 export const selectedPaneStyles = css`
     input[type="checkbox"][readonly] {
         pointer-events: none;
diff --git a/web/src/elements/ak-dual-select/index.ts b/web/src/elements/ak-dual-select/index.ts
index 134aef93a..a5b14dabc 100644
--- a/web/src/elements/ak-dual-select/index.ts
+++ b/web/src/elements/ak-dual-select/index.ts
@@ -1,8 +1,7 @@
 import { AkDualSelect } from "./ak-dual-select";
 import "./ak-dual-select";
-
 import { AkDualSelectProvider } from "./ak-dual-select-provider";
 import "./ak-dual-select-provider";
 
-export { AkDualSelect, AkDualSelectProvider }
+export { AkDualSelect, AkDualSelectProvider };
 export default AkDualSelect;
diff --git a/web/src/elements/ak-dual-select/stories/ak-dual-select-available-pane.stories.ts b/web/src/elements/ak-dual-select/stories/ak-dual-select-available-pane.stories.ts
index 262cfe11c..e0f9a0b0e 100644
--- a/web/src/elements/ak-dual-select/stories/ak-dual-select-available-pane.stories.ts
+++ b/web/src/elements/ak-dual-select/stories/ak-dual-select-available-pane.stories.ts
@@ -5,8 +5,8 @@ import { slug } from "github-slugger";
 import { TemplateResult, html } from "lit";
 
 import "../components/ak-dual-select-available-pane";
-import "./sb-host-provider";
 import { AkDualSelectAvailablePane } from "../components/ak-dual-select-available-pane";
+import "./sb-host-provider";
 
 const metadata: Meta<AkDualSelectAvailablePane> = {
     title: "Elements / Dual Select / Available Items Pane",
@@ -47,9 +47,7 @@ const container = (testItem: TemplateResult) =>
             }
         </style>
         <ak-message-container></ak-message-container>
-<sb-dual-select-host-provider>
-        ${testItem}
-</sb-dual-select-host-provider>
+        <sb-dual-select-host-provider> ${testItem} </sb-dual-select-host-provider>
         <p>Messages received from the button:</p>
         <ul id="action-button-message-pad" style="margin-top: 1em"></ul>
     </div>`;
@@ -112,6 +110,6 @@ export const SomeSelected: Story = {
             html` <ak-dual-select-available-pane
                 .options=${goodForYouPairs}
                 .selected=${someSelected}
-></ak-dual-select-available-pane>`,
+            ></ak-dual-select-available-pane>`,
         ),
 };
diff --git a/web/src/elements/ak-dual-select/stories/ak-dual-select-master.stories.ts b/web/src/elements/ak-dual-select/stories/ak-dual-select-master.stories.ts
index d49591076..120a3c5b1 100644
--- a/web/src/elements/ak-dual-select/stories/ak-dual-select-master.stories.ts
+++ b/web/src/elements/ak-dual-select/stories/ak-dual-select-master.stories.ts
@@ -1,16 +1,15 @@
 import "@goauthentik/elements/messages/MessageContainer";
-import { LitElement, TemplateResult, html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
 import { Meta, StoryObj } from "@storybook/web-components";
 import { slug } from "github-slugger";
 
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
 
-import type { DualSelectPair } from "../types";
 import { Pagination } from "@goauthentik/api";
 
 import "../ak-dual-select";
 import { AkDualSelect } from "../ak-dual-select";
+import type { DualSelectPair } from "../types";
 
 const goodForYouRaw = `
 Apple, Arrowroot, Artichoke, Arugula, Asparagus, Avocado, Bamboo, Banana, Basil, Beet Root,
@@ -25,8 +24,8 @@ Rosemary, Rutabaga, Shallot, Soybeans, Spinach, Squash, Strawberries, Sweet pota
 Thyme, Tomatillo, Tomato, Turnip, Waterchestnut, Watercress, Watermelon, Yams
 `;
 
-const keyToPair = (key: string): DualSelectPair => ([slug(key), key]);
-const goodForYou: DualSelectPair[]  = goodForYouRaw
+const keyToPair = (key: string): DualSelectPair => [slug(key), key];
+const goodForYou: DualSelectPair[] = goodForYouRaw
     .replace("\n", " ")
     .split(",")
     .map((a: string) => a.trim())
@@ -61,11 +60,11 @@ const metadata: Meta<AkDualSelect> = {
 export default metadata;
 
 @customElement("ak-sb-fruity")
+// @ts-ignore
 class AkSbFruity extends LitElement {
-
     @property({ type: Array })
     options: DualSelectPair[] = goodForYou;
-    
+
     @property({ attribute: "page-length", type: Number })
     pageLength = 20;
 
@@ -81,44 +80,49 @@ class AkSbFruity extends LitElement {
             endIndex: this.options.length > this.pageLength ? this.pageLength : this.options.length,
             next: this.options.length > this.pageLength ? 2 : 0,
             previous: 0,
-            totalPages: Math.ceil(this.options.length / this.pageLength)
+            totalPages: Math.ceil(this.options.length / this.pageLength),
         };
         this.onNavigation = this.onNavigation.bind(this);
-        this.addEventListener('ak-pagination-nav-to',
-                              this.onNavigation);
+        this.addEventListener("ak-pagination-nav-to", this.onNavigation);
     }
 
     onNavigation(evt: Event) {
         const current: number = (evt as CustomEvent).detail;
         const index = current - 1;
-        if ((index * this.pageLength) > this.options.length) {
-            console.warn(`Attempted to index from ${index} for options length ${this.options.length}`);
+        if (index * this.pageLength > this.options.length) {
+            console.warn(
+                `Attempted to index from ${index} for options length ${this.options.length}`,
+            );
             return;
         }
         const endCount = this.pageLength * (index + 1);
         const endIndex = Math.min(endCount, this.options.length);
-        
+
         this.page = {
             ...this.page,
             current,
             startIndex: this.pageLength * index + 1,
             endIndex,
-            next: ((index + 1) * this.pageLength > this.options.length) ? 0 : current + 1,
-            previous: index
+            next: (index + 1) * this.pageLength > this.options.length ? 0 : current + 1,
+            previous: index,
         };
     }
 
     get pageoptions() {
-        return this.options.slice(this.pageLength * (this.page.current - 1),
-                                  this.pageLength * (this.page.current));
+        return this.options.slice(
+            this.pageLength * (this.page.current - 1),
+            this.pageLength * this.page.current,
+        );
     }
 
     render() {
-        return html`<ak-dual-select .options=${this.pageoptions} .pages=${this.page}></ak-dual-select>`;
+        return html`<ak-dual-select
+            .options=${this.pageoptions}
+            .pages=${this.page}
+        ></ak-dual-select>`;
     }
 }
 
-    
 const container = (testItem: TemplateResult) =>
     html` <div style="background: #fff; padding: 2em">
         <style>
@@ -139,6 +143,7 @@ const container = (testItem: TemplateResult) =>
 const handleMoveChanged = (result: any) => {
     const target = document.querySelector("#action-button-message-pad");
     target!.innerHTML = "";
+    // @ts-ignore
     target!.append(result.detail.value.map(([k, _]) => k).join(", "));
 };
 
diff --git a/web/src/elements/ak-dual-select/stories/ak-dual-select-selected-pane.stories.ts b/web/src/elements/ak-dual-select/stories/ak-dual-select-selected-pane.stories.ts
index dc80e5e30..4dc6ef9c3 100644
--- a/web/src/elements/ak-dual-select/stories/ak-dual-select-selected-pane.stories.ts
+++ b/web/src/elements/ak-dual-select/stories/ak-dual-select-selected-pane.stories.ts
@@ -5,8 +5,8 @@ import { slug } from "github-slugger";
 import { TemplateResult, html } from "lit";
 
 import "../components/ak-dual-select-selected-pane";
-import "./sb-host-provider";
 import { AkDualSelectSelectedPane } from "../components/ak-dual-select-selected-pane";
+import "./sb-host-provider";
 
 const metadata: Meta<AkDualSelectSelectedPane> = {
     title: "Elements / Dual Select / Selected Items Pane",
@@ -19,6 +19,7 @@ const metadata: Meta<AkDualSelectSelectedPane> = {
         },
     },
     argTypes: {
+        // @ts-ignore
         options: {
             type: "string",
             description: "An array of [key, label] pairs of what to show",
@@ -42,10 +43,8 @@ const container = (testItem: TemplateResult) =>
                 margin-top: 1em;
             }
         </style>
-<ak-message-container></ak-message-container>
-<sb-dual-select-host-provider>
-        ${testItem}
-</sb-dual-select-host-provider>
+        <ak-message-container></ak-message-container>
+        <sb-dual-select-host-provider> ${testItem} </sb-dual-select-host-provider>
         <p>Messages received from the button:</p>
         <ul id="action-button-message-pad" style="margin-top: 1em"></ul>
     </div>`;
diff --git a/web/src/elements/ak-dual-select/stories/sb-host-provider.ts b/web/src/elements/ak-dual-select/stories/sb-host-provider.ts
index 575bbf6e5..985d9083d 100644
--- a/web/src/elements/ak-dual-select/stories/sb-host-provider.ts
+++ b/web/src/elements/ak-dual-select/stories/sb-host-provider.ts
@@ -1,7 +1,8 @@
-import { html, LitElement } from "lit";
-import { globalVariables } from "../components/styles.css";
+import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
+import { globalVariables } from "../components/styles.css";
+
 /**
  * @element sb-dual-select-host-provider
  *
diff --git a/web/src/elements/ak-dual-select/types.ts b/web/src/elements/ak-dual-select/types.ts
index a80c7983d..88bd67e42 100644
--- a/web/src/elements/ak-dual-select/types.ts
+++ b/web/src/elements/ak-dual-select/types.ts
@@ -12,6 +12,6 @@ export type BasePagination = Pick<
 export type DataProvision = {
     pagination: Pagination;
     options: DualSelectPair[];
-}
+};
 
 export type DataProvider = (page: number) => Promise<DataProvision>;