@ionic/core 8.7.13-dev.11765921002.107104c2 → 8.7.13-dev.11765925297.1bb45463

package/dist/collection/components/select-modal/select-modal.ionic.css

@@ -0,0 +1,130 @@
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+:host {
+  height: 100%;
+}
+
+:host(.in-modal-default) ion-content::part(scroll) {
+  --padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
+}
+
+ion-item {
+  --border-width: 0;
+}
+
+ion-item.ion-focused::part(native)::after {
+  border: none;
+}
+
+ion-toolbar {
+  font-size: var(--token-font-size-450, 18px);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
+  text-decoration: none;
+  text-transform: none;
+}
+
+ion-list ion-radio::part(container) {
+  display: none;
+}
+
+ion-list ion-radio::part(label) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+ion-list ion-radio::part(label),
+ion-list ion-checkbox::part(label) {
+  font-size: var(--token-font-size-400, 16px);
+  font-weight: var(--token-font-weight-medium, 500);
+  letter-spacing: var(--token-font-letter-spacing-0, 0%);
+  line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
+  text-decoration: none;
+  text-transform: none;
+}
+
+.item-radio-checked,
+.item-checkbox-checked {
+  --background: var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc));
+  --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
+}
+
+ion-content {
+  /**
+   * The important is needed to override the padding set
+   * for modal sheet by the `core.ionic.scss` file.
+   * The modal sheet within the select does not match the
+   * padding of the modal sheet in the core.
+   */
+  /* stylelint-disable-next-line declaration-no-important */
+  --padding-start: var(--token-space-400, var(--token-scale-400, 16px)) !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  --padding-end: var(--token-space-400, var(--token-scale-400, 16px)) !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  --padding-bottom: var(--token-space-1200, var(--token-scale-1200, 48px)) !important;
+}
+ion-content:has(.radio-checked) .ion-focused:not(.item-radio-checked) {
+  --background-focused-opacity: 1;
+}

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

@@ -2,6 +2,12 @@
   height: 100%;
 }
 
