Merge branch 'ionic-modular' into FW-6751-pt3

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)
+  - [Spinner](#version-9x-spinner)
 
 <h2 id="version-9x-global-styles">Global Styles</h2>
 
@@ -39,7 +40,14 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 <h4 id="version-9x-chip">Chip</h4>
 
-- The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
+- 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.
+   - `--color` is replaced by `IonChip.hue.bold.solid.default` for global styles and `--ion-chip-hue-bold-solid-default-color` for component-specific styles if the chip has a bold hue and solid fill.
+   - `--color` is replaced by `IonChip.hue.bold.outline.default` for global styles and `--ion-chip-hue-bold-outline-default-color` for component-specific styles if the chip has a bold hue and outline fill.
+   - `--color` is replaced by `IonChip.hue.subtle.solid.default` for global styles and `--ion-chip-hue-subtle-solid-default-color` for component-specific styles if the chip has a subtle hue and solid fill.
+   - `--color` is replaced by `IonChip.hue.subtle.outline.default` for global styles and `--ion-chip-hue-subtle-outline-default-color` for component-specific styles if the chip has a subtle hue and outline fill.
+- The `outline` property has been deprecated. To achieve an outlined chip, set the `fill` property to `"outline"`. The class `.chip-outline` has also been updated to `.chip-fill-outline` for clarity.
+- Specific theme classes (e.g., `ion-chip.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting.
+- The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `IonChip.shape.round.border.radius` to specify a different value for global styles and `--ion-chip-shape-round-border-radius` for component-specific styles.
 
 <h4 id="version-9x-grid">Grid</h4>
 
@@ -147,4 +155,13 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
     </ion-col>
   </ion-row>
 </ion-grid>
-```
+```
+
+<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.
+   - `--color` is replaced by `IonSpinner.color` for global styles and
+`--ion-spinner-color` for component-specific styles.
+- CSS classes now include the property name to improve clarity.
+  - `.spinner-[spinner-name]` → `.spinner-name-[spinner-name]`
+- Specific theme classes (e.g., `ion-spinner.md`) are no longer supported. Style modifications based on the active theme must be implemented using theme tokens rather than direct class targeting.

core/api.txt

@@ -602,11 +602,101 @@ ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
 ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-chip,prop,size,"large" | "small" | undefined,undefined,false,false
-ion-chip,css-prop,--border-radius
-ion-chip,css-prop,--color
-ion-chip,css-prop,--focus-ring-color
-ion-chip,css-prop,--focus-ring-style
-ion-chip,css-prop,--focus-ring-width
+ion-chip,css-prop,--ion-chip-avatar-height
+ion-chip,css-prop,--ion-chip-avatar-leading-margin-bottom
+ion-chip,css-prop,--ion-chip-avatar-leading-margin-end
+ion-chip,css-prop,--ion-chip-avatar-leading-margin-start
+ion-chip,css-prop,--ion-chip-avatar-leading-margin-top
+ion-chip,css-prop,--ion-chip-avatar-trailing-margin-bottom
+ion-chip,css-prop,--ion-chip-avatar-trailing-margin-end
+ion-chip,css-prop,--ion-chip-avatar-trailing-margin-start
+ion-chip,css-prop,--ion-chip-avatar-trailing-margin-top
+ion-chip,css-prop,--ion-chip-avatar-width
+ion-chip,css-prop,--ion-chip-font-weight
+ion-chip,css-prop,--ion-chip-gap
+ion-chip,css-prop,--ion-chip-hue-bold-outline-activated-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-default-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-default-border-color
+ion-chip,css-prop,--ion-chip-hue-bold-outline-default-border-style
+ion-chip,css-prop,--ion-chip-hue-bold-outline-default-border-width
+ion-chip,css-prop,--ion-chip-hue-bold-outline-default-color
+ion-chip,css-prop,--ion-chip-hue-bold-outline-focus-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-hover-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-activated-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-default-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-default-border-color
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-default-border-style
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-default-border-width
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-default-color
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-focus-background
+ion-chip,css-prop,--ion-chip-hue-bold-outline-semantic-hover-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-activated-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-default-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-default-color
+ion-chip,css-prop,--ion-chip-hue-bold-solid-focus-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-hover-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-semantic-activated-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-semantic-default-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-semantic-default-color
+ion-chip,css-prop,--ion-chip-hue-bold-solid-semantic-focus-background
+ion-chip,css-prop,--ion-chip-hue-bold-solid-semantic-hover-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-activated-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-default-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-default-border-color
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-default-border-style
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-default-border-width
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-default-color
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-focus-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-hover-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-activated-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-default-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-default-border-color
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-default-border-style
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-default-border-width
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-default-color
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-focus-background
+ion-chip,css-prop,--ion-chip-hue-subtle-outline-semantic-hover-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-activated-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-default-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-default-color
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-focus-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-hover-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-semantic-activated-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-semantic-default-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-semantic-default-color
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-semantic-focus-background
+ion-chip,css-prop,--ion-chip-hue-subtle-solid-semantic-hover-background
+ion-chip,css-prop,--ion-chip-icon-color
+ion-chip,css-prop,--ion-chip-icon-font-size
+ion-chip,css-prop,--ion-chip-icon-leading-margin-bottom
+ion-chip,css-prop,--ion-chip-icon-leading-margin-end
+ion-chip,css-prop,--ion-chip-icon-leading-margin-start
+ion-chip,css-prop,--ion-chip-icon-leading-margin-top
+ion-chip,css-prop,--ion-chip-icon-trailing-margin-bottom
+ion-chip,css-prop,--ion-chip-icon-trailing-margin-end
+ion-chip,css-prop,--ion-chip-icon-trailing-margin-start
+ion-chip,css-prop,--ion-chip-icon-trailing-margin-top
+ion-chip,css-prop,--ion-chip-letter-spacing
+ion-chip,css-prop,--ion-chip-line-height
+ion-chip,css-prop,--ion-chip-margin-bottom
+ion-chip,css-prop,--ion-chip-margin-end
+ion-chip,css-prop,--ion-chip-margin-start
+ion-chip,css-prop,--ion-chip-margin-top
+ion-chip,css-prop,--ion-chip-padding-bottom
+ion-chip,css-prop,--ion-chip-padding-end
+ion-chip,css-prop,--ion-chip-padding-start
+ion-chip,css-prop,--ion-chip-padding-top
+ion-chip,css-prop,--ion-chip-shape-rectangular-border-radius
+ion-chip,css-prop,--ion-chip-shape-round-border-radius
+ion-chip,css-prop,--ion-chip-shape-soft-border-radius
+ion-chip,css-prop,--ion-chip-size-large-font-size
+ion-chip,css-prop,--ion-chip-size-large-min-height
+ion-chip,css-prop,--ion-chip-size-small-font-size
+ion-chip,css-prop,--ion-chip-size-small-min-height
+ion-chip,css-prop,--ion-chip-state-disabled-opacity
+ion-chip,css-prop,--ion-chip-state-focus-ring-color
+ion-chip,css-prop,--ion-chip-state-focus-ring-style
+ion-chip,css-prop,--ion-chip-state-focus-ring-width
 
 ion-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false
@@ -2309,10 +2399,24 @@ ion-spinner,prop,mode,"ios" | "md",undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | undefined,undefined,false,false
-ion-spinner,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-spinner,css-prop,--color,ionic
-ion-spinner,css-prop,--color,ios
-ion-spinner,css-prop,--color,md
+ion-spinner,css-prop,--ion-spinner-circular-stroke-width
+ion-spinner,css-prop,--ion-spinner-color
+ion-spinner,css-prop,--ion-spinner-crescent-stroke-width
+ion-spinner,css-prop,--ion-spinner-dots-stroke-width
+ion-spinner,css-prop,--ion-spinner-lines-sharp-small-stroke-width
+ion-spinner,css-prop,--ion-spinner-lines-sharp-stroke-width
+ion-spinner,css-prop,--ion-spinner-lines-small-stroke-width
+ion-spinner,css-prop,--ion-spinner-lines-stroke-width
+ion-spinner,css-prop,--ion-spinner-size-large-height
+ion-spinner,css-prop,--ion-spinner-size-large-width
+ion-spinner,css-prop,--ion-spinner-size-medium-height
+ion-spinner,css-prop,--ion-spinner-size-medium-width
+ion-spinner,css-prop,--ion-spinner-size-small-height
+ion-spinner,css-prop,--ion-spinner-size-small-width
+ion-spinner,css-prop,--ion-spinner-size-xlarge-height
+ion-spinner,css-prop,--ion-spinner-size-xlarge-width
+ion-spinner,css-prop,--ion-spinner-size-xsmall-height
+ion-spinner,css-prop,--ion-spinner-size-xsmall-width
 
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true