@ionic/core 8.8.7-dev.11779467048.1641d05e → 8.8.7-dev.11779921691.1777274a

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -34,10 +34,10 @@ export class MenuToggle {
     render() {
         const theme = getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '973372d778e7902eac28b2a6a5e74165b51d60d6', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: 'c3ddce789a90d720769919ebf854d05cc75f599e', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [theme]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '760b8ffe93ae490b62f7ad6fc94ecbc8521ead64' })));
+            } }, h("slot", { key: 'f1334ba9d20148b673a0b6185ab5ef92f448f720' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -280,7 +280,7 @@ ion-backdrop {
   border-radius: 8px;
   width: 36px;
   height: 5px;
-  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
+  background: var(--ion-background-color-step-350, #c0c0be);
 }
 .modal-handle::before {
   /**

package/dist/collection/components/modal/modal.js

@@ -1179,20 +1179,20 @@ export class Modal {
         const isHandleCycle = handleBehavior === 'cycle';
         const shape = this.getShape();
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '2d3a31da1613386cf90f0d59d6b26c9a5b654d2a', "no-router": true,
+        return (h(Host, Object.assign({ key: 'e4b82f87c76d3ad5aae7794c4c882e6c95ef7c97', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'baf6be86f7d5053d870a4ad794c1d584985c5ba0', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { key: 'e3b76699bc31e8dd29b09ed6091d8f9003865e15', class: "modal-shadow" }), h("div", Object.assign({ key: '3043e51b33a1e394ae731ebc49fd4df7ef71be99',
+            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '70f0240dd59e38587c6fbbc2ade4fcb094292b48', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && h("div", { key: '9c2b8fd94a37c39739de9b5b12d541685e4fb26c', class: "modal-shadow" }), h("div", Object.assign({ key: '55eb3782bd130447dcb935097366b85941422220',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '19e71dc84abf18b21be76ec35229c5c5e7410c6e', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'bc685478939603b48fd2530cc0d24beb138f5918', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '9b868070ee1be064e6b385f4783fc428c78d8084', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '96d518c5ee89e7b16929cd6fd682347045d5c231', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -280,7 +280,7 @@ ion-backdrop {
   border-radius: 8px;
   width: 36px;
   height: 5px;
-  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
+  background: var(--ion-background-color-step-350, #c0c0be);
 }
 .modal-handle::before {
   /**

package/dist/collection/components/nav/nav.js

@@ -676,7 +676,7 @@ export class Nav {
             }
             : undefined;
         const theme = getIonTheme(this);
-        const mode = getIonMode(this, theme);
+        const mode = getIonMode(this);
         const enteringEl = enteringView.element;
         // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const leavingEl = leavingView && leavingView.element;
@@ -834,7 +834,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: '87188d8fb4232d448ef2ad8e3db29c3730b1ff9e' });
+        return h("slot", { key: 'dde823ce29458cbb89a184f61063d727928453fa' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -1620,7 +1620,7 @@ export class Nav {
                             "docs": "The component params."
                         }, {
                             "name": "direction",
-                            "type": "\"root\" | \"back\" | \"forward\"",
+                            "type": "\"root\" | \"forward\" | \"back\"",
                             "docs": "A direction hint."
                         }, {
                             "name": "animation",

package/dist/collection/components/nav-link/nav-link.js

@@ -18,7 +18,7 @@ export class NavLink {
         };
     }
     render() {
-        return h(Host, { key: '38f3d2e7a3ae4e57ac1479436c143e6820d25cd2', onClick: this.onClick });
+        return h(Host, { key: '61246716bdf9556db90e07680bc1a289f9658d5c', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

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

@@ -134,6 +134,6 @@
 }
 
 :host {
-  --color: var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6));
+  --color: var(--ion-text-color-step-650, #a6a6a6);
   font-size: max(14px, 1rem);
 }

package/dist/collection/components/note/note.js

@@ -11,9 +11,9 @@ import { getIonTheme } from "../../global/ionic-global";
 export class Note {
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '34a74796fc2e41549100c6611a5900d60c8d688d', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a8470df6b8fb8ca327a282fc23705bc230f13a40', class: createColorClasses(this.color, {
                 [theme]: true,
-            }) }, h("slot", { key: 'ea4c2e3b5666d10ca312e175db200134d8a30382' })));
+            }) }, h("slot", { key: '07cbdef68f010b06638f359f70dff3f1d659d899' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }

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

@@ -134,6 +134,6 @@
 }
 
 :host {
-  --color: var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));
+  --color: var(--ion-text-color-step-400, #666666);
   font-size: 0.875rem;
 }

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

@@ -238,5 +238,5 @@
 }
 
 :host .picker-highlight {
-  background: var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)));
+  background: var(--highlight-background, var(--ion-background-color-step-150, #eeeeef));
 }

package/dist/collection/components/picker-column-option/picker-column-option.js

@@ -95,10 +95,10 @@ export class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '54c254f01017aa47aac76c0833f9ef04bf20bdc9', class: createColorClasses(color, {
+        return (h(Host, { key: '9ceebae71b6df0b01f36691d82d716f6756625d9', class: createColorClasses(color, {
                 [theme]: true,
                 ['option-disabled']: disabled,
-            }) }, h("div", { key: '36b21f1b7d9a5b05f0211ce8be90f66578641224', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: '154bf9ca37ca1c6e5d34d42c16b04203e83210be' }))));
+            }) }, h("div", { key: '1f26246d601779dadfaf055d195e2a4959180f5a', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'eed413474a8b7ec7a73da27fa72a2d0a9a2aae2b' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-legacy/picker.ios.css

@@ -232,7 +232,7 @@
 :host {
   --background: var(--ion-background-color, #fff);
   --border-width: 1px 0 0;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-250, #c8c7cc)));
   --height: 260px;
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.26);
   color: var(--ion-item-color, var(--ion-text-color, #000));
@@ -272,7 +272,7 @@
   padding-bottom: 0;
   height: 44px;
   background: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, var(--ion-color-primary-bold));
   font-size: 16px;
 }
 

package/dist/collection/components/picker-legacy/picker.js

@@ -208,11 +208,11 @@ export class Picker {
     render() {
         const { htmlAttributes } = this;
         const theme = getIonTheme(this);
-        return (h(Host, Object.assign({ key: 'b0c1fc8eee284f03c696f0c8aaa29f4a6d7be0be', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'efcc823fad9cb37c1379bef4f4b84c6461f3a3a6', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [theme]: true,
                 // Used internally for styling
-                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'b56a9f94c7a95efc047d7be95e76ba3a2284801d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'f134d49a3afcfd2a809147b55949cea43fc34462', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '9ae98dc10164e182a13eaef2105894a717a03cc4', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '96acad60c1214e13098282182fa855b19f0a386c', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'af26cd644ed9bb50c22f06624da3726e7e60426f', class: "picker-columns" }, h("div", { key: 'c0d8bf724f7dc081c314bef61fa08894a75c657b', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '7315333742b5b0c9533f30e5ce3dfc6ec9112dc1', class: "picker-below-highlight" }))), h("div", { key: '454546aaf27319ae7973e74063c0a026cfc88834', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '3f44bf34e039210ae149c590c393ee9f7fb85da0', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c2a51a89c525b1a22cbc8583cd30f41c3c356d4f', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '23837ffe309d0aad9b8ea09d7ac94d21040ef0d7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '91ba7e553d570768142715ded4bcc27fceedbce4', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '22661cafeb555f1435ec1e0a122404a48136095b', class: "picker-columns" }, h("div", { key: '5f3db32468b8c60f63c70d81a27b18cce6f2e259', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '1bae6b170125b1671a480506ba73636b42b65909', class: "picker-below-highlight" }))), h("div", { key: '91beb94ce537122fbd6cd0c2bd3c00f908d0fefe', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/picker-legacy/picker.md.css

@@ -232,7 +232,7 @@
 :host {
   --background: var(--ion-background-color, #fff);
   --border-width: 0.55px 0 0;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))));
   --height: 260px;
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.26);
   color: var(--ion-item-color, var(--ion-text-color, #000));
@@ -258,7 +258,7 @@
   padding-bottom: 0;
   height: 44px;
   background: transparent;
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, var(--ion-color-primary-bold));
   font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
@@ -276,7 +276,7 @@
   position: absolute;
   width: 100%;
   height: 81px;
-  border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))));
   background: linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);
   z-index: 10;
 }
@@ -290,7 +290,7 @@
   position: absolute;
   width: 100%;
   height: 119px;
-  border-top: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));
+  border-top: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13))));
   background: linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);
   z-index: 11;
 }

package/dist/collection/components/picker-legacy-column/picker-column.js

@@ -335,9 +335,9 @@ export class PickerColumnCmp {
     render() {
         const col = this.col;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '5751788e3b7ecd2fe269c096db883b0681646270', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '66a5b7f51aa1ee343dbad3830e03933dbdab27ed', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: '833f3309c8c77e1faa773f7eaa066516dfd51067', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'a39f38e60938e70425e4d7674f5e481885b6b548', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'a2f1e0eab834c85e84cee0a716eb1083aa6c7741', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '19a170752bacdabd50c719f6d1aa9e58a2bd830b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '871671f796aa6a1f78e07ab2599d94b5fd8cd0bf', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '89792e1dc75a4359a4706a8fd1846fe29b866173', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {

package/dist/collection/components/picker-legacy-column/picker-column.md.css

@@ -230,5 +230,5 @@
 .picker-prefix,
 .picker-suffix,
 .picker-opt.picker-opt-selected {
-  color: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, var(--ion-color-primary-bold));
 }

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

@@ -276,7 +276,7 @@
 }
 
 :host(.popover-desktop) .popover-content {
-  border: 0.5px solid var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+  border: 0.5px solid var(--ion-background-color-step-100, #e6e6e6);
 }
 
 .popover-arrow {

package/dist/collection/components/popover/popover.js

@@ -468,9 +468,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '43128f8b7e57f08a451af1a237534d0517d86eda', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'ba8801218aa8543eae0e8e2c57fbd0d4fbb2c8ff', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'c087932225f8fc872af7451fd847ab2667ae6ffb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '25fb1c8320099d1170f3a61766760c694d84bf0b', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '552f4b70758470fac0d2e2bd114eaf5d9b81a3ac', class: "popover-arrow", part: "arrow" }), h("div", { key: 'f19c1d60b0f4ff86bf308c5837637cd4bbd6814e', class: "popover-content", part: "content" }, h("slot", { key: '00870a41134268d84e239d305bf2daed7b049c34' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '0301c9a9ed70cf34445e89484cd4145dc98f3d4c', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'd017b8cda9eb474cf990222c90539697308a1c8f', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: 'fdf8ec2e98a29bfa3e26788e4a432ff402800202', class: "popover-arrow", part: "arrow" }), h("div", { key: '9498eace0a68daf39e7c0580ca46e33a9791f62c', class: "popover-content", part: "content" }, h("slot", { key: '0f10c7e335d2f4f75e10d7fde5244c3dd5ae0bb4' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.css

@@ -0,0 +1,281 @@
+/**
+ * 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;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --ion-progress-bar-height: Height of the progress bar
+   *
+   * @prop --ion-progress-bar-determinate-progress-default-background: Background of the filled progress indicator in a determinate progress bar
+   * @prop --ion-progress-bar-determinate-progress-semantic-default-background: Background of the filled progress indicator in a determinate progress bar when a semantic color is applied
+   *
+   * @prop --ion-progress-bar-determinate-buffer-bar-default-background: Background of the track representing the buffered amount in a determinate progress bar
+   * @prop --ion-progress-bar-determinate-buffer-bar-semantic-default-background: Background of the track representing the buffered amount in a determinate progress bar when a semantic color is applied
+   * @prop --ion-progress-bar-determinate-buffer-bar-solid-default-background: Background of the track representing the buffered amount in a determinate progress bar when it's fully buffered
+   *
+   * @prop --ion-progress-bar-determinate-buffer-circles-default-background: Background of the buffer circles in a determinate progress bar
+   * @prop --ion-progress-bar-determinate-buffer-circles-semantic-default-background: Background of the buffer circles in a determinate progress bar when a semantic color is applied
+   * @prop --ion-progress-bar-indeterminate-progress-default-background: Background of the filled progress indicator in an indeterminate progress bar
+   * @prop --ion-progress-bar-indeterminate-progress-semantic-default-background: Background of the filled progress indicator in an indeterminate progress bar when a semantic color is applied
+   *
+   * @prop --ion-progress-bar-indeterminate-buffer-bar-default-background: Background of the track representing the buffered amount in an indeterminate progress bar
+   * @prop --ion-progress-bar-indeterminate-buffer-bar-semantic-default-background: Background of the track representing the buffered amount in an indeterminate progress bar when a semantic color is applied
+   * @prop --ion-progress-bar-indeterminate-buffer-bar-solid-default-background: Background of the track representing the buffered amount in an indeterminate progress bar when it's fully buffered
+   *
+   * @prop --ion-progress-bar-shape-round-border-radius: Border radius of the `round` progress bar shape
+   * @prop --ion-progress-bar-shape-rectangular-border-radius: Border radius of the `rectangular` progress bar shape
+   */
+  display: block;
+  position: relative;
+  width: 100%;
+  height: var(--ion-progress-bar-height);
+  contain: strict;
+  direction: ltr;
+  overflow: hidden;
+}
+
+.progress,
+.progress-indeterminate,
+.indeterminate-bar-primary,
+.indeterminate-bar-secondary,
+.progress-buffer-bar {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.progress,
+.progress-indeterminate {
+  z-index: 2;
+}
+
+.progress-buffer-bar {
+  z-index: 1;
+}
+
+.buffer-circles-container,
+.buffer-circles {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.buffer-circles-container {
+  overflow: hidden;
+}
+
+.buffer-circles-container-hidden {
+  display: none;
+}
+
+.buffer-circles {
+  /* stylelint-disable property-disallowed-list */
+  right: -10px;
+  left: -10px;
+  /* stylelint-enable property-disallowed-list */
+}
+
+.progress,
+.progress-buffer-bar,
+.buffer-circles-container {
+  /* stylelint-disable-next-line property-disallowed-list */
+  transform-origin: left top;
+  transition: transform 150ms linear;
+}
+
+.progress {
+  background: var(--ion-progress-bar-determinate-progress-default-background);
+}
+
+:host(.progress-bar-type-determinate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-determinate-buffer-bar-default-background);
+}
+
+.buffer-circles {
+  background-image: radial-gradient(ellipse at center, var(--ion-progress-bar-determinate-buffer-circles-default-background) 0%, var(--ion-progress-bar-determinate-buffer-circles-default-background) 30%, transparent 30%);
+  /* stylelint-disable property-disallowed-list */
+  background-repeat: repeat-x;
+  background-position: 5px center;
+  background-size: 10px 10px;
+  /* stylelint-enable property-disallowed-list */
+  z-index: 0;
+  animation: buffering 450ms infinite linear;
+}
+
+.progress-indeterminate {
+  background: var(--ion-progress-bar-indeterminate-progress-default-background);
+}
+
+:host(.progress-bar-type-indeterminate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-indeterminate-buffer-bar-default-background);
+}
+
+:host(.progress-bar-shape-round) {
+  border-radius: var(--ion-progress-bar-shape-round-border-radius);
+}
+
+:host(.progress-bar-shape-rectangular) {
+  border-radius: var(--ion-progress-bar-shape-rectangular-border-radius);
+}
+
+:host(.ion-color) .progress {
+  background: var(--ion-progress-bar-determinate-progress-semantic-default-background);
+}
+
+:host(.ion-color.progress-bar-type-determinate:not(.progress-bar-solid)) .progress-buffer-bar {
+  background: var(--ion-progress-bar-determinate-buffer-bar-semantic-default-background, var(--ion-progress-bar-determinate-buffer-bar-default-background));
+}
+
+:host(.ion-color) .buffer-circles {
+  background-image: radial-gradient(ellipse at center, var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 0%, var(--ion-progress-bar-determinate-buffer-circles-semantic-default-background) 30%, transparent 30%);
+}
+
+:host(.ion-color) .progress-indeterminate {
+  background: var(--ion-progress-bar-indeterminate-progress-semantic-default-background);
+}
+
+:host(.ion-color.progress-bar-type-indeterminate:not(.progress-bar-solid)) .progress-buffer-bar {
+  background: var(--ion-progress-bar-indeterminate-buffer-bar-semantic-default-background, var(--ion-progress-bar-indeterminate-buffer-bar-default-background));
+}
+
+:host(.progress-bar-reversed) {
+  transform: scaleX(-1);
+}
+
+:host(.progress-paused) .indeterminate-bar-secondary,
+:host(.progress-paused) .indeterminate-bar-primary,
+:host(.progress-paused) .buffer-circles {
+  animation-play-state: paused;
+}
+
+:host(.progress-bar-solid.progress-bar-type-determinate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-determinate-buffer-bar-solid-default-background, var(--ion-progress-bar-determinate-buffer-bar-default-background));
+}
+
+:host(.progress-bar-solid.progress-bar-type-indeterminate) .progress-buffer-bar {
+  background: var(--ion-progress-bar-indeterminate-buffer-bar-solid-default-background, var(--ion-progress-bar-indeterminate-buffer-bar-default-background));
+}
+
+.indeterminate-bar-primary {
+  /* stylelint-disable property-disallowed-list */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -145.166611%;
+  /* stylelint-enable property-disallowed-list */
+  animation: primary-indeterminate-translate 2s infinite linear;
+}
+.indeterminate-bar-primary .progress-indeterminate {
+  animation: primary-indeterminate-scale 2s infinite linear;
+  animation-play-state: inherit;
+}
+
+.indeterminate-bar-secondary {
+  /* stylelint-disable property-disallowed-list */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -54.888891%;
+  /* stylelint-enable property-disallowed-list */
+  animation: secondary-indeterminate-translate 2s infinite linear;
+}
+.indeterminate-bar-secondary .progress-indeterminate {
+  animation: secondary-indeterminate-scale 2s infinite linear;
+  animation-play-state: inherit;
+}
+
+@keyframes primary-indeterminate-translate {
+  0% {
+    transform: translateX(0);
+  }
+  20% {
+    animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+    transform: translateX(0);
+  }
+  59.15% {
+    animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+    transform: translateX(83.67142%);
+  }
+  100% {
+    transform: translateX(200.611057%);
+  }
+}
+@keyframes primary-indeterminate-scale {
+  0% {
+    transform: scaleX(0.08);
+  }
+  36.65% {
+    animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
+    transform: scaleX(0.08);
+  }
+  69.15% {
+    animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
+    transform: scaleX(0.661479);
+  }
+  100% {
+    transform: scaleX(0.08);
+  }
+}
+@keyframes secondary-indeterminate-translate {
+  0% {
+    animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+    transform: translateX(0);
+  }
+  25% {
+    animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+    transform: translateX(37.651913%);
+  }
+  48.35% {
+    animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+    transform: translateX(84.386165%);
+  }
+  100% {
+    transform: translateX(160.277782%);
+  }
+}
+@keyframes secondary-indeterminate-scale {
+  0% {
+    animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
+    transform: scaleX(0.08);
+  }
+  19.15% {
+    animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
+    transform: scaleX(0.457104);
+  }
+  44.15% {
+    animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
+    transform: scaleX(0.72796);
+  }
+  100% {
+    transform: scaleX(0.08);
+  }
+}
+@keyframes buffering {
+  to {
+    transform: translateX(-10px);
+  }
+}

package/dist/collection/components/progress-bar/progress-bar.interfaces.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+export const ION_PROGRESS_BAR_SHAPES = ['round', 'rectangular'];