chore: enforce type imports where possible

.eslintrc.json

@@ -113,7 +113,8 @@
         ],
         // TODO Discuss this with the team
         "lit/no-invalid-html": "off",
-        "camelcase": "off"
+        "camelcase": "off",
+        "@typescript-eslint/consistent-type-imports": "error"
       }
     },
     {

src/components/accordion/accordion.stories.ts

@@ -1,8 +1,15 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
-import { Decorator } from '@storybook/web-components';
-import { html, nothing, TemplateResult } from 'lit';
+import type { InputType } from '@storybook/types';
+import type {
+  Meta,
+  StoryObj,
+  ArgTypes,
+  Args,
+  StoryContext,
+  Decorator,
+} from '@storybook/web-components';
+import type { TemplateResult } from 'lit';
+import { html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 

src/components/accordion/accordion.ts

@@ -1,4 +1,5 @@
-import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { toggleDatasetEntry } from '../core/dom';

src/components/action-group/action-group.e2e.ts

@@ -1,9 +1,9 @@
 import { assert, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { SbbButtonElement } from '../button';
+import type { SbbButtonElement } from '../button';
 import { waitForLitRender } from '../core/testing';
-import { SbbLinkElement } from '../link';
+import type { SbbLinkElement } from '../link';
 
 import { SbbActionGroupElement } from './action-group';
 

src/components/action-group/action-group.spec.ts

@@ -1,9 +1,9 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { SbbButtonElement } from '../button';
+import type { SbbButtonElement } from '../button';
 
-import { SbbActionGroupElement } from './action-group';
+import type { SbbActionGroupElement } from './action-group';
 import '.';
 
 describe('sbb-action-group', () => {

src/components/action-group/action-group.stories.ts

@@ -1,7 +1,8 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../core/dom';

src/components/action-group/action-group.ts

@@ -1,9 +1,10 @@
-import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';
+import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { SbbButtonSize } from '../button';
-import { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces';
-import { SbbLinkSize } from '../link';
+import type { SbbButtonSize } from '../button';
+import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces';
+import type { SbbLinkSize } from '../link';
 
 import style from './action-group.scss?lit&inline';
 

src/components/alert/alert-group/alert-group.e2e.ts

@@ -1,7 +1,7 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
-import { SbbButtonElement } from '../../button';
+import type { SbbButtonElement } from '../../button';
 import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing';
 
 import { SbbAlertGroupElement } from './alert-group';

src/components/alert/alert-group/alert-group.stories.ts

@@ -1,7 +1,8 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../core/dom';

src/components/alert/alert-group/alert-group.ts

@@ -1,4 +1,5 @@
-import { CSSResultGroup, LitElement, nothing, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 

src/components/alert/alert/alert.stories.ts

@@ -1,7 +1,8 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
-import { html, nothing, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../core/dom';

src/components/alert/alert/alert.ts

@@ -1,12 +1,13 @@
 import { spread } from '@open-wc/lit-helpers';
-import { CSSResultGroup, html, LitElement, nothing, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
 import { LanguageController } from '../../core/common-behaviors';
 import { EventEmitter } from '../../core/eventing';
 import { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n';
-import { LinkProperties, LinkTargetType } from '../../core/interfaces';
+import type { LinkProperties, LinkTargetType } from '../../core/interfaces';
 import type { TitleLevel } from '../../title';
 
 import style from './alert.scss?lit&inline';

src/components/autocomplete/autocomplete.stories.ts

@@ -10,7 +10,8 @@ import type {
   StoryContext,
 } from '@storybook/web-components';
 import isChromatic from 'chromatic';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready';

src/components/autocomplete/autocomplete.ts

@@ -1,4 +1,5 @@
-import { CSSResultGroup, html, LitElement, nothing, TemplateResult, PropertyValues } from 'lit';
+import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
@@ -14,11 +15,11 @@ import {
   isBrowser,
 } from '../core/dom';
 import { ConnectedAbortController, EventEmitter } from '../core/eventing';
+import type { SbbOverlayState } from '../core/overlay';
 import {
   isEventOnElement,
   overlayGapFixCorners,
   removeAriaComboBoxAttributes,
-  SbbOverlayState,
   setAriaComboBoxAttributes,
   setOverlayPosition,
 } from '../core/overlay';

src/components/breadcrumb/breadcrumb-group/breadcrumb-group.stories.ts

@@ -1,6 +1,7 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 
 import { sbbSpread } from '../../core/dom';
 

src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts

@@ -1,4 +1,5 @@
-import { CSSResultGroup, html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 
 import { getNextElementIndex, isArrowKeyPressed, sbbInputModalityDetector } from '../../core/a11y';

src/components/breadcrumb/breadcrumb/breadcrumb.stories.ts

@@ -1,6 +1,7 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 
 import { sbbSpread } from '../../core/dom';
 

src/components/breadcrumb/breadcrumb/breadcrumb.ts

@@ -1,17 +1,15 @@
 import { spread } from '@open-wc/lit-helpers';
-import { CSSResultGroup, LitElement, nothing, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
 import { LanguageController, SlotChildObserver } from '../../core/common-behaviors';
 import { setAttributes } from '../../core/dom';
 import { actionElementHandlerAspect, HandlerRepository } from '../../core/eventing';
 import { i18nTargetOpensInNewWindow } from '../../core/i18n';
-import {
-  LinkTargetType,
-  resolveLinkOrStaticRenderVariables,
-  targetsNewWindow,
-} from '../../core/interfaces';
+import type { LinkTargetType } from '../../core/interfaces';
+import { resolveLinkOrStaticRenderVariables, targetsNewWindow } from '../../core/interfaces';
 
 import style from './breadcrumb.scss?lit&inline';
 

src/components/button/button.stories.ts

@@ -9,7 +9,8 @@ import type {
   StoryContext,
 } from '@storybook/web-components';
 import isChromatic from 'chromatic';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../core/dom';

src/components/button/button.ts

@@ -1,5 +1,6 @@
 import { spread } from '@open-wc/lit-helpers';
-import { CSSResultGroup, LitElement, nothing, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
@@ -13,14 +14,13 @@ import {
 } from '../core/dom';
 import { actionElementHandlerAspect, HandlerRepository } from '../core/eventing';
 import { i18nTargetOpensInNewWindow } from '../core/i18n';
-import {
+import type {
   ButtonType,
   IsStaticProperty,
   LinkButtonProperties,
   LinkTargetType,
-  resolveRenderVariables,
-  targetsNewWindow,
 } from '../core/interfaces';
+import { resolveRenderVariables, targetsNewWindow } from '../core/interfaces';
 
 import style from './button.scss?lit&inline';
 import '../icon';

src/components/calendar/calendar.stories.ts

@@ -2,7 +2,8 @@ import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
 import isChromatic from 'chromatic';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../core/dom';

src/components/calendar/calendar.ts

@@ -1,11 +1,12 @@
-import { CSSResultGroup, html, LitElement, nothing, TemplateResult, PropertyValues } from 'lit';
+import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { isArrowKeyOrPageKeysPressed, sbbInputModalityDetector } from '../core/a11y';
 import { LanguageController } from '../core/common-behaviors';
+import type { DateAdapter } from '../core/datetime';
 import {
-  DateAdapter,
   DAYS_PER_ROW,
   defaultDateAdapter,
   MONTHS_PER_ROW,
@@ -24,7 +25,7 @@ import {
   i18nPreviousYearRange,
   i18nYearMonthSelection,
 } from '../core/i18n';
-import { SbbDateLike } from '../core/interfaces';
+import type { SbbDateLike } from '../core/interfaces';
 import '../button';
 import '../icon';
 

src/components/card/card-action/card-action.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 
 import readme from './readme.md?raw';
 

src/components/card/card-action/card-action.ts

@@ -1,5 +1,6 @@
 import { spread } from '@open-wc/lit-helpers';
-import { CSSResultGroup, LitElement, nothing, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
@@ -8,14 +9,13 @@ import { LanguageController } from '../../core/common-behaviors';
 import { toggleDatasetEntry, setAttribute, setAttributes } from '../../core/dom';
 import { HandlerRepository, actionElementHandlerAspect } from '../../core/eventing';
 import { i18nTargetOpensInNewWindow } from '../../core/i18n';
-import {
+import type {
   ButtonType,
   LinkButtonProperties,
   LinkButtonRenderVariables,
   LinkTargetType,
-  resolveRenderVariables,
-  targetsNewWindow,
 } from '../../core/interfaces';
+import { resolveRenderVariables, targetsNewWindow } from '../../core/interfaces';
 import { AgnosticMutationObserver } from '../../core/observers';
 import type { SbbCardElement } from '../card';
 

src/components/card/card-badge/card-badge.stories.ts

@@ -1,6 +1,7 @@
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../core/dom';

src/components/card/card-badge/card-badge.ts

@@ -1,4 +1,5 @@
-import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { toggleDatasetEntry, getDocumentWritingMode, setAttribute } from '../../core/dom';

src/components/card/card/card.stories.ts

@@ -8,7 +8,8 @@ import type {
   Decorator,
   StoryContext,
 } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../core/dom';

src/components/card/card/card.ts

@@ -1,4 +1,5 @@
-import { CSSResultGroup, html, LitElement, nothing, TemplateResult } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import style from './card.scss?lit&inline';

src/components/checkbox/checkbox-group/checkbox-group.stories.ts

@@ -1,7 +1,8 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
-import { html, nothing, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../core/dom';

src/components/checkbox/checkbox-group/checkbox-group.ts

@@ -1,11 +1,12 @@
-import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { getNextElementIndex, interactivityChecker, isArrowKeyPressed } from '../../core/a11y';
 import { NamedSlotStateController } from '../../core/common-behaviors';
 import { toggleDatasetEntry } from '../../core/dom';
 import { ConnectedAbortController } from '../../core/eventing';
-import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces';
+import type { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces';
 import type { SbbCheckboxElement, SbbCheckboxSize } from '../checkbox';
 
 import style from './checkbox-group.scss?lit&inline';

src/components/checkbox/checkbox/checkbox.stories.ts

@@ -1,7 +1,8 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { sbbSpread } from '../../core/dom';