add scss test

core/src/components/chip/chip.ios.scss

@@ -1,6 +1,8 @@
-@import "./chip";
+@use "./chip" as b;
 @import "./chip.vars";
 
+@include b.base;
+
 :host {
   /**
    * Main content should be prioritized on iOS,

core/src/components/chip/chip.md.scss

@@ -1,6 +1,7 @@
-@import "./chip";
 @import "./chip.vars";
 
+@mixin md2 {
   :host {
     font-size: $chip-base-font-size-rem;
   }
+}

core/src/components/chip/chip.md2.flag.scss

@@ -0,0 +1,9 @@
+@use 'chip.md.scss' as c;
+@use 'chip.scss' as b;
+
+@use '../../utils/md-controller/index.scss' as controller;
+
+@if controller.$md2 {
+  @include b.base;
+  @include c.md2;
+}

core/src/components/chip/chip.md3.flag.scss

@@ -0,0 +1,9 @@
+@use 'chip.md3.scss' as c;
+@use 'chip.scss' as b;
+
+@use '../../utils/md-controller/index.scss' as controller;
+
+@if controller.$md3 {
+  @include b.base;
+  @include c.md3;
+}

core/src/components/chip/chip.md3.scss

@@ -0,0 +1,7 @@
+@import "./chip.vars";
+
+@mixin md3 {
+  :host {
+    background: green;
+  }
+}

core/src/components/chip/chip.scss

@@ -1,6 +1,7 @@
 @import "../../themes/ionic.globals";
 @import "./chip.vars";
 
+@mixin base {
   :host {
     /**
      * @prop --background: Background of the chip
@@ -154,3 +155,4 @@
       background: rgba($text-color-rgb, 0.04);
     }
   }
+}

core/src/components/chip/chip.tsx

@@ -5,6 +5,14 @@ import { createColorClasses } from '@utils/theme';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 
+/**
+styleUrls: {
+  ios: 'chip.ios.scss',
+  md: 'chip.md2.scss',
+  md3: Build.isDev ? 'chip.md3.scss' : undefined
+},
+*/
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -12,7 +20,8 @@ import type { Color } from '../../interface';
   tag: 'ion-chip',
   styleUrls: {
     ios: 'chip.ios.scss',
-    md: 'chip.md.scss',
+    md: 'chip.md2.flag.scss',
+    md3: 'chip.md3.flag.scss'
   },
   shadow: true,
 })

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

@@ -23,82 +23,19 @@
       </ion-header>
 
       <ion-content class="ion-padding" id="content" style="text-align: center">
-        <h2>Basic Chips</h2>
+        <h2>Default Chip</h2>
         <ion-chip>
           <ion-label>Default</ion-label>
         </ion-chip>
-        <ion-chip style="border-radius: 4px">
+
-          <ion-label>Border Radius</ion-label>
+        <h2>MD2 Chip</h2>
-        </ion-chip>
+        <ion-chip mode="md">
-        <ion-chip>
+          <ion-label>MD2</ion-label>
-          <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>
+        <h2>MD3 Chip</h2>
-        <ion-chip color="primary">
+        <ion-chip mode="md3">
-          <ion-label>Primary</ion-label>
+          <ion-label>MD3</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>

core/src/global/ionic-global.ts

@@ -70,7 +70,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
 
   const isIonicElement = (elm: any) => elm.tagName?.startsWith('ION-');
 
-  const isAllowedIonicModeValue = (elmMode: string) => ['ios', 'md'].includes(elmMode);
+  const isAllowedIonicModeValue = (elmMode: string) => ['ios', 'md', 'md3'].includes(elmMode);
 
   setMode((elm: any) => {
     while (elm) {

core/src/utils/md-controller/index.scss

@@ -0,0 +1,2 @@
+$md2: true;
+$md3: false;