feat(item-divider): add recipe and tokens (#31009)

Issue number: internal

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

Author: thetaPC

BREAKING.md

@@ -20,6 +20,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Card](#version-9x-card)
   - [Chip](#version-9x-chip)
   - [Grid](#version-9x-grid)
+  - [Item Divider](#version-9x-item-divider)
   - [Spinner](#version-9x-spinner)
 
 <h2 id="version-9x-global-styles">Global Styles</h2>
@@ -157,6 +158,21 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
 </ion-grid>
 ```
 
+<h4 id="version-9x-item-divider">Item Divider</h4>
+
+- Component CSS variables have been removed. The component now utilizes the centralized Ionic Theming system. Global updates should be managed via the theme tokens file, while component-specific overrides are handled through localized CSS variables.
+   - `--background` is replaced by `IonItemDivider.background` for global styles and `--ion-item-divider-background` for component-specific overrides.
+   - `--color` is replaced by `IonItemDivider.color` for global styles and `--ion-item-divider-color` for component-specific overrides.
+   - `--padding-top` is replaced by `IonItemDivider.padding.top` for global styles and `--ion-item-divider-padding-top` for component-specific overrides.
+   - `--padding-end` is replaced by `IonItemDivider.padding.end` for global styles and `--ion-item-divider-padding-end` for component-specific overrides.
+   - `--padding-bottom` is replaced by `IonItemDivider.padding.bottom` for global styles and `--ion-item-divider-padding-bottom` for component-specific overrides.
+   - `--padding-start` is replaced by `IonItemDivider.padding.start` for global styles and `--ion-item-divider-padding-start` for component-specific overrides.
+   - `--inner-padding-top` is replaced by `IonItemDivider.inner.padding.top` for global styles and `--ion-item-divider-inner-padding-top` for component-specific overrides.
+   - `--inner-padding-end` is replaced by `IonItemDivider.inner.padding.end` for global styles and `--ion-item-divider-inner-padding-end` for component-specific overrides.
+   - `--inner-padding-bottom` is replaced by `IonItemDivider.inner.padding.bottom` for global styles and `--ion-item-divider-inner-padding-bottom` for component-specific overrides.
+   - `--inner-padding-start` is replaced by `IonItemDivider.inner.padding.start` for global styles and `--ion-item-divider-inner-padding-start` for component-specific overrides.
+- Specific theme classes (e.g., `ion-item-divider.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting.
+
 <h4 id="version-9x-spinner">Spinner</h4>
 
 - Component CSS variables have been removed. The component now utilizes the centralized Ionic Theming system. Global updates should be managed via the theme tokens file, while component-specific overrides are handled through localized CSS variables.

core/api.txt

@@ -1334,37 +1334,81 @@ ion-item-divider,shadow
 ion-item-divider,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item-divider,prop,mode,"ios" | "md",undefined,false,false
 ion-item-divider,prop,sticky,boolean,false,false,false
-ion-item-divider,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-item-divider,css-prop,--background,ionic
-ion-item-divider,css-prop,--background,ios
-ion-item-divider,css-prop,--background,md
-ion-item-divider,css-prop,--color,ionic
-ion-item-divider,css-prop,--color,ios
-ion-item-divider,css-prop,--color,md
-ion-item-divider,css-prop,--inner-padding-bottom,ionic
-ion-item-divider,css-prop,--inner-padding-bottom,ios
-ion-item-divider,css-prop,--inner-padding-bottom,md
-ion-item-divider,css-prop,--inner-padding-end,ionic
-ion-item-divider,css-prop,--inner-padding-end,ios
-ion-item-divider,css-prop,--inner-padding-end,md
-ion-item-divider,css-prop,--inner-padding-start,ionic
-ion-item-divider,css-prop,--inner-padding-start,ios
-ion-item-divider,css-prop,--inner-padding-start,md
-ion-item-divider,css-prop,--inner-padding-top,ionic
-ion-item-divider,css-prop,--inner-padding-top,ios
-ion-item-divider,css-prop,--inner-padding-top,md
-ion-item-divider,css-prop,--padding-bottom,ionic
-ion-item-divider,css-prop,--padding-bottom,ios
-ion-item-divider,css-prop,--padding-bottom,md
-ion-item-divider,css-prop,--padding-end,ionic
-ion-item-divider,css-prop,--padding-end,ios
-ion-item-divider,css-prop,--padding-end,md
-ion-item-divider,css-prop,--padding-start,ionic
-ion-item-divider,css-prop,--padding-start,ios
-ion-item-divider,css-prop,--padding-start,md
-ion-item-divider,css-prop,--padding-top,ionic
-ion-item-divider,css-prop,--padding-top,ios
-ion-item-divider,css-prop,--padding-top,md
+ion-item-divider,css-prop,--ion-item-divider-avatar-end-slotted-margin-end
+ion-item-divider,css-prop,--ion-item-divider-avatar-end-slotted-margin-start
+ion-item-divider,css-prop,--ion-item-divider-avatar-height
+ion-item-divider,css-prop,--ion-item-divider-avatar-margin-bottom
+ion-item-divider,css-prop,--ion-item-divider-avatar-margin-end
+ion-item-divider,css-prop,--ion-item-divider-avatar-margin-start
+ion-item-divider,css-prop,--ion-item-divider-avatar-margin-top
+ion-item-divider,css-prop,--ion-item-divider-avatar-start-slotted-margin-end
+ion-item-divider,css-prop,--ion-item-divider-avatar-start-slotted-margin-start
+ion-item-divider,css-prop,--ion-item-divider-avatar-width
+ion-item-divider,css-prop,--ion-item-divider-background
+ion-item-divider,css-prop,--ion-item-divider-border-bottom
+ion-item-divider,css-prop,--ion-item-divider-color
+ion-item-divider,css-prop,--ion-item-divider-end-slotted-margin-end
+ion-item-divider,css-prop,--ion-item-divider-end-slotted-margin-start
+ion-item-divider,css-prop,--ion-item-divider-font-size
+ion-item-divider,css-prop,--ion-item-divider-font-weight
+ion-item-divider,css-prop,--ion-item-divider-icon-default-color
+ion-item-divider,css-prop,--ion-item-divider-icon-end-slotted-margin-bottom
+ion-item-divider,css-prop,--ion-item-divider-icon-end-slotted-margin-end
+ion-item-divider,css-prop,--ion-item-divider-icon-end-slotted-margin-start
+ion-item-divider,css-prop,--ion-item-divider-icon-end-slotted-margin-top
+ion-item-divider,css-prop,--ion-item-divider-icon-font-size
+ion-item-divider,css-prop,--ion-item-divider-icon-semantic-default-color
+ion-item-divider,css-prop,--ion-item-divider-icon-start-slotted-margin-bottom
+ion-item-divider,css-prop,--ion-item-divider-icon-start-slotted-margin-end
+ion-item-divider,css-prop,--ion-item-divider-icon-start-slotted-margin-start
+ion-item-divider,css-prop,--ion-item-divider-icon-start-slotted-margin-top
+ion-item-divider,css-prop,--ion-item-divider-inner-padding-bottom
+ion-item-divider,css-prop,--ion-item-divider-inner-padding-end
+ion-item-divider,css-prop,--ion-item-divider-inner-padding-start
+ion-item-divider,css-prop,--ion-item-divider-inner-padding-top
+ion-item-divider,css-prop,--ion-item-divider-label-margin-bottom
+ion-item-divider,css-prop,--ion-item-divider-label-margin-end
+ion-item-divider,css-prop,--ion-item-divider-label-margin-start
+ion-item-divider,css-prop,--ion-item-divider-label-margin-top
+ion-item-divider,css-prop,--ion-item-divider-min-height
+ion-item-divider,css-prop,--ion-item-divider-note-align-self
+ion-item-divider,css-prop,--ion-item-divider-note-font-size
+ion-item-divider,css-prop,--ion-item-divider-note-margin-bottom
+ion-item-divider,css-prop,--ion-item-divider-note-margin-end
+ion-item-divider,css-prop,--ion-item-divider-note-margin-start
+ion-item-divider,css-prop,--ion-item-divider-note-margin-top
+ion-item-divider,css-prop,--ion-item-divider-note-padding-bottom
+ion-item-divider,css-prop,--ion-item-divider-note-padding-end
+ion-item-divider,css-prop,--ion-item-divider-note-padding-start
+ion-item-divider,css-prop,--ion-item-divider-note-padding-top
+ion-item-divider,css-prop,--ion-item-divider-padding-bottom
+ion-item-divider,css-prop,--ion-item-divider-padding-end
+ion-item-divider,css-prop,--ion-item-divider-padding-start
+ion-item-divider,css-prop,--ion-item-divider-padding-top
+ion-item-divider,css-prop,--ion-item-divider-paragraph-color
+ion-item-divider,css-prop,--ion-item-divider-paragraph-font-size
+ion-item-divider,css-prop,--ion-item-divider-paragraph-margin-bottom
+ion-item-divider,css-prop,--ion-item-divider-paragraph-margin-end
+ion-item-divider,css-prop,--ion-item-divider-paragraph-margin-start
+ion-item-divider,css-prop,--ion-item-divider-paragraph-margin-top
+ion-item-divider,css-prop,--ion-item-divider-paragraph-overflow
+ion-item-divider,css-prop,--ion-item-divider-paragraph-text-overflow
+ion-item-divider,css-prop,--ion-item-divider-paragraph-trailing-margin-bottom
+ion-item-divider,css-prop,--ion-item-divider-paragraph-trailing-margin-end
+ion-item-divider,css-prop,--ion-item-divider-paragraph-trailing-margin-start
+ion-item-divider,css-prop,--ion-item-divider-paragraph-trailing-margin-top
+ion-item-divider,css-prop,--ion-item-divider-start-slotted-margin-end
+ion-item-divider,css-prop,--ion-item-divider-start-slotted-margin-start
+ion-item-divider,css-prop,--ion-item-divider-thumbnail-end-slotted-margin-end
+ion-item-divider,css-prop,--ion-item-divider-thumbnail-end-slotted-margin-start
+ion-item-divider,css-prop,--ion-item-divider-thumbnail-height
+ion-item-divider,css-prop,--ion-item-divider-thumbnail-margin-bottom
+ion-item-divider,css-prop,--ion-item-divider-thumbnail-margin-end
+ion-item-divider,css-prop,--ion-item-divider-thumbnail-margin-start
+ion-item-divider,css-prop,--ion-item-divider-thumbnail-margin-top
+ion-item-divider,css-prop,--ion-item-divider-thumbnail-start-slotted-margin-end
+ion-item-divider,css-prop,--ion-item-divider-thumbnail-start-slotted-margin-start
+ion-item-divider,css-prop,--ion-item-divider-thumbnail-width
 
 ion-item-group,none
 ion-item-group,prop,mode,"ios" | "md",undefined,false,false

core/src/components.d.ts

@@ -1924,10 +1924,6 @@ export namespace Components {
           * @default false
          */
         "sticky": boolean;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonItemGroup {
         /**
@@ -7918,10 +7914,6 @@ declare namespace LocalJSX {
           * @default false
          */
         "sticky"?: boolean;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonItemGroup {
         /**

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

@@ -85,12 +85,12 @@ type IonChipShapeDefinition = {
 };
 
 type IonChipMediaDefinition = {
-  // Styles for the media component only if it is the first element in the slot
+  /** Targets `:first-child` */
   leading?: {
     margin?: IonMargin;
   };
 
-  // Styles for the media component only if it is the last element in the slot
+  /** Targets `:last-child` */
   trailing?: {
     margin?: IonMargin;
   };

core/src/components/chip/chip.scss

@@ -1,5 +1,4 @@
 @use "../../themes/mixins" as mixins;
-@use "../../themes/functions.color" as colors;
 
 // Chip: Common Styles
 // --------------------------------------------------

core/src/components/item-divider/item-divider.interfaces.ts

@@ -0,0 +1,161 @@
+import type { IonPadding, IonMargin } from '../../themes/themes.interfaces';
+
+export type IonItemDividerRecipe = {
+  background?: string;
+  color?: string;
+  minHeight?: string;
+
+  padding?: IonPadding;
+
+  inner?: {
+    padding?: IonPadding;
+  };
+
+  border?: {
+    bottom?: string;
+  };
+
+  font?: {
+    size?: string;
+    weight?: string;
+  };
+
+  /** Targets `[slot="start"]` */
+  start?: {
+    /** Targets `::slotted([slot="start"])` */
+    slotted?: {
+      margin?: IonMargin;
+    };
+  };
+
+  /** Targets `[slot="end"]` */
+  end?: {
+    /** Targets `::slotted([slot="end"])` */
+    slotted?: {
+      margin?: IonMargin;
+    };
+  };
+
+  /** Targets `::slotted(ion-label)` */
+  label?: {
+    margin?: IonMargin;
+  };
+
+  /** Targets `::slotted(ion-icon)` */
+  icon?: {
+    font?: {
+      size?: string;
+    };
+
+    /** Targets `[slot="start"]` */
+    start?: {
+      /** Targets `::slotted(ion-icon[slot="start"])` */
+      slotted?: {
+        margin?: IonMargin;
+      };
+    };
+
+    /** Targets `[slot="end"]` */
+    end?: {
+      /** Targets `::slotted(ion-icon[slot="end"])` */
+      slotted?: {
+        margin?: IonMargin;
+      };
+    };
+
+    /** Default non-semantic states */
+    default?: {
+      color?: string;
+    };
+
+    /** Any of the semantic colors like primary, secondary, etc. */
+    semantic?: {
+      default?: {
+        color?: string;
+      };
+    };
+  };
+
+  /** Targets `::slotted(ion-note)` */
+  note?: {
+    align?: {
+      self?: string;
+    };
+
+    font?: {
+      size?: string;
+    };
+
+    margin?: IonMargin;
+    padding?: IonPadding;
+  };
+
+  /** Targets `::slotted(ion-avatar)` */
+  avatar?: {
+    height?: string;
+    width?: string;
+
+    margin?: IonMargin;
+
+    /** Targets `[slot="start"]` */
+    start?: {
+      /** Targets `::slotted(ion-avatar[slot="start"])` */
+      slotted?: {
+        margin?: IonMargin;
+      };
+    };
+
+    /** Targets `[slot="end"]` */
+    end?: {
+      /** Targets `::slotted(ion-avatar[slot="end"])` */
+      slotted?: {
+        margin?: IonMargin;
+      };
+    };
+  };
+
+  /** Targets `::slotted(ion-thumbnail)` */
+  thumbnail?: {
+    height?: string;
+    width?: string;
+
+    margin?: IonMargin;
+
+    /** Targets `[slot="start"]` */
+    start?: {
+      /** Targets `::slotted(ion-thumbnail[slot="start"])` */
+      slotted?: {
+        margin?: IonMargin;
+      };
+    };
+
+    /** Targets `[slot="end"]` */
+    end?: {
+      /** Targets `::slotted(ion-thumbnail[slot="end"])` */
+      slotted?: {
+        margin?: IonMargin;
+      };
+    };
+  };
+
+  /** Targets `::slotted(p)` */
+  paragraph?: {
+    color?: string;
+    overflow?: string;
+
+    margin?: IonMargin;
+
+    font?: {
+      size?: string;
+    };
+
+    text?: {
+      overflow?: string;
+    };
+
+    /** Targets `::slotted(p:last-child)` */
+    trailing?: {
+      margin?: IonMargin;
+    };
+  };
+};