jebamo 0.0.1 → 0.0.2

package/dist/collection/components/je-textarea/je-textarea.js

@@ -0,0 +1,171 @@
+import { Host, h } from "@stencil/core";
+export class JeTextarea {
+    constructor() {
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.value = undefined;
+        this.disabled = undefined;
+        this.readonly = undefined;
+        this.required = undefined;
+        this.debounce = 0;
+        this.maxLength = undefined;
+    }
+    render() {
+        return (h(Host, { key: '1b04c1cc5e2e68ea2df63eb6ef1a3e80f0c8e4ee' }, this.label && h("label", { key: '98514a4abb324648adcffb321ae69f088435ed68' }, this.label), h("textarea", { key: '4c9c3187928ac210459fa0699e525f33b27efa67', value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxLength, title: this.label }), h("slot", { key: '2e382b7892148f42516526aff5d5d9f49bd22a33', name: "top-right" })));
+    }
+    static get is() { return "je-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-textarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "readonly",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required",
+                "reflect": false
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "debounce",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-length",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=je-textarea.js.map

package/dist/collection/components/je-textarea/je-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-textarea.js","sourceRoot":"","sources":["../../../src/components/je-textarea/je-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,UAAU;;;;;;;;wBAOF,CAAC;;;IAGpB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS;YAC1C,iEACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG;YACtB,6DAAM,IAAI,EAAC,WAAW,GAAE,CACnB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-textarea',\n  styleUrl: 'je-textarea.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class JeTextarea {\n  @Prop() label?: string;\n  @Prop() placeholder?: string;\n  @Prop() value?: string;\n  @Prop() disabled?: boolean;\n  @Prop() readonly?: boolean;\n  @Prop() required?: boolean;\n  @Prop() debounce = 0;\n  @Prop() maxLength?: number;\n\n  render() {\n    return (\n      <Host>\n        {this.label && <label>{this.label}</label>}\n        <textarea\n          value={this.value}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          maxLength={this.maxLength}\n          title={this.label}/>\n        <slot name=\"top-right\"/>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/je-toast/je-toast.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/je-toast/je-toast.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class JeToast {
+    render() {
+        return (h(Host, { key: '8e7805c7eb37d0e4cd3fd29af117299f0a643797' }, h("slot", { key: '8b06486084a240b79d9f9213a3355ddd0aad102e' })));
+    }
+    static get is() { return "je-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-toast.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-toast.css"]
+        };
+    }
+}
+//# sourceMappingURL=je-toast.js.map

package/dist/collection/components/je-toast/je-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-toast.js","sourceRoot":"","sources":["../../../src/components/je-toast/je-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,OAAO;IAClB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-toast',\n  styleUrl: 'je-toast.scss',\n  shadow: true,\n})\nexport class JeToast {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/je-toggle/je-toggle.css

@@ -0,0 +1,48 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  position: relative;
+  width: fit-content;
+  cursor: pointer;
+  /**
+   * @prop --inactive-background: Background color when not checked
+   * @prop --active-background: Background color when checked
+   */
+  --inactive-background: var(--je-medium-500);
+  --active-background: var(--je-primary-500);
+}
+
+:host([checked]) .toggle-container {
+  background-color: var(--je-primary-500);
+}
+
+.toggle-container {
+  display: flex;
+  align-items: center;
+  background-color: var(--inactive-background);
+  transition: background-color 250ms ease-in-out;
+  border-radius: var(--je-border-radius);
+  padding: var(--je-spacing-3xs);
+  width: 40px;
+  position: relative;
+  cursor: pointer;
+}
+
+.toggle-thumb {
+  position: absolute;
+  height: var(--je-spacing-lg);
+  width: var(--je-spacing-lg);
+  background-color: var(--je-background-color);
+  border: solid 1px var(--inactive-background);
+  border-radius: 50%;
+  transition: all 250ms ease-in-out;
+  left: 0;
+  right: unset;
+}
+
+.checked {
+  border: solid 1px var(--active-background);
+  left: 100%;
+  transform: translateX(-100%);
+}

package/dist/collection/components/je-toggle/je-toggle.js

@@ -0,0 +1,105 @@
+import { Host, h } from "@stencil/core";
+export class JeToggle {
+    constructor() {
+        this.checked = false;
+        this.labelPlacement = 'end';
+    }
+    toggle() {
+        this.checked = !this.checked;
+        this.toggled.emit(this.checked);
+    }
+    onCheckedChange(newVal) {
+        if (newVal !== this.checked) {
+            this.checked = newVal;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'ccf01db278f6873a9d88610d283bff3b08b50cf7' }, this.labelPlacement == 'start' && h("slot", { key: '61bf33abceeb25e552e86591b41261c379dab160' }), h("div", { key: 'b11204ef90a6b74fd66bb6260803727931a405c0', class: "toggle-container" }, h("div", { key: '63d76c00317e2383fa01b5159d886530c8ea4c3a', class: { 'toggle-thumb': true, 'checked': this.checked } })), this.labelPlacement == 'end' && h("slot", { key: 'feee84848b9274cd8d2b9b893f57763426bd2f0b' })));
+    }
+    static get is() { return "je-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-toggle.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-toggle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the toggle is active"
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "labelPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the label should be placed at the start or end of the toggle"
+                },
+                "attribute": "label-placement",
+                "reflect": false,
+                "defaultValue": "'end'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggled",
+                "name": "toggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the new value whenever toggle is clicked"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "toggle",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-toggle.js.map

