@ionic/core 9.0.11-dev.11793890855.1bf6a6e5 → 9.0.11-dev.11793906456.1ea7a0a7

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,10 +3,9 @@
  */
 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() {
@@ -210,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: '3ff9248922382f2fe2eb9eb2fd895bb9aa91ef2f', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'd1a79a93179474fbba66fcf11a92f4871dacc975', 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: 'aaa96bfa504bb020c7897e44ac1502b12bb81faf' })));
+            }, role: "presentation" }, h("slot", { key: 'e6b8954b686d1fbb4fc92adb07fddc97a24b0a31' })));
     }
     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() {
@@ -369,25 +352,6 @@ export class AccordionGroup {
                 "reflect": false,
                 "attribute": "expand",
                 "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\"`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "shape"
             }
         };
     }

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,64 +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.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -118,18 +57,36 @@
 .alert-radio-label-has-rich-content,
 .alert-checkbox-label-has-rich-content,
 .select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
   gap: 16px;
 }
 
+/**
+ * Outer label container has rich content
+ * (start, content, description, end) that needs the
+ * label to span the available row width.
+ */
+.action-sheet-button-label-has-rich-content,
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content,
+.select-option-content {
+  flex: 1;
+}
+
 .action-sheet-button-label-text,
 .alert-checkbox-label-text,
 .alert-radio-label-text,
 .select-option-label-text {
+  display: flex;
+  align-items: center;
   gap: 12px;
 }
 
 .select-option-start,
 .select-option-end {
+  display: flex;
+  align-items: center;
   gap: 8px;
 }
 
@@ -138,16 +95,39 @@
   padding-right: 0;
   padding-top: 5px;
   padding-bottom: 0;
+  display: block;
   color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   font-size: 0.75rem;
 }
 
 /**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
+ * Non-rich labels are plain text and should ellipsize when they
+ * overflow the row. Rich-content labels switch to flex so the
+ * start / content / end pieces can lay out side-by-side and wrap.
  */
+.select-option-label:not(.select-option-label-has-rich-content) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.select-option-label-has-rich-content {
+  display: flex;
+  align-items: center;
+}
+
+ion-radio.select-option-has-rich-content::part(label),
+ion-checkbox.select-option-has-rich-content::part(label),
+.select-option-content {
+  flex: 1;
+  /**
+   * Let rich content wrap instead of inheriting the label part's
+   * single-line truncation, so arbitrary slotted elements render
+   * without clipping.
+   */
+  white-space: normal;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -236,12 +216,6 @@
   padding-inline-end: 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
@@ -297,94 +271,6 @@
  *   }
  * }
  */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-/**
- * Outer label container has rich content
- * (start, content, description, end) that needs the
- * label to span the available row width.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-content {
-  flex: 1;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-start,
-.select-option-end {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-description {
-  display: block;
-}
-
-/**
- * Non-rich labels are plain text and should ellipsize when they
- * overflow the row. Rich-content labels switch to flex so the
- * start / content / end pieces can lay out side-by-side and wrap.
- */
-.select-option-label:not(.select-option-label-has-rich-content) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-ion-radio.select-option-has-rich-content::part(label),
-ion-checkbox.select-option-has-rich-content::part(label),
-.select-option-content {
-  flex: 1;
-  /**
-   * Let rich content wrap instead of inheriting the label part's
-   * single-line truncation, so arbitrary slotted elements render
-   * without clipping.
-   */
-  white-space: normal;
-}
-
 :host {
   /**
    * @prop --background: Background of the action sheet group
@@ -430,15 +316,17 @@ ion-checkbox.select-option-has-rich-content::part(label),
   --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;
   position: fixed;
   outline: none;
+  font-family: var(--ion-font-family, inherit);
   touch-action: none;
   user-select: none;
+  z-index: 1001;
 }
 
 :host(.overlay-hidden) {
@@ -446,8 +334,8 @@ ion-checkbox.select-option-has-rich-content::part(label),
 }
 
 .action-sheet-wrapper {
-  right: 0;
   left: 0;
+  right: 0;
   bottom: 0;
   transform: translate3d(0,  100%,  0);
   display: block;
@@ -458,6 +346,7 @@ ion-checkbox.select-option-has-rich-content::part(label),
   height: var(--height);
   min-height: var(--min-height);
   max-height: var(--max-height);
+  z-index: 10;
   pointer-events: none;
 }
 
@@ -537,8 +426,8 @@ ion-checkbox.select-option-has-rich-content::part(label),
 }
 
 .action-sheet-button::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -549,7 +438,6 @@ ion-checkbox.select-option-has-rich-content::part(label),
 .action-sheet-selected {
   color: var(--button-color-selected);
 }
-
 .action-sheet-selected::after {
   background: var(--button-background-selected);
   opacity: var(--button-background-selected-opacity);
@@ -558,7 +446,6 @@ ion-checkbox.select-option-has-rich-content::part(label),
 .action-sheet-button.ion-activated {
   color: var(--button-color-activated);
 }
-
 .action-sheet-button.ion-activated::after {
   background: var(--button-background-activated);
   opacity: var(--button-background-activated-opacity);
@@ -567,12 +454,10 @@ ion-checkbox.select-option-has-rich-content::part(label),
 .action-sheet-button.ion-focused:not(.ion-activated) {
   color: var(--button-color-focused);
 }
-
 .action-sheet-button.ion-focused:not(.ion-activated)::after {
   background: var(--button-background-focused);
   opacity: var(--button-background-focused-opacity);
 }
-
 .action-sheet-button.ion-focused:not(.ion-activated).action-sheet-selected::after {
   background: var(--button-background-focused, var(--button-background-selected));
   opacity: var(--button-background-focused-opacity, var(--button-background-selected-opacity));
@@ -587,21 +472,6 @@ ion-checkbox.select-option-has-rich-content::part(label),
     opacity: var(--button-background-hover-opacity);
   }
 }
-:host {
-  font-family: var(--ion-font-family, inherit);
-  z-index: 1001;
-}
-
-.action-sheet-wrapper {
-  z-index: 10;
-}
-
-/**
- * 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
@@ -662,11 +532,11 @@ ion-checkbox.select-option-has-rich-content::part(label),
   --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);