+/**
+ * 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
@@ -57,6 +63,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
@@ -112,6 +124,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/select-modal/select-modal.js

@@ -4,7 +4,7 @@
 import { getIonMode } from "../../global/ionic-global";
 import { Host, forceUpdate, h } from "@stencil/core";
 import { safeCall } from "../../utils/overlays";
-import { getClassMap } from "../../utils/theme";
+import { getClassMap, hostContext } from "../../utils/theme";
 export class SelectModal {
     constructor() {
         this.options = [];
@@ -47,6 +47,13 @@ export class SelectModal {
             option.checked = ev.detail.checked;
         }
     }
+    getModalContextClasses() {
+        const el = this.el;
+        return {
+            'in-modal-default': hostContext('ion-modal.modal-default', el),
+            'in-modal-sheet': hostContext('ion-modal.modal-sheet', el),
+        };
+    }
     renderRadioOptions() {
         const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
         return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { lines: "none", class: Object.assign({
@@ -75,7 +82,7 @@ export class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (h(Host, { key: 'b6c0dec240b2e41985b15fdf4e5a6d3a145c1567', class: getIonMode(this) }, h("ion-header", { key: 'cd177e85ee0f62a60a3a708342d6ab6eb19a44dc' }, h("ion-toolbar", { key: 'aee8222a5a4daa540ad202b2e4cac1ef93d9558c' }, this.header !== undefined && h("ion-title", { key: '5f8fecc764d97bf840d3d4cfddeeccd118ab4436' }, this.header), h("ion-buttons", { key: '919033950d7c2b0101f96a9c9698219de9f568ea', slot: "end" }, h("ion-button", { key: '34b571cab6dced4bde555a077a21e91800829931', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '3c9153d26ba7a5a03d3b20fcd628d0c3031661a7' }, h("ion-list", { key: 'e00b222c071bc97c82ad1bba4db95a8a5c43ed6d' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: 'dc377d9dc34389b1755dc0c86a3fb145d1c24bcb', class: Object.assign({ [getIonMode(this)]: true }, this.getModalContextClasses()) }, h("ion-header", { key: 'ee5b06c52d79b92a172b8d347b977264adc879e0' }, h("ion-toolbar", { key: 'a67603902b5fef8cb9931c0b3a47095dcc44ebfc' }, this.header !== undefined && h("ion-title", { key: 'aad40c470d3e29f90ff6187b593f5d00e0e83017' }, this.header), h("ion-buttons", { key: '91961a528b08b0bcb7078ee783c523c1aa9cd4e4', slot: "end" }, h("ion-button", { key: 'd891eadde7a5f3803dcade9ef161058bec62c2aa', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '55522714075a0959a10bb8501dc40fa99fed52d5' }, h("ion-list", { key: '24d68ca271dacc295a619581aa42a7a1f9327101' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }
@@ -83,14 +90,14 @@ export class SelectModal {
         return {
             "ios": ["select-modal.ios.scss"],
             "md": ["select-modal.md.scss"],
-            "ionic": ["select-modal.md.scss"]
+            "ionic": ["select-modal.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select-modal.ios.css"],
             "md": ["select-modal.md.css"],
-            "ionic": ["select-modal.md.css"]
+            "ionic": ["select-modal.ionic.css"]
         };
     }
     static get properties() {

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

@@ -1,8 +1,6 @@
 :host {
   height: 100%;
-}
-
-/**
+} /**
  * A heuristic that applies CSS to tablet
  * viewports.
  *
@@ -24,6 +22,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/select-option/select-option.js

@@ -2,7 +2,11 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class SelectOption {
     constructor() {
         this.inputId = `ion-selopt-${selectOptionIds++}`;
@@ -12,7 +16,10 @@ export class SelectOption {
         this.disabled = false;
     }
     render() {
-        return h(Host, { key: '3a70eea9fa03a9acba582180761d18347c72acee', role: "option", id: this.inputId, class: getIonMode(this) });
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '5b4a79f7d8443348023f865f46a5e898a6bdddbf', class: {
+                [theme]: true,
+            }, role: "option", id: this.inputId }));
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-popover/select-popover.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
@@ -78,6 +84,12 @@ ion-label {
   overflow-y: auto;
 }
 
+/**
+ * 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
@@ -133,6 +145,12 @@ ion-label {
  *   }
  * }
  */
