@ionic/core 8.4.2-dev.11736507189.18234064 → 8.4.2-dev.11736797843.16cc5058

package/dist/collection/components/accordion/accordion.md.css

@@ -1,70 +1,3 @@
-:host {
-  display: block;
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  /**
-   * This is required to force WebKit
-   * to create a new stacking context
-   * otherwise the border radius is
-   * temporarily lost when hovering over
-   * the ion-item or expanding/collapsing
-   * the accordion.
-   */
-  z-index: 0;
-}
-
-:host(.accordion-expanding) ::slotted(ion-item[slot=header]),
-:host(.accordion-expanded) ::slotted(ion-item[slot=header]) {
-  --border-width: 0px;
-}
-
-#content {
-  overflow: hidden;
-  will-change: max-height;
-}
-
-:host(.accordion-collapsing) #content {
-  /* stylelint-disable-next-line declaration-no-important */
-  max-height: 0 !important;
-}
-
-:host(.accordion-collapsed) #content {
-  display: none;
-}
-
-:host(.accordion-expanding) #content {
-  max-height: 0;
-}
-
-/**
- * Prevent margins of content-wrapper
- * from collapsing, breaking the animation.
- */
-:host(.accordion-expanding) #content-wrapper {
-  overflow: auto;
-}
-
-:host(.accordion-disabled) #header,
-:host(.accordion-readonly) #header,
-:host(.accordion-disabled) #content,
-:host(.accordion-readonly) #content {
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :host,
-  #content {
-    /* stylelint-disable declaration-no-important */
-    transition: none !important;
-  }
-}
-/**
- * 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
@@ -121,7 +54,25 @@
  * }
  */
 :host {
+  display: block;
+  position: relative;
+  width: 100%;
   background-color: var(--ion-background-color, #ffffff);
+  overflow: hidden;
+  /**
+   * This is required to force WebKit
+   * to create a new stacking context
+   * otherwise the border radius is
+   * temporarily lost when hovering over
+   * the ion-item or expanding/collapsing
+   * the accordion.
+   */
+  z-index: 0;
+}
+
+:host(.accordion-expanding) ::slotted(ion-item[slot=header]),
+:host(.accordion-expanded) ::slotted(ion-item[slot=header]) {
+  --border-width: 0px;
 }
 
 :host(.accordion-animated) {
@@ -132,6 +83,39 @@
   transition: max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
 }
 
+#content {
+  overflow: hidden;
+  will-change: max-height;
+}
+
+:host(.accordion-collapsing) #content {
+  /* stylelint-disable-next-line declaration-no-important */
+  max-height: 0 !important;
+}
+
+:host(.accordion-collapsed) #content {
+  display: none;
+}
+
+:host(.accordion-expanding) #content {
+  max-height: 0;
+}
+
+/**
+ * Prevent margins of content-wrapper
+ * from collapsing, breaking the animation.
+ */
+:host(.accordion-expanding) #content-wrapper {
+  overflow: auto;
+}
+
+:host(.accordion-disabled) #header,
+:host(.accordion-readonly) #header,
+:host(.accordion-disabled) #content,
+:host(.accordion-readonly) #content {
+  pointer-events: none;
+}
+
 /**
  * We do not set the opacity on the
  * host otherwise you would see the
@@ -140,4 +124,12 @@
 :host(.accordion-disabled) #header,
 :host(.accordion-disabled) #content {
   opacity: 0.4;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host,
+  #content {
+    /* stylelint-disable declaration-no-important */
+    transition: none !important;
+  }
 }

package/dist/collection/components/accordion-group/accordion-group.ios.css

@@ -1,13 +1,3 @@
-:host {
-  display: block;
-}
-
-/**
- * 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
@@ -63,12 +53,6 @@
  *   }
  * }
  */
-/**
- * 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
@@ -124,6 +108,10 @@
  *   }
  * }
  */
