bromcom-ui-next 0.1.4 → 0.1.6

package/dist/collection/components/dropdown/dropdown.css

@@ -0,0 +1 @@
+.visible{visibility:visible}.hidden{display:none}:host{--dropdown-box-min-weight:32px;--dropdown-box-max-width:384px;--dropdown-box-max-height:384px;--dropdown-box-background-color:var("--bcm-ui-color-background-base-default")}.scroll{height:140px;overflow-y:auto;width:140px}.scroll:active::-webkit-scrollbar-thumb,.scroll:focus::-webkit-scrollbar-thumb,.scroll:hover::-webkit-scrollbar-thumb{visibility:visible}.scroll::-webkit-scrollbar-thumb{background-color:#a9a9a9;visibility:hidden}.scroll::-webkit-scrollbar{height:8px;width:8px}.static{position:static}.flex{display:flex}.max-h-\[--dropdown-box-max-height\]{max-height:var(--dropdown-box-max-height)}.w-full{width:100%}.min-w-\[--dropdown-box-min-weight\]{min-width:var(--dropdown-box-min-weight)}.max-w-\[--dropdown-box-max-weight\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.items-center{align-items:center}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\[--dropdown-box-background-color\]{background-color:var(--dropdown-box-background-color)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}

package/dist/collection/components/dropdown-item/dropdown-item.component.js

@@ -0,0 +1,198 @@
+import { h } from "@stencil/core";
+import { tv } from "tailwind-variants";
+export class DropdownItem {
+    constructor() {
+        this.selected = false;
+        this.error = false;
+        this.disabled = false;
+        this.dropdownItemClass = tv({
+            base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',
+            variants: {
+                selected: {
+                    true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',
+                    false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',
+                },
+                error: {
+                    true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',
+                    false: '',
+                },
+                disabled: {
+                    true: '', // should be discuss with ux team
+                    false: '',
+                },
+            },
+            defaultVariants: {
+                selected: false,
+                error: false,
+                disabled: false,
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    handleClick() {
+        this.selected = true;
+        this.bcmDropDownItemChange.emit({
+            element: this.host,
+            selected: this.selected,
+        });
+    }
+    render() {
+        var _a;
+        return (h("div", { key: '210f1b6277e07eeabd5da39d63a332ae84bed898', "aria-checked": this.selected, class: this.dropdownItemClass({
+                selected: this.selected,
+                error: this.error,
+            }), onClick: () => this.handleClick() }, h("slot", { key: '4edc3ba20bd9b7f0bcb456178c72c3050e391e31', name: "left-content" }, this.icon && h("bcm-icon", { key: '867366e7d2491d1d59613f1ada4b5355ea1f67f9', "icon-name": this.icon })), h("div", { key: '845b630b0865d7e73dec69f00819105c7447fac8', class: "flex flex-row text-pretty w-full" }, h("slot", { key: 'ad70e94c42c8ee3bf01e8e14ee9d21909cacc204' }, this.text)), h("slot", { key: 'dfd1dd09b8c0c2f8927e8804087b32254fc7a05d', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
+    }
+    static get is() { return "bcm-dropdown-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "rightIcons": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmDropDownItemChange",
+                "name": "bcmDropDownItemChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=dropdown-item.component.js.map

package/dist/collection/components/dropdown-item/dropdown-item.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.component.js","sourceRoot":"","sources":["../../../src/components/dropdown-item/dropdown-item.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAOvC,MAAM,OAAO,YAAY;IALzB;QAU6B,aAAQ,GAAY,KAAK,CAAC;QAC1B,UAAK,GAAY,KAAK,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAmB3C,sBAAiB,GAAG,EAAE,CAC1B;YACI,IAAI,EAAE,6GAA6G;YACnH,QAAQ,EAAE;gBACN,QAAQ,EAAE;oBACN,IAAI,EAAE,uGAAuG;oBAC7G,KAAK,EAAE,sDAAsD;iBAChE;gBACD,KAAK,EAAE;oBACH,IAAI,EAAE,uHAAuH;oBAC7H,KAAK,EAAE,EAAE;iBACZ;gBACD,QAAQ,EAAE;oBACN,IAAI,EAAE,EAAE,EAAE,iCAAiC;oBAC3C,KAAK,EAAE,EAAE;iBACZ;aACJ;YACD,eAAe,EAAE;gBACb,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,KAAK;aAClB;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KAwBL;IA1DW,WAAW;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC5B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC;IACP,CAAC;IA8BD,MAAM;;QACF,OAAO,CACH,4EACkB,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB,CAAC,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAEjC,6DAAM,IAAI,EAAC,cAAc,IAAE,IAAI,CAAC,IAAI,IAAI,8EAAqB,IAAI,CAAC,IAAI,GAAa,CAAQ;YAC3F,4DAAK,KAAK,EAAC,kCAAkC;gBACzC,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACtB;YACN,6DAAM,IAAI,EAAC,eAAe,IACrB,MAAA,IAAI,CAAC,UAAU,0CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC1B,6BAAqB,IAAI,GAAa,CACzC,CAAC,CACC,CACL,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-dropdown-item',\n    styleUrl: 'dropdown-item.css',\n    shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n    @Element() host: HTMLElement;\n    @Prop() text: string;\n    @Prop() icon: string;\n    @Prop() rightIcons: string[];\n    @Prop({ reflect: true }) selected: boolean = false;\n    @Prop({ reflect: true }) error: boolean = false;\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmDropDownItemChange',\n    })\n    bcmDropDownItemChange: EventEmitter<any>;\n\n\n    private handleClick() {\n        this.selected = true;\n        this.bcmDropDownItemChange.emit({\n            element: this.host,\n            selected: this.selected,\n        });\n    }\n\n    private dropdownItemClass = tv(\n        {\n            base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n            variants: {\n                selected: {\n                    true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n                    false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n                },\n                error: {\n                    true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n                    false: '',\n                },\n                disabled: {\n                    true: '', // should be discuss with ux team\n                    false: '',\n                },\n            },\n            defaultVariants: {\n                selected: false,\n                error: false,\n                disabled: false,\n            },\n        },\n        {\n            twMerge: false,\n        },\n    );\n\n    render() {\n        return (\n            <div\n                aria-checked={this.selected}\n                class={this.dropdownItemClass({\n                    selected: this.selected,\n                    error: this.error,\n                })}\n                onClick={() => this.handleClick()}\n            >\n                <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n                <div class=\"flex flex-row text-pretty w-full\">\n                    <slot>{this.text}</slot>\n                </div>\n                <slot name=\"right-content\">\n                    {this.rightIcons?.map(icon => (\n                        <bcm-icon icon-name={icon}></bcm-icon>\n                    ))}\n                </slot>\n            </div>\n        );\n    }\n}\n"]}

package/dist/collection/components/dropdown-item/dropdown-item.css

@@ -0,0 +1 @@
+.flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\[var\(--bcm-ui-color-background-base-active\)\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-color{color:var(--bcm-ui-color-text-default)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:bg-\[var\(--bcm-ui-color-background-base-active\)\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\:bg-\[var\(--bcm-ui-color-background-base-hover\)\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\:bg-\[var\(--bcm-ui-color-background-palette-red-default\)\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}

package/dist/collection/components/input/input.component.js

@@ -241,14 +241,14 @@ export class BcmInput {
             medium: 16,
             large: 18,
         }[this.size];
-        return (h("div", { key: '2d734e68473e991fa5bf264a000387a7e8c6d806', class: "bcm-ui-element" }, this.label && (h("label", { key: 'ed2362eae0dbedb6ab360d8c8e437a3ca282b0ea', class: classNames('input-label font-medium', {
+        return (h("div", { key: 'a0fa86f738a07e475cd809c9abe8bd7aa5f50d2e', class: "bcm-ui-element" }, this.label && (h("label", { key: 'b2715f3669bf51b2bc93b29a4ce78fc84d6a8fec', class: classNames('input-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }), htmlFor: inputId }, h("slot", { key: '9ef244524cbe01412d7860c4bb1842f8d3b58fdd', name: "label" }, this.label), this.required && h("span", { key: '411c0522038e0dba40bc2b335c5298dd1e538fcc' }, "*"))), h("div", { key: '567dbda203fba555203af092175165b32282c98b', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: 'cc1073ccc66a13fb0bd8a21fcd5507755a2985a4', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: '10af5ceee34923e96229b1c0cb3acfc82c042fbe', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: iconSize })), h("slot", { key: '64677d561c6b8b909f3332c831c780c8213b192f', name: "prefix" }))), h("input", { key: 'e1cf6364100bb073b20fc7d0989e8d92c9dc41e8', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: 'a3b5e1bd54d8c4a326c71e0f6a955fcbeeec9723', class: "flex items-center gap-2 px-2" }, h("slot", { key: 'a90f3f8ccb5f82f85f726c714aa1a4f70c1fcecd', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: '6551bd6154e1f15906dfc098362d8f3269bda7f2', class: "suffix-icon", "icon-name": this.suffixIcon, size: iconSize })))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '1d34fb86e2637d52ed5500e1a1906023fb084c78', class: classNames('input-caption-text font-regular mt-1', {
+            }), htmlFor: inputId }, h("slot", { key: '26f991e1bad25cc2f074b9259320cc555c3d4bd9', name: "label" }, this.label), this.required && h("span", { key: '0b5a332b842ece285b093b2474e7dd376530d613' }, "*"))), h("div", { key: 'f4b1d4087e2bdfb07c140170e4e59e10c2163535', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: 'dcc49ae6c4ad4795d1f10f85065e44cb061fce0e', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: 'c56c06852192dcfc4e7d3df24851afc31804b6b9', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: iconSize })), h("slot", { key: '29bd74d28492d5e95b4c3155b3c5a9fed3671a2a', name: "prefix" }))), h("input", { key: '21a06d459d5f68be085d46580134ea4718192d89', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: 'd3852234f0410ed5ceb7df79c2645a97c45afac2', class: "flex items-center gap-2 px-2" }, h("slot", { key: '1e280c327b4791631c3dda4f3ec49706b8a88300', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: 'd0d14a9d2c7ce1be1de030afb661866b7bf60546', class: "suffix-icon", "icon-name": this.suffixIcon, size: iconSize })))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '4408fc79afa594d8a932898f13573395ae33cccd', class: classNames('input-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
                 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
                 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',

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

@@ -1,2 +1,2 @@
 .visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}
- /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:.25rem}.border-0{border-width:0}.border-solid{border-style:solid}.border-\[--bcm-ui-color-border-default\]{border-color:var(--bcm-ui-color-border-default)}.border-\[--bcm-ui-color-border-error\]{border-color:var(--bcm-ui-color-border-error)}.border-\[--bcm-ui-color-border-info\]{border-color:var(--bcm-ui-color-border-info)}.border-\[--bcm-ui-color-border-success\]{border-color:var(--bcm-ui-color-border-success)}.border-\[--bcm-ui-color-border-warning\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\[--bcm-ui-color-background-base-default\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\[--bcm-ui-color-text-caption\]{color:var(--bcm-ui-color-text-caption)}.text-\[--bcm-ui-color-text-default\]{color:var(--bcm-ui-color-text-default)}.text-\[--bcm-ui-color-text-disabled\]{color:var(--bcm-ui-color-text-disabled)}.text-\[--bcm-ui-color-text-error\]{color:var(--bcm-ui-color-text-error)}.text-\[--bcm-ui-color-text-info\]{color:var(--bcm-ui-color-text-info)}.text-\[--bcm-ui-color-text-success\]{color:var(--bcm-ui-color-text-success)}.text-\[--bcm-ui-color-text-warning\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\:font-normal::placeholder{font-weight:400}.placeholder\:text-\[--bcm-ui-color-text-placeholder\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\:border-\[--bcm-ui-color-border-error\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\:border-\[--bcm-ui-color-border-info\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\:border-\[--bcm-ui-color-border-primary\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\:border-\[--bcm-ui-color-border-success\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\:border-\[--bcm-ui-color-border-warning\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-error\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-info\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-primary\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-success\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-warning\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}
+ /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\[--bcm-ui-color-border-default\]{border-color:var(--bcm-ui-color-border-default)}.border-\[--bcm-ui-color-border-error\]{border-color:var(--bcm-ui-color-border-error)}.border-\[--bcm-ui-color-border-info\]{border-color:var(--bcm-ui-color-border-info)}.border-\[--bcm-ui-color-border-success\]{border-color:var(--bcm-ui-color-border-success)}.border-\[--bcm-ui-color-border-warning\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\[--bcm-ui-color-background-base-default\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\[--bcm-ui-color-text-caption\]{color:var(--bcm-ui-color-text-caption)}.text-\[--bcm-ui-color-text-default\]{color:var(--bcm-ui-color-text-default)}.text-\[--bcm-ui-color-text-disabled\]{color:var(--bcm-ui-color-text-disabled)}.text-\[--bcm-ui-color-text-error\]{color:var(--bcm-ui-color-text-error)}.text-\[--bcm-ui-color-text-info\]{color:var(--bcm-ui-color-text-info)}.text-\[--bcm-ui-color-text-success\]{color:var(--bcm-ui-color-text-success)}.text-\[--bcm-ui-color-text-warning\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\:font-normal::placeholder{font-weight:400}.placeholder\:text-\[--bcm-ui-color-text-placeholder\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\:border-\[--bcm-ui-color-border-error\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\:border-\[--bcm-ui-color-border-info\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\:border-\[--bcm-ui-color-border-primary\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\:border-\[--bcm-ui-color-border-success\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\:border-\[--bcm-ui-color-border-warning\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-error\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-info\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-primary\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-success\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\[\:focus\]\:border-\[--bcm-ui-color-border-warning\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}

package/dist/collection/components/linked/linked.component.js

@@ -0,0 +1,140 @@
+import { h } from "@stencil/core";
+import { computePosition, flip, shift, offset } from "@floating-ui/dom";
+export class BcmLinked {
+    constructor() {
+        this.isVisible = false;
+    }
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.targetEl = this.targetElement || (this.targetId ? document.getElementById(this.targetId) : null);
+            this.floatingEl = this.host.shadowRoot.querySelector('.floating-content');
+            if (this.targetEl) {
+                this.targetEl.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.toggle();
+                });
+                const handleClickOutside = (e) => {
+                    var _a, _b;
+                    const target = e.target;
+                    if (!((_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.contains(target)) &&
+                        !((_b = this.targetEl) === null || _b === void 0 ? void 0 : _b.contains(target)) &&
+                        !this.host.contains(target)) {
+                        this.hide();
+                    }
+                };
+                document.addEventListener('click', handleClickOutside);
+                this.host['_handleClickOutside'] = handleClickOutside;
+            }
+        });
+    }
+    async updatePosition() {
+        if (!this.targetEl || !this.floatingEl)
+            return;
+        const { x, y } = await computePosition(this.targetEl, this.floatingEl, {
+            placement: 'bottom-start',
+            middleware: [
+                offset(2),
+                flip({
+                    fallbackPlacements: ['top-start'],
+                }),
+                shift({ padding: 8 }),
+            ],
+        });
+        Object.assign(this.floatingEl.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+    }
+    show() {
+        this.isVisible = true;
+        this.updatePosition();
+    }
+    hide() {
+        this.isVisible = false;
+    }
+    toggle() {
+        this.isVisible = !this.isVisible;
+        if (this.isVisible) {
+            this.updatePosition();
+        }
+    }
+    render() {
+        return (h("div", { key: '3f941aabcf3f17e8ee628c645ebb1316a305a43f', class: "floating-content z-[1000] flex min-w-max", style: {
+                display: this.isVisible ? 'block' : 'none',
+                position: 'absolute',
+                top: "0px",
+                left: "0px",
+            } }, h("slot", { key: 'd75ff826bc512230c7befcf51757797ffe52abc6' })));
+    }
+    disconnectedCallback() {
+        if (this.targetEl) {
+            this.targetEl.removeEventListener('mouseenter', () => this.show());
+            this.targetEl.removeEventListener('mouseleave', () => this.hide());
+            this.targetEl.removeEventListener('click', () => this.toggle());
+        }
+    }
+    static get is() { return "bcm-linked"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["linked.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["linked.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "targetId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target-id",
+                "reflect": true
+            },
+            "targetElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=linked.component.js.map

package/dist/collection/components/linked/linked.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linked.component.js","sourceRoot":"","sources":["../../../src/components/linked/linked.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Element, State, h } from \"@stencil/core\";\nimport { computePosition, flip, shift, offset } from '@floating-ui/dom';\n\n@Component({\n    tag: 'bcm-linked',\n    styleUrl: 'linked.css',\n    shadow: true,\n})\nexport class BcmLinked implements ComponentInterface {\n    @Element() host: HTMLElement;\n\n    @Prop({ reflect: true, attribute: 'target-id' }) targetId: string;\n\n    @Prop() targetElement?: HTMLElement;\n\n    @State() isVisible: boolean = false;\n\n    private floatingEl?: HTMLElement;\n    private targetEl?: HTMLElement;\n\n\n    componentDidLoad() {\n        requestAnimationFrame(() => {\n            this.targetEl = this.targetElement || (this.targetId ? document.getElementById(this.targetId) : null);\n            this.floatingEl = this.host.shadowRoot.querySelector('.floating-content');\n\n            if (this.targetEl) {\n                this.targetEl.addEventListener('click', (e) => {\n                    e.stopPropagation();\n                    this.toggle();\n                });\n\n                const handleClickOutside = (e: MouseEvent) => {\n                    const target = e.target as Node;\n                    if (!this.floatingEl?.contains(target) &&\n                        !this.targetEl?.contains(target) &&\n                        !this.host.contains(target)) {\n                        this.hide();\n                    }\n                };\n\n                document.addEventListener('click', handleClickOutside);\n\n                this.host['_handleClickOutside'] = handleClickOutside;\n            }\n        });\n    }\n\n    private async updatePosition() {\n        if (!this.targetEl || !this.floatingEl) return;\n\n        const { x, y } = await computePosition(this.targetEl, this.floatingEl, {\n            placement: 'bottom-start',\n            middleware: [\n                offset(2),\n                flip({\n                    fallbackPlacements: ['top-start'],\n                }),\n                shift({ padding: 8 }),\n            ],\n        });\n\n        Object.assign(this.floatingEl.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n        });\n    }\n\n    private show() {\n        this.isVisible = true;\n        this.updatePosition();\n    }\n\n    private hide() {\n        this.isVisible = false;\n    }\n\n    private toggle() {\n        this.isVisible = !this.isVisible;\n        if (this.isVisible) {\n            this.updatePosition();\n        }\n    }\n\n    render() {\n        return (\n            <div\n                class=\"floating-content z-[1000] flex min-w-max\"\n                style={{\n                    display: this.isVisible ? 'block' : 'none',\n                    position: 'absolute',\n                    top: \"0px\",\n                    left: \"0px\",\n                }}\n            >\n                <slot></slot>\n            </div>\n        );\n    }\n\n    disconnectedCallback() {\n        if (this.targetEl) {\n            this.targetEl.removeEventListener('mouseenter', () => this.show());\n            this.targetEl.removeEventListener('mouseleave', () => this.hide());\n            this.targetEl.removeEventListener('click', () => this.toggle());\n        }\n    }\n}"]}

package/dist/collection/components/linked/linked.css

@@ -0,0 +1 @@
+.contents{display:contents}:host{display:contents;width:100%}.static{position:static}.flex{display:flex}.max-h-\[--dropdown-box-max-height\]{max-height:var(--dropdown-box-max-height)}.w-full{width:100%}.min-w-\[--dropdown-box-min-weight\]{min-width:var(--dropdown-box-min-weight)}.max-w-\[--dropdown-box-max-weight\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.items-center{align-items:center}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\[--dropdown-box-background-color\]{background-color:var(--dropdown-box-background-color)}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}.absolute{position:absolute}.z-\[1000\]{z-index:1000}.block{display:block}.min-w-max{min-width:max-content}