@ionic/core 8.0.0-dev.11711408410.14d71406 → 8.0.0-dev.11711498366.18f063ac

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

@@ -122,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.
@@ -182,9 +196,9 @@ export class Button {
         }
     }
     render() {
-        const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;
+        const { buttonType, type, disabled, rel, target, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;
         const theme = getIonTheme(this);
-        const finalSize = size === undefined && this.inItem ? 'small' : size;
+        const finalSize = this.getSize();
         const TagType = href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
             ? { type }
@@ -212,7 +226,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: '8747e78e8ed107ee28ce351c5937613705dc4d7e', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'ad194a242d68360d9bbbd025a409af09d87b4d34', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -227,7 +241,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: '4db8bfcb127a3a8eb70ee0dc075a181f6af59635' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: 'cdb4ff90e0163f9fc557957bef1a2e95d1aa4acf', class: "button-inner" }, h("slot", { key: '3c57a70645a1818dc2cd8887dbf98448c757b399', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: 'c5edf0cf141395cb9587f3dd8cd39240e38d8100', name: "start" }), h("slot", { key: 'be7ad33a9d0a50db11a33fdb33dbd03fb71b50ce' }), h("slot", { key: 'e7fb30ccdeb8a3231ef8432c65921209b3325ce4', name: "end" })), theme === '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"; }
@@ -235,14 +249,14 @@ export class Button {
         return {
             "ios": ["button.ios.scss"],
             "md": ["button.md.scss"],
-            "ionic": ["button.md.scss"]
+            "ionic": ["button.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["button.ios.css"],
             "md": ["button.md.css"],
-            "ionic": ["button.md.css"]
+            "ionic": ["button.ionic.css"]
         };
     }
     static get properties() {
@@ -440,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,
@@ -457,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
@@ -331,6 +337,12 @@ ion-ripple-effect {
   color: var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff));
 }
 
+/**
+ * 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/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'], themes: ['ios', 'md', 'ionic'] }).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'], themes: ['ionic'] }).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,8 @@
  */
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+// TODO: FW-6077 - Limit this test to just the Ionic theme on MD mode.
+configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('button: size'), () => {
         test('should render small buttons', async ({ page }) => {
             await page.setContent(`
@@ -41,3 +42,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'], themes: ['ionic'] }).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/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

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

package/dist/collection/components/card/card.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
@@ -128,6 +134,12 @@ 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

package/dist/collection/components/card/card.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
@@ -128,6 +134,12 @@ 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

package/dist/collection/components/card-content/card-content.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
@@ -58,6 +64,12 @@ ion-card-content {
   position: relative;
 }
 
+/**
+ * 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/card-content/card-content.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
@@ -58,6 +64,12 @@ ion-card-content {
   position: relative;
 }
 
+/**
+ * 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/card-header/card-header.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
@@ -68,6 +74,12 @@
   color: var(--ion-color-contrast);
 }
 
+/**
+ * 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/card-header/card-header.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
@@ -68,6 +74,12 @@
   color: var(--ion-color-contrast);
 }
 
+/**
+ * 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/card-subtitle/card-subtitle.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
@@ -66,6 +72,12 @@
   color: var(--ion-color-base);
 }
 
+/**
+ * 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/card-subtitle/card-subtitle.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
@@ -66,6 +72,12 @@
   color: var(--ion-color-base);
 }
 
+/**
+ * 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/card-title/card-title.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
@@ -66,6 +72,12 @@
   color: var(--ion-color-base);
 }
 
+/**
+ * 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/card-title/card-title.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
@@ -66,6 +72,12 @@
   color: var(--ion-color-base);
 }
 
+/**
+ * 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/checkbox/checkbox.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
@@ -333,6 +339,12 @@ input {
   pointer-events: none;
 }
 
+/**
+ * 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
@@ -388,6 +400,12 @@ input {
  *   }
  * }
  */
+/**
+ * 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/checkbox/checkbox.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
@@ -333,6 +339,12 @@ input {
   pointer-events: none;
 }
 
+/**
+ * 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
@@ -388,6 +400,12 @@ input {
  *   }
  * }
  */
+/**
+ * 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/chip/chip.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

package/dist/collection/components/chip/chip.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