diff --git a/__snapshots__/Dropdown.md b/__snapshots__/Dropdown.md index 933810707f..3796d784fb 100644 --- a/__snapshots__/Dropdown.md +++ b/__snapshots__/Dropdown.md @@ -86,6 +86,7 @@ diff --git a/__snapshots__/Search.md b/__snapshots__/Search.md index b70a6e4298..9d1fdcc3d7 100644 --- a/__snapshots__/Search.md +++ b/__snapshots__/Search.md @@ -6,6 +6,7 @@
@@ -24,6 +25,7 @@ >
+ ``` #### `can be cleared from button` @@ -32,6 +34,7 @@
@@ -59,6 +62,7 @@ diff --git a/package.json b/package.json index 05748c7874..48ed887020 100644 --- a/package.json +++ b/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", diff --git a/packages/accordion/package.json b/packages/accordion/package.json index 910023eaaf..b740ddff27 100644 --- a/packages/accordion/package.json +++ b/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" }, diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts index 700dc30e28..566186e014 100644 --- a/packages/accordion/src/AccordionItem.ts +++ b/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', { diff --git a/packages/accordion/src/spectrum-config.js b/packages/accordion/src/spectrum-config.js index 5326c78d91..7a88b76e58 100644 --- a/packages/accordion/src/spectrum-config.js +++ b/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; diff --git a/packages/accordion/stories/accordion.stories.ts b/packages/accordion/stories/accordion.stories.ts index 24e6724d59..56684bf607 100644 --- a/packages/accordion/stories/accordion.stories.ts +++ b/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'; diff --git a/packages/accordion/test/accordion-item.test.ts b/packages/accordion/test/accordion-item.test.ts index f9a67ac890..7e37feff1e 100644 --- a/packages/accordion/test/accordion-item.test.ts +++ b/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 () => { diff --git a/packages/accordion/test/accordion.test.ts b/packages/accordion/test/accordion.test.ts index abf4bc2879..8ebcd80053 100644 --- a/packages/accordion/test/accordion.test.ts +++ b/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 () => { diff --git a/packages/accordion/test/benchmark/basic-test.ts b/packages/accordion/test/benchmark/basic-test.ts index 3bbc0129a6..b09685e568 100644 --- a/packages/accordion/test/benchmark/basic-test.ts +++ b/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` diff --git a/packages/action-group/src/spectrum-config.js b/packages/action-group/src/spectrum-config.js index 9d3153eb9c..b44d2c09ff 100644 --- a/packages/action-group/src/spectrum-config.js +++ b/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; diff --git a/packages/action-group/stories/action-group.stories.ts b/packages/action-group/stories/action-group.stories.ts index 24d3debdfe..f182bc58f6 100644 --- a/packages/action-group/stories/action-group.stories.ts +++ b/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'; diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts index 815a341886..ed8a9d4c75 100644 --- a/packages/action-group/test/action-group.test.ts +++ b/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 '..'; diff --git a/packages/action-group/test/benchmark/basic-test.ts b/packages/action-group/test/benchmark/basic-test.ts index 3472720cb7..faa66702a2 100644 --- a/packages/action-group/test/benchmark/basic-test.ts +++ b/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` diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json index 4a26eacd74..3369d65be2 100644 --- a/packages/action-menu/package.json +++ b/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" } } diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts index 7844a636b2..0051524df8 100644 --- a/packages/action-menu/src/ActionMenu.ts +++ b/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) { `, diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts index c0ee76ccce..56bce9e20f 100644 --- a/packages/action-menu/stories/action-menu.stories.ts +++ b/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'; diff --git a/packages/action-menu/stories/index.ts b/packages/action-menu/stories/index.ts index 094b3dc8ab..1fb24a7964 100644 --- a/packages/action-menu/stories/index.ts +++ b/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'; diff --git a/packages/action-menu/test/benchmark/test-basic.ts b/packages/action-menu/test/benchmark/test-basic.ts index 7b8949bf60..9970a487c5 100644 --- a/packages/action-menu/test/benchmark/test-basic.ts +++ b/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` diff --git a/packages/actionbar/package.json b/packages/actionbar/package.json index 995641545d..260dbbeb97 100644 --- a/packages/actionbar/package.json +++ b/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" } } diff --git a/packages/actionbar/stories/actionbar.stories.ts b/packages/actionbar/stories/actionbar.stories.ts index cce31cda74..dc4372d15a 100644 --- a/packages/actionbar/stories/actionbar.stories.ts +++ b/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'; diff --git a/packages/actionbar/test/benchmark/test-basic.ts b/packages/actionbar/test/benchmark/test-basic.ts index 9fa9fd6209..1ea6795ffc 100644 --- a/packages/actionbar/test/benchmark/test-basic.ts +++ b/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` diff --git a/packages/asset/package.json b/packages/asset/package.json index 1b588e9a86..ea95514183 100644 --- a/packages/asset/package.json +++ b/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" } } diff --git a/packages/asset/src/Asset.ts b/packages/asset/src/Asset.ts index 6d0a3944cc..f1c9a8a3df 100644 --- a/packages/asset/src/Asset.ts +++ b/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]; } diff --git a/packages/asset/stories/asset.stories.ts b/packages/asset/stories/asset.stories.ts index 514a0d078b..5a99402565 100644 --- a/packages/asset/stories/asset.stories.ts +++ b/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'; diff --git a/packages/asset/test/benchmark/basic-test.ts b/packages/asset/test/benchmark/basic-test.ts index 8ec07206f1..792599c35d 100644 --- a/packages/asset/test/benchmark/basic-test.ts +++ b/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` diff --git a/packages/avatar/package.json b/packages/avatar/package.json index dd926811e1..fa57d7ec83 100644 --- a/packages/avatar/package.json +++ b/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" } } diff --git a/packages/avatar/src/Avatar.ts b/packages/avatar/src/Avatar.ts index 756dfa9417..b172245408 100644 --- a/packages/avatar/src/Avatar.ts +++ b/packages/avatar/src/Avatar.ts @@ -12,19 +12,19 @@ governing permissions and limitations under the License. import { html, - LitElement, + SpectrumElement, property, CSSResultArray, TemplateResult, -} from 'lit-element'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; + ifDefined, +} from '@spectrum-web-components/base'; import avatarStyles from './avatar.css.js'; /** * Avatar component */ -export class Avatar extends LitElement { +export class Avatar extends SpectrumElement { public static get styles(): CSSResultArray { return [avatarStyles]; } diff --git a/packages/avatar/stories/avatar.stories.ts b/packages/avatar/stories/avatar.stories.ts index 04866d0345..7acbd1c71c 100644 --- a/packages/avatar/stories/avatar.stories.ts +++ b/packages/avatar/stories/avatar.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, text } from '@open-wc/demoing-storybook'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; import '../sp-avatar.js'; import { avatar } from './images'; diff --git a/packages/avatar/test/benchmark/test-basic.ts b/packages/avatar/test/benchmark/test-basic.ts index cab94f7a34..e2f2e6036c 100644 --- a/packages/avatar/test/benchmark/test-basic.ts +++ b/packages/avatar/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/avatar/sp-avatar.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/banner/package.json b/packages/banner/package.json index e6aecbdae2..4f3339aed5 100644 --- a/packages/banner/package.json +++ b/packages/banner/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" } } diff --git a/packages/banner/stories/banner.stories.ts b/packages/banner/stories/banner.stories.ts index dc9415bde1..410a9cbc69 100644 --- a/packages/banner/stories/banner.stories.ts +++ b/packages/banner/stories/banner.stories.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import { html, boolean, radios, text } from '@open-wc/demoing-storybook'; import '../sp-banner.js'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-banner', diff --git a/packages/banner/test/benchmark/test-basic.ts b/packages/banner/test/benchmark/test-basic.ts index 4da40b4056..4aba13cfa7 100644 --- a/packages/banner/test/benchmark/test-basic.ts +++ b/packages/banner/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/banner/sp-banner.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/bar-loader/package.json b/packages/bar-loader/package.json index f35a11e018..4fcd5bf8ef 100644 --- a/packages/bar-loader/package.json +++ b/packages/bar-loader/package.json @@ -46,10 +46,6 @@ }, "author": "", "license": "Apache-2.0", - "peerDependencies": { - "lit-element": "^2.1.0", - "lit-html": "^1.0.0" - }, "devDependencies": { "@spectrum-css/barloader": "^3.0.0-beta.2" }, diff --git a/packages/bar-loader/stories/bar-loader.stories.ts b/packages/bar-loader/stories/bar-loader.stories.ts index 1761c3dc0e..f371e97f32 100644 --- a/packages/bar-loader/stories/bar-loader.stories.ts +++ b/packages/bar-loader/stories/bar-loader.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-bar-loader.js'; diff --git a/packages/bar-loader/test/bar-loader.test.ts b/packages/bar-loader/test/bar-loader.test.ts index c62f9989ee..e92ad99d35 100644 --- a/packages/bar-loader/test/bar-loader.test.ts +++ b/packages/bar-loader/test/bar-loader.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-bar-loader.js'; import { BarLoader } from '..'; diff --git a/packages/bar-loader/test/benchmark/basic-test.ts b/packages/bar-loader/test/benchmark/basic-test.ts index 44ef9c68bd..a659397517 100644 --- a/packages/bar-loader/test/benchmark/basic-test.ts +++ b/packages/bar-loader/test/benchmark/basic-test.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/bar-loader/sp-bar-loader.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/base/README.md b/packages/base/README.md index 53cedef723..13f97f4fce 100644 --- a/packages/base/README.md +++ b/packages/base/README.md @@ -34,6 +34,8 @@ export MyElement extends SpectrumMixin(HTMLElement) {} With powerful CSS selectors like `:host(:dir(rtl))` and `:host-content([dir=rtl])` not yet enjoying cross-browser support, reliably delivering content in both "left to right" and "right to left" while relying on Shadow DOM means certain trade offs need to be made. While every custom element build from `SpectrumMixin` could have its `dir` attribute applied to manage this, doing so is not only a pain for apply, it's a pain to maintain over time. To support the flexibility to devlier content in both of these directions, elements built from `SpectrumMixin` will observe the `dir` attribute of either the `document` or a containing `sp-theme`. This will allow your sites and applications to manage content direction in a single place while also opening the possibility of having multiple content directions on the same page by scoping those content sections with `sp-theme` elements. +Placing a `dir` attribute on an element built from `SpectrumMixin` before attaching it to the DOM will prevent it from resolving the text direction value to a parent `sp-theme` or `document` element. Elements applied to the page in this way will also NOT participate in observing any such elements, so their `dir` values will remain as initialized regardless of changes in other parts of your documents. If you choose to leverage this, be aware that any child (in both light DOM and shadow DOM) of this element will need to have a `dir` attribute applied as well if you do not want it resolving to a parent `sp-theme` or `document` element itself. In this way, it is likely that you would benefit from leveraging an `sp-theme` element to create scope in your document for managing this custom content direction section of your page. + #### `isLTR` While CSS offers many powerful solutions for styling content in various directions, sometimes JS functionality depends on the specific of that direction. Elements built from `SpectrumMixin` have the `this.isLTR` getter that will resolve to `true` when `dir === 'ltr'`. diff --git a/packages/base/package.json b/packages/base/package.json index 9a26c6686c..7ab696e231 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -42,7 +42,8 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "lit-element": "^2.1.0", + "@spectrum-web-components/theme": "^0.5.2", + "lit-element": "^2.4.0", "lit-html": "^1.0.0", "tslib": "^2.0.0" } diff --git a/packages/base/src/Base.ts b/packages/base/src/Base.ts index f75e0e814b..f735b763be 100644 --- a/packages/base/src/Base.ts +++ b/packages/base/src/Base.ts @@ -10,13 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { LitElement, property } from 'lit-element'; +import { LitElement, property, UpdatingElement } from 'lit-element'; import { Theme } from '@spectrum-web-components/theme'; -export * from 'lit-element'; - -import { UpdatingElement } from 'lit-element'; - type Constructor> = { // eslint-disable-next-line @typescript-eslint/no-explicit-any new (...args: any[]): T; @@ -48,12 +44,17 @@ rtlObserver.observe(document.documentElement, { attributeFilter: ['dir'], }); +type ContentDirectionManager = { startManagingContentDirection?(): void }; + +const canManageContentDirection = (el: ContentDirectionManager): boolean => + typeof el.startManagingContentDirection === 'undefined'; + export function SpectrumMixin>( constructor: T ): T & Constructor { class SlotTextObservingElement extends constructor { public shadowRoot!: ShadowRoot; - private _dirParent!: HTMLElement; + private _dirParent?: HTMLElement; /** * @private @@ -71,38 +72,40 @@ export function SpectrumMixin>( public connectedCallback(): void { if (!this.hasAttribute('dir')) { let dirParent = ((this as HTMLElement).assignedSlot || - this.parentNode) as - | HTMLElement - | DocumentFragment - | ShadowRoot; + this.parentNode) as HTMLElement; while ( dirParent !== document.documentElement && - !(dirParent instanceof Theme) + canManageContentDirection( + dirParent as ContentDirectionManager + ) ) { dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node dirParent.parentNode || // DOM Element detected - (dirParent as ShadowRoot).host) as - | HTMLElement - | DocumentFragment - | ShadowRoot; + ((dirParent as unknown) as ShadowRoot) + .host) as HTMLElement; } this.dir = dirParent.dir === 'rtl' ? dirParent.dir : this.dir; if (dirParent === document.documentElement) { observedForElements.add(this); } else { - (dirParent as Theme).trackChild(this); + (dirParent as Theme).startManagingContentDirection(this); } - this._dirParent = dirParent; + this._dirParent = dirParent as HTMLElement; } super.connectedCallback(); } public disconnectedCallback(): void { super.disconnectedCallback(); - if (this._dirParent === document.documentElement) { - observedForElements.delete(this); - } else { - (this._dirParent as Theme).untrackChild(this); + if (this._dirParent) { + if (this._dirParent === document.documentElement) { + observedForElements.delete(this); + } else { + (this._dirParent as Theme).stopManagingContentDirection( + this + ); + } + this.removeAttribute('dir'); } } } diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts index 55b6b6af22..ba598611f5 100644 --- a/packages/base/src/index.ts +++ b/packages/base/src/index.ts @@ -11,3 +11,10 @@ governing permissions and limitations under the License. */ export * from './Base.js'; +export * from 'lit-element'; +export { nothing } from 'lit-html'; +export { ifDefined } from 'lit-html/directives/if-defined'; +export { repeat } from 'lit-html/directives/repeat'; +export { classMap } from 'lit-html/directives/class-map'; +export { styleMap } from 'lit-html/directives/style-map'; +export { until } from 'lit-html/directives/until'; diff --git a/packages/button-group/stories/button-group.stories.ts b/packages/button-group/stories/button-group.stories.ts index 893b4bfc73..e7bd2b56f1 100644 --- a/packages/button-group/stories/button-group.stories.ts +++ b/packages/button-group/stories/button-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-button-group.js'; import '@spectrum-web-components/button/sp-button.js'; diff --git a/packages/button-group/test/benchmark/basic-test.ts b/packages/button-group/test/benchmark/basic-test.ts index 080948620d..cb7ec43f60 100644 --- a/packages/button-group/test/benchmark/basic-test.ts +++ b/packages/button-group/test/benchmark/basic-test.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import '@spectrum-web-components/button-group/sp-button-group.js'; import '@spectrum-web-components/button/sp-button.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/button/package.json b/packages/button/package.json index f1f728be5a..047d9445da 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -58,11 +58,10 @@ "@spectrum-css/button": "^3.0.0-beta.3" }, "dependencies": { + "@spectrum-web-components/base": "^0.0.1", "@spectrum-web-components/icon": "^0.5.2", "@spectrum-web-components/icons-ui": "^0.2.2", "@spectrum-web-components/shared": "^0.6.0", - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", "tslib": "^2.0.0" } } diff --git a/packages/button/src/ActionButton.ts b/packages/button/src/ActionButton.ts index b783b1a532..2cfcd9cc6d 100644 --- a/packages/button/src/ActionButton.ts +++ b/packages/button/src/ActionButton.ts @@ -10,7 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { CSSResultArray, property, PropertyValues } from 'lit-element'; +import { + CSSResultArray, + property, + PropertyValues, +} from '@spectrum-web-components/base'; import { ButtonBase } from './ButtonBase.js'; import buttonStyles from './action-button.css.js'; diff --git a/packages/button/src/Button.ts b/packages/button/src/Button.ts index e9dfb7df47..2568fd8337 100644 --- a/packages/button/src/Button.ts +++ b/packages/button/src/Button.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 { CSSResultArray, property } from 'lit-element'; +import { CSSResultArray, property } from '@spectrum-web-components/base'; import { ButtonBase } from './ButtonBase.js'; import buttonStyles from './button.css.js'; diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts index fe9570ddfb..e3fdc6e2fd 100644 --- a/packages/button/src/ButtonBase.ts +++ b/packages/button/src/ButtonBase.ts @@ -16,25 +16,30 @@ import { TemplateResult, CSSResultArray, query, -} from 'lit-element'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; + ifDefined, +} from '@spectrum-web-components/base'; import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js'; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; -import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js'; +import { + ObserveSlotText, + ObserveSlotPresence, +} from '@spectrum-web-components/shared'; import buttonStyles from './button-base.css.js'; -export class ButtonBase extends LikeAnchor(ObserveSlotText(Focusable)) { +export class ButtonBase extends LikeAnchor( + ObserveSlotText(ObserveSlotPresence(Focusable, '[slot="icon"]')) +) { public static get styles(): CSSResultArray { return [...super.styles, buttonStyles]; } + protected get hasIcon(): boolean { + return this.slotContentIsPresent; + } + @property({ type: Boolean, reflect: true, attribute: 'icon-right' }) protected iconRight = false; - private get hasIcon(): boolean { - return !!this.querySelector('[slot="icon"]'); - } - private get hasLabel(): boolean { return this.slotHasContent; } @@ -55,7 +60,7 @@ export class ButtonBase extends LikeAnchor(ObserveSlotText(Focusable)) {
`, diff --git a/packages/button/src/ClearButton.ts b/packages/button/src/ClearButton.ts index 33f428c407..b07f31a6ff 100644 --- a/packages/button/src/ClearButton.ts +++ b/packages/button/src/ClearButton.ts @@ -10,7 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { CSSResultArray, TemplateResult, html, property } from 'lit-element'; +import { + CSSResultArray, + TemplateResult, + html, + property, +} from '@spectrum-web-components/base'; import { ButtonBase } from './ButtonBase.js'; import buttonStyles from './clear-button.css.js'; import { CrossLargeIcon } from '@spectrum-web-components/icons-ui'; diff --git a/packages/button/stories/action-button.stories.ts b/packages/button/stories/action-button.stories.ts index 5cdb62e0d3..8ab05d9283 100644 --- a/packages/button/stories/action-button.stories.ts +++ b/packages/button/stories/action-button.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 } from '@open-wc/demoing-storybook'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; import '../'; import '../sp-action-button.js'; diff --git a/packages/button/stories/button.stories.ts b/packages/button/stories/button.stories.ts index e844304c48..a7000df8b2 100644 --- a/packages/button/stories/button.stories.ts +++ b/packages/button/stories/button.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, boolean, action } from '@open-wc/demoing-storybook'; -import { TemplateResult } from 'lit-element'; +import { TemplateResult } from '@spectrum-web-components/base'; import '../sp-button.js'; import '@spectrum-web-components/icon/sp-icon.js'; diff --git a/packages/button/test/action-button.test.ts b/packages/button/test/action-button.test.ts index 7af2fd2e03..2e3282e55e 100644 --- a/packages/button/test/action-button.test.ts +++ b/packages/button/test/action-button.test.ts @@ -12,8 +12,7 @@ governing permissions and limitations under the License. import '@spectrum-web-components/button/sp-action-button.js'; import { ActionButton } from '@spectrum-web-components/button'; -import { html } from 'lit-element'; -import { fixture, elementUpdated, expect } from '@open-wc/testing'; +import { fixture, elementUpdated, expect, html } from '@open-wc/testing'; describe('Button', () => { it('loads default', async () => { diff --git a/packages/button/test/benchmark/test-basic.ts b/packages/button/test/benchmark/test-basic.ts index be5be34c53..058455a22c 100644 --- a/packages/button/test/benchmark/test-basic.ts +++ b/packages/button/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spctrum-web-components/button/sp-button.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts index 89af6b164f..4393aca200 100644 --- a/packages/button/test/button.test.ts +++ b/packages/button/test/button.test.ts @@ -12,8 +12,7 @@ governing permissions and limitations under the License. import '@spectrum-web-components/button/sp-button.js'; import { Button } from '@spectrum-web-components/button'; -import { html } from 'lit-element'; -import { fixture, elementUpdated, expect } from '@open-wc/testing'; +import { fixture, elementUpdated, expect, html } from '@open-wc/testing'; import { shiftTabEvent } from '../../../test/testing-helpers.js'; type TestableButtonType = { diff --git a/packages/card/src/Card.ts b/packages/card/src/Card.ts index 41009b6cee..e73192c33f 100644 --- a/packages/card/src/Card.ts +++ b/packages/card/src/Card.ts @@ -17,6 +17,7 @@ import { CSSResultArray, TemplateResult, PropertyValues, + ifDefined, } from '@spectrum-web-components/base'; import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js'; import '@spectrum-web-components/asset/sp-asset.js'; @@ -26,7 +27,6 @@ import '@spectrum-web-components/checkbox/sp-checkbox.js'; import '@spectrum-web-components/quick-actions/sp-quick-actions.js'; import cardStyles from './card.css.js'; import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox'; -import { ifDefined } from 'lit-html/directives/if-defined'; /** * @element sp-card diff --git a/packages/card/stories/card.stories.ts b/packages/card/stories/card.stories.ts index 4119912dca..304aaca722 100644 --- a/packages/card/stories/card.stories.ts +++ b/packages/card/stories/card.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 { html, TemplateResult } from 'lit-html'; +import { html, TemplateResult } from '@spectrum-web-components/base'; import '../sp-card.js'; import { landscape, portrait } from './images'; diff --git a/packages/card/test/benchmark/test-basic.ts b/packages/card/test/benchmark/test-basic.ts index 16fe51b786..a51a867b24 100644 --- a/packages/card/test/benchmark/test-basic.ts +++ b/packages/card/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/card/sp-card.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/card/test/card.test.ts b/packages/card/test/card.test.ts index 4be0f84a64..ed8f4fb4a6 100644 --- a/packages/card/test/card.test.ts +++ b/packages/card/test/card.test.ts @@ -17,16 +17,7 @@ import { fixture, elementUpdated, html, expect } from '@open-wc/testing'; import { Default, smallHorizontal } from '../stories/card.stories.js'; import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox'; import { spy } from 'sinon'; - -const keyboardEvent = (code: string, shiftKey = false): KeyboardEvent => - new KeyboardEvent('keydown', { - bubbles: true, - composed: true, - cancelable: true, - code, - shiftKey, - }); -const spaceEvent = keyboardEvent('Space'); +import { spaceEvent } from '../../../test/testing-helpers.js'; describe('card', () => { it('loads', async () => { diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index 7b14b43229..d9898559b2 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -50,11 +50,10 @@ "@spectrum-css/checkbox": "^3.0.0-beta.3" }, "dependencies": { + "@spectrum-web-components/base": "^0.0.1", "@spectrum-web-components/icon": "^0.5.2", "@spectrum-web-components/icons-ui": "^0.2.2", "@spectrum-web-components/shared": "^0.6.0", - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", "tslib": "^2.0.0" } } diff --git a/packages/checkbox/src/Checkbox.ts b/packages/checkbox/src/Checkbox.ts index b7cabab38c..e65adfaa7f 100644 --- a/packages/checkbox/src/Checkbox.ts +++ b/packages/checkbox/src/Checkbox.ts @@ -16,7 +16,7 @@ import { html, property, PropertyValues, -} from 'lit-element'; +} from '@spectrum-web-components/base'; import { CheckboxBase } from './CheckboxBase.js'; import '@spectrum-web-components/icon/sp-icon.js'; import { diff --git a/packages/checkbox/src/CheckboxBase.ts b/packages/checkbox/src/CheckboxBase.ts index d5a6cb3843..71fca28e10 100644 --- a/packages/checkbox/src/CheckboxBase.ts +++ b/packages/checkbox/src/CheckboxBase.ts @@ -16,7 +16,7 @@ import { TemplateResult, query, CSSResultArray, -} from 'lit-element'; +} from '@spectrum-web-components/base'; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; export class CheckboxBase extends Focusable { diff --git a/packages/checkbox/stories/checkbox.stories.ts b/packages/checkbox/stories/checkbox.stories.ts index 65aa985d8d..040dc19825 100644 --- a/packages/checkbox/stories/checkbox.stories.ts +++ b/packages/checkbox/stories/checkbox.stories.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import { html, action } from '@open-wc/demoing-storybook'; import '../'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-checkbox', diff --git a/packages/checkbox/test/benchmark/test-basic.ts b/packages/checkbox/test/benchmark/test-basic.ts index 71c8dcf5b1..15bfb93a92 100644 --- a/packages/checkbox/test/benchmark/test-basic.ts +++ b/packages/checkbox/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/checkbox/sp-checkbox.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/circle-loader/src/CircleLoader.ts b/packages/circle-loader/src/CircleLoader.ts index 90387d0ee8..96428d3815 100644 --- a/packages/circle-loader/src/CircleLoader.ts +++ b/packages/circle-loader/src/CircleLoader.ts @@ -17,8 +17,8 @@ import { property, SpectrumElement, PropertyValues, + ifDefined, } from '@spectrum-web-components/base'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; import circleLoaderStyles from './circle-loader.css.js'; diff --git a/packages/circle-loader/stories/circleloader.stories.ts b/packages/circle-loader/stories/circleloader.stories.ts index ac57938151..f8aaa1fb1e 100644 --- a/packages/circle-loader/stories/circleloader.stories.ts +++ b/packages/circle-loader/stories/circleloader.stories.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '../sp-circle-loader.js'; import { html, number, boolean } from '@open-wc/demoing-storybook'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-circle-loader', diff --git a/packages/circle-loader/test/benchmark/test-basic.ts b/packages/circle-loader/test/benchmark/test-basic.ts index a45c48246b..b2de6c216a 100644 --- a/packages/circle-loader/test/benchmark/test-basic.ts +++ b/packages/circle-loader/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/circle-loader/sp-circle-loader.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/coachmark/package.json b/packages/coachmark/package.json index b9b33602dd..b691a1f002 100644 --- a/packages/coachmark/package.json +++ b/packages/coachmark/package.json @@ -50,8 +50,7 @@ "@spectrum-css/coachmark": "^3.0.0-beta.3" }, "dependencies": { - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", + "@spectrum-web-components/base": "^0.0.1", "tslib": "^2.0.0" } } diff --git a/packages/coachmark/src/Coachmark.ts b/packages/coachmark/src/Coachmark.ts index 729b9e00a3..df737d60c8 100644 --- a/packages/coachmark/src/Coachmark.ts +++ b/packages/coachmark/src/Coachmark.ts @@ -12,18 +12,18 @@ 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 './coachmark.css.js'; /** * @element sp-coachmark */ -export class Coachmark extends LitElement { +export class Coachmark extends SpectrumElement { public static get styles(): CSSResultArray { return [styles]; } diff --git a/packages/coachmark/stories/coachmark.stories.ts b/packages/coachmark/stories/coachmark.stories.ts index 47ae534db6..1d9d9cca46 100644 --- a/packages/coachmark/stories/coachmark.stories.ts +++ b/packages/coachmark/stories/coachmark.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-coachmark.js'; diff --git a/packages/coachmark/test/benchmark/basic-test.ts b/packages/coachmark/test/benchmark/basic-test.ts index 6104954ba5..b5896e800d 100644 --- a/packages/coachmark/test/benchmark/basic-test.ts +++ b/packages/coachmark/test/benchmark/basic-test.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/coachmark/sp-coachmark.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/coachmark/test/coachmark.test.ts b/packages/coachmark/test/coachmark.test.ts index bb64ddc3cb..c77d82d934 100644 --- a/packages/coachmark/test/coachmark.test.ts +++ b/packages/coachmark/test/coachmark.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-coachmark.js'; import { Coachmark } from '../'; diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts index f62f9f70e5..11801d71a2 100644 --- a/packages/dialog/src/Dialog.ts +++ b/packages/dialog/src/Dialog.ts @@ -27,6 +27,7 @@ import { AlertMediumIcon, CrossLargeIcon, } from '@spectrum-web-components/icons-ui'; +import { ObserveSlotPresence } from '@spectrum-web-components/shared'; import styles from './dialog.css.js'; @@ -35,7 +36,10 @@ import styles from './dialog.css.js'; * * @fires close - Announces that the dialog has been closed. */ -export class Dialog extends SpectrumElement { +export class Dialog extends ObserveSlotPresence( + SpectrumElement, + '[slot="footer"]' +) { public static get styles(): CSSResultArray { return [styles, alertMediumStyles, crossLargeStyles]; } @@ -49,6 +53,10 @@ export class Dialog extends SpectrumElement { @property({ type: Boolean, reflect: true }) public dismissible = false; + protected get hasFooter(): boolean { + return this.slotContentIsPresent; + } + @property({ type: Boolean, reflect: true, attribute: 'no-divider' }) public noDivider = false; @@ -93,10 +101,6 @@ export class Dialog extends SpectrumElement { ); } - private get hasFooter(): boolean { - return !!this.querySelector('[slot="footer"]'); - } - protected render(): TemplateResult { return html` diff --git a/packages/dialog/src/DialogWrapper.ts b/packages/dialog/src/DialogWrapper.ts index 989dd1144d..5ee7e00098 100644 --- a/packages/dialog/src/DialogWrapper.ts +++ b/packages/dialog/src/DialogWrapper.ts @@ -17,8 +17,8 @@ import { property, CSSResultArray, query, + ifDefined, } from '@spectrum-web-components/base'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; import '@spectrum-web-components/underlay/sp-underlay.js'; import '@spectrum-web-components/button/sp-button.js'; diff --git a/packages/dialog/stories/dialog-wrapper.stories.ts b/packages/dialog/stories/dialog-wrapper.stories.ts index dd6102cdc8..316aa54bfe 100644 --- a/packages/dialog/stories/dialog-wrapper.stories.ts +++ b/packages/dialog/stories/dialog-wrapper.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 { action, boolean } from '@open-wc/demoing-storybook'; import '@spectrum-web-components/button/sp-button.js'; diff --git a/packages/dialog/stories/dialog.stories.ts b/packages/dialog/stories/dialog.stories.ts index 9833866a7e..b1fdcd7d3f 100644 --- a/packages/dialog/stories/dialog.stories.ts +++ b/packages/dialog/stories/dialog.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 { boolean } from '@open-wc/demoing-storybook'; import '../sp-dialog.js'; diff --git a/packages/dialog/test/benchmark/basic-test.ts b/packages/dialog/test/benchmark/basic-test.ts index 6713c11614..463c64e3d8 100644 --- a/packages/dialog/test/benchmark/basic-test.ts +++ b/packages/dialog/test/benchmark/basic-test.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/dialog/sp-dialog.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/dialog/tsconfig.json b/packages/dialog/tsconfig.json index e016236fa2..4594d40d7a 100644 --- a/packages/dialog/tsconfig.json +++ b/packages/dialog/tsconfig.json @@ -6,5 +6,9 @@ }, "include": ["*.ts", "src/*.ts"], "exclude": ["test/*.ts", "stories/*.ts"], - "references": [{ "path": "../button" }, { "path": "../underlay" }] + "references": [ + { "path": "../button" }, + { "path": "../shared" }, + { "path": "../underlay" } + ] } diff --git a/packages/dropdown/src/Dropdown.ts b/packages/dropdown/src/Dropdown.ts index 5ddc34f619..8f0fd6f1e6 100644 --- a/packages/dropdown/src/Dropdown.ts +++ b/packages/dropdown/src/Dropdown.ts @@ -17,9 +17,9 @@ import { CSSResultArray, TemplateResult, query, + nothing, + ifDefined, } from '@spectrum-web-components/base'; -import { nothing } from 'lit-html'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; import dropdownStyles from './dropdown.css.js'; import buttonBaseStyles from '@spectrum-web-components/button/src/button-base.css.js'; diff --git a/packages/dropdown/stories/dropdown.stories.ts b/packages/dropdown/stories/dropdown.stories.ts index 85d0411b7f..da251ae4a8 100644 --- a/packages/dropdown/stories/dropdown.stories.ts +++ b/packages/dropdown/stories/dropdown.stories.ts @@ -15,7 +15,7 @@ import '../sp-dropdown.js'; import { Dropdown } from '../'; import '@spectrum-web-components/menu/sp-menu.js'; import '@spectrum-web-components/menu/sp-menu-item.js'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-dropdown', diff --git a/packages/dropdown/test/benchmark/test-basic.ts b/packages/dropdown/test/benchmark/test-basic.ts index c0a6aeba4a..ebf7c3e3f1 100644 --- a/packages/dropdown/test/benchmark/test-basic.ts +++ b/packages/dropdown/test/benchmark/test-basic.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import '@spectrum-web-components/dropdown/sp-dropdown.js'; import '@spectrum-web-components/menu/sp-menu.js'; import '@spectrum-web-components/menu/sp-menu-item.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/dropzone/stories/dropzone.stories.ts b/packages/dropzone/stories/dropzone.stories.ts index b502e0016e..d361127c87 100644 --- a/packages/dropzone/stories/dropzone.stories.ts +++ b/packages/dropzone/stories/dropzone.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 { html, TemplateResult } from 'lit-html'; +import { html, TemplateResult } from '@spectrum-web-components/base'; import '../sp-dropzone.js'; import { illustration } from '../test/test-svg'; diff --git a/packages/dropzone/test/benchmark/test-basic.ts b/packages/dropzone/test/benchmark/test-basic.ts index bd47f3f9cc..166bf5a5dd 100644 --- a/packages/dropzone/test/benchmark/test-basic.ts +++ b/packages/dropzone/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/dropzone/sp-dropzone.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/dropzone/test/test-svg.ts b/packages/dropzone/test/test-svg.ts index 830267af63..d7009a5bff 100644 --- a/packages/dropzone/test/test-svg.ts +++ b/packages/dropzone/test/test-svg.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 } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; export const illustration = html` `; diff --git a/packages/icons/src/icons-medium.svg.ts b/packages/icons/src/icons-medium.svg.ts index 0d350679eb..433cbebe38 100644 --- a/packages/icons/src/icons-medium.svg.ts +++ b/packages/icons/src/icons-medium.svg.ts @@ -9,5 +9,5 @@ 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 { svg } from 'lit-element'; +import { svg } from '@spectrum-web-components/base'; export default svg``; diff --git a/packages/icons/stories/icons.stories.ts b/packages/icons/stories/icons.stories.ts index 27a58dbdf8..4609a67400 100644 --- a/packages/icons/stories/icons.stories.ts +++ b/packages/icons/stories/icons.stories.ts @@ -13,7 +13,7 @@ import '../sp-icons-large.js'; import '../sp-icons-medium.js'; import '@spectrum-web-components/iconset/src/icons-demo.js'; import { html, color } from '@open-wc/demoing-storybook'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { title: 'Icons', diff --git a/packages/icons/test/benchmark/test-basic.ts b/packages/icons/test/benchmark/test-basic.ts index 3ab656561e..5ce4e8af50 100644 --- a/packages/icons/test/benchmark/test-basic.ts +++ b/packages/icons/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/icons/sp-icons-medium.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/iconset/package.json b/packages/iconset/package.json index e409149724..add9952d92 100644 --- a/packages/iconset/package.json +++ b/packages/iconset/package.json @@ -44,8 +44,7 @@ "author": "", "license": "Apache-2.0", "dependencies": { - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", + "@spectrum-web-components/base": "^0.0.1", "tslib": "^2.0.0" } } diff --git a/packages/iconset/src/icons-demo.ts b/packages/iconset/src/icons-demo.ts index a28601ed02..084af331c6 100644 --- a/packages/iconset/src/icons-demo.ts +++ b/packages/iconset/src/icons-demo.ts @@ -11,18 +11,18 @@ governing permissions and limitations under the License. */ import { IconsetAddedDetail } from './'; import { - LitElement, + SpectrumElement, css, html, TemplateResult, CSSResult, property, customElement, -} from 'lit-element'; +} from '@spectrum-web-components/base'; import '@spectrum-web-components/icon/sp-icon.js'; @customElement('icons-demo') -export class IconsDemo extends LitElement { +export class IconsDemo extends SpectrumElement { @property() public name = 'ui'; diff --git a/packages/iconset/src/iconset-svg.ts b/packages/iconset/src/iconset-svg.ts index 1faef0e929..d9be70cbf0 100644 --- a/packages/iconset/src/iconset-svg.ts +++ b/packages/iconset/src/iconset-svg.ts @@ -10,7 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { html, query, TemplateResult, PropertyValues } from 'lit-element'; +import { + html, + query, + TemplateResult, + PropertyValues, +} from '@spectrum-web-components/base'; import { Iconset } from './iconset.js'; diff --git a/packages/iconset/src/iconset.ts b/packages/iconset/src/iconset.ts index f2eaeec259..2e34656fbd 100644 --- a/packages/iconset/src/iconset.ts +++ b/packages/iconset/src/iconset.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import { IconsetRegistry } from './iconset-registry.js'; -import { LitElement, property } from 'lit-element'; +import { LitElement, property } from '@spectrum-web-components/base'; export abstract class Iconset extends LitElement { protected registered = false; diff --git a/packages/illustrated-message/stories/illustrated-message.stories.ts b/packages/illustrated-message/stories/illustrated-message.stories.ts index 0e5654100f..b625d6ac4d 100644 --- a/packages/illustrated-message/stories/illustrated-message.stories.ts +++ b/packages/illustrated-message/stories/illustrated-message.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 { html, TemplateResult } from 'lit-html'; +import { html, TemplateResult } from '@spectrum-web-components/base'; import '../sp-illustrated-message.js'; import { illustration } from '@spectrum-web-components/dropzone/test/test-svg.js'; diff --git a/packages/illustrated-message/test/benchmark/test-basic.ts b/packages/illustrated-message/test/benchmark/test-basic.ts index 343df7eb6c..5c43b4f2d4 100644 --- a/packages/illustrated-message/test/benchmark/test-basic.ts +++ b/packages/illustrated-message/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/illustrated-message/sp-illustrated-message.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/link/package.json b/packages/link/package.json index 976b303bec..7e57b7fdf3 100644 --- a/packages/link/package.json +++ b/packages/link/package.json @@ -48,9 +48,8 @@ "@spectrum-css/link": "^3.0.0" }, "dependencies": { + "@spectrum-web-components/base": "^0.0.1", "@spectrum-web-components/shared": "^0.6.0", - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", "tslib": "^2.0.0" } } diff --git a/packages/link/src/Link.ts b/packages/link/src/Link.ts index 4cd408e837..2f92d6971b 100644 --- a/packages/link/src/Link.ts +++ b/packages/link/src/Link.ts @@ -10,7 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { CSSResultArray, TemplateResult, query } from 'lit-element'; +import { + CSSResultArray, + TemplateResult, + query, +} from '@spectrum-web-components/base'; import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js'; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; diff --git a/packages/link/stories/link.stories.ts b/packages/link/stories/link.stories.ts index b79d5409bb..dfc931639c 100644 --- a/packages/link/stories/link.stories.ts +++ b/packages/link/stories/link.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 { html, TemplateResult } from 'lit-html'; +import { html, TemplateResult } from '@spectrum-web-components/base'; import '../sp-link.js'; diff --git a/packages/link/test/benchmark/test-basic.ts b/packages/link/test/benchmark/test-basic.ts index 4709d3420e..b49f07d7aa 100644 --- a/packages/link/test/benchmark/test-basic.ts +++ b/packages/link/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/link/sp-link.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/menu/stories/menu-item.stories.ts b/packages/menu/stories/menu-item.stories.ts index 78fca234df..a577b28ee8 100644 --- a/packages/menu/stories/menu-item.stories.ts +++ b/packages/menu/stories/menu-item.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 { html, TemplateResult } from 'lit-html'; +import { html, TemplateResult } from '@spectrum-web-components/base'; import '../sp-menu-item.js'; diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts index 329238798e..33c92abf06 100644 --- a/packages/menu/stories/menu.stories.ts +++ b/packages/menu/stories/menu.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 { html, TemplateResult } from 'lit-html'; +import { html, TemplateResult } from '@spectrum-web-components/base'; import '../sp-menu.js'; import '@spectrum-web-components/popover/sp-popover.js'; diff --git a/packages/overlay/package.json b/packages/overlay/package.json index 10afb94609..6c0f654610 100644 --- a/packages/overlay/package.json +++ b/packages/overlay/package.json @@ -61,8 +61,6 @@ "@popperjs/core": "^2.2.2", "@spectrum-web-components/base": "^0.0.1", "@spectrum-web-components/theme": "^0.5.2", - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", "popper-max-size-modifier": "^0.2.0", "tslib": "^2.0.0" } diff --git a/packages/overlay/src/ActiveOverlay.ts b/packages/overlay/src/ActiveOverlay.ts index 2e6fcc7577..4344cc2ac2 100644 --- a/packages/overlay/src/ActiveOverlay.ts +++ b/packages/overlay/src/ActiveOverlay.ts @@ -24,8 +24,8 @@ import { CSSResultArray, property, PropertyValues, + ifDefined, } from '@spectrum-web-components/base'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; import styles from './active-overlay.css.js'; export interface PositionResult { diff --git a/packages/overlay/src/OverlayTrigger.ts b/packages/overlay/src/OverlayTrigger.ts index d1446f5ef5..87fe52e738 100644 --- a/packages/overlay/src/OverlayTrigger.ts +++ b/packages/overlay/src/OverlayTrigger.ts @@ -16,7 +16,7 @@ import { property, CSSResultArray, TemplateResult, -} from 'lit-element'; +} from '@spectrum-web-components/base'; import { Placement, diff --git a/packages/overlay/stories/overlay-story-components.ts b/packages/overlay/stories/overlay-story-components.ts index 2d86a1c877..f2528d6d89 100644 --- a/packages/overlay/stories/overlay-story-components.ts +++ b/packages/overlay/stories/overlay-story-components.ts @@ -18,7 +18,7 @@ import { CSSResult, CSSResultArray, query, -} from 'lit-element'; +} from '@spectrum-web-components/base'; import { Overlay, Placement } from '../'; import { RadioGroup } from '@spectrum-web-components/radio'; diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts index 8d358d92b8..eae00678ad 100644 --- a/packages/overlay/stories/overlay.stories.ts +++ b/packages/overlay/stories/overlay.stories.ts @@ -9,7 +9,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { html, number, select, radios } from '@open-wc/demoing-storybook'; -import { TemplateResult } from 'lit-element'; +import { TemplateResult } from '@spectrum-web-components/base'; import { Placement } from '../'; import '@spectrum-web-components/button/sp-button.js'; diff --git a/packages/popover/src/Popover.ts b/packages/popover/src/Popover.ts index 770f2daefb..096a6d1948 100644 --- a/packages/popover/src/Popover.ts +++ b/packages/popover/src/Popover.ts @@ -16,8 +16,8 @@ import { CSSResultArray, TemplateResult, property, + nothing, } from '@spectrum-web-components/base'; -import { nothing } from 'lit-html'; import { Placement, diff --git a/packages/popover/stories/popover.stories.ts b/packages/popover/stories/popover.stories.ts index 49a4f8c5f9..3a31d014ba 100644 --- a/packages/popover/stories/popover.stories.ts +++ b/packages/popover/stories/popover.stories.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. import { html, boolean, text, radios } from '@open-wc/demoing-storybook'; import '../sp-popover.js'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-popover', diff --git a/packages/popover/test/benchmark/test-basic.ts b/packages/popover/test/benchmark/test-basic.ts index 1d2197a920..7e3df49f64 100644 --- a/packages/popover/test/benchmark/test-basic.ts +++ b/packages/popover/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/sp-popover.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/quick-actions/src/spectrum-config.js b/packages/quick-actions/src/spectrum-config.js index a5a6f2108c..5390d26491 100644 --- a/packages/quick-actions/src/spectrum-config.js +++ b/packages/quick-actions/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: 'quickaction', components: [ { @@ -53,3 +53,5 @@ module.exports = { }, ], }; + +export default config; diff --git a/packages/quick-actions/stories/quick-actions.stories.ts b/packages/quick-actions/stories/quick-actions.stories.ts index 6e53d4d904..5eb49bfcb2 100644 --- a/packages/quick-actions/stories/quick-actions.stories.ts +++ b/packages/quick-actions/stories/quick-actions.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-quick-actions.js'; import { diff --git a/packages/quick-actions/test/benchmark/basic-test.ts b/packages/quick-actions/test/benchmark/basic-test.ts index 9e4477659d..20e1d9ef6e 100644 --- a/packages/quick-actions/test/benchmark/basic-test.ts +++ b/packages/quick-actions/test/benchmark/basic-test.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/quick-actions/sp-quick-actions.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/quick-actions/test/quick-actions.test.ts b/packages/quick-actions/test/quick-actions.test.ts index 3c83334805..7044c534c1 100644 --- a/packages/quick-actions/test/quick-actions.test.ts +++ b/packages/quick-actions/test/quick-actions.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-quick-actions.js'; import { QuickActions } from '..'; diff --git a/packages/radio/stories/radio.stories.ts b/packages/radio/stories/radio.stories.ts index d35acbbb85..9650953abf 100644 --- a/packages/radio/stories/radio.stories.ts +++ b/packages/radio/stories/radio.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 { html, TemplateResult } from 'lit-html'; +import { html, TemplateResult } from '@spectrum-web-components/base'; import '../sp-radio.js'; import '../sp-radio-group.js'; diff --git a/packages/radio/test/benchmark/test-basic.ts b/packages/radio/test/benchmark/test-basic.ts index f29152a1c5..b5081caebd 100644 --- a/packages/radio/test/benchmark/test-basic.ts +++ b/packages/radio/test/benchmark/test-basic.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import '@spectrum-web-components/radio/sp-radio-group.js'; import '@spectrum-web-components/radio/sp-radio.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/rule/stories/rule.stories.ts b/packages/rule/stories/rule.stories.ts index 28f10f1dd2..8e6b75a31c 100644 --- a/packages/rule/stories/rule.stories.ts +++ b/packages/rule/stories/rule.stories.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import { html, select } from '@open-wc/demoing-storybook'; -import { TemplateResult } from 'lit-element'; +import { TemplateResult } from '@spectrum-web-components/base'; import '../sp-rule.js'; import './typography-decorator.js'; diff --git a/packages/rule/stories/typography-decorator.ts b/packages/rule/stories/typography-decorator.ts index 3e2868acc4..358dc831f3 100644 --- a/packages/rule/stories/typography-decorator.ts +++ b/packages/rule/stories/typography-decorator.ts @@ -17,7 +17,7 @@ import { TemplateResult, property, customElement, -} from 'lit-element'; +} from '@spectrum-web-components/base'; import styles from '@spectrum-web-components/theme/src/typography.css.js'; diff --git a/packages/rule/test/benchmark/basic-test.ts b/packages/rule/test/benchmark/basic-test.ts index 2f7089dfda..343ce068ea 100644 --- a/packages/rule/test/benchmark/basic-test.ts +++ b/packages/rule/test/benchmark/basic-test.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/rule/sp-rule.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/rule/test/rule.test.ts b/packages/rule/test/rule.test.ts index 0f441d894a..b5a2fb1e48 100644 --- a/packages/rule/test/rule.test.ts +++ b/packages/rule/test/rule.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-rule.js'; import { Rule } from '../'; diff --git a/packages/search/package.json b/packages/search/package.json index 1d828df73c..d52264c154 100644 --- a/packages/search/package.json +++ b/packages/search/package.json @@ -50,12 +50,11 @@ "@spectrum-css/search": "^3.0.0-beta.4" }, "dependencies": { + "@spectrum-web-components/base": "^0.0.1", "@spectrum-web-components/button": "^0.8.4", "@spectrum-web-components/icon": "^0.5.2", "@spectrum-web-components/icons-ui": "^0.2.2", "@spectrum-web-components/textfield": "^0.4.4", - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", "tslib": "^2.0.0" } } diff --git a/packages/search/src/Search.ts b/packages/search/src/Search.ts index 47009163d9..4305e62899 100644 --- a/packages/search/src/Search.ts +++ b/packages/search/src/Search.ts @@ -17,8 +17,8 @@ import { TemplateResult, property, query, -} from 'lit-element'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; + ifDefined, +} from '@spectrum-web-components/base'; import { Textfield } from '@spectrum-web-components/textfield'; import '@spectrum-web-components/button/sp-clear-button.js'; diff --git a/packages/search/stories/search.stories.ts b/packages/search/stories/search.stories.ts index 1d961d45c1..30b54bff7d 100644 --- a/packages/search/stories/search.stories.ts +++ b/packages/search/stories/search.stories.ts @@ -13,7 +13,7 @@ import { html, action } from '@open-wc/demoing-storybook'; import '../sp-search.js'; import { Search } from '../'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-search', diff --git a/packages/search/test/benchmark/test-basic.ts b/packages/search/test/benchmark/test-basic.ts index 4f0be6f543..aafb742019 100644 --- a/packages/search/test/benchmark/test-basic.ts +++ b/packages/search/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/search/sp-search.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/search/test/search.test.ts b/packages/search/test/search.test.ts index 99abd9c010..fa85c70111 100644 --- a/packages/search/test/search.test.ts +++ b/packages/search/test/search.test.ts @@ -12,7 +12,10 @@ governing permissions and limitations under the License. import '../sp-search.js'; import { Search } from '../'; import { litFixture, html, elementUpdated, expect } from '@open-wc/testing'; -import { waitForPredicate } from '../../../test/testing-helpers.js'; +import { + waitForPredicate, + escapeEvent, +} from '../../../test/testing-helpers.js'; import '@spectrum-web-components/shared/src/focus-visible.js'; import { spy } from 'sinon'; @@ -119,15 +122,7 @@ describe('Search', () => { inputSpy.resetHistory(); changeSpy.resetHistory(); - el.focusElement.dispatchEvent( - new KeyboardEvent('keydown', { - bubbles: true, - composed: true, - cancelable: true, - key: 'Escape', - code: 'Escape', - }) - ); + el.focusElement.dispatchEvent(escapeEvent); await elementUpdated(el); diff --git a/packages/shared/README.md b/packages/shared/README.md index 871344b900..ec7a9d57f5 100644 --- a/packages/shared/README.md +++ b/packages/shared/README.md @@ -28,7 +28,7 @@ import { The `Focusable` subclass of `LitElement` adds some helpers method and lifecycle coverage in order to support passing focus to a container element inside of a custom element. The Focusable base class handles tabindex setting into shadowed elements automatically and is based heavily on the aybolit delegate-focus-mixin at https://github.com/web-padawan/aybolit/blob/master/packages/core/src/mixins/delegate-focus-mixin.js ```js -import { Focusable } from '@spectrum-web-components/shared/lib/focusable'; +import { Focusable } from '@spectrum-web-components/shared'; import { html } from 'lit-element'; class FocusableButton extends Focusable { @@ -67,12 +67,47 @@ Use this helper to find an `activeElement` in your component. [Learn more about Mix `download`, `label`, `href`, and `target` properties into your element to allow it to act more like an `HTMLAnchorElement`. -### ObserverSlotText +### ObserveSlotPresence + +When working with styles that are driven by the conditional presence of ``s in a component's shadow DOM, you will need to track whether light DOM that is meant for that slot exists. Use the `ObserveSlotPresence` mixin to target specific light DOM to observe the presence of and trigger `this.requestUpdate()` calls when content fulfilling that selector comes in and out of availability. + +```js +import { ObserveSlotPresence } from '@spectrum-web-components/shared'; +import { LitElement, html } from 'lit-element'; +class ObserveSlotPresenceElement extends ObserveSlotPresence(LitElement, '[slot="conditional-slot"]') { + // translate the mixin properties into locally understandable language + protected get hasConditionalSlotContent() { + return this.slotContentIsPresent; + } + protected render(): TemplateResult { + return html` + + `; + } + protected updated(): void { + console.log(this.slotContentIsPresent); // => true when
+ } +} +customElements.define('observing-slot-presence-element', ObserveSlotPresenceElement); +``` + +### ObserveSlotText When working with ``s and their `slotchange` event, you will have the opportunity to capture when the nodes and/or elements in your element are added or removed. However, if the `textContent` of a text node changes, you will not receive the `slotchange` event because the slot hasn't actually received new nodes and/or elements in the exchange. When working with a lit-html binding `${text}` that means you will not receive a `slotchange` event when the value of `text` goes from `text = ''` to `text = 'something'` or the other way. In these cases the `ObserveSlotText` can be leverages to apply a mutation observe onto your element that tracks `characterData` mutations so that you can resspond as desired. ```js -import { ObserveSlotText } from '@spectrum-web-components/shared/lib/oberve-slot-text'; +import { ObserveSlotText } from '@spectrum-web-components/shared'; import { LitElement, html } from 'lit-element'; class ObserveSlotTextElement extends ObserveSlotText(LitElement, '#observing-slot') { diff --git a/packages/shared/package.json b/packages/shared/package.json index 2952cdca47..c168d3369c 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -44,8 +44,6 @@ "dependencies": { "@spectrum-web-components/base": "^0.0.1", "focus-visible": "^5.0.2", - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", "tslib": "^2.0.0" } } diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts index 14c5efe78b..4e0386b353 100644 --- a/packages/shared/src/index.ts +++ b/packages/shared/src/index.ts @@ -13,4 +13,5 @@ governing permissions and limitations under the License. export * from './focus-visible.js'; export * from './focusable.js'; export * from './get-active-element.js'; +export * from './observe-slot-presence.js'; export * from './observe-slot-text.js'; diff --git a/packages/shared/src/like-anchor.ts b/packages/shared/src/like-anchor.ts index fa242161dd..771be1045c 100644 --- a/packages/shared/src/like-anchor.ts +++ b/packages/shared/src/like-anchor.ts @@ -9,8 +9,13 @@ 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 { UpdatingElement, property, TemplateResult, html } from 'lit-element'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; +import { + UpdatingElement, + property, + TemplateResult, + html, + ifDefined, +} from '@spectrum-web-components/base'; type Constructor> = { // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/packages/shared/src/observe-slot-presence.ts b/packages/shared/src/observe-slot-presence.ts new file mode 100644 index 0000000000..d9674f8a57 --- /dev/null +++ b/packages/shared/src/observe-slot-presence.ts @@ -0,0 +1,64 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ +import { UpdatingElement, property } from '@spectrum-web-components/base'; + +const slotElementObserver = Symbol('slotElementObserver'); +const startObserving = Symbol('startObserving'); + +type Constructor> = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + new (...args: any[]): T; + prototype: T; +}; + +export interface SlotPresenceObservingInterface { + slotContentIsPresent: boolean; + managePresenceObservedSlot(): void; +} + +export function ObserveSlotPresence>( + constructor: T, + lightDomSelector: string +): T & Constructor { + class SlotPresenceObservingElement extends constructor + implements SlotPresenceObservingInterface { + private [slotElementObserver]!: MutationObserver; + + @property({ type: Boolean, attribute: false }) + public slotContentIsPresent = false; + + public managePresenceObservedSlot = (): void => { + this.slotContentIsPresent = !!this.querySelector(lightDomSelector); + }; + + private [startObserving](): void { + const config = { childList: true, subtree: true }; + if (!this[slotElementObserver]) { + this[slotElementObserver] = new MutationObserver( + this.managePresenceObservedSlot + ); + } + this[slotElementObserver].observe(this, config); + this.managePresenceObservedSlot(); + } + + public connectedCallback(): void { + super.connectedCallback(); + this[startObserving](); + } + + public disconnectedCallback(): void { + this[slotElementObserver].disconnect(); + super.disconnectedCallback(); + } + } + return SlotPresenceObservingElement; +} diff --git a/packages/shared/src/observe-slot-text.ts b/packages/shared/src/observe-slot-text.ts index 99a9e4c529..315b2d0048 100644 --- a/packages/shared/src/observe-slot-text.ts +++ b/packages/shared/src/observe-slot-text.ts @@ -9,10 +9,15 @@ 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 { PropertyValues, UpdatingElement } from 'lit-element'; +import { + PropertyValues, + UpdatingElement, + queryAssignedNodes, + property, +} from '@spectrum-web-components/base'; -const observedSlotElement = Symbol('observedSlotElement'); const slotElementObserver = Symbol('slotElementObserver'); +const assignedNodesList = Symbol('assignedNodes'); const startObserving = Symbol('startObserving'); type Constructor> = { @@ -23,49 +28,39 @@ type Constructor> = { export interface SlotTextObservingInterface { slotHasContent: boolean; - manageObservedSlot(): void; + manageTextObservedSlot(): void; } export function ObserveSlotText>( constructor: T, - slotSelector = '#slot' + slotSelector?: string ): T & Constructor { - return class SlotTextObservingElement extends constructor + class SlotTextObservingElement extends constructor implements SlotTextObservingInterface { - private [observedSlotElement]: HTMLSlotElement | undefined; - private [slotElementObserver]: MutationObserver; + @property({ type: Boolean, attribute: false }) public slotHasContent = false; - public manageObservedSlot(): void { - this[observedSlotElement] = (this[observedSlotElement] || - (this.shadowRoot - ? this.shadowRoot.querySelector(slotSelector) - : undefined)) as HTMLSlotElement | undefined; - if (!this[observedSlotElement]) { - return; - } - const slot = this[observedSlotElement] as HTMLSlotElement; - let assignedNodes = slot.assignedNodes - ? slot.assignedNodes() - : [...this.childNodes].filter((node) => { - const el = node as HTMLElement; - return !el.hasAttribute('slot'); - }); - assignedNodes = assignedNodes.filter((node) => { - if ((node as HTMLElement).tagName) { - return true; + @queryAssignedNodes(slotSelector) + private [assignedNodesList]!: NodeListOf; + + public manageTextObservedSlot(): void { + if (!this[assignedNodesList]) return; + const assignedNodes = [...this[assignedNodesList]].filter( + (node) => { + if ((node as HTMLElement).tagName) { + return true; + } + return node.textContent ? node.textContent.trim() : false; } - return node.textContent ? node.textContent.trim() : false; - }); + ); this.slotHasContent = assignedNodes.length > 0; - this.requestUpdate(); } protected firstUpdated(changedProperties: PropertyValues): void { super.firstUpdated(changedProperties); - this.manageObservedSlot(); + this.manageTextObservedSlot(); } private [startObserving](): void { @@ -77,7 +72,7 @@ export function ObserveSlotText>( for (const mutation of mutationsList) { /* istanbul ignore else */ if (mutation.type === 'characterData') { - this.manageObservedSlot(); + this.manageTextObservedSlot(); } } }; @@ -98,5 +93,6 @@ export function ObserveSlotText>( } super.disconnectedCallback(); } - }; + } + return SlotTextObservingElement; } diff --git a/packages/shared/test/focusable.test.ts b/packages/shared/test/focusable.test.ts index ad3cdb7f66..1f6b8a28e1 100644 --- a/packages/shared/test/focusable.test.ts +++ b/packages/shared/test/focusable.test.ts @@ -12,8 +12,7 @@ governing permissions and limitations under the License. import '../src/focusable.js'; import { Focusable } from '../src/focusable.js'; -import { html } from 'lit-element'; -import { fixture, elementUpdated, expect } from '@open-wc/testing'; +import { fixture, elementUpdated, expect, html } from '@open-wc/testing'; describe('Focusable', () => { it('enforces the presense of a `focusElement`', async () => { diff --git a/packages/shared/test/observe-slot-presence.test.ts b/packages/shared/test/observe-slot-presence.test.ts new file mode 100644 index 0000000000..ef13ff35d7 --- /dev/null +++ b/packages/shared/test/observe-slot-presence.test.ts @@ -0,0 +1,45 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { ObserveSlotPresence } from '../src/observe-slot-presence.js'; +import { LitElement, TemplateResult } from '@spectrum-web-components/base'; +import { fixture, elementUpdated, expect, html } from '@open-wc/testing'; + +class ObserverTest extends ObserveSlotPresence( + LitElement, + '[slot="test-slot"]' +) { + protected render(): TemplateResult { + return html` + Test Element + `; + } +} + +customElements.define('observe-presence-test', ObserverTest); + +describe('ObserveSlotPresence', () => { + it('does no management when slot unavailable', async () => { + const el = await fixture( + html` + + ` + ); + await elementUpdated(el); + + expect(el.slotContentIsPresent).to.be.false; + + el.innerHTML = '
'; + await elementUpdated(el); + + expect(el.slotContentIsPresent).to.be.true; + }); +}); diff --git a/packages/shared/test/observe-slot-text.test.ts b/packages/shared/test/observe-slot-text.test.ts index 9c26e9ee5d..718ef4863a 100644 --- a/packages/shared/test/observe-slot-text.test.ts +++ b/packages/shared/test/observe-slot-text.test.ts @@ -11,28 +11,34 @@ governing permissions and limitations under the License. */ import { ObserveSlotText } from '../src/observe-slot-text.js'; -import { LitElement, html, TemplateResult } from 'lit-element'; -import { fixture, elementUpdated, expect } from '@open-wc/testing'; +import { LitElement, TemplateResult } from '@spectrum-web-components/base'; +import { fixture, elementUpdated, expect, html } from '@open-wc/testing'; class ObserverTest extends ObserveSlotText(LitElement) { protected render(): TemplateResult { return html` - Test Element + `; } } -customElements.define('observer-test', ObserverTest); +customElements.define('observe-slot-test', ObserverTest); describe('ObserveSlotText', () => { it('does no management when slot unavailable', async () => { const el = await fixture( html` - + ` ); await elementUpdated(el); expect(el.slotHasContent).to.be.false; + + el.textContent = `hi, i'm some text`; + + await elementUpdated(el); + + expect(el.slotHasContent).to.be.true; }); }); diff --git a/packages/sidenav/src/SidenavItem.ts b/packages/sidenav/src/SidenavItem.ts index c732c394ea..3bccfe8d95 100644 --- a/packages/sidenav/src/SidenavItem.ts +++ b/packages/sidenav/src/SidenavItem.ts @@ -16,10 +16,10 @@ import { TemplateResult, property, PropertyValues, + ifDefined, } from '@spectrum-web-components/base'; import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js'; import { Focusable } from '@spectrum-web-components/shared'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; import { SidenavSelectDetail, SideNav } from './Sidenav.js'; diff --git a/packages/sidenav/stories/sidenav.stories.ts b/packages/sidenav/stories/sidenav.stories.ts index 66478c6eb6..8b8092dc7d 100644 --- a/packages/sidenav/stories/sidenav.stories.ts +++ b/packages/sidenav/stories/sidenav.stories.ts @@ -14,7 +14,7 @@ import { html, action, boolean } from '@open-wc/demoing-storybook'; import '../sp-sidenav.js'; import '../sp-sidenav-item.js'; import '../sp-sidenav-heading.js'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-sidenav', diff --git a/packages/sidenav/test/benchmark/test-basic.ts b/packages/sidenav/test/benchmark/test-basic.ts index acc6dcfd17..d282b49fcf 100644 --- a/packages/sidenav/test/benchmark/test-basic.ts +++ b/packages/sidenav/test/benchmark/test-basic.ts @@ -13,7 +13,7 @@ governing permissions and limitations under the License. import '@spectrum-web-components/sidenav/sp-sidenav.js'; import '@spectrum-web-components/sidenav/sp-sidenav-item.js'; import '@spectrum-web-components/sidenav/sp-sidenav-heading.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/sidenav/test/sidenav.test.ts b/packages/sidenav/test/sidenav.test.ts index b53c5b8681..7cbd1b0baa 100644 --- a/packages/sidenav/test/sidenav.test.ts +++ b/packages/sidenav/test/sidenav.test.ts @@ -26,8 +26,7 @@ import { expect, waitUntil, } from '@open-wc/testing'; -import { TemplateResult } from 'lit-html'; -import { LitElement } from 'lit-element'; +import { TemplateResult, LitElement } from '@spectrum-web-components/base'; describe('Sidenav', () => { it('loads', async () => { diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts index 40f3235830..63f1491edb 100644 --- a/packages/slider/stories/slider.stories.ts +++ b/packages/slider/stories/slider.stories.ts @@ -13,7 +13,7 @@ import { html, action, text, number } from '@open-wc/demoing-storybook'; import '../sp-slider.js'; import { Slider } from '../'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-slider', diff --git a/packages/slider/test/benchmark/test-basic.ts b/packages/slider/test/benchmark/test-basic.ts index ea93dfb1de..0677ff3147 100644 --- a/packages/slider/test/benchmark/test-basic.ts +++ b/packages/slider/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/slider/sp-slider.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/split-button/README.md b/packages/split-button/README.md index 334062a0a4..cf787c9423 100644 --- a/packages/split-button/README.md +++ b/packages/split-button/README.md @@ -1,11 +1,11 @@ ## Description -`sp-splitbutton` delivers a +An `sp-split-button` surfaces an immediately envokable action via it's main button, as well as a list of alternative actions in its toggleable menu overlay. By default, any actions envoked from the overlay will replace the main action button. When leveraging `[type="more"]` the action will be envoked, but the main button will remain the action initally persribed by the implementor. ### Installation -[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/splitbutton?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/splitbutton) -[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/splitbutton?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/splitbutton) +[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/split-button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/split-button) +[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/split-button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/splitbutton) ``` npm install @spectrum-web-components/splitbutton @@ -18,7 +18,7 @@ yarn add @spectrum-web-components/splitbutton ## CTA Split Button ```html - + Split Button @@ -26,8 +26,8 @@ yarn add @spectrum-web-components/splitbutton Option Extended - - + + Split Button @@ -35,13 +35,13 @@ yarn add @spectrum-web-components/splitbutton Option Extended - + ``` ## Primary Split Button ```html - + Split Button @@ -49,8 +49,8 @@ yarn add @spectrum-web-components/splitbutton Option Extended - - + + Split Button @@ -58,13 +58,13 @@ yarn add @spectrum-web-components/splitbutton Option Extended - + ``` ## Secondary Split Button ```html - + Split Button @@ -72,8 +72,8 @@ yarn add @spectrum-web-components/splitbutton Option Extended - - + + Split Button @@ -81,5 +81,74 @@ yarn add @spectrum-web-components/splitbutton Option Extended - + +``` + +## CTA More Split Button + +```html + + Split Button + + + Option 1 + Option Extended + + + + + Split Button + + + Option 1 + Option Extended + + + +``` + +## Primary More Split Button + +```html + + Split Button + + + Option 1 + Option Extended + + + + + Split Button + + + Option 1 + Option Extended + + + +``` + +## Secondary More Split Button + +```html + + Split Button + + + Option 1 + Option Extended + + + + + Split Button + + + Option 1 + Option Extended + + + ``` diff --git a/packages/split-button/package.json b/packages/split-button/package.json index 6ea7dd2705..9e42630a7d 100644 --- a/packages/split-button/package.json +++ b/packages/split-button/package.json @@ -39,20 +39,17 @@ }, "author": "", "license": "Apache-2.0", - "peerDependencies": { - "lit-element": "^2.1.0", - "lit-html": "^1.0.0" - }, "devDependencies": { "@spectrum-css/splitbutton": "^3.0.0-beta.3", - "@spectrum-web-components/menu": "^0.3.0" + "@spectrum-web-components/menu": "^0.3.2" }, "dependencies": { - "@spectrum-web-components/button": "^0.8.3", - "@spectrum-web-components/dropdown": "^0.7.1", - "@spectrum-web-components/icon": "^0.5.1", - "@spectrum-web-components/icons-ui": "^0.2.1", - "@spectrum-web-components/overlay": "^0.5.1", + "@spectrum-web-components/base": "^0.0.1", + "@spectrum-web-components/button": "^0.8.4", + "@spectrum-web-components/dropdown": "^0.7.2", + "@spectrum-web-components/icon": "^0.5.2", + "@spectrum-web-components/icons-ui": "^0.2.2", + "@spectrum-web-components/overlay": "^0.5.2", "tslib": "^2.0.0" } } diff --git a/packages/split-button/src/SplitButton.ts b/packages/split-button/src/SplitButton.ts index 213b104e55..b62538870e 100644 --- a/packages/split-button/src/SplitButton.ts +++ b/packages/split-button/src/SplitButton.ts @@ -17,8 +17,8 @@ import { html, PropertyValues, query, -} from 'lit-element'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; + ifDefined, +} from '@spectrum-web-components/base'; import { ButtonVariants } from '@spectrum-web-components/button'; import { DropdownBase } from '@spectrum-web-components/dropdown'; @@ -94,7 +94,7 @@ export class SplitButton extends DropdownBase { } protected manageShiftTab(): void { - this.addEventListener('keydown', (event) => { + this.addEventListener('keydown', (event: KeyboardEvent) => { const target = event.composedPath()[0]; if ( target && diff --git a/packages/split-button/src/spectrum-config.js b/packages/split-button/src/spectrum-config.js index 58aa156a7a..a568f5b319 100644 --- a/packages/split-button/src/spectrum-config.js +++ b/packages/split-button/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: 'splitbutton', components: [ { @@ -53,3 +53,5 @@ module.exports = { }, ], }; + +export default config; diff --git a/packages/split-button/stories/split-button.stories.ts b/packages/split-button/stories/split-button.stories.ts index c3e36c7563..45f67fa5b9 100644 --- a/packages/split-button/stories/split-button.stories.ts +++ b/packages/split-button/stories/split-button.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, action } from '@open-wc/demoing-storybook'; import '../sp-split-button.js'; diff --git a/packages/split-button/test/benchmark/basic-test.ts b/packages/split-button/test/benchmark/basic-test.ts index 7d4cfd8dc3..7006e3ba1b 100644 --- a/packages/split-button/test/benchmark/basic-test.ts +++ b/packages/split-button/test/benchmark/basic-test.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/split-button/sp-split-button.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/split-button/test/split-button.test.ts b/packages/split-button/test/split-button.test.ts index 0b4e8fa835..07851d14fe 100644 --- a/packages/split-button/test/split-button.test.ts +++ b/packages/split-button/test/split-button.test.ts @@ -17,19 +17,11 @@ import '../sp-split-button.js'; import { SplitButton } from '..'; import { cta, moreCta } from '../stories/split-button.stories.js'; import { MenuItem } from '@spectrum-web-components/menu'; - -const keyboardEvent = (code: string, eventDetails = {}): KeyboardEvent => { - return new KeyboardEvent('keydown', { - ...eventDetails, - bubbles: true, - composed: true, - cancelable: true, - code, - }); -}; -const arrowDownEvent = keyboardEvent('ArrowDown'); -const tabEvent = keyboardEvent('Tab'); -const shiftTabEvent = keyboardEvent('Tab', { shiftKey: true }); +import { + arrowDownEvent, + tabEvent, + shiftTabEvent, +} from '../../../test/testing-helpers.js'; interface TestableSplitButton { isShiftTabbing: boolean; diff --git a/packages/status-light/stories/status-light.stories.ts b/packages/status-light/stories/status-light.stories.ts index c248847ee9..3c68f7cf7d 100644 --- a/packages/status-light/stories/status-light.stories.ts +++ b/packages/status-light/stories/status-light.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 { html, TemplateResult } from 'lit-html'; +import { html, TemplateResult } from '@spectrum-web-components/base'; import '../sp-status-light.js'; diff --git a/packages/switch/stories/switch.stories.ts b/packages/switch/stories/switch.stories.ts index e47fa89959..595918666e 100644 --- a/packages/switch/stories/switch.stories.ts +++ b/packages/switch/stories/switch.stories.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import { html, action } from '@open-wc/demoing-storybook'; import '../sp-switch.js'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-switch', diff --git a/packages/switch/test/benchmark/test-basic.ts b/packages/switch/test/benchmark/test-basic.ts index 7ae16ed57d..6616cc52f9 100644 --- a/packages/switch/test/benchmark/test-basic.ts +++ b/packages/switch/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/switch/sp-switch.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/tabs/src/Tab.ts b/packages/tabs/src/Tab.ts index 08f9d188d7..a2d53d5d0b 100644 --- a/packages/tabs/src/Tab.ts +++ b/packages/tabs/src/Tab.ts @@ -18,7 +18,10 @@ import { SpectrumElement, PropertyValues, } from '@spectrum-web-components/base'; -import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js'; +import { + FocusVisiblePolyfillMixin, + ObserveSlotPresence, +} from '@spectrum-web-components/shared'; import tabItemStyles from './tab.css.js'; @@ -26,13 +29,15 @@ import tabItemStyles from './tab.css.js'; * @slot icon - The icon that appears on the left of the label */ -export class Tab extends FocusVisiblePolyfillMixin(SpectrumElement) { +export class Tab extends FocusVisiblePolyfillMixin( + ObserveSlotPresence(SpectrumElement, '[slot="icon"]') +) { public static get styles(): CSSResultArray { return [tabItemStyles]; } - private get hasIcon(): boolean { - return !!this.querySelector('[slot="icon"]'); + protected get hasIcon(): boolean { + return this.slotContentIsPresent; } @property({ reflect: true }) @@ -64,11 +69,13 @@ export class Tab extends FocusVisiblePolyfillMixin(SpectrumElement) { `; } - protected firstUpdated(): void { + protected firstUpdated(changes: PropertyValues): void { + super.firstUpdated(changes); this.setAttribute('role', 'tab'); } protected updated(changes: PropertyValues): void { + super.updated(changes); if (changes.has('selected')) { this.setAttribute( 'aria-selected', diff --git a/packages/tabs/stories/tabs.stories.ts b/packages/tabs/stories/tabs.stories.ts index 3904e34f59..e3b0afe4c0 100644 --- a/packages/tabs/stories/tabs.stories.ts +++ b/packages/tabs/stories/tabs.stories.ts @@ -14,7 +14,7 @@ import '@spectrum-web-components/icon/sp-icon.js'; import '@spectrum-web-components/icons/sp-icons-medium.js'; import '../sp-tabs.js'; import '../sp-tab.js'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-tabs', diff --git a/packages/tabs/test/benchmark/basic-test.ts b/packages/tabs/test/benchmark/basic-test.ts index 52d7a98702..0f56078155 100644 --- a/packages/tabs/test/benchmark/basic-test.ts +++ b/packages/tabs/test/benchmark/basic-test.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import '@spectrum-web-components/tabs/sp-tabs.js'; import '@spectrum-web-components/tabs/sp-tab.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/tabs/test/tabs.test.ts b/packages/tabs/test/tabs.test.ts index 6565f322b6..3e2f9adc99 100644 --- a/packages/tabs/test/tabs.test.ts +++ b/packages/tabs/test/tabs.test.ts @@ -20,9 +20,8 @@ import { expect, waitUntil, } from '@open-wc/testing'; -import { LitElement } from 'lit-element'; -import { TemplateResult } from 'lit-html'; -import { waitForPredicate } from '../../../test/testing-helpers.js'; +import { LitElement, TemplateResult } from '@spectrum-web-components/base'; +import { waitForPredicate, tabEvent } from '../../../test/testing-helpers.js'; import { enterEvent, spaceEvent, @@ -375,11 +374,7 @@ describe('Tabs', () => { expect(tab2.classList.contains('focus-visible')).to.be.false; expect(tab3.classList.contains('focus-visible')).to.be.false; - tab1.dispatchEvent( - new KeyboardEvent('keydown', { - code: 'Tab', - }) - ); + tab1.dispatchEvent(tabEvent); tab1.focus(); await elementUpdated(tab1); expect(document.activeElement, 'first tab is focused').to.equal(tab1); diff --git a/packages/tags/stories/tags.stories.ts b/packages/tags/stories/tags.stories.ts index fcb901bd6d..62d9f7cc7d 100644 --- a/packages/tags/stories/tags.stories.ts +++ b/packages/tags/stories/tags.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 } from '@open-wc/demoing-storybook'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; import '../sp-tag.js'; import '../sp-tags.js'; diff --git a/packages/tags/test/benchmark/basic-test.ts b/packages/tags/test/benchmark/basic-test.ts index 4bae217558..a84dff8573 100644 --- a/packages/tags/test/benchmark/basic-test.ts +++ b/packages/tags/test/benchmark/basic-test.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import '@spectrum-web-components/tags/sp-tag.js'; import '@spectrum-web-components/tags/sp-tags.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/tags/test/tag.test.ts b/packages/tags/test/tag.test.ts index 1a6fa7bea6..d64aea46af 100644 --- a/packages/tags/test/tag.test.ts +++ b/packages/tags/test/tag.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 { spy } from 'sinon'; import '../sp-tag.js'; diff --git a/packages/tags/test/tags.test.ts b/packages/tags/test/tags.test.ts index 9515fc2d4a..5528058ecb 100644 --- a/packages/tags/test/tags.test.ts +++ b/packages/tags/test/tags.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-tag.js'; import '../sp-tags.js'; diff --git a/packages/textfield/package.json b/packages/textfield/package.json index e19885f1bc..cae14a061f 100644 --- a/packages/textfield/package.json +++ b/packages/textfield/package.json @@ -54,8 +54,6 @@ "@spectrum-web-components/icon": "^0.5.2", "@spectrum-web-components/icons-ui": "^0.2.2", "@spectrum-web-components/shared": "^0.6.0", - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", "tslib": "^2.0.0" } } diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts index bde5842c89..ece3923e55 100644 --- a/packages/textfield/src/Textfield.ts +++ b/packages/textfield/src/Textfield.ts @@ -17,6 +17,8 @@ import { query, TemplateResult, PropertyValues, + nothing, + ifDefined, } from '@spectrum-web-components/base'; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; @@ -29,8 +31,6 @@ import { import textfieldStyles from './textfield.css.js'; import checkmarkSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark-small.css.js'; import alertSmallStyles from '@spectrum-web-components/icon/src/spectrum-icon-alert-small.css.js'; -import { ifDefined } from 'lit-html/directives/if-defined.js'; -import { nothing } from 'lit-html'; export class Textfield extends Focusable { public static get styles(): CSSResultArray { diff --git a/packages/textfield/stories/textarea.stories.ts b/packages/textfield/stories/textarea.stories.ts index 0ea453ac26..c57bedcba1 100644 --- a/packages/textfield/stories/textarea.stories.ts +++ b/packages/textfield/stories/textarea.stories.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import { html } from '@open-wc/demoing-storybook'; import '../sp-textfield.js'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-textfield', diff --git a/packages/textfield/stories/textfield.stories.ts b/packages/textfield/stories/textfield.stories.ts index a310ba6fbf..e1a26c087e 100644 --- a/packages/textfield/stories/textfield.stories.ts +++ b/packages/textfield/stories/textfield.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 } from '@open-wc/demoing-storybook'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; import '../sp-textfield.js'; diff --git a/packages/textfield/test/benchmark/test-basic.ts b/packages/textfield/test/benchmark/test-basic.ts index 31d86fba97..02ae782d9f 100644 --- a/packages/textfield/test/benchmark/test-basic.ts +++ b/packages/textfield/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/textfield/sp-textfield.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/theme/package.json b/packages/theme/package.json index 466f5e73a1..d83f20b6c9 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -67,8 +67,6 @@ "dependencies": { "@spectrum-web-components/base": "^0.0.1", "@spectrum-web-components/styles": "^0.6.0", - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", "tslib": "^2.0.0" } } diff --git a/packages/theme/src/Theme.ts b/packages/theme/src/Theme.ts index dbc9faf2f4..ae69a50a27 100644 --- a/packages/theme/src/Theme.ts +++ b/packages/theme/src/Theme.ts @@ -10,7 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { CSSResult, supportsAdoptingStyleSheets } from 'lit-element'; +import { + CSSResult, + supportsAdoptingStyleSheets, +} from '@spectrum-web-components/base'; import coreStyles from './theme.css.js'; @@ -247,11 +250,11 @@ export class Theme extends HTMLElement implements ThemeKindProvider { private observer!: MutationObserver; - public trackChild(el: HTMLElement): void { + public startManagingContentDirection(el: HTMLElement): void { this.trackedChildren.add(el); } - public untrackChild(el: HTMLElement): void { + public stopManagingContentDirection(el: HTMLElement): void { this.trackedChildren.delete(el); } diff --git a/packages/theme/stories/theme.stories.ts b/packages/theme/stories/theme.stories.ts index b5e452a268..89e63e1f4b 100644 --- a/packages/theme/stories/theme.stories.ts +++ b/packages/theme/stories/theme.stories.ts @@ -16,7 +16,7 @@ import '../src/themes.js'; import '@spectrum-web-components/button/sp-button.js'; import '@spectrum-web-components/switch/sp-switch.js'; import '@spectrum-web-components/slider/sp-slider.js'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; export default { component: 'sp-theme', diff --git a/packages/toast/stories/toast.stories.ts b/packages/toast/stories/toast.stories.ts index 5e5bdc0a81..aea728feae 100644 --- a/packages/toast/stories/toast.stories.ts +++ b/packages/toast/stories/toast.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, select, boolean, text } from '@open-wc/demoing-storybook'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; import '../sp-toast.js'; import { toastVariants } from '../'; diff --git a/packages/toast/test/benchmark/test-basic.ts b/packages/toast/test/benchmark/test-basic.ts index f399f53d72..15a30f4d3f 100644 --- a/packages/toast/test/benchmark/test-basic.ts +++ b/packages/toast/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/toast/sp-toast.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/tooltip/stories/tooltip.stories.ts b/packages/tooltip/stories/tooltip.stories.ts index cb85344d1b..69ba3ebec6 100644 --- a/packages/tooltip/stories/tooltip.stories.ts +++ b/packages/tooltip/stories/tooltip.stories.ts @@ -14,7 +14,7 @@ import { html, boolean, select, text } from '@open-wc/demoing-storybook'; import '../sp-tooltip.js'; import '@spectrum-web-components/icon/sp-icon'; import '@spectrum-web-components/icons/sp-icons-medium.js'; -import { TemplateResult } from 'lit-html'; +import { TemplateResult } from '@spectrum-web-components/base'; const tipOptions = ['top', 'bottom', 'left', 'right']; diff --git a/packages/tooltip/test/benchmark/test-basic.ts b/packages/tooltip/test/benchmark/test-basic.ts index 1f84c5ab61..7dd9c6692c 100644 --- a/packages/tooltip/test/benchmark/test-basic.ts +++ b/packages/tooltip/test/benchmark/test-basic.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/tooltip/sp-tooltip.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/underlay/stories/underlay.stories.ts b/packages/underlay/stories/underlay.stories.ts index 738800a830..47b270da3a 100644 --- a/packages/underlay/stories/underlay.stories.ts +++ b/packages/underlay/stories/underlay.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-underlay.js'; diff --git a/packages/underlay/test/benchmark/basic-test.ts b/packages/underlay/test/benchmark/basic-test.ts index 45e5b25c2e..74ba8059a8 100644 --- a/packages/underlay/test/benchmark/basic-test.ts +++ b/packages/underlay/test/benchmark/basic-test.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/underlay/sp-underlay.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/packages/underlay/test/underlay.test.ts b/packages/underlay/test/underlay.test.ts index d55ad08502..1f07efd36e 100644 --- a/packages/underlay/test/underlay.test.ts +++ b/packages/underlay/test/underlay.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-underlay.js'; import { Underlay } from '../'; diff --git a/projects/example-project-rollup/index.html b/projects/example-project-rollup/index.html index 2eceb4f15d..205b41004e 100644 --- a/projects/example-project-rollup/index.html +++ b/projects/example-project-rollup/index.html @@ -10,7 +10,7 @@ example-app - + @@ -45,28 +45,28 @@ - + Select a Country with a very long label, too long in fact - - + + Deselect - + Select Inverse - + Feather... - + Select and Mask... - + Save Selection - + Make Work Path diff --git a/projects/example-project-webpack/package.json b/projects/example-project-webpack/package.json index 0be395a602..d9ecf8949b 100644 --- a/projects/example-project-webpack/package.json +++ b/projects/example-project-webpack/package.json @@ -7,7 +7,7 @@ "scripts": { "build": "webpack", "build:prod": "webpack --env.NODE_ENV=production --optimize-minimize", - "serve": "yarn build:prod && http-server dist" + "serve": "webpack-dev-server" }, "author": "", "license": "Apache-2.0", @@ -16,7 +16,7 @@ "@spectrum-web-components/dropdown": "^0.7.2", "@spectrum-web-components/menu": "^0.3.2", "@spectrum-web-components/styles": "^0.6.0", - "lit-element": "^2.2.1", + "lit-element": "^2.4.0", "lit-html": "^1.0.0" }, "devDependencies": { diff --git a/projects/example-project-webpack/webpack.config.js b/projects/example-project-webpack/webpack.config.js index 6a06056a63..7796bfad09 100755 --- a/projects/example-project-webpack/webpack.config.js +++ b/projects/example-project-webpack/webpack.config.js @@ -26,7 +26,7 @@ const IS_DEV = ENV === 'development'; const IS_DEV_SERVER = process.argv.find((arg) => arg.includes('webpack-dev-server') ); -const OUTPUT_PATH = IS_DEV_SERVER ? resolve('src') : resolve('dist'); +const OUTPUT_PATH = IS_DEV_SERVER ? resolve('dist') : resolve('dist'); /** * === Copy static files configuration diff --git a/projects/templates/plop-templates/benchmark.ts.hbs b/projects/templates/plop-templates/benchmark.ts.hbs index 895e3caab1..45f50cd7bf 100644 --- a/projects/templates/plop-templates/benchmark.ts.hbs +++ b/projects/templates/plop-templates/benchmark.ts.hbs @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import '@spectrum-web-components/{{ name }}/{{> tagnamePartial }}.js'; -import { html } from 'lit-html'; +import { html } from '@spectrum-web-components/base'; import { measureFixtureCreation } from '../../../../test/benchmark/helpers'; measureFixtureCreation(html` diff --git a/projects/templates/plop-templates/package.json.hbs b/projects/templates/plop-templates/package.json.hbs index 08bdeb900d..967e62482c 100644 --- a/projects/templates/plop-templates/package.json.hbs +++ b/projects/templates/plop-templates/package.json.hbs @@ -50,8 +50,7 @@ "@spectrum-css/{{ name }}": "^2.0.0" }, "dependencies": { - "lit-element": "^2.1.0", - "lit-html": "^1.0.0", + "@spectrum-web-components/base": "^0.0.1", "tslib": "^2.0.0" } } diff --git a/projects/templates/plop-templates/stories.ts.hbs b/projects/templates/plop-templates/stories.ts.hbs index 0b39c9819a..a3b51bdd1d 100644 --- a/projects/templates/plop-templates/stories.ts.hbs +++ b/projects/templates/plop-templates/stories.ts.hbs @@ -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 '../{{> tagnamePartial }}.js'; diff --git a/scripts/css-processing.js b/scripts/css-processing.js index 5729aaa32e..6c93faa02d 100644 --- a/scripts/css-processing.js +++ b/scripts/css-processing.js @@ -37,7 +37,7 @@ const postCSSPlugins = (resourcePath) => { const wrapCSSResult = (content) => { return stripIndent` - import { css } from 'lit-element'; + import { css } from '@spectrum-web-components/base'; const styles = css\` ${content} \`; diff --git a/scripts/process-icons.js b/scripts/process-icons.js index 3e707979e8..328ba9f45d 100644 --- a/scripts/process-icons.js +++ b/scripts/process-icons.js @@ -74,7 +74,7 @@ Object.keys(scales).forEach((scaleKey) => { fs.writeSync(outputFd, license); fs.writeSync( outputFd, - 'import { svg } from \'lit-element\'; export default svg`' + 'import { svg } from \'@spectrum-web-components/base\'; export default svg`' ); fs.readdirSync(srcPath).forEach((iconFile) => { diff --git a/test/testing-helpers.ts b/test/testing-helpers.ts index 51d0de588a..b680de6fc2 100644 --- a/test/testing-helpers.ts +++ b/test/testing-helpers.ts @@ -45,6 +45,7 @@ const keyboardEvent = (code: string, eventDetails = {}): KeyboardEvent => { }; export const shiftTabEvent = keyboardEvent('Tab', { shiftKey: true }); export const enterEvent = keyboardEvent('Enter'); +export const escapeEvent = keyboardEvent('Escape'); export const arrowRightEvent = keyboardEvent('ArrowRight'); export const arrowLeftEvent = keyboardEvent('ArrowLeft'); export const arrowUpEvent = keyboardEvent('ArrowUp'); diff --git a/yarn.lock b/yarn.lock index 658e210338..b70eb28612 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13263,13 +13263,20 @@ lit-analyzer@^1.2.0: vscode-html-languageservice "3.1.0" web-component-analyzer "~1.1.1" -lit-element@^2.1.0, lit-element@^2.2.1, lit-element@^2.3.1: +lit-element@^2.2.1, lit-element@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.3.1.tgz#73343b978fa1e73d60526c6bb6ad60f53a16c343" integrity sha512-tOcUAmeO3BzwiQ7FGWdsshNvC0HVHcTFYw/TLIImmKwXYoV0E7zCBASa8IJ7DiP4cen/Yoj454gS0qqTnIGsFA== dependencies: lit-html "^1.1.1" +lit-element@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.4.0.tgz#b22607a037a8fc08f5a80736dddf7f3f5d401452" + integrity sha512-pBGLglxyhq/Prk2H91nA0KByq/hx/wssJBQFiYqXhGDvEnY31PRGYf1RglVzyLeRysu0IHm2K0P196uLLWmwFg== + dependencies: + lit-html "^1.1.1" + lit-html@^1.0.0, lit-html@^1.1.1, lit-html@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.2.1.tgz#1fb933dc1e2ddc095f60b8086277d4fcd9d62cc8"