@ionic/core 8.8.3 → 8.8.4-dev.11775576543.172b7b99

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

@@ -11,7 +11,7 @@ import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId,
 import { isPlatform } from "../../utils/platform";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
@@ -19,12 +19,13 @@ import { mdLeaveAnimation } from "./animations/md.leave";
 import { configureDismissInteraction, configureKeyboardInteraction, configureTriggerInteraction } from "./utils";
 // TODO(FW-2832): types
 /**
- * @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 - Content is placed inside of the `.popover-content` element.
  *
  * @part backdrop - The `ion-backdrop` element.
- * @part arrow - The arrow that points to the reference element. Only applies on `ios` mode.
+ * @part arrow - The arrow that points to the reference element. Only applies on `"ios"` theme.
  * @part content - The wrapper element for the default slot.
  */
 export class Popover {
@@ -55,7 +56,7 @@ export class Popover {
         this.showBackdrop = true;
         /**
          * If `true`, the popover will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
@@ -103,7 +104,7 @@ export class Popover {
         this.side = 'bottom';
         /**
          * If `true`, the popover will display an arrow that points at the
-         * `reference` when running in `ios` mode. Does not apply in `md` mode.
+         * `reference` on `"ios"` theme.
          */
         this.arrow = true;
         /**
@@ -236,7 +237,7 @@ export class Popover {
         const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : setOverlayId(el);
         this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
         if (this.alignment === undefined) {
-            this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
+            this.alignment = getIonTheme(this) === 'ios' ? 'center' : 'start';
         }
     }
     componentDidLoad() {
@@ -463,26 +464,28 @@ export class Popover {
         return eventMethod(this.el, 'ionPopoverWillDismiss');
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'cc70f9b037b16ea78b999916106a1062ceb74cb6', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: 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: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), h("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, h("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
+            }, 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: 'e641e7ee28cbd54911ec3f8c0bfd9d7e3f2e85cd', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '750494585c3524b27e42d79f02e729f3eff9e660', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '2e49b4ad1287e31a3cdbfebc91120405a998dc95', class: "popover-arrow", part: "arrow" }), h("div", { key: '306586776e74acab787b2a96433553005bca580d', class: "popover-content", part: "content" }, h("slot", { key: '0273c0975cd7dc37db5cfa0b91d418867a77c4d8' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["popover.ios.scss"],
-            "md": ["popover.md.scss"]
+            "md": ["popover.md.scss"],
+            "ionic": ["popover.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["popover.ios.css"],
-            "md": ["popover.md.css"]
+            "md": ["popover.md.css"],
+            "ionic": ["popover.ionic.css"]
         };
     }
     static get properties() {
@@ -770,7 +773,7 @@ export class Popover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the popover will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "getter": false,
                 "setter": false,
@@ -981,7 +984,7 @@ export class Popover {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode."
+                    "text": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `\"ios\"` theme, and `\"start\"` for `\"md\"` theme."
                 },
                 "getter": false,
                 "setter": false,
@@ -1000,7 +1003,7 @@ export class Popover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode."
+                    "text": "If `true`, the popover will display an arrow that points at the\n`reference` on `\"ios\"` theme."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -78,8 +84,8 @@
   --height: auto;
   --offset-x: 0px;
   --offset-y: 0px;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -177,6 +183,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

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

@@ -0,0 +1,287 @@
+/**
+ * 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.
+ */
+/**
+ * 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 {
+  display: block;
+  position: relative;
+  width: 100%;
+  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%;
+}
+
+.buffer-circles-container,
+.buffer-circles {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.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,
+.progress-indeterminate {
+  background: var(--progress-background);
+  z-index: 2;
+}
+
+.progress-buffer-bar {
+  background: var(--background);
+  z-index: 1;
+}
+
+.buffer-circles-container {
+  overflow: hidden;
+}
+
+.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;
+}
+
+.buffer-circles {
+  background-image: radial-gradient(ellipse at center, var(--background) 0%, var(--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;
+}
+
+: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;
+}
+
+@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);
+  }
+}
+:host {
+  --background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #eae9e9));
+  --progress-background: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
+  height: var(--token-scale-100, 4px);
+}
+
+:host(.progress-bar-shape-round) {
+  border-radius: var(--token-round-xs, var(--token-border-radius-full, 999px));
+}
+
+:host(.progress-bar-shape-rectangular) {
+  border-radius: var(--token-rectangular-xs, var(--token-border-radius-0, var(--token-scale-0, 0px)));
+}
+
+:host(.ion-color) .progress,
+:host(.ion-color) .progress-indeterminate {
+  background: var(--ion-color-base);
+}
+
+:host(.ion-color) .buffer-circles {
+  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
+}

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

@@ -1,3 +1,9 @@
+/**
+ * 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,13 +59,29 @@
  *   }
  * }
  */
+/**
+ * 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 --background: Background of the progress track, or the buffer bar if `buffer` is set
-   * @prop --progress-background: Background of the progress bar representing the current value
-   */
-  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
-  --progress-background: var(--ion-color-primary, #0054e9);
   display: block;
   position: relative;
   width: 100%;
@@ -73,8 +95,8 @@
 .indeterminate-bar-primary,
 .indeterminate-bar-secondary,
 .progress-buffer-bar {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -84,8 +106,8 @@
 
 .buffer-circles-container,
 .buffer-circles {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -170,15 +192,6 @@
   animation-play-state: paused;
 }
 
-:host(.ion-color) .buffer-circles {
-  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
-}
-
-:host(.ion-color) .progress,
-:host(.ion-color) .progress-indeterminate {
-  background: var(--ion-color-base);
-}
-
 @keyframes primary-indeterminate-translate {
   0% {
     transform: translateX(0);
@@ -250,6 +263,24 @@
     transform: translateX(-10px);
   }
 }
+:host {
+  /**
+     * @prop --background: Background of the progress track, or the buffer bar if `buffer` is set
+     * @prop --progress-background: Background of the progress bar representing the current value
+     */
+  --background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.3);
+  --progress-background: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .progress,
+:host(.ion-color) .progress-indeterminate {
+  background: var(--ion-color-base);
+}
+
+:host(.ion-color) .buffer-circles {
+  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
+}
+
 :host {
   border-radius: 9999px;
   height: 4px;

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

@@ -5,9 +5,10 @@ import { Host, h } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
 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.
  *
  * @part progress - The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
  * @part stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.
@@ -37,18 +38,32 @@ export class ProgressBar {
          */
         this.buffer = 1;
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11638): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
     render() {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (h(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: '9adef68c31bdf39d48199e01587f8d5295d4c6af', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+                [theme]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
                 'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
                 'progress-bar-solid': progressSolid,
+                [`progress-bar-shape-${shape}`]: shape !== undefined,
             }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
     }
     static get is() { return "ion-progress-bar"; }
@@ -56,13 +71,15 @@ export class ProgressBar {
     static get originalStyleUrls() {
         return {
             "ios": ["progress-bar.ios.scss"],
-            "md": ["progress-bar.md.scss"]
+            "md": ["progress-bar.md.scss"],
+            "ionic": ["progress-bar.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["progress-bar.ios.css"],
-            "md": ["progress-bar.md.css"]
+            "md": ["progress-bar.md.css"],
+            "ionic": ["progress-bar.ionic.css"]
         };
     }
     static get properties() {
@@ -172,6 +189,25 @@ export class ProgressBar {
                 "setter": false,
                 "reflect": true,
                 "attribute": "color"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"round\"` for a progress bar with rounded corners, or `\"rectangular\"`\nfor a progress bar without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape"
             }
         };
     }