+/**
+ * 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/select-popover/select-popover.js

@@ -4,8 +4,11 @@
 import { Host, h, forceUpdate } from "@stencil/core";
 import { safeCall } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
+ * @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.
+ *
  * @internal
  */
 export class SelectPopover {
@@ -101,20 +104,25 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: 'ab931b49b59283825bd2afa3f7f995b0e6e05bef', class: getIonMode(this) }, h("ion-list", { key: '3bd12b67832607596b912a73d5b3ae9b954b244d' }, header !== undefined && h("ion-list-header", { key: '97da930246edf7423a039c030d40e3ff7a5148a3' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: 'c579df6ea8fac07bb0c59d34c69b149656863224' }, h("ion-label", { key: 'af699c5f465710ccb13b8cf8e7be66f0e8acfad1', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: 'df9a936d42064b134e843c7229f314a2a3ec7e80' }, subHeader), message !== undefined && h("p", { key: '9c3ddad378df00f106afa94e9928cf68c17124dd' }, message)))), this.renderOptions(options))));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'f6082eeccf950e96a7752a12593971f32e50d785', class: {
+                [theme]: true,
+            } }, h("ion-list", { key: 'e6089be41ea94a6a31096ee56b7563f386c210ab' }, header !== undefined && h("ion-list-header", { key: 'd6ea5d7e0b24d0f748ee17430a49ac55bf400b68' }, header), hasSubHeaderOrMessage && (h("ion-item", { key: '408e2edd5281fa5e334f85ebdc2f609dd215df0d' }, h("ion-label", { key: '097097fd1618b4f21286e9b26102082e5e942351', class: "ion-text-wrap" }, subHeader !== undefined && h("h3", { key: '144ce0f0f323ed6b9044e4329b690ecbdf13fbe6' }, subHeader), message !== undefined && h("p", { key: 'a9bd9f14f9aeba86041363662df1a8dff6f4d565' }, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["select-popover.ios.scss"],
-            "md": ["select-popover.md.scss"]
+            "md": ["select-popover.md.scss"],
+            "ionic": ["select-popover.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select-popover.ios.css"],
-            "md": ["select-popover.md.css"]
+            "md": ["select-popover.md.css"],
+            "ionic": ["select-popover.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/select-popover/select-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,6 +84,12 @@ ion-label {
   overflow-y: auto;
 }
 
+/**
+ * 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
@@ -133,6 +145,12 @@ ion-label {
  *   }
  * }
  */
+/**
+ * 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/skeleton-text/skeleton-text.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

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

@@ -4,7 +4,11 @@
 import { Host, h } from "@stencil/core";
 import { hostContext } 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 the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export class SkeletonText {
     constructor() {
         /**
@@ -27,12 +31,12 @@ export class SkeletonText {
     render() {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
-        const mode = getIonMode(this);
-        return (h(Host, { key: 'd86ef7392507cdbf48dfd3a71f02d7a83eda4aae', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'fba9d20aad31958d6902ac95a5983ea7503452f1', class: {
+                [theme]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '8e8b5a232a6396d2bba691b05f9de4da44b2965c' }, "\u00A0")));
+            } }, h("span", { key: 'b9adb4511497d2add4a1403d548f880b2ad4f9f8' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,31 @@
+/**
+ * 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
@@ -98,16 +126,6 @@ svg {
   }
 }
 
-: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,
@@ -229,4 +247,53 @@ svg {
     stroke-dasharray: 100px, 200px;
     stroke-dashoffset: -125px;
   }
+}
+:host {
+  --color: var(--token-primitives-neutral-800, #626262);
+  width: var(--token-scale-700, 28px);
+  height: var(--token-scale-700, 28px);
+}
+
+:host(.ion-color-medium) {
+  color: var(--ion-color-medium-subtle-contrast, var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262)));
+}
+
+:host(.spinner-lines) line,
+:host(.spinner-lines-small) line {
+  stroke-width: var(--token-scale-150, 6px);
+}
+
+:host(.spinner-lines-sharp) line,
+:host(.spinner-lines-sharp-small) line {
+  stroke-width: var(--token-scale-100, 4px);
+}
+
+/* Extra Small */
+:host(.spinner-xsmall) {
+  width: var(--token-scale-600, 24px);
+  height: var(--token-scale-600, 24px);
+}
+
+/* Small */
+:host(.spinner-small) {
+  width: var(--token-scale-800, 32px);
+  height: var(--token-scale-800, 32px);
+}
+
+/* Medium */
+:host(.spinner-medium) {
+  width: var(--token-scale-1000, 40px);
+  height: var(--token-scale-1000, 40px);
+}
+
+/* Large */
+:host(.spinner-large) {
+  width: var(--token-scale-1200, 48px);
+  height: var(--token-scale-1200, 48px);
+}
+
+/* Extra Large */
+:host(.spinner-xlarge) {
+  width: var(--token-scale-1400, 56px);
+  height: var(--token-scale-1400, 56px);
 }

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

@@ -4,8 +4,12 @@
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme, getIonMode } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
+/**
+ * @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.
+ */
 export class Spinner {
     constructor() {
         /**
@@ -21,11 +25,24 @@ export class Spinner {
         }
         return mode === '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 mode = getIonMode(self);
+        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 = [];
@@ -39,22 +56,27 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'a33d6421fcc885995fbc7a348516525f68ca496c', class: createColorClasses(self.color, {
-                [mode]: true,
+        return (h(Host, { key: '09db378858cf93fb45207a8ebbce7d8694c1146e', 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.native.scss"],
+            "md": ["spinner.native.scss"],
+            "ionic": ["spinner.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["spinner.css"]
+            "ios": ["spinner.native.css"],
+            "md": ["spinner.native.css"],
+            "ionic": ["spinner.ionic.css"]
         };
     }
     static get properties() {
@@ -147,6 +169,25 @@ export class Spinner {
                 "reflect": false,
                 "attribute": "paused",
                 "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
             }
         };
     }