+:host {
+  display: block;
+}
+
 :host(.accordion-group-expand-inset) {
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;

package/dist/collection/components/accordion-group/accordion-group.js

@@ -3,20 +3,33 @@
  */
 import { Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 /**
- * @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.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class AccordionGroup {
     constructor() {
+        /**
+         * If `true`, all accordions inside of the
+         * accordion group will animate when expanding
+         * or collapsing.
+         */
         this.animated = true;
-        this.multiple = undefined;
-        this.value = undefined;
+        /**
+         * If `true`, the accordion group cannot be interacted with.
+         */
         this.disabled = false;
+        /**
+         * If `true`, the accordion group cannot be interacted with,
+         * but does not alter the opacity.
+         */
         this.readonly = false;
+        /**
+         * Describes the expansion behavior for each accordion.
+         * Possible values are `"compact"` and `"inset"`.
+         * Defaults to `"compact"`.
+         */
         this.expand = 'compact';
-        this.shape = undefined;
     }
     valueChanged() {
         const { value, multiple } = this;
@@ -196,44 +209,28 @@ export class AccordionGroup {
     async getAccordions() {
         return Array.from(this.el.querySelectorAll(':scope > ion-accordion'));
     }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-11328): Remove theme check when shapes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined) {
-            return 'round';
-        }
-        return shape;
-    }
     render() {
         const { disabled, readonly, expand } = this;
-        const theme = getIonTheme(this);
-        const shape = this.getShape();
-        return (h(Host, { key: 'd9ef49372d9542b5a7c79a3cba3c0cf4c45b6ee2', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '82f3e77066fabb4736638ee4c487ad56efd39c63', class: {
+                [mode]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-                [`accordion-group-shape-${shape}`]: shape !== undefined,
-            }, role: "presentation" }, h("slot", { key: '417ad251c41cadafa509fee25e19987a68fef7d4' })));
+            }, role: "presentation" }, h("slot", { key: 'a3c791ea887fc640b512f81d429be465ae902b3d' })));
     }
     static get is() { return "ion-accordion-group"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["accordion-group.ios.scss"],
-            "md": ["accordion-group.md.scss"],
-            "ionic": ["accordion-group.ionic.scss"]
+            "md": ["accordion-group.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["accordion-group.ios.css"],
-            "md": ["accordion-group.md.css"],
-            "ionic": ["accordion-group.ionic.css"]
+            "md": ["accordion-group.md.css"]
         };
     }
     static get properties() {
@@ -252,6 +249,8 @@ export class AccordionGroup {
                     "tags": [],
                     "text": "If `true`, all accordions inside of the\naccordion group will animate when expanding\nor collapsing."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
@@ -270,6 +269,8 @@ export class AccordionGroup {
                     "tags": [],
                     "text": "If `true`, the accordion group can have multiple\naccordion components expanded at the same time."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": false
             },
@@ -287,6 +288,8 @@ export class AccordionGroup {
                     "tags": [],
                     "text": "The value of the accordion group. This controls which\naccordions are expanded.\nThis should be an array of strings only when `multiple=\"true\"`"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -304,6 +307,8 @@ export class AccordionGroup {
                     "tags": [],
                     "text": "If `true`, the accordion group cannot be interacted with."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -322,6 +327,8 @@ export class AccordionGroup {
                     "tags": [],
                     "text": "If `true`, the accordion group cannot be interacted with,\nbut does not alter the opacity."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
@@ -340,26 +347,11 @@ export class AccordionGroup {
                     "tags": [],
                     "text": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "'compact'"
-            },
-            "shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'soft' | 'round' | 'rectangular'",
-                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"soft\"` for an accordion group with slightly rounded corners,\n`\"round\"` for an accordion group with fully rounded corners, or\n`\"rectangular\"` for an accordion group without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes.\nOnly applies when `expand` is set to `\"inset\"`."
-                },
-                "attribute": "shape",
-                "reflect": false
             }
         };
     }

package/dist/collection/components/accordion-group/accordion-group.md.css

@@ -1,13 +1,3 @@
-:host {
-  display: block;
-}
-
-/**
- * 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
@@ -63,12 +53,6 @@
  *   }
  * }
  */
-/**
- * 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
@@ -124,6 +108,10 @@
  *   }
  * }
  */
+:host {
+  display: block;
+}
+
 :host(.accordion-group-expand-inset) {
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
@@ -133,12 +121,6 @@
   margin-bottom: 16px;
 }
 
-/**
- * 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

package/dist/collection/components/action-sheet/action-sheet.ios.css

@@ -1,9 +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
@@ -104,8 +98,8 @@
   --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: block;
@@ -122,8 +116,8 @@
 }
 
 .action-sheet-wrapper {
-  right: 0;
   left: 0;
+  right: 0;
   bottom: 0;
   transform: translate3d(0,  100%,  0);
   display: block;
@@ -210,8 +204,8 @@
 }
 
 .action-sheet-button::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -252,12 +246,6 @@
     opacity: var(--button-background-hover-opacity);
   }
 }
-/**
- * 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
@@ -318,11 +306,11 @@
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
   --button-background: linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent;
   --button-background-activated: var(--ion-text-color, #000);
-  --button-background-activated-opacity: 0.08;
+  --button-background-activated-opacity: .08;
   --button-background-hover: currentColor;
-  --button-background-hover-opacity: 0.04;
+  --button-background-hover-opacity: .04;
   --button-background-focused: currentColor;
-  --button-background-focused-opacity: 0.12;
+  --button-background-focused-opacity: .12;
   --button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, var(--ion-background-color, #fff)));
   --button-background-selected-opacity: 1;
   --button-color: var(--ion-color-primary, #0054e9);