@ionic/core 8.2.3-dev.11721064272.19e3ddfd → 8.2.3-dev.11721225504.1476a6ac

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

@@ -1,42 +1,3 @@
-/**
- * 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.
@@ -130,23 +91,12 @@
   justify-content: space-between;
   outline: none;
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   text-align: initial;
   text-decoration: none;
   overflow: hidden;
   box-sizing: border-box;
 }
 
-:host(.ion-color) .item-native {
-  background: var(--ion-color-base);
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color) .item-native,
-:host(.ion-color) .item-inner {
-  border-color: var(--ion-color-shade);
-}
-
 :host(.ion-activated) .item-native {
   color: var(--color-activated);
 }
@@ -155,10 +105,6 @@
   opacity: var(--background-activated-opacity);
 }
 
-:host(.ion-color.ion-activated) .item-native {
-  color: var(--ion-color-contrast);
-}
-
 :host(.ion-focused) .item-native {
   color: var(--color-focused);
 }
@@ -167,13 +113,6 @@
   opacity: var(--background-focused-opacity);
 }
 
-:host(.ion-color.ion-focused) .item-native {
-  color: var(--ion-color-contrast);
-}
-:host(.ion-color.ion-focused) .item-native::after {
-  background: var(--ion-color-contrast);
-}
-
 @media (any-hover: hover) {
   :host(.ion-activatable:not(.ion-focused):hover) .item-native {
     color: var(--color-hover);
@@ -182,12 +121,6 @@
     background: var(--background-hover);
     opacity: var(--background-hover-opacity);
   }
-  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
-    color: var(--ion-color-contrast);
-  }
-  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after {
-    background: var(--ion-color-contrast);
-  }
 }
 :host(.item-control-needs-pointer-cursor) {
   cursor: pointer;
@@ -412,6 +345,100 @@ ion-ripple-effect {
   color: var(--ripple-color);
 }
 
+/**
+ * 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 {
+  font-family: var(--ion-font-family, inherit);
+}
+
+:host(.ion-color) .item-native {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .item-native,
+:host(.ion-color) .item-inner {
+  border-color: var(--ion-color-shade);
+}
+
+:host(.ion-color.ion-activated) .item-native {
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color.ion-focused) .item-native {
+  color: var(--ion-color-contrast);
+}
+:host(.ion-color.ion-focused) .item-native::after {
+  background: var(--ion-color-contrast);
+}
+
+@media (any-hover: hover) {
+  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native {
+    color: var(--ion-color-contrast);
+  }
+  :host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after {
+    background: var(--ion-color-contrast);
+  }
+}
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/segment/segment.js

@@ -82,15 +82,7 @@ export class Segment {
     swipeGestureChanged() {
         this.gestureChanged();
     }
-    valueChanged(value, oldValue) {
-        if (oldValue !== undefined && value !== undefined) {
-            const buttons = this.getButtons();
-            const previous = buttons.find((button) => button.value === oldValue);
-            const current = buttons.find((button) => button.value === value);
-            if (previous && current) {
-                this.checkButton(previous, current);
-            }
-        }
+    valueChanged(value) {
         /**
          * `ionSelect` is emitted every time the value changes (internal or external changes).
          * Used by `ion-segment-button` to determine if the button should be checked.
@@ -430,14 +422,14 @@ export class Segment {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'fa333a638e291c771155cc8205a89022799b2f35', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '8ebad474914841f288bad5076063c04eb8697c1f', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: '245eb99eee33b71a7cc4f33fedfd52ede284a21c', onSlotchange: this.onSlottedItemsChange })));
+            }) }, h("slot", { key: '7c80d6ab541998f3edf0ae12254c6412103000a0', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.js

@@ -669,7 +669,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '63114b245835e18e63ab6b791713e1c34c2a91d3', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '50a843952ba75a266cb2690e3bac68c7bbb8ba95', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -685,7 +685,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'dd7f90e38fd21cb0ce2cb26c588ff1318a3b4e03', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '946a1f025be4a63e1b7f9243d1e089e204f7e2c4', class: "select-wrapper-inner" }, h("slot", { key: '4ab1ffe6511e37ec148768edd41ba26ca59dc0a2', name: "start" }), h("div", { key: 'bc949b66207c31b4f412e1a0480c779bdb20ab99', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '3ce8d8bdf08ba900ae12f4ed51bcc693e9eb5f7c', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'ad3f883b723354327602b93208913dcfae218e2f', class: "select-highlight" }))));
+            }) }, h("label", { key: '617e8b1ee3636c35e8262748028c5c9b53349ab8', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '0b5a7126bcb30203986c5a0ed9f2f41f25501ace', class: "select-wrapper-inner" }, h("slot", { key: '0e35013e26f58f04f7eb9228cb270991e5b755ae', name: "start" }), h("div", { key: 'cf131b61e7907f63a1ce32dd931a9753ae290807', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0adb8f7cdd610dfe67e1a363180e99322f5a6343', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'd9d2954141a517296483c22eac4b143c4096e1c5', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-option/select-option.js

@@ -15,7 +15,7 @@ export class SelectOption {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '9c119de67b396ed5a1cd5efa40034a1b10313f1b', class: {
+        return (h(Host, { key: '1a977b2d7953ecbddf216c5b68d47104dda07bce', class: {
                 [theme]: true,
             }, role: "option", id: this.inputId }));
     }

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

@@ -106,9 +106,9 @@ export class SelectPopover {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '499511498ca8be82086bb06e2b27ce33bffc1ddb', class: {
+        return (h(Host, { key: '6ac9472c819c6631cd64ad8810256dd03fde120b', class: {
                 [theme]: true,
-            } }, h("ion-list", { key: '278f6bc1feeede9f02728971f322aa63f806321e' }, header !== undefined && h("ion-list-header", { key: 'ae4b4d8d73b7d353ac11e26dab35d001b7bfd2bf' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '79e6641ab2dbbd08811ddcf8f346b0f18e3f0454' }, h("ion-label", { key: '53788eacd7384c4f24c727cd9312da3a57ccc67b', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '0f028877e1fb89b66c22f5963bc57257d34f653d' }, subHeader), message !== undefined && h("p", { key: 'ff3b24d1bddacf963d9e1c287e65b71c97bb95b9' }, message)))), this.renderOptions(options))));
+            } }, h("ion-list", { key: 'b485896c38c080bc42f92e962440cd3b8308e728' }, header !== undefined && h("ion-list-header", { key: '6a1df70265a4b9feec9521d5f946994345456925' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'c4ecbcaa2c56c1cb900e039cbfe36c2fae03f2ac' }, h("ion-label", { key: 'e310d3445c6abfffb4ff00a1aec97dd09c94e1d3', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '9a6ffdfd9df8aea92290caf317d855b262ac8998' }, subHeader), message !== undefined && h("p", { key: 'b5ca3c716d69e6a2c013df3fa3436b92953c4296' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -29,11 +29,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f788545e591fdd0d1b3b61ad5e97b02d2d7e46f4', class: {
+        return (h(Host, { key: '20170a23455836848210459749d9ba6a6eaaff53', class: {
                 [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '4f62ad7f8851d4111c60e7f7b28edcbb7067125c' }, "\u00A0")));
+            } }, h("span", { key: '96a9a18da286285abb647e7b69a4832cbe59b3b8' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.common.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;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --color: Color of the spinner
+   */
+  display: inline-block;
+  position: relative;
+  width: 28px;
+  height: 28px;
+  color: var(--color);
+  user-select: none;
+}
+
+:host(.ion-color) {
+  color: var(--ion-color-base);
+}
+
+svg {
+  transform-origin: center;
+  position: absolute;
+  /**
+   * Do not use @include position
+   * as the alignment of the elements with
+   * a spinner should not be RTL aware.
+   */
+  top: 0;
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateZ(0);
+}
+:host-context([dir=rtl]) svg {
+  transform-origin: calc(100% - center);
+}
+
+[dir=rtl] svg {
+  transform-origin: calc(100% - center);
+}
+
+@supports selector(:dir(rtl)) {
+  svg:dir(rtl) {
+    transform-origin: calc(100% - center);
+  }
+}
+
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line {
+  stroke-width: 7px;
+}
+
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-width: 4px;
+}
+
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line,
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-linecap: round;
+  stroke: currentColor;
+}
+
+:host(.spinner-lines) svg,
+:host(.spinner-lines-small) svg,
+:host(.spinner-lines-sharp) svg,
+:host(.spinner-lines-sharp-small) svg {
+  animation: spinner-fade-out 1s linear infinite;
+}
+
+:host(.spinner-bubbles) svg {
+  animation: spinner-scale-out 1s linear infinite;
+  fill: currentColor;
+}
+
+:host(.spinner-circles) svg {
+  animation: spinner-fade-out 1s linear infinite;
+  fill: currentColor;
+}
+
+:host(.spinner-crescent) circle {
+  fill: transparent;
+  stroke-width: 4px;
+  stroke-dasharray: 128px;
+  stroke-dashoffset: 82px;
+  stroke: currentColor;
+}
+
+:host(.spinner-crescent) svg {
+  animation: spinner-rotate 1s linear infinite;
+}
+
+:host(.spinner-dots) circle {
+  stroke-width: 0;
+  fill: currentColor;
+}
+
+:host(.spinner-dots) svg {
+  animation: spinner-dots 1s linear infinite;
+}
+
+:host(.spinner-circular) svg {
+  animation: spinner-circular linear infinite;
+}
+
+:host(.spinner-circular) circle {
+  animation: spinner-circular-inner ease-in-out infinite;
+  stroke: currentColor;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0px;
+  stroke-width: 5.6;
+  fill: none;
+}
+
+:host(.spinner-paused),
+:host(.spinner-paused) svg,
+:host(.spinner-paused) circle {
+  animation-play-state: paused;
+}
+
+@keyframes spinner-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes spinner-scale-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(0, 0);
+  }
+}
+@keyframes spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-dots {
+  0% {
+    transform: scale(1, 1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(0.4, 0.4);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 0.9;
+  }
+}
+@keyframes spinner-circular {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-circular-inner {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0px;
+  }
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+}

package/dist/collection/components/spinner/{spinner.css → spinner.ionic.css}

@@ -4,6 +4,32 @@
  * @param pixels - Value in pixels to be converted (i.e. px)
  * @param context (optional) - Baseline value
  */
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * 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 font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -235,4 +261,33 @@ svg {
     stroke-dasharray: 100px, 200px;
     stroke-dashoffset: -125px;
   }
+}
+/* Extra Small */
+:host(.spinner-xsmall) {
+  width: var(--ionic-scale-600, 24px);
+  height: var(--ionic-scale-600, 24px);
+}
+
+/* Small */
+:host(.spinner-small) {
+  width: var(--ionic-scale-800, 32px);
+  height: var(--ionic-scale-800, 32px);
+}
+
+/* Medium */
+:host(.spinner-medium) {
+  width: var(--ionic-scale-1000, 40px);
+  height: var(--ionic-scale-1000, 40px);
+}
+
+/* Large */
+:host(.spinner-large) {
+  width: var(--ionic-scale-1200, 48px);
+  height: var(--ionic-scale-1200, 48px);
+}
+
+/* Extra Large */
+:host(.spinner-xlarge) {
+  width: var(--ionic-scale-1400, 56px);
+  height: var(--ionic-scale-1400, 56px);
 }

