feat(progress-bar): add recipe and tokens

core/api.txt

@@ -1931,16 +1931,26 @@ ion-popover,part,content
 ion-progress-bar,shadow
 ion-progress-bar,prop,buffer,number,1,false,false
 ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
-ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-progress-bar,prop,reversed,boolean,false,false,false
 ion-progress-bar,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
-ion-progress-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
 ion-progress-bar,prop,value,number,0,false,false
-ion-progress-bar,css-prop,--background,ios
-ion-progress-bar,css-prop,--background,md
-ion-progress-bar,css-prop,--progress-background,ios
-ion-progress-bar,css-prop,--progress-background,md
+ion-progress-bar,css-prop,--ion-progress-bar-determinate-buffer-bar-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-determinate-buffer-bar-semantic-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-determinate-buffer-bar-solid-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-determinate-buffer-circles-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-determinate-buffer-circles-semantic-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-determinate-buffer-circles-solid-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-determinate-progress-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-determinate-progress-semantic-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-height
+ion-progress-bar,css-prop,--ion-progress-bar-indeterminate-buffer-bar-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-indeterminate-buffer-bar-solid-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-indeterminate-progress-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-indeterminate-progress-semantic-default-background
+ion-progress-bar,css-prop,--ion-progress-bar-shape-rectangular-border-radius
+ion-progress-bar,css-prop,--ion-progress-bar-shape-round-border-radius
 ion-progress-bar,part,progress
 ion-progress-bar,part,stream
 ion-progress-bar,part,track

core/src/components.d.ts

@@ -28,6 +28,7 @@ import { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
 import { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
 import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
+import { IonProgressBarShape } from "./components/progress-bar/progress-bar.interfaces";
 import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 import { RefresherEventDetail } from "./components/refresher/refresher-interface";
@@ -68,6 +69,7 @@ export { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
 export { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
 export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
+export { IonProgressBarShape } from "./components/progress-bar/progress-bar.interfaces";
 export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 export { RefresherEventDetail } from "./components/refresher/refresher-interface";
@@ -2987,23 +2989,15 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * The mode determines the platform behaviors of the component.
-         */
-        "mode"?: "ios" | "md";
         /**
           * If true, reverse the progress bar direction.
           * @default false
          */
         "reversed": boolean;
         /**
-          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` if both the shape property and theme config are unset.
          */
-        "shape"?: 'round' | 'rectangular';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "shape"?: IonProgressBarShape;
         /**
           * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
           * @default 'determinate'
@@ -8911,23 +8905,15 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * The mode determines the platform behaviors of the component.
-         */
-        "mode"?: "ios" | "md";
         /**
           * If true, reverse the progress bar direction.
           * @default false
          */
         "reversed"?: boolean;
         /**
-          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` if both the shape property and theme config are unset.
          */
-        "shape"?: 'round' | 'rectangular';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
+        "shape"?: IonProgressBarShape;
         /**
           * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
           * @default 'determinate'

core/src/components/chip/chip.tsx

@@ -84,7 +84,7 @@ export class Chip implements ComponentInterface {
 
   /**
    * Gets the chip fill. Uses the `fill` property if set, otherwise
-   * checks the theme config and falls back to 'solid' if neither is provided.
+   * checks the theme config. Defaults to `solid` if neither is set.
    */
   get fillValue(): IonChipFill {
     const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as IonChipFill;
@@ -95,7 +95,7 @@ export class Chip implements ComponentInterface {
 
   /**
    * Gets the chip hue. Uses the `hue` property if set, otherwise
-   * checks the theme config and falls back to 'subtle' if neither is provided.
+   * checks the theme config. Defaults to `subtle` if neither is set.
    */
   get hueValue(): IonChipHue {
     const hueConfig = config.getObjectValue('IonChip.hue', 'subtle') as IonChipHue;
@@ -106,7 +106,7 @@ export class Chip implements ComponentInterface {
 
   /**
    * Gets the chip shape. Uses the `shape` property if set, otherwise
-   * checks the theme config and falls back to 'round' if neither is provided.
+   * checks the theme config. Defaults to `round` if neither is set.
    */
   get shapeValue(): IonChipShape {
     const shapeConfig = config.getObjectValue('IonChip.shape', 'round') as IonChipShape;
@@ -117,7 +117,7 @@ export class Chip implements ComponentInterface {
 
   /**
    * Gets the chip size. Uses the `size` property if set, otherwise
-   * checks the theme config and falls back to 'large' if neither is provided.
+   * checks the theme config. Defaults to `large` if neither is set.
    */
   get sizeValue(): IonChipSize {
     const sizeConfig = config.getObjectValue('IonChip.size', 'large') as IonChipSize;