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

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

@@ -65,7 +65,7 @@
 }
 
 .step {
-  background-color: var(--step-next-color);
+  background: var(--step-next-color);
   border-radius: var(--step-border-radius, calc(var(--step-height) * 2));
   height: var(--step-height);
   flex: 1;
@@ -73,10 +73,10 @@
 }
 
 .previous {
-  background-color: var(--step-previous-color);
+  background: var(--step-previous-color);
 }
 
 .active {
-  background-color: var(--step-active-color);
+  background: var(--step-active-color);
   flex: 2;
 }

package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css

@@ -76,6 +76,6 @@
   border-width: var(--qr-border-width);
   border-color: var(--qr-border-color);
   border-radius: var(--qr-border-radius);
-  background-color: var(--qr-background-color);
+  background: var(--qr-background-color);
   box-shadow: var(--qr-box-shadow);
 }

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

@@ -32,7 +32,7 @@ export class CpslQrCode {
         qrCode.append(container);
     }
     render() {
-        return (h(Host, { key: '8aa4d75e098ba25375d26e9e84e150cc70106ffa' }, h("div", { key: '02b8d5f1192ecce74476b76f5a6e8602589e2b58', id: "qr-container", class: "qr-container" })));
+        return (h(Host, { key: '68a11eb026f62f795a769b4bb5b91509bda57c55' }, h("div", { key: 'da47238221fed966d47e50471af27d0eaa407e2a', id: "qr-container", class: "qr-container" })));
     }
     static get is() { return "cpsl-qr-code"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,97 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --container-height: 20px;
+  --container-width: 20px;
+  --container-border-radius: var(--cpsl-border-radius-radio);
+  --container-border-width-default: 2px;
+  --container-border-width-checked: 5px;
+  --container-background-color-default: var(--cpsl-color-radio-surface-default);
+  --container-border-color-default: var(--cpsl-color-radio-border-default);
+  --container-background-color-checked: var(--cpsl-color-radio-surface-checked);
+  --container-border-color-checked: var(--cpsl-color-radio-border-checked);
+  display: block;
+  position: relative;
+  height: var(--container-height);
+  width: var(--container-width);
+  cursor: pointer;
+}
+
+input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  opacity: 0;
+}
+
+span.container {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--container-border-radius);
+  border: var(--container-border-width-default) solid;
+  background: var(--container-background-color-default);
+  border-color: var(--container-border-color-default);
+  transition: all 0.15s ease-in-out;
+}
+span.container.checked {
+  background: var(--container-background-color-checked);
+  border-color: var(--container-border-color-checked);
+  border-width: var(--container-border-width-checked);
+}

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

@@ -0,0 +1,66 @@
+import { Host, h } from "@stencil/core";
+export class CpslRadio {
+    constructor() {
+        this.handleRadioClick = () => {
+            if (!this.checked) {
+                this.cpslRadioChanged.emit(!this.checked);
+            }
+        };
+        this.checked = undefined;
+    }
+    render() {
+        return (h(Host, { key: '43659e8ba43bfe8a53578d357d2ab9a3c3bcbd96' }, h("input", { key: 'dc9c9328be5a09b00b4e02b74934ffa02312441d', type: "radio", checked: this.checked }), h("span", { key: '87436a09ace01394e860786950a916efb26a9bb7', onClick: this.handleRadioClick, class: { container: true, checked: this.checked } })));
+    }
+    static get is() { return "cpsl-radio"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the radio is checked."
+                },
+                "attribute": "checked",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslRadioChanged",
+                "name": "cpslRadioChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the radio state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-radio.js","sourceRoot":"","sources":["../../../../src/components/cpsl-radio/cpsl-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,SAAS;;QAWZ,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC,CAAC;;;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;YAC7C,6DAAM,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI,CACtF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Host, Prop, Event, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-radio',\n  styleUrl: 'cpsl-radio.scss',\n  shadow: true,\n})\nexport class CpslRadio {\n  /**\n   * Whether or not the radio is checked.\n   */\n  @Prop() checked: boolean;\n\n  /**\n   * Emitted when the radio state changes.\n   */\n  @Event() cpslRadioChanged!: EventEmitter<boolean>;\n\n  private handleRadioClick = () => {\n    if (!this.checked) {\n      this.cpslRadioChanged.emit(!this.checked);\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <input type=\"radio\" checked={this.checked} />\n        <span onClick={this.handleRadioClick} class={{ container: true, checked: this.checked }} />\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CpslRow {
     render() {
-        return (h(Host, { key: '5f061d20ff017b612a4bada01c66992795cbabe1' }, h("slot", { key: 'ba35af68f6f00e8b12ff3c091935482beb10d27c' })));
+        return (h(Host, { key: 'a227664834127c3580926c34abdc7aacdbd9ffd6' }, h("slot", { key: '61010658365df7a30f0e3b05f45436da5acf6720' })));
     }
     static get is() { return "cpsl-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,227 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --container-box-shadow: none;
+  --container-box-shadow-color: var(--cpsl-color-select-border-placeholder);
+  --container-border-color: var(--cpsl-color-select-border-active);
+  --container-border-error-color: var(--cpsl-color-select-border-error);
+  --container-background-color: var(--cpsl-color-select-surface-default);
+  --container-background-color-disabled: var(--cpsl-color-select-surface-disabled);
+  --container-border-width: 1px;
+  --container-border-radius: var(--cpsl-border-radius-select);
+  --container-padding-top: 0px;
+  --container-padding-bottom: 0px;
+  --container-padding-end: 12px;
+  --container-padding-start: 12px;
+  --container-height: 48px;
+  --container-gap: 8px;
+  --dropdown-margin-top: 4px;
+  --dropdown-border-width: 1px;
+  --dropdown-border-radius: var(--cpsl-border-radius-select);
+  --dropdown-border-color: var(--cpsl-color-select-dropdown-border);
+  --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: 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: 0px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--cpsl-font-family, inherit);
+}
+
+input {
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  opacity: 0;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+}
+input.disabled {
+  cursor: default;
+}
+
+:host(:not(.has-value)) {
+  --container-border-color: var(--cpsl-color-select-border-placeholder);
+  --select-color: var(--cpsl-color-text-secondary);
+}
+
+:host(.disabled) {
+  --container-background-color: var(--container-background-color-disabled);
+  --select-background-color: var(--select-background-color-disabled);
+  --select-color: var(--cpsl-color-text-disabled);
+}
+
+:host(.focused) {
+  --container-box-shadow: 0px 0px 0px 2px var(--container-box-shadow-color);
+  --container-border-color: var(--cpsl-color-select-border-active);
+  --container-background-color: var(--cpsl-color-select-surface-default);
+}
+
+.select-container {
+  -webkit-padding-start: var(--container-padding-start);
+  padding-inline-start: var(--container-padding-start);
+  -webkit-padding-end: var(--container-padding-end);
+  padding-inline-end: var(--container-padding-end);
+  padding-top: var(--container-padding-top);
+  padding-bottom: var(--container-padding-bottom);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  box-sizing: border-box;
+  height: var(--container-height);
+  gap: var(--container-gap);
+  border-style: solid;
+  border-width: var(--container-border-width);
+  border-color: var(--container-border-color);
+  border-radius: var(--container-border-radius);
+  background: var(--container-background-color);
+  box-shadow: var(--container-box-shadow);
+}
+
+.error-container {
+  border-color: var(--container-border-error-color);
+}
+
+.label {
+  display: inline-block;
+  color: var(--label-color);
+  font-size: var(--label-font-size);
+  font-weight: 500;
+  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;
+  gap: 4px;
+  color: var(--helper-text-color);
+  font-size: var(--helper-text-font-size);
+  font-weight: 500;
+  margin-top: var(--helper-text-margin-top);
+}
+.helper-text-container cpsl-icon {
+  --height: var(--helper-text-icon-size);
+  --width: var(--helper-text-icon-size);
+  --icon-color: var(--helper-text-icon-color);
+}
+
+.error-text {
+  color: var(--helper-text-error-color);
+}
+.error-text cpsl-icon {
+  --icon-color: var(--helper-text-icon-error-color);
+}
+
+.selected-container-content {
+  flex: 1;
+}
+
+.chevron {
+  transition: transform 0.3s ease;
+  transform: rotate(180deg);
+  --icon-color: var(--cpsl-color-text-disabled);
+}
+.chevron.open {
+  transform: rotate(0deg);
+  --icon-color: var(--cpsl-color-text-primary);
+}
+.chevron.has-value {
+  --icon-color: var(--cpsl-color-text-primary);
+}
+
+.selected-text {
+  color: var(--cpsl-color-text-primary);
+}
+.selected-text.placeholder {
+  color: var(--cpsl-color-text-disabled);
+}
+
+.dropdown {
+  margin-top: var(--dropdown-margin-top);
+  border-style: solid;
+  border-width: var(--dropdown-border-width);
+  border-color: var(--dropdown-border-color);
+  border-radius: var(--dropdown-border-radius);
+  overflow: hidden;
+}
+.dropdown ::slotted(*:last-child) {
+  --container-border-width: 0px;
+}
+
+.dropdown-inner {
+  overflow: auto;
+  scrollbar-width: thin;
+}