refactor: use shared slot presence mixin for conditional element styling

__snapshots__/Dropdown.md

@@ -86,6 +86,7 @@
   </div>
   <sp-icon
     class="chevron-down-medium dropdown icon"
+    dir="ltr"
     size="s"
   >
   </sp-icon>

__snapshots__/Search.md

@@ -6,6 +6,7 @@
 <form id="form">
   <sp-icon
     class="icon icon-workflow magnifier"
+    dir="ltr"
     size="s"
   >
   </sp-icon>
@@ -24,6 +25,7 @@
   >
   </sp-clear-button>
 </form>
+
 ```
 
 #### `can be cleared from button`
@@ -32,6 +34,7 @@
 <form id="form">
   <sp-icon
     class="icon icon-workflow magnifier"
+    dir="ltr"
     size="s"
   >
   </sp-icon>
@@ -59,6 +62,7 @@
 <form id="form">
   <sp-icon
     class="icon icon-workflow magnifier"
+    dir="ltr"
     size="s"
   >
   </sp-icon>

package.json

@@ -54,9 +54,9 @@
         "lint:ts": "eslint -f pretty 'packages/**/*.ts'",
         "lint:css": "stylelint 'packages/**/*.css'",
         "lint:versions": "node ./scripts/lint-versions.js",
-        "precustom-element-json": "lerna exec --ignore '{@spectrum-web-components/{bundle,icons-ui,icons-workflow,iconset,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- rm custom-elements.json ||:",
-        "custom-element-json": "lerna exec --ignore '{@spectrum-web-components/{bundle,icons-ui,icons-workflow,iconset,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- wca analyze '*.d.ts' --format json --outFile custom-elements.json",
-        "postcustom-element-json": "lerna exec --ignore '{@spectrum-web-components/{bundle,icons-ui,icons-workflow,iconset,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- test -f custom-elements.json",
+        "precustom-element-json": "lerna exec --ignore '{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,iconset,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- rm custom-elements.json ||:",
+        "custom-element-json": "lerna exec --ignore '{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,iconset,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- wca analyze '*.d.ts' --format json --outFile custom-elements.json",
+        "postcustom-element-json": "lerna exec --ignore '{@spectrum-web-components/{base,bundle,icons-ui,icons-workflow,iconset,shared,styles},example-project-rollup,example-project-webpack,swc-templates}' -- test -f custom-elements.json",
         "prelerna-publish": "yarn get-ready && yarn custom-element-json",
         "lerna-publish": "lerna publish --message 'chore: release new versions'",
         "test": "yarn build && yarn test:ci",
@@ -154,7 +154,7 @@
         "lerna": "^3.20.2",
         "linebyline": "^1.3.0",
         "lit-analyzer": "^1.2.0",
-        "lit-element": "^2.2.1",
+        "lit-element": "^2.4.0",
         "lit-html": "^1.0.0",
         "lodash": "^4.17.15",
         "lunr": "^2.3.8",

packages/accordion/package.json

@@ -48,10 +48,6 @@
     },
     "author": "",
     "license": "Apache-2.0",
-    "peerDependencies": {
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0"
-    },
     "devDependencies": {
         "@spectrum-css/accordion": "^3.0.0-beta.2"
     },

packages/accordion/src/AccordionItem.ts

@@ -16,8 +16,8 @@ import {
     TemplateResult,
     property,
     PropertyValues,
-} from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+    ifDefined,
+} from '@spectrum-web-components/base';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 
 import { ChevronRightMediumIcon } from '@spectrum-web-components/icons-ui';
@@ -56,7 +56,7 @@ export class AccordionItem extends Focusable {
         if (this.disabled) {
             return;
         }
-        if (event.key === 'Enter' || event.key === ' ') {
+        if (event.code === 'Enter' || event.code === 'Space') {
             event.preventDefault();
             this.dispatchEvent(
                 new CustomEvent('sp-accordion-item-toggle', {

packages/accordion/src/spectrum-config.js

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-module.exports = {
+const config = {
     spectrum: 'accordion',
     components: [
         {
@@ -76,3 +76,5 @@ module.exports = {
         },
     ],
 };
+
+export default config;

packages/accordion/stories/accordion.stories.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { TemplateResult } from 'lit-html';
+import { TemplateResult } from '@spectrum-web-components/base';
 import { html } from '@open-wc/demoing-storybook';
 
 import '../sp-accordion.js';

packages/accordion/test/accordion-item.test.ts

@@ -15,16 +15,7 @@ import { spy } from 'sinon';
 
 import '../sp-accordion-item.js';
 import { AccordionItem } from '../src/AccordionItem';
-
-const keyboardEvent = (key: string): KeyboardEvent =>
-    new KeyboardEvent('keydown', {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        key,
-    });
-const enterEvent = keyboardEvent('Enter');
-const spaceEvent = keyboardEvent(' ');
+import { spaceEvent, enterEvent } from '../../../test/testing-helpers.js';
 
 describe('Accordion Item', () => {
     it('can exist with no parent accessibly', async () => {

packages/accordion/test/accordion.test.ts

@@ -10,24 +10,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from 'lit-element';
-import { fixture, elementUpdated, expect } from '@open-wc/testing';
+import { fixture, elementUpdated, expect, html } from '@open-wc/testing';
 
 import '../sp-accordion.js';
 import { Default, AllowMultiple } from '../stories/accordion.stories.js';
 import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
-
-const keyboardEvent = (code: string, shiftKey = false): KeyboardEvent =>
-    new KeyboardEvent('keydown', {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        code,
-        shiftKey,
-    });
-const arrowUpEvent = keyboardEvent('ArrowUp');
-const arrowDownEvent = keyboardEvent('ArrowDown');
-const shiftTabEvent = keyboardEvent('Tab', true);
+import {
+    arrowUpEvent,
+    arrowDownEvent,
+    shiftTabEvent,
+} from '../../../test/testing-helpers.js';
 
 describe('Accordion', () => {
     it('renders with items accessibly', async () => {

packages/accordion/test/benchmark/basic-test.ts

@@ -13,7 +13,7 @@ governing permissions and limitations under the License.
 import '@spectrum-web-components/accordion/sp-accordion.js';
 import '@spectrum-web-components/accordion/sp-accordion-item.js';
 
-import { html } from 'lit-html';
+import { html } from '@spectrum-web-components/base';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers';
 
 measureFixtureCreation(html`

