@usecapsule/core-components 1.0.0

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

@@ -0,0 +1,205 @@
+import { Host, h } from "@stencil/core";
+export class CpslSlideButton {
+    constructor() {
+        this.endIcon = undefined;
+        this.endText = undefined;
+        this.startIcon = undefined;
+        this.startText = undefined;
+    }
+    componentDidLoad() {
+        this.dragElement(this.el.shadowRoot.getElementById('slider'));
+    }
+    dragElement(el) {
+        const dragMouseDown = (e) => {
+            e.preventDefault();
+            pos3 = e.clientX;
+            document.onmouseup = closeDragElement;
+            document.onmousemove = elementDrag;
+        };
+        const elementDrag = (e) => {
+            e.preventDefault();
+            pos1 = pos3 - e.clientX;
+            pos3 = e.clientX;
+            const newPos = el.offsetLeft - pos1;
+            if (newPos >= minX && newPos <= maxX) {
+                const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);
+                startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;
+                endTextEl.style.opacity = `${newPosPercent * 100}%`;
+                startIconEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;
+                endIconEl.style.opacity = `${newPosPercent * 100}%`;
+                endBackgroundEl.style.opacity = `${newPosPercent * 100}%`;
+                el.style.left = `${newPos}px`;
+            }
+        };
+        const closeDragElement = () => {
+            if (el.offsetLeft + sliderHeight >= containerWidth - sliderHeight / 2) {
+                el.style.left = `${maxX}px`;
+                startTextEl.style.opacity = '0%';
+                endTextEl.style.opacity = '100%';
+                startIconEl.style.opacity = '0%';
+                endIconEl.style.opacity = '100%';
+                endBackgroundEl.style.opacity = '100%';
+                this.cpslComplete.emit(true);
+            }
+            else {
+                el.style.left = `${minX}px`;
+                startTextEl.style.opacity = '100%';
+                endTextEl.style.opacity = '0%';
+                startIconEl.style.opacity = '100%';
+                endIconEl.style.opacity = '0%';
+                endBackgroundEl.style.opacity = '0%';
+            }
+            document.onmouseup = null;
+            document.onmousemove = null;
+        };
+        const startIconEl = this.startIconEl;
+        const endIconEl = this.endIconEl;
+        const startTextEl = this.startTextEl;
+        const endTextEl = this.endTextEl;
+        const endBackgroundEl = this.endBackgroundEl;
+        const sliderContainerEl = this.sliderContainerEl;
+        const containerWidth = sliderContainerEl.clientWidth;
+        const sliderHeight = el.getBoundingClientRect().height;
+        const minX = 1;
+        const maxX = containerWidth - sliderHeight - 1;
+        let pos1 = 0, pos3 = 0;
+        el.onmousedown = dragMouseDown;
+    }
+    get sliderContainerEl() {
+        return this.el.shadowRoot.getElementById('slider-container');
+    }
+    get startTextEl() {
+        return this.el.shadowRoot.getElementById('start-text');
+    }
+    get endTextEl() {
+        return this.el.shadowRoot.getElementById('end-text');
+    }
+    get endBackgroundEl() {
+        return this.el.shadowRoot.getElementById('end-slider-container-background');
+    }
+    get startIconEl() {
+        return this.el.shadowRoot.getElementById('start-icon');
+    }
+    get endIconEl() {
+        return this.el.shadowRoot.getElementById('end-icon');
+    }
+    render() {
+        return (h(Host, { key: '57fd7740a372a4599d1259edb61d3fc9a2a9643b' }, h("div", { key: '4cbf5d20371203c2f65ee96a5e629f0902c29828', id: "slider-container", class: "slider-container" }, h("div", { key: 'a02173329eb88e1c9afa5260758afadbb3049fe5', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: 'afcfc562d5dd147318ca8fcb764d3f0ae7c2a758', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: 'f0518cc4860c5baf248cd91bb19f6bc30113e8cf', id: "slider", class: "slider" }, h("cpsl-icon", { key: 'ab091e18d96b41d2969a3c43137e38cb6ffc9ab5', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: 'df1a10612b9369450eb3be434e7964cf93aefab7', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: 'dcef80a87e6338119b7471e5085f33d481bc7176', id: "start-text", class: "start-text" }, this.startText), h("span", { key: 'c8a55bfce682886aafae5d05ee3e1772ea504129', id: "end-text", class: "end-text" }, this.endText))));
+    }
+    static get is() { return "cpsl-slide-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-slide-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-slide-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconType",
+                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"xBrand\" | \"x\" | \"youtubeBrand\" | \"youtube\"",
+                    "references": {
+                        "IconType": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.ts::IconType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the ending icon to show."
+                },
+                "attribute": "end-icon",
+                "reflect": false
+            },
+            "endText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ending text."
+                },
+                "attribute": "end-text",
+                "reflect": false
+            },
+            "startIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconType",
+                    "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"xBrand\" | \"x\" | \"youtubeBrand\" | \"youtube\"",
+                    "references": {
+                        "IconType": {
+                            "location": "import",
+                            "path": "../../interface",
+                            "id": "src/interface.ts::IconType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the starting icon to show."
+                },
+                "attribute": "start-icon",
+                "reflect": false
+            },
+            "startText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The starting text."
+                },
+                "attribute": "start-text",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslComplete",
+                "name": "cpslComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `cpslComplete` event is fired when the slider is at the end."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=cpsl-slide-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-slide-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-slide-button/cpsl-slide-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, EventEmitter, Event } from '@stencil/core';\nimport { IconType } from '../../interface';\n\n@Component({\n  tag: 'cpsl-slide-button',\n  styleUrl: 'cpsl-slide-button.scss',\n  shadow: true,\n})\nexport class CpslSlideButton {\n  @Element() el!: HTMLCpslSlideButtonElement;\n\n  /**\n   * The name of the ending icon to show.\n   */\n  @Prop() endIcon: IconType;\n\n  /**\n   * The ending text.\n   */\n  @Prop() endText: string;\n\n  /**\n   * The name of the starting icon to show.\n   */\n  @Prop() startIcon: IconType;\n\n  /**\n   * The starting text.\n   */\n  @Prop() startText: string;\n\n  /**\n   * The `cpslComplete` event is fired when the slider is at the end.\n   */\n  @Event() cpslComplete!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    this.dragElement(this.el.shadowRoot.getElementById('slider'));\n  }\n\n  private dragElement(el: HTMLElement) {\n    const dragMouseDown = (e: MouseEvent) => {\n      e.preventDefault();\n      // get the mouse cursor position at startup:\n      pos3 = e.clientX;\n      document.onmouseup = closeDragElement;\n      // call a function whenever the cursor moves:\n      document.onmousemove = elementDrag;\n    };\n\n    const elementDrag = (e: MouseEvent) => {\n      e.preventDefault();\n      // calculate the new cursor position:\n      pos1 = pos3 - e.clientX;\n      pos3 = e.clientX;\n      // set the element's new position:\n\n      const newPos = el.offsetLeft - pos1;\n      if (newPos >= minX && newPos <= maxX) {\n        const newPosPercent = Math.max(Math.min(Math.round((newPos / maxX) * 100) / 100, 100), 0);\n\n        startTextEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endTextEl.style.opacity = `${newPosPercent * 100}%`;\n\n        startIconEl.style.opacity = `${(1 - newPosPercent * 2) * 100}%`;\n        endIconEl.style.opacity = `${newPosPercent * 100}%`;\n\n        endBackgroundEl.style.opacity = `${newPosPercent * 100}%`;\n\n        el.style.left = `${newPos}px`;\n      }\n    };\n\n    const closeDragElement = () => {\n      if (el.offsetLeft + sliderHeight >= containerWidth - sliderHeight / 2) {\n        el.style.left = `${maxX}px`;\n        startTextEl.style.opacity = '0%';\n        endTextEl.style.opacity = '100%';\n        startIconEl.style.opacity = '0%';\n        endIconEl.style.opacity = '100%';\n        endBackgroundEl.style.opacity = '100%';\n        this.cpslComplete.emit(true);\n      } else {\n        el.style.left = `${minX}px`;\n        startTextEl.style.opacity = '100%';\n        endTextEl.style.opacity = '0%';\n        startIconEl.style.opacity = '100%';\n        endIconEl.style.opacity = '0%';\n        endBackgroundEl.style.opacity = '0%';\n      }\n      // stop moving when mouse button is released:\n      document.onmouseup = null;\n      document.onmousemove = null;\n    };\n\n    const startIconEl = this.startIconEl;\n    const endIconEl = this.endIconEl;\n    const startTextEl = this.startTextEl;\n    const endTextEl = this.endTextEl;\n    const endBackgroundEl = this.endBackgroundEl;\n\n    const sliderContainerEl = this.sliderContainerEl;\n    const containerWidth = sliderContainerEl.clientWidth;\n\n    const sliderHeight = el.getBoundingClientRect().height;\n\n    // Offset min by 1 for 1px left padding\n    const minX = 1;\n    // Offset max by the slider width and 1px for padding\n    const maxX = containerWidth - sliderHeight - 1;\n\n    let pos1 = 0,\n      pos3 = 0;\n    el.onmousedown = dragMouseDown;\n  }\n\n  private get sliderContainerEl() {\n    return this.el.shadowRoot.getElementById('slider-container');\n  }\n\n  private get startTextEl() {\n    return this.el.shadowRoot.getElementById('start-text');\n  }\n\n  private get endTextEl() {\n    return this.el.shadowRoot.getElementById('end-text');\n  }\n\n  private get endBackgroundEl() {\n    return this.el.shadowRoot.getElementById('end-slider-container-background');\n  }\n\n  private get startIconEl() {\n    return this.el.shadowRoot.getElementById('start-icon');\n  }\n\n  private get endIconEl() {\n    return this.el.shadowRoot.getElementById('end-icon');\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"slider-container\" class=\"slider-container\">\n          <div id=\"start-slider-container-background\" class={{ 'start-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"end-slider-container-background\" class={{ 'end-slider-container-background': true, 'slider-container-background': true }} />\n          <div id=\"slider\" class=\"slider\">\n            <cpsl-icon id=\"start-icon\" class={{ 'start-icon': true, 'icon': true }} icon={this.startIcon} />\n            <cpsl-icon id=\"end-icon\" class={{ 'end-icon': true, 'icon': true }} icon={this.endIcon} />\n          </div>\n          <span id=\"start-text\" class=\"start-text\">\n            {this.startText}\n          </span>\n          <span id=\"end-text\" class=\"end-text\">\n            {this.endText}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

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

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

@@ -0,0 +1,68 @@
+/**
+ * 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 {
+  --path-color: var(--cpsl-color-foreground-ternary);
+  --circle-color: var(--cpsl-color-text-primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host path {
+  stroke: var(--path-color);
+}
+:host circle {
+  fill: var(--circle-color);
+}

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

@@ -0,0 +1,69 @@
+import { Host, h } from "@stencil/core";
+export class CpslSpinner {
+    constructor() {
+        this.size = 54;
+        this.speed = 1;
+    }
+    render() {
+        return (h(Host, { key: '0a5428cab1c703fb0d8badd595f28a3fb40537b7', style: {
+                'height': `${this.size}px`,
+                'width': `${this.size}px`,
+                'animation': `spin ${this.speed}s linear infinite`,
+                '-webkit-animation': `spin ${this.speed}s linear infinite`,
+                '-moz-animation': `spin ${this.speed}s linear infinite`,
+            } }, h("svg", { key: '26aa4015fecc83bbcdab871703c17451c517ee2a', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: '4b5628962606e2e84484d6f294c9fd55195b931b', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '09ae378ddf207361f6220d59311fc6bab8d5acbb', cx: "45", cy: "27", r: "5" }))));
+    }
+    static get is() { return "cpsl-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-spinner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the spinner in pixels.\nDefault is 50."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "54"
+            },
+            "speed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Rotation speed of the spinner in seconds.\nDefault is 1."
+                },
+                "attribute": "speed",
+                "reflect": false,
+                "defaultValue": "1"
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-spinner.js","sourceRoot":"","sources":["../../../../src/components/cpsl-spinner/cpsl-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;oBAKE,EAAE;qBAMD,CAAC;;IAE1B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBAC1B,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;gBACzB,WAAW,EAAE,QAAQ,IAAI,CAAC,KAAK,mBAAmB;gBAClD,mBAAmB,EAAE,QAAQ,IAAI,CAAC,KAAK,mBAAmB;gBAC1D,gBAAgB,EAAE,QAAQ,IAAI,CAAC,KAAK,mBAAmB;aACxD;YAED,4DAAK,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;gBAC1G,6DACE,CAAC,EAAC,sIAAsI,kBAC3H,GAAG,oBACD,OAAO,GACtB;gBACF,+DAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG,CAC5B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-spinner',\n  styleUrl: 'cpsl-spinner.scss',\n  shadow: true,\n})\nexport class CpslSpinner {\n  /**\n   * Size of the spinner in pixels.\n   * Default is 50.\n   */\n  @Prop() size?: number = 54;\n\n  /**\n   * Rotation speed of the spinner in seconds.\n   * Default is 1.\n   */\n  @Prop() speed?: number = 1;\n\n  render() {\n    return (\n      <Host\n        style={{\n          'height': `${this.size}px`,\n          'width': `${this.size}px`,\n          'animation': `spin ${this.speed}s linear infinite`,\n          '-webkit-animation': `spin ${this.speed}s linear infinite`,\n          '-moz-animation': `spin ${this.speed}s linear infinite`,\n        }}\n      >\n        <svg height={this.size} width={this.size} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 54 54\" fill=\"none\">\n          <path\n            d=\"M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37\"\n            stroke-width=\"6\"\n            stroke-linecap=\"round\"\n          />\n          <circle cx=\"45\" cy=\"27\" r=\"5\" />\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-spinner.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-spinner/test/cpsl-spinner.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,+BAA+B;SACtC,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 { CpslSpinner } from '../cpsl-spinner';\n\ndescribe('cpsl-spinner', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslSpinner],\n      html: `<cpsl-spinner></cpsl-spinner>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-spinner>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-spinner>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,20 @@
+:host {
+  padding-top: var(--tab-top-padding);
+  padding-bottom: var(--tab-bottom-padding);
+  padding-left: var(--tab-left-padding);
+  padding-right: var(--tab-right-padding);
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.tab-container {
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
+  text-align: center;
+  white-space: nowrap;
+}