package/dist/collection/components/je-toggle/je-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-toggle.js","sourceRoot":"","sources":["../../../src/components/je-toggle/je-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO7F,MAAM,OAAO,QAAQ;;uBAI+B,KAAK;8BAKb,KAAK;;IAQ/C,MAAM;QACJ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAGD,eAAe,CAAC,MAAe;QAC7B,IAAI,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC5B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACxB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,cAAc,IAAI,OAAO,IAAI,8DAAa;YAChD,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,GAAQ,CACjE;YACL,IAAI,CAAC,cAAc,IAAI,KAAK,IAAI,8DAAa,CACzC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, Host, Listen, Prop, Watch, h, Event } from '@stencil/core';\n\n@Component({\n  tag: 'je-toggle',\n  styleUrl: 'je-toggle.scss',\n  shadow: true,\n})\nexport class JeToggle {\n  /**\n   * Whether or not the toggle is active\n   */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /**\n   * If the label should be placed at the start or end of the toggle\n   */\n  @Prop() labelPlacement: 'start' | 'end' = 'end';\n\n  /**\n   * Emits the new value whenever toggle is clicked\n   */\n  @Event() toggled: EventEmitter<boolean>;\n\n  @Listen('click', { capture: true })\n  toggle() {\n    this.checked = !this.checked;\n    this.toggled.emit(this.checked);\n  }\n\n  @Watch('checked')\n  onCheckedChange(newVal: boolean) {\n    if (newVal !== this.checked) {\n      this.checked = newVal;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.labelPlacement == 'start' && <slot></slot>}\n        <div class=\"toggle-container\">\n          <div class={{ 'toggle-thumb': true, 'checked': this.checked }}></div>\n        </div>\n        {this.labelPlacement == 'end' && <slot></slot>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/je-toolbar/je-toolbar.css

@@ -0,0 +1,16 @@
+:host {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--je-toolbar-gap);
+  color: var(--je-text-color, inherit);
+  background-color: var(--je-background-color, inherit);
+  --je-toolbar-gap: var(--je-spacing, 16px);
+}
+
+.center-container {
+  flex: 1;
+  display: flex;
+  gap: var(--je-toolbar-gap);
+}

package/dist/collection/components/je-toolbar/je-toolbar.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class JeToolbar {
+    render() {
+        return (h(Host, { key: '5cfe24be7e72a5d95da99cded5936ca19323884d' }, h("slot", { key: '6061fc949c06801c223d3543f57d623db5bb39e0', name: 'start' }), h("div", { key: '53584f2d947163b364514d97d0c8152d4cba3af5', class: 'center-container' }, h("slot", { key: 'd00dee4f0fa3eb140ecb1d325afe04f3ce67a6aa' })), h("slot", { key: 'ed218601bfe1886a6597fcd5cdbdf8a58a7ec876', name: 'end' })));
+    }
+    static get is() { return "je-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-toolbar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-toolbar.css"]
+        };
+    }
+}
+//# sourceMappingURL=je-toolbar.js.map