packages/action-group/src/spectrum-config.js

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-module.exports = {
+const config = {
     spectrum: 'actiongroup',
     components: [
         {
@@ -52,3 +52,5 @@ module.exports = {
         },
     ],
 };
+
+export default config;

packages/action-group/stories/action-group.stories.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from '@spectrum-web-components/base';
 
 import '../sp-action-group.js';
 import '@spectrum-web-components/button/sp-action-button.js';

packages/action-group/test/action-group.test.ts

@@ -10,8 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html } from 'lit-element';
-import { fixture, elementUpdated, expect } from '@open-wc/testing';
+import { fixture, elementUpdated, expect, html } from '@open-wc/testing';
 
 import '../sp-action-group.js';
 import { ActionGroup } from '..';

packages/action-group/test/benchmark/basic-test.ts

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 import '@spectrum-web-components/action-group/sp-action-group.js';
-import { html } from 'lit-html';
+import { html } from '@spectrum-web-components/base';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers';
 
 measureFixtureCreation(html`

packages/action-menu/package.json

@@ -47,12 +47,11 @@
     "author": "",
     "license": "Apache-2.0",
     "dependencies": {
+        "@spectrum-web-components/base": "^0.0.1",
         "@spectrum-web-components/dropdown": "^0.7.2",
         "@spectrum-web-components/icons-workflow": "^0.3.2",
         "@spectrum-web-components/menu": "^0.3.2",
         "@spectrum-web-components/shared": "^0.6.0",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
         "tslib": "^2.0.0"
     }
 }

packages/action-menu/src/ActionMenu.ts

@@ -16,7 +16,7 @@ import {
     property,
     PropertyValues,
     html,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 import { DropdownBase } from '@spectrum-web-components/dropdown';
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { MoreIcon } from '@spectrum-web-components/icons-workflow';
@@ -25,7 +25,7 @@ import actionMenuStyles from './action-menu.css.js';
 /**
  * @slot options - The menu with options that will display when the dropdown is open
  */
-export class ActionMenu extends ObserveSlotText(DropdownBase) {
+export class ActionMenu extends ObserveSlotText(DropdownBase, 'label') {
     public static get styles(): CSSResultArray {
         return [...super.styles, actionMenuStyles];
     }
@@ -52,7 +52,7 @@ export class ActionMenu extends ObserveSlotText(DropdownBase) {
                     <slot
                         name="label"
                         id="slot"
-                        @slotchange=${this.manageObservedSlot}
+                        @slotchange=${this.manageTextObservedSlot}
                     ></slot>
                 </div>
             `,

packages/action-menu/stories/action-menu.stories.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { html, action, boolean, text } from '@open-wc/demoing-storybook';
-import { TemplateResult } from 'lit-html';
+import { TemplateResult } from '@spectrum-web-components/base';
 
 import { ActionMenu } from '../';
 import '@spectrum-web-components/menu/sp-menu.js';

packages/action-menu/stories/index.ts

@@ -9,7 +9,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from '@spectrum-web-components/base';
 
 import '../sp-action-menu.js';
 import '@spectrum-web-components/menu/sp-menu.js';

packages/action-menu/test/benchmark/test-basic.ts

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
 import '@spectrum-web-components/menu/menu';
-import { html } from 'lit-html';
+import { html } from '@spectrum-web-components/base';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers';
 
 measureFixtureCreation(html`

packages/actionbar/package.json

@@ -51,8 +51,6 @@
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.0.1",
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
         "tslib": "^2.0.0"
     }
 }

packages/actionbar/stories/actionbar.stories.ts

@@ -9,7 +9,7 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { TemplateResult } from 'lit-html';
+import { TemplateResult } from '@spectrum-web-components/base';
 
 import '../sp-actionbar.js';
 import { html } from '@open-wc/demoing-storybook';

packages/actionbar/test/benchmark/test-basic.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import '@spectrum-web-components/actionbar/sp-actionbar.js';
-import { html } from 'lit-html';
+import { html } from '@spectrum-web-components/base';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers';
 
 measureFixtureCreation(html`

packages/asset/package.json

@@ -46,14 +46,11 @@
     },
     "author": "",
     "license": "Apache-2.0",
-    "peerDependencies": {
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0"
-    },
     "devDependencies": {
         "@spectrum-css/asset": "^3.0.0-beta.2"
     },
     "dependencies": {
+        "@spectrum-web-components/base": "^0.0.1",
         "tslib": "^2.0.0"
     }
 }

packages/asset/src/Asset.ts

@@ -12,11 +12,11 @@ governing permissions and limitations under the License.
 
 import {
     html,
-    LitElement,
+    SpectrumElement,
     CSSResultArray,
     TemplateResult,
     property,
-} from 'lit-element';
+} from '@spectrum-web-components/base';
 
 import styles from './asset.css.js';
 
@@ -49,7 +49,7 @@ const folder = (): TemplateResult => html`
 /**
  * @element sp-asset
  */
-export class Asset extends LitElement {
+export class Asset extends SpectrumElement {
     public static get styles(): CSSResultArray {
         return [styles];
     }

packages/asset/stories/asset.stories.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, TemplateResult } from 'lit-html';
+import { html, TemplateResult } from '@spectrum-web-components/base';
 
 import '../sp-asset.js';
 import { portrait } from '@spectrum-web-components/card/stories/images';

packages/asset/test/benchmark/basic-test.ts

@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 import '../../';
-import { html } from 'lit-html';
+import { html } from '@spectrum-web-components/base';
 import { measureFixtureCreation } from '../../../../test/benchmark/helpers';
 
 measureFixtureCreation(html`

packages/avatar/package.json

@@ -50,8 +50,7 @@
         "@spectrum-css/avatar": "^3.0.0-beta.2"
     },
     "dependencies": {
-        "lit-element": "^2.1.0",
-        "lit-html": "^1.0.0",
+        "@spectrum-web-components/base": "^0.0.1",
         "tslib": "^2.0.0"
     }
 }