@ionic/core 8.8.7-dev.11779467048.1641d05e → 8.8.7-dev.11779921691.1777274a

package/dist/collection/components/chip/chip.js

@@ -4,83 +4,87 @@
 import { Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { config } from "../../global/config";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Chip {
     constructor() {
         /**
          * Display an outline style button.
+         *
+         * @deprecated - Use fill="outline" instead
          */
         this.outline = false;
         /**
          * If `true`, the user cannot interact with the chip.
          */
         this.disabled = false;
-        /**
-         * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for
-         * a chip with muted, subtle colors.
-         *
-         * Only applies to the `ionic` theme.
-         */
-        this.hue = 'subtle';
+    }
+    componentDidLoad() {
+        if (this.outline) {
+            printIonWarning(`[ion-chip] - The "outline" attribute has been deprecated in favor of the "fill" attribute. Please use the "fill" attribute with the value "outline" instead.`, this.el);
+        }
     }
     /**
-     * Set the shape based on the theme
+     * Gets the chip fill. Uses the `fill` property if set, otherwise
+     * checks the theme config. Defaults to `solid` if neither is set.
      */
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        if (shape === undefined) {
-            return theme === 'ionic' ? 'round' : 'soft';
-        }
+    get fillValue() {
+        const fillConfig = config.getObjectValue('IonChip.fill', 'solid');
+        const fill = this.fill || (this.outline ? 'outline' : undefined) || fillConfig;
+        return fill;
+    }
+    /**
+     * Gets the chip hue. Uses the `hue` property if set, otherwise
+     * checks the theme config. Defaults to `subtle` if neither is set.
+     */
+    get hueValue() {
+        const hueConfig = config.getObjectValue('IonChip.hue', 'subtle');
+        const hue = this.hue || hueConfig;
+        return hue;
+    }
+    /**
+     * Gets the chip shape. Uses the `shape` property if set, otherwise
+     * checks the theme config. Defaults to `round` if neither is set.
+     */
+    get shapeValue() {
+        const shapeConfig = config.getObjectValue('IonChip.shape', 'round');
+        const shape = this.shape || shapeConfig;
         return shape;
     }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        if (theme === 'ionic') {
-            return size !== undefined ? size : 'large';
-            // TODO(ROU-10695): remove the size !== undefined when we add support for
-            // the `ios` and `md` themes.
-        }
-        else if (size !== undefined) {
-            printIonWarning(`The "${size}" size is not supported in the ${theme} theme.`);
-        }
-        return undefined;
+    /**
+     * Gets the chip size. Uses the `size` property if set, otherwise
+     * checks the theme config. Defaults to `large` if neither is set.
+     */
+    get sizeValue() {
+        const sizeConfig = config.getObjectValue('IonChip.size', 'large');
+        const size = this.size || sizeConfig;
+        return size;
     }
     render() {
-        const { hue } = this;
-        const theme = getIonTheme(this);
-        const size = this.getSize();
-        const shape = this.getShape();
-        return (h(Host, { key: 'ec10528929fb43fcae7d2d7c9cc52bcf67d9823e', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
-                [theme]: true,
-                [`chip-${shape}`]: true,
-                'chip-outline': this.outline,
+        const { fillValue, hueValue, shapeValue, sizeValue } = this;
+        const useRippleEffect = config.getBoolean('rippleEffect', false);
+        return (h(Host, { key: '9aeeff6ca637712f25eb0ee4608345223a67fe73', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+                [`chip-fill-${fillValue}`]: true,
+                [`chip-hue-${hueValue}`]: true,
+                [`chip-shape-${shapeValue}`]: true,
+                [`chip-size-${sizeValue}`]: true,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
                 'ion-focusable': !this.disabled,
-                [`chip-${size}`]: size !== undefined,
-                [`chip-${hue}`]: hue !== undefined,
-            }) }, h("slot", { key: 'c88e9a90b9de62fded05d4323c5b4f86f2f3e96d' }), theme === 'md' && h("ion-ripple-effect", { key: 'f0395345064db0e02cbc886386b07d0d01cb02be' })));
+            }) }, h("slot", { key: '2a56b7638b7d19b68a672c6103f4bf0577c01531' }), useRippleEffect && h("ion-ripple-effect", { key: '880574fd17e8aaa3391abf15fe8fd913e2cdae32' })));
     }
     static get is() { return "ion-chip"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "ios": ["chip.ios.scss"],
-            "md": ["chip.md.scss"],
-            "ionic": ["chip.ionic.scss"]
+            "$": ["chip.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "ios": ["chip.ios.css"],
-            "md": ["chip.md.css"],
-            "ionic": ["chip.ionic.css"]
+            "$": ["chip.css"]
         };
     }
     static get properties() {
@@ -122,7 +126,10 @@ export class Chip {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "- Use fill=\"outline\" instead"
+                        }],
                     "text": "Display an outline style button."
                 },
                 "getter": false,
