@ionic/core 8.0.0-dev.11713809015.1aabd368 → 8.0.0-dev.11713988726.1e82b9a0

package/dist/collection/components/button/button.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
@@ -177,18 +183,18 @@
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   display: flex;
   position: relative;
   align-items: center;
@@ -261,8 +267,8 @@ ion-ripple-effect {
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -326,6 +332,12 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--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
@@ -381,6 +393,12 @@ ion-ripple-effect {
  *   }
  * }
  */
+/**
+ * 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
@@ -471,7 +489,7 @@ ion-ripple-effect {
   --background-activated: var(--ion-color-primary, #0054e9);
   --background-focused: var(--ion-color-primary, #0054e9);
   --background-hover: transparent;
-  --background-focused-opacity: .1;
+  --background-focused-opacity: 0.1;
   --color-activated: var(--ion-color-primary-contrast, #fff);
 }
 
@@ -480,7 +498,7 @@ ion-ripple-effect {
   --background-activated-opacity: 0;
   --background-focused: var(--ion-color-primary, #0054e9);
   --background-hover: transparent;
-  --background-focused-opacity: .1;
+  --background-focused-opacity: 0.1;
   font-size: min(1.0625rem, 51px);
   font-weight: normal;
 }

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

@@ -5,9 +5,10 @@ import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes, hasShadowDom } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
-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.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot icon-only - Should be used on an icon in a button that has no text.
@@ -121,6 +122,20 @@ export class Button {
         }
         return 'bounded';
     }
+    /**
+     * Disable the "xsmall" and "xlarge" sizes if the theme is "ios" or "md"
+     */
+    getSize() {
+        const theme = getIonTheme(this);
+        const { size } = this;
+        if (size === undefined && this.inItem) {
+            return 'small';
+        }
+        if ((theme === 'ios' || theme === 'md') && (size === 'xsmall' || size === 'xlarge')) {
+            return undefined;
+        }
+        return size;
+    }
     /**
      * Finds the form element based on the provided `form` selector
      * or element reference provided.
@@ -181,9 +196,9 @@ export class Button {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;
-        const finalSize = size === undefined && this.inItem ? 'small' : size;
+        const { buttonType, type, disabled, rel, target, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;
+        const theme = getIonTheme(this);
+        const finalSize = this.getSize();
         const TagType = href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
             ? { type }
@@ -211,8 +226,8 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: 'e926c8ca019c15a5fdf5ac95632f78d8b791fba0', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: 'ad194a242d68360d9bbbd025a409af09d87b4d34', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+                [theme]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
                 [`${buttonType}-${finalSize}`]: finalSize !== undefined,
@@ -226,20 +241,22 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: 'e964fd7945ff046464a98e6148256b8bb12b07a8' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '5eac1c991616ead47b6b7f5ab095dc25831633ad', class: "button-inner" }, h("slot", { key: '8383cfaa82e50dddff7dfe82ca6e1bcb3328871b', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '423445d26533850b86171095f431caab437ff4f3', name: "start" }), h("slot", { key: 'dcbdc7c3f827e01b8e3792272b72a13e2d99c179' }), h("slot", { key: '9c345224e1d415cfa96460f94626d9bcf49d3829', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: '6ca717c26b637859f780c22f8b4a7e921b723e12' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '60ff7c727df3fee342bed8839a493057149e2600', class: "button-inner" }, h("slot", { key: 'e048881659c50129e29668694ef11420400c9059', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '3783397b79a5f4756fce1ba546c9b3e00e8afb69', name: "start" }), h("slot", { key: '1e3c2fd3969bf4c83e432e2a1a2058d699d9685a' }), h("slot", { key: 'badb9b5954d8d8a19a53ff4be3ff5d0e0b3354ae', name: "end" })), theme === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["button.ios.scss"],
-            "md": ["button.md.scss"]
+            "md": ["button.md.scss"],
+            "ionic": ["button.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["button.ios.css"],
-            "md": ["button.md.css"]
+            "md": ["button.md.css"],
+            "ionic": ["button.ionic.css"]
         };
     }
     static get properties() {
@@ -437,8 +454,8 @@ export class Button {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'round'",
-                    "resolved": "\"round\" | undefined",
+                    "original": "'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -454,8 +471,8 @@ export class Button {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'small' | 'default' | 'large'",
-                    "resolved": "\"default\" | \"large\" | \"small\" | undefined",
+                    "original": "'xsmall' | 'small' | 'default' | 'large' | 'xlarge'",
+                    "resolved": "\"default\" | \"large\" | \"small\" | \"xlarge\" | \"xsmall\" | undefined",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/button/button.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
@@ -177,18 +183,18 @@
   padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   display: flex;
   position: relative;
   align-items: center;
@@ -261,8 +267,8 @@ ion-ripple-effect {
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -326,6 +332,12 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--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
@@ -387,9 +399,7 @@ ion-ripple-effect {
   --padding-bottom: 8px;
   --padding-start: 1.1em;
   --padding-end: 1.1em;
-  --transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
-                background-color 15ms linear,
-                color 15ms linear;
+  --transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 15ms linear, color 15ms linear;
   -webkit-margin-start: 2px;
   margin-inline-start: 2px;
   -webkit-margin-end: 2px;
@@ -408,8 +418,8 @@ ion-ripple-effect {
   --background-hover: var(--ion-color-primary-contrast, #fff);
   --background-focused: var(--ion-color-primary-contrast, #fff);
   --background-activated-opacity: 0;
-  --background-focused-opacity: .24;
-  --background-hover-opacity: .08;
+  --background-focused-opacity: 0.24;
+  --background-hover-opacity: 0.08;
   --box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
@@ -425,8 +435,8 @@ ion-ripple-effect {
   --background-focused: var(--ion-color-primary, #0054e9);
   --background-hover: var(--ion-color-primary, #0054e9);
   --background-activated-opacity: 0;
-  --background-focused-opacity: .12;
-  --background-hover-opacity: .04;
+  --background-focused-opacity: 0.12;
+  --background-hover-opacity: 0.04;
 }
 
 :host(.button-outline.ion-activated.ion-color) .button-native {
@@ -438,8 +448,8 @@ ion-ripple-effect {
   --background-focused: var(--ion-color-primary, #0054e9);
   --background-hover: var(--ion-color-primary, #0054e9);
   --background-activated-opacity: 0;
-  --background-focused-opacity: .12;
-  --background-hover-opacity: .04;
+  --background-focused-opacity: 0.12;
+  --background-hover-opacity: 0.04;
 }
 
 :host(.button-round) {

package/dist/collection/components/button/test/clear/button.e2e.js

@@ -3,12 +3,15 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs().forEach(({ title, config, screenshot }) => {
-    test.describe(title('button: clear'), () => {
+/**
+ * Fill="clear" does not render differently based on the direction.
+ */
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config, screenshot }) => {
+    test.describe(title('button: fill: clear'), () => {
         test('should not have visual regressions', async ({ page }) => {
             await page.goto(`/src/components/button/test/clear`, config);
             await page.setIonViewport();
-            await expect(page).toHaveScreenshot(screenshot(`button-clear`));
+            await expect(page).toHaveScreenshot(screenshot(`button-fill-clear`));
         });
     });
 });

