@ionic/core 9.0.6-dev.11790349282.1a877abd → 9.0.6-dev.11790776272.1d27d1bd

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

@@ -0,0 +1,199 @@
+/**
+ * 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;
+  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;
+  }
+}
+:host {
+  position: relative;
+}
+
+:host::after {
+  -webkit-margin-start: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-margin-end: var(--token-space-400, var(--token-scale-400, 16px));
+  margin-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  right: 0;
+  left: 0;
+  bottom: 0;
+  display: block;
+  position: absolute;
+  height: var(--token-border-size-025, var(--token-scale-025, 1px));
+  background-color: var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));
+  content: "";
+  z-index: 3;
+}
+
+:host(.accordion-last)::after {
+  display: none;
+}
+
+:host(.accordion-animated) {
+  transition: all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+:host(.accordion-animated) #content {
+  transition: max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+::slotted(ion-item[slot=header]) {
+  --border-radius: inherit;
+  --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+  --border-width: var(--token-border-size-0, var(--token-scale-0, 0px));
+  --inner-border-width: var(--token-scale-0, 0px);
+  --min-height: var(--token-scale-700, 28px);
+  --padding-top: var(--token-space-300, var(--token-scale-300, 12px));
+  --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+  --padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
+  --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  --background-activated: var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
+  font-size: var(--token-font-size-450, 1.125rem);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-700, 1.75rem);
+}
+
+#content-wrapper {
+  -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
+  -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
+  padding-top: var(--token-space-300, var(--token-scale-300, 12px));
+  padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
+  font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
+  font-size: var(--token-font-size-350, 0.875rem);
+  font-weight: var(--token-font-weight-regular, 400);
+  letter-spacing: var(--token-font-letter-spacing-0, 0);
+  line-height: var(--token-font-line-height-600, 1.5rem);
+  color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
+}
+
+:host(.accordion-disabled)::before {
+  border-radius: inherit;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  background-color: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
+  content: "";
+  pointer-events: none;
+  z-index: 2;
+}

package/dist/collection/components/accordion/accordion.ios.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
@@ -126,13 +142,12 @@
   opacity: 0.4;
 }
 
-@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

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

@@ -3,11 +3,13 @@
  */
 import { Host, h } from "@stencil/core";
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from "../../utils/helpers";
+import { hostContext } from "../../utils/theme";
 import { chevronDown } from "ionicons/icons";
 import { config } from "../../global/config";
-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.
  *
  * @slot header - Content is placed at the top and is used to
  * expand or collapse the accordion item.
@@ -55,6 +57,7 @@ export class Accordion {
         this.state = 1 /* AccordionState.Collapsed */;
         this.isNext = false;
         this.isPrevious = false;
+        this.isLast = false;
         /**
          * Tracks whether a user-initiated interaction has occurred.
          * Animations are disabled until the first interaction happens.
@@ -86,12 +89,6 @@ export class Accordion {
          * but does not alter the opacity.
          */
         this.readonly = false;
-        /**
-         * The toggle icon to use. This icon will be
-         * rotated when the accordion is expanded
-         * or collapsed.
-         */
-        this.toggleIcon = chevronDown;
         /**
          * The slot inside of `ion-item` to
          * place the toggle icon. Defaults to `"end"`.
@@ -159,7 +156,7 @@ export class Accordion {
             if (!ionItem) {
                 return;
             }
-            const { toggleIconSlot, toggleIcon } = this;
+            const { accordionToggleIcon, toggleIconSlot } = this;
             /**
              * Check if there already is a toggle icon.
              * If so, do not add another one.
@@ -172,7 +169,7 @@ export class Accordion {
             iconEl.slot = toggleIconSlot;
             iconEl.lazy = false;
             iconEl.classList.add('ion-accordion-toggle-icon');
-            iconEl.icon = toggleIcon;
+            iconEl.icon = accordionToggleIcon;
             iconEl.setAttribute('aria-hidden', 'true');
             ionItem.appendChild(iconEl);
         };
@@ -292,6 +289,8 @@ export class Accordion {
             }
             const value = accordionGroup.value;
             const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
+            const nextAccordion = this.getNextSibling();
+            this.isLast = nextAccordion === undefined;
             if (shouldExpand) {
                 this.expandAccordion();
                 this.isNext = this.isPrevious = false;
@@ -305,7 +304,6 @@ export class Accordion {
                  * applied. Check to see if the
                  * next or previous accordion is selected.
                  */
-                const nextAccordion = this.getNextSibling();
                 const nextAccordionValue = nextAccordion?.value;
                 if (nextAccordionValue !== undefined) {
                     this.isPrevious = Array.isArray(value) ? value.includes(nextAccordionValue) : value === nextAccordionValue;
@@ -318,9 +316,6 @@ export class Accordion {
             }
         };
         this.getNextSibling = () => {
-            if (!this.el) {
-                return;
-            }
             const nextSibling = this.el.nextElementSibling;
             if (nextSibling?.tagName !== 'ION-ACCORDION') {
                 return;
@@ -328,9 +323,6 @@ export class Accordion {
             return nextSibling;
         };
         this.getPreviousSibling = () => {
-            if (!this.el) {
-                return;
-            }
             const previousSibling = this.el.previousElementSibling;
             if (previousSibling?.tagName !== 'ION-ACCORDION') {
                 return;
@@ -371,6 +363,19 @@ export class Accordion {
             this.setAria(expanded);
         });
     }
+    /**
+     * Get the icon to use for the toggle icon.
+     * If an icon is set on the component, use that.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get accordionToggleIcon() {
+        // Return the icon if it is explicitly set
+        if (this.toggleIcon != null) {
+            return this.toggleIcon;
+        }
+        return config.get('accordionToggleIcon', chevronDown);
+    }
     toggleExpanded() {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
         if (disabled || readonly)
@@ -395,23 +400,25 @@ export class Accordion {
     }
     render() {
         const { disabled, readonly } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (h(Host, { key: '5c58b3809a4636d69f0f9957ecf1f50c42cdfc03', class: {
-                [mode]: true,
+        return (h(Host, { key: '815dda5c42051851dfb17312fee6eb60421b680b', class: {
+                [theme]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
                 'accordion-collapsing': this.state === 2 /* AccordionState.Collapsing */,
                 'accordion-collapsed': this.state === 1 /* AccordionState.Collapsed */,
                 'accordion-next': this.isNext,
                 'accordion-previous': this.isPrevious,
+                'accordion-last': this.isLast,
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-            }, tabindex: disabled ? '-1' : undefined }, h("div", { key: 'f76bc02347639b41c9a5be8a9488a8be8559cba7', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: 'e01744bf0af3200239e82c60c632ed36295db2da', name: "header" })), h("div", { key: 'c613345a7e244ee361f76ff4ebed139d2a1b9572', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '943b65d9a129759b4c213974ae5ed777b5f6166e', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'b0df520dad9d5557df63a35f8206ada4a765d238', name: "content" })))));
+                'in-accordion-group-expand-inset': hostContext('.accordion-group-expand-inset', this.el),
+            }, tabindex: disabled ? '-1' : undefined }, h("div", { key: '0361184ad0b1a2dbb8879292313fc6ea4d6915aa', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '1176aed8aebd66a17d365f2ecab4a40165a14a17', name: "header" })), h("div", { key: 'ebe6eabeedaee6a9fdcf8c989e706f5f42af54c2', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '5c9ebc847e8f161c8fcaf6f4af9ad42ce22217ac', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'a45d5a106dc635d4a8790cdd4fdf04c1b8e25987', name: "content" })))));
     }
     static get is() { return "ion-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -419,13 +426,15 @@ export class Accordion {
     static get originalStyleUrls() {
         return {
             "ios": ["accordion.ios.scss"],
-            "md": ["accordion.md.scss"]
+            "md": ["accordion.md.scss"],
+            "ionic": ["accordion.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["accordion.ios.css"],
-            "md": ["accordion.md.css"]
+            "md": ["accordion.md.css"],
+            "ionic": ["accordion.ionic.css"]
         };
     }
     static get properties() {
@@ -495,11 +504,11 @@ export class Accordion {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed."
@@ -507,8 +516,7 @@ export class Accordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "toggle-icon",
-                "defaultValue": "chevronDown"
+                "attribute": "toggle-icon"
             },
             "toggleIconSlot": {
                 "type": "string",
@@ -537,6 +545,7 @@ export class Accordion {
             "state": {},
             "isNext": {},
             "isPrevious": {},
+            "isLast": {},
             "hasInteracted": {}
         };
     }

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;
-  }
 }