always use lit package and remove explicit lit-html

web-components/package.json

@@ -38,8 +38,7 @@
     "@tanstack/table-core": "8.13.2",
     "csv": "6.3.8",
     "highcharts": "11.4.0",
-    "lit": "3.1.2",
-    "lit-html": "3.1.2"
+    "lit": "3.1.2"
   },
   "devDependencies": {
     "@babel/core": "7.24.0",

web-components/src/components/button/button.component.ts

@@ -2,10 +2,10 @@ import { html, unsafeCSS } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import styles from './button.css?inline';
 import BaseElement from '../../internals/baseElement/baseElement';
-import { TemplateResult } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { TemplateResult } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { ElementInternals } from 'element-internals-polyfill/dist/element-internals';
-import { when } from 'lit-html/directives/when.js';
+import { when } from 'lit/directives/when.js';
 import '../tooltip/tooltip.component';
 import '../spinner/spinner.component';
 import { SpinnerType } from '../spinner/spinner.component';

web-components/src/components/button/button.stories.ts

@@ -1,11 +1,11 @@
 import './button.component';
 import '../icon/icon.component';
 import Button, { buttonSides, buttonSpacings, buttonTypes } from './button.component';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import docs from './button.md?raw';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { withActions } from '@storybook/addon-actions/decorator';
 
 const meta: Meta<Button> = {

web-components/src/components/buttongroup/buttongroup.component.ts

@@ -9,9 +9,9 @@ import BaseElement from '../../internals/baseElement/baseElement';
 import ToggleButton from '../toggleButton/toggleButton.component';
 import { InputErrorState } from '../input/input.component';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelPlacement } from '../label/label.component';
-import { when } from 'lit-html/directives/when.js';
+import { when } from 'lit/directives/when.js';
 
 export interface ButtonGroupTranslations {
   valueMissing?: string;

web-components/src/components/buttongroup/buttongroup.stories.ts

@@ -1,11 +1,11 @@
 import '../toggleButton/toggleButton.component';
 import './buttongroup.component';
 import ButtonGroup from './buttongroup.component';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import docs from './buttongroup.md?raw';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { withActions } from '@storybook/addon-actions/decorator';
 import { labelPlacementOptions } from '../label/label.component';
 

web-components/src/components/chart/chart.stories.ts

@@ -1,5 +1,5 @@
 import './chart.component';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { Meta, StoryFn, StoryObj } from '@storybook/web-components';
 import docs from './chart.md?raw';
 import Chart from './chart.component';

web-components/src/components/checkbox/checkbox.component.ts

@@ -1,9 +1,9 @@
 import { html, PropertyValues, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import styles from './checkbox.css?inline';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import BaseElement from '../../internals/baseElement/baseElement';
-import { when } from 'lit-html/directives/when.js';
+import { when } from 'lit/directives/when.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { InputErrorState, InputSize } from '../input/input.component';
 import '../icon/icon.component';

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

@@ -1,9 +1,9 @@
 import './checkbox.component';
 import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import Checkbox from './checkbox.component';
 import docs from './checkbox.md?raw';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { inputErrorStates, inputSizes } from '../input/input.component';
 import { withActions } from '@storybook/addon-actions/decorator';
 

web-components/src/components/datepicker/datepicker.component.ts

@@ -5,7 +5,7 @@ import styles from './datepicker.css?inline';
 import customStyles from './customize-ease.css?inline';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import BaseElement from '../../internals/baseElement/baseElement';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../input/input.component';
 import '../flyout/flyout.component';
 import { InputErrorState, InputSize } from '../input/input.component';

web-components/src/components/datepicker/datepicker.stories.ts

@@ -1,9 +1,9 @@
 import './datepicker.component';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
 import Datepicker from './datepicker.component';
 import docs from './datepicker.md?raw';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { inputSizes } from '../input/input.component';
 import { withActions } from '@storybook/addon-actions/decorator';
 

web-components/src/components/draggable/draggable.component.ts

@@ -1,6 +1,6 @@
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
 import BaseElement from '../../internals/baseElement/baseElement';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import type { DragAxis, DragEventData, Draggable as NeoDraggable, DragOptions } from '@neodrag/vanilla';
 import { PropertyValues, unsafeCSS } from 'lit';
 import styles from './draggable.css?inline';

web-components/src/components/draggable/draggable.stories.ts

@@ -2,9 +2,9 @@ import './draggable.component';
 import '../icon/icon.component';
 import { Meta, StoryFn, StoryObj } from '@storybook/web-components';
 import Draggable, { draggableBounds } from './draggable.component';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import docs from './draggable.md?raw';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 const meta: Meta<Draggable> = {
   title: 'Components/Draggable',

web-components/src/components/draggable/draggable.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from 'vitest';
 import { fixture } from '@open-wc/testing-helpers';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import userEvent from '@testing-library/user-event';
 import { screen } from 'shadow-dom-testing-library';
 import './draggable.component';

web-components/src/components/dropdown/dropdown.component.ts

@@ -10,12 +10,12 @@ import '../../internals/hint/hint';
 import '../../internals/floatingElement/floatingElement';
 import Menu, { DssMenuSelectionEvent } from '../menu/menu.component';
 import BaseElement, { ActionKeystrokes } from '../../internals/baseElement/baseElement';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputErrorState, InputSize } from '../input/input.component';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
 import { Placement } from '@floating-ui/dom';
 import MenuItem from '../menuItem/menuItem.component';
-import { when } from 'lit-html/directives/when.js';
+import { when } from 'lit/directives/when.js';
 import { LabelPlacement } from '../label/label.component';
 import { Closable } from '../../internals/escController/closable';
 import { deregisterOpenComponent, registerOpenComponent } from '../../internals/escController/escController';

web-components/src/components/dropdown/dropdown.stories.ts

@@ -1,12 +1,12 @@
 import './dropdown.component';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'lit';
 import Dropdown from './dropdown.component';
 import '../checkbox/checkbox.component';
 import '../menu/menu.component';
 import '../menuItem/menuItem.component';
 import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
 import docs from './dropdown.md?raw';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { inputSizes } from '../input/input.component';
 import { withActions } from '@storybook/addon-actions/decorator';
 import { labelPlacementOptions } from '../label/label.component';

web-components/src/components/flyout/flyout.component.ts

@@ -2,7 +2,7 @@ import { html, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import styles from './flyout.css?inline';
 import BaseElement, { ActionKeystrokes } from '../../internals/baseElement/baseElement';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { Placement } from '@floating-ui/dom';
 import '../outsideClick/outsideClick.component';
 import '../../internals/floatingElement/floatingElement';

web-components/src/components/flyout/flyout.stories.ts

@@ -1,15 +1,15 @@
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'lit';
 import Flyout from './flyout.component';
 import { Meta, StoryFn, StoryObj } from '@storybook/web-components';
 import docs from './flyout.md?raw';
-import { when } from 'lit-html/directives/when.js';
+import { when } from 'lit/directives/when.js';
 import './flyout.component';
 import '../menu/menu.component';
 import '../menuItem/menuItem.component';
 import '../icon/icon.component';
 import '../button/button.component';
 import '../input/input.component';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { placements } from '@floating-ui/utils';
 
 const meta: Meta<Flyout> = {

web-components/src/components/icon/icon.component.ts

@@ -1,10 +1,10 @@
 import { customElement, property, state } from 'lit/decorators.js';
 import { nothing, PropertyDeclaration, unsafeCSS } from 'lit';
-import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import styles from './icon.css?inline';
 import BaseElement from '../../internals/baseElement/baseElement';
 import { Icons } from './icons';
-import { DirectiveResult } from 'lit-html/directive';
+import { DirectiveResult } from 'lit/directive';
 
 const ICON_CACHE: { [K in Icons]?: DirectiveResult } = {};
 

web-components/src/components/icon/icon.stories.ts

@@ -1,6 +1,6 @@
 import './icon.component';
 import Icon, { ICON_SIZE } from './icon.component';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { Meta, StoryObj } from '@storybook/web-components';
 import '@lit-labs/virtualizer';
 import { grid } from '@lit-labs/virtualizer/layouts/grid.js';

web-components/src/components/input/input.component.ts

@@ -5,9 +5,9 @@ import BaseElement from '../../internals/baseElement/baseElement';
 import '../../internals/hint/hint';
 import '../label/label.component';
 import '../spinner/spinner.component';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { when } from 'lit-html/directives/when.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { when } from 'lit/directives/when.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { LabelPlacement } from '../label/label.component';
 
 const textEncoder = new TextEncoder();

web-components/src/components/input/input.stories.ts

@@ -1,13 +1,13 @@
 import './input.component';
 import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'lit';
 import Input, { inputErrorStates, inputSizes } from './input.component';
 import docs from './input.md?raw';
 import docsDisabled from './input.disabled.md?raw';
 import docsReadonly from './input.readonly.md?raw';
 import docsTextarea from './input.textarea.md?raw';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { when } from 'lit-html/directives/when.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { when } from 'lit/directives/when.js';
 import { withActions } from '@storybook/addon-actions/decorator';
 import { labelPlacementOptions } from '../label/label.component';
 import '../button/button.component';

web-components/src/components/label/label.stories.ts

@@ -2,7 +2,7 @@ import docs from './label.md?raw';
 import { Meta, StoryFn, StoryObj } from '@storybook/web-components';
 import Label from './label.component';
 import { html } from 'lit';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import './label.component';
 
 const meta: Meta<Label> = {

web-components/src/components/list/list.stories.ts

@@ -2,7 +2,7 @@ import './list.component';
 import '../checkbox/checkbox.component';
 import '../icon/icon.component';
 import { Meta, StoryObj } from '@storybook/web-components';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import docs from './list.md?raw';
 import List from './list.component';
 

web-components/src/components/list/list.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'vitest';
 import { fixture } from '@open-wc/testing-helpers';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { screen } from 'shadow-dom-testing-library';
 import './list.component';
 import { fireEvent } from '@testing-library/dom';

web-components/src/components/menu/menu.stories.ts

@@ -1,9 +1,9 @@
 import './menu.component';
 import '../menuItem/menuItem.component';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
 import Menu from './menu.component';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import docs from './menu.md?raw';
 import { withActions } from '@storybook/addon-actions/decorator';
 

web-components/src/components/menuItem/menuItem.stories.ts

@@ -1,7 +1,7 @@
 import './menuItem.component';
 import '../menuItem/menuItem.component';
 import '../checkbox/checkbox.component';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'lit';
 import { Meta, StoryFn, StoryObj } from '@storybook/web-components';
 import docs from './menuItem.md?raw';
 import MenuItem from './menuItem.component';

web-components/src/components/multiselect/multiselect.component.ts

@@ -1,7 +1,7 @@
 import { PropertyDeclaration, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { createRef, ref, Ref } from 'lit-html/directives/ref.js';
-import { html } from 'lit-html';
+import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { html } from 'lit';
 import styles from './multiselect.css?inline';
 import '../button/button.component';
 import '../icon/icon.component';
@@ -11,7 +11,7 @@ import '../menu/menu.component';
 import '../menuItem/menuItem.component';
 import '../../internals/hint/hint';
 import BaseElement, { ActionKeystrokes } from '../../internals/baseElement/baseElement';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputErrorState } from '../input/input.component';
 import { LabelPlacement } from '../label/label.component';
 import { Placement } from '@floating-ui/dom';

web-components/src/components/multiselect/multiselect.stories.ts

@@ -1,9 +1,9 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import './multiselect.component';
 import Multiselect from './multiselect.component';
 import { Meta, StoryFn, StoryObj } from '@storybook/web-components';
 import docs from './multiselect.md?raw';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { labelPlacementOptions } from '../label/label.component';
 
 const meta: Meta<Multiselect> = {

web-components/src/components/outsideClick/outsideClick.stories.ts

@@ -1,5 +1,5 @@
 import './outsideClick.component';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { Meta, StoryObj } from '@storybook/web-components';
 import docs from './outsideClick.md?raw';
 import OutsideClick from './outsideClick.component';

web-components/src/components/overlay/overlay.component.ts

@@ -5,8 +5,8 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import '../button/button.component';
 import '../icon/icon.component';
 import '../draggable/draggable.component';
-import { when } from 'lit-html/directives/when.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { when } from 'lit/directives/when.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
 import { Closable } from '../../internals/escController/closable';
 import { deregisterOpenComponent, registerOpenComponent } from '../../internals/escController/escController';

web-components/src/components/overlay/overlay.stories.ts

@@ -1,9 +1,9 @@
 import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
 import docs from './overlay.md?raw';
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from 'lit';
 import Overlay from './overlay.component';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { when } from 'lit-html/directives/when.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { when } from 'lit/directives/when.js';
 import './overlay.component';
 import '../button/button.component';
 import { useArgs } from '@storybook/preview-api';

web-components/src/components/pagination/pagination.component.ts

@@ -2,7 +2,7 @@ import BaseElement from '../../internals/baseElement/baseElement';
 import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeCSS } from 'lit';
 import styles from './pagination.css?inline';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import '../icon/icon.component';
 import '../button/button.component';
 

web-components/src/components/pagination/pagination.stories.ts

@@ -1,5 +1,5 @@
 import './pagination.component';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { Meta, StoryFn, StoryObj, WebComponentsRenderer } from '@storybook/web-components';
 import docs from './pagination.md?raw';
 import Pagination from './pagination.component';

web-components/src/components/radio/radio.component.ts

@@ -2,10 +2,10 @@ import { html, unsafeCSS } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import styles from './radio.css?inline';
 import BaseElement from '../../internals/baseElement/baseElement';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { InputErrorState, InputSize } from '../input/input.component';
 import '../../internals/hint/hint';
-import { when } from 'lit-html/directives/when.js';
+import { when } from 'lit/directives/when.js';
 
 export const radioStates = [
   'unchecked',