package/dist/collection/components/button/test/shape/button.e2e.js

@@ -0,0 +1,88 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * All content takes up the full width, so RTL has no effect.
+ */
+// TODO: FW-6077 - Add ionic theme on MD mode to this test.
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('button: shape'), () => {
+        test.describe('round', () => {
+            test.describe('default', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.goto(`/src/components/button/test/shape`, config);
+                    await page.setIonViewport();
+                    const container = page.locator('#default');
+                    await expect(container).toHaveScreenshot(screenshot(`button-round`));
+                });
+            });
+            test.describe('outline', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.goto(`/src/components/button/test/shape`, config);
+                    await page.setIonViewport();
+                    const container = page.locator('#outline');
+                    await expect(container).toHaveScreenshot(screenshot(`button-outline-round`));
+                });
+            });
+            test.describe('clear', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.goto(`/src/components/button/test/shape`, config);
+                    await page.setIonViewport();
+                    const container = page.locator('#clear');
+                    await expect(container).toHaveScreenshot(screenshot(`button-clear-round`));
+                });
+            });
+            test.describe('color', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.goto(`/src/components/button/test/shape`, config);
+                    await page.setIonViewport();
+                    const container = page.locator('#color');
+                    await expect(container).toHaveScreenshot(screenshot(`button-color-round`));
+                });
+            });
+            test.describe('expand', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.goto(`/src/components/button/test/shape`, config);
+                    await page.setIonViewport();
+                    const container = page.locator('#expand');
+                    await expect(container).toHaveScreenshot(screenshot(`button-expand-round`));
+                });
+            });
+        });
+    });
+});
+/**
+ * Shape="rectangular" is only available in the Ionic theme.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('button: shape'), () => {
+        test.describe('rectangular', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-button {
+              margin: 8px;
+            }
+          </style>
+          <div id="container">
+            <ion-button shape="rectangular" fill="solid">Rectangular Button, Solid</ion-button>
+            <ion-button class="ion-focused" shape="rectangular" fill="solid">Rectangular Button, Solid, Focused</ion-button>
+            <ion-button class="ion-activated" shape="rectangular" fill="solid">Rectangular Button, Solid, Activated</ion-button>
+
+            <ion-button shape="rectangular" fill="outline">Rectangular Button, Outline</ion-button>
+            <ion-button class="ion-focused" shape="rectangular" fill="outline">Rectangular Button, Outline, Focused</ion-button>
+            <ion-button class="ion-activated" shape="rectangular" fill="outline">Rectangular Button, Outline, Activated</ion-button>
+
+            <ion-button shape="rectangular" fill="clear">Rectangular Button</ion-button>
+            <ion-button class="ion-focused" shape="rectangular" fill="clear">Rectangular Button, Focused</ion-button>
+            <ion-button class="ion-activated" shape="rectangular" fill="clear">Rectangular Button, Activated</ion-button>
+          </div>
+          `, config);
+                const container = page.locator('#container');
+                await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular`));
+            });
+        });
+    });
+});

package/dist/collection/components/button/test/size/button.e2e.js

@@ -3,7 +3,7 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('button: size'), () => {
         test('should render small buttons', async ({ page }) => {
             await page.setContent(`
@@ -41,3 +41,20 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+/**
+ * The following tests are specific to the Ionic theme and do not depend on the text direction.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('button: size'), () => {
+        test('should render xsmall buttons', async ({ page }) => {
+            await page.setContent(`<ion-button size="xsmall" fill="solid">X-Small Button</ion-button>`, config);
+            const wrapper = page.locator('ion-button');
+            await expect(wrapper).toHaveScreenshot(screenshot(`button-size-x-small`));
+        });
+        test('should render xlarge buttons', async ({ page }) => {
+            await page.setContent(`<ion-button size="xlarge" fill="solid">X-Large Button</ion-button>`, config);
+            const wrapper = page.locator('ion-button');
+            await expect(wrapper).toHaveScreenshot(screenshot(`button-size-x-large`));
+        });
+    });
+});

package/dist/collection/components/button/test/states/button.e2e.js

@@ -0,0 +1,51 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('button: activated'), () => {
+        test('should render solid button', async ({ page }) => {
+            await page.setContent(`
+        <ion-button class="ion-activated">Button</ion-button>
+      `, config);
+            const button = page.locator('ion-button');
+            await expect(button).toHaveScreenshot(screenshot(`button-activated-solid`));
+        });
+        test('should render solid button with color', async ({ page }) => {
+            await page.setContent(`
+        <ion-button color="tertiary" class="ion-activated">Button</ion-button>
+      `, config);
+            const button = page.locator('ion-button');
+            await expect(button).toHaveScreenshot(screenshot(`button-activated-solid-color`));
+        });
+        test('should render outline button', async ({ page }) => {
+            await page.setContent(`
+        <ion-button fill="outline" class="ion-activated">Button</ion-button>
+      `, config);
+            const button = page.locator('ion-button');
+            await expect(button).toHaveScreenshot(screenshot(`button-activated-outline`));
+        });
+        test('should render outline button with color', async ({ page }) => {
+            await page.setContent(`
+        <ion-button color="tertiary" fill="outline" class="ion-activated">Button</ion-button>
+      `, config);
+            const button = page.locator('ion-button');
+            await expect(button).toHaveScreenshot(screenshot(`button-activated-outline-color`));
+        });
+        test('should render clear button', async ({ page }) => {
+            await page.setContent(`
+        <ion-button fill="clear" class="ion-activated">Button</ion-button>
+      `, config);
+            const button = page.locator('ion-button');
+            await expect(button).toHaveScreenshot(screenshot(`button-activated-clear`));
+        });
+        test('should render clear button with color', async ({ page }) => {
+            await page.setContent(`
+        <ion-button color="tertiary" fill="clear" class="ion-activated">Button</ion-button>
+      `, config);
+            const button = page.locator('ion-button');
+            await expect(button).toHaveScreenshot(screenshot(`button-activated-clear-color`));
+        });
+    });
+});

package/dist/collection/components/buttons/buttons.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,6 +59,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
@@ -108,6 +120,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
@@ -209,9 +227,9 @@
 :host-context(.ion-color)::slotted(*) .button-solid {
   --background: var(--ion-color-contrast);
   --background-focused: #000;
-  --background-focused-opacity: .12;
+  --background-focused-opacity: 0.12;
   --background-activated: #000;
-  --background-activated-opacity: .12;
+  --background-activated-opacity: 0.12;
   --background-hover: var(--ion-color-base);
   --background-hover-opacity: 0.45;
   --color: var(--ion-color-base);
@@ -238,9 +256,9 @@
 
 ::slotted(*) .button-solid:not(.ion-color) {
   --background-focused: #000;
-  --background-focused-opacity: .12;
+  --background-focused-opacity: 0.12;
   --background-activated: #000;
-  --background-activated-opacity: .12;
+  --background-activated-opacity: 0.12;
 }
 
 ::slotted(*) ion-icon[slot=start] {

package/dist/collection/components/buttons/buttons.js

@@ -2,30 +2,36 @@
  * (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 Buttons {
     constructor() {
         this.collapse = false;
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '3b78d2f2ebdc2a1720edb570270dd0228eef6ae5', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '4894da99d311fd26fdedc64d7db023de4d0c7857', class: {
+                [theme]: true,
                 ['buttons-collapse']: this.collapse,
-            } }, h("slot", { key: 'a48e728d5d5ecb29965c3a2c9ffa9516b5da5309' })));
+            } }, h("slot", { key: '493d3423fc2dbb636e6cb9ca4e33b3be78ab14d3' })));
     }
     static get is() { return "ion-buttons"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["buttons.ios.scss"],
-            "md": ["buttons.md.scss"]
+            "md": ["buttons.md.scss"],
+            "ionic": ["buttons.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["buttons.ios.css"],
-            "md": ["buttons.md.css"]
+            "md": ["buttons.md.css"],
+            "ionic": ["buttons.md.css"]
         };
     }
     static get properties() {
@@ -42,7 +48,7 @@ export class Buttons {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
+                    "text": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in the `ios` theme with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
                 },
                 "attribute": "collapse",
                 "reflect": false,

package/dist/collection/components/buttons/buttons.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
@@ -53,6 +59,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
@@ -108,6 +120,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