From f7da1d2c467a3b911cc92ec8344fbb0bd36c2896 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 9 Jun 2023 20:27:37 +0800
Subject: [PATCH] Merge pull request #19183 from
 sonntag-philipp/sonntag-philipp/issues-19167-18858-custom-elements-manifest-update

Web-components: Fix custom-elements order of property application
(cherry picked from commit abfc677253bcd7ddb05c3a05ba34486dfcc974fe)
---
 .../lit-element-demo-card/properties.snapshot |  6 ++--
 .../src/docs/custom-elements.ts               | 29 +++++++++++++------
 .../template/stories/custom-elements.json     |  4 +--
 .../template/stories/demo-wc-card.stories.js  | 24 ++++++++++-----
 .../stories/demo-wc-card/DemoWcCard.js        |  2 +-
 5 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot
index 127bc8704a4a..7f1b194d16b6 100644
--- a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot
+++ b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot
@@ -84,7 +84,7 @@ Object {
       },
     },
     "type": Object {
-      "name": "void",
+      "name": "boolean",
     },
   },
   "backSide": Object {
@@ -126,7 +126,7 @@ Object {
     "name": "header",
     "required": false,
     "table": Object {
-      "category": "properties",
+      "category": "attributes",
       "defaultValue": Object {
         "summary": "\\"Your Message\\"",
       },
@@ -152,7 +152,7 @@ Object {
     "name": "rows",
     "required": false,
     "table": Object {
-      "category": "properties",
+      "category": "attributes",
       "defaultValue": Object {
         "summary": "[]",
       },
diff --git a/code/renderers/web-components/src/docs/custom-elements.ts b/code/renderers/web-components/src/docs/custom-elements.ts
index 66743bfdd7a8..c60d23bfe1ea 100644
--- a/code/renderers/web-components/src/docs/custom-elements.ts
+++ b/code/renderers/web-components/src/docs/custom-elements.ts
@@ -39,8 +39,19 @@ interface Declaration {
 }
 
 function mapItem(item: TagItem, category: string): InputType {
-  const type =
-    category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };
+  let type;
+  switch (category) {
+    case 'attributes':
+    case 'properties':
+      type = { name: item.type?.text || item.type };
+      break;
+    case 'slots':
+      type = { name: 'string' };
+      break;
+    default:
+      type = { name: 'void' };
+      break;
+  }
 
   return {
     name: item.name,
@@ -137,13 +148,13 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
   const metaData = getMetaData(tagName, customElements);
   return (
     metaData && {
-      ...mapData(metaData.attributes, 'attributes'),
-      ...mapData(metaData.members, 'properties'),
-      ...mapData(metaData.properties, 'properties'),
-      ...mapData(metaData.events, 'events'),
-      ...mapData(metaData.slots, 'slots'),
-      ...mapData(metaData.cssProperties, 'css custom properties'),
-      ...mapData(metaData.cssParts, 'css shadow parts'),
+      ...mapData(metaData.members ?? [], 'properties'),
+      ...mapData(metaData.properties ?? [], 'properties'),
+      ...mapData(metaData.attributes ?? [], 'attributes'),
+      ...mapData(metaData.events ?? [], 'events'),
+      ...mapData(metaData.slots ?? [], 'slots'),
+      ...mapData(metaData.cssProperties ?? [], 'css custom properties'),
+      ...mapData(metaData.cssParts ?? [], 'css shadow parts'),
     }
   );
 };
diff --git a/code/renderers/web-components/template/stories/custom-elements.json b/code/renderers/web-components/template/stories/custom-elements.json
index 7389e1bab99b..6bdc06ce7a23 100644
--- a/code/renderers/web-components/template/stories/custom-elements.json
+++ b/code/renderers/web-components/template/stories/custom-elements.json
@@ -51,8 +51,8 @@
           ],
           "slots": [
             {
-              "description": "This is an unnamed slot (the default slot)",
-              "name": ""
+              "name": "prefix",
+              "description": "Label prefix"
             }
           ],
           "members": [
diff --git a/code/renderers/web-components/template/stories/demo-wc-card.stories.js b/code/renderers/web-components/template/stories/demo-wc-card.stories.js
index 0e5dd11f3e68..193a961c6bce 100644
--- a/code/renderers/web-components/template/stories/demo-wc-card.stories.js
+++ b/code/renderers/web-components/template/stories/demo-wc-card.stories.js
@@ -3,14 +3,22 @@ import './demo-wc-card';
 
 export default {
   component: 'demo-wc-card',
+  render: ({ backSide, header, rows, prefix }) =>
+    html`
+      <demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
+        ><span slot="prefix">${prefix}</span>A simple card</demo-wc-card
+      >
+    `,
 };
 
-const Template = ({ backSide, header, rows }) =>
-  html`
-    <demo-wc-card .backSide="${backSide}" .header="${header}" .rows="${rows}"
-      >A simple card</demo-wc-card
-    >
-  `;
+export const Front = {
+  args: { backSide: false, header: undefined, rows: [] },
+};
+
+export const Back = {
+  args: { backSide: true, header: undefined, rows: [] },
+};
 
-export const Front = Template.bind({});
-Front.args = { backSide: false, header: undefined, rows: [] };
+export const Prefix = {
+  args: { backSide: false, prefix: 'prefix:', header: 'my header', rows: [] },
+};
diff --git a/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js b/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
index 89e29d06fc92..4c8cee3a7c6c 100644
--- a/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
+++ b/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js
@@ -69,7 +69,7 @@ export class DemoWcCard extends LitElement {
         </div>
       </div>
       <div id="back" part="back">
-        <div class="header">${this.header}</div>
+        <div class="header"><slot name="prefix"></slot> ${this.header}</div>
 
         <div class="content">
           ${this.rows.length === 0