chore: use dev-build

core/package-lock.json

@@ -9,7 +9,7 @@
       "version": "8.2.4",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.19.1",
+        "@stencil/core": "4.19.1-dev.1719856735.b9aab06",
         "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       },
@@ -1824,9 +1824,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
-      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw==",
+      "version": "4.19.1-dev.1719856735.b9aab06",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1-dev.1719856735.b9aab06.tgz",
+      "integrity": "sha512-UgIkmuZRx3BJgXvheluvPhAT7/qwuxPrTVCkdkylBvl5eCIDW742OMyiLcXelqKqdqUFzjh/T7IgVe7dLz45Mg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -5417,6 +5417,18 @@
         "@stencil/core": "^4.0.3"
       }
     },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
+      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -11583,9 +11595,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
-      "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw=="
+      "version": "4.19.1-dev.1719856735.b9aab06",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1-dev.1719856735.b9aab06.tgz",
+      "integrity": "sha512-UgIkmuZRx3BJgXvheluvPhAT7/qwuxPrTVCkdkylBvl5eCIDW742OMyiLcXelqKqdqUFzjh/T7IgVe7dLz45Mg=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -14189,6 +14201,13 @@
       "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
         "@stencil/core": "^4.0.3"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "4.19.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.19.1.tgz",
+          "integrity": "sha512-fjSBctHrobeSL2+XcuX7GVk/eaUhZ/lvIu21RJmzHAPcNyueuSAEv7J/Isn4UlYNk70o+yOK72H0FTlNkUibvw=="
+        }
       }
     },
     "is-alphabetical": {

core/package.json

@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.19.1",
+    "@stencil/core": "4.19.1-dev.1719856735.b9aab06",
     "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },

core/scripts/testing/createPlayground.js

@@ -1,74 +0,0 @@
-export async function createPlayground(componentTag, propDefinitions, innerContent = '') {
-  const playground = document.createElement('div');
-  const form = document.createElement('form');
-  const preview = document.createElement('div');
-  preview.classList.add('preview');
-
-  function renderComponent(props) {
-    const component = document.createElement(componentTag);
-    Object.keys(props).forEach(propName => {
-      if (props[propName] !== undefined && props[propName] !== '') {
-        component.setAttribute(propName, props[propName]);
-      }
-    });
-
-    // Set inner HTML content if provided
-    if (innerContent) {
-      component.innerHTML = innerContent;
-    }
-
-    preview.innerHTML = '';
-    preview.appendChild(component);
-  }
-
-  propDefinitions.forEach(prop => {
-    const label = document.createElement('label');
-    const labelText = document.createElement('span');
-    labelText.textContent = `${prop.name}: `;
-
-    const input = document.createElement('input');
-    input.type = prop.type === 'boolean' ? 'checkbox' : 'text';
-    input.name = prop.name;
-    input.value = prop.defaultValue || '';
-
-    if (prop.type === 'boolean') {
-      input.checked = prop.defaultValue === 'true';
-    }
-
-    input.addEventListener('input', () => {
-      const formData = new FormData(form);
-      const props = {};
-
-      formData.forEach((value, key) => {
-        const field = form.elements[key];
-
-        if (field.type === 'checkbox') {
-          props[key] = field.checked;
-        } else {
-          props[key] = value;
-        }
-      });
-
-      renderComponent(props);
-    });
-
-    label.appendChild(labelText);
-    label.appendChild(input);
-    form.appendChild(label);
-    form.appendChild(document.createElement('br'));
-  });
-
-  playground.appendChild(preview);
-  // add a divider
-  playground.appendChild(document.createElement('hr'));
-  playground.appendChild(form);
-
-  // Initial render with default props
-  const defaultProps = Object.fromEntries(
-    propDefinitions.map(prop => [prop.name, prop.defaultValue || ''])
-  );
-
-  renderComponent(defaultProps);
-
-  return playground;
-}

core/src/components/chip/test/basic/index.html

@@ -12,21 +12,6 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .preview {
-        min-height: 50px;
-      }
-      label {
-        display: flex;
-        align-items: center;
-      }
-
-      label span {
-        min-width: 100px;
-        text-align: left;
-        margin-inline-end: 10px;
-      }
-    </style>
   </head>
 
   <body>
@@ -36,34 +21,86 @@
           <ion-title>Chip - Basic</ion-title>
         </ion-toolbar>
       </ion-header>
+
       <ion-content class="ion-padding" id="content" style="text-align: center">
-        <div id="playground"></div>
+        <h2>Basic Chips</h2>
+        <ion-chip>
+          <ion-label>Default</ion-label>
+        </ion-chip>
+        <ion-chip style="border-radius: 4px">
+          <ion-label>Border Radius</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>With Icon</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+          <ion-label>With Avatar</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+          <ion-label>With Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+
+        <h2>Color Chips</h2>
+        <ion-chip color="primary">
+          <ion-label>Primary</ion-label>
+        </ion-chip>
+        <ion-chip color="danger">
+          <ion-label>Danger</ion-label>
+        </ion-chip>
+        <ion-chip color="tertiary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Tertiary with Icon</ion-label>
+        </ion-chip>
+        <ion-chip color="primary">
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+          <ion-label>Primary with Avatar</ion-label>
+        </ion-chip>
+        <ion-chip color="success">
+          <ion-label>Success with Icon</ion-label>
+          <ion-icon name="calendar"></ion-icon>
+        </ion-chip>
+
+        <h2>Outline Chips</h2>
+        <ion-chip outline>
+          <ion-label>Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="danger">
+          <ion-label>Danger Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="secondary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Secondary Outline with Icon</ion-label>
+        </ion-chip>
+        <ion-chip outline color="primary">
+          <ion-label>Primary Outline with Avatar</ion-label>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+        </ion-chip>
+        <ion-chip outline>
+          <ion-icon name="git-pull-request"></ion-icon>
+          <ion-label>Outline with Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
       </ion-content>
     </ion-app>
-    <script type="module">
-      import { createPlayground } from '../../../../../scripts/testing/createPlayground.js';
-
-      const chipProps = [
-        {
-          name: 'color',
-          type: 'string',
-          description:
-            'The color to use from your application\'s color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".',
-          defaultValue: 'primary',
-        },
-        {
-          name: 'outline',
-          type: 'boolean',
-          description: 'If true, the chip will have a basic style.',
-          defaultValue: 'false',
-        },
-      ];
-
-      const innerContent = '<span>Hi</span>';
-
-      createPlayground('ion-chip', chipProps, innerContent).then((playground) => {
-        document.getElementById('playground').appendChild(playground);
-      });
-    </script>
   </body>
 </html>