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

package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 const DEFAULT_ACCEPT_ALL = '*' + '/' + '*';
+const HORIZONTAL_BREAKPOINT = 700;
 export class XplorDragAndDropInput {
     constructor() {
         /**
@@ -24,6 +25,7 @@ export class XplorDragAndDropInput {
         this.progress = -1;
         this.dragover = false;
         this.currentFile = null;
+        this.horizontal = false;
         this.onDrop = (e) => {
             var _a, _b;
             e.preventDefault();
@@ -106,6 +108,23 @@ export class XplorDragAndDropInput {
             return this.progress >= 0 && this.progress <= 100;
         };
     }
+    connectedCallback() {
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                this.horizontal = entry.contentRect.width >= HORIZONTAL_BREAKPOINT;
+            }
+        });
+    }
+    componentDidLoad() {
+        const zone = this.el.querySelector('.drag-drop-zone');
+        if (zone) {
+            this.resizeObserver.observe(zone);
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     /**
      * Clears the currently selected file
      */
@@ -119,13 +138,13 @@ export class XplorDragAndDropInput {
     render() {
         const progressValue = Math.min(Math.max(this.progress, 0), 100);
         const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;
-        return (h(Host, { key: '4ca1a26f1c043761a3bcafebf3ccdf57ec17467b' }, h("div", { key: '60c9f55d838820e2d9c087fbb652559944ecfc36', class: "drag-drop-zone" }, h("div", { key: 'f15e206b7f1e1741f5ee96681e000400e72d66b1', class: {
+        return (h(Host, { key: 'ca319f6606c7dbfce3e098ac331df04851c7f883' }, h("div", { key: 'ab7995b34b56bfcf783d413d66e3ea1232d1f7ee', class: { 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal } }, h("div", { key: '56c926d929d6cd1fdf7abb793bf71957082ab332', class: {
                 'drag-drop-card': true,
                 'drag-drop-card--dragover': this.dragover,
                 'drag-drop-card--disabled': this.disabled,
-            }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, h("div", { key: '49325fd7ff2d44a045eba593e2cb3708316a5be4', class: "drag-drop-card__content" }, h("svg", { key: '23b8f38df073266201a01ec78a45b1cac924a3e4', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'eb1c750d1657fd578cf15c9bc16d5d1885d703e8', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), h("path", { key: '04dc16407d2abd999fbef9cc02346d499644f0a7', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), h("h3", { key: '82c31b56cb5f17445748e0bfb8668caef4ceea59', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (h("p", { key: 'cd9a640967ce9cd8c959000771d78a57fe1df4ea', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())), h("div", { key: 'c9a3987e06aceba90a379f6f5264998c218497a1', class: "drag-drop-card__action" }, h("xplor-button", { key: 'a26dd92027f90fb052ce3fa5cc456b18b5732b41', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (h("div", { key: '75258825a2415d4f78dc05caa4931c2b65675c10', class: "file-info", "aria-live": "polite" }, this.showProgress() && (h("p", { key: '643fca5089d411ac0c2ac7cb2d8548450e18df49', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: '6829f00a6550dee83fc60496c6534272443c2974', class: "file-info__card" }, h("div", { key: 'cb234a2213fc3ae39993b11cb3d99878d643878f', class: "file-info__icon", "aria-hidden": "true" }, h("svg", { key: 'f657669caa7dd95b095b419908f94cf16e8530d7', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'ef502814c77090e682f8b7e3e2d41dc3434a14fa', d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), h("div", { key: '6bcc15939b14fbcfa71408e733489933e9322efa', class: "file-info__details" }, h("p", { key: '9840cd50a70cfec9ceb8588116677ed0da2d5b14', class: "file-info__name" }, this.currentFile.name), h("p", { key: 'f8aaf5f729278070ebd1d3a8137460dab67a130a', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
+            }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, h("div", { key: 'd7fb1ad5b7190aed2eb6dfeed3b1fb60aea9741b', class: "drag-drop-card__content" }, h("div", { key: 'e9793c5e6da2444f2dc3a6fa9c87b780ebbcf6ac', class: "drag-drop-card__body" }, h("svg", { key: '86475864d73ae0ed327684db1e0b89e728ca67da', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'ead2c5bf3a3850462148ba290a16de1dc656f4a9', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), h("path", { key: '94babbe372719d394d1d79d7c6c15ed32d58aa24', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), h("div", { key: '6f1d9f5b68401dc8139d8fd5d4c10571284ae367', class: "drag-drop-card__text" }, h("h3", { key: '3e0d81d37e40513884fc587091b8d8593db83ee3', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (h("p", { key: 'f5d808b35c569d2ab24499aff8a46f35b079ed90', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())))), h("p", { key: '61fd2ae577886973c6396256d1d62d8b388a1cc2', class: "drag-drop-card__divider" }, "or"), h("div", { key: '44fd0339be61f3ea877a4264e39c294cf76f1a09', class: "drag-drop-card__action" }, h("xplor-button", { key: 'eaae9ef4676e8ab704f7145ca61bf29c941d6682', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (h("div", { key: '26e53d9c4837f6374825ab79d08d738c9dbaf8da', class: "file-info", "aria-live": "polite" }, this.showProgress() && (h("p", { key: '3be4484290b10eadf7edf6b2e51e401a5e73944f', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: '91769f6bebf95d09452125d8853ad1063f138648', class: "file-info__card" }, h("div", { key: '98ecc133467eab8da00c941d727786ed02eb312a', class: "file-info__icon", "aria-hidden": "true" }, h("svg", { key: '1379507c795a90afcda408d352dbe421b7bf6b0c', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'db2e4bd018a094553daf7c9558a502366b180780', d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), h("div", { key: '8f1b4caa023bafbeb1abfe0b3ad86947cbf3ccc7', class: "file-info__details" }, h("p", { key: '944afb1540e5c7096014ff4bca9a1355888c6295', class: "file-info__name" }, this.currentFile.name), h("p", { key: 'a436d9deca0315b5eea5f1cb415a3b795d3c61c9', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
             ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
-            : ''), this.showProgress() && (h("div", { key: 'e30ab7e1514f72034cac41f748df00cd19423d2d', class: "file-info__progress-row" }, h("div", { key: '4ef4e335b0154adc44d940784ac0f01358fa4fd0', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, h("div", { key: '3328873cc9d457401ccfe46c3cee8c7c7d5280ab', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), h("span", { key: 'f3fab0a39db233a16bb1fefdbb15c2174808543d', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), h("button", { key: '70ff008be7088ff5744130ffecab2694eceff8ff', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, h("svg", { key: '0c6957c250bde4af18641704ba8b248ff8b815b4', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '0131e03966350788114f5ac999488c19d0186f90', d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" })))))), h("input", { key: 'a40511c99ac1292d5eb5a37be23a235b5103ab65', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 })));
+            : ''), this.showProgress() && (h("div", { key: '511dfd62f57ada4dd544a8d936f96f21dcd10421', class: "file-info__progress-row" }, h("div", { key: 'ff667b1c0aa9f062fb1fc7c567fa9154b5d5f349', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, h("div", { key: 'f854ed8afc19d8f8db7f45f49c1bd143fd5db6d5', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), h("span", { key: 'ac64c3bd5a4070c4429c3fd35a5d2096d3f2d23a', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), h("button", { key: 'ab52269526a3ce92b319fd64614bb13d925014c0', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, h("svg", { key: '7713047f0dc58d2e44115483ea1297ca5d4e1b19', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '476df4151904b6d4753019ff04f85fb9ed1f3ad3', d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" })))))), h("input", { key: '40a83940bb6c13a35b8ff1a6ef6ba4ad2b3fefdc', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 })));
     }
     static get is() { return "xplor-drag-and-drop-input"; }
     static get encapsulation() { return "scoped"; }
@@ -265,7 +284,8 @@ export class XplorDragAndDropInput {
     static get states() {
         return {
             "dragover": {},
-            "currentFile": {}
+            "currentFile": {},
+            "horizontal": {}
         };
     }
     static get events() {
@@ -327,5 +347,6 @@ export class XplorDragAndDropInput {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=xplor-drag-and-drop-input.js.map

package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-drag-and-drop-input.js","sourceRoot":"","sources":["../../../src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Method } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\n\n@Component({\n  tag: 'xplor-drag-and-drop-input',\n  styleUrl: 'xplor-drag-and-drop-input.scss',\n  scoped: true,\n})\nexport class XplorDragAndDropInput {\n  /**\n   * Disable the file upload\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Accepted file types (e.g., 'image/png,.pdf')\n   */\n  @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n  /**\n   * Instruction text displayed in the drop zone\n   */\n  @Prop() label: string = 'Drag and drop your files here';\n\n  /**\n   * Browse button label text\n   */\n  @Prop() browseLabel: string = 'Browse Files';\n\n  /**\n   * Accessible label for the drop zone area\n   */\n  @Prop() ariaLabel: string;\n\n  /**\n   * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.\n   */\n  @Prop() progress: number = -1;\n\n  @State() dragover: boolean = false;\n  @State() currentFile: File | null = null;\n\n  /**\n   * Emitted when a file is selected via drop or click\n   */\n  @Event() fileSelect: EventEmitter<File>;\n\n  /**\n   * Emitted when the current file is cleared\n   */\n  @Event() fileClear: EventEmitter<void>;\n\n  private fileInputEl: HTMLInputElement;\n\n  /**\n   * Clears the currently selected file\n   */\n  @Method()\n  async clearCurrentFile() {\n    this.currentFile = null;\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n    this.fileClear.emit();\n  }\n\n  private onDrop = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragover = false;\n\n    if (this.disabled) return;\n\n    const file = e.dataTransfer?.files?.[0];\n    if (file) {\n      this.currentFile = file;\n      this.fileSelect.emit(this.currentFile);\n    }\n  };\n\n  private onDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    if (!this.disabled) {\n      this.dragover = true;\n    }\n  };\n\n  private onDragEnter = (e: DragEvent) => {\n    e.preventDefault();\n    if (!this.disabled) {\n      this.dragover = true;\n    }\n  };\n\n  private onDragLeave = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragover = false;\n  };\n\n  private onFileSelect = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file) {\n      this.currentFile = file;\n      this.fileSelect.emit(this.currentFile);\n    }\n    input.value = '';\n  };\n\n  private openFileDialog = () => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.fileInputEl?.click();\n  };\n\n  private getAcceptsLabel = () => {\n    const accepts = this.accepts?.trim();\n    if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {\n      return '*';\n    }\n\n    return accepts;\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 parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n  };\n\n  private formatDate = (timestamp: number): string => {\n    const date = new Date(timestamp);\n    const day = date.getDate();\n    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n    const month = months[date.getMonth()];\n    const year = date.getFullYear();\n\n    const suffix = (day === 1 || day === 21 || day === 31) ? 'st'\n      : (day === 2 || day === 22) ? 'nd'\n      : (day === 3 || day === 23) ? 'rd'\n      : 'th';\n\n    const hours = date.getHours();\n    const minutes = date.getMinutes().toString().padStart(2, '0');\n    const seconds = date.getSeconds().toString().padStart(2, '0');\n    const ampm = hours >= 12 ? 'PM' : 'AM';\n    const displayHours = hours % 12 || 12;\n\n    return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;\n  };\n\n  private showProgress = (): boolean => {\n    return this.progress >= 0 && this.progress <= 100;\n  };\n\n  render() {\n    const progressValue = Math.min(Math.max(this.progress, 0), 100);\n    const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;\n\n    return (\n      <Host>\n        <div class=\"drag-drop-zone\">\n          <div\n            class={{\n              'drag-drop-card': true,\n              'drag-drop-card--dragover': this.dragover,\n              'drag-drop-card--disabled': this.disabled,\n            }}\n            onDrop={this.onDrop}\n            onDragOver={this.onDragOver}\n            onDragEnter={this.onDragEnter}\n            onDragLeave={this.onDragLeave}\n            role=\"region\"\n            aria-label={dropZoneLabel}\n          >\n            <div class=\"drag-drop-card__content\">\n              <svg\n                class=\"drag-drop-card__icon\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"40\"\n                height=\"40\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z\"\n                  fill=\"currentColor\"\n                  opacity=\"0.3\"\n                />\n                <path\n                  d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n              {this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (\n                <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n              )}\n              <div class=\"drag-drop-card__action\">\n                <xplor-button\n                  text={this.browseLabel}\n                  type={this.disabled ? 'disabled' : 'secondary'}\n                  clickAction={this.openFileDialog}\n                  aria-label={this.browseLabel}\n                ></xplor-button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {this.currentFile && (\n          <div class=\"file-info\" aria-live=\"polite\">\n            {this.showProgress() && (\n              <p class=\"file-info__status\">\n                Uploading {this.progress === 100 ? '1' : '0'} / 1\n              </p>\n            )}\n            <div class=\"file-info__card\">\n              <div class=\"file-info__icon\" aria-hidden=\"true\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z\" />\n                </svg>\n              </div>\n              <div class=\"file-info__details\">\n                <p class=\"file-info__name\">{this.currentFile.name}</p>\n                <p class=\"file-info__meta\">\n                  {this.formatFileSize(this.currentFile.size)}\n                  {this.currentFile.lastModified\n                    ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`\n                    : ''}\n                </p>\n                {this.showProgress() && (\n                  <div class=\"file-info__progress-row\">\n                    <div\n                      class=\"file-info__progress-bar\"\n                      role=\"progressbar\"\n                      aria-valuenow={progressValue}\n                      aria-valuemin={0}\n                      aria-valuemax={100}\n                      aria-label={`Upload progress: ${Math.round(progressValue)}%`}\n                    >\n                      <div\n                        class=\"file-info__progress-fill\"\n                        style={{ width: `${progressValue}%` }}\n                      ></div>\n                    </div>\n                    <span class=\"file-info__progress-text\" aria-hidden=\"true\">{Math.round(this.progress)}%</span>\n                  </div>\n                )}\n              </div>\n              <button\n                class=\"file-info__remove\"\n                onClick={() => this.clearCurrentFile()}\n                aria-label={`Remove file ${this.currentFile.name}`}\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z\" />\n                </svg>\n              </button>\n            </div>\n          </div>\n        )}\n\n        <input\n          id=\"drag-drop-file-select\"\n          type=\"file\"\n          disabled={this.disabled}\n          accept={this.accepts}\n          class=\"drag-drop-input-hidden\"\n          ref={(el) => (this.fileInputEl = el)}\n          onChange={this.onFileSelect}\n          aria-label={`${this.browseLabel} - ${this.label}`}\n          tabindex={-1}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xplor-drag-and-drop-input.js","sourceRoot":"","sources":["../../../src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Method, Element } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\nconst HORIZONTAL_BREAKPOINT = 700;\n\n@Component({\n  tag: 'xplor-drag-and-drop-input',\n  styleUrl: 'xplor-drag-and-drop-input.scss',\n  scoped: true,\n})\nexport class XplorDragAndDropInput {\n  /**\n   * Disable the file upload\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Accepted file types (e.g., 'image/png,.pdf')\n   */\n  @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n  /**\n   * Instruction text displayed in the drop zone\n   */\n  @Prop() label: string = 'Drag and drop your files here';\n\n  /**\n   * Browse button label text\n   */\n  @Prop() browseLabel: string = 'Browse Files';\n\n  /**\n   * Accessible label for the drop zone area\n   */\n  @Prop() ariaLabel: string;\n\n  /**\n   * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.\n   */\n  @Prop() progress: number = -1;\n\n  @State() dragover: boolean = false;\n  @State() currentFile: File | null = null;\n  @State() horizontal: boolean = false;\n\n  @Element() el: HTMLElement;\n\n  /**\n   * Emitted when a file is selected via drop or click\n   */\n  @Event() fileSelect: EventEmitter<File>;\n\n  /**\n   * Emitted when the current file is cleared\n   */\n  @Event() fileClear: EventEmitter<void>;\n\n  private fileInputEl: HTMLInputElement;\n  private resizeObserver: ResizeObserver;\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.horizontal = entry.contentRect.width >= HORIZONTAL_BREAKPOINT;\n      }\n    });\n  }\n\n  componentDidLoad() {\n    const zone = this.el.querySelector('.drag-drop-zone');\n    if (zone) {\n      this.resizeObserver.observe(zone);\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  /**\n   * Clears the currently selected file\n   */\n  @Method()\n  async clearCurrentFile() {\n    this.currentFile = null;\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n    this.fileClear.emit();\n  }\n\n  private onDrop = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragover = false;\n\n    if (this.disabled) return;\n\n    const file = e.dataTransfer?.files?.[0];\n    if (file) {\n      this.currentFile = file;\n      this.fileSelect.emit(this.currentFile);\n    }\n  };\n\n  private onDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    if (!this.disabled) {\n      this.dragover = true;\n    }\n  };\n\n  private onDragEnter = (e: DragEvent) => {\n    e.preventDefault();\n    if (!this.disabled) {\n      this.dragover = true;\n    }\n  };\n\n  private onDragLeave = (e: DragEvent) => {\n    e.preventDefault();\n    this.dragover = false;\n  };\n\n  private onFileSelect = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file) {\n      this.currentFile = file;\n      this.fileSelect.emit(this.currentFile);\n    }\n    input.value = '';\n  };\n\n  private openFileDialog = () => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.fileInputEl?.click();\n  };\n\n  private getAcceptsLabel = () => {\n    const accepts = this.accepts?.trim();\n    if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {\n      return '*';\n    }\n\n    return accepts;\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 parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n  };\n\n  private formatDate = (timestamp: number): string => {\n    const date = new Date(timestamp);\n    const day = date.getDate();\n    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n    const month = months[date.getMonth()];\n    const year = date.getFullYear();\n\n    const suffix = (day === 1 || day === 21 || day === 31) ? 'st'\n      : (day === 2 || day === 22) ? 'nd'\n      : (day === 3 || day === 23) ? 'rd'\n      : 'th';\n\n    const hours = date.getHours();\n    const minutes = date.getMinutes().toString().padStart(2, '0');\n    const seconds = date.getSeconds().toString().padStart(2, '0');\n    const ampm = hours >= 12 ? 'PM' : 'AM';\n    const displayHours = hours % 12 || 12;\n\n    return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;\n  };\n\n  private showProgress = (): boolean => {\n    return this.progress >= 0 && this.progress <= 100;\n  };\n\n  render() {\n    const progressValue = Math.min(Math.max(this.progress, 0), 100);\n    const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;\n\n    return (\n      <Host>\n        <div class={{ 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal }}>\n          <div\n            class={{\n              'drag-drop-card': true,\n              'drag-drop-card--dragover': this.dragover,\n              'drag-drop-card--disabled': this.disabled,\n            }}\n            onDrop={this.onDrop}\n            onDragOver={this.onDragOver}\n            onDragEnter={this.onDragEnter}\n            onDragLeave={this.onDragLeave}\n            role=\"region\"\n            aria-label={dropZoneLabel}\n          >\n            <div class=\"drag-drop-card__content\">\n              <div class=\"drag-drop-card__body\">\n                <svg\n                  class=\"drag-drop-card__icon\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"48\"\n                  height=\"48\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z\"\n                    fill=\"currentColor\"\n                    opacity=\"0.3\"\n                  />\n                  <path\n                    d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n                <div class=\"drag-drop-card__text\">\n                  <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n                  {this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (\n                    <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n                  )}\n                </div>\n              </div>\n              <p class=\"drag-drop-card__divider\">or</p>\n              <div class=\"drag-drop-card__action\">\n                <xplor-button\n                  text={this.browseLabel}\n                  type={this.disabled ? 'disabled' : 'secondary'}\n                  clickAction={this.openFileDialog}\n                  aria-label={this.browseLabel}\n                ></xplor-button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {this.currentFile && (\n          <div class=\"file-info\" aria-live=\"polite\">\n            {this.showProgress() && (\n              <p class=\"file-info__status\">\n                Uploading {this.progress === 100 ? '1' : '0'} / 1\n              </p>\n            )}\n            <div class=\"file-info__card\">\n              <div class=\"file-info__icon\" aria-hidden=\"true\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z\" />\n                </svg>\n              </div>\n              <div class=\"file-info__details\">\n                <p class=\"file-info__name\">{this.currentFile.name}</p>\n                <p class=\"file-info__meta\">\n                  {this.formatFileSize(this.currentFile.size)}\n                  {this.currentFile.lastModified\n                    ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`\n                    : ''}\n                </p>\n                {this.showProgress() && (\n                  <div class=\"file-info__progress-row\">\n                    <div\n                      class=\"file-info__progress-bar\"\n                      role=\"progressbar\"\n                      aria-valuenow={progressValue}\n                      aria-valuemin={0}\n                      aria-valuemax={100}\n                      aria-label={`Upload progress: ${Math.round(progressValue)}%`}\n                    >\n                      <div\n                        class=\"file-info__progress-fill\"\n                        style={{ width: `${progressValue}%` }}\n                      ></div>\n                    </div>\n                    <span class=\"file-info__progress-text\" aria-hidden=\"true\">{Math.round(this.progress)}%</span>\n                  </div>\n                )}\n              </div>\n              <button\n                class=\"file-info__remove\"\n                onClick={() => this.clearCurrentFile()}\n                aria-label={`Remove file ${this.currentFile.name}`}\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z\" />\n                </svg>\n              </button>\n            </div>\n          </div>\n        )}\n\n        <input\n          id=\"drag-drop-file-select\"\n          type=\"file\"\n          disabled={this.disabled}\n          accept={this.accepts}\n          class=\"drag-drop-input-hidden\"\n          ref={(el) => (this.fileInputEl = el)}\n          onChange={this.onFileSelect}\n          aria-label={`${this.browseLabel} - ${this.label}`}\n          tabindex={-1}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class XplorDropdown {
     render() {
-        return (h(Host, { key: '51c3f9372a79efeeffc662149ada3cd50c76fcbf' }, h("select", { key: '5bf6285178fd454f76089f62ad17d49654e88bf8', class: "xplor-dropdown", onChange: this.handleChange }, this.options.map((option) => (h("option", { value: option, selected: this.selected === option }, option))))));
+        return (h(Host, { key: 'a4cdcfb36108dbb84eeea5a4afbcbc59652e9cb0' }, h("select", { key: '1ad560027207d9b0fe9d9986c9ab4e6ab947c71c', class: "xplor-dropdown", onChange: this.handleChange }, this.options.map((option) => (h("option", { value: option, selected: this.selected === option }, option))))));
     }
     static get is() { return "xplor-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xplor-expansion-panel/xplor-expansion-panel.js

@@ -26,16 +26,16 @@ export class XplorExpansionPanel {
         }
     }
     render() {
-        return (h(Host, { key: '3db1f2fc99643b6c032e49d12c8eedb06ae2ceb9' }, h("div", { key: 'ba08fc1332346fd14e2614184a2da5f99c90e217', class: {
+        return (h(Host, { key: 'ec0cf0741d58e980e3fe9897d3b79908f19eac8d' }, h("div", { key: 'a5e1676b6646e8d0414d774408a072d96d230ef3', class: {
                 'expansion-panel': true,
                 'expansion-panel--open': this.open,
                 'expansion-panel--disabled': this.disabled,
-            } }, h("button", { key: 'b370c00ac9b58af67594679a7c28915d7ecaf622', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.panelId}-content`, type: "button" }, h("div", { key: '7a2a65a0189cb9fbdbca615091f6e13e3d94b748', class: "expansion-panel__header-content" }, h("slot", { key: 'a20162d047d41cf219fb412973a92c3f16844640', name: "header" })), h("span", { key: '4dd148cb2d4461285fce95de5bf8cbb3df36e7b7', class: {
+            } }, h("button", { key: '5b56717fd245896ee650b5d5eb05343ec9995f15', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.panelId}-content`, type: "button" }, h("div", { key: 'd24e0e3633e513039f0341304f164095f95984bd', class: "expansion-panel__header-content" }, h("slot", { key: 'a58f1a4fd78d57f8e4a89d1c325ea0f24347ccaf', name: "header" })), h("span", { key: '0b1d9eb011ef40275de9d827b3a901acf9662d64', class: {
                 'expansion-panel__icon': true,
                 'expansion-panel__icon--open': this.open,
-            } }, "\u25BC")), h("div", { key: '9d8a260d927387f5dd1e7e3d429f86d31f2689bf', class: "expansion-panel__content", id: `${this.panelId}-content`, role: "region", "aria-labelledby": this.panelId, style: {
+            } }, "\u25BC")), h("div", { key: '39a23cb9cd76993be5e684100f1b10c4591ac7b1', class: "expansion-panel__content", id: `${this.panelId}-content`, role: "region", "aria-labelledby": this.panelId, style: {
                 maxHeight: this.open ? `${this.contentHeight}px` : '0',
-            } }, h("div", { key: '0ac08b6ca30a0fabc7e44f2c8737ee29fccec08a', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: '94753fe13b1378a95cac9cb4c940aedbc127c1b0' }))))));
+            } }, h("div", { key: '11926bcbf205bb3acc9cba477b9f623c9d5c78ea', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: '6cc362dfb63dd256422b1dfdcb1532d794feddbe' }))))));
     }
     static get is() { return "xplor-expansion-panel"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-expansion-panels/xplor-expansion-panels.js

@@ -33,7 +33,7 @@ export class XplorExpansionPanels {
         this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';
     }
     render() {
-        return (h(Host, { key: '70452b8f734ded39c59a984b6a21e010d6512905' }, h("div", { key: '60ba67dc176b9cc141dd12d56e9f3e977eccd859', class: "expansion-panels", "aria-label": "Accordion" }, h("slot", { key: '99b9f4d51d54b8145ea0964638eecf687c2c8432' }))));
+        return (h(Host, { key: '915aad4dd0665cd44e3b784ce6f39e30972fa720' }, h("div", { key: 'f608e9bd9234b6a57bd06d4f7c843ac4b9ef5a38', class: "expansion-panels", "aria-label": "Accordion" }, h("slot", { key: '30b0c595f0c4e503dbe8e144c3805be2a8d4aed5' }))));
     }
     static get is() { return "xplor-expansion-panels"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-file-upload/xplor-file-upload.js

@@ -134,11 +134,11 @@ export 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: '791a95676b8e640b7dbd84b6ccf95627e5a10d7e', class: {
+        return (h(Host, { key: 'cf146eb8fadc05f46253e96a189508447ab7b3d4' }, h("div", { key: '672ebaac1aa611f51b673d5d23f04bf7874ab376', class: "file-upload" }, h("div", { key: '8c59c36125bb7e99940a8208e0db3978499b5728', 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, "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")))))))));
+            }, 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: '1f3125b36debba5fb8931850154b6cc0a3ebcf40', 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: '5956b2840433dfa4dd2d8874bcaa133dc13b2468', class: "file-upload__content" }, h("svg", { key: '90c23bc86b89941009eecaec7ac786c0822d3e7b', class: "file-upload__icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '6a638d3c13e465d9b2b8c2c0b298a3e9da5fd06f', d: "M12 15V3M12 3L8 7M12 3L16 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '535d50c699a4367b88e62f007a3d3d6d53347dbc', 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: '83531b59abf5b300c2e850c057f90e1b82996210', class: "file-upload__text" }, "Drag & drop files here or", ' ', h("button", { key: '5ea856d24ce7b87ebdfae3274ec9199cad0c0b20', type: "button", class: "file-upload__button", onClick: this.handleButtonClick, disabled: this.disabled }, this.label)), h("p", { key: '3a5bf9ef84a50d26a7ab86bc97fa1b38db239c03', class: "file-upload__hint" }, "Max size: ", this.formatFileSize(this.maxSize), this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`))), this.error && (h("div", { key: 'a78d9953e8356c6bb43ac13341fb9f211ae2694b', class: "file-upload__error", role: "alert" }, this.error)), this.files.length > 0 && (h("div", { key: '4d88ddac01a98bd991fed2fdf190cc9f095707a4', 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 is() { return "xplor-file-upload"; }
     static get encapsulation() { return "scoped"; }
@@ -300,7 +300,7 @@ export class XplorFileUpload {
                     "references": {
                         "UploadedFile": {
                             "location": "local",
-                            "path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-file-upload/xplor-file-upload.tsx",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-file-upload/xplor-file-upload.tsx",
                             "id": "src/components/xplor-file-upload/xplor-file-upload.tsx::UploadedFile"
                         }
                     }
@@ -321,7 +321,7 @@ export class XplorFileUpload {
                     "references": {
                         "UploadedFile": {
                             "location": "local",
-                            "path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-file-upload/xplor-file-upload.tsx",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-file-upload/xplor-file-upload.tsx",
                             "id": "src/components/xplor-file-upload/xplor-file-upload.tsx::UploadedFile"
                         }
                     }

package/dist/collection/components/xplor-inline-checkbox/xplor-inline-checkbox.js

@@ -33,9 +33,9 @@ export class XplorInlineCheckbox {
             'xplor-inline-checkbox--disabled': this.disabled,
             'xplor-inline-checkbox--checked': this.checked,
         };
-        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: {
+        return (h(Host, { key: '6c625424d179755dd930d006c64b6a172f393b19' }, h("label", { key: 'c4fb7542f9e62050bdcaef33a46f80e9fa37fe90', class: containerClasses }, h("input", { key: '0c116552b286e2b7f43196cb4bf8eaf823cc6472', 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: '31afabdf1498e609f06530f1db28a05b2a0ba00b', class: "xplor-inline-checkbox__label" }, this.label), h("slot", { key: '2a32c92c16906869dd82272590dd83ebc1905e71' }))));
+            } }), this.label && h("span", { key: '1b8a24dffab83791a336d84dd92385f068ffc595', class: "xplor-inline-checkbox__label" }, this.label), h("slot", { key: '224e152167e79a599c6ad72cd60c3ed225a37a1b' }))));
     }
     static get is() { return "xplor-inline-checkbox"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-inline-date-picker/xplor-inline-date-picker.js

@@ -206,7 +206,7 @@ export class XplorInlineDatePicker {
     render() {
         const sidebarDate = this.getSidebarDate();
         const dayHeaders = this.startWeekOnSunday ? this.dayNames : this.dayNamesStartMonday;
-        return (h(Host, { key: '031460c16f831f29173bbac372ee4de5b0473828' }, h("div", { key: 'b0d890fec94358a882d10a30b229196ee8fc4ea5', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, h("div", { key: '2d5496299d0091d1960fb8507726f15828d68313', class: "xplor-inline-date-picker__sidebar" }, h("div", { key: 'b1645b35975a52e916eb6d18ccda16c3b90519c3', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), h("div", { key: 'b812bbbd4686d06d6c4c602846c870777847c9ca', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), h("div", { key: 'd78744d1b353ddafa302693ac105837f33be736e', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), h("div", { key: '1e0519719bff8801a3f6a7d23c8140b4017656d8', class: "xplor-inline-date-picker__calendar" }, h("div", { key: '1f13bb35c2bbbc921f6f4d0a4dde12e47d010c81', class: "xplor-inline-date-picker__header" }, h("button", { key: 'dd726c543dc74ed85bb3dd128b45e5a74ffde1f6', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), h("div", { key: 'ffb6cf26f1b1a0ef2c75ccb827f38110a6cfbdbe', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), h("button", { key: '69b0c08aae5b24b2814c37be40de942ed2ff8abb', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), h("div", { key: '25ef6b996fdccc121b44f6dafe018aef316ab09d', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (h("div", { class: "xplor-inline-date-picker__weekday" }, day)))), h("div", { key: '6d092079f76ab7c06fcdb07c8d43d0cd9ace8faa', class: "xplor-inline-date-picker__days", role: "grid" }, this.renderCalendarDays())))));
+        return (h(Host, { key: '0e2c9ee42cbe61406ab4bac151dbf0e40475ed23' }, h("div", { key: '5e4a7875966f6f4a37f81446d58b68672c35dac3', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, h("div", { key: 'fa29ee023214d89bed7ceb205578f8be89e09337', class: "xplor-inline-date-picker__sidebar" }, h("div", { key: '556e7992f45d9bc4ad0b0b9dd1fdd08d4b69c5d9', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), h("div", { key: '0b581be2477f17c0d80dbce52fc2ad3d31e9b0a3', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), h("div", { key: 'd17c951c734d23365dce0c417e53e215a6d810c8', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), h("div", { key: '0829d8eac4d5300c425c0bc3540fb7e2a67a8127', class: "xplor-inline-date-picker__calendar" }, h("div", { key: '026c1ffc57ca6ebc8c81d9ca5168b06108fb98fa', class: "xplor-inline-date-picker__header" }, h("button", { key: 'a3093ab8152b08681ffb746bd2441e64ea0ad117', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), h("div", { key: '924e78c2f181360b899816a64403470029667876', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), h("button", { key: 'b9d70ec267b289f7c9c920eb12ee19b0f94d2852', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), h("div", { key: 'd9cddf3b2ec7a57d489fdc9dfb97a48b4e04836a', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (h("div", { class: "xplor-inline-date-picker__weekday" }, day)))), h("div", { key: 'bfed53b3822299f0c9c42f7662cff6b0e7dcdc48', class: "xplor-inline-date-picker__days", role: "grid" }, this.renderCalendarDays())))));
     }
     static get is() { return "xplor-inline-date-picker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-inline-switch/xplor-inline-switch.js

@@ -29,7 +29,7 @@ export class XplorInlineSwitch {
             'xplor-inline-switch--disabled': this.disabled,
             'xplor-inline-switch--checked': this.checked,
         };
-        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' }))));
+        return (h(Host, { key: '40c4b15ff78042a8ef5ee7055e10f694bfdd1157' }, h("label", { key: '2105c92c9277a8ba7c4b69a8f72678181bf5b1a8', class: containerClasses, style: { '--switch-color': this.color } }, h("input", { key: '4165706883a4b517e8c5413d7e1421fff1b96bac', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), h("span", { key: '94dab33872aee8012cd05101e8fbb69bd940b098', class: "xplor-inline-switch__track" }, h("span", { key: '82ef76b07835561676897ba35c268bb565a4150f', class: "xplor-inline-switch__thumb" })), this.label && h("span", { key: '1e0f0c5abf6f3c6af2d7313e750f29b03b42e4e9', class: "xplor-inline-switch__label" }, this.label), h("slot", { key: '6fcdc1730d652bcca0d5c629cc66266abb86574e' }))));
     }
     static get is() { return "xplor-inline-switch"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-input-file/xplor-input-file.js

@@ -77,7 +77,7 @@ export class XplorInputFile {
         };
         const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
         const additionalCount = this.selectedFiles.length - this.maxChips;
-        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")))));
+        return (h(Host, { key: '6046d07e1d0ffc22eb241e951c6adffad6c3e3de' }, h("div", { key: '7cedfc886300027a00eb38ac657c09b2445d37cf', class: containerClasses }, this.label && (h("label", { key: '2c0e0b16e4d2e9c4a7a49874a00a7ad9592021d1', class: "xplor-input-file__label", htmlFor: this.inputId }, this.label)), h("div", { key: '4aa03e8dd2c2b33ad6b21d5ff5e23f2f5777e7ed', class: "xplor-input-file__field" }, h("span", { key: '5e0ee10df523cf58f2b4858c2c3f7520734812ce', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: '30075554073f992c027c976bd776a70e55a54f96', 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: 'fedfcf641b1a9e11f86e1d8f24b1591d5d3b7324', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '51216edbb463cc891afe25cbb740fc9e39188bc6', 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: '1eb9aa1da01c8892326a270675f9e6c02548276c', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
     }
     static get is() { return "xplor-input-file"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-input-search/xplor-input-search.js

@@ -48,9 +48,9 @@ export class XplorInputSearch {
             'xplor-input-search--focused': this.isFocused,
             'xplor-input-search--disabled': this.disabled,
         };
-        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: {
+        return (h(Host, { key: '9a6ee3c5c790fd37995f34937090bd5400c87a3b' }, h("div", { key: 'e2dc574436c7acf421bbd1294a2eb2fed5449e88', class: containerClasses }, h("div", { key: 'aada1f1d2824b93e4595316a02a9dd7363b2afc0', class: "xplor-input-search__field" }, h("input", { key: 'ef5b78b7f259c38bcbf7757ea551a71db2a2e22c', 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,
-            }, 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" }))))))));
+            }, role: "searchbox", "aria-label": "Search" }), h("slot", { key: 'fd71c5fdbe26ca8a9a151ae6423d88736d145d61', name: "append-inner" }, h("button", { key: 'bba0473372fcf00b1499e73ed134ad8b0500b95f', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button", "aria-label": "Search" }, h("svg", { key: '6d5a1c9c1cf80194cc8451824e212e2b9d667ad6', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: '7907dad7eec82444844b1938437a9ad28946d5cb', 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 is() { return "xplor-input-search"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-input-select/xplor-input-select.js

@@ -223,7 +223,7 @@ export class XplorInputSelect {
         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: {
+        return (h(Host, { key: '19c2267c0d4185dcb92a346a876b55c3371c071f' }, h("div", { key: 'fd506ff00dfbf41d28537f0ca9e30d72729285d9', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (h("label", { key: '33bdce10e83128e2a742a274e3ff3d918b8b4e45', class: "xplor-input-select__label", id: labelId }, this.label, this.required && h("span", { key: '9326a0077c2acd34f2f4a123f79e3342f7610557', class: "xplor-input-select__required" }, "*"))), h("div", { key: '7d632eed242ac59dbe8d856d2c354149b83a51bf', 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: 'd07d43f99e57bec7338699b56d9bcf9f3e4b287a', class: "xplor-input-select__value" }, this.getDisplayValue()), h("span", { key: '342d784c9b51bb11aebef84ae658d2c5546e12d5', class: "xplor-input-select__arrow", "aria-hidden": "true" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (h("div", { key: '18d8c79f781f348e646771c274a7ec3fcc880fdf', 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`,
@@ -235,7 +235,7 @@ export class XplorInputSelect {
                     '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))))));
+        })))), showDetails && (h("div", { key: 'f2d51f7549e0fafdf125bf492cd3981e13a10ef9', class: "xplor-input-select__details" }, this.error && h("div", { key: '028e8f2d27dcfc3888f078c02311879a93935db4', class: "xplor-input-select__error-message", id: errorId, role: "alert" }, this.error), !this.error && this.helperText && h("div", { key: '200b65f2a002c6ba54a7d638e2cba2850bdf526f', class: "xplor-input-select__helper-text", id: helperId }, this.helperText))))));
     }
     static get is() { return "xplor-input-select"; }
     static get encapsulation() { return "scoped"; }
@@ -340,7 +340,7 @@ export class XplorInputSelect {
                     "references": {
                         "SelectOption": {
                             "location": "local",
-                            "path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-input-select/xplor-input-select.tsx",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-input-select/xplor-input-select.tsx",
                             "id": "src/components/xplor-input-select/xplor-input-select.tsx::SelectOption"
                         }
                     }

package/dist/collection/components/xplor-input-send/xplor-input-send.js

@@ -36,10 +36,10 @@ export class XplorInputSend {
         this.internalValue = this.value;
     }
     render() {
-        return (h(Host, { key: 'bcce41da602a265f2ee48f278e1f173dcb7a478c' }, h("div", { key: '5db92c3276ea1e021fa872d8f7b34e0c20b6d6ea', class: {
+        return (h(Host, { key: '856b9171408964c11a5ed8d7fc06bdf559e9d43b' }, h("div", { key: '1f53244b4bf383f38c76339736b40ccc6c74bd63', class: {
                 'input-send': true,
                 'input-send--disabled': this.disabled,
-            } }, h("input", { key: '9395e4d6f8190e3010fd9c0323a4a4c51643c998', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength, "aria-label": this.placeholder || 'Type a message' }), h("xplor-button", { key: 'f4d9784400fd7c31c2766af49fe3971216f5828f', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
+            } }, h("input", { key: 'ab7f0a797f7eb6e56516498abd0e5d29de0f9403', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength, "aria-label": this.placeholder || 'Type a message' }), h("xplor-button", { key: '2213d6749d7e8412061d6d6adc97b93b18c573cb', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
     }
     static get is() { return "xplor-input-send"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-input-text/xplor-input-text.css

@@ -273,12 +273,6 @@ ul.mdc-list li.mdc-list-item {
 .xplor-input-text {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-}
-.xplor-input-text__label {
-  font-size: 0.875rem;
-  color: rgba(0, 0, 0, 0.6);
-  margin-bottom: 0.25rem;
 }
 .xplor-input-text__required {
   color: #d32f2f;
@@ -289,6 +283,21 @@ ul.mdc-list li.mdc-list-item {
   display: flex;
   align-items: center;
 }
+.xplor-input-text__label {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  pointer-events: none;
+  padding: 0 0.25rem;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  max-width: calc(100% - 2rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .xplor-input-text__input {
   width: 100%;
   padding: 0.875rem 1rem;
@@ -297,18 +306,14 @@ ul.mdc-list li.mdc-list-item {
   border: 1px solid rgba(0, 0, 0, 0.23);
   border-radius: 1rem;
   outline: none;
-  transition: border-color 0.2s ease;
+  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  min-height: 3rem;
 }
 .xplor-input-text__input::placeholder {
   color: rgba(0, 0, 0, 0.38);
 }
 .xplor-input-text__input:hover:not(:disabled) {
-  border-color: rgba(0, 0, 0, 0.6);
-}
-.xplor-input-text__input:focus {
-  border-color: #008480;
-  border-width: 2px;
-  padding: calc(0.875rem - 1px) calc(1rem - 1px);
+  border-color: rgba(0, 0, 0, 0.87);
 }
 .xplor-input-text__input:disabled {
   background-color: rgba(0, 0, 0, 0.04);
@@ -318,9 +323,32 @@ ul.mdc-list li.mdc-list-item {
 .xplor-input-text__input:read-only {
   background-color: rgba(0, 0, 0, 0.04);
 }
+.xplor-input-text--floating .xplor-input-text__label {
+  top: 0;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+}
+.xplor-input-text--focused .xplor-input-text__input {
+  border-color: #008480;
+  border-width: 2px;
+  padding: calc(0.875rem - 1px) calc(1rem - 1px);
+}
+.xplor-input-text--focused .xplor-input-text__label {
+  color: #008480;
+}
 .xplor-input-text--error .xplor-input-text__input {
   border-color: #d32f2f;
 }
+.xplor-input-text--error .xplor-input-text__label {
+  color: #d32f2f;
+}
+.xplor-input-text--error.xplor-input-text--focused .xplor-input-text__input {
+  border-color: #d32f2f;
+  border-width: 2px;
+}
+.xplor-input-text--disabled .xplor-input-text__label {
+  color: rgba(0, 0, 0, 0.38);
+}
 .xplor-input-text__details {
   min-height: 1.25rem;
   padding: 0 1rem;

package/dist/collection/components/xplor-input-text/xplor-input-text.js

@@ -74,16 +74,19 @@ export class XplorInputText {
         };
     }
     render() {
+        const hasValue = this.value != null && this.value !== '';
+        const isFloating = this.isFocused || hasValue;
         const containerClasses = {
             'xplor-input-text': true,
             'xplor-input-text--focused': this.isFocused,
+            'xplor-input-text--floating': isFloating,
             'xplor-input-text--disabled': this.disabled,
             'xplor-input-text--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (h(Host, { key: 'c7da02996d0b420a58337eb30bec6d38fe9e395f' }, h("div", { key: '229582f2e17300332a14fd58ff60cd1a43d10f40', class: containerClasses }, this.label && (h("label", { key: '2fc2d7c76396e98397df42d6b793d070d061c918', class: "xplor-input-text__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '2bc7348d1a415a36aae485c61743b0fd3f98d363', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'f6f79203738d3827dbd06faaea60f94022d5d965', class: "xplor-input-text__field" }, h("input", { key: 'ff6a346441f195cd71c5e6c585fffd24b79ce181', id: this.inputId, type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+        return (h(Host, { key: '764b3d65709568ba47eed1daec32340a9f4ddf3a' }, h("div", { key: '50aa5c726722ac0a1406b1aeb6f4652b0021c93c', class: containerClasses }, h("div", { key: 'e6879bbf287bd46a2398ce21e877a93eec23ccca', class: "xplor-input-text__field" }, h("input", { key: '847eb323f86c24317a67ec95ff7091680b816f18', id: this.inputId, type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: isFloating ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 backgroundColor: this.bgColor,
-            }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), h("slot", { key: 'fa160af8991c46e7418960e2058d85a912aa182c', name: "append-inner" })), showDetails && (h("div", { key: 'bd131696fea277bcc3c727cb2a9a901a9c360f53', class: "xplor-input-text__details" }, this.error && h("div", { key: '7a5351abc5cb7ed0dc1a5a71262f86a34230020a', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '7457664c7a216c5c4a9c18de4030a76796dd97bc', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: '2acc8a1746276cb19b6d8a0b2dd0054a5fa7f6ac', name: "append" }))));
+            }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), this.label && (h("label", { key: '3f135039ab03449cad21ce93071bd7b597d65d40', class: "xplor-input-text__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && h("span", { key: 'a3d04091abd40736d9b3d00c8796355c4ae8bf30', class: "xplor-input-text__required" }, "*"))), h("slot", { key: '290d13fe4c82231ff3341c60f9bffb319ab686d0', name: "append-inner" })), showDetails && (h("div", { key: 'c38de9592f5a0520e8ac18aa64f4d88c9db9b62e', class: "xplor-input-text__details" }, this.error && h("div", { key: '3535de57296c0b265d701dac604bdf65c4bd6801', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '46003ab056e8677ef304a007610ff95b07434482', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: 'c4a0dda405f82c24df42e82b029ccc3e9cfcc7ad', name: "append" }))));
     }
     static get is() { return "xplor-input-text"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-input-text/xplor-input-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-input-text.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text/xplor-input-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputTextIdCounter = 0;\n\n@Component({\n  tag: 'xplor-input-text',\n  styleUrl: 'xplor-input-text.scss',\n  scoped: true,\n})\nexport class XplorInputText {\n  private inputId = `xplor-input-text-${++inputTextIdCounter}`;\n  private errorId = `${this.inputId}-error`;\n  private helperId = `${this.inputId}-helper`;\n  /**\n   * Input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Input type (text, email, password, number, etc.)\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\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 the input is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Whether to hide validation details\n   */\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n  /**\n   * Error message\n   */\n  @Prop() error: string = '';\n\n  /**\n   * Helper text\n   */\n  @Prop() helperText: string = '';\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Input event\n   */\n  @Event() xplorInput: EventEmitter<string>;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<string>;\n\n  /**\n   * Focus event\n   */\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Blur event\n   */\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\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    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.isFocused = true;\n    this.xplorFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.isFocused = false;\n    this.xplorBlur.emit(event);\n  };\n\n  render() {\n    const containerClasses = {\n      'xplor-input-text': true,\n      'xplor-input-text--focused': this.isFocused,\n      'xplor-input-text--disabled': this.disabled,\n      'xplor-input-text--error': !!this.error,\n    };\n\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {this.label && (\n            <label class=\"xplor-input-text__label\" htmlFor={this.inputId}>\n              {this.label}\n              {this.required && <span class=\"xplor-input-text__required\">*</span>}\n            </label>\n          )}\n\n          <div class=\"xplor-input-text__field\">\n            <input\n              id={this.inputId}\n              type={this.type}\n              class=\"xplor-input-text__input\"\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              style={{\n                backgroundColor: this.bgColor,\n              }}\n              aria-invalid={this.error ? 'true' : undefined}\n              aria-required={this.required ? 'true' : undefined}\n              aria-describedby={this.error ? this.errorId : this.helperText ? this.helperId : undefined}\n            />\n            <slot name=\"append-inner\" />\n          </div>\n\n          {showDetails && (\n            <div class=\"xplor-input-text__details\">\n              {this.error && <div class=\"xplor-input-text__error-message\" id={this.errorId}>{this.error}</div>}\n              {!this.error && this.helperText && <div class=\"xplor-input-text__helper-text\" id={this.helperId}>{this.helperText}</div>}\n            </div>\n          )}\n\n          <slot name=\"append\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xplor-input-text.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text/xplor-input-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputTextIdCounter = 0;\n\n@Component({\n  tag: 'xplor-input-text',\n  styleUrl: 'xplor-input-text.scss',\n  scoped: true,\n})\nexport class XplorInputText {\n  private inputId = `xplor-input-text-${++inputTextIdCounter}`;\n  private errorId = `${this.inputId}-error`;\n  private helperId = `${this.inputId}-helper`;\n  /**\n   * Input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Input type (text, email, password, number, etc.)\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * Background color\n   */\n  @Prop() bgColor: string = 'white';\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 the input is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Whether to hide validation details\n   */\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n  /**\n   * Error message\n   */\n  @Prop() error: string = '';\n\n  /**\n   * Helper text\n   */\n  @Prop() helperText: string = '';\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Input event\n   */\n  @Event() xplorInput: EventEmitter<string>;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<string>;\n\n  /**\n   * Focus event\n   */\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * Blur event\n   */\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\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    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.isFocused = true;\n    this.xplorFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.isFocused = false;\n    this.xplorBlur.emit(event);\n  };\n\n  render() {\n    const hasValue = this.value != null && this.value !== '';\n    const isFloating = this.isFocused || hasValue;\n\n    const containerClasses = {\n      'xplor-input-text': true,\n      'xplor-input-text--focused': this.isFocused,\n      'xplor-input-text--floating': isFloating,\n      'xplor-input-text--disabled': this.disabled,\n      'xplor-input-text--error': !!this.error,\n    };\n\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"xplor-input-text__field\">\n            <input\n              id={this.inputId}\n              type={this.type}\n              class=\"xplor-input-text__input\"\n              value={this.value}\n              placeholder={isFloating ? this.placeholder : ''}\n              disabled={this.disabled}\n              readonly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n              style={{\n                backgroundColor: this.bgColor,\n              }}\n              aria-invalid={this.error ? 'true' : undefined}\n              aria-required={this.required ? 'true' : undefined}\n              aria-describedby={this.error ? this.errorId : this.helperText ? this.helperId : undefined}\n            />\n            {this.label && (\n              <label\n                class=\"xplor-input-text__label\"\n                htmlFor={this.inputId}\n                style={{ backgroundColor: this.bgColor }}\n              >\n                {this.label}\n                {this.required && <span class=\"xplor-input-text__required\">*</span>}\n              </label>\n            )}\n            <slot name=\"append-inner\" />\n          </div>\n\n          {showDetails && (\n            <div class=\"xplor-input-text__details\">\n              {this.error && <div class=\"xplor-input-text__error-message\" id={this.errorId}>{this.error}</div>}\n              {!this.error && this.helperText && <div class=\"xplor-input-text__helper-text\" id={this.helperId}>{this.helperText}</div>}\n            </div>\n          )}\n\n          <slot name=\"append\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}