feat(chip): update key names

Author: thetaPC

core/src/components/chip/chip.interfaces.ts

@@ -85,13 +85,13 @@ type IonChipShapeDefinition = {
 };
 
 type IonChipMediaDefinition = {
-  // Targets `:first-child`
-  first?: {
+  /** Targets `:first-child` */
+  leading?: {
     margin?: IonMargin;
   };
 
-  // Targets `:last-child`
-  last?: {
+  /** Targets `:last-child` */
+  trailing?: {
     margin?: IonMargin;
   };
 };

core/src/components/chip/chip.scss

@@ -482,19 +482,19 @@
 
 ::slotted(ion-icon:first-child) {
   @include mixins.margin(
-    var(--ion-chip-icon-first-margin-top),
-    var(--ion-chip-icon-first-margin-end),
-    var(--ion-chip-icon-first-margin-bottom),
-    var(--ion-chip-icon-first-margin-start)
+    var(--ion-chip-icon-leading-margin-top),
+    var(--ion-chip-icon-leading-margin-end),
+    var(--ion-chip-icon-leading-margin-bottom),
+    var(--ion-chip-icon-leading-margin-start)
   );
 }
 
 ::slotted(ion-icon:last-child) {
   @include mixins.margin(
-    var(--ion-chip-icon-last-margin-top),
-    var(--ion-chip-icon-last-margin-end),
-    var(--ion-chip-icon-last-margin-bottom),
-    var(--ion-chip-icon-last-margin-start)
+    var(--ion-chip-icon-trailing-margin-top),
+    var(--ion-chip-icon-trailing-margin-end),
+    var(--ion-chip-icon-trailing-margin-bottom),
+    var(--ion-chip-icon-trailing-margin-start)
   );
 }
 
@@ -508,18 +508,18 @@
 
 ::slotted(ion-avatar:first-child) {
   @include mixins.margin(
-    var(--ion-chip-avatar-first-margin-top),
-    var(--ion-chip-avatar-first-margin-end),
-    var(--ion-chip-avatar-first-margin-bottom),
-    var(--ion-chip-avatar-first-margin-start)
+    var(--ion-chip-avatar-leading-margin-top),
+    var(--ion-chip-avatar-leading-margin-end),
+    var(--ion-chip-avatar-leading-margin-bottom),
+    var(--ion-chip-avatar-leading-margin-start)
   );
 }
 
 ::slotted(ion-avatar:last-child) {
   @include mixins.margin(
-    var(--ion-chip-avatar-last-margin-top),
-    var(--ion-chip-avatar-last-margin-end),
-    var(--ion-chip-avatar-last-margin-bottom),
-    var(--ion-chip-avatar-last-margin-start)
+    var(--ion-chip-avatar-trailing-margin-top),
+    var(--ion-chip-avatar-trailing-margin-end),
+    var(--ion-chip-avatar-trailing-margin-bottom),
+    var(--ion-chip-avatar-trailing-margin-start)
   );
 }

core/src/components/item-divider/item-divider.scss

@@ -94,7 +94,7 @@
     * @prop --ion-item-divider-paragraph-color: Color of the slotted p
     * @prop --ion-item-divider-paragraph-font-size: Font size of the slotted p
     * @prop --ion-item-divider-paragraph-text-overflow: Text overflow of the slotted p
-    * @prop --ion-item-divider-paragraph-overflow: Overflow of the slotted p
+  * @prop --ion-item-divider-paragraph-overflow: Overflow of the slotted p
     * @prop --ion-item-divider-paragraph-trailing-margin-top: Top margin of the slotted p when it is the last child
     * @prop --ion-item-divider-paragraph-trailing-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the slotted p when it is the last child
     * @prop --ion-item-divider-paragraph-trailing-margin-bottom: Bottom margin of the slotted p when it is the last child

core/src/themes/ios/default.tokens.ts

@@ -359,7 +359,7 @@ export const defaultTheme: DefaultTheme = {
           size: `${(20 / components.chip.font.size).toFixed(2)}em`,
         },
 
-        first: {
+        leading: {
           margin: {
             top: '-4px',
             end: 'var(--ion-spacing-sm)',
@@ -368,7 +368,7 @@ export const defaultTheme: DefaultTheme = {
           },
         },
 
-        last: {
+        trailing: {
           margin: {
             top: '-4px',
             end: '-4px',
@@ -382,7 +382,7 @@ export const defaultTheme: DefaultTheme = {
         height: `${(24 / components.chip.font.size).toFixed(2)}em`,
         width: `${(24 / components.chip.font.size).toFixed(2)}em`,
 
-        first: {
+        leading: {
           margin: {
             top: '-4px',
             end: 'var(--ion-spacing-sm)',
@@ -391,7 +391,7 @@ export const defaultTheme: DefaultTheme = {
           },
         },
 
-        last: {
+        trailing: {
           margin: {
             top: '-4px',
             end: '-8px',

core/src/themes/md/default.tokens.ts

@@ -356,7 +356,7 @@ export const defaultTheme: DefaultTheme = {
           size: `${(20 / components.chip.font.size).toFixed(2)}em`,
         },
 
-        first: {
+        leading: {
           margin: {
             top: '-4px',
             end: 'var(--ion-spacing-sm)',
@@ -365,7 +365,7 @@ export const defaultTheme: DefaultTheme = {
           },
         },
 
-        last: {
+        trailing: {
           margin: {
             top: '-4px',
             end: '-4px',
@@ -379,7 +379,7 @@ export const defaultTheme: DefaultTheme = {
         height: `${(24 / components.chip.font.size).toFixed(2)}em`,
         width: `${(24 / components.chip.font.size).toFixed(2)}em`,
 
-        first: {
+        leading: {
           margin: {
             top: '-4px',
             end: 'var(--ion-spacing-sm)',
@@ -388,7 +388,7 @@ export const defaultTheme: DefaultTheme = {
           },
         },
 
-        last: {
+        trailing: {
           margin: {
             top: '-4px',
             end: '-8px',