@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11789504012.1a675914

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

@@ -1,3 +1,70 @@
+: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
@@ -54,25 +121,7 @@
  * }
  */
 :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) {
@@ -83,39 +132,6 @@
   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
@@ -124,12 +140,4 @@
 :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.ionic.css

@@ -0,0 +1,93 @@
+/**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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.
+ */
+:host {
+  display: block;
+}
+
+:host {
+  min-width: calc(var(--token-scale-6200, 248px) + var(--token-space-600, var(--token-scale-600, 24px)));
+  background-color: var(--token-bg-neutral-subtlest-default, var(--token-primitives-base-white, #ffffff));
+}
+
+:host(.accordion-group-expand-inset) {
+  -webkit-padding-start: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-inline-start: var(--token-space-100, var(--token-scale-100, 4px));
+  -webkit-padding-end: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-inline-end: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-top: var(--token-space-100, var(--token-scale-100, 4px));
+  padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
+}
+
+:host(.accordion-group-expand-inset.accordion-group-shape-round) {
+  --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
+  border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
+}
+
+:host(.accordion-group-expand-inset.accordion-group-shape-soft) {
+  --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+  border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
+}
+
+:host(.accordion-group-expand-inset.accordion-group-shape-rectangular) {
+  --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
+  border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
+}

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

@@ -1,3 +1,13 @@
+: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
@@ -53,6 +63,12 @@
  *   }
  * }
  */
+/**
+ * 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
@@ -108,10 +124,6 @@
  *   }
  * }
  */
-: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,57 +3,35 @@
  */
 import { Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 AccordionGroup {
-    el;
-    /**
-     * If `true`, all accordions inside of the
-     * accordion group will animate when expanding
-     * or collapsing.
-     */
-    animated = true;
-    /**
-     * If `true`, the accordion group can have multiple
-     * accordion components expanded at the same time.
-     */
-    multiple;
-    /**
-     * The value of the accordion group. This controls which
-     * accordions are expanded.
-     * This should be an array of strings only when `multiple="true"`
-     */
-    value;
-    /**
-     * If `true`, the accordion group cannot be interacted with.
-     */
-    disabled = false;
-    /**
-     * If `true`, the accordion group cannot be interacted with,
-     * but does not alter the opacity.
-     */
-    readonly = false;
-    /**
-     * Describes the expansion behavior for each accordion.
-     * Possible values are `"compact"` and `"inset"`.
-     * Defaults to `"compact"`.
-     */
-    expand = 'compact';
-    /**
-     * Emitted when the value property has changed as a result of a user action such as a click.
-     *
-     * This event will not emit when programmatically setting the `value` property.
-     */
-    ionChange;
-    /**
-     * Emitted when the value property has changed.
-     * This is used to ensure that ion-accordion can respond
-     * to any value property changes.
-     * @internal
-     */
-    ionValueChange;
+    constructor() {
+        /**
+         * If `true`, all accordions inside of the
+         * accordion group will animate when expanding
+         * or collapsing.
+         */
+        this.animated = true;
+        /**
+         * 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';
+    }
     valueChanged() {
         const { value, multiple } = this;
         if (!multiple && Array.isArray(value)) {
@@ -186,7 +164,7 @@ export class AccordionGroup {
              * to the array.
              */
             if (multiple) {
-                const groupValue = value ?? [];
+                const groupValue = value !== null && value !== void 0 ? value : [];
                 const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
                 const valueExists = processedValue.find((v) => v === accordionValue);
                 if (valueExists === undefined && accordionValue !== undefined) {
@@ -203,7 +181,7 @@ export class AccordionGroup {
              * out of the values array or unset the value.
              */
             if (multiple) {
-                const groupValue = value ?? [];
+                const groupValue = value !== null && value !== void 0 ? value : [];
                 const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
                 this.setValue(processedValue.filter((v) => v !== accordionValue));
             }
@@ -232,28 +210,44 @@ 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 mode = getIonMode(this);
-        return (h(Host, { key: 'd1a79a93179474fbba66fcf11a92f4871dacc975', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
+        return (h(Host, { key: '3ff9248922382f2fe2eb9eb2fd895bb9aa91ef2f', class: {
+                [theme]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-            }, role: "presentation" }, h("slot", { key: 'e6b8954b686d1fbb4fc92adb07fddc97a24b0a31' })));
+                [`accordion-group-shape-${shape}`]: shape !== undefined,
+            }, role: "presentation" }, h("slot", { key: 'aaa96bfa504bb020c7897e44ac1502b12bb81faf' })));
     }
     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"]
+            "md": ["accordion-group.md.scss"],
+            "ionic": ["accordion-group.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["accordion-group.ios.css"],
-            "md": ["accordion-group.md.css"]
+            "md": ["accordion-group.md.css"],
+            "ionic": ["accordion-group.ionic.css"]
         };
     }
     static get properties() {
@@ -375,6 +369,25 @@ 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,3 +1,13 @@
+: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
@@ -53,6 +63,12 @@
  *   }
  * }
  */
+/**
+ * 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
@@ -108,10 +124,6 @@
  *   }
  * }
  */
-:host {
-  display: block;
-}
-
 :host(.accordion-group-expand-inset) {
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
@@ -121,6 +133,12 @@
   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