From 0f4bb2b24b078b10461afc30e2903628ae465f45 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 24 May 2021 16:07:06 -0400
Subject: [PATCH 1/2] fix comment

---
 src/components/qr-code/qr-code.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/qr-code/qr-code.ts b/src/components/qr-code/qr-code.ts
index 64b9f552c..ab1555939 100644
--- a/src/components/qr-code/qr-code.ts
+++ b/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() {

From 4263899bc00481447748e2aca27b4dbee0fb9937 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 24 May 2021 16:07:41 -0400
Subject: [PATCH 2/2] parse decorator for attribute

---
 docs/assets/plugins/metadata/metadata.js | 11 +++--------
 scripts/make-metadata.cjs                | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index 17c5e2130..b632fe1ee 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/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>`
                       : ''
diff --git a/scripts/make-metadata.cjs b/scripts/make-metadata.cjs
index ea97d425e..5112efb90 100644
--- a/scripts/make-metadata.cjs
+++ b/scripts/make-metadata.cjs
@@ -116,9 +116,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,