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

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-overlay.js","sourceRoot":"","sources":["../../../../src/components/cpsl-overlay/cpsl-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,WAAW;;;uCAYqB,GAAG;sCAMJ,GAAG;;IAG7C,YAAY;QACV,IAAI,CAAC,IAAI;YACP,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;YACvH,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,sBAAsB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;QAExH,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;aAAM,CAAC;YAEN,UAAU,CAAC,GAAG,EAAE;gBACd,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;YACnD,CAAC,EAAE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;YACtH,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACrD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch } from '@stencil/core';\nimport gsap from 'gsap';\n\n@Component({\n  tag: 'cpsl-overlay',\n  styleUrl: 'cpsl-overlay.scss',\n  shadow: true,\n})\nexport class CpslOverlay {\n  @Element() el!: HTMLCpslOverlayElement;\n\n  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Duration in seconds of the fade out animation.\n   * Default is .5.\n   */\n  @Prop() enterTransitionDuration?: number = 0.5;\n\n  /**\n   * Duration in seconds of the fade out animation.\n   * Default is .5.\n   */\n  @Prop() exitTransitionDuration?: number = 0.5;\n\n  @Watch('open')\n  toggleHeight() {\n    this.open\n      ? gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 })\n      : gsap.timeline({ defaults: { duration: this.exitTransitionDuration } }).to(this.el, { display: 'none', opacity: 0 });\n\n    if (this.open) {\n      document.documentElement.style.overflow = 'hidden';\n    } else {\n      // Setting a timeout here to prevent modal from shifting when the scroll bar appears\n      setTimeout(() => {\n        document.documentElement.style.overflow = 'auto';\n      }, this.exitTransitionDuration * 1000);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      gsap.timeline({ defaults: { duration: this.enterTransitionDuration } }).to(this.el, { display: 'block', opacity: 1 });\n      document.documentElement.style.overflow = 'hidden';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

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

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

@@ -0,0 +1,92 @@
+/**
+ * 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 {
+  --pill-text-color: var(--cpsl-pill-text);
+  --pill-text-size: clamp(10px, 0.625rem, 15px);
+  --pill-text-line-height: 100%;
+  --pill-container-height: 18px;
+  --pill-container-background-color: var(--cpsl-color-pill-container-background);
+  --pill-container-border-color: var(--cpsl-color-pill-container-border);
+  --pill-container-padding-start: 8px;
+  --pill-container-padding-end: 8px;
+  --pill-container-border-radius: var(--cpsl-border-radius-pill);
+  font-family: var(--cpsl-font-family, inherit);
+  display: inline-block;
+}
+
+.pill-container {
+  -webkit-padding-start: var(--pill-container-padding-start);
+  padding-inline-start: var(--pill-container-padding-start);
+  -webkit-padding-end: var(--pill-container-padding-end);
+  padding-inline-end: var(--pill-container-padding-end);
+  padding-top: var(--pill-container-padding-top);
+  padding-bottom: var(--pill-container-padding-bottom);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  height: var(--pill-container-height);
+  background-color: var(--pill-container-background-color);
+  border: 1px solid;
+  border-color: var(--pill-container-border-color);
+  border-radius: var(--pill-container-border-radius);
+  color: var(--pill-text-color);
+  font-size: var(--pill-text-size);
+  line-height: var(--pill-text-line-height);
+}
+.pill-container span {
+  display: inline-block;
+}

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

@@ -0,0 +1,43 @@
+import { Host, h } from "@stencil/core";
+export class CpslPill {
+    constructor() {
+        this.text = undefined;
+    }
+    render() {
+        return (h(Host, { key: '061ac64aeb0f301d51f62ff889b6a817b0e5abba' }, h("div", { key: 'b6d260c1431d5540c07e976e8fc6d6680dcdda43', class: "pill-container" }, h("span", { key: '22d35f5d971c5ce45995e70af3eb9ef0446fdad1' }, this.text))));
+    }
+    static get is() { return "cpsl-pill"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-pill.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-pill.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the pill."
+                },
+                "attribute": "text",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-pill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-pill.js","sourceRoot":"","sources":["../../../../src/components/cpsl-pill/cpsl-pill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;;;IAMnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACpB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-pill',\n  styleUrl: 'cpsl-pill.scss',\n  shadow: true,\n})\nexport class CpslPill {\n  /**\n   * Text of the pill.\n   */\n  @Prop() text: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pill-container\">\n          <span>{this.text}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

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

package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.css

@@ -0,0 +1,82 @@
+/**
+ * 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 {
+  --step-height: 3px;
+  --step-active-color: var(--cpsl-color-progressIndicator-active);
+  --step-next-color: var(--cpsl-color-progressIndicator-next);
+  --step-previous-color: var(--cpsl-color-progressIndicator-previous);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.step {
+  background-color: var(--step-next-color);
+  border-radius: var(--step-border-radius, calc(var(--step-height) * 2));
+  height: var(--step-height);
+  flex: 1;
+  transition: all 0.5s;
+}
+
+.previous {
+  background-color: var(--step-previous-color);
+}
+
+.active {
+  background-color: var(--step-active-color);
+  flex: 2;
+}

package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.js

@@ -0,0 +1,71 @@
+import { Host, h } from "@stencil/core";
+export class CpslProgressIndicator {
+    constructor() {
+        this.totalSteps = undefined;
+        this.step = undefined;
+    }
+    render() {
+        const steps = new Array(this.totalSteps).fill(0).map((_, i) => {
+            let resp = { active: false, previous: false };
+            if (i === this.step) {
+                resp.active = true;
+            }
+            else if (i < this.step) {
+                resp.previous = true;
+            }
+            return resp;
+        });
+        return (h(Host, null, steps.map(step => (h("div", { class: { step: true, active: step.active, previous: step.previous } })))));
+    }
+    static get is() { return "cpsl-progress-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-progress-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-progress-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "totalSteps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of steps."
+                },
+                "attribute": "total-steps",
+                "reflect": false
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current zero based step."
+                },
+                "attribute": "step",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-progress-indicator.js.map

package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/cpsl-progress-indicator/cpsl-progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,qBAAqB;;;;;IAWhC,MAAM;QACJ,MAAM,KAAK,GAAW,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACpE,IAAI,IAAI,GAAS,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YACpD,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBACpB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;iBAAM,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;gBACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QAEH,OAAO,CACL,EAAC,IAAI,QACF,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,WAAK,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAI,CAC7E,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { Step } from './progress-indicator-interface';\n\n@Component({\n  tag: 'cpsl-progress-indicator',\n  styleUrl: 'cpsl-progress-indicator.scss',\n  shadow: true,\n})\nexport class CpslProgressIndicator {\n  /**\n   * Total number of steps.\n   */\n  @Prop() totalSteps: number;\n\n  /**\n   * Current zero based step.\n   */\n  @Prop() step: number;\n\n  render() {\n    const steps: Step[] = new Array(this.totalSteps).fill(0).map((_, i) => {\n      let resp: Step = { active: false, previous: false };\n      if (i === this.step) {\n        resp.active = true;\n      } else if (i < this.step) {\n        resp.previous = true;\n      }\n      return resp;\n    });\n\n    return (\n      <Host>\n        {steps.map(step => (\n          <div class={{ step: true, active: step.active, previous: step.previous }} />\n        ))}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-progress-indicator/progress-indicator-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=progress-indicator-interface.js.map

package/dist/collection/components/cpsl-progress-indicator/progress-indicator-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-indicator-interface.js","sourceRoot":"","sources":["../../../../src/components/cpsl-progress-indicator/progress-indicator-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface Step {\n  active: boolean;\n  previous: boolean;\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-progress-indicator.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-progress-indicator/test/cpsl-progress-indicator.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,qBAAqB,CAAC;YACnC,IAAI,EAAE,qDAAqD;SAC5D,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 { CpslProgressIndicator } from '../cpsl-progress-indicator';\n\ndescribe('cpsl-progress-indicator', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslProgressIndicator],\n      html: `<cpsl-progress-indicator></cpsl-progress-indicator>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-progress-indicator>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-progress-indicator>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.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 {
+  --qr-color: var(--cpsl-color-qr-fill);
+  --qr-background-color: var(--cpsl-color-qr-background);
+  --qr-border-color: var(--cpsl-color-qr-border);
+  --qr-border-radius: var(--cpsl-border-radius-qr-code);
+  --qr-border-width: 1px;
+  --qr-box-shadow: 0px 1px 2px var(--cpsl-color-alpha-black-10);
+  display: inline-block;
+}
+
+.qr-container {
+  -webkit-padding-start: var(--qr-padding-start);
+  padding-inline-start: var(--qr-padding-start);
+  -webkit-padding-end: var(--qr-padding-end);
+  padding-inline-end: var(--qr-padding-end);
+  padding-top: var(--qr-padding-top);
+  padding-bottom: var(--qr-padding-bottom);
+  display: flex;
+  color: var(--qr-color);
+  border-style: solid;
+  border-width: var(--qr-border-width);
+  border-color: var(--qr-border-color);
+  border-radius: var(--qr-border-radius);
+  background-color: var(--qr-background-color);
+  box-shadow: var(--qr-box-shadow);
+}