@ionic/core 8.2.2 → 8.2.3-dev.11719301373.17616928

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

@@ -0,0 +1,250 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+const styleTestHelpers = `
+  <style>
+    .grid {
+      display: grid;
+      align-items: start;
+      justify-items: start;
+      grid-template-columns: repeat(3, auto);
+      grid-gap: 10px;
+      margin-bottom: 10px;
+      padding: 6px;
+    }
+  </style>
+`;
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('button: shape'), () => {
+        test.describe('soft shape', () => {
+            test.describe('default fill', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.setContent(`
+            ${styleTestHelpers}
+
+            <div id="container" class="grid">
+              <ion-button shape="soft" size="small">Button</ion-button>
+              <ion-button shape="soft">Button</ion-button>
+              <ion-button shape="soft" size="large">Button</ion-button>
+              <ion-button shape="soft" size="small">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="soft">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="soft" size="large">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+            </div>
+           `, config);
+                    const container = page.locator('#container');
+                    await expect(container).toHaveScreenshot(screenshot(`button-shape-soft-fill-default`));
+                });
+            });
+            test.describe('outline fill', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.setContent(`
+            ${styleTestHelpers}
+
+            <div id="container" class="grid">
+              <ion-button shape="soft" fill="outline" size="small">Button</ion-button>
+              <ion-button shape="soft" fill="outline">Button</ion-button>
+              <ion-button shape="soft" fill="outline" size="large">Button</ion-button>
+              <ion-button shape="soft" size="small" fill="outline">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="soft" fill="outline">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="soft" size="large" fill="outline">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+            </div>
+            `, config);
+                    const container = page.locator('#container');
+                    await expect(container).toHaveScreenshot(screenshot(`button-shape-soft-fill-outline`));
+                });
+            });
+            // The clear buttons have the `ion-focused` class added to show their shape
+            test.describe('clear fill', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.setContent(`
+            ${styleTestHelpers}
+
+            <div id="container" class="grid">
+              <ion-button shape="soft" fill="clear" size="small" class="ion-focused">Button</ion-button>
+              <ion-button shape="soft" fill="clear" class="ion-focused">Button</ion-button>
+              <ion-button shape="soft" fill="clear" size="large" class="ion-focused">Button</ion-button>
+              <ion-button shape="soft" size="small" fill="clear" class="ion-focused">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="soft" fill="clear" class="ion-focused">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="soft" size="large" fill="clear" class="ion-focused">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+            </div>
+            `, config);
+                    const container = page.locator('#container');
+                    await expect(container).toHaveScreenshot(screenshot(`button-shape-soft-fill-clear`));
+                });
+            });
+        });
+        test.describe('round shape', () => {
+            test.describe('default fill', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.setContent(`
+            ${styleTestHelpers}
+
+            <div id="container" class="grid">
+              <ion-button shape="round" size="small">Button</ion-button>
+              <ion-button shape="round">Button</ion-button>
+              <ion-button shape="round" size="large">Button</ion-button>
+              <ion-button shape="round" size="small">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="round">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="round" size="large">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+            </div>
+            `, config);
+                    const container = page.locator('#container');
+                    await expect(container).toHaveScreenshot(screenshot(`button-shape-round-fill-default`));
+                });
+            });
+            test.describe('outline fill', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.setContent(`
+            ${styleTestHelpers}
+
+            <div id="container" class="grid">
+              <ion-button shape="round" fill="outline" size="small">Button</ion-button>
+              <ion-button shape="round" fill="outline">Button</ion-button>
+              <ion-button shape="round" fill="outline" size="large">Button</ion-button>
+              <ion-button shape="round" size="small" fill="outline">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="round" fill="outline">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="round" size="large" fill="outline">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+            </div>
+            `, config);
+                    const container = page.locator('#container');
+                    await expect(container).toHaveScreenshot(screenshot(`button-shape-round-fill-outline`));
+                });
+            });
+            // The clear buttons have the `ion-focused` class added to show their shape
+            test.describe('clear fill', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.setContent(`
+            ${styleTestHelpers}
+
+            <div id="container" class="grid">
+              <ion-button shape="round" fill="clear" size="small" class="ion-focused">Button</ion-button>
+              <ion-button shape="round" fill="clear" class="ion-focused">Button</ion-button>
+              <ion-button shape="round" fill="clear" size="large" class="ion-focused">Button</ion-button>
+              <ion-button shape="round" size="small" fill="clear" class="ion-focused">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="round" fill="clear" class="ion-focused">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="round" size="large" fill="clear" class="ion-focused">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+            </div>
+            `, config);
+                    const container = page.locator('#container');
+                    await expect(container).toHaveScreenshot(screenshot(`button-shape-round-fill-clear`));
+                });
+            });
+        });
+        test.describe('rectangular shape', () => {
+            test.describe('default fill', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.setContent(`
+            ${styleTestHelpers}
+
+            <div id="container" class="grid">
+              <ion-button shape="rectangular" size="small">Button</ion-button>
+              <ion-button shape="rectangular">Button</ion-button>
+              <ion-button shape="rectangular" size="large">Button</ion-button>
+              <ion-button shape="rectangular" size="small">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="rectangular">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="rectangular" size="large">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+            </div>
+            `, config);
+                    const container = page.locator('#container');
+                    await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular-fill-default`));
+                });
+            });
+            test.describe('outline fill', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.setContent(`
+            ${styleTestHelpers}
+
+            <div id="container" class="grid">
+              <ion-button shape="rectangular" fill="outline" size="small">Button</ion-button>
+              <ion-button shape="rectangular" fill="outline">Button</ion-button>
+              <ion-button shape="rectangular" fill="outline" size="large">Button</ion-button>
+              <ion-button shape="rectangular" size="small" fill="outline">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="rectangular" fill="outline">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="rectangular" size="large" fill="outline">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+            </div>
+            `, config);
+                    const container = page.locator('#container');
+                    await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular-fill-outline`));
+                });
+            });
+            // The clear buttons have the `ion-focused` class added to show their shape
+            test.describe('clear fill', () => {
+                test('should not have visual regressions', async ({ page }) => {
+                    await page.setContent(`
+            ${styleTestHelpers}
+
+            <div id="container" class="grid">
+              <ion-button shape="rectangular" fill="clear" size="small" class="ion-focused">Button</ion-button>
+              <ion-button shape="rectangular" fill="clear" class="ion-focused">Button</ion-button>
+              <ion-button shape="rectangular" fill="clear" size="large" class="ion-focused">Button</ion-button>
+              <ion-button shape="rectangular" size="small" fill="clear" class="ion-focused">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="rectangular" fill="clear" class="ion-focused">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+              <ion-button shape="rectangular" size="large" fill="clear" class="ion-focused">
+                <ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
+              </ion-button>
+            </div>
+            `, config);
+                    const container = page.locator('#container');
+                    await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular-fill-clear`));
+                });
+            });
+        });
+    });
+});

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.ionic.css

@@ -0,0 +1,101 @@
+/**
+ * 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: flex;
+  align-items: center;
+  transform: translateZ(0);
+}
+
+::slotted(*) ion-button {
+  --padding-top: 0;
+  --padding-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @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
+ */
+/**
+ * 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.
+ */
+::slotted(*) .button-has-icon-only {
+  --padding-top: 0;
+  --padding-bottom: 0;
+}
+
+::slotted(*) .button-clear {
+  --color: initial;
+  --background: transparent;
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
+}
+
+::slotted(*) .button-has-icon-only {
+  width: var(--ionic-scale-1000, 40px);
+  height: var(--ionic-scale-1000, 40px);
+}
+
+::slotted(*) ion-icon[slot=icon-only] {
+  font-size: var(--ionic-font-size-600, 1.5rem);
+}

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,49 @@
  *   }
  * }
  */
+/**
+ * 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: flex;
+  align-items: center;
+  transform: translateZ(0);
+}
+
+::slotted(*) ion-button {
+  --padding-top: 0;
+  --padding-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/**
+ * 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
@@ -164,9 +219,6 @@
  * }
  */
 :host {
-  display: flex;
-  align-items: center;
-  transform: translateZ(0);
   z-index: 99;
 }
 
@@ -209,9 +261,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 +290,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: '4e5ce9abb3f56e8c91e3eb58c2819300e61eba24', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'a32c3dd9e4c8a0e24be5227a3fc020a9283db778', class: {
+                [theme]: true,
                 ['buttons-collapse']: this.collapse,
-            } }, h("slot", { key: 'f2f360ec888b6e946b512fed07431fab47c61482' })));
+            } }, h("slot", { key: '2a8e7bc3a127bafd38203e6cf0098ff9c160c35c' })));
     }
     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.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["buttons.ios.css"],
-            "md": ["buttons.md.css"]
+            "md": ["buttons.md.css"],
+            "ionic": ["buttons.ionic.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,49 @@
  *   }
  * }
  */
+/**
+ * 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: flex;
+  align-items: center;
+  transform: translateZ(0);
+}
+
+::slotted(*) ion-button {
+  --padding-top: 0;
+  --padding-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/**
+ * 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
@@ -164,9 +219,6 @@
  * }
  */
 :host {
-  display: flex;
-  align-items: center;
-  transform: translateZ(0);
   z-index: 99;
 }