@usecapsule/core-components 2.0.9 → 3.0.1

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

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

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

package/dist/collection/components/cpsl-code-input/cpsl-code-input.js

@@ -87,7 +87,7 @@ export class CpslCodeInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a71927ad671c9bcea55951797bb22fcede118d59' }, h("div", { key: '033281ae8250377ee175112f6428f412eaa339f5', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
+        return (h(Host, { key: '2f52778c8b8b51ef7c875b53394e7275bd93412f' }, h("div", { key: 'e96c3deea7d1e4eaaef4c72fbaca702b6bb46cf1', class: "code-container" }, new Array(this.length).fill(0).map((_, i) => {
             var _a;
             return (h("input", { class: { 'code-input': true, 'error': Boolean(this.errorText) }, id: `code-input-${i}`, maxLength: 1, onKeyDown: ev => this.handleKeyDown(i, ev), onInput: ev => this.handleInput(i, ev), onFocus: () => this.handleFocus(i), onPaste: this.handlePaste, min: 0, max: 9, value: (_a = this.code) === null || _a === void 0 ? void 0 : _a[i], inputMode: this.type === 'number' ? 'numeric' : 'text' }));
         })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));

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

@@ -89,7 +89,7 @@ export class CpslCol {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        return (h(Host, { key: 'fdb8a99b8b9225949b4eea931277e461efac29eb', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '0976c09d835a37413455f787596a75eafc1db14f' })));
+        return (h(Host, { key: 'e883138d5be5bfcffaa61fc3f440cfaf3c2c567d', style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '51c74a5a0895f34074b65441be91f02c3243ba8c' })));
     }
     static get is() { return "cpsl-col"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslDivider {
     render() {
-        return (h(Host, { key: '7b35806d55027d32c6f8c0e5cfcaef46f35ebd68' }, h("div", { key: '5af8157b329cfd491256537c267adbe3e15c8914' }), h("slot", { key: '913734d72f49bc1092f447326710223eb85f901e' }), h("div", { key: '47b8c8569f8e43a830bfb84636faca0df7b7e7df' })));
+        return (h(Host, { key: '1ed13a5022a89b899e6a16f168bff6b71c3c2ad8' }, h("div", { key: 'e9fec054de82d84298ac7cf7fc45f239a9a78442' }), h("slot", { key: 'c6ab3f0e787ee245d206b300c68192bfb3515aa6' }), h("div", { key: '5591e16b69c4cdce5cd5b9932923a189440b7fd5' })));
     }
     static get is() { return "cpsl-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,90 @@
+/**
+ * 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: flex;
+  position: fixed;
+  z-index: 10004;
+}
+
+:host(.left) {
+  left: 0;
+  top: 0;
+  transition: left;
+}
+
+:host(.right) {
+  right: 0;
+  top: 0;
+  transition: right;
+}
+
+:host(.top) {
+  top: 0;
+  left: 0;
+  transition: top;
+}
+
+:host(.bottom) {
+  bottom: 0;
+  left: 0;
+  transition: bottom;
+}
+
+.container {
+  flex: 1;
+  overflow: auto;
+  z-index: 10004;
+}

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

@@ -0,0 +1,149 @@
+import { Host, h } from "@stencil/core";
+import { DEFAULT_Z_INDICES } from "../../constants";
+export class CpslDrawer {
+    constructor() {
+        this.anchor = undefined;
+        this.open = undefined;
+        this.size = undefined;
+        this.transitionDuration = 0.15;
+        this.transitionFunction = 'ease-in-out';
+        this.variant = 'temporary';
+    }
+    render() {
+        const setHeight = this.anchor === 'top' || this.anchor === 'bottom';
+        return (h(Host, { key: '14b5f63f68d3e543b9b2b2f8e7fcbe24222ceb7a', style: {
+                width: setHeight ? '100vw' : `${this.size}px`,
+                height: setHeight ? `${this.size}px` : '100vh',
+                transitionDuration: `${this.transitionDuration}s`,
+                transitionTimingFunction: `${this.transitionFunction}`,
+                [this.anchor]: this.open || this.variant === 'permanent' ? '0px' : `-${this.size}px`,
+            }, class: {
+                top: this.anchor === 'top',
+                bottom: this.anchor === 'bottom',
+                left: this.anchor === 'left',
+                right: this.anchor === 'right',
+            } }, this.variant === 'temporary' && h("cpsl-overlay", { open: this.open, zIndexOverride: DEFAULT_Z_INDICES.modal + 1 }), h("div", { key: '9877dd496d8a055a84ca81d7bf5b3a425b45e473', class: "container", part: "container" }, h("slot", { key: 'b02a97fc7f1fb6fe5f0a8fb45dbf7709977c2c3b' }))));
+    }
+    static get is() { return "cpsl-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "anchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Side from which the drawer will enter from."
+                },
+                "attribute": "anchor",
+                "reflect": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the drawer is open or not."
+                },
+                "attribute": "open",
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size (height or width) of the drawer."
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "transitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the open/close animation.\nDefault is 0.15."
+                },
+                "attribute": "transition-duration",
+                "reflect": false,
+                "defaultValue": "0.15"
+            },
+            "transitionFunction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Transition timing function to use.\nDefault is ease-in-out."
+                },
+                "attribute": "transition-function",
+                "reflect": false,
+                "defaultValue": "'ease-in-out'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'temporary' | 'permanent'",
+                    "resolved": "\"permanent\" | \"temporary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the drawer.\n`temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\nDefault is `temporary`."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'temporary'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-drawer.js","sourceRoot":"","sources":["../../../../src/components/cpsl-drawer/cpsl-drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOpD,MAAM,OAAO,UAAU;;;;;kCAoBiB,IAAI;kCAMJ,aAAa;uBAOL,WAAW;;IAEzD,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;QAEpE,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI;gBAC7C,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO;gBAC9C,kBAAkB,EAAE,GAAG,IAAI,CAAC,kBAAkB,GAAG;gBACjD,wBAAwB,EAAE,GAAG,IAAI,CAAC,kBAAkB,EAAE;gBACtD,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI;aACrF,EACD,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,KAAK;gBAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAChC,IAAI,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAC5B,KAAK,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;aAC/B;YAEA,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,oBAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,iBAAiB,CAAC,KAAK,GAAG,CAAC,GAAI;YAC/G,4DAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW;gBACrC,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { DEFAULT_Z_INDICES } from '../../constants';\n\n@Component({\n  tag: 'cpsl-drawer',\n  styleUrl: 'cpsl-drawer.scss',\n  shadow: true,\n})\nexport class CpslDrawer {\n  /**\n   * Side from which the drawer will enter from.\n   */\n  @Prop() anchor: 'top' | 'bottom' | 'left' | 'right';\n\n  /**\n   * Whether the drawer is open or not.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Size (height or width) of the drawer.\n   */\n  @Prop() size: number;\n\n  /**\n   * Duration in seconds of the open/close animation.\n   * Default is 0.15.\n   */\n  @Prop() transitionDuration?: number = 0.15;\n\n  /**\n   * Transition timing function to use.\n   * Default is ease-in-out.\n   */\n  @Prop() transitionFunction?: string = 'ease-in-out';\n\n  /**\n   * The variant of the drawer.\n   * `temporary` drawers will cover content and contain a backdrop. `permanent` drawers will sit beside content, i.e. desktop navigation.\n   * Default is `temporary`.\n   */\n  @Prop() variant?: 'temporary' | 'permanent' = 'temporary';\n\n  render() {\n    const setHeight = this.anchor === 'top' || this.anchor === 'bottom';\n\n    return (\n      <Host\n        style={{\n          width: setHeight ? '100vw' : `${this.size}px`,\n          height: setHeight ? `${this.size}px` : '100vh',\n          transitionDuration: `${this.transitionDuration}s`,\n          transitionTimingFunction: `${this.transitionFunction}`,\n          [this.anchor]: this.open || this.variant === 'permanent' ? '0px' : `-${this.size}px`,\n        }}\n        class={{\n          top: this.anchor === 'top',\n          bottom: this.anchor === 'bottom',\n          left: this.anchor === 'left',\n          right: this.anchor === 'right',\n        }}\n      >\n        {this.variant === 'temporary' && <cpsl-overlay open={this.open} zIndexOverride={DEFAULT_Z_INDICES.modal + 1} />}\n        <div class=\"container\" part=\"container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-drawer.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-drawer/test/cpsl-drawer.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,6BAA6B;SACpC,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 { CpslDrawer } from '../cpsl-drawer';\n\ndescribe('cpsl-drawer', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslDrawer],\n      html: `<cpsl-drawer></cpsl-drawer>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-drawer>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-drawer>\n    `);\n  });\n});\n"]}

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

@@ -94,7 +94,7 @@ export class CpslDropdown {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'b09375bb984f79e458832b5a95a0936ae59d9397', style: { width: this.width } }, h("button", { key: 'b8d01f1afa93e2981cb28a6de227581a2513b1d1', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '51b57ee33ac92e945f4ce8111dc70063a60b15f3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '7335ad8d095f9af981d62a4c89463a3e2dd48ebd', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { class: "search-bar" }, h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
+        return (h(Host, { key: '65a2ad9d39aa2b234814128f565d1d0024f7b356', style: { width: this.width } }, h("button", { key: '15cf331bd42c8ef8812d699f43f01f234f24e6b4', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: '1259100020d7726980b14ae655377fda6321de39', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '78fd5bece65d9264cb76bae4c1512489747dc2e1', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { class: "search-bar" }, h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
     }
     static get is() { return "cpsl-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,9 +4,9 @@ export class CpslGrid {
         this.fixed = false;
     }
     render() {
-        return (h(Host, { key: 'ad08de3e168770731291ad1fd2ddffcac4ca6145', class: {
+        return (h(Host, { key: '7f71c4736413c5fd6a742716da614991ef6a585e', class: {
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: '0c93c6a07b6acfaa4bd50c6edabbae30e37ed09d' })));
+            } }, h("slot", { key: '98f624d6d897aca30adcd75b14ef88124781981a' })));
     }
     static get is() { return "cpsl-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class CpslIcon {
         this.icon = undefined;
     }
     render() {
-        return (h(Host, { key: '89f3081baf013558e965cc6682811d66dc2b188d', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
+        return (h(Host, { key: '5e1a7143534342f6c3d79ccf1edcc40aa903773a', part: "icon", role: "img" }, !Boolean(this.icon) ? h("img", { src: this.src }) : h("div", { innerHTML: Icons[this.icon] })));
     }
     static get is() { return "cpsl-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -44,7 +44,7 @@ export class CpslIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
+                    "resolved": "\"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BQ2\" | \"BQ3\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CD2\" | \"CF\" | \"CH\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DS\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB2\" | \"GB\" | \"GD\" | \"GE\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PN\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SE\" | \"SG\" | \"SI\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WS\" | \"YE\" | \"ZA\" | \"ZM\" | \"ZW\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"brush\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"checkCircle\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"decentBrand\" | \"decent\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"earth\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"file\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"home\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"key\" | \"lightning01\" | \"lightning\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"rampNetworkBrand\" | \"rampNetwork\" | \"redditBrand\" | \"reddit\" | \"settings\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
                     "references": {
                         "IconType": {
                             "location": "import",

package/dist/collection/components/cpsl-info-box/cpsl-info-box.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslInfoBox {
     render() {
-        return (h(Host, { key: 'c3adc346763da83e631c71bbc4f1ce7aad99ba04' }, h("div", { key: 'c03ce70d8c94d42264216c1376d81f8601a45656', class: "info-box-container" }, h("slot", { key: '3ae35495b7371479d0ad8e731011fb8b06a2c0d9' }))));
+        return (h(Host, { key: '519995e7bf034f2bf6bda24249a0acf5264bc0ab' }, h("div", { key: '076b0866fbfa4812c5403511ec7048c99bba1823', class: "info-box-container" }, h("slot", { key: 'e00f6c9efa7f3701b58f8f20808b6323f9618877' }))));
     }
     static get is() { return "cpsl-info-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,49 +55,51 @@
    */
 :host {
   --container-box-shadow: none;
-  --container-box-shadow-color: var(--cpsl-color-alpha-black-16);
+  --container-box-shadow-color: var(--cpsl-color-input-border-placeholder);
   --container-border-color: var(--cpsl-color-input-border-active);
   --container-border-error-color: var(--cpsl-color-input-border-error);
   --container-background-color: var(--cpsl-color-input-surface-default);
   --container-background-color-disabled: var(--cpsl-color-input-surface-disabled);
   --container-border-width: 1px;
   --container-border-radius: var(--cpsl-border-radius-input);
-  --container-padding-top: 4px;
-  --container-padding-bottom: 4px;
-  --container-padding-end: 4px;
-  --container-padding-start: 8px;
-  --container-height: 46px;
-  --container-gap: 8px;
+  --container-padding-top: 0px;
+  --container-padding-bottom: 0px;
+  --container-padding-end: 12px;
+  --container-padding-start: 12px;
+  --container-height: 48px;
+  --container-gap: 12px;
   --input-background-color: var(--cpsl-color-input-surface-default);
   --input-background-color-disabled: var(--cpsl-color-input-surface-disabled);
   --input-color: var(--cpsl-color-text-primary);
   --input-placeholder-color: var(--cpsl-color-text-secondary);
   --input-font-size: var(--cpsl-font-size-body-m);
+  --optional-label-color: var(--cpsl-color-text-secondary);
   --label-color: var(--cpsl-color-text-primary);
   --label-font-size: var(--cpsl-font-size-body-s);
-  --label-margin-bottom: 5px;
+  --label-margin-bottom: 0px;
   --helper-text-color: var(--cpsl-color-text-secondary);
   --helper-text-error-color: var(--cpsl-color-text-error);
   --helper-text-icon-color: var(--cpsl-color-text-secondary);
   --helper-text-icon-error-color: var(--cpsl-color-text-error);
   --helper-text-icon-size: 16px;
   --helper-text-font-size: var(--cpsl-font-size-body-xs);
-  --helper-text-margin-top: 8px;
-  display: block;
+  --helper-text-margin-top: 0px;
+  --button-padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   font-family: var(--cpsl-font-family, inherit);
 }
 
-:host(.disabled) {
-  --container-background-color: var(--container-background-color-disabled);
-  --input-background-color: var(--input-background-color-disabled);
-  --input-color: var(--cpsl-color-text-secondary);
-}
-
 :host(:not(.has-value)) {
   --container-border-color: var(--cpsl-color-input-border-placeholder);
   --input-color: var(--cpsl-color-text-secondary);
-  --container-background-color: transparent;
-  --input-background-color: transparent;
+}
+
+:host(.disabled) {
+  --container-background-color: var(--container-background-color-disabled);
+  --input-background-color: var(--input-background-color-disabled);
+  --input-color: var(--cpsl-color-text-disabled);
 }
 
 :host(.focused) {
@@ -157,6 +159,13 @@
   margin-bottom: var(--label-margin-bottom);
 }
 
+.optional-label {
+  display: inline-block;
+  color: var(--optional-label-color);
+  font-size: var(--label-font-size);
+  font-weight: 500;
+}
+
 .helper-text-container {
   display: flex;
   align-items: center;
@@ -189,6 +198,13 @@
   --icon-color: var(--input-color);
 }
 :host ::slotted(cpsl-button) {
-  width: calc(var(--container-height) - var(--container-padding-top) - var(--container-padding-bottom) - var(--container-border-width) * 2);
+  width: calc(var(--container-height) - var(--button-padding) * 2);
+  height: calc(var(--container-height) - var(--button-padding) * 2);
   --button-border-radius: calc(var(--container-border-radius) - 2px);
+}
+:host slot[name=end]::slotted(cpsl-button) {
+  margin-right: calc((var(--container-padding-end) - var(--button-padding)) * -1);
+}
+:host slot[name=start]::slotted(cpsl-button) {
+  margin-left: calc((var(--container-padding-end) - var(--button-padding)) * -1);
 }