@usecapsule/core-components 2.0.9 → 3.0.0

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

@@ -0,0 +1,88 @@
+/**
+ * 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-size: 32px;
+  display: flex;
+}
+
+:host ::slotted(cpsl-button:first-child) {
+  --button-border-radius-top-end: 0px;
+  --button-border-radius-bottom-end: 0px;
+}
+:host ::slotted(cpsl-button:last-child) {
+  --button-border-width-start: 0px;
+  --button-border-radius-top-start: 0px;
+  --button-border-radius-bottom-start: 0px;
+}
+:host ::slotted(cpsl-button:not(:first-child):not(:last-child)) {
+  --button-border-width-start: 0px;
+  --button-border-radius-top-start: 0px;
+  --button-border-radius-bottom-start: 0px;
+  --button-border-radius-top-end: 0px;
+  --button-border-radius-bottom-end: 0px;
+}
+:host ::slotted(cpsl-button) {
+  --button-color: var(--cpsl-color-text-tertiary);
+  --button-padding-start: 0px;
+  --button-padding-end: 0px;
+  --button-padding-top: 0px;
+  --button-padding-bottom: 0px;
+  height: var(--button-size);
+  width: var(--button-size);
+}
+:host ::slotted(cpsl-button.selected) {
+  --button-color: var(--cpsl-color-text-primary);
+}

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

@@ -0,0 +1,78 @@
+import { Host, h } from "@stencil/core";
+export class CpslButtonGroup {
+    constructor() {
+        this.selectedId = undefined;
+    }
+    selectItem() {
+        this.buttonSlots.forEach(item => {
+            if (item.id === this.selectedId) {
+                item.classList.add('selected');
+            }
+            else {
+                item.classList.remove('selected');
+            }
+        });
+    }
+    componentWillRender() {
+        var _a;
+        this.buttonSlots.forEach(item => {
+            item.setAttribute('variant', 'secondary');
+            item.setAttribute('full-width', 'true');
+            this.selectItem();
+        });
+        if (Boolean((_a = this.otherSlots) === null || _a === void 0 ? void 0 : _a.length)) {
+            console.error('cpsl-button is the only valid child of cpsl-button-group');
+            this.otherSlots.forEach(item => item.remove());
+        }
+    }
+    get buttonSlots() {
+        return this.el.querySelectorAll('cpsl-button');
+    }
+    get otherSlots() {
+        return this.el.querySelectorAll('&> *:not(cpsl-button)');
+    }
+    render() {
+        return (h(Host, { key: 'e15232f4180db66b6b7bd21b5e22980f197514be' }, h("slot", { key: 'f3c566eaf9574fb38331e8a44c5c369d1edd5223' })));
+    }
+    static get is() { return "cpsl-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-button-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "selectedId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the selected button."
+                },
+                "attribute": "selected-id",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedId",
+                "methodName": "selectItem"
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-button-group.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button-group/cpsl-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,eAAe;;;;IAS1B,UAAU;QACR,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC9B,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mBAAmB;;QACjB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC9B,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;YAC1C,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;YACxC,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QAEH,IAAI,OAAO,CAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,CAAC,EAAE,CAAC;YACrC,OAAO,CAAC,KAAK,CAAC,0DAA0D,CAAC,CAAC;YAC1E,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACjD,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, Element, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button-group',\n  styleUrl: 'cpsl-button-group.scss',\n  shadow: true,\n})\nexport class CpslButtonGroup {\n  @Element() el!: HTMLCpslButtonGroupElement;\n\n  /**\n   * The id of the selected button.\n   */\n  @Prop() selectedId?: string;\n\n  @Watch('selectedId')\n  selectItem() {\n    this.buttonSlots.forEach(item => {\n      if (item.id === this.selectedId) {\n        item.classList.add('selected');\n      } else {\n        item.classList.remove('selected');\n      }\n    });\n  }\n\n  componentWillRender() {\n    this.buttonSlots.forEach(item => {\n      item.setAttribute('variant', 'secondary');\n      item.setAttribute('full-width', 'true');\n      this.selectItem();\n    });\n\n    if (Boolean(this.otherSlots?.length)) {\n      console.error('cpsl-button is the only valid child of cpsl-button-group');\n      this.otherSlots.forEach(item => item.remove());\n    }\n  }\n\n  private get buttonSlots() {\n    return this.el.querySelectorAll('cpsl-button');\n  }\n\n  private get otherSlots() {\n    return this.el.querySelectorAll('&> *:not(cpsl-button)');\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-button-group/test/cpsl-button-group.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-button-group', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-button-group></cpsl-button-group>');
+        const element = yield page.find('cpsl-button-group');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-button-group.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-button-group.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-button-group/test/cpsl-button-group.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;QAEjE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACrD,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-button-group', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-button-group></cpsl-button-group>');\n\n    const element = await page.find('cpsl-button-group');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-button-group/test/cpsl-button-group.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 { CpslButtonGroup } from "../cpsl-button-group";
+describe('cpsl-button-group', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslButtonGroup],
+            html: `<cpsl-button-group></cpsl-button-group>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-button-group>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-button-group>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-button-group.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-button-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-button-group/test/cpsl-button-group.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yCAAyC;SAChD,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 { CpslButtonGroup } from '../cpsl-button-group';\n\ndescribe('cpsl-button-group', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslButtonGroup],\n      html: `<cpsl-button-group></cpsl-button-group>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-button-group>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-button-group>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,81 @@
+/**
+ * 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 {
+  --card-padding-top: 24px;
+  --card-padding-end: 24px;
+  --card-padding-bottom: 24px;
+  --card-padding-start: 24px;
+  --card-border-width: 1px;
+  --card-border-color: var(--cpsl-color-card-border);
+  --card-border-radius: var(--cpsl-border-radius-card);
+  --card-background-color: var(--cpsl-color-card-surface);
+  display: block;
+}
+
+.card {
+  -webkit-padding-start: var(--card-padding-start);
+  padding-inline-start: var(--card-padding-start);
+  -webkit-padding-end: var(--card-padding-end);
+  padding-inline-end: var(--card-padding-end);
+  padding-top: var(--card-padding-top);
+  padding-bottom: var(--card-padding-bottom);
+  display: block;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: var(--card-border-width) solid var(--card-border-color);
+  border-radius: var(--card-border-radius);
+  background-color: var(--card-background-color);
+}

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

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class CpslCard {
+    render() {
+        return (h(Host, { key: '8633aeaedaaf81af67835ee3ffc8964ec28ced92' }, h("div", { key: '3f2a22aad0a9dde3c6819ec9746576691d2084e5', class: { card: true } }, h("slot", { key: 'c6f573694f67d2096cac429c27f87f3b04547d4b' }))));
+    }
+    static get is() { return "cpsl-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-card.css"]
+        };
+    }
+}
+//# sourceMappingURL=cpsl-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-card.js","sourceRoot":"","sources":["../../../../src/components/cpsl-card/cpsl-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;gBACxB,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-card',\n  styleUrl: 'cpsl-card.scss',\n  shadow: true,\n})\nexport class CpslCard {\n  render() {\n    return (\n      <Host>\n        <div class={{ card: true }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-card/test/cpsl-card.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-card', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-card></cpsl-card>');
+        const element = yield page.find('cpsl-card');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-card.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-card.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-card/test/cpsl-card.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-card', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-card></cpsl-card>');\n\n    const element = await page.find('cpsl-card');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-card/test/cpsl-card.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 { CpslCard } from "../cpsl-card";
+describe('cpsl-card', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslCard],
+            html: `<cpsl-card></cpsl-card>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-card>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-card>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-card.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-card.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-card/test/cpsl-card.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 { CpslCard } from '../cpsl-card';\n\ndescribe('cpsl-card', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslCard],\n      html: `<cpsl-card></cpsl-card>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-card>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-card>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,110 @@
+/**
+ * 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 {
+  --container-height: 20px;
+  --container-width: 20px;
+  --container-border-radius: var(--cpsl-border-radius-checkbox);
+  --container-border-width: 2px;
+  --container-background-color-default: var(--cpsl-color-checkbox-surface-default);
+  --container-border-color-default: var(--cpsl-color-checkbox-border-default);
+  --container-background-color-checked: var(--cpsl-color-checkbox-surface-checked);
+  --container-border-color-checked: var(--cpsl-color-checkbox-border-checked);
+  --icon-height: 16px;
+  --icon-width: 16px;
+  --checkbox-icon-color: var(--cpsl-color-checkbox-icon);
+  display: block;
+  position: relative;
+  height: var(--container-height);
+  width: var(--container-width);
+  cursor: pointer;
+}
+
+input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  opacity: 0;
+}
+
+span.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--container-border-radius);
+  border: var(--container-border-width) solid;
+  background-color: var(--container-background-color-default);
+  border-color: var(--container-border-color-default);
+  transition: all 0.15s ease-in-out;
+}
+span.container cpsl-icon {
+  --height: var(--icon-height);
+  --width: var(--icon-width);
+  opacity: 0;
+  --icon-color: var(--checkbox-icon-color);
+  transition: all 0.15s ease-in-out;
+}
+span.container.checked {
+  background-color: var(--container-background-color-checked);
+  border-color: var(--container-border-color-checked);
+}
+span.container.checked cpsl-icon {
+  opacity: 1;
+}

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

@@ -0,0 +1,64 @@
+import { Host, h } from "@stencil/core";
+export class CpslCheckbox {
+    constructor() {
+        this.handleCheckboxClick = () => {
+            this.cpslCheckboxChanged.emit(!this.checked);
+        };
+        this.checked = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'b5d7963285854a20983f8655c8a9545b8d0735e9' }, h("input", { key: 'b822a505e826f06d47f1da51fff0c7f310d9c9ce', type: "checkbox", checked: this.checked }), h("span", { key: '3747cf548b8d88ceee19eae5c1df78cdc5f9c87e', onClick: this.handleCheckboxClick, class: { container: true, checked: this.checked } }, h("cpsl-icon", { key: '9d5d0cdba4b22bc2167aed23e7748201320a6553', icon: "check" }))));
+    }
+    static get is() { return "cpsl-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkbox is checked."
+                },
+                "attribute": "checked",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslCheckboxChanged",
+                "name": "cpslCheckboxChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checkbox state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-checkbox.js","sourceRoot":"","sources":["../../../../src/components/cpsl-checkbox/cpsl-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,YAAY;;QAWf,wBAAmB,GAAG,GAAG,EAAE;YACjC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC,CAAC;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;YAChD,6DAAM,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;gBACxF,kEAAW,IAAI,EAAC,OAAO,GAAG,CACrB,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Host, Prop, Event, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-checkbox',\n  styleUrl: 'cpsl-checkbox.scss',\n  shadow: true,\n})\nexport class CpslCheckbox {\n  /**\n   * Whether or not the checkbox is checked.\n   */\n  @Prop() checked: boolean;\n\n  /**\n   * Emitted when the checkbox state changes.\n   */\n  @Event() cpslCheckboxChanged!: EventEmitter<boolean>;\n\n  private handleCheckboxClick = () => {\n    this.cpslCheckboxChanged.emit(!this.checked);\n  };\n\n  render() {\n    return (\n      <Host>\n        <input type=\"checkbox\" checked={this.checked} />\n        <span onClick={this.handleCheckboxClick} class={{ container: true, checked: this.checked }}>\n          <cpsl-icon icon=\"check\" />\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-checkbox/test/cpsl-checkbox.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-checkbox', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-checkbox></cpsl-checkbox>');
+        const element = yield page.find('cpsl-checkbox');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-checkbox.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-checkbox.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-checkbox/test/cpsl-checkbox.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,iCAAiC,CAAC,CAAC;QAEzD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACjD,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-checkbox', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-checkbox></cpsl-checkbox>');\n\n    const element = await page.find('cpsl-checkbox');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}