@@ -131,6 +138,32 @@ export class Chip {
                 "attribute": "outline",
                 "defaultValue": "false"
             },
+            "fill": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IonChipFill",
+                    "resolved": "\"outline\" | \"solid\" | undefined",
+                    "references": {
+                        "IonChipFill": {
+                            "location": "import",
+                            "path": "./chip.interfaces",
+                            "id": "src/components/chip/chip.interfaces.ts::IonChipFill",
+                            "referenceLocation": "IonChipFill"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The fill for the chip.\n\nSet to `\"outline\"` for a chip with a border and background.\nSet to `\"solid\"` for a chip with a background.\n\nDefaults to `\"solid\"` if both the fill property and theme config are unset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fill"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -155,35 +188,48 @@ export class Chip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'bold' | 'subtle'",
+                    "original": "IonChipHue",
                     "resolved": "\"bold\" | \"subtle\" | undefined",
-                    "references": {}
+                    "references": {
+                        "IonChipHue": {
+                            "location": "import",
+                            "path": "./chip.interfaces",
+                            "id": "src/components/chip/chip.interfaces.ts::IonChipHue",
+                            "referenceLocation": "IonChipHue"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"bold\"` for a chip with vibrant, bold colors or to `\"subtle\"` for\na chip with muted, subtle colors.\n\nOnly applies to the `ionic` theme."
+                    "text": "Set to `\"bold\"` for a chip with vibrant, bold colors or to `\"subtle\"` for\na chip with muted, subtle colors.\n\nDefaults to `\"subtle\"` if both the hue property and theme config are unset."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "hue",
-                "defaultValue": "'subtle'"
+                "attribute": "hue"
             },
             "shape": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'soft' | 'round' | 'rectangular'",
+                    "original": "IonChipShape",
                     "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
-                    "references": {}
+                    "references": {
+                        "IonChipShape": {
+                            "location": "import",
+                            "path": "./chip.interfaces",
+                            "id": "src/components/chip/chip.interfaces.ts::IonChipShape",
+                            "referenceLocation": "IonChipShape"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"soft\"` for a chip with slightly rounded corners, `\"round\"` for a chip with fully\nrounded corners, or `\"rectangular\"` for a chip without rounded corners.\nDefaults to `\"round\"` for the `\"ionic\"` theme and `\"soft\"` for all other themes."
+                    "text": "Set to `\"soft\"` for a chip with slightly rounded corners,\n`\"round\"` for a chip with fully rounded corners,\nor `\"rectangular\"` for a chip without rounded corners.\n\nDefaults to `\"round\"` if both the shape property and theme config are unset."
                 },
                 "getter": false,
                 "setter": false,
@@ -194,15 +240,22 @@ export class Chip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'small' | 'large'",
+                    "original": "IonChipSize",
                     "resolved": "\"large\" | \"small\" | undefined",
-                    "references": {}
+                    "references": {
+                        "IonChipSize": {
+                            "location": "import",
+                            "path": "./chip.interfaces",
+                            "id": "src/components/chip/chip.interfaces.ts::IonChipSize",
+                            "referenceLocation": "IonChipSize"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"small\"` for a chip with less height and padding.\n\nDefaults to `\"large\"` for the ionic theme, and  undefined for all other themes."
+                    "text": "Set to `\"small\"` for a chip with less height and padding,\nor `\"large\"` for a chip with more height and padding.\n\nDefaults to `\"large\"` if both the size property and theme config are unset."
                 },
                 "getter": false,
                 "setter": false,
@@ -211,4 +264,5 @@ export class Chip {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/col/col.js

@@ -5,7 +5,6 @@ import { Host, forceUpdate, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
 import { matchBreakpoint } from "../../utils/media";
 import { getIonTheme } from "../../global/ionic-global";
-// TODO(FW-7285): Replace with global breakpoints
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 /**
@@ -81,12 +80,12 @@ export class Col {
         const colSize = this.getSizeClass();
         const colOrder = this.getOrderClass();
         const colOffset = this.getOffsetClass();
-        return (h(Host, { key: '7fc98e15bd75e9c22fe7eaf71f2f49f5d987613a', class: {
+        return (h(Host, { key: '4620a4eb3c94f744d6169ae9d4cc43e86a271a52', class: {
                 [theme]: true,
                 [`${colSize}`]: colSize !== undefined,
                 [`${colOrder}`]: colOrder !== undefined,
                 [`${colOffset}`]: colOffset !== undefined,
-            } }, h("slot", { key: '6ed04a2c2bcdb0400354368c568e58414a60fc39' })));
+            } }, h("slot", { key: '5c3be98deed2050634396339b7787f2770a05d35' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.css

@@ -1,42 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -61,30 +22,21 @@
  */
 :host {
   /**
-   * @prop --background: Background of the content
-   *
-   * @prop --color: Color of the content
-   *
-   * @prop --padding-top: Top padding of the content
-   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
-   * @prop --padding-bottom: Bottom padding of the content
-   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
-   *
-   * @prop --keyboard-offset: Keyboard offset of the content
+   * @prop --ion-content-default-background: Background of the content
+   * @prop --ion-content-default-color: Color of the content
+   * @prop --ion-content-semantic-default-background: Background of the content when a semantic color is applied
+   * @prop --ion-content-semantic-default-color: Color of the content when a semantic color is applied
+   * @prop --ion-content-font-family: Font family of the content
+   * @prop --ion-content-overflow: Overflow behavior of the scrollable area
    *
-   * @prop --offset-top: Offset top of the content
-   * @prop --offset-bottom: Offset bottom of the content
+   * @prop --ion-content-padding-top: Top padding of the content
+   * @prop --ion-content-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content
+   * @prop --ion-content-padding-bottom: Bottom padding of the content
+   * @prop --ion-content-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content
    */
-  --background: var(--ion-background-color, #fff);
-  --color: var(--ion-text-color, #000);
-  --padding-top: 0px;
-  --padding-bottom: 0px;
-  --padding-start: 0px;
-  --padding-end: 0px;
-  --keyboard-offset: 0px;
-  --offset-top: 0px;
-  --offset-bottom: 0px;
-  --overflow: auto;
+  --internal-keyboard-offset: 0px;
+  --internal-offset-top: 0px;
+  --internal-offset-bottom: 0px;
   display: block;
   position: relative;
   flex: 1;
@@ -94,37 +46,30 @@
   margin: 0 !important;
   padding: 0 !important;
   /* stylelint-enable */
-  font-family: var(--ion-font-family, inherit);
+  font-family: var(--ion-content-font-family, inherit);
   contain: size style;
 }
 
-:host(.ion-color) .inner-scroll {
-  background: var(--ion-color-base);
-  color: var(--ion-color-contrast);
-}
-
-#background-content {
-  right: 0px;
-  left: 0px;
-  top: calc(var(--offset-top) * -1);
-  bottom: calc(var(--offset-bottom) * -1);
-  position: absolute;
-  background: var(--background);
-}
-
 .inner-scroll {
+  /**
+   * `.ion-padding` utility classes set `--padding-*` directly on the host,
+   * so we must read `--padding-*` first and only fall back to the 
+   * `--ion-content-padding-*` token.
+   */
   right: 0px;
   left: 0px;
-  top: calc(var(--offset-top) * -1);
-  bottom: calc(var(--offset-bottom) * -1);
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: calc(var(--padding-top) + var(--offset-top));
-  padding-bottom: calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom) + var(--ion-content-safe-area-padding-bottom, 0px));
+  top: calc(var(--internal-offset-top) * -1);
+  bottom: calc(var(--internal-offset-bottom) * -1);
+  -webkit-padding-start: var(--padding-start, var(--ion-content-padding-start, 0px));
+  padding-inline-start: var(--padding-start, var(--ion-content-padding-start, 0px));
+  -webkit-padding-end: var(--padding-end, var(--ion-content-padding-end, 0px));
+  padding-inline-end: var(--padding-end, var(--ion-content-padding-end, 0px));
+  padding-top: calc(var(--padding-top, var(--ion-content-padding-top, 0px)) + var(--internal-offset-top));
+  padding-bottom: calc(
+      var(--padding-bottom, var(--ion-content-padding-bottom, 0px)) + var(--internal-keyboard-offset) + var(--internal-offset-bottom) + var(--ion-content-safe-area-padding-bottom, 0px)
+    );
   position: absolute;
-  color: var(--color);
+  color: var(--ion-content-default-color);
   box-sizing: border-box;
   overflow: hidden;
   /**
@@ -137,9 +82,13 @@
   touch-action: pan-x pan-y pinch-zoom;
 }
 
+:host(.ion-color) .inner-scroll {
+  background: var(--ion-content-semantic-default-background);
+  color: var(--ion-content-semantic-default-color);
+}
+
 .scroll-y,
 .scroll-x {
-  -webkit-overflow-scrolling: touch;
   /**
    * This adds `.inner-scroll` as part of the
    * stacking context in WebKit. Without it,
@@ -161,15 +110,24 @@
 }
 
 .scroll-y {
-  overflow-y: var(--overflow);
+  overflow-y: var(--ion-content-overflow, auto);
   overscroll-behavior-y: contain;
 }
 
 .scroll-x {
-  overflow-x: var(--overflow);
+  overflow-x: var(--ion-content-overflow, auto);
   overscroll-behavior-x: contain;
 }
 
+#background-content {
+  right: 0px;
+  left: 0px;
+  top: calc(var(--internal-offset-top) * -1);
+  bottom: calc(var(--internal-offset-bottom) * -1);
+  position: absolute;
+  background: var(--ion-content-default-background);
+}
+
 .overscroll::before,
 .overscroll::after {
   position: absolute;
@@ -212,8 +170,22 @@
    */
   top: 0;
   bottom: 0;
-  margin-top: calc(var(--offset-top) * -1);
-  margin-bottom: calc(var(--offset-bottom) * -1);
+  margin-top: calc(var(--internal-offset-top) * -1);
+  margin-bottom: calc(var(--internal-offset-bottom) * -1);
+}
+
+::slotted([slot=fixed]) {
+  position: absolute;
+  /**
+   * When presenting ion-content inside of an ion-modal, the .inner-scroll
+   * element is composited. In WebKit, the fixed content is not composited
+   * causing it to appear under the main scrollable content as a result.
+   * The fixed content is correctly composited in other browsers. Adding
+   * the translateZ forces the fixed content to be composited so it correctly
+   * shows on top of the scrollable content. Setting a negative z-index will
+   * still allow the fixed content to appear under the scroll content if specified.
+   */
+  transform: translateZ(0);
 }
 
 .transition-effect {
@@ -224,24 +196,12 @@
   opacity: 0;
   pointer-events: none;
 }
-
-:host(.content-ltr) .transition-effect {
-  /* stylelint-disable property-disallowed-list */
-  left: -100%;
-  /* stylelint-enable property-disallowed-list */
-}
-
-:host(.content-rtl) .transition-effect {
-  /* stylelint-disable property-disallowed-list */
-  right: -100%;
-  /* stylelint-enable property-disallowed-list */
+.transition-effect {
+  inset-inline-start: -100%;
 }
 
 .transition-cover {
   position: absolute;
-  /* stylelint-disable property-disallowed-list */
-  right: 0;
-  /* stylelint-enable property-disallowed-list */
   width: 100%;
   height: 100%;
   background: black;
@@ -255,30 +215,10 @@
   height: 100%;
   box-shadow: inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);
 }
-
-:host(.content-ltr) .transition-shadow {
-  /* stylelint-disable property-disallowed-list */
-  right: 0;
-  /* stylelint-enable property-disallowed-list */
+.transition-shadow {
+  inset-inline-end: 0;
 }
 
 :host(.content-rtl) .transition-shadow {
-  /* stylelint-disable property-disallowed-list */
-  left: 0;
-  /* stylelint-enable property-disallowed-list */
   transform: scaleX(-1);
-}
-
-::slotted([slot=fixed]) {
-  position: absolute;
-  /**
-   * When presenting ion-content inside of an ion-modal, the .inner-scroll
-   * element is composited. In WebKit, the fixed content is not composited
-   * causing it to appear under the main scrollable content as a result.
-   * The fixed content is correctly composited in other browsers. Adding
-   * the translateZ forces the fixed content to be composited so it correctly
-   * shows on top of the scrollable content. Setting a negative z-index will
-   * still allow the fixed content to appear under the scroll content if specified.
-   */
-  transform: translateZ(0);
 }