package/dist/collection/components/spinner/spinner.js

@@ -16,7 +16,9 @@ export class Spinner {
         this.duration = undefined;
         this.name = undefined;
         this.paused = false;
+        this.size = undefined;
     }
+    // TODO(ROU-10920): Switch `theme` to `mode`.
     getName() {
         const spinnerName = this.name || config.get('spinner');
         const theme = getIonTheme(this);
@@ -25,11 +27,24 @@ export class Spinner {
         }
         return theme === 'ios' ? 'lines' : 'circular';
     }
+    getSize() {
+        const theme = getIonTheme(this);
+        const { size } = this;
+        // TODO(ROU-10912): Remove theme check when sizes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (size === undefined) {
+            return 'xsmall';
+        }
+        return size;
+    }
     render() {
         var _a;
         const self = this;
         const theme = getIonTheme(self);
         const spinnerName = self.getName();
+        const size = this.getSize();
         const spinner = (_a = SPINNERS[spinnerName]) !== null && _a !== void 0 ? _a : SPINNERS['lines'];
         const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
         const svgs = [];
@@ -43,22 +58,27 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '5cb7fe35a97d06ec56f83facd294847b51cbc7af', class: createColorClasses(self.color, {
+        return (h(Host, { key: '6cac09975f1088551e71b1c60033d3571438f374', class: createColorClasses(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
+                [`spinner-${size}`]: size !== undefined,
             }), role: "progressbar", style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} }, svgs));
     }
     static get is() { return "ion-spinner"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["spinner.scss"]
+            "ios": ["spinner.common.scss"],
+            "md": ["spinner.common.scss"],
+            "ionic": ["spinner.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["spinner.css"]
+            "ios": ["spinner.common.css"],
+            "md": ["spinner.common.css"],
+            "ionic": ["spinner.ionic.css"]
         };
     }
     static get properties() {
@@ -143,6 +163,23 @@ export class Spinner {
                 "attribute": "paused",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"xsmall\"` for the smallest size.\nSet to `\"small\"` for a smaller size.\nSet to `\"medium\"` for a medium size.\nSet to `\"large\"` for a large size.\nSet to `\"xlarge\"` for the largest size.\n\nDefaults to `\"xsmall\"` for the `ionic` theme, undefined for all other themes."
+                },
+                "attribute": "size",
+                "reflect": false
             }
         };
     }