npm - @xplor-education/core-stencil-components - Versions diffs - 2.1.0 → 3.1.1 - Mend

@xplor-education/core-stencil-components 2.1.0 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (318) hide show

package/components/xplor-expansion-panels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-expansion-panels.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,s4NAAs4N;;MCOz5NA,sBAAoB,iBAAAC,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;AALjC,IAAA,WAAA,GAAA;;;AAM6B,QAAA,IAAK,CAAA,KAAA,GAAsB,EAAE;AAC9C,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAA,CAAA,SAAS,GAAY,IAAI,CAAC;AAEzB,QAAA,IAAA,CAAA,UAAU,GAAgB,IAAI,GAAG,EAAE;AAuC/C;IArCG,iBAAiB,GAAA;QACb,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;AAClC,aAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAK/C,IAAA,iBAAiB,CAAC,KAAmD,EAAA;QACjE,KAAK,CAAC,eAAe,EAAE;QACvB,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM;QAEnC,IAAI,MAAM,EAAE;AACR,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,gBAAA,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;;iBAChD;gBACH,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;;;aAEhC;YACH,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;AAC1C,YAAA,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;AACpB,YAAA,IAAI,CAAC,UAAU,GAAG,SAAS;;AAG/B,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;;IAGnG,MAAM,GAAA;AACF,QAAA,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,~~CAAK~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAA~~,KAAK,EAAC,kBAAkB,EAAA,~~EACzB~~,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorExpansionPanels","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-expansion-panels/xplor-expansion-panels.scss?tag=xplor-expansion-panels&encapsulation=scoped","src/components/xplor-expansion-panels/xplor-expansion-panels.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.expansion-panels {\n display: flex;\n flex-direction: column;\n gap: 0;\n}","import { Component, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'xplor-expansion-panels',\n styleUrl: 'xplor-expansion-panels.scss',\n scoped: true,\n})\nexport class XplorExpansionPanels {\n @Prop({ mutable: true }) value: string \| string[] = [];\n @Prop() multiple: boolean = false;\n @Prop() accordion: boolean = true; // accordion mode (only one open at a time when not multiple)\n\n @State() openPanels: Set<string> = new Set();\n\n componentWillLoad() {\n if (Array.isArray(this.value)) {\n this.openPanels = new Set(this.value);\n } else if (this.value) {\n this.openPanels = new Set([this.value]);\n }\n }\n\n @Listen('xplorPanelToggle')\n handlePanelToggle(event: CustomEvent<{ id: string; isOpen: boolean }>) {\n event.stopPropagation();\n const { id, isOpen } = event.detail;\n\n if (isOpen) {\n if (this.multiple) {\n this.openPanels = new Set([...this.openPanels, id]);\n } else {\n this.openPanels = new Set([id]);\n }\n } else {\n const newPanels = new Set(this.openPanels);\n newPanels.delete(id);\n this.openPanels = newPanels;\n }\n\n this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] \|\| '';\n }\n\n render() {\n return (\n <Host>\n <div class=\"expansion-panels\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-expansion-panels.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,s4NAAs4N;;MCOz5NA,sBAAoB,iBAAAC,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;AALjC,IAAA,WAAA,GAAA;;;AAM6B,QAAA,IAAK,CAAA,KAAA,GAAsB,EAAE;AAC9C,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAA,CAAA,SAAS,GAAY,IAAI,CAAC;AAEzB,QAAA,IAAA,CAAA,UAAU,GAAgB,IAAI,GAAG,EAAE;AAuC/C;IArCG,iBAAiB,GAAA;QACb,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;AAClC,aAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACnB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;;;AAK/C,IAAA,iBAAiB,CAAC,KAAmD,EAAA;QACjE,KAAK,CAAC,eAAe,EAAE;QACvB,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM;QAEnC,IAAI,MAAM,EAAE;AACR,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,gBAAA,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;;iBAChD;gBACH,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;;;aAEhC;YACH,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;AAC1C,YAAA,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;AACpB,YAAA,IAAI,CAAC,UAAU,GAAG,SAAS;;AAG/B,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;;IAGnG,MAAM,GAAA;AACF,QAAA,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,YAAA,EAAY,WAAW,EAAA,EAChD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorExpansionPanels","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-expansion-panels/xplor-expansion-panels.scss?tag=xplor-expansion-panels&encapsulation=scoped","src/components/xplor-expansion-panels/xplor-expansion-panels.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.expansion-panels {\n display: flex;\n flex-direction: column;\n gap: 0;\n}","import { Component, Host, h, Prop, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'xplor-expansion-panels',\n styleUrl: 'xplor-expansion-panels.scss',\n scoped: true,\n})\nexport class XplorExpansionPanels {\n @Prop({ mutable: true }) value: string \| string[] = [];\n @Prop() multiple: boolean = false;\n @Prop() accordion: boolean = true; // accordion mode (only one open at a time when not multiple)\n\n @State() openPanels: Set<string> = new Set();\n\n componentWillLoad() {\n if (Array.isArray(this.value)) {\n this.openPanels = new Set(this.value);\n } else if (this.value) {\n this.openPanels = new Set([this.value]);\n }\n }\n\n @Listen('xplorPanelToggle')\n handlePanelToggle(event: CustomEvent<{ id: string; isOpen: boolean }>) {\n event.stopPropagation();\n const { id, isOpen } = event.detail;\n\n if (isOpen) {\n if (this.multiple) {\n this.openPanels = new Set([...this.openPanels, id]);\n } else {\n this.openPanels = new Set([id]);\n }\n } else {\n const newPanels = new Set(this.openPanels);\n newPanels.delete(id);\n this.openPanels = newPanels;\n }\n\n this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] \|\| '';\n }\n\n render() {\n return (\n <Host>\n <div class=\"expansion-panels\" aria-label=\"Accordion\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/xplor-file-upload.js CHANGED Viewed

@@ -142,11 +142,11 @@ const XplorFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class XplorFileUpload
         return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
     }
     render() {
-        return (h(Host, { key: '9c3ad81ff741fe6324a5e8af562c740965024df1' }, h("div", { key: 'b0b9bb545ce5a4e74c38bc6b49f7681f6e10dd89', class: "file-upload" }, h("div", { key: 'd1f1198c0d47009ffa85cc1188d292029b979111', class: {
+        return (h(Host, { key: '9c3ad81ff741fe6324a5e8af562c740965024df1' }, h("div", { key: 'b0b9bb545ce5a4e74c38bc6b49f7681f6e10dd89', class: "file-upload" }, h("div", { key: '791a95676b8e640b7dbd84b6ccf95627e5a10d7e', class: {
                 'file-upload__dropzone': true,
                 'file-upload__dropzone--dragging': this.isDragging,
                 'file-upload__dropzone--disabled': this.disabled,
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("input", { key: '1625dae6ee5648ea0dee0673a892420d0dab2e7c', ref: (el) => (this.fileInputEl = el), type: "file", accept: this.accepts, multiple: this.multiple, disabled: this.disabled, onChange: this.handleFileSelect, class: "file-upload__input" }), h("div", { key: '2d1e0ff6e55dd56df7ff04829128dd74eb05d350', class: "file-upload__content" }, h("svg", { key: 'aab4f33389ed3cddc4d6a30300d384209058f64e', class: "file-upload__icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '51da727eaa0d9394184b54c845ae70c0de2c9c5c', d: "M12 15V3M12 3L8 7M12 3L16 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '38123b6c7c9c898040a225d851ff7b488f8fedf4', d: "M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })), h("p", { key: '530f416409a178f0dc9de208476085452e66156a', class: "file-upload__text" }, "Drag & drop files here or", ' ', h("button", { key: '9465171b3ee487fbf0e7aa75da09709eb061a32e', type: "button", class: "file-upload__button", onClick: this.handleButtonClick, disabled: this.disabled }, this.label)), h("p", { key: 'b94b0c91a37fc218362a25ffe46d77929a6752f5', class: "file-upload__hint" }, "Max size: ", this.formatFileSize(this.maxSize), this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`))), this.error && (h("div", { key: '46a708db58e94110d41a8b86571dd29e58e76ae2', class: "file-upload__error", role: "alert" }, this.error)), this.files.length > 0 && (h("div", { key: '95d2aadf7587f759ecd3b55a84b7d6a7ec8c61ac', class: "file-upload__files" }, this.files.map((file) => (h("div", { key: file.id, class: "file-upload__file" }, file.dataUrl && (h("img", { src: file.dataUrl, alt: file.name, class: "file-upload__preview" })), h("div", { class: "file-upload__file-info" }, h("span", { class: "file-upload__file-name", title: file.name }, file.name), h("span", { class: "file-upload__file-size" }, this.formatFileSize(file.size))), h("button", { type: "button", class: "file-upload__remove", onClick: () => this.handleRemoveFile(file), "aria-label": `Remove ${file.name}` }, "\u00D7")))))))));
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop, "aria-label": `Drop zone for file upload. ${this.accepts !== '*/*' ? `Accepts: ${this.accepts}.` : ''} Maximum size: ${this.formatFileSize(this.maxSize)}` }, h("input", { key: 'c2b392d7fdd995819bceec3fa6122f457d78c2a4', ref: (el) => (this.fileInputEl = el), type: "file", accept: this.accepts, multiple: this.multiple, disabled: this.disabled, onChange: this.handleFileSelect, class: "file-upload__input" }), h("div", { key: '33e9ca40b7db3df954ea7221104a5191807ff05a', class: "file-upload__content" }, h("svg", { key: '84c718d713b36dd0b227a234c9b05f7a54bfeb02', class: "file-upload__icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '21c50cf95b559252a2604352a6d14b0b051d5480', d: "M12 15V3M12 3L8 7M12 3L16 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '51d16f53f6553d9df2348e10f163b174efb61913', d: "M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })), h("p", { key: '854efe384b8f181d5200d959db6633a6492c28f1', class: "file-upload__text" }, "Drag & drop files here or", ' ', h("button", { key: 'e83a3a2f6e6caee30173579c6397edacd6e1c8a8', type: "button", class: "file-upload__button", onClick: this.handleButtonClick, disabled: this.disabled }, this.label)), h("p", { key: 'a667e6665ce619f854c247626454efad11131568', class: "file-upload__hint" }, "Max size: ", this.formatFileSize(this.maxSize), this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`))), this.error && (h("div", { key: '872a3eceb9eebbd35a06c0d841cf486e13bd48ea', class: "file-upload__error", role: "alert" }, this.error)), this.files.length > 0 && (h("div", { key: '15cc50322682fd1d555d313d089f18f92bfbb77d', class: "file-upload__files" }, this.files.map((file) => (h("div", { key: file.id, class: "file-upload__file" }, file.dataUrl && (h("img", { src: file.dataUrl, alt: file.name, class: "file-upload__preview" })), h("div", { class: "file-upload__file-info" }, h("span", { class: "file-upload__file-name", title: file.name }, file.name), h("span", { class: "file-upload__file-size" }, this.formatFileSize(file.size))), h("button", { type: "button", class: "file-upload__remove", onClick: () => this.handleRemoveFile(file), "aria-label": `Remove ${file.name}` }, "\u00D7")))))))));
     }
     static get style() { return xplorFileUploadCss; }
 }, [2, "xplor-file-upload", {

package/components/xplor-file-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-file-upload.js","mappings":"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","names":["XplorFileUpload","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-file-upload/xplor-file-upload.scss?tag=xplor-file-upload&encapsulation=scoped","src/components/xplor-file-upload/xplor-file-upload.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.file-upload {\n width: 100%;\n}\n\n.file-upload__dropzone {\n border: 2px dashed #bdbdbd;\n border-radius: 8px;\n padding: 2rem;\n text-align: center;\n transition: all 0.2s ease;\n background-color: #fafafa;\n cursor: pointer;\n position: relative;\n\n &:hover:not(&--disabled) {\n border-color: #1976d2;\n background-color: #f0f7ff;\n }\n\n &--dragging {\n border-color: #1976d2;\n background-color: #e3f2fd;\n transform: scale(1.02);\n }\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background-color: #f5f5f5;\n }\n}\n\n.file-upload__input {\n position: absolute;\n width: 1px;\n height: 1px;\n opacity: 0;\n pointer-events: none;\n}\n\n.file-upload__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n}\n\n.file-upload__icon {\n color: #757575;\n}\n\n.file-upload__text {\n font-size: 1rem;\n color: #424242;\n margin: 0;\n}\n\n.file-upload__button {\n background: none;\n border: none;\n color: #1976d2;\n text-decoration: underline;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n padding: 0;\n transition: color 0.2s;\n\n &:hover:not(:disabled) {\n color: #1565c0;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n}\n\n.file-upload__hint {\n font-size: 0.875rem;\n color: #757575;\n margin: 0;\n}\n\n.file-upload__error {\n margin-top: 0.5rem;\n padding: 0.75rem;\n background-color: #ffebee;\n color: #c62828;\n border-radius: 4px;\n font-size: 0.875rem;\n border-left: 4px solid #f44336;\n}\n\n.file-upload__files {\n margin-top: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.file-upload__file {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 0.75rem;\n background-color: #f5f5f5;\n border-radius: 4px;\n border: 1px solid #e0e0e0;\n}\n\n.file-upload__preview {\n width: 48px;\n height: 48px;\n object-fit: cover;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.file-upload__file-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n min-width: 0;\n}\n\n.file-upload__file-name {\n font-size: 0.875rem;\n font-weight: 500;\n color: #212121;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-upload__file-size {\n font-size: 0.75rem;\n color: #757575;\n}\n\n.file-upload__remove {\n background: none;\n border: none;\n font-size: 1.5rem;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #757575;\n border-radius: 4px;\n transition: all 0.2s;\n flex-shrink: 0;\n\n &:hover {\n background-color: #ffebee;\n color: #f44336;\n }\n\n &:focus {\n outline: 2px solid #1976d2;\n outline-offset: 2px;\n }\n}","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '' + '/' + '';\n\nexport interface UploadedFile {\n file: File;\n id: string;\n name: string;\n size: number;\n type: string;\n dataUrl?: string;\n}\n\n@Component({\n tag: 'xplor-file-upload',\n styleUrl: 'xplor-file-upload.scss',\n scoped: true,\n})\nexport class XplorFileUpload {\n /*\n Accepted file types (e.g., 'image/png', '.pdf', 'image/star'). Default accepts all types.\n /\n @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n /\n Maximum file size in bytes\n /\n @Prop() maxSize: number = 10 1024 * 1024; // 10MB default\n\n /*\n Allow multiple file selection\n /\n @Prop() multiple: boolean = false;\n\n /\n Disable the file upload\n /\n @Prop() disabled: boolean = false;\n\n /\n Show image preview for uploaded images\n /\n @Prop() showPreview: boolean = true;\n\n /\n Label text for the upload button\n /\n @Prop() label: string = 'Upload Files';\n\n @State() files: UploadedFile[] = [];\n @State() isDragging: boolean = false;\n @State() error: string = '';\n\n @Event() xplorFileAdd: EventEmitter<UploadedFile[]>;\n @Event() xplorFileRemove: EventEmitter<UploadedFile>;\n @Event() xplorError: EventEmitter<string>;\n\n private fileInputEl: HTMLInputElement;\n\n private handleFileSelect = (event: Event) => {\n const input = event.target as HTMLInputElement;\n if (input.files) {\n this.processFiles(Array.from(input.files));\n }\n };\n\n private handleDragOver = (event: DragEvent) => {\n event.preventDefault();\n if (!this.disabled) {\n this.isDragging = true;\n }\n };\n\n private handleDragLeave = (event: DragEvent) => {\n event.preventDefault();\n this.isDragging = false;\n };\n\n private handleDrop = (event: DragEvent) => {\n event.preventDefault();\n this.isDragging = false;\n\n if (this.disabled) return;\n\n if (event.dataTransfer?.files) {\n this.processFiles(Array.from(event.dataTransfer.files));\n }\n };\n\n private processFiles(fileList: File[]) {\n this.error = '';\n const validFiles: UploadedFile[] = [];\n\n for (const file of fileList) {\n // Validate file size\n if (file.size > this.maxSize) {\n const maxSizeMB = (this.maxSize / (1024 1024)).toFixed(2);\n this.error = `File \"${file.name}\" exceeds maximum size of ${maxSizeMB}MB`;\n this.xplorError.emit(this.error);\n continue;\n }\n\n // Validate file type if specified\n if (this.accepts !== '/') {\n const acceptedTypes = this.accepts.split(',').map(t => t.trim());\n const fileExtension = `.${file.name.split('.').pop()}`;\n const isAccepted = acceptedTypes.some(type => {\n if (type.endsWith('/')) {\n return file.type.startsWith(type.replace('/', ''));\n }\n return type === file.type \|\| type === fileExtension;\n });\n\n if (!isAccepted) {\n this.error = `File type \"${file.type}\" is not accepted`;\n this.xplorError.emit(this.error);\n continue;\n }\n }\n\n const uploadedFile: UploadedFile = {\n file,\n id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,\n name: file.name,\n size: file.size,\n type: file.type,\n };\n\n // Generate preview for images\n if (this.showPreview && file.type.startsWith('image/')) {\n const reader = new FileReader();\n reader.onload = (e) => {\n uploadedFile.dataUrl = e.target?.result as string;\n this.files = [...this.files];\n };\n reader.readAsDataURL(file);\n }\n\n validFiles.push(uploadedFile);\n }\n\n if (validFiles.length > 0) {\n if (this.multiple) {\n this.files = [...this.files, ...validFiles];\n } else {\n this.files = [validFiles[0]];\n }\n this.xplorFileAdd.emit(validFiles);\n }\n\n // Reset input\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n }\n\n private handleRemoveFile = (fileToRemove: UploadedFile) => {\n this.files = this.files.filter(f => f.id !== fileToRemove.id);\n this.xplorFileRemove.emit(fileToRemove);\n };\n\n private handleButtonClick = () => {\n if (!this.disabled && this.fileInputEl) {\n this.fileInputEl.click();\n }\n };\n\n private formatFileSize(bytes: number): string {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];\n }\n\n render() {\n return (\n <Host>\n <div class=\"file-upload\">\n <div\n class={{\n 'file-upload__dropzone': true,\n 'file-upload__dropzone--dragging': this.isDragging,\n 'file-upload__dropzone--disabled': this.disabled,\n }}\n onDragOver={this.handleDragOver}\n onDragLeave={this.handleDragLeave}\n onDrop={this.handleDrop}\n >\n <input\n ref={(el) => (this.fileInputEl = el)}\n type=\"file\"\n accept={this.accepts}\n multiple={this.multiple}\n disabled={this.disabled}\n onChange={this.handleFileSelect}\n class=\"file-upload__input\"\n />\n\n <div class=\"file-upload__content\">\n <svg class=\"file-upload__icon\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 15V3M12 3L8 7M12 3L16 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n <p class=\"file-upload__text\">\n Drag & drop files here or{' '}\n <button\n type=\"button\"\n class=\"file-upload__button\"\n onClick={this.handleButtonClick}\n disabled={this.disabled}\n >\n {this.label}\n </button>\n </p>\n <p class=\"file-upload__hint\">\n Max size: {this.formatFileSize(this.maxSize)}\n {this.accepts !== '/' && ` • Accepts: ${this.accepts}`}\n </p>\n </div>\n </div>\n\n {this.error && (\n <div class=\"file-upload__error\" role=\"alert\">\n {this.error}\n </div>\n )}\n\n {this.files.length > 0 && (\n <div class=\"file-upload__files\">\n {this.files.map((file) => (\n <div key={file.id} class=\"file-upload__file\">\n {file.dataUrl && (\n <img src={file.dataUrl} alt={file.name} class=\"file-upload__preview\" />\n )}\n <div class=\"file-upload__file-info\">\n <span class=\"file-upload__file-name\" title={file.name}>\n {file.name}\n </span>\n <span class=\"file-upload__file-size\">\n {this.formatFileSize(file.size)}\n </span>\n </div>\n <button\n type=\"button\"\n class=\"file-upload__remove\"\n onClick={() => this.handleRemoveFile(file)}\n aria-label={`Remove ${file.name}`}\n >\n ×\n </button>\n </div>\n ))}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-file-upload.js","mappings":"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","names":["XplorFileUpload","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-file-upload/xplor-file-upload.scss?tag=xplor-file-upload&encapsulation=scoped","src/components/xplor-file-upload/xplor-file-upload.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.file-upload {\n width: 100%;\n}\n\n.file-upload__dropzone {\n border: 2px dashed #bdbdbd;\n border-radius: 8px;\n padding: 2rem;\n text-align: center;\n transition: all 0.2s ease;\n background-color: #fafafa;\n cursor: pointer;\n position: relative;\n\n &:hover:not(&--disabled) {\n border-color: #1976d2;\n background-color: #f0f7ff;\n }\n\n &--dragging {\n border-color: #1976d2;\n background-color: #e3f2fd;\n transform: scale(1.02);\n }\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n background-color: #f5f5f5;\n }\n}\n\n.file-upload__input {\n position: absolute;\n width: 1px;\n height: 1px;\n opacity: 0;\n pointer-events: none;\n}\n\n.file-upload__content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n}\n\n.file-upload__icon {\n color: #757575;\n}\n\n.file-upload__text {\n font-size: 1rem;\n color: #424242;\n margin: 0;\n}\n\n.file-upload__button {\n background: none;\n border: none;\n color: #1976d2;\n text-decoration: underline;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n padding: 0;\n transition: color 0.2s;\n\n &:hover:not(:disabled) {\n color: #1565c0;\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n}\n\n.file-upload__hint {\n font-size: 0.875rem;\n color: #757575;\n margin: 0;\n}\n\n.file-upload__error {\n margin-top: 0.5rem;\n padding: 0.75rem;\n background-color: #ffebee;\n color: #c62828;\n border-radius: 4px;\n font-size: 0.875rem;\n border-left: 4px solid #f44336;\n}\n\n.file-upload__files {\n margin-top: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.file-upload__file {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 0.75rem;\n background-color: #f5f5f5;\n border-radius: 4px;\n border: 1px solid #e0e0e0;\n}\n\n.file-upload__preview {\n width: 48px;\n height: 48px;\n object-fit: cover;\n border-radius: 4px;\n flex-shrink: 0;\n}\n\n.file-upload__file-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n min-width: 0;\n}\n\n.file-upload__file-name {\n font-size: 0.875rem;\n font-weight: 500;\n color: #212121;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-upload__file-size {\n font-size: 0.75rem;\n color: #757575;\n}\n\n.file-upload__remove {\n background: none;\n border: none;\n font-size: 1.5rem;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 2rem;\n height: 2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #757575;\n border-radius: 4px;\n transition: all 0.2s;\n flex-shrink: 0;\n\n &:hover {\n background-color: #ffebee;\n color: #f44336;\n }\n\n &:focus {\n outline: 2px solid #1976d2;\n outline-offset: 2px;\n }\n}","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '' + '/' + '';\n\nexport interface UploadedFile {\n file: File;\n id: string;\n name: string;\n size: number;\n type: string;\n dataUrl?: string;\n}\n\n@Component({\n tag: 'xplor-file-upload',\n styleUrl: 'xplor-file-upload.scss',\n scoped: true,\n})\nexport class XplorFileUpload {\n /*\n Accepted file types (e.g., 'image/png', '.pdf', 'image/star'). Default accepts all types.\n /\n @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n /\n Maximum file size in bytes\n /\n @Prop() maxSize: number = 10 1024 * 1024; // 10MB default\n\n /*\n Allow multiple file selection\n /\n @Prop() multiple: boolean = false;\n\n /\n Disable the file upload\n /\n @Prop() disabled: boolean = false;\n\n /\n Show image preview for uploaded images\n /\n @Prop() showPreview: boolean = true;\n\n /\n Label text for the upload button\n /\n @Prop() label: string = 'Upload Files';\n\n @State() files: UploadedFile[] = [];\n @State() isDragging: boolean = false;\n @State() error: string = '';\n\n @Event() xplorFileAdd: EventEmitter<UploadedFile[]>;\n @Event() xplorFileRemove: EventEmitter<UploadedFile>;\n @Event() xplorError: EventEmitter<string>;\n\n private fileInputEl: HTMLInputElement;\n\n private handleFileSelect = (event: Event) => {\n const input = event.target as HTMLInputElement;\n if (input.files) {\n this.processFiles(Array.from(input.files));\n }\n };\n\n private handleDragOver = (event: DragEvent) => {\n event.preventDefault();\n if (!this.disabled) {\n this.isDragging = true;\n }\n };\n\n private handleDragLeave = (event: DragEvent) => {\n event.preventDefault();\n this.isDragging = false;\n };\n\n private handleDrop = (event: DragEvent) => {\n event.preventDefault();\n this.isDragging = false;\n\n if (this.disabled) return;\n\n if (event.dataTransfer?.files) {\n this.processFiles(Array.from(event.dataTransfer.files));\n }\n };\n\n private processFiles(fileList: File[]) {\n this.error = '';\n const validFiles: UploadedFile[] = [];\n\n for (const file of fileList) {\n // Validate file size\n if (file.size > this.maxSize) {\n const maxSizeMB = (this.maxSize / (1024 1024)).toFixed(2);\n this.error = `File \"${file.name}\" exceeds maximum size of ${maxSizeMB}MB`;\n this.xplorError.emit(this.error);\n continue;\n }\n\n // Validate file type if specified\n if (this.accepts !== '/') {\n const acceptedTypes = this.accepts.split(',').map(t => t.trim());\n const fileExtension = `.${file.name.split('.').pop()}`;\n const isAccepted = acceptedTypes.some(type => {\n if (type.endsWith('/')) {\n return file.type.startsWith(type.replace('/', ''));\n }\n return type === file.type \|\| type === fileExtension;\n });\n\n if (!isAccepted) {\n this.error = `File type \"${file.type}\" is not accepted`;\n this.xplorError.emit(this.error);\n continue;\n }\n }\n\n const uploadedFile: UploadedFile = {\n file,\n id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,\n name: file.name,\n size: file.size,\n type: file.type,\n };\n\n // Generate preview for images\n if (this.showPreview && file.type.startsWith('image/')) {\n const reader = new FileReader();\n reader.onload = (e) => {\n uploadedFile.dataUrl = e.target?.result as string;\n this.files = [...this.files];\n };\n reader.readAsDataURL(file);\n }\n\n validFiles.push(uploadedFile);\n }\n\n if (validFiles.length > 0) {\n if (this.multiple) {\n this.files = [...this.files, ...validFiles];\n } else {\n this.files = [validFiles[0]];\n }\n this.xplorFileAdd.emit(validFiles);\n }\n\n // Reset input\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n }\n\n private handleRemoveFile = (fileToRemove: UploadedFile) => {\n this.files = this.files.filter(f => f.id !== fileToRemove.id);\n this.xplorFileRemove.emit(fileToRemove);\n };\n\n private handleButtonClick = () => {\n if (!this.disabled && this.fileInputEl) {\n this.fileInputEl.click();\n }\n };\n\n private formatFileSize(bytes: number): string {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];\n }\n\n render() {\n return (\n <Host>\n <div class=\"file-upload\">\n <div\n class={{\n 'file-upload__dropzone': true,\n 'file-upload__dropzone--dragging': this.isDragging,\n 'file-upload__dropzone--disabled': this.disabled,\n }}\n onDragOver={this.handleDragOver}\n onDragLeave={this.handleDragLeave}\n onDrop={this.handleDrop}\n aria-label={`Drop zone for file upload. ${this.accepts !== '/' ? `Accepts: ${this.accepts}.` : ''} Maximum size: ${this.formatFileSize(this.maxSize)}`}\n >\n <input\n ref={(el) => (this.fileInputEl = el)}\n type=\"file\"\n accept={this.accepts}\n multiple={this.multiple}\n disabled={this.disabled}\n onChange={this.handleFileSelect}\n class=\"file-upload__input\"\n />\n\n <div class=\"file-upload__content\">\n <svg class=\"file-upload__icon\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M12 15V3M12 3L8 7M12 3L16 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n <p class=\"file-upload__text\">\n Drag & drop files here or{' '}\n <button\n type=\"button\"\n class=\"file-upload__button\"\n onClick={this.handleButtonClick}\n disabled={this.disabled}\n >\n {this.label}\n </button>\n </p>\n <p class=\"file-upload__hint\">\n Max size: {this.formatFileSize(this.maxSize)}\n {this.accepts !== '/' && ` • Accepts: ${this.accepts}`}\n </p>\n </div>\n </div>\n\n {this.error && (\n <div class=\"file-upload__error\" role=\"alert\">\n {this.error}\n </div>\n )}\n\n {this.files.length > 0 && (\n <div class=\"file-upload__files\">\n {this.files.map((file) => (\n <div key={file.id} class=\"file-upload__file\">\n {file.dataUrl && (\n <img src={file.dataUrl} alt={file.name} class=\"file-upload__preview\" />\n )}\n <div class=\"file-upload__file-info\">\n <span class=\"file-upload__file-name\" title={file.name}>\n {file.name}\n </span>\n <span class=\"file-upload__file-size\">\n {this.formatFileSize(file.size)}\n </span>\n </div>\n <button\n type=\"button\"\n class=\"file-upload__remove\"\n onClick={() => this.handleRemoveFile(file)}\n aria-label={`Remove ${file.name}`}\n >\n ×\n </button>\n </div>\n ))}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/xplor-inline-checkbox.js CHANGED Viewed

@@ -39,9 +39,9 @@ const XplorInlineCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class XplorInline
             'xplor-inline-checkbox--disabled': this.disabled,
             'xplor-inline-checkbox--checked': this.checked,
         };
-        return (h(Host, { key: '2273357108dc65e665f9fdd9dcece4d4ed8edac3' }, h("label", { key: '630091008ad489a1cc4c0e71ef1ae802ef4b0c89', class: containerClasses }, h("input", { key: '0c823ba53cb0d25d4823e42bcb037efaeddff405', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
+        return (h(Host, { key: '34aa08258f2a12280c9709f94883af3e0423175f' }, h("label", { key: 'fd6fe47c8e1da57aba09a4ce7cbc95f7e1947dfe', class: containerClasses }, h("input", { key: '17a4c41cb304ae9826476d22ffa18d9bf5810ed5', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
                 accentColor: this.color,
-            } }), this.label && h("span", { key: '9e1bbb0bd85cc7cfe7d760501507d68dcc3bf3c2', class: "xplor-inline-checkbox__label" }, this.label), h("slot", { key: '7a95d78de68af2887149bd6eb9f08330b9c57d6b' }))));
+            } }), this.label && h("span", { key: '31afabdf1498e609f06530f1db28a05b2a0ba00b', class: "xplor-inline-checkbox__label" }, this.label), h("slot", { key: '2a32c92c16906869dd82272590dd83ebc1905e71' }))));
     }
     static get style() { return xplorInlineCheckboxCss; }
 }, [6, "xplor-inline-checkbox", {

package/components/xplor-inline-date-picker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { X as XplorInlineDatePicker$1, d as defineCustomElement$1 } from './p-BaDLDCH5.js';
+import { X as XplorInlineDatePicker$1, d as defineCustomElement$1 } from './p-VIJbFoA4.js';
 const XplorInlineDatePicker = XplorInlineDatePicker$1;
 const defineCustomElement = defineCustomElement$1;

package/components/xplor-inline-switch.js CHANGED Viewed

@@ -35,7 +35,7 @@ const XplorInlineSwitch$1 = /*@__PURE__*/ proxyCustomElement(class XplorInlineSw
             'xplor-inline-switch--disabled': this.disabled,
             'xplor-inline-switch--checked': this.checked,
         };
-        return (h(Host, { key: 'd881ff0653ee51f1ddc8c146ccc6f70f3c128e3b' }, h("label", { key: '2ffe4cdf99f925c5973657769f056cffb8bea283', class: containerClasses, style: { '--switch-color': this.color } }, h("input", { key: '60fb990d1dce371c3579da91bd0d9fd4dd50f82b', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), h("span", { key: '28e9f5444653009f4b56d510c2d73ba710e93115', class: "xplor-inline-switch__track" }, h("span", { key: 'f002449aa843c0b268dbc38d94dbf44a0e68d0de', class: "xplor-inline-switch__thumb" })), this.label && h("span", { key: 'f460d55e6cbaab94806c8025a1d17cd4d4b6790b', class: "xplor-inline-switch__label" }, this.label), h("slot", { key: '59e3248368aab93dd48287f3facdbe9221a39f5b' }))));
+        return (h(Host, { key: 'ac7b6e824b55bd184f81fd5a36174ee765bd649d' }, h("label", { key: 'e4042ad1236aba72343231013d9d0784593dcf26', class: containerClasses, style: { '--switch-color': this.color } }, h("input", { key: '9e5b96a0367a55785f0c87f74cf9ba0850e227c6', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), h("span", { key: 'c35a3721624cfddd2448d9420a5e8c85a8a51108', class: "xplor-inline-switch__track" }, h("span", { key: '6b9026daf7d5641378d8243ed7b1b7e424db8171', class: "xplor-inline-switch__thumb" })), this.label && h("span", { key: '46423101cb78df16e84b5b79baa9a2a8c88bc91b', class: "xplor-inline-switch__label" }, this.label), h("slot", { key: '0841e31a5d0a9b27c3e8eeafff0218e92a4bf24a' }))));
     }
     static get style() { return xplorInlineSwitchCss; }
 }, [6, "xplor-inline-switch", {

package/components/xplor-input-file.js CHANGED Viewed

@@ -2,12 +2,14 @@ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './in
 const xplorInputFileCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-input-file {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-file {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-file {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-file {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-file {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-file {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-file, ul.sc-xplor-input-file {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-file li.sc-xplor-input-file, ul.sc-xplor-input-file li.sc-xplor-input-file {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-file, ul.mdc-list.sc-xplor-input-file {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-file li.mdc-list-item.sc-xplor-input-file, ul.mdc-list.sc-xplor-input-file li.mdc-list-item.sc-xplor-input-file {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-file {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-file {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-file {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-file {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-file .mdc-text-field--outlined.sc-xplor-input-file .mdc-notched-outline__notch.sc-xplor-input-file {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-file .mdc-notched-outline__notch.sc-xplor-input-file {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-file .mdc-notched-outline.sc-xplor-input-file .mdc-notched-outline__notch.sc-xplor-input-file {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-file {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-file:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-file {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-file-h {\n  display: block;\n}\n\n.xplor-input-file.sc-xplor-input-file {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-file__label.sc-xplor-input-file {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-file__field.sc-xplor-input-file {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1rem;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  background-color: white;\n  cursor: pointer;\n  transition: border-color 0.2s ease;\n  gap: 0.75rem;\n}\n.xplor-input-file__field.sc-xplor-input-file:hover:not(.xplor-input-file--disabled .xplor-input-file__field) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-file__field.sc-xplor-input-file:focus-within {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-file--disabled.sc-xplor-input-file .xplor-input-file__field.sc-xplor-input-file {\n  background-color: rgba(0, 0, 0, 0.04);\n  cursor: not-allowed;\n}\n.xplor-input-file--disabled.sc-xplor-input-file .xplor-input-file__placeholder.sc-xplor-input-file, .xplor-input-file--disabled.sc-xplor-input-file .xplor-input-file__icon.sc-xplor-input-file {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-file__icon.sc-xplor-input-file {\n  font-size: 1.25rem;\n  color: rgba(0, 0, 0, 0.54);\n  flex-shrink: 0;\n}\n.xplor-input-file__content.sc-xplor-input-file {\n  flex: 1;\n  min-width: 0;\n}\n.xplor-input-file__placeholder.sc-xplor-input-file {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-file__chips.sc-xplor-input-file {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-items: center;\n}\n.xplor-input-file__chip.sc-xplor-input-file {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.75rem;\n  background-color: #673AB7;\n  color: white;\n  border-radius: 1rem;\n  font-size: 0.875rem;\n  max-width: 100%;\n}\n.xplor-input-file__chip-text.sc-xplor-input-file {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-file__chip-size.sc-xplor-input-file {\n  font-size: 0.75rem;\n  opacity: 0.8;\n  white-space: nowrap;\n}\n.xplor-input-file__additional.sc-xplor-input-file {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-left: 0.5rem;\n}\n.xplor-input-file__clear.sc-xplor-input-file {\n  position: relative;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: none;\n  background: transparent;\n  color: rgba(0, 0, 0, 0.54);\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-input-file__clear.sc-xplor-input-file:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-file__clear.sc-xplor-input-file:active {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n.xplor-input-file__input.sc-xplor-input-file {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.xplor-input-file__input.sc-xplor-input-file:disabled {\n  cursor: not-allowed;\n}\n.xplor-input-file__counter.sc-xplor-input-file {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.6);\n  padding: 0 1rem;\n}";
+let inputFileIdCounter = 0;
 const XplorInputFile$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputFile extends H {
     constructor() {
         super();
         this.__registerHost();
         this.attach = createEvent(this, "attach");
         this.xplorClear = createEvent(this, "xplorClear");
+        this.inputId = `xplor-input-file-${++inputFileIdCounter}`;
         /**
          * Input label
          */
@@ -82,7 +84,7 @@ const XplorInputFile$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputFile e
         };
         const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
         const additionalCount = this.selectedFiles.length - this.maxChips;
-        return (h(Host, { key: 'b8022fdd28a3e0087bc2a044856c3013d1f32245' }, h("div", { key: '11c0494c76f5aed1fe03cff7b706c7bc809becda', class: containerClasses }, this.label && (h("label", { key: 'fca295123c0766e9ff4b1ae28abfc2662a345992', class: "xplor-input-file__label" }, this.label)), h("div", { key: 'a63356f0857b420f1f707caa2e5e6ac587616949', class: "xplor-input-file__field" }, h("span", { key: 'f2b6f89f35d36a71a4c2bae38175cd16f897102d', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: '0b6b59139696a1a1e9aee3f10b7069743f4d1934', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: 'b0f312f157de2caf74c8c630d7c109fb6af4d7c0', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '1b36ee20fe74f12cb0634fa8a6f11f0b18a8869c', ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: '3db41f5660476718819e7315edbc59a9fa834178', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
+        return (h(Host, { key: '855205ba51f297ec42d8e0a6e6a8632575f14266' }, h("div", { key: 'b3f5e11bae52b44c70d44964128e7a921002dbb1', class: containerClasses }, this.label && (h("label", { key: '8ed4472b4d74227d3f383733d70fdce13724b3c2', class: "xplor-input-file__label", htmlFor: this.inputId }, this.label)), h("div", { key: '3796c38f41eb6cabb61a71341e2172d6afe588da', class: "xplor-input-file__field" }, h("span", { key: '5c252125213d25d051549308974241fa1764e77c', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: 'eb7e79be04bd2c7d6c5a38669486fafa79da2886', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: '3de68e44d93f65880e9db5d94a285bc36f5a5b27', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '2744056445124a7c857f4b56271cd343e50ed9f2', id: this.inputId, ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange, "aria-label": this.label || 'Choose file' })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: '3bd470d17e927b0fbe7776ad67513bb52d91109e', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
     }
     static get style() { return xplorInputFileCss; }
 }, [2, "xplor-input-file", {

package/components/xplor-input-file.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-input-file.js","mappings":"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","names":["XplorInputFile","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-file/xplor-input-file.scss?tag=xplor-input-file&encapsulation=scoped","src/components/xplor-input-file/xplor-input-file.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-file {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n\n &__label {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n margin-bottom: 0.25rem;\n }\n\n &__field {\n position: relative;\n display: flex;\n align-items: center;\n padding: 0.875rem 1rem;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n background-color: white;\n cursor: pointer;\n transition: border-color 0.2s ease;\n gap: 0.75rem;\n\n &:hover:not(.xplor-input-file--disabled &) {\n border-color: rgba(0, 0, 0, 0.6);\n }\n\n &:focus-within {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n }\n }\n\n &--disabled {\n .xplor-input-file__field {\n background-color: rgba(0, 0, 0, 0.04);\n cursor: not-allowed;\n }\n\n .xplor-input-file__placeholder,\n .xplor-input-file__icon {\n color: rgba(0, 0, 0, 0.38);\n }\n }\n\n &__icon {\n font-size: 1.25rem;\n color: rgba(0, 0, 0, 0.54);\n flex-shrink: 0;\n }\n\n &__content {\n flex: 1;\n min-width: 0;\n }\n\n &__placeholder {\n color: rgba(0, 0, 0, 0.38);\n }\n\n &__chips {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n align-items: center;\n }\n\n &__chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.25rem 0.75rem;\n background-color: #673AB7;\n color: white;\n border-radius: 1rem;\n font-size: 0.875rem;\n max-width: 100%;\n }\n\n &__chip-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &__chip-size {\n font-size: 0.75rem;\n opacity: 0.8;\n white-space: nowrap;\n }\n\n &__additional {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n margin-left: 0.5rem;\n }\n\n &__clear {\n position: relative;\n width: 1.5rem;\n height: 1.5rem;\n border: none;\n background: transparent;\n color: rgba(0, 0, 0, 0.54);\n cursor: pointer;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n flex-shrink: 0;\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.04);\n }\n\n &:active {\n background-color: rgba(0, 0, 0, 0.08);\n }\n }\n\n &__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n &__counter {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.6);\n padding: 0 1rem;\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'xplor-input-file',\n styleUrl: 'xplor-input-file.scss',\n scoped: true,\n})\nexport class XplorInputFile {\n private fileInputRef: HTMLInputElement;\n\n /*\n Input label\n /\n @Prop() label: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Choose file(s)';\n\n /\n Border/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the input is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether multiple files can be selected\n /\n @Prop() multiple: boolean = false;\n\n /\n Accepted file types\n /\n @Prop() accept: string = '';\n\n /\n Maximum number of chips to show\n /\n @Prop() maxChips: number = 1;\n\n /\n Whether to show file counter\n /\n @Prop() counter: boolean = true;\n\n /\n Whether to show file size\n /\n @Prop() showSize: number = 1000;\n\n /\n Prepend inner icon (default: paperclip)\n /\n @Prop() prependInnerIcon: string = '📎';\n\n /\n Files selected\n /\n @State() selectedFiles: File[] = [];\n\n /\n Attach/change event\n /\n @Event() attach: EventEmitter<File[]>;\n\n /\n Clear event\n /\n @Event() xplorClear: EventEmitter<void>;\n\n private handleFileChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n if (target.files) {\n this.selectedFiles = Array.from(target.files);\n this.attach.emit(this.selectedFiles);\n }\n };\n\n private handleClear = () => {\n this.selectedFiles = [];\n if (this.fileInputRef) {\n this.fileInputRef.value = '';\n }\n this.xplorClear.emit();\n };\n\n private formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return Math.round(bytes / Math.pow(k, i) 100) / 100 + ' ' + sizes[i];\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-file': true,\n 'xplor-input-file--disabled': this.disabled,\n };\n\n const visibleFiles = this.selectedFiles.slice(0, this.maxChips);\n const additionalCount = this.selectedFiles.length - this.maxChips;\n\n return (\n <Host>\n <div class={containerClasses}>\n {this.label && (\n <label class=\"xplor-input-file__label\">{this.label}</label>\n )}\n\n <div class=\"xplor-input-file__field\">\n <span class=\"xplor-input-file__icon\">{this.prependInnerIcon}</span>\n\n <div class=\"xplor-input-file__content\">\n {this.selectedFiles.length === 0 ? (\n <span class=\"xplor-input-file__placeholder\">{this.placeholder}</span>\n ) : (\n <div class=\"xplor-input-file__chips\">\n {visibleFiles.map((file) => (\n <div class=\"xplor-input-file__chip\" key={file.name}>\n <span class=\"xplor-input-file__chip-text\">{file.name}</span>\n {this.showSize && file.size && (\n <span class=\"xplor-input-file__chip-size\">\n ({this.formatFileSize(file.size)})\n </span>\n )}\n </div>\n ))}\n {additionalCount > 0 && (\n <span class=\"xplor-input-file__additional\">\n +{additionalCount} additional file{additionalCount > 1 ? 's' : ''}\n </span>\n )}\n </div>\n )}\n </div>\n\n {this.selectedFiles.length > 0 && !this.disabled && (\n <button\n type=\"button\"\n class=\"xplor-input-file__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n >\n ✕\n </button>\n )}\n\n <input\n ref={(el) => (this.fileInputRef = el)}\n type=\"file\"\n class=\"xplor-input-file__input\"\n multiple={this.multiple}\n accept={this.accept}\n disabled={this.disabled}\n onChange={this.handleFileChange}\n />\n </div>\n\n {this.counter && this.selectedFiles.length > 0 && (\n <div class=\"xplor-input-file__counter\">\n {this.selectedFiles.length} file{this.selectedFiles.length > 1 ? 's' : ''} selected\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-input-file.js","mappings":"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","names":["XplorInputFile","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-file/xplor-input-file.scss?tag=xplor-input-file&encapsulation=scoped","src/components/xplor-input-file/xplor-input-file.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-file {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n\n &__label {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n margin-bottom: 0.25rem;\n }\n\n &__field {\n position: relative;\n display: flex;\n align-items: center;\n padding: 0.875rem 1rem;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n background-color: white;\n cursor: pointer;\n transition: border-color 0.2s ease;\n gap: 0.75rem;\n\n &:hover:not(.xplor-input-file--disabled &) {\n border-color: rgba(0, 0, 0, 0.6);\n }\n\n &:focus-within {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n }\n }\n\n &--disabled {\n .xplor-input-file__field {\n background-color: rgba(0, 0, 0, 0.04);\n cursor: not-allowed;\n }\n\n .xplor-input-file__placeholder,\n .xplor-input-file__icon {\n color: rgba(0, 0, 0, 0.38);\n }\n }\n\n &__icon {\n font-size: 1.25rem;\n color: rgba(0, 0, 0, 0.54);\n flex-shrink: 0;\n }\n\n &__content {\n flex: 1;\n min-width: 0;\n }\n\n &__placeholder {\n color: rgba(0, 0, 0, 0.38);\n }\n\n &__chips {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n align-items: center;\n }\n\n &__chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.25rem 0.75rem;\n background-color: #673AB7;\n color: white;\n border-radius: 1rem;\n font-size: 0.875rem;\n max-width: 100%;\n }\n\n &__chip-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &__chip-size {\n font-size: 0.75rem;\n opacity: 0.8;\n white-space: nowrap;\n }\n\n &__additional {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n margin-left: 0.5rem;\n }\n\n &__clear {\n position: relative;\n width: 1.5rem;\n height: 1.5rem;\n border: none;\n background: transparent;\n color: rgba(0, 0, 0, 0.54);\n cursor: pointer;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n flex-shrink: 0;\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.04);\n }\n\n &:active {\n background-color: rgba(0, 0, 0, 0.08);\n }\n }\n\n &__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n &__counter {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.6);\n padding: 0 1rem;\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputFileIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-file',\n styleUrl: 'xplor-input-file.scss',\n scoped: true,\n})\nexport class XplorInputFile {\n private fileInputRef: HTMLInputElement;\n private inputId = `xplor-input-file-${++inputFileIdCounter}`;\n\n /*\n Input label\n /\n @Prop() label: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Choose file(s)';\n\n /\n Border/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the input is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether multiple files can be selected\n /\n @Prop() multiple: boolean = false;\n\n /\n Accepted file types\n /\n @Prop() accept: string = '';\n\n /\n Maximum number of chips to show\n /\n @Prop() maxChips: number = 1;\n\n /\n Whether to show file counter\n /\n @Prop() counter: boolean = true;\n\n /\n Whether to show file size\n /\n @Prop() showSize: number = 1000;\n\n /\n Prepend inner icon (default: paperclip)\n /\n @Prop() prependInnerIcon: string = '📎';\n\n /\n Files selected\n /\n @State() selectedFiles: File[] = [];\n\n /\n Attach/change event\n /\n @Event() attach: EventEmitter<File[]>;\n\n /\n Clear event\n /\n @Event() xplorClear: EventEmitter<void>;\n\n private handleFileChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n if (target.files) {\n this.selectedFiles = Array.from(target.files);\n this.attach.emit(this.selectedFiles);\n }\n };\n\n private handleClear = () => {\n this.selectedFiles = [];\n if (this.fileInputRef) {\n this.fileInputRef.value = '';\n }\n this.xplorClear.emit();\n };\n\n private formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return Math.round(bytes / Math.pow(k, i) 100) / 100 + ' ' + sizes[i];\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-file': true,\n 'xplor-input-file--disabled': this.disabled,\n };\n\n const visibleFiles = this.selectedFiles.slice(0, this.maxChips);\n const additionalCount = this.selectedFiles.length - this.maxChips;\n\n return (\n <Host>\n <div class={containerClasses}>\n {this.label && (\n <label class=\"xplor-input-file__label\" htmlFor={this.inputId}>{this.label}</label>\n )}\n\n <div class=\"xplor-input-file__field\">\n <span class=\"xplor-input-file__icon\">{this.prependInnerIcon}</span>\n\n <div class=\"xplor-input-file__content\">\n {this.selectedFiles.length === 0 ? (\n <span class=\"xplor-input-file__placeholder\">{this.placeholder}</span>\n ) : (\n <div class=\"xplor-input-file__chips\">\n {visibleFiles.map((file) => (\n <div class=\"xplor-input-file__chip\" key={file.name}>\n <span class=\"xplor-input-file__chip-text\">{file.name}</span>\n {this.showSize && file.size && (\n <span class=\"xplor-input-file__chip-size\">\n ({this.formatFileSize(file.size)})\n </span>\n )}\n </div>\n ))}\n {additionalCount > 0 && (\n <span class=\"xplor-input-file__additional\">\n +{additionalCount} additional file{additionalCount > 1 ? 's' : ''}\n </span>\n )}\n </div>\n )}\n </div>\n\n {this.selectedFiles.length > 0 && !this.disabled && (\n <button\n type=\"button\"\n class=\"xplor-input-file__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n >\n ✕\n </button>\n )}\n\n <input\n id={this.inputId}\n ref={(el) => (this.fileInputRef = el)}\n type=\"file\"\n class=\"xplor-input-file__input\"\n multiple={this.multiple}\n accept={this.accept}\n disabled={this.disabled}\n onChange={this.handleFileChange}\n aria-label={this.label \|\| 'Choose file'}\n />\n </div>\n\n {this.counter && this.selectedFiles.length > 0 && (\n <div class=\"xplor-input-file__counter\">\n {this.selectedFiles.length} file{this.selectedFiles.length > 1 ? 's' : ''} selected\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/xplor-input-search.js CHANGED Viewed

@@ -2,11 +2,13 @@ import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './in
 const xplorInputSearchCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-input-search {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-search {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-search {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-search {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-search {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-search {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-search, ul.sc-xplor-input-search {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-search li.sc-xplor-input-search, ul.sc-xplor-input-search li.sc-xplor-input-search {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-search, ul.mdc-list.sc-xplor-input-search {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-search li.mdc-list-item.sc-xplor-input-search, ul.mdc-list.sc-xplor-input-search li.mdc-list-item.sc-xplor-input-search {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-search {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-search {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-search {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-search {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-search .mdc-text-field--outlined.sc-xplor-input-search .mdc-notched-outline__notch.sc-xplor-input-search {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-search .mdc-notched-outline__notch.sc-xplor-input-search {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-search .mdc-notched-outline.sc-xplor-input-search .mdc-notched-outline__notch.sc-xplor-input-search {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-search {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-search:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-search {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-search-h {\n  display: block;\n}\n\n.xplor-input-search.sc-xplor-input-search {\n  display: flex;\n  flex-direction: column;\n}\n.xplor-input-search__field.sc-xplor-input-search {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  background-color: white;\n  transition: border-color 0.2s ease;\n  padding-right: 0.375rem;\n}\n.xplor-input-search__field.sc-xplor-input-search:hover:not(.xplor-input-search--disabled .xplor-input-search__field) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-search--focused.sc-xplor-input-search .xplor-input-search__field.sc-xplor-input-search {\n  border-color: #008480;\n  border-width: 2px;\n  padding-right: calc(0.375rem - 1px);\n}\n.xplor-input-search--focused.sc-xplor-input-search .xplor-input-search__input.sc-xplor-input-search {\n  padding-left: calc(1rem - 1px);\n}\n.xplor-input-search__input.sc-xplor-input-search {\n  flex: 1;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: none;\n  outline: none;\n  background: transparent;\n  min-width: 0;\n}\n.xplor-input-search__input.sc-xplor-input-search::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-search__input.sc-xplor-input-search:disabled {\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.xplor-input-search__button.sc-xplor-input-search {\n  min-height: 0;\n  min-width: 0;\n  height: 2.5rem;\n  width: 2.5rem;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background-color: #008480;\n  color: white;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-input-search__button.sc-xplor-input-search:hover:not(:disabled) {\n  background-color: #006D6A;\n}\n.xplor-input-search__button.sc-xplor-input-search:active:not(:disabled) {\n  background-color: #005755;\n}\n.xplor-input-search__button.sc-xplor-input-search:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n.xplor-input-search__icon.sc-xplor-input-search {\n  width: 1.25rem;\n  height: 1.25rem;\n  fill: currentColor;\n}\n.xplor-input-search--compact.sc-xplor-input-search .xplor-input-search__input.sc-xplor-input-search {\n  padding: 0.625rem 1rem;\n}\n.xplor-input-search--compact.sc-xplor-input-search .xplor-input-search__button.sc-xplor-input-search {\n  height: 2rem;\n  width: 2rem;\n}\n.xplor-input-search--compact.sc-xplor-input-search .xplor-input-search__icon.sc-xplor-input-search {\n  width: 1rem;\n  height: 1rem;\n}\n.xplor-input-search--comfortable.sc-xplor-input-search .xplor-input-search__input.sc-xplor-input-search {\n  padding: 1rem 1rem;\n}\n.xplor-input-search--comfortable.sc-xplor-input-search .xplor-input-search__button.sc-xplor-input-search {\n  height: 2.75rem;\n  width: 2.75rem;\n}\n.xplor-input-search--comfortable.sc-xplor-input-search .xplor-input-search__icon.sc-xplor-input-search {\n  width: 1.375rem;\n  height: 1.375rem;\n}\n.xplor-input-search--disabled.sc-xplor-input-search .xplor-input-search__field.sc-xplor-input-search {\n  background-color: rgba(0, 0, 0, 0.04);\n}";
+let inputSearchIdCounter = 0;
 const XplorInputSearch$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSearch extends H {
     constructor() {
         super();
         this.__registerHost();
         this.search = createEvent(this, "search");
+        this.inputId = `xplor-input-search-${++inputSearchIdCounter}`;
         /**
          * Search value
          */
@@ -52,9 +54,9 @@ const XplorInputSearch$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSear
             'xplor-input-search--focused': this.isFocused,
             'xplor-input-search--disabled': this.disabled,
         };
-        return (h(Host, { key: '5b56e2a7105a8046e9d8a0260e4ccc3e3f74f2d1' }, h("div", { key: '1056cd0367b2a02a9ca0b6327ee64fe451aa822f', class: containerClasses }, h("div", { key: 'b52566008beabead371696c73213c0c44d71caad', class: "xplor-input-search__field" }, h("input", { key: '59c5434a7cedc56128d8acb5d3718e89a4521f60', type: "text", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+        return (h(Host, { key: '159334f666a4d38aaeeba61788fc73ae85511f1c' }, h("div", { key: 'de6a7c4d9097bdabc955bd2f85ce9c6f9f35aa19', class: containerClasses }, h("div", { key: 'b14ca74cb368ef4efa67330f5b5fc76b54828c33', class: "xplor-input-search__field" }, h("input", { key: '1f8e4d2842d4f45fa3ca7e2b3de7b697a75abd02', id: this.inputId, type: "search", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
                 backgroundColor: this.bgColor,
-            } }), h("slot", { key: '8a1ff9183e52e0b1907a2d592cf26ce92b8c3eb2', name: "append-inner" }, h("button", { key: '9680a805a44074e1ca6544fc6cc1b6dc56b3cd3c', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, h("svg", { key: 'b5889fd0aed963aa7f31a11fa705597caaa3d000', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: '78cd1c79a24b46b662d3be5bea287db253c0abe9', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
+            }, role: "searchbox", "aria-label": "Search" }), h("slot", { key: '3b914900d3b529b142ec31d8835ebfa83497b877', name: "append-inner" }, h("button", { key: '83ffab122b79d64e5fadb6ff0abf508847ecb721', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button", "aria-label": "Search" }, h("svg", { key: 'b0d8e393c391b3ca214bb1cd8b1673eb3b634a88', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: '78d38f7b9e578cf8519edcc7eea19ffa294aba74', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
     }
     static get style() { return xplorInputSearchCss; }
 }, [6, "xplor-input-search", {

package/components/xplor-input-search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-input-search.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,msTAAmsT;;~~MCOltTA~~,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;~~AAME~~;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,WAAW;AAEzC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,OAAO;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA0C,SAAS;AAOzD,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;AAC3B,SAAC;AAEO,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAC9B,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC/C,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;gBACzB,IAAI,CAAC,YAAY,EAAE;;AAEvB,SAAC;~~AA+CF~~;~~IA7CC~~,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,oBAAoB,EAAE,IAAI;AAC1B,YAAA,CAAC,uBAAuB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YAC7C,6BAA6B,EAAE,IAAI,CAAC,SAAS;YAC7C,8BAA8B,EAAE,IAAI,CAAC,QAAQ;SAC9C;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,~~MAAM~~,~~EACX~~,KAAK,EAAC,2BAA2B,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EACtC,MAAM,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EACtC,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,OAAO;~~AAC9B~~,~~aAAA,~~EACD,CAAA,EAEF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,EACvB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,~~iBACX~~,qBAAqB,EAAA,~~EAEjC~~,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,0BAA0B,EAAA,EACvD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,mQAAmQ,EAAG,CAAA,CAC1Q,CACC,CACJ,CACH,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorInputSearch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-search/xplor-input-search.scss?tag=xplor-input-search&encapsulation=scoped","src/components/xplor-input-search/xplor-input-search.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-search {\n display: flex;\n flex-direction: column;\n\n &__field {\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n background-color: white;\n transition: border-color 0.2s ease;\n padding-right: 0.375rem;\n\n &:hover:not(.xplor-input-search--disabled &) {\n border-color: rgba(0, 0, 0, 0.6);\n }\n }\n\n &--focused {\n .xplor-input-search__field {\n border-color: #008480;\n border-width: 2px;\n padding-right: calc(0.375rem - 1px);\n }\n\n .xplor-input-search__input {\n padding-left: calc(1rem - 1px);\n }\n }\n\n &__input {\n flex: 1;\n padding: 0.875rem 1rem;\n font-size: 1rem;\n font-family: inherit;\n border: none;\n outline: none;\n background: transparent;\n min-width: 0;\n\n &::placeholder {\n color: rgba(0, 0, 0, 0.38);\n }\n\n &:disabled {\n color: rgba(0, 0, 0, 0.38);\n cursor: not-allowed;\n }\n }\n\n &__button {\n min-height: 0;\n min-width: 0;\n height: 2.5rem;\n width: 2.5rem;\n padding: 0;\n border: none;\n border-radius: 4px;\n background-color: #008480;\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n flex-shrink: 0;\n\n &:hover:not(:disabled) {\n background-color: #006D6A;\n }\n\n &:active:not(:disabled) {\n background-color: #005755;\n }\n\n &:disabled {\n opacity: 0.38;\n cursor: not-allowed;\n }\n }\n\n &__icon {\n width: 1.25rem;\n height: 1.25rem;\n fill: currentColor;\n }\n\n // Density variants\n &--compact {\n .xplor-input-search__input {\n padding: 0.625rem 1rem;\n }\n\n .xplor-input-search__button {\n height: 2rem;\n width: 2rem;\n }\n\n .xplor-input-search__icon {\n width: 1rem;\n height: 1rem;\n }\n }\n\n &--comfortable {\n .xplor-input-search__input {\n padding: 1rem 1rem;\n }\n\n .xplor-input-search__button {\n height: 2.75rem;\n width: 2.75rem;\n }\n\n .xplor-input-search__icon {\n width: 1.375rem;\n height: 1.375rem;\n }\n }\n\n &--disabled {\n .xplor-input-search__field {\n background-color: rgba(0, 0, 0, 0.04);\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'xplor-input-search',\n styleUrl: 'xplor-input-search.scss',\n scoped: true,\n})\nexport class XplorInputSearch {\n /*\n Search value\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Search...';\n\n /\n Background color\n /\n @Prop() bgColor: string = 'white';\n\n /\n Button/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the input is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Density (compact, default, comfortable)\n /\n @Prop() density: 'compact' \| 'default' \| 'comfortable' = 'default';\n\n /\n Search event (triggered on button click or Enter key)\n */\n @Event() search: EventEmitter<string>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n };\n\n private handleSearch = () => {\n this.search.emit(this.value);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n this.handleSearch();\n }\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-search': true,\n [`xplor-input-search--${this.density}`]: true,\n 'xplor-input-search--focused': this.isFocused,\n 'xplor-input-search--disabled': this.disabled,\n };\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"xplor-input-search__field\">\n <input\n type=\"~~text~~\"\n class=\"xplor-input-search__input\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n onInput={this.handleInput}\n onKeyDown={this.handleKeyDown}\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n style={{\n backgroundColor: this.bgColor,\n }}\n />\n\n <slot name=\"append-inner\">\n <button\n type=\"button\"\n class=\"xplor-input-search__button\"\n onClick={this.handleSearch}\n disabled={this.disabled}\n data-testid=\"input-search-button\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"xplor-input-search__icon\">\n <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n </svg>\n </button>\n </slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-input-search.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,msTAAmsT;;ACE/tT,IAAI,oBAAoB,GAAG,CAAC;MAOfA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;;AAMU,QAAA,IAAA,CAAA,OAAO,GAAG,sBAAsB,EAAE,oBAAoB,EAAE;AAChE;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAW,WAAW;AAEzC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,OAAO;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,SAAS;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA0C,SAAS;AAOzD,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;AAC3B,SAAC;AAEO,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAC9B,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC/C,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;gBACzB,IAAI,CAAC,YAAY,EAAE;;AAEvB,SAAC;AAmDF;IAjDC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,oBAAoB,EAAE,IAAI;AAC1B,YAAA,CAAC,uBAAuB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YAC7C,6BAA6B,EAAE,IAAI,CAAC,SAAS;YAC7C,8BAA8B,EAAE,IAAI,CAAC,QAAQ;SAC9C;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,2BAA2B,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EACtC,MAAM,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EACtC,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI,CAAC,OAAO;aAC9B,EACD,IAAI,EAAC,WAAW,EAAA,YAAA,EACL,QAAQ,EACnB,CAAA,EAEF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,EACvB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,aAAA,EACX,qBAAqB,EAAA,YAAA,EACtB,QAAQ,EAAA,EAEnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,0BAA0B,EAAA,EACvD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAC,EAAC,mQAAmQ,EAAG,CAAA,CAC1Q,CACC,CACJ,CACH,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorInputSearch","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-input-search/xplor-input-search.scss?tag=xplor-input-search&encapsulation=scoped","src/components/xplor-input-search/xplor-input-search.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.xplor-input-search {\n display: flex;\n flex-direction: column;\n\n &__field {\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n background-color: white;\n transition: border-color 0.2s ease;\n padding-right: 0.375rem;\n\n &:hover:not(.xplor-input-search--disabled &) {\n border-color: rgba(0, 0, 0, 0.6);\n }\n }\n\n &--focused {\n .xplor-input-search__field {\n border-color: #008480;\n border-width: 2px;\n padding-right: calc(0.375rem - 1px);\n }\n\n .xplor-input-search__input {\n padding-left: calc(1rem - 1px);\n }\n }\n\n &__input {\n flex: 1;\n padding: 0.875rem 1rem;\n font-size: 1rem;\n font-family: inherit;\n border: none;\n outline: none;\n background: transparent;\n min-width: 0;\n\n &::placeholder {\n color: rgba(0, 0, 0, 0.38);\n }\n\n &:disabled {\n color: rgba(0, 0, 0, 0.38);\n cursor: not-allowed;\n }\n }\n\n &__button {\n min-height: 0;\n min-width: 0;\n height: 2.5rem;\n width: 2.5rem;\n padding: 0;\n border: none;\n border-radius: 4px;\n background-color: #008480;\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n flex-shrink: 0;\n\n &:hover:not(:disabled) {\n background-color: #006D6A;\n }\n\n &:active:not(:disabled) {\n background-color: #005755;\n }\n\n &:disabled {\n opacity: 0.38;\n cursor: not-allowed;\n }\n }\n\n &__icon {\n width: 1.25rem;\n height: 1.25rem;\n fill: currentColor;\n }\n\n // Density variants\n &--compact {\n .xplor-input-search__input {\n padding: 0.625rem 1rem;\n }\n\n .xplor-input-search__button {\n height: 2rem;\n width: 2rem;\n }\n\n .xplor-input-search__icon {\n width: 1rem;\n height: 1rem;\n }\n }\n\n &--comfortable {\n .xplor-input-search__input {\n padding: 1rem 1rem;\n }\n\n .xplor-input-search__button {\n height: 2.75rem;\n width: 2.75rem;\n }\n\n .xplor-input-search__icon {\n width: 1.375rem;\n height: 1.375rem;\n }\n }\n\n &--disabled {\n .xplor-input-search__field {\n background-color: rgba(0, 0, 0, 0.04);\n }\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputSearchIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-search',\n styleUrl: 'xplor-input-search.scss',\n scoped: true,\n})\nexport class XplorInputSearch {\n private inputId = `xplor-input-search-${++inputSearchIdCounter}`;\n /*\n Search value\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n Input placeholder\n /\n @Prop() placeholder: string = 'Search...';\n\n /\n Background color\n /\n @Prop() bgColor: string = 'white';\n\n /\n Button/focus color\n /\n @Prop() color: string = '#008480';\n\n /\n Whether the input is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Density (compact, default, comfortable)\n /\n @Prop() density: 'compact' \| 'default' \| 'comfortable' = 'default';\n\n /\n Search event (triggered on button click or Enter key)\n */\n @Event() search: EventEmitter<string>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n };\n\n private handleSearch = () => {\n this.search.emit(this.value);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n this.handleSearch();\n }\n };\n\n render() {\n const containerClasses = {\n 'xplor-input-search': true,\n [`xplor-input-search--${this.density}`]: true,\n 'xplor-input-search--focused': this.isFocused,\n 'xplor-input-search--disabled': this.disabled,\n };\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"xplor-input-search__field\">\n <input\n id={this.inputId}\n type=\"search\"\n class=\"xplor-input-search__input\"\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n onInput={this.handleInput}\n onKeyDown={this.handleKeyDown}\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n style={{\n backgroundColor: this.bgColor,\n }}\n role=\"searchbox\"\n aria-label=\"Search\"\n />\n\n <slot name=\"append-inner\">\n <button\n type=\"button\"\n class=\"xplor-input-search__button\"\n onClick={this.handleSearch}\n disabled={this.disabled}\n data-testid=\"input-search-button\"\n aria-label=\"Search\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"xplor-input-search__icon\">\n <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n </svg>\n </button>\n </slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/xplor-input-select.js CHANGED Viewed

@@ -62,6 +62,7 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
         this.isOpen = false;
         this.isFocused = false;
         this.menuPosition = null;
+        this.highlightedIndex = -1;
         this.updateMenuPosition = () => {
             if (this.fieldRef) {
                 const rect = this.fieldRef.getBoundingClientRect();
@@ -81,8 +82,12 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
             if (!this.disabled && !this.readonly) {
                 if (!this.isOpen) {
                     this.updateMenuPosition();
+                    this.highlightedIndex = -1;
                 }
                 this.isOpen = !this.isOpen;
+                if (!this.isOpen) {
+                    this.highlightedIndex = -1;
+                }
             }
         };
         this.handleOptionClick = (option) => {
@@ -127,6 +132,82 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
     disconnectedCallback() {
         document.removeEventListener('click', this.handleOutsideClick);
     }
+    handleKeyDown(event) {
+        var _a;
+        const totalOptions = this.options.length;
+        if (totalOptions === 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.updateMenuPosition();
+                    this.isOpen = true;
+                    this.highlightedIndex = 0;
+                }
+                else {
+                    this.highlightedIndex = this.highlightedIndex < totalOptions - 1 ? this.highlightedIndex + 1 : 0;
+                }
+                this.scrollToHighlightedOption();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.updateMenuPosition();
+                    this.isOpen = true;
+                    this.highlightedIndex = totalOptions - 1;
+                }
+                else {
+                    this.highlightedIndex = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : totalOptions - 1;
+                }
+                this.scrollToHighlightedOption();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.isOpen && this.highlightedIndex >= 0 && this.highlightedIndex < totalOptions) {
+                    this.handleOptionClick(this.options[this.highlightedIndex]);
+                }
+                else if (!this.isOpen) {
+                    this.toggleDropdown();
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.isOpen = false;
+                this.highlightedIndex = -1;
+                (_a = this.fieldRef) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
+            case 'Home':
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.highlightedIndex = 0;
+                    this.scrollToHighlightedOption();
+                }
+                break;
+            case 'End':
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.highlightedIndex = totalOptions - 1;
+                    this.scrollToHighlightedOption();
+                }
+                break;
+            case 'Tab':
+                this.isOpen = false;
+                this.highlightedIndex = -1;
+                break;
+        }
+    }
+    scrollToHighlightedOption() {
+        requestAnimationFrame(() => {
+            if (this.selectRef && this.highlightedIndex >= 0) {
+                const highlightedEl = this.selectRef.querySelector(`[data-option-index="${this.highlightedIndex}"]`);
+                if (highlightedEl) {
+                    highlightedEl.scrollIntoView({ block: 'nearest' });
+                }
+            }
+        });
+    }
     render() {
         const containerClasses = {
             'xplor-input-select': true,
@@ -136,18 +217,36 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
             'xplor-input-select--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: 'e5865a9d55129458a5357cf05f15115f1007019b' }, h("div", { key: '66d54f5d1bb7514301427de3ad5bbf7746309cec', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: 'dfa166182add3a83872a05e4a20b77f654921231', class: "xplor-input-select__label" }, this.label, this.required && h("span", { key: '0da6997f30e1861b35e67e80974fce115560cc9b', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'f828546abc6121bcabcdbc905a0e43aa012bb5a9', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el) }, h("div", { key: '13692cc57a5c3c1da3915ca80f8324d091732ebb', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: '0a372cf751bc459d957130c50fb4387405e9f21f', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (h("div", { key: '13e8536c6ce8220041364675d459dc2ee3ef7613', class: "xplor-input-select__menu", style: {
+        const listboxId = 'input-select-listbox';
+        const labelId = 'input-select-label';
+        const errorId = 'input-select-error';
+        const helperId = 'input-select-helper';
+        const activeDescendantId = this.highlightedIndex >= 0 ? `input-select-option-${this.highlightedIndex}` : undefined;
+        // Build aria-describedby from error/helper text
+        const describedByParts = [];
+        if (this.error)
+            describedByParts.push(errorId);
+        if (!this.error && this.helperText)
+            describedByParts.push(helperId);
+        const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
+        return (h(Host, { key: '4c7693dfd1a0a4ac74ed4f4ff5024d4375acd3a8' }, h("div", { key: 'bcd180aa7fbccfae34ce29b1c9bbe6329bf87476', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: '85c20aecaf25a7fc260c79a15e4d4bb30804213d', class: "xplor-input-select__label", id: labelId }, this.label, this.required && h("span", { key: '82c8dbcb5d7e77c42e0a6e54b69cbb514563ac2b', class: "xplor-input-select__required" }, "*"))), h("div", { key: 'b7cfc5c895fc57f3eac6e66aa5fd431a89dd07bb', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el), role: "combobox", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": this.isOpen ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": !this.label ? (this.ariaLabel || this.placeholder) : undefined, "aria-describedby": ariaDescribedBy, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, h("div", { key: '1125703089a34186cbbfaba5e51d6ea50c5f4239', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: 'e33ab0424fddc90d1f48ef2b285e70fd3eeaff8a', class: "xplor-input-select__arrow", "aria-hidden": "true" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (h("div", { key: 'b1fb47a1d217c4156250bded2c9e9ae9bdebf603', class: "xplor-input-select__menu", role: "listbox", id: listboxId, "aria-label": this.label || this.ariaLabel || 'Options', "aria-multiselectable": this.multiple ? 'true' : undefined, style: {
                 position: 'fixed',
                 top: `${this.menuPosition.top}px`,
                 left: `${this.menuPosition.left}px`,
                 width: `${this.menuPosition.width}px`,
-            } }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (h("div", { key: option.value, class: {
-                'xplor-input-select__option': true,
-                'xplor-input-select__option--selected': this.isSelected(option),
-            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (h("div", { key: '240b60564cf80cc66b879bb4431885270c64db5b', class: "xplor-input-select__details" }, this.error && h("div", { key: 'bbb2a2e796650c153e901aa87188a386c2f5b9f7', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && h("div", { key: 'a36ccb1626e1b5a9d19f2ee106213fd943177aa8', class: "xplor-input-select__helper-text" }, this.helperText))))));
+            } }, this.options.length === 0 ? (h("div", { class: "xplor-input-select__empty", role: "option", "aria-disabled": "true" }, "No options available")) : (this.options.map((option, index) => {
+            const selected = this.isSelected(option);
+            return (h("div", { key: option.value, id: `input-select-option-${index}`, "data-option-index": index, role: "option", "aria-selected": selected ? 'true' : 'false', class: {
+                    'xplor-input-select__option': true,
+                    'xplor-input-select__option--selected': selected,
+                    'xplor-input-select__option--highlighted': index === this.highlightedIndex,
+                }, onClick: () => this.handleOptionClick(option) }, this.multiple && (h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: selected, readOnly: true, tabindex: -1, "aria-checked": selected ? 'true' : 'false', "aria-hidden": "true" })), h("div", { class: "xplor-input-select__option-content" }, h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle)))));
+        })))), showDetails && (h("div", { key: '0a4f46b2460cd068fe27635cbe45d054c06e9538', class: "xplor-input-select__details" }, this.error && h("div", { key: '2d0f44af6a4c115bf3ed66764092b29cf117d57e', class: "xplor-input-select__error-message", id: errorId, role: "alert" }, this.error), !this.error && this.helperText && h("div", { key: 'ee93ffdd070c853b1d779235d6c57e368d75bcf1', class: "xplor-input-select__helper-text", id: helperId }, this.helperText))))));
     }
+    get el() { return this; }
     static get style() { return xplorInputSelectCss; }
 }, [2, "xplor-input-select", {
+        "ariaLabel": [1, "aria-label"],
         "value": [1032],
         "label": [1],
         "placeholder": [1],
@@ -163,8 +262,9 @@ const XplorInputSelect$1 = /*@__PURE__*/ proxyCustomElement(class XplorInputSele
         "required": [4],
         "isOpen": [32],
         "isFocused": [32],
-        "menuPosition": [32]
-    }]);
+        "menuPosition": [32],
+        "highlightedIndex": [32]
+    }, [[0, "keydown", "handleKeyDown"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;