Scoped elements v3

docs/blog/lion-without-polyfills.md

@@ -23,7 +23,7 @@ To clarify: within Lion class files we never import files that run `customElemen
 
 ```js
 import { LitElement, html } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { MyCardHeader } from './MyCardHeader.js';
 
 export class MyCard extends ScopedElementsMixin(LitElement) {
@@ -78,7 +78,7 @@ Be sure to always define **ALL** the sub elements you are using in your template
 
 ```js
 import { LitElement, html } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { MyCardHeader } from './MyCardHeader.js';
 
 export class MyCard extends ScopedElementsMixin(LitElement) {

docs/components/accordion/overview.md

@@ -8,7 +8,7 @@ import { html as previewHtml } from '@mdjs/mdjs-preview';
 
 ```js preview-story
 import { html, LitElement } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LionAccordion } from '@lion/ui/accordion.js';
 
 class MyComponent extends ScopedElementsMixin(LitElement) {
@@ -83,7 +83,7 @@ npm i --save @lion/ui
 
 ```js
 import { html, LitElement } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LionAccordion } from '@lion/ui/accordion.js';
 
 class MyComponent extends ScopedElementsMixin(LitElement) {

docs/components/input-file/use-cases.md

@@ -4,7 +4,7 @@
 import { Required, Validator } from '@lion/ui/form-core.js';
 import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
 import { html } from '@mdjs/mdjs-preview';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LitElement } from 'lit';
 import '@lion/ui/define/lion-input-file.js';
 loadDefaultFeedbackMessages();

docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js

@@ -1,4 +1,4 @@
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { html, css } from 'lit';
 import { ref } from 'lit/directives/ref.js';
 import { repeat } from 'lit/directives/repeat.js';

docs/components/switch/overview.md

@@ -9,7 +9,7 @@ import '@lion/ui/define/lion-switch.js';
 
 ```js preview-story
 import { html, LitElement } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LionSwitch } from '@lion/ui/switch.js';
 
 class MyComponent extends ScopedElementsMixin(LitElement) {
@@ -51,7 +51,7 @@ npm i --save @lion/ui
 
 ```js
 import { html, LitElement } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 import { LionSwitch } from '@lion/ui/switch.js';
 
 class MyComponent extends ScopedElementsMixin(LitElement) {

docs/fundamentals/systems/overlays/assets/demo-el-using-overlaymixin.mjs

@@ -1,7 +1,7 @@
 /* eslint-disable max-classes-per-file */
 /* eslint-disable import/no-extraneous-dependencies */
 import { html, LitElement, css } from 'lit';
-import { OverlayMixin } from '@lion/ui/overlays.js';
+import { OverlayMixin, withDropdownConfig } from '@lion/ui/overlays.js';
 import { LionButton } from '@lion/ui/button.js';
 
 /**
@@ -12,6 +12,7 @@ class DemoElUsingOverlayMixin extends OverlayMixin(LitElement) {
   _defineOverlayConfig() {
     return /** @type {OverlayConfig} */ ({
       placementMode: 'global',
+      ...withDropdownConfig(),
     });
   }
 

docs/guides/principles/scoped-elements.md

@@ -7,7 +7,8 @@ apply ScopedElementsMixin to make sure it uses the right version of this interna
 
 ```js
 import { LitElement, html } from '@lion/ui/core.js';
-import { ScopedElementsMixin, LitElement, html } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { html, LitElement } from 'lit';
 
 import { LionInput } from '@lion/ui/input.js';
 import { LionButton } from '@lion/ui/button.js';
@@ -91,12 +92,12 @@ In a less complex case, we might just want to add a child node to the dom.
 
 ```js
 import { LitElement  } from 'lit';
-import { ScopedElementsMixin, getScopedTagName } from '@open-wc/scoped-elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
 
 ...
 
 __getLightDomNode() {
-  return document.createElement(getScopedTagName('lion-input', this.constructor.scopedElements));
+  return document.createElement('lion-input', this.constructor.scopedElements);
 }
 ```