package/dist/collection/components/je-toolbar/je-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-toolbar.js","sourceRoot":"","sources":["../../../src/components/je-toolbar/je-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,OAAO,GAAE;YACpB,4DAAK,KAAK,EAAC,kBAAkB;gBAAC,8DAAO,CAAM;YAC3C,6DAAM,IAAI,EAAC,KAAK,GAAE,CACb,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-toolbar',\n  styleUrl: 'je-toolbar.scss',\n  shadow: true,\n})\nexport class JeToolbar {\n  render() {\n    return (\n      <Host>\n        <slot name='start'/>\n        <div class='center-container'><slot/></div>\n        <slot name='end'/>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/menu/je-menu/je-menu.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/menu/je-menu/je-menu.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class JeMenu {
+    render() {
+        return (h(Host, { key: '798cf918af393ff7da05782262c104cacd53c3f6' }, h("slot", { key: 'b8d8d8068b5e4e9ba7e4d331acb822a25febc56b' })));
+    }
+    static get is() { return "je-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-menu.css"]
+        };
+    }
+}
+//# sourceMappingURL=je-menu.js.map

package/dist/collection/components/menu/je-menu/je-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-menu.js","sourceRoot":"","sources":["../../../../src/components/menu/je-menu/je-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-menu',\n  styleUrl: 'je-menu.scss',\n  shadow: true,\n})\nexport class JeMenu {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/menu/je-menu-option/je-menu-option.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/menu/je-menu-option/je-menu-option.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class JeMenuOption {
+    render() {
+        return (h(Host, { key: 'd8cdba795f461c2b9ed42d67a25b3f4acaa472c7' }, h("slot", { key: 'dfc492f36d12f68d253ef2880bbbc0a960b941a0' })));
+    }
+    static get is() { return "je-menu-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-menu-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-menu-option.css"]
+        };
+    }
+}
+//# sourceMappingURL=je-menu-option.js.map

package/dist/collection/components/menu/je-menu-option/je-menu-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-menu-option.js","sourceRoot":"","sources":["../../../../src/components/menu/je-menu-option/je-menu-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,YAAY;IACvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-menu-option',\n  styleUrl: 'je-menu-option.scss',\n  shadow: true,\n})\nexport class JeMenuOption {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/multiselect/je-multiselect/je-multiselect.css

@@ -0,0 +1,79 @@
+:host {
+  display: block;
+  width: 207px;
+  --je-height: 42px;
+  --je-border-color: transparent;
+  --je-input-background: var(--je-medium-100);
+  --je-input-color: var(--je-medium-900);
+}
+
+:host([darkmode]) {
+  --je-input-background: var(--je-medium-850);
+  --je-input-color: var(--je-medium-50);
+}
+
+:host([expand]) {
+  width: 100%;
+}
+
+:host(:invalid) div[part=outer-container].touched {
+  --je-border-color: var(--je-error-500, red);
+}
+
+div[part=outer-container] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--je-spacing-2xs, 8px);
+  height: var(--je-height);
+  background-color: var(--je-input-background, field);
+  color: var(--je-input-color, fieldtext);
+  padding-inline: var(--je-spacing-xs, 10px);
+  border-radius: var(--je-border-radius, 2px);
+  overflow: hidden;
+  border: solid 1px var(--je-border-color);
+  transition: border 125ms ease-in-out;
+}
+div[part=outer-container].focus {
+  --je-border-color: var(--je-primary-500, accentcolor);
+}
+div[part=outer-container].disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+div[part=start-container],
+div[part=end-container] {
+  display: flex;
+}
+
+div[part=main-container] {
+  display: inline-block;
+  overflow: hidden;
+  color: var(--je-medium-600);
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  margin-right: auto;
+}
+
+label {
+  font-weight: var(--je-font-semi-bold);
+}
+
+je-popover::part(content) {
+  width: var(--je-content-width, auto);
+  box-sizing: border-box;
+  padding: 0px;
+}
+
+je-icon {
+  transition: transform 250ms ease;
+}
+
+je-icon.open {
+  transform: rotate(180deg);
+}
+
+je-pill {
+  margin-right: var(--je-spacing-3xs);
+}