@usecapsule/core-components 2.0.10 → 3.0.1-dev.1

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

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

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

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

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

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

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

@@ -1,11 +1,69 @@
+/**
+ * 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 {
   position: fixed;
   width: 100%;
   height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 999999999999;
+  inset: 0px;
+  z-index: 10001;
   opacity: 0%;
   display: none;
-  background-color: var(--cpsl-color-alpha-black-50);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.7) 100%);
+}
+
+:host(.over-modal) {
+  z-index: 10005;
 }

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

@@ -2,9 +2,10 @@ import { Host, h } from "@stencil/core";
 import gsap from "gsap";
 export class CpslOverlay {
     constructor() {
-        this.open = undefined;
         this.enterTransitionDuration = 0.5;
         this.exitTransitionDuration = 0.5;
+        this.open = undefined;
+        this.zIndexOverride = undefined;
     }
     toggleHeight() {
         this.open
@@ -26,7 +27,7 @@ export class CpslOverlay {
         }
     }
     render() {
-        return (h(Host, { key: 'fb52455d1a68056a20f95e7572dd4afcb1827c41' }, h("slot", { key: '70c5a7f0ecda8560c92ea6f907ad60650f1cdcf2' })));
+        return (h(Host, { key: 'f0a39fa80559007fa5312ca2d88dbbb8d6a65adf', style: Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {} }, h("slot", { key: '4ff06458ac6e33f80c252afe9215d7e084a1f8d8' })));
     }
     static get is() { return "cpsl-overlay"; }
     static get encapsulation() { return "shadow"; }
@@ -42,24 +43,25 @@ export class CpslOverlay {
     }
     static get properties() {
         return {
-            "open": {
-                "type": "boolean",
+            "enterTransitionDuration": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether or not to show the overlay."
+                    "text": "Duration in seconds of the fade out animation.\nDefault is .5."
                 },
-                "attribute": "open",
-                "reflect": false
+                "attribute": "enter-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.5"
             },
-            "enterTransitionDuration": {
+            "exitTransitionDuration": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -73,11 +75,28 @@ export class CpslOverlay {
                     "tags": [],
                     "text": "Duration in seconds of the fade out animation.\nDefault is .5."
                 },
-                "attribute": "enter-transition-duration",
+                "attribute": "exit-transition-duration",
                 "reflect": false,
                 "defaultValue": "0.5"
             },
-            "exitTransitionDuration": {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show the overlay."
+                },
+                "attribute": "open",
+                "reflect": false
+            },
+            "zIndexOverride": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -89,11 +108,10 @@ export class CpslOverlay {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Duration in seconds of the fade out animation.\nDefault is .5."
+                    "text": "Override z-index."
                 },
-                "attribute": "exit-transition-duration",
-                "reflect": false,
-                "defaultValue": "0.5"
+                "attribute": "z-index-override",
+                "reflect": false
             }
         };
     }

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

@@ -1 +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"]}
+{"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;;uCAOqB,GAAG;sCAMJ,GAAG;;;;IAa7C,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,qDAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE;YACnF,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   * 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  /**\n   * Whether or not to show the overlay.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\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 style={Boolean(this.zIndexOverride) ? { zIndex: `${this.zIndexOverride}` } : {}}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,67 @@
+/**
+ * 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 {
+  display: block;
+}
+
+.icon {
+  --height: 20px;
+  --width: 20px;
+}
+
+.start-icon {
+  transform: rotate(180deg);
+}

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

@@ -0,0 +1,174 @@
+import { Host, h } from "@stencil/core";
+export class CpslPagination {
+    constructor() {
+        this.handlePrevClick = () => {
+            if (this.currentPage > 0) {
+                this.currentPage--;
+            }
+        };
+        this.handleNextClick = () => {
+            if (this.currentPage < this.totalPages - 1) {
+                this.currentPage++;
+            }
+        };
+        this.handlePageClick = (value) => () => {
+            if (value >= 0 && value <= this.totalPages - 1) {
+                this.currentPage = value;
+            }
+        };
+        this.currentPage = 0;
+        this.initialPage = undefined;
+        this.totalPages = undefined;
+        this.visiblePages = 5;
+    }
+    watchChange() {
+        this.cpslPaginationChanged.emit(this.currentPage);
+    }
+    componentWillLoad() {
+        var _a;
+        this.currentPage = (_a = this.initialPage) !== null && _a !== void 0 ? _a : 0;
+        if (this.visiblePages < 5) {
+            this.visiblePages = 5;
+        }
+    }
+    render() {
+        const filteredPages = this.totalPages <= this.visiblePages ? [...Array(this.totalPages).keys()] : [];
+        if (this.totalPages > this.visiblePages) {
+            filteredPages.push(0);
+            const isFirstSelected = this.currentPage === 0;
+            const isLastSelected = this.currentPage === this.totalPages - 1;
+            const isFirstOrLastSelected = isFirstSelected || isLastSelected;
+            let remainingVisible = this.visiblePages - (isFirstOrLastSelected ? 2 : 3);
+            const halfRemaining = Math.round(remainingVisible / 2);
+            const numberBefore = Math.max(this.currentPage - 1, 0);
+            const numberAfter = Math.max(this.totalPages - 2 - this.currentPage, 0);
+            let beforeHalf = halfRemaining;
+            let afterHalf = remainingVisible - halfRemaining;
+            if (numberBefore >= beforeHalf) {
+                if (numberAfter < afterHalf) {
+                    beforeHalf += afterHalf - numberAfter;
+                    afterHalf = numberAfter;
+                }
+            }
+            else {
+                afterHalf += beforeHalf - numberBefore;
+                beforeHalf = numberBefore;
+            }
+            while (beforeHalf > 0) {
+                filteredPages.push(this.currentPage - beforeHalf);
+                beforeHalf--;
+            }
+            if (!isFirstSelected) {
+                filteredPages.push(this.currentPage);
+            }
+            const pagesAfter = [];
+            while (afterHalf > 0) {
+                pagesAfter.push(this.currentPage + afterHalf);
+                afterHalf--;
+            }
+            filteredPages.push(...pagesAfter.reverse());
+            if (!isLastSelected) {
+                filteredPages.push(this.totalPages - 1);
+            }
+        }
+        return (h(Host, { key: 'a606e9d711b7e5d3154126e0a9b9f87c192a9e1e' }, h("cpsl-button-group", { key: '7ac1f34cb86fa73897bb58044d9f4c2a76e4b06c', selectedId: `${this.currentPage}` }, h("cpsl-button", { key: '8e6ec83618d2b44610155e25ec2c54e079810aec', onClick: this.handlePrevClick }, h("cpsl-icon", { key: '98f6960d6d1803d391e30f5b4bea63205a2b12c8', class: { 'icon': true, 'start-icon': true }, icon: "arrowNarrow" })), filteredPages.map(page => (h("cpsl-button", { key: page, variant: "secondary", fullWidth: true, id: `${page}`, onClick: this.handlePageClick(page) }, h("cpsl-text", { variant: "bodyS" }, page + 1)))), h("cpsl-button", { key: '6d60771c0040ce028d2fe43c779f58a31a248bf8', onClick: this.handleNextClick }, h("cpsl-icon", { key: '770e0133a563622daa7683d65d289ec5247ec265', class: "icon", icon: "arrowNarrow" })))));
+    }
+    static get is() { return "cpsl-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-pagination.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "initialPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial page to select.\nDefault is 0."
+                },
+                "attribute": "initial-page",
+                "reflect": false
+            },
+            "totalPages": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The total number of pages."
+                },
+                "attribute": "total-pages",
+                "reflect": false
+            },
+            "visiblePages": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of pages visible to select.\nDefault is 5.\nMin is 5."
+                },
+                "attribute": "visible-pages",
+                "reflect": false,
+                "defaultValue": "5"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentPage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslPaginationChanged",
+                "name": "cpslPaginationChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation finishes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "currentPage",
+                "methodName": "watchChange"
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-pagination.js","sourceRoot":"","sources":["../../../../src/components/cpsl-pagination/cpsl-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Event, h, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-pagination',\n  styleUrl: 'cpsl-pagination.scss',\n  shadow: true,\n})\nexport class CpslPagination {\n  @State() currentPage = 0;\n\n  /**\n   * The initial page to select.\n   * Default is 0.\n   */\n  @Prop() initialPage?: number;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() totalPages: number;\n\n  /**\n   * The number of pages visible to select.\n   * Default is 5.\n   * Min is 5.\n   */\n\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) visiblePages?: number = 5;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslPaginationChanged!: EventEmitter<number>;\n\n  @Watch('currentPage')\n  watchChange() {\n    this.cpslPaginationChanged.emit(this.currentPage);\n  }\n\n  componentWillLoad() {\n    this.currentPage = this.initialPage ?? 0;\n    if (this.visiblePages < 5) {\n      this.visiblePages = 5;\n    }\n  }\n\n  private handlePrevClick = () => {\n    if (this.currentPage > 0) {\n      this.currentPage--;\n    }\n  };\n\n  private handleNextClick = () => {\n    if (this.currentPage < this.totalPages - 1) {\n      this.currentPage++;\n    }\n  };\n\n  private handlePageClick = (value: number) => () => {\n    if (value >= 0 && value <= this.totalPages - 1) {\n      this.currentPage = value;\n    }\n  };\n\n  render() {\n    const filteredPages: number[] = this.totalPages <= this.visiblePages ? [...Array(this.totalPages).keys()] : [];\n\n    if (this.totalPages > this.visiblePages) {\n      filteredPages.push(0);\n\n      const isFirstSelected = this.currentPage === 0;\n      const isLastSelected = this.currentPage === this.totalPages - 1;\n      const isFirstOrLastSelected = isFirstSelected || isLastSelected;\n\n      let remainingVisible = this.visiblePages - (isFirstOrLastSelected ? 2 : 3);\n      const halfRemaining = Math.round(remainingVisible / 2);\n      const numberBefore = Math.max(this.currentPage - 1, 0);\n      const numberAfter = Math.max(this.totalPages - 2 - this.currentPage, 0);\n      let beforeHalf = halfRemaining;\n      let afterHalf = remainingVisible - halfRemaining;\n\n      if (numberBefore >= beforeHalf) {\n        if (numberAfter < afterHalf) {\n          beforeHalf += afterHalf - numberAfter;\n          afterHalf = numberAfter;\n        }\n      } else {\n        afterHalf += beforeHalf - numberBefore;\n        beforeHalf = numberBefore;\n      }\n\n      while (beforeHalf > 0) {\n        filteredPages.push(this.currentPage - beforeHalf);\n        beforeHalf--;\n      }\n\n      if (!isFirstSelected) {\n        filteredPages.push(this.currentPage);\n      }\n\n      const pagesAfter: number[] = [];\n      while (afterHalf > 0) {\n        pagesAfter.push(this.currentPage + afterHalf);\n        afterHalf--;\n      }\n\n      filteredPages.push(...pagesAfter.reverse());\n\n      if (!isLastSelected) {\n        filteredPages.push(this.totalPages - 1);\n      }\n    }\n\n    return (\n      <Host>\n        <cpsl-button-group selectedId={`${this.currentPage}`}>\n          <cpsl-button onClick={this.handlePrevClick}>\n            <cpsl-icon class={{ 'icon': true, 'start-icon': true }} icon=\"arrowNarrow\" />\n          </cpsl-button>\n          {filteredPages.map(page => (\n            <cpsl-button key={page} variant=\"secondary\" fullWidth id={`${page}`} onClick={this.handlePageClick(page)}>\n              <cpsl-text variant=\"bodyS\">{page + 1}</cpsl-text>\n            </cpsl-button>\n          ))}\n          <cpsl-button onClick={this.handleNextClick}>\n            <cpsl-icon class=\"icon\" icon=\"arrowNarrow\" />\n          </cpsl-button>\n        </cpsl-button-group>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

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

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

@@ -79,7 +79,7 @@
   align-items: center;
   box-sizing: border-box;
   height: var(--pill-container-height);
-  background-color: var(--pill-container-background-color);
+  background: var(--pill-container-background-color);
   border: 1px solid;
   border-color: var(--pill-container-border-color);
   border-radius: var(--pill-container-border-radius);

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

@@ -4,7 +4,7 @@ export class CpslPill {
         this.text = undefined;
     }
     render() {
-        return (h(Host, { key: '061ac64aeb0f301d51f62ff889b6a817b0e5abba' }, h("div", { key: 'b6d260c1431d5540c07e976e8fc6d6680dcdda43', class: "pill-container" }, h("span", { key: '22d35f5d971c5ce45995e70af3eb9ef0446fdad1' }, this.text))));
+        return (h(Host, { key: '788ab049c90438152e472230dbdfb6c5204d1694' }, h("div", { key: 'c8da2bc450f16a9dab6bb25af747cc047908ef2e', class: "pill-container" }, h("span", { key: '71013ebcc7c8253a3370ca3abe6f1094b101e602' }, this.text))));
     }
     static get is() { return "cpsl-pill"; }
     static get encapsulation() { return "shadow"; }