Merge branch 'v1/contrib' into feature/uui-block-type

.eslintrc.js

@@ -27,6 +27,15 @@ module.exports = {
         'lit/prefer-nothing': 'error',
         'local-rules/uui-class-prefix': 'warn',
         'local-rules/prefer-static-styles-last': 'warn',
+        'no-restricted-syntax': [
+          'warn',
+          {
+            message:
+              'Elements should not be defined with customElement, use defineElement instead.',
+            selector:
+              'ClassDeclaration > Decorator[expression.callee.name="customElement"]',
+          },
+        ],
       },
       parserOptions: {
         project: './tsconfig.json',

package.json

@@ -128,7 +128,7 @@
     "tsc-files": "1.1.4",
     "turbo": "1.10.15",
     "typescript": "5.2.2",
-    "vite": "5.0.4",
+    "vite": "5.0.5",
     "vite-tsconfig-paths": "4.2.0",
     "web-component-analyzer": "1.1.7"
   },

packages/uui-box/lib/uui-box.story.ts

@@ -32,8 +32,8 @@ export default {
 const Template: Story = props => {
   return html`
     <uui-box
-      .headline=${props.headline}
-      .headlineVariant=${props.headlineVariant}>
+      headline="${props.headline}"
+      headline-variant="${props.headlineVariant}">
       <p>Some content of this box, appended in the default slot.</p>
       <p>The headline is currently rendered as a ${props.headlineVariant}.</p>
     </uui-box>

packages/uui-combobox/lib/uui-combobox-async-example.ts

@@ -1,5 +1,6 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
 
 interface Fruit {
   name: string;
@@ -26,7 +27,7 @@ const data: Array<Fruit> = [
   { name: 'Lime', value: 'lime' },
 ];
 
-@customElement('uui-combobox-async-example')
+@defineElement('uui-combobox-async-example')
 export class UUIComboboxAsyncExampleElement extends LitElement {
   @state()
   _options: any[] = [];

packages/uui-combobox/lib/uui-combobox-async-options-example.ts

@@ -1,5 +1,6 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 
 interface Fruit {
   name: string;
@@ -30,7 +31,7 @@ async function getFruits() {
   return Promise.resolve(data);
 }
 
-@customElement('uui-combobox-async-options-example')
+@defineElement('uui-combobox-async-options-example')
 export class UUIComboboxAsyncOptionsExampleElement extends LitElement {
   @state()
   _options: any[] = [];

packages/uui-modal/lib/modal-example.element.ts

@@ -1,10 +1,11 @@
 import { LitElement, css, html, TemplateResult } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
 import './uui-modal-container';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { UUIModalElement } from './uui-modal.element';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
-@customElement('modal-example')
+@defineElement('modal-example')
 export class ModalExampleElement extends LitElement {
   @state()
   private _modals: TemplateResult<1>[] = [];

packages/uui-modal/lib/uui-modal-container.ts

@@ -1,8 +1,10 @@
 import { LitElement, PropertyValueMap, css, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { UUIModalSidebarElement } from './uui-modal-sidebar.element';
 import { UUIModalElement } from './uui-modal.element';
-@customElement('uui-modal-container')
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+
+@defineElement('uui-modal-container')
 export class UUIModalContainerElement extends LitElement {
   @query('slot')
   modalSlot?: HTMLSlotElement;

packages/uui-modal/lib/uui-modal-dialog.element.ts

@@ -1,8 +1,8 @@
 import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import { UUIModalElement } from './uui-modal.element';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
-@customElement('uui-modal-dialog')
+@defineElement('uui-modal-dialog')
 export class UUIModalDialogElement extends UUIModalElement {
   render() {
     return html`

packages/uui-modal/lib/uui-modal-sidebar.element.ts

@@ -1,10 +1,11 @@
 import { css, html, PropertyValueMap } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { UUIModalElement } from './uui-modal.element';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
 export type UUIModalSidebarSize = 'small' | 'medium' | 'large' | 'full';
 
-@customElement('uui-modal-sidebar')
+@defineElement('uui-modal-sidebar')
 export class UUIModalSidebarElement extends UUIModalElement {
   /**
    * @attr

packages/uui-table/lib/uui-table-advanced-example.ts

@@ -8,8 +8,9 @@ import '@umbraco-ui/uui-tag/lib';
 
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
 interface TableColumn {
   name: string;
@@ -25,7 +26,7 @@ interface TableItem {
   newsletter: boolean;
 }
 
-@customElement('uui-table-with-selection-example')
+@defineElement('uui-table-with-selection-example')
 export class UUITableWithSelectionExampleElement extends LitElement {
   @state()
   private _columns: Array<TableColumn> = [];