feat: warn on element redefinitions, point to resolution docs

lerna.json

@@ -1,6 +1,6 @@
 {
  "packages": ["packages/*", "projects/*", "tools/*"],
- "version": "independent",
+ "version": "0.30.0",
  "granularPathspec": false,
  "npmClient": "yarn",
  "useWorkspaces": true,

packages/accordion/sp-accordion-item.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { AccordionItem } from './src/AccordionItem.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-accordion-item', AccordionItem);
+defineElement('sp-accordion-item', AccordionItem);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/accordion/sp-accordion.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Accordion } from './src/Accordion.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-accordion', Accordion);
+defineElement('sp-accordion', Accordion);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/action-bar/sp-action-bar.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ActionBar } from './src/ActionBar.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-action-bar', ActionBar);
+defineElement('sp-action-bar', ActionBar);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/action-button/sp-action-button.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ActionButton } from './src/ActionButton.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-action-button', ActionButton);
+defineElement('sp-action-button', ActionButton);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/action-group/sp-action-group.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ActionGroup } from './src/ActionGroup.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-action-group', ActionGroup);
+defineElement('sp-action-group', ActionGroup);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/action-menu/sp-action-menu.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ActionMenu } from './src/ActionMenu.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-action-menu', ActionMenu);
+defineElement('sp-action-menu', ActionMenu);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/asset/sp-asset.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { Asset } from './src/Asset.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-asset', Asset);
+defineElement('sp-asset', Asset);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/avatar/sp-avatar.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Avatar } from './src/Avatar.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-avatar', Avatar);
+defineElement('sp-avatar', Avatar);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/badge/sp-badge.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { Badge } from './src/Badge.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-badge', Badge);
+defineElement('sp-badge', Badge);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/banner/sp-banner.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Banner } from './src/Banner.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-banner', Banner);
+defineElement('sp-banner', Banner);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/button-group/sp-button-group.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { ButtonGroup } from './src/ButtonGroup.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-button-group', ButtonGroup);
+defineElement('sp-button-group', ButtonGroup);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/button/sp-button.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Button } from './src/Button.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-button', Button);
+defineElement('sp-button', Button);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/button/sp-clear-button.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { ClearButton } from './src/ClearButton.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-clear-button', ClearButton);
+defineElement('sp-clear-button', ClearButton);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/button/sp-close-button.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { CloseButton } from './src/CloseButton.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-close-button', CloseButton);
+defineElement('sp-close-button', CloseButton);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/card/sp-card.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { Card } from './src/Card.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-card', Card);
+defineElement('sp-card', Card);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/checkbox/sp-checkbox.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Checkbox } from './src/Checkbox.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-checkbox', Checkbox);
+defineElement('sp-checkbox', Checkbox);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/coachmark/sp-coachmark.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Coachmark } from './src/Coachmark.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-coachmark', Coachmark);
+defineElement('sp-coachmark', Coachmark);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/color-area/sp-color-area.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ColorArea } from './src/ColorArea.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-color-area', ColorArea);
+defineElement('sp-color-area', ColorArea);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/color-handle/sp-color-handle.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ColorHandle } from './src/ColorHandle.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-color-handle', ColorHandle);
+defineElement('sp-color-handle', ColorHandle);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/color-loupe/sp-color-loupe.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ColorLoupe } from './src/ColorLoupe.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-color-loupe', ColorLoupe);
+defineElement('sp-color-loupe', ColorLoupe);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/color-slider/sp-color-slider.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ColorSlider } from './src/ColorSlider.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-color-slider', ColorSlider);
+defineElement('sp-color-slider', ColorSlider);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/color-wheel/sp-color-wheel.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ColorWheel } from './src/ColorWheel.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-color-wheel', ColorWheel);
+defineElement('sp-color-wheel', ColorWheel);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/dialog/sp-dialog-base.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { DialogBase } from './src/DialogBase.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-dialog-base', DialogBase);
+defineElement('sp-dialog-base', DialogBase);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/dialog/sp-dialog-wrapper.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { DialogWrapper } from './src/DialogWrapper.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-dialog-wrapper', DialogWrapper);
+defineElement('sp-dialog-wrapper', DialogWrapper);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/dialog/sp-dialog.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Dialog } from './src/Dialog.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-dialog', Dialog);
+defineElement('sp-dialog', Dialog);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/divider/sp-divider.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { Divider } from './src/Divider.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-divider', Divider);
+defineElement('sp-divider', Divider);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/dropzone/sp-dropzone.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Dropzone } from './src/Dropzone.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-dropzone', Dropzone);
+defineElement('sp-dropzone', Dropzone);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/field-group/sp-field-group.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { FieldGroup } from './src/FieldGroup.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-field-group', FieldGroup);
+defineElement('sp-field-group', FieldGroup);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/field-label/sp-field-label.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { FieldLabel } from './src/FieldLabel.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-field-label', FieldLabel);
+defineElement('sp-field-label', FieldLabel);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/help-text/sp-help-text.ts

@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { HelpText } from './src/HelpText.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-help-text', HelpText);
+defineElement('sp-help-text', HelpText);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/icon/sp-icon.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Icon } from './src/Icon.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-icon', Icon);
+defineElement('sp-icon', Icon);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/icons-ui/bin/build.js

@@ -224,8 +224,9 @@ glob(`${rootDir}/node_modules/${iconsPath}/**.svg`, (error, icons) => {
  ${disclaimer}
 
  import { Icon${ComponentName} } from '../src/elements/Icon${id}.js';
+ import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
- customElements.define('${iconElementName}', Icon${ComponentName});
+ defineElement('${iconElementName}', Icon${ComponentName});
 
  declare global {
  interface HTMLElementTagNameMap {

packages/icons-workflow/bin/build.js

@@ -229,8 +229,9 @@ glob(`${rootDir}/node_modules/${iconsPath}/**.svg`, (error, icons) => {
  ${disclaimer}
 
  import { Icon${ComponentName} } from '../src/elements/Icon${id}.js';
+ import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
- customElements.define('${iconElementName}', Icon${ComponentName});
+ defineElement('${iconElementName}', Icon${ComponentName});
 
  declare global {
  interface HTMLElementTagNameMap {

packages/icons/sp-icons-large.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { IconsLarge } from './src/IconsLarge.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-icons-large', IconsLarge);
+defineElement('sp-icons-large', IconsLarge);
 
 declare global {
  interface HTMLElementTagNameMap {

packages/icons/sp-icons-medium.ts

@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { IconsMedium } from './src/IconsMedium.js';
+import { defineElement } from '@spectrum-web-components/base/src/define-element.js';
 
-customElements.define('sp-icons-medium', IconsMedium);
+defineElement('sp-icons-medium', IconsMedium);
 
 declare global {
  interface HTMLElementTagNameMap {