@usecapsule/core-components 2.0.2 → 2.0.4-dev.dropdown

package/dist/collection/components/cpsl-text/cpsl-text.css

@@ -0,0 +1,160 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  font-family: var(--cpsl-font-family, inherit);
+  color: var(--cpsl-color-text-primary);
+  padding: 0px;
+  margin: 0px;
+  display: block;
+}
+
+:host p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding: 0px;
+  margin: 0px;
+  font-weight: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+}
+
+:host(.primary) {
+  color: var(--cpsl-color-text-primary);
+}
+
+:host(.secondary) {
+  color: var(--cpsl-color-text-secondary);
+}
+
+:host(.subtle) {
+  color: var(--cpsl-color-text-subtle);
+}
+
+:host(.inverted) {
+  color: var(--cpsl-color-text-inverted);
+}
+
+:host(.error) {
+  color: var(--cpsl-color-text-error);
+}
+
+:host(.medium) {
+  font-weight: 500;
+}
+
+:host(.semi-bold) {
+  font-weight: 600;
+}
+
+:host(.bold) {
+  font-weight: 700;
+}
+
+:host(.body-2xs) {
+  font-size: var(--cpsl-font-size-body-2xs);
+}
+
+:host(.body-xs) {
+  font-size: var(--cpsl-font-size-body-xs);
+}
+
+:host(.body-s) {
+  font-size: var(--cpsl-font-size-body-s);
+}
+
+:host(.body-m) {
+  font-size: var(--cpsl-font-size-body-m);
+}
+
+:host(.body-l) {
+  font-size: var(--cpsl-font-size-body-l);
+}
+
+:host(.body-xl) {
+  font-size: var(--cpsl-font-size-body-xl);
+}
+
+:host(.heading-xs) {
+  font-size: var(--cpsl-font-size-heading-xs);
+}
+
+:host(.heading-s) {
+  font-size: var(--cpsl-font-size-heading-s);
+}
+
+:host(.heading-m) {
+  font-size: var(--cpsl-font-size-heading-m);
+  letter-spacing: -0.4px;
+}
+
+:host(.heading-l) {
+  font-size: var(--cpsl-font-size-heading-l);
+  letter-spacing: -1.12px;
+}
+
+:host(.heading-xl) {
+  font-size: var(--cpsl-font-size-heading-xl);
+  letter-spacing: -1.28px;
+}
+
+:host(.heading-2xl) {
+  font-size: var(--cpsl-font-size-heading-2xl);
+  letter-spacing: -1.44px;
+}

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

@@ -0,0 +1,128 @@
+import { Host, h } from "@stencil/core";
+export class CpslText {
+    constructor() {
+        this.color = 'primary';
+        this.variant = 'bodyM';
+        this.weight = 'regular';
+    }
+    get Content() {
+        switch (this.variant) {
+            case 'headingXS': {
+                return (h("h6", null, h("slot", null)));
+            }
+            case 'headingS': {
+                return (h("h5", null, h("slot", null)));
+            }
+            case 'headingM': {
+                return (h("h4", null, h("slot", null)));
+            }
+            case 'headingL': {
+                return (h("h3", null, h("slot", null)));
+            }
+            case 'headingXL': {
+                return (h("h2", null, h("slot", null)));
+            }
+            case 'heading2XL': {
+                return (h("h1", null, h("slot", null)));
+            }
+            default: {
+                return (h("p", null, h("slot", null)));
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: '33b70ccfe3929f306d0a9b956ec2a4e16bf751b8', class: {
+                'primary': this.color === 'primary',
+                'secondary': this.color === 'secondary',
+                'subtle': this.color === 'subtle',
+                'inverted': this.color === 'inverted',
+                'error': this.color === 'error',
+                'medium': this.weight === 'medium',
+                'semi-bold': this.weight === 'semiBold',
+                'bold': this.weight === 'bold',
+                'body-2xs': this.variant === 'body2XS',
+                'body-xs': this.variant === 'bodyXS',
+                'body-s': this.variant === 'bodyS',
+                'body-m': this.variant === 'bodyM',
+                'body-l': this.variant === 'bodyL',
+                'body-xl': this.variant === 'bodyXL',
+                'heading-xs': this.variant === 'headingXS',
+                'heading-s': this.variant === 'headingS',
+                'heading-m': this.variant === 'headingM',
+                'heading-l': this.variant === 'headingL',
+                'heading-xl': this.variant === 'headingXL',
+                'heading-2xl': this.variant === 'heading2XL',
+            } }, this.Content));
+    }
+    static get is() { return "cpsl-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'subtle' | 'inverted' | 'error'",
+                    "resolved": "\"error\" | \"inverted\" | \"primary\" | \"secondary\" | \"subtle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of text.\nOptions are: `\"primary\"`, `\"secondary\", `\"subtle\", `\"inverted\", `\"error\".\nDefault is: `\"primary\"`."
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL'",
+                    "resolved": "\"body2XS\" | \"bodyL\" | \"bodyM\" | \"bodyS\" | \"bodyXL\" | \"bodyXS\" | \"heading2XL\" | \"headingL\" | \"headingM\" | \"headingS\" | \"headingXL\" | \"headingXS\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of text.\nOptions are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\nDefault is: `\"bodyM\"`."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'bodyM'"
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'regular' | 'medium' | 'semiBold' | 'bold'",
+                    "resolved": "\"bold\" | \"medium\" | \"regular\" | \"semiBold\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The weight of text.\nOptions are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\nDefault is: `\"regular\"`."
+                },
+                "attribute": "weight",
+                "reflect": false,
+                "defaultValue": "'regular'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-text.js.map

package/dist/collection/components/cpsl-text/cpsl-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;qBAMyD,SAAS;uBAO+E,OAAO;sBAO7G,SAAS;;IAEvE,IAAY,OAAO;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,YAAY,CAAC,CAAC,CAAC;gBAClB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,CACL;oBACE,eAAa,CACX,CACL,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBAEL,SAAS,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBACnC,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;gBACvC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACjC,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACrC,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAE/B,QAAQ,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAClC,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;gBACvC,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAE9B,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACtC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;aAC7C,IAEA,IAAI,CAAC,OAAO,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-text',\n  styleUrl: 'cpsl-text.scss',\n  shadow: true,\n})\nexport class CpslText {\n  /**\n   * The color of text.\n   * Options are: `\"primary\"`, `\"secondary\", `\"subtle\", `\"inverted\", `\"error\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error' = 'primary';\n\n  /**\n   * The variant of text.\n   * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n   * Default is: `\"bodyM\"`.\n   */\n  @Prop() variant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL' = 'bodyM';\n\n  /**\n   * The weight of text.\n   * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n   * Default is: `\"regular\"`.\n   */\n  @Prop() weight?: 'regular' | 'medium' | 'semiBold' | 'bold' = 'regular';\n\n  private get Content() {\n    switch (this.variant) {\n      case 'headingXS': {\n        return (\n          <h6>\n            <slot></slot>\n          </h6>\n        );\n      }\n      case 'headingS': {\n        return (\n          <h5>\n            <slot></slot>\n          </h5>\n        );\n      }\n      case 'headingM': {\n        return (\n          <h4>\n            <slot></slot>\n          </h4>\n        );\n      }\n      case 'headingL': {\n        return (\n          <h3>\n            <slot></slot>\n          </h3>\n        );\n      }\n      case 'headingXL': {\n        return (\n          <h2>\n            <slot></slot>\n          </h2>\n        );\n      }\n      case 'heading2XL': {\n        return (\n          <h1>\n            <slot></slot>\n          </h1>\n        );\n      }\n      default: {\n        return (\n          <p>\n            <slot></slot>\n          </p>\n        );\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          // COLORS\n          'primary': this.color === 'primary',\n          'secondary': this.color === 'secondary',\n          'subtle': this.color === 'subtle',\n          'inverted': this.color === 'inverted',\n          'error': this.color === 'error',\n          // WEIGHTS\n          'medium': this.weight === 'medium',\n          'semi-bold': this.weight === 'semiBold',\n          'bold': this.weight === 'bold',\n          // SIZES\n          'body-2xs': this.variant === 'body2XS',\n          'body-xs': this.variant === 'bodyXS',\n          'body-s': this.variant === 'bodyS',\n          'body-m': this.variant === 'bodyM',\n          'body-l': this.variant === 'bodyL',\n          'body-xl': this.variant === 'bodyXL',\n          'heading-xs': this.variant === 'headingXS',\n          'heading-s': this.variant === 'headingS',\n          'heading-m': this.variant === 'headingM',\n          'heading-l': this.variant === 'headingL',\n          'heading-xl': this.variant === 'headingXL',\n          'heading-2xl': this.variant === 'heading2XL',\n        }}\n      >\n        {this.Content}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-text/test/cpsl-text.e2e.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newE2EPage } from "@stencil/core/testing";
+describe('cpsl-text', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-text></cpsl-text>');
+        const element = yield page.find('cpsl-text');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-text.e2e.js.map

package/dist/collection/components/cpsl-text/test/cpsl-text.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-text.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-text/test/cpsl-text.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;QAEjD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-text', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-text></cpsl-text>');\n\n    const element = await page.find('cpsl-text');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-text/test/cpsl-text.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslText } from "../cpsl-text";
+describe('cpsl-text', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslText],
+            html: `<cpsl-text></cpsl-text>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-text>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-text>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-text.spec.js.map

package/dist/collection/components/cpsl-text/test/cpsl-text.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-text.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-text/test/cpsl-text.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslText } from '../cpsl-text';\n\ndescribe('cpsl-text', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslText],\n      html: `<cpsl-text></cpsl-text>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-text>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-text>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css

@@ -0,0 +1,97 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --button-icon-color: var(--cpsl-color-text-primary);
+  --button-border-radius: var(--cpsl-border-radius-tile-button);
+  --button-background-color: var(--cpsl-color-tile-button-surface-default);
+  --button-border-color: var(--cpsl-color-tile-button-border);
+  --button-width: 72px;
+  --button-height: 56px;
+  --button-gap: 4px;
+  --button-box-shadow: 0px -4px 4px 0px var(--cpsl-color-alpha-black-2) inset, 0px 4px 4px 0px var(--cpsl-color-alpha-white-4) inset;
+}
+
+:host :hover {
+  --button-background-color: var(--cpsl-color-tile-button-surface-hover);
+}
+:host :active {
+  --button-background-color: var(--cpsl-color-tile-button-surface-pressed);
+}
+
+.button-native {
+  border-radius: var(--button-border-radius);
+  -webkit-padding-start: var(--button-padding-start);
+  padding-inline-start: var(--button-padding-start);
+  -webkit-padding-end: var(--button-padding-end);
+  padding-inline-end: var(--button-padding-end);
+  padding-top: var(--button-padding-top);
+  padding-bottom: var(--button-padding-bottom);
+  border: 1px solid transparent;
+  cursor: pointer;
+  background-color: var(--button-background-color);
+  border-color: var(--button-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: var(--button-gap);
+  align-items: center;
+  justify-content: center;
+  width: var(--button-width);
+  height: var(--button-height);
+  box-shadow: var(--button-box-shadow);
+}
+.button-native cpsl-icon {
+  --icon-color: var(--button-icon-color);
+}

package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js

@@ -0,0 +1,67 @@
+import { Host, h } from "@stencil/core";
+export class CpslTileButton {
+    constructor() {
+        this.src = undefined;
+        this.icon = undefined;
+    }
+    render() {
+        return (h(Host, { key: '61cbce3574220ee8009ab95c3e37d80535543d1c' }, h("button", { key: '50169b226155e2b06014c415dd522dfc0deb799c', class: "button-native" }, h("cpsl-icon", { key: '9ee77a4d725f4bec258ae753365a1f5aca733ff5', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b01617dbca7322d9cc8f58c30680cd5f3ed0f576' }))));
+    }
+    static get is() { return "cpsl-tile-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-tile-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-tile-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The external source of the icon. If both `icon` and `src` are provided, `icon` will be used."
+                },
+                "attribute": "src",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconType",
+                    "resolved": "\"key\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "references": {
+                        "IconType": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.ts::IconType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon. If both `icon` and `src` are provided, `icon` will be used."
+                },
+                "attribute": "icon",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-tile-button.js.map

package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-tile-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tile-button/cpsl-tile-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,cAAc;;;;;IAWzB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAC,eAAe;gBAC3B,kEAAW,WAAW,EAAC,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;gBAChE,8DAAa,CACN,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-tile-button',\n  styleUrl: 'cpsl-tile-button.scss',\n  shadow: true,\n})\nexport class CpslTileButton {\n  /**\n   * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() src?: string;\n\n  /**\n   * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.\n   */\n  @Prop() icon?: IconType;\n\n  render() {\n    return (\n      <Host>\n        <button class=\"button-native\">\n          <cpsl-icon exportparts=\"icon\" src={this.src} icon={this.icon} />\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.e2e.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newE2EPage } from "@stencil/core/testing";
+describe('cpsl-tile-button', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-tile-button></cpsl-tile-button>');
+        const element = yield page.find('cpsl-tile-button');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-tile-button.e2e.js.map

package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-tile-button.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-tile-button/test/cpsl-tile-button.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,uCAAuC,CAAC,CAAC;QAE/D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACpD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-tile-button', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-tile-button></cpsl-tile-button>');\n\n    const element = await page.find('cpsl-tile-button');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslTileButton } from "../cpsl-tile-button";
+describe('cpsl-tile-button', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslTileButton],
+            html: `<cpsl-tile-button></cpsl-tile-button>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-tile-button>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-tile-button>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-tile-button.spec.js.map

package/dist/collection/components/cpsl-tile-button/test/cpsl-tile-button.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-tile-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-tile-button/test/cpsl-tile-button.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,uCAAuC;SAC9C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslTileButton } from '../cpsl-tile-button';\n\ndescribe('cpsl-tile-button', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslTileButton],\n      html: `<cpsl-tile-button></cpsl-tile-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-tile-button>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-tile-button>\n    `);\n  });\n});\n"]}

package/dist/collection/constants.js

@@ -0,0 +1,6 @@
+export const MOBILE_SIZE = 480;
+export const DEFAULT_THEME = {
+    foregroundColor: '#121212',
+    backgroundColor: '#FAFAFA',
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAE/B,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;CAC3B,CAAC","sourcesContent":["import { Theme } from './interface';\n\nexport const MOBILE_SIZE = 480;\n\nexport const DEFAULT_THEME: Theme = {\n  foregroundColor: '#121212',\n  backgroundColor: '#FAFAFA',\n};\n"]}

package/dist/collection/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export { generateTheme } from './utils/theme/generateTheme';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export * from './components';\n\nexport { generateTheme } from './utils/theme/generateTheme';\nexport type { Theme, BorderRadius } from './interface';\n"]}