equinor · asbjornhaland · Nov 10, 2023 · Nov 6, 2023 · Nov 7, 2023 · Nov 7, 2023
diff --git a/.changeset/angry-moons-sell.md b/.changeset/angry-moons-sell.md
@@ -0,0 +1,7 @@
+---
+'@equinor/fusion-wc-date': patch
+'@equinor/fusion-wc-list': patch
+'@equinor/fusion-wc-menu': patch
+---
+
+Update types to handle lit 3.0.2 + use @queryAssignedElements instead of @queryAssignedNodes
diff --git a/.changeset/heavy-waves-walk.md b/.changeset/heavy-waves-walk.md
@@ -0,0 +1,31 @@
+---
+'@equinor/fusion-wc-searchable-dropdown': minor
+'@equinor/fusion-wc-progress-indicator': minor
+'@equinor/fusion-wc-intersection': minor
+'@equinor/fusion-wc-formfield': minor
+'@equinor/fusion-wc-textinput': minor
+'@equinor/fusion-wc-checkbox': minor
+'@equinor/fusion-wc-markdown': minor
+'@equinor/fusion-wc-skeleton': minor
+'@equinor/fusion-wc-textarea': minor
+'@equinor/fusion-wc-divider': minor
+'@equinor/fusion-wc-picture': minor
+'@equinor/fusion-wc-popover': minor
+'@equinor/fusion-wc-avatar': minor
+'@equinor/fusion-wc-button': minor
+'@equinor/fusion-wc-person': minor
+'@equinor/fusion-wc-ripple': minor
+'@equinor/fusion-wc-select': minor
+'@equinor/fusion-wc-switch': minor
+'@equinor/fusion-wc-badge': minor
+'@equinor/fusion-wc-radio': minor
+'@equinor/fusion-wc-theme': minor
+'@equinor/fusion-wc-chip': minor
+'@equinor/fusion-wc-date': minor
+'@equinor/fusion-wc-icon': minor
+'@equinor/fusion-wc-list': minor
+'@equinor/fusion-wc-menu': minor
+'@equinor/fusion-wc-storybook': minor
+---
+
+Update lit from 2.7.0 to 3.0.2
diff --git a/.changeset/new-dancers-shout.md b/.changeset/new-dancers-shout.md
@@ -0,0 +1,5 @@
+---
+'@equinor/fusion-wc-searchable-dropdown': patch
+---
+
+Update searchable-dropdown to get trailing from el instead of queryselect the shadow root
diff --git a/package.json b/package.json
@@ -9,12 +9,18 @@
     "yarn": "please-use-pnpm",
     "pnpm": ">=4"
   },
+  "pnpm": {
+    "overrides": {
+      "lit": "^3.0.2"
+    }
+  },
   "packageManager": "pnpm@8.0.0",
   "scripts": {
     "prepare": "husky install",
     "start": "cd storybook && pnpm run dev",
-    "clean": "pnpm clean:build",
+    "clean": "pnpm clean:build && pnpm clean:node",
     "clean:build": "pnpm -r exec del-cli dist lib tsconfig.tsbuildinfo",
+    "clean:node": "pnpm -r exec del-cli node_modules && pnpm exec del-cli node_modules",
     "prepack": "pnpm --filter='@equinor/fusion-wc-builder' build",
     "build": "pnpm -r --filter=!'@equinor/fusion-wc-storybook' build",
     "build:docs": "pnpm --filter='@equinor/fusion-wc-storybook' build",

diff --git a/packages/avatar/package.json b/packages/avatar/package.json
@@ -18,7 +18,7 @@
     "@equinor/fusion-wc-picture": "workspace:^",
     "@equinor/fusion-wc-ripple": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/badge/package.json b/packages/badge/package.json
@@ -16,7 +16,7 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-wc-icon": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/badge/src/element.ts b/packages/badge/src/element.ts
@@ -1,5 +1,5 @@
 import { LitElement, type HTMLTemplateResult, type PropertyValues, html, CSSResult } from 'lit';
-import { property, queryAssignedNodes, queryAsync, eventOptions } from 'lit/decorators.js';
+import { property, queryAsync, eventOptions } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { BadgeSize, BadgeColor, BadgePosition } from './static';
 import IconElement, { IconName } from '@equinor/fusion-wc-icon';
@@ -104,20 +104,6 @@ export class BadgeElement extends LitElement {
   @queryAsync('fwc-ripple')
   protected ripple!: Promise<Ripple | null>;
 
-  /**
-   * @internal
-   * Reference to the icon slot.
-   */
-  @queryAssignedNodes({ slot: 'icon' })
-  protected iconSlot!: NodeListOf<HTMLElement>;
-
-  /**
-   * @internal
-   * Reference to the value slot.
-   */
-  @queryAssignedNodes({ slot: 'value' })
-  protected valueSlot!: NodeListOf<HTMLElement>;
-
   /**
    * @internal
    * Define ripple handlers.

diff --git a/packages/button/package.json b/packages/button/package.json
@@ -60,7 +60,7 @@
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
     "@material/mwc-icon-button-toggle": "^0.27.0",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
@@ -40,7 +40,7 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
     "@material/mwc-checkbox": "^0.27.0",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/chip/package.json b/packages/chip/package.json
@@ -17,7 +17,7 @@
     "@equinor/fusion-wc-icon": "workspace:^",
     "@equinor/fusion-wc-ripple": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/date/package.json b/packages/date/package.json
@@ -31,7 +31,7 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
     "date-fns": "^2.29.3",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/date/src/datetime/element.ts b/packages/date/src/datetime/element.ts
@@ -41,7 +41,7 @@ export class DateTimeElement extends LitElement implements DateTimeElementProps
   }
 
   /** @override */
-  protected createRenderRoot(): Element {
+  protected createRenderRoot(): HTMLElement {
     return this;
   }
 

diff --git a/packages/divider/package.json b/packages/divider/package.json
@@ -22,7 +22,7 @@
   "dependencies": {
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/formfield/package.json b/packages/formfield/package.json
@@ -32,7 +32,7 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
     "@material/mwc-formfield": "^0.27.0",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/icon/package.json b/packages/icon/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@equinor/eds-icons": "^0.19.1",
     "@equinor/fusion-wc-core": "workspace:^",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/intersection/package.json b/packages/intersection/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@equinor/fusion-wc-core": "workspace:^",
     "fast-deep-equal": "^3.1.3",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/list/package.json b/packages/list/package.json
@@ -27,7 +27,7 @@
     "@equinor/fusion-wc-radio": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
     "@material/mwc-list": "^0.27.0",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/list/src/element.ts b/packages/list/src/element.ts
@@ -1,6 +1,7 @@
 import { CSSResult } from 'lit';
 import { ListBase } from '@material/mwc-list/mwc-list-base';
 import { styles as mdcStyle } from '@material/mwc-list/mwc-list.css';
+import { queryAssignedElements } from 'lit/decorators.js';
 import style from './element.css';
 
 export type ListElementProps = {
@@ -52,6 +53,12 @@ export type ListElementProps = {
  */
 export class ListElement extends ListBase implements ListElementProps {
   static styles: CSSResult[] = [mdcStyle, style];
+
+  @queryAssignedElements({ slot: '', flatten: true, selector: '*' })
+  protected assignedElements!: HTMLElement[] | null;
+
+  @queryAssignedElements({ slot: '', flatten: true, selector: '*' })
+  protected tabbableElements!: HTMLElement[] | null;
 }
 
 export default ListElement;
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
@@ -40,7 +40,7 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-wc-icon": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
-    "lit": "2.7.0",
+    "lit": "3.0.2",
     "prosemirror-commands": "^1.5.2",
     "prosemirror-history": "^1.3.2",
     "prosemirror-inputrules": "^1.2.1",

diff --git a/packages/menu/package.json b/packages/menu/package.json
@@ -32,7 +32,7 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-wc-list": "workspace:^",
     "@material/mwc-menu": "^0.27.0",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/menu/src/element.ts b/packages/menu/src/element.ts
@@ -81,6 +81,8 @@ export type MenuElementProps = {
  *
  */
 export class MenuElement extends MenuBase implements MenuElementProps {
+  protected listElement_!: ListElement | null;
+
   protected override get listElement(): ListElement | null {
     if (!this.listElement_) {
       this.listElement_ = this.renderRoot.querySelector('fwc-list');

diff --git a/packages/person/package.json b/packages/person/package.json
@@ -65,14 +65,14 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-wc-icon": "workspace:^",
     "@equinor/fusion-wc-list": "workspace:^",
-    "@equinor/fusion-wc-textinput": "workspace:^",
     "@equinor/fusion-wc-searchable-dropdown": "workspace:^",
     "@equinor/fusion-wc-skeleton": "workspace:^",
+    "@equinor/fusion-wc-textinput": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
     "@floating-ui/dom": "^1.3.0",
-    "@lit-labs/observers": "^2.0.0",
+    "@lit-labs/observers": "^2.0.2",
     "@lit-labs/task": "^3.0.1",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/picture/package.json b/packages/picture/package.json
@@ -15,7 +15,7 @@
   "license": "ISC",
   "dependencies": {
     "@equinor/fusion-wc-core": "workspace:^",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/popover/package.json b/packages/popover/package.json
@@ -17,7 +17,7 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@popperjs/core": "^2.11.6",
     "@types/resize-observer-browser": "^0.1.7",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/progress-indicator/package.json b/packages/progress-indicator/package.json
@@ -22,7 +22,7 @@
   "dependencies": {
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/radio/package.json b/packages/radio/package.json
@@ -32,7 +32,7 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
     "@material/mwc-radio": "^0.27.0",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/ripple/package.json b/packages/ripple/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@equinor/fusion-wc-core": "workspace:^",
     "@material/mwc-ripple": "^0.27.0",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/searchable-dropdown/package.json b/packages/searchable-dropdown/package.json
@@ -22,7 +22,7 @@
     "@lit-labs/task": "^3.1.0",
     "@material/mwc-textfield": "^0.27.0",
     "@types/uuid": "^9.0.1",
-    "lit": "2.7.0",
+    "lit": "3.0.2",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

diff --git a/packages/searchable-dropdown/src/dropdown/element.ts b/packages/searchable-dropdown/src/dropdown/element.ts
@@ -85,6 +85,9 @@ export class SearchableDropdownElement
   @property({ attribute: false, state: true })
   trailingIcon = '';
 
+  @query('.trailing')
+  trailingIconElement?: IconElement;
+
   /* The icon string to render in result list items on the meta slot */
   @property()
   meta = '';

diff --git a/packages/searchable-dropdown/src/provider/controller.ts b/packages/searchable-dropdown/src/provider/controller.ts
@@ -267,7 +267,7 @@ export class SearchableDropdownController implements ReactiveController {
       }
 
       /* blur closeicon if focused */
-      const closeIcon = this.#host.renderRoot.querySelector('.trailing');
+      const closeIcon = this.#host.trailingIconElement;
       if (closeIcon) {
         (closeIcon as HTMLSpanElement).blur();
       }

diff --git a/packages/searchable-dropdown/src/types.ts b/packages/searchable-dropdown/src/types.ts
@@ -2,7 +2,7 @@ import { ReactiveControllerHost } from 'lit';
 import { type ActionDetail } from '@material/mwc-list/mwc-list-foundation';
 import { TextInputElement } from '@equinor/fusion-wc-textinput';
 import { ListElement } from '@equinor/fusion-wc-list';
-import { IconType } from '@equinor/fusion-wc-icon';
+import { IconElement, IconType } from '@equinor/fusion-wc-icon';
 /**
  * Properties/Attributes for web component
  * @autofocus Sets focus on textinput when mounted
@@ -85,8 +85,9 @@ export interface SearchableDropdownResolver {
 export interface SearchableDropdownControllerHost extends SearchableDropdownProps, ReactiveControllerHost, EventTarget {
   dispatchEvent(event: Event): boolean;
   nodeName: string;
-  renderRoot: HTMLElement | ShadowRoot;
+  renderRoot: HTMLElement | DocumentFragment;
   trailingIcon: string;
+  trailingIconElement?: IconElement;
   id: string;
 }
 

diff --git a/packages/select/package.json b/packages/select/package.json
@@ -25,7 +25,7 @@
     "@equinor/fusion-wc-menu": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
     "@material/mwc-select": "^0.27.0",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/skeleton/package.json b/packages/skeleton/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/switch/package.json b/packages/switch/package.json
@@ -32,7 +32,7 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-web-theme": "^0.1.7",
     "@material/mwc-switch": "^0.27.0",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",

diff --git a/packages/textarea/package.json b/packages/textarea/package.json
@@ -28,7 +28,7 @@
     "@equinor/fusion-wc-core": "workspace:^",
     "@equinor/fusion-wc-textinput": "workspace:^",
     "@material/mwc-textarea": "^0.27.0",
-    "lit": "2.7.0"
+    "lit": "3.0.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.9.0",