Merge branch 'next' into animation-rework

docs/assets/plugins/metadata/metadata.js

@@ -1,10 +1,6 @@
 (() => {
   let metadataStore;
 
-  function getAttrName(propName) {
-    return propName.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).replace(/^-/, '');
-  }
-
   function createPropsTable(props) {
     const table = document.createElement('table');
     table.innerHTML = `
@@ -19,18 +15,17 @@
       <tbody>
         ${props
           .map(prop => {
-            const attr = getAttrName(prop.name);
             return `
               <tr>
                 <td>
                   <code>${escapeHtml(prop.name)}</code>
                   ${
-                    prop.name !== attr
+                    prop.attribute && prop.name !== prop.attribute
                       ? `
                         <br>
                         <small>
-                          <sl-tooltip content="Use this attribute in your HTML">
-                            <code class="attribute-tooltip">${escapeHtml(attr)}</code>
+                          <sl-tooltip content="This is the corresponding HTML attribute">
+                            <code class="attribute-tooltip">${escapeHtml(prop.attribute)}</code>
                           </sl-tooltip>
                         </small>`
                       : ''

scripts/make-metadata.cjs

@@ -120,9 +120,29 @@ components.map(async component => {
 
   props.map(prop => {
     const { type, values } = getTypeInfo(prop);
+    let attribute;
+
+    // Look for an attribute in the @property decorator
+    if (Array.isArray(prop.decorators)) {
+      const decorator = prop.decorators.find(d => d.name === 'property');
+      if (decorator) {
+        try {
+          // We trust TypeDoc <3
+          const options = eval(`(${decorator.arguments.options})`);
+
+          // If an attribute is specified, it will always be a string
+          if (options && typeof options.attribute === 'string') {
+            attribute = options.attribute;
+          }
+        } catch (err) {
+          console.log(err);
+        }
+      }
+    }
 
     api.props.push({
       name: prop.name,
+      attribute: attribute,
       description: prop.comment.shortText,
       type,
       values,

src/components/qr-code/qr-code.ts

@@ -35,7 +35,7 @@ export default class SlQrCode extends LitElement {
   /** The edge radius of each module. Must be between 0 and 0.5. */
   @property({ type: Number }) radius = 0;
 
-  /* The level of error correction to use. */
+  /** The level of error correction to use. */
   @property({ attribute: 'error-correction' }) errorCorrection: 'L' | 'M' | 'Q' | 'H' = 'H';
 
   firstUpdated() {