voyager-ionic-core 8.7.2 → 8.7.9

package/dist/collection/components/fab-button/fab-button.js

@@ -113,7 +113,6 @@ export class FabButton {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -134,11 +133,11 @@ export class FabButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "color"
             },
             "activated": {
                 "type": "boolean",
-                "attribute": "activated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -154,11 +153,11 @@ export class FabButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "activated",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -174,11 +173,11 @@ export class FabButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "download": {
                 "type": "string",
-                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -193,11 +192,11 @@ export class FabButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "download"
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -212,11 +211,11 @@ export class FabButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "href"
             },
             "rel": {
                 "type": "string",
-                "attribute": "rel",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -231,11 +230,11 @@ export class FabButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "rel"
             },
             "routerDirection": {
                 "type": "string",
-                "attribute": "router-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "RouterDirection",
@@ -257,11 +256,11 @@ export class FabButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "router-direction",
                 "defaultValue": "'forward'"
             },
             "routerAnimation": {
                 "type": "unknown",
-                "attribute": "router-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder | undefined",
@@ -285,7 +284,6 @@ export class FabButton {
             },
             "target": {
                 "type": "string",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -300,11 +298,11 @@ export class FabButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "target"
             },
             "show": {
                 "type": "boolean",
-                "attribute": "show",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -320,11 +318,11 @@ export class FabButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "show",
                 "defaultValue": "false"
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -340,11 +338,11 @@ export class FabButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "translucent",
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'submit' | 'reset' | 'button'",
@@ -360,11 +358,11 @@ export class FabButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'button'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small'",
@@ -379,15 +377,15 @@ export class FabButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "closeIcon": {
-                "type": "string",
-                "attribute": "close-icon",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -399,6 +397,7 @@ export class FabButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "close-icon",
                 "defaultValue": "close"
             }
         };

package/dist/collection/components/fab-list/fab-list.js

@@ -46,7 +46,6 @@ export class FabList {
         return {
             "activated": {
                 "type": "boolean",
-                "attribute": "activated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -62,11 +61,11 @@ export class FabList {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "activated",
                 "defaultValue": "false"
             },
             "side": {
                 "type": "string",
-                "attribute": "side",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'top' | 'bottom'",
@@ -82,6 +81,7 @@ export class FabList {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "side",
                 "defaultValue": "'bottom'"
             }
         };

package/dist/collection/components/footer/footer.js

@@ -114,7 +114,6 @@ export class Footer {
         return {
             "collapse": {
                 "type": "string",
-                "attribute": "collapse",
                 "mutable": false,
                 "complexType": {
                     "original": "'fade'",
@@ -129,11 +128,11 @@ export class Footer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "collapse"
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -149,6 +148,7 @@ export class Footer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "translucent",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/grid/grid.js

@@ -33,7 +33,6 @@ export class Grid {
         return {
             "fixed": {
                 "type": "boolean",
-                "attribute": "fixed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -49,6 +48,7 @@ export class Grid {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "fixed",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/header/header.ios.css

@@ -152,6 +152,15 @@ ion-header ion-toolbar:first-of-type {
   --opacity-scale: inherit;
 }
 
+/**
+ * Override styles applied during the page transition to prevent
+ * header flickering.
+ */
+.header-collapse-fade.header-transitioning ion-toolbar {
+  --background: transparent;
+  --border-style: none;
+}
+
 .header-collapse-condense {
   z-index: 9;
 }
@@ -175,7 +184,6 @@ ion-header ion-toolbar:first-of-type {
  * since it needs to blend in with the header above it.
  */
 .header-collapse-condense ion-toolbar {
-  --background: var(--ion-background-color, #fff);
   z-index: 0;
 }
 
@@ -201,6 +209,24 @@ ion-header ion-toolbar:first-of-type {
   transition: all 0.2s ease-in-out;
 }
 
+/**
+ * Large title toolbar should just use the content background
+ * since it needs to blend in with the header above it.
+ */
+.header-collapse-condense ion-toolbar,
+.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
+  --background: var(--ion-background-color, #fff);
+}
+
+/**
+ * Override styles applied during the page transition to prevent
+ * header flickering.
+ */
+.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar {
+  --border-style: none;
+  --opacity-scale: 1;
+}
+
 .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
 .header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
   opacity: 0;

package/dist/collection/components/header/header.js

@@ -6,7 +6,7 @@ import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../..
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
-import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, } from "./header.utils";
+import { cloneElement, createHeaderIndex, handleContentScroll, handleHeaderFade, handleToolbarIntersection, setHeaderActive, setToolbarBackgroundOpacity, getRoleType, } from "./header.utils";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
@@ -145,16 +145,17 @@ export class Header {
         const { translucent, inheritedAttributes } = this;
         const mode = getIonMode(this);
         const collapse = this.collapse || 'none';
+        const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
-        const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (h(Host, Object.assign({ key: 'b6cc27f0b08afc9fcc889683525da765d80ba672', role: roleType, class: {
+        const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
+        return (h(Host, Object.assign({ key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '395766d4dcee3398bc91960db21f922095292f14', class: "header-background" }), h("slot", { key: '09a67ece27b258ff1248805d43d92a49b2c6859a' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
     }
     static get is() { return "ion-header"; }
     static get originalStyleUrls() {
@@ -173,7 +174,6 @@ export class Header {
         return {
             "collapse": {
                 "type": "string",
-                "attribute": "collapse",
                 "mutable": false,
                 "complexType": {
                     "original": "'condense' | 'fade'",
@@ -188,11 +188,11 @@ export class Header {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "collapse"
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -208,6 +208,7 @@ export class Header {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "translucent",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/header/header.utils.js

@@ -4,6 +4,8 @@
 import { readTask, writeTask } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
 const TRANSITION = 'all 0.2s ease-in-out';
+const ROLE_NONE = 'none';
+const ROLE_BANNER = 'banner';
 export const cloneElement = (tagName) => {
     const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
     if (getCachedEl !== null) {
@@ -130,6 +132,7 @@ export const setHeaderActive = (headerIndex, active = true) => {
     const toolbars = headerIndex.toolbars;
     const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
     if (active) {
+        headerEl.setAttribute('role', ROLE_BANNER);
         headerEl.classList.remove('header-collapse-condense-inactive');
         ionTitles.forEach((ionTitle) => {
             if (ionTitle) {
@@ -138,6 +141,16 @@ export const setHeaderActive = (headerIndex, active = true) => {
         });
     }
     else {
+        /**
+         * There can only be one banner landmark per page.
+         * By default, all ion-headers have the banner role.
+         * This causes an accessibility issue when using a
+         * condensed header since there are two ion-headers
+         * on the page at once (active and inactive).
+         * To solve this, the role needs to be toggled
+         * based on which header is active.
+         */
+        headerEl.setAttribute('role', ROLE_NONE);
         headerEl.classList.add('header-collapse-condense-inactive');
         /**
          * The small title should only be accessed by screen readers
@@ -197,3 +210,27 @@ export const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
         });
     });
 };
+/**
+ * Get the role type for the ion-header.
+ *
+ * @param isInsideMenu If ion-header is inside ion-menu.
+ * @param isCondensed If ion-header has collapse="condense".
+ * @param mode The current mode.
+ * @returns 'none' if inside ion-menu or if condensed in md
+ * mode, otherwise 'banner'.
+ */
+export const getRoleType = (isInsideMenu, isCondensed, mode) => {
+    // If the header is inside a menu, it should not have the banner role.
+    if (isInsideMenu) {
+        return ROLE_NONE;
+    }
+    /**
+     * Only apply role="none" to `md` mode condensed headers
+     * since the large header is never shown.
+     */
+    if (isCondensed && mode === 'md') {
+        return ROLE_NONE;
+    }
+    // Default to banner role.
+    return ROLE_BANNER;
+};

package/dist/collection/components/img/img.js

@@ -85,7 +85,6 @@ export class Img {
         return {
             "alt": {
                 "type": "string",
-                "attribute": "alt",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -100,11 +99,11 @@ export class Img {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "alt"
             },
             "src": {
                 "type": "string",
-                "attribute": "src",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -119,7 +118,8 @@ export class Img {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "src"
             }
         };
     }

package/dist/collection/components/infinite-scroll/infinite-scroll.js

@@ -210,7 +210,6 @@ export class InfiniteScroll {
         return {
             "threshold": {
                 "type": "string",
-                "attribute": "threshold",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -226,11 +225,11 @@ export class InfiniteScroll {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "threshold",
                 "defaultValue": "'15%'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -246,11 +245,11 @@ export class InfiniteScroll {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom'",
@@ -266,6 +265,7 @@ export class InfiniteScroll {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "'bottom'"
             }
         };

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js

@@ -48,7 +48,6 @@ export class InfiniteScrollContent {
         return {
             "loadingSpinner": {
                 "type": "string",
-                "attribute": "loading-spinner",
                 "mutable": true,
                 "complexType": {
                     "original": "SpinnerTypes | null",
@@ -69,11 +68,11 @@ export class InfiniteScrollContent {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "loading-spinner"
             },
             "loadingText": {
                 "type": "string",
-                "attribute": "loading-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | IonicSafeString",
@@ -94,7 +93,8 @@ export class InfiniteScrollContent {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "loading-text"
             }
         };
     }