chore: Add .js to imports for packages that require fully qualified imports (#23)

Co-authored-by: github-actions <github-actions@github.com>

Author: thelukewalton

src/components/base-toggle-form-element.ts

@@ -2,7 +2,7 @@ import { html, LitElement } from "lit";
 import { Contourable, Interactive } from "../mixins/mixins.js";
 import styles from "./base-toggle-form-element.styles.js";
 import { FormField } from "../mixins/form-field.js";
-import "./icon/icon";
+import "./icon/icon.js";
 
 /**
  * Base Class for Form Elements that toggle (i.e. Checkbox, Radio, Switch)

src/components/chips/base-chips/interactive-chip.ts

@@ -1,8 +1,8 @@
 import { property } from "lit/decorators.js";
-import { BaseChip } from "./base-chip";
+import { BaseChip } from "./base-chip.js";
 import styles from "./interactive-chip.styles.js";
 
-export class InterativeChip extends BaseChip {
+export class InteractiveChip extends BaseChip {
   @property({ type: Boolean }) disabled: boolean = false;
 
   static styles = [styles, super.styles || []];

src/components/dropdown/dropdown-menu/dropdown-menu-button.ts

@@ -8,7 +8,7 @@ import "../../button/button.js";
 import "../../radio-button/radio-button.js";
 import "../../checkbox/checkbox.js";
 import "../menu-item/dropdown-menu-item.js";
-import "./../droppable";
+import "./../droppable.js";
 import type { ZetaIconName } from "@zebra-fed/zeta-icons";
 import { ZetaDropdownEvent } from "../../../events.js";
 

src/components/grid-menu-item/grid-menu-item.ts

@@ -2,7 +2,7 @@ import { customElement, property } from "lit/decorators.js";
 import { Contourable } from "../../mixins/mixins.js";
 import { html, LitElement } from "lit";
 import styles from "./grid-menu-item.styles.js";
-import "../badges/indicators/indicators";
+import "../badges/indicators/indicators.js";
 
 // TODO(UX-1335): Grid items are not working in storybook
 /**

src/components/navigation-rail/navigation-rail-item.ts

@@ -1,9 +1,9 @@
 import { html, LitElement } from "lit";
-import { Contourable } from "../../mixins/contour";
-import { Interactive } from "../../mixins/interactive";
+import { Contourable } from "../../mixins/contour.js";
+import { Interactive } from "../../mixins/interactive.js";
 import { customElement, property } from "lit/decorators.js";
 import styles from "./navigation-rail-item.styles.js";
-import { Navigate } from "../../mixins/navigate";
+import { Navigate } from "../../mixins/navigate.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 /**

src/components/navigation-rail/navigation-rail.ts

@@ -1,5 +1,5 @@
 import { html, LitElement } from "lit";
-import { Contourable } from "../../mixins/contour";
+import { Contourable } from "../../mixins/contour.js";
 import { customElement } from "lit/decorators.js";
 import styles from "./navigation-rail.styles.js";
 //TODO this needs to share a mixin with Pagination or similar (need selected attribute/part, onSelectedChange event)

src/components/radio-button/radio-button-controller.ts

@@ -1,5 +1,5 @@
 import { type ReactiveController } from "lit";
-import { type ZetaRadioButton } from "./radio-button";
+import { type ZetaRadioButton } from "./radio-button.js";
 
 export class RadioButtonController implements ReactiveController {
   constructor(private readonly host: ZetaRadioButton) {}

src/components/segmented-control/segmented-control.ts

@@ -1,8 +1,8 @@
 import { html, LitElement, type PropertyValues } from "lit";
-import { Contourable } from "../../mixins/contour";
+import { Contourable } from "../../mixins/contour.js";
 import { customElement, query, queryAssignedElements, state } from "lit/decorators.js";
 import styles from "./segmented-control.styles.js";
-import { ZetaSegmentedItem } from "./segmented-item";
+import { ZetaSegmentedItem } from "./segmented-item.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 const animationDuration = 300;

src/components/segmented-control/segmented-item.ts

@@ -1,5 +1,5 @@
 import { html, LitElement } from "lit";
-import { Contourable } from "../../mixins/contour";
+import { Contourable } from "../../mixins/contour.js";
 import { customElement, property } from "lit/decorators.js";
 import styles from "./segmented.item.styles.js";
 /**

src/components/select-input/select-input.ts

@@ -1,17 +1,17 @@
 import { customElement, property, query, queryAssignedNodes, state } from "lit/decorators.js";
 import { html, LitElement, nothing, type PropertyValues, type TemplateResult } from "lit";
 
-import { FormField, type InputType } from "../../mixins/form-field";
-import { Size } from "../../mixins/size";
-import { Contourable } from "../../mixins/contour";
-import { Interactive } from "../../mixins/interactive";
+import { FormField, type InputType } from "../../mixins/form-field.js";
+import { Size } from "../../mixins/size.js";
+import { Contourable } from "../../mixins/contour.js";
+import { Interactive } from "../../mixins/interactive.js";
 
 import styles from "./select-input.styles.js";
 
 import type { ZetaOption } from "./option.js";
 import "./option.js";
 import type { ZetaIconName } from "@zebra-fed/zeta-icons";
-import "../icon/icon";
+import "../icon/icon.js";
 import type { ZetaOptionClickEventDetail } from "../../events";
 
 /**