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

package/components/xplor-date-picker.js

@@ -1,8 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-BaDLDCH5.js';
+import { d as defineCustomElement$2 } from './p-DURNLP66.js';
 
 const xplorDatePickerCss = "@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-date-picker {\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-date-picker {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-date-picker {\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-date-picker {\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-date-picker {\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-date-picker {\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-date-picker, ul.sc-xplor-date-picker {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-date-picker li.sc-xplor-date-picker, ul.sc-xplor-date-picker li.sc-xplor-date-picker {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-date-picker, ul.mdc-list.sc-xplor-date-picker {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-date-picker li.mdc-list-item.sc-xplor-date-picker, ul.mdc-list.sc-xplor-date-picker li.mdc-list-item.sc-xplor-date-picker {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-date-picker {\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-date-picker {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-date-picker {\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-date-picker {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-date-picker .mdc-text-field--outlined.sc-xplor-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\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-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-date-picker .mdc-notched-outline.sc-xplor-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-date-picker {\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-date-picker:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-date-picker {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-date-picker-h {\n  display: block;\n  width: 100%;\n}\n\n.date-picker.sc-xplor-date-picker {\n  position: relative;\n  width: 100%;\n}\n.date-picker--disabled.sc-xplor-date-picker {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.date-picker__label.sc-xplor-date-picker {\n  display: block;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.date-picker__required.sc-xplor-date-picker {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.date-picker__field.sc-xplor-date-picker {\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  transition: border-color 0.2s ease;\n  background: white;\n}\n.date-picker__field.sc-xplor-date-picker:focus-within {\n  border-color: #008480;\n  border-width: 2px;\n}\n.date-picker__field.sc-xplor-date-picker:focus-within .date-picker__input.sc-xplor-date-picker {\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.date-picker--error.sc-xplor-date-picker .date-picker__field.sc-xplor-date-picker {\n  border-color: #d32f2f;\n}\n.date-picker__input.sc-xplor-date-picker {\n  flex: 1;\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: none;\n  border-radius: 1rem;\n  outline: none;\n  background: transparent;\n}\n.date-picker__input.sc-xplor-date-picker::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.date-picker__input.sc-xplor-date-picker:disabled {\n  cursor: not-allowed;\n}\n.date-picker__actions.sc-xplor-date-picker {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding-right: 0.5rem;\n  flex-shrink: 0;\n}\n.date-picker__clear.sc-xplor-date-picker {\n  background: none;\n  border: none;\n  font-size: 1.25rem;\n  cursor: pointer;\n  padding: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.date-picker__clear.sc-xplor-date-picker:hover {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n.date-picker__icon-btn.sc-xplor-date-picker {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.date-picker__icon-btn.sc-xplor-date-picker:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n.date-picker__icon-btn.sc-xplor-date-picker:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.date-picker__icon-svg.sc-xplor-date-picker {\n  display: block;\n}\n.date-picker__text-display.sc-xplor-date-picker {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 4px;\n  color: #008480;\n  font-size: 1rem;\n  transition: background-color 0.2s;\n}\n.date-picker__text-display.sc-xplor-date-picker:hover {\n  background-color: rgba(0, 132, 128, 0.08);\n}\n.date-picker__text-value.sc-xplor-date-picker {\n  text-decoration: underline;\n}\n.date-picker__dropdown.sc-xplor-date-picker {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 1000;\n  background-color: #fff;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n.date-picker__dropdown--top.sc-xplor-date-picker {\n  top: auto;\n  bottom: calc(100% + 4px);\n}\n.date-picker__details.sc-xplor-date-picker {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.date-picker__error-message.sc-xplor-date-picker {\n  color: #d32f2f;\n}";
 
+let datePickerIdCounter = 0;
 const XplorDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatePicker extends H {
     constructor() {
         super();
@@ -38,6 +39,9 @@ const XplorDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatePicker
         this.isOpen = false;
         this.inputText = '';
         this.dropdownPosition = 'bottom';
+        this.inputId = `xplor-date-picker-${++datePickerIdCounter}`;
+        this.labelId = `${this.inputId}-label`;
+        this.errorId = `${this.inputId}-error`;
         this.toggleDropdown = () => {
             if (this.disabled || this.readonly)
                 return;
@@ -203,16 +207,16 @@ const XplorDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class XplorDatePicker
     }
     render() {
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
-        const calendarIcon = (h("svg", { key: '9a8e37792f14af7af7f14ec86602b5c9bfb28b56', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'bfbc6e0022ea0c4d5d9ebd49636d9d8b32c2d32c', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: '0d1fd4f951edd7bf388709e4db248d1421c67832', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '0995228bc198c5a09de2c9213a4713c2b3e3f054', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: 'c938471721e6e72b25cbc7d46ddf823f5a37bfe5', x1: "3", y1: "10", x2: "21", y2: "10" })));
-        return (h(Host, { key: '5acf3baf9f4d5cece68b25339a68a05f572a1bb9' }, h("div", { key: 'b1c2d84e87ab4d99a1af317397c6b442fbb49f93', class: {
+        const calendarIcon = (h("svg", { key: '8e3f3be13346ec15a3e4e2a9e9ccf3481cf8c87b', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: '1f5d918d65a44a7b8f9dec0609ef125c96b1ccdf', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), h("line", { key: 'd2a5ccfbe2e4afe8ed5d9277c49b09169c6ae651', x1: "16", y1: "2", x2: "16", y2: "6" }), h("line", { key: '8d114a93b8f1c4d8fc65360f34afaecc14148328', x1: "8", y1: "2", x2: "8", y2: "6" }), h("line", { key: '40b3ab407c3872d6eda481a64f8210b505e202cc', x1: "3", y1: "10", x2: "21", y2: "10" })));
+        return (h(Host, { key: '7c04e985b0a900863965311e69a336d859852e66' }, h("div", { key: '15b17203d293c694130493bf45b8bd6d38c7bd36', class: {
                 'date-picker': true,
                 'date-picker--disabled': this.disabled,
                 'date-picker--error': !!this.error,
                 'date-picker--open': this.isOpen,
-            } }, this.label && (h("label", { key: '94d43b8d44f60806824f4ef72fe4cb0113441351', class: "date-picker__label" }, this.label, this.required && h("span", { key: '2ae8a33b2a46d7e81a990368390f52c167879013', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (h("div", { key: 'eff419a0def4d85e0df8e3182132eeeb57454cef', class: "date-picker__details" }, this.error && h("div", { key: '554878b0d415e16dd8715f58db0da94259a2e3c8', class: "date-picker__error-message" }, this.error))), this.isOpen && (h("div", { key: '75ec84dd8849b3007cb4f99b73098e52b458a476', class: {
+            } }, this.label && (h("label", { key: 'e9e03dde337f9c2259611f1f1f4748bb92d86cfb', class: "date-picker__label", id: this.labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: '4e68d0071f5224c9fc30df8864898a4906f6efba', class: "date-picker__required" }, "*"))), this.display === 'text' ? (h("div", { class: "date-picker__text-display", onClick: this.handleTextClick, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", role: "button", tabIndex: 0 }, h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (h("div", { class: "date-picker__field" }, h("input", { id: this.inputId, type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor }, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-describedby": this.error ? this.errorId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }), h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (h("div", { key: '4e9fd12626bf5436604e28a236a304d60c452b50', class: "date-picker__details" }, this.error && h("div", { key: 'a40425ac84ee81671f4289f4323db9a9a472d3c7', class: "date-picker__error-message", id: this.errorId }, this.error))), this.isOpen && (h("div", { key: '86c55873b678dcfe74c09475cbde7657f1983799', class: {
                 'date-picker__dropdown': true,
                 'date-picker__dropdown--top': this.dropdownPosition === 'top',
-            } }, h("xplor-inline-date-picker", { key: '74c870356063103474e60245888b8b2ae67fcd1a', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
+            } }, h("xplor-inline-date-picker", { key: 'bd1636e13522a65ea6377857edea2928a6182282', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
     }
     get el() { return this; }
     static get style() { return xplorDatePickerCss; }

package/components/xplor-date-picker.js.map

@@ -1 +1 @@
-{"file":"xplor-date-picker.js","mappings":"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","names":["XplorDatePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-date-picker/xplor-date-picker.scss?tag=xplor-date-picker&encapsulation=scoped","src/components/xplor-date-picker/xplor-date-picker.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.date-picker {\n  position: relative;\n  width: 100%;\n\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &__label {\n    display: block;\n    font-size: 0.875rem;\n    color: rgba(0, 0, 0, 0.6);\n    margin-bottom: 0.25rem;\n  }\n\n  &__required {\n    color: #d32f2f;\n    margin-left: 0.25rem;\n  }\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    transition: border-color 0.2s ease;\n    background: white;\n\n    &:focus-within {\n      border-color: #008480;\n      border-width: 2px;\n\n      .date-picker__input {\n        padding: calc(0.875rem - 1px) calc(1rem - 1px);\n      }\n    }\n  }\n\n  &--error &__field {\n    border-color: #d32f2f;\n  }\n\n  &__input {\n    flex: 1;\n    width: 100%;\n    padding: 0.875rem 1rem;\n    font-size: 1rem;\n    font-family: inherit;\n    border: none;\n    border-radius: 1rem;\n    outline: none;\n    background: transparent;\n\n    &::placeholder {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding-right: 0.5rem;\n    flex-shrink: 0;\n  }\n\n  &__clear {\n    background: none;\n    border: none;\n    font-size: 1.25rem;\n    cursor: pointer;\n    padding: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #757575;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n\n    &:hover {\n      background-color: #f5f5f5;\n      color: #212121;\n    }\n  }\n\n  &__icon-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #757575;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n\n    &:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      color: #212121;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  }\n\n  &__icon-svg {\n    display: block;\n  }\n\n  &__text-display {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    cursor: pointer;\n    padding: 0.5rem;\n    border-radius: 4px;\n    color: #008480;\n    font-size: 1rem;\n    transition: background-color 0.2s;\n\n    &:hover {\n      background-color: rgba(0, 132, 128, 0.08);\n    }\n  }\n\n  &__text-value {\n    text-decoration: underline;\n  }\n\n  &__dropdown {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: 1000;\n    background-color: #fff;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n\n    &--top {\n      top: auto;\n      bottom: calc(100% + 4px);\n    }\n  }\n\n  &__details {\n    min-height: 1.25rem;\n    padding: 0 1rem;\n    font-size: 0.75rem;\n  }\n\n  &__error-message {\n    color: #d32f2f;\n  }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-date-picker',\n  styleUrl: 'xplor-date-picker.scss',\n  scoped: true,\n})\nexport class XplorDatePicker {\n  @Element() el: HTMLElement;\n\n  /** Selected date in YYYY-MM-DD format */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop() label: string = '';\n  @Prop() placeholder: string = 'Select date';\n\n  /** 'date' or 'month' */\n  @Prop() type: 'date' | 'month' = 'date';\n\n  /** For month type: select start or end of month */\n  @Prop() monthType: 'start' | 'end' = 'start';\n\n  /** 'input' shows text input, 'text' shows clickable text */\n  @Prop() display: 'input' | 'text' = 'input';\n\n  /** Date display format: 'short' (DD/MM/YYYY), 'long' (1 Jan 2025), 'iso' (YYYY-MM-DD) */\n  @Prop() dateFormat: 'short' | 'long' | 'iso' = 'short';\n\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() readonly: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() clearable: boolean = false;\n  @Prop() closeOnSelect: boolean = true;\n  @Prop() bgColor: string = 'white';\n  @Prop() color: string = '#008480';\n  @Prop() startWeekOnSunday: boolean = true;\n  @Prop() error: string = '';\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n  @Prop() required: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() inputText: string = '';\n  @State() dropdownPosition: 'bottom' | 'top' = 'bottom';\n\n  @Event() dateChange: EventEmitter<string>;\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\n  @Event() xplorClear: EventEmitter<void>;\n\n  componentWillLoad() {\n    if (this.value) {\n      this.inputText = this.formatDateForDisplay(this.value);\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const target = event.target as Node;\n    if (!this.el.contains(target)) {\n      this.isOpen = false;\n    }\n  }\n\n  /** Parse YYYY-MM-DD safely without UTC shift */\n  private parseISODate(iso: string): Date | null {\n    if (!iso) return null;\n    const d = new Date(iso + 'T00:00:00');\n    return isNaN(d.getTime()) ? null : d;\n  }\n\n  private formatDateForDisplay(iso: string): string {\n    const date = this.parseISODate(iso);\n    if (!date) return iso;\n\n    if (this.type === 'month') {\n      return new Intl.DateTimeFormat('en-AU', { month: 'long', year: 'numeric' }).format(date);\n    }\n\n    switch (this.dateFormat) {\n      case 'long':\n        return new Intl.DateTimeFormat('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);\n      case 'iso':\n        return iso;\n      case 'short':\n      default:\n        return new Intl.DateTimeFormat('en-AU', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);\n    }\n  }\n\n  private toISO(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${day}`;\n  }\n\n  /** Parse user-typed text into YYYY-MM-DD */\n  private parseInputText(text: string): string | null {\n    const trimmed = text.trim();\n    if (!trimmed) return null;\n\n    // Try DD/MM/YYYY\n    const slashMatch = trimmed.match(/^(\\d{1,2})[/\\-.](\\d{1,2})[/\\-.](\\d{4})$/);\n    if (slashMatch) {\n      const day = parseInt(slashMatch[1], 10);\n      const month = parseInt(slashMatch[2], 10);\n      const year = parseInt(slashMatch[3], 10);\n      const d = new Date(year, month - 1, day);\n      if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {\n        return this.toISO(d);\n      }\n    }\n\n    // Try YYYY-MM-DD\n    const isoMatch = trimmed.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);\n    if (isoMatch) {\n      const year = parseInt(isoMatch[1], 10);\n      const month = parseInt(isoMatch[2], 10);\n      const day = parseInt(isoMatch[3], 10);\n      const d = new Date(year, month - 1, day);\n      if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {\n        return this.toISO(d);\n      }\n    }\n\n    // Try natural string via Date.parse\n    const d = new Date(trimmed);\n    if (!isNaN(d.getTime())) {\n      return this.toISO(d);\n    }\n\n    return null;\n  }\n\n  private isDateInRange(iso: string): boolean {\n    if (!iso) return true;\n    if (this.min && iso < this.min) return false;\n    if (this.max && iso > this.max) return false;\n    return true;\n  }\n\n  private updateDropdownPosition() {\n    const rect = this.el.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    this.dropdownPosition = spaceBelow < 350 ? 'top' : 'bottom';\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled || this.readonly) return;\n    this.updateDropdownPosition();\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleInputFocus = (event: FocusEvent) => {\n    this.xplorFocus.emit(event);\n  };\n\n  private handleInputBlur = (event: FocusEvent) => {\n    this.xplorBlur.emit(event);\n    // Try to parse typed text\n    const parsed = this.parseInputText(this.inputText);\n    if (parsed && this.isDateInRange(parsed)) {\n      this.value = parsed;\n      this.inputText = this.formatDateForDisplay(parsed);\n      this.dateChange.emit(parsed);\n    } else if (this.value) {\n      // Revert to current value display\n      this.inputText = this.formatDateForDisplay(this.value);\n    } else {\n      this.inputText = '';\n    }\n  };\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputText = input.value;\n  };\n\n  private handleDateSelected = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    const iso = event.detail;\n    if (!this.isDateInRange(iso)) return;\n\n    if (this.type === 'month') {\n      const d = this.parseISODate(iso);\n      if (d) {\n        let finalDate: Date;\n        if (this.monthType === 'end') {\n          finalDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);\n        } else {\n          finalDate = new Date(d.getFullYear(), d.getMonth(), 1);\n        }\n        const finalIso = this.toISO(finalDate);\n        this.value = finalIso;\n        this.inputText = this.formatDateForDisplay(finalIso);\n        this.dateChange.emit(finalIso);\n      }\n    } else {\n      this.value = iso;\n      this.inputText = this.formatDateForDisplay(iso);\n      this.dateChange.emit(iso);\n    }\n\n    if (this.closeOnSelect) {\n      this.isOpen = false;\n    }\n  };\n\n  private handleClear = (event: Event) => {\n    event.stopPropagation();\n    this.value = '';\n    this.inputText = '';\n    this.dateChange.emit('');\n    this.xplorClear.emit();\n  };\n\n  private handleTextClick = () => {\n    if (this.disabled || this.readonly) return;\n    this.updateDropdownPosition();\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);\n\n    const calendarIcon = (\n      <svg class=\"date-picker__icon-svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n      </svg>\n    );\n\n    return (\n      <Host>\n        <div class={{\n          'date-picker': true,\n          'date-picker--disabled': this.disabled,\n          'date-picker--error': !!this.error,\n          'date-picker--open': this.isOpen,\n        }}>\n          {this.label && (\n            <label class=\"date-picker__label\">\n              {this.label}\n              {this.required && <span class=\"date-picker__required\">*</span>}\n            </label>\n          )}\n\n          {this.display === 'text' ? (\n            <div class=\"date-picker__text-display\" onClick={this.handleTextClick}>\n              <span class=\"date-picker__text-value\">\n                {this.value ? this.formatDateForDisplay(this.value) : this.placeholder}\n              </span>\n              {calendarIcon}\n            </div>\n          ) : (\n            <div class=\"date-picker__field\">\n              <input\n                type=\"text\"\n                class=\"date-picker__input\"\n                value={this.inputText}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                onFocus={this.handleInputFocus}\n                onBlur={this.handleInputBlur}\n                onInput={this.handleInputChange}\n                style={{ backgroundColor: this.bgColor }}\n              />\n              <div class=\"date-picker__actions\">\n                {this.clearable && this.value && !this.disabled && !this.readonly && (\n                  <button type=\"button\" class=\"date-picker__clear\" onClick={this.handleClear} aria-label=\"Clear\">\n                    ×\n                  </button>\n                )}\n                <button type=\"button\" class=\"date-picker__icon-btn\" onClick={this.toggleDropdown} disabled={this.disabled} aria-label=\"Open calendar\">\n                  {calendarIcon}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {showDetails && (\n            <div class=\"date-picker__details\">\n              {this.error && <div class=\"date-picker__error-message\">{this.error}</div>}\n            </div>\n          )}\n\n          {this.isOpen && (\n            <div class={{\n              'date-picker__dropdown': true,\n              'date-picker__dropdown--top': this.dropdownPosition === 'top',\n            }}>\n              <xplor-inline-date-picker\n                selectedDate={this.value}\n                min={this.min}\n                max={this.max}\n                readonly={this.readonly}\n                color={this.color}\n                startWeekOnSunday={this.startWeekOnSunday}\n                onDateSelected={this.handleDateSelected}\n              ></xplor-inline-date-picker>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"xplor-date-picker.js","mappings":"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","names":["XplorDatePicker","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-date-picker/xplor-date-picker.scss?tag=xplor-date-picker&encapsulation=scoped","src/components/xplor-date-picker/xplor-date-picker.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.date-picker {\n  position: relative;\n  width: 100%;\n\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &__label {\n    display: block;\n    font-size: 0.875rem;\n    color: rgba(0, 0, 0, 0.6);\n    margin-bottom: 0.25rem;\n  }\n\n  &__required {\n    color: #d32f2f;\n    margin-left: 0.25rem;\n  }\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    transition: border-color 0.2s ease;\n    background: white;\n\n    &:focus-within {\n      border-color: #008480;\n      border-width: 2px;\n\n      .date-picker__input {\n        padding: calc(0.875rem - 1px) calc(1rem - 1px);\n      }\n    }\n  }\n\n  &--error &__field {\n    border-color: #d32f2f;\n  }\n\n  &__input {\n    flex: 1;\n    width: 100%;\n    padding: 0.875rem 1rem;\n    font-size: 1rem;\n    font-family: inherit;\n    border: none;\n    border-radius: 1rem;\n    outline: none;\n    background: transparent;\n\n    &::placeholder {\n      color: rgba(0, 0, 0, 0.38);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  &__actions {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding-right: 0.5rem;\n    flex-shrink: 0;\n  }\n\n  &__clear {\n    background: none;\n    border: none;\n    font-size: 1.25rem;\n    cursor: pointer;\n    padding: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #757575;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n\n    &:hover {\n      background-color: #f5f5f5;\n      color: #212121;\n    }\n  }\n\n  &__icon-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #757575;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n\n    &:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      color: #212121;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  }\n\n  &__icon-svg {\n    display: block;\n  }\n\n  &__text-display {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    cursor: pointer;\n    padding: 0.5rem;\n    border-radius: 4px;\n    color: #008480;\n    font-size: 1rem;\n    transition: background-color 0.2s;\n\n    &:hover {\n      background-color: rgba(0, 132, 128, 0.08);\n    }\n  }\n\n  &__text-value {\n    text-decoration: underline;\n  }\n\n  &__dropdown {\n    position: absolute;\n    top: calc(100% + 4px);\n    left: 0;\n    z-index: 1000;\n    background-color: #fff;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n\n    &--top {\n      top: auto;\n      bottom: calc(100% + 4px);\n    }\n  }\n\n  &__details {\n    min-height: 1.25rem;\n    padding: 0 1rem;\n    font-size: 0.75rem;\n  }\n\n  &__error-message {\n    color: #d32f2f;\n  }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nlet datePickerIdCounter = 0;\n\n@Component({\n  tag: 'xplor-date-picker',\n  styleUrl: 'xplor-date-picker.scss',\n  scoped: true,\n})\nexport class XplorDatePicker {\n  @Element() el: HTMLElement;\n\n  /** Selected date in YYYY-MM-DD format */\n  @Prop({ mutable: true }) value: string = '';\n\n  @Prop() label: string = '';\n  @Prop() placeholder: string = 'Select date';\n\n  /** 'date' or 'month' */\n  @Prop() type: 'date' | 'month' = 'date';\n\n  /** For month type: select start or end of month */\n  @Prop() monthType: 'start' | 'end' = 'start';\n\n  /** 'input' shows text input, 'text' shows clickable text */\n  @Prop() display: 'input' | 'text' = 'input';\n\n  /** Date display format: 'short' (DD/MM/YYYY), 'long' (1 Jan 2025), 'iso' (YYYY-MM-DD) */\n  @Prop() dateFormat: 'short' | 'long' | 'iso' = 'short';\n\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() readonly: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() clearable: boolean = false;\n  @Prop() closeOnSelect: boolean = true;\n  @Prop() bgColor: string = 'white';\n  @Prop() color: string = '#008480';\n  @Prop() startWeekOnSunday: boolean = true;\n  @Prop() error: string = '';\n  @Prop() hideDetails: boolean | 'auto' = 'auto';\n  @Prop() required: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() inputText: string = '';\n  @State() dropdownPosition: 'bottom' | 'top' = 'bottom';\n\n  private inputId = `xplor-date-picker-${++datePickerIdCounter}`;\n  private labelId = `${this.inputId}-label`;\n  private errorId = `${this.inputId}-error`;\n\n  @Event() dateChange: EventEmitter<string>;\n  @Event() xplorFocus: EventEmitter<FocusEvent>;\n  @Event() xplorBlur: EventEmitter<FocusEvent>;\n  @Event() xplorClear: EventEmitter<void>;\n\n  componentWillLoad() {\n    if (this.value) {\n      this.inputText = this.formatDateForDisplay(this.value);\n    }\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const target = event.target as Node;\n    if (!this.el.contains(target)) {\n      this.isOpen = false;\n    }\n  }\n\n  /** Parse YYYY-MM-DD safely without UTC shift */\n  private parseISODate(iso: string): Date | null {\n    if (!iso) return null;\n    const d = new Date(iso + 'T00:00:00');\n    return isNaN(d.getTime()) ? null : d;\n  }\n\n  private formatDateForDisplay(iso: string): string {\n    const date = this.parseISODate(iso);\n    if (!date) return iso;\n\n    if (this.type === 'month') {\n      return new Intl.DateTimeFormat('en-AU', { month: 'long', year: 'numeric' }).format(date);\n    }\n\n    switch (this.dateFormat) {\n      case 'long':\n        return new Intl.DateTimeFormat('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }).format(date);\n      case 'iso':\n        return iso;\n      case 'short':\n      default:\n        return new Intl.DateTimeFormat('en-AU', { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);\n    }\n  }\n\n  private toISO(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${day}`;\n  }\n\n  /** Parse user-typed text into YYYY-MM-DD */\n  private parseInputText(text: string): string | null {\n    const trimmed = text.trim();\n    if (!trimmed) return null;\n\n    // Try DD/MM/YYYY\n    const slashMatch = trimmed.match(/^(\\d{1,2})[/\\-.](\\d{1,2})[/\\-.](\\d{4})$/);\n    if (slashMatch) {\n      const day = parseInt(slashMatch[1], 10);\n      const month = parseInt(slashMatch[2], 10);\n      const year = parseInt(slashMatch[3], 10);\n      const d = new Date(year, month - 1, day);\n      if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {\n        return this.toISO(d);\n      }\n    }\n\n    // Try YYYY-MM-DD\n    const isoMatch = trimmed.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);\n    if (isoMatch) {\n      const year = parseInt(isoMatch[1], 10);\n      const month = parseInt(isoMatch[2], 10);\n      const day = parseInt(isoMatch[3], 10);\n      const d = new Date(year, month - 1, day);\n      if (d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day) {\n        return this.toISO(d);\n      }\n    }\n\n    // Try natural string via Date.parse\n    const d = new Date(trimmed);\n    if (!isNaN(d.getTime())) {\n      return this.toISO(d);\n    }\n\n    return null;\n  }\n\n  private isDateInRange(iso: string): boolean {\n    if (!iso) return true;\n    if (this.min && iso < this.min) return false;\n    if (this.max && iso > this.max) return false;\n    return true;\n  }\n\n  private updateDropdownPosition() {\n    const rect = this.el.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    this.dropdownPosition = spaceBelow < 350 ? 'top' : 'bottom';\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled || this.readonly) return;\n    this.updateDropdownPosition();\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleInputFocus = (event: FocusEvent) => {\n    this.xplorFocus.emit(event);\n  };\n\n  private handleInputBlur = (event: FocusEvent) => {\n    this.xplorBlur.emit(event);\n    // Try to parse typed text\n    const parsed = this.parseInputText(this.inputText);\n    if (parsed && this.isDateInRange(parsed)) {\n      this.value = parsed;\n      this.inputText = this.formatDateForDisplay(parsed);\n      this.dateChange.emit(parsed);\n    } else if (this.value) {\n      // Revert to current value display\n      this.inputText = this.formatDateForDisplay(this.value);\n    } else {\n      this.inputText = '';\n    }\n  };\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.inputText = input.value;\n  };\n\n  private handleDateSelected = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    const iso = event.detail;\n    if (!this.isDateInRange(iso)) return;\n\n    if (this.type === 'month') {\n      const d = this.parseISODate(iso);\n      if (d) {\n        let finalDate: Date;\n        if (this.monthType === 'end') {\n          finalDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);\n        } else {\n          finalDate = new Date(d.getFullYear(), d.getMonth(), 1);\n        }\n        const finalIso = this.toISO(finalDate);\n        this.value = finalIso;\n        this.inputText = this.formatDateForDisplay(finalIso);\n        this.dateChange.emit(finalIso);\n      }\n    } else {\n      this.value = iso;\n      this.inputText = this.formatDateForDisplay(iso);\n      this.dateChange.emit(iso);\n    }\n\n    if (this.closeOnSelect) {\n      this.isOpen = false;\n    }\n  };\n\n  private handleClear = (event: Event) => {\n    event.stopPropagation();\n    this.value = '';\n    this.inputText = '';\n    this.dateChange.emit('');\n    this.xplorClear.emit();\n  };\n\n  private handleTextClick = () => {\n    if (this.disabled || this.readonly) return;\n    this.updateDropdownPosition();\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n    const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);\n\n    const calendarIcon = (\n      <svg class=\"date-picker__icon-svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n      </svg>\n    );\n\n    return (\n      <Host>\n        <div class={{\n          'date-picker': true,\n          'date-picker--disabled': this.disabled,\n          'date-picker--error': !!this.error,\n          'date-picker--open': this.isOpen,\n        }}>\n          {this.label && (\n            <label class=\"date-picker__label\" id={this.labelId} htmlFor={this.inputId}>\n              {this.label}\n              {this.required && <span class=\"date-picker__required\">*</span>}\n            </label>\n          )}\n\n          {this.display === 'text' ? (\n            <div\n              class=\"date-picker__text-display\"\n              onClick={this.handleTextClick}\n              aria-expanded={this.isOpen ? 'true' : 'false'}\n              aria-haspopup=\"dialog\"\n              role=\"button\"\n              tabIndex={0}\n            >\n              <span class=\"date-picker__text-value\">\n                {this.value ? this.formatDateForDisplay(this.value) : this.placeholder}\n              </span>\n              {calendarIcon}\n            </div>\n          ) : (\n            <div class=\"date-picker__field\">\n              <input\n                id={this.inputId}\n                type=\"text\"\n                class=\"date-picker__input\"\n                value={this.inputText}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                onFocus={this.handleInputFocus}\n                onBlur={this.handleInputBlur}\n                onInput={this.handleInputChange}\n                style={{ backgroundColor: this.bgColor }}\n                aria-expanded={this.isOpen ? 'true' : 'false'}\n                aria-haspopup=\"dialog\"\n                aria-describedby={this.error ? this.errorId : undefined}\n                aria-invalid={this.error ? 'true' : undefined}\n                aria-required={this.required ? 'true' : undefined}\n              />\n              <div class=\"date-picker__actions\">\n                {this.clearable && this.value && !this.disabled && !this.readonly && (\n                  <button type=\"button\" class=\"date-picker__clear\" onClick={this.handleClear} aria-label=\"Clear\">\n                    ×\n                  </button>\n                )}\n                <button type=\"button\" class=\"date-picker__icon-btn\" onClick={this.toggleDropdown} disabled={this.disabled} aria-label=\"Open calendar\">\n                  {calendarIcon}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {showDetails && (\n            <div class=\"date-picker__details\">\n              {this.error && <div class=\"date-picker__error-message\" id={this.errorId}>{this.error}</div>}\n            </div>\n          )}\n\n          {this.isOpen && (\n            <div class={{\n              'date-picker__dropdown': true,\n              'date-picker__dropdown--top': this.dropdownPosition === 'top',\n            }}>\n              <xplor-inline-date-picker\n                selectedDate={this.value}\n                min={this.min}\n                max={this.max}\n                readonly={this.readonly}\n                color={this.color}\n                startWeekOnSunday={this.startWeekOnSunday}\n                onDateSelected={this.handleDateSelected}\n              ></xplor-inline-date-picker>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-CBSi5kQB.js';
+import { d as defineCustomElement$2 } from './p-Bs_ocvfe.js';
 
 const xplorDragAndDropInputCss = "@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-drag-and-drop-input {\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-drag-and-drop-input {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input {\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-drag-and-drop-input {\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-drag-and-drop-input {\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-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n  display: block;\n}\n\n.drag-drop-zone.sc-xplor-drag-and-drop-input {\n  position: relative;\n  padding-bottom: 2.5rem;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n  display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n  background-color: #f5f5f5;\n  border-radius: 8px;\n  border: 2px dashed var(--color-secondary);\n  min-height: 160px;\n  padding: 1rem 1.5rem 2rem;\n  text-align: center;\n  transition: all 0.2s ease;\n  cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n  border-color: var(--color-secondary);\n  background-color: #eeeeee;\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n  border: 2px dashed var(--color-secondary);\n  background-color: #eeeeee;\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0 0;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n  color: var(--color-secondary);\n  width: 40px;\n  height: 40px;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0;\n  margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n}\n\n.file-info.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n}\n\n.file-info__status.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: #616161;\n  margin: 0 0 0.5rem 0;\n}\n\n.file-info__card.sc-xplor-drag-and-drop-input {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  background-color: #ffffff;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 0.75rem 1rem;\n}\n\n.file-info__icon.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  background-color: var(--color-secondary-50, #f3e5f5);\n  color: var(--color-secondary);\n}\n\n.file-info__details.sc-xplor-drag-and-drop-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.file-info__name.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  color: #000000;\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-info__meta.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: var(--color-secondary);\n  margin: 0.25rem 0 0 0;\n}\n\n.file-info__progress-row.sc-xplor-drag-and-drop-input {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n.file-info__progress-bar.sc-xplor-drag-and-drop-input {\n  flex: 1;\n  height: 6px;\n  background-color: #eeeeee;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.file-info__progress-fill.sc-xplor-drag-and-drop-input {\n  height: 100%;\n  background-color: var(--color-secondary);\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n\n.file-info__progress-text.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: #757575;\n  flex-shrink: 0;\n  min-width: 32px;\n  text-align: right;\n}\n\n.file-info__remove.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: none;\n  background-color: #eeeeee;\n  color: #757575;\n  cursor: pointer;\n  padding: 0;\n  transition: background-color 0.2s ease;\n}\n.file-info__remove.sc-xplor-drag-and-drop-input:hover {\n  background-color: #e0e0e0;\n  color: #424242;\n}\n\n@media (max-width: 768px) {\n  .drag-drop-card.sc-xplor-drag-and-drop-input {\n    min-height: 140px;\n  }\n  .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n    font-size: 16px;\n    line-height: 22px;\n  }\n  .drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n    font-size: 13px;\n    line-height: 18px;\n  }\n}";
 
@@ -125,13 +125,15 @@ const XplorDragAndDropInput$1 = /*@__PURE__*/ proxyCustomElement(class XplorDrag
         this.fileClear.emit();
     }
     render() {
-        return (h(Host, { key: '1996cf8e0d65afed803bb07a2f7a54adb5bbfaa5' }, h("div", { key: '6fcf52a709e3d6b7e64583f201260e1841076cef', class: "drag-drop-zone" }, h("div", { key: 'a9c8bd35981166cf075bd9f0d215914ff87a0ff0', class: {
+        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: {
                 '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 }, h("div", { key: 'eec73d07cce31d43151a6af27a584f764cf104ec', class: "drag-drop-card__content" }, h("svg", { key: '75fe85db121bdf98d91872f847235e42f3505021', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '454bda7cf271281374b965182d15120ab00059e1', 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: '8bc44934968795b791cd4183e18f3d72f7a195de', 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: 'e17238c5e6bdb38ef75c5513c88154696a046273', class: "drag-drop-card__title" }, this.label), h("p", { key: 'b6aa94f6624a1fb09a56ca26dd31981aa56c3e8a', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()), h("p", { key: '0a6cb23bff2f8512e961cf3fae65463aec2f829e', class: "drag-drop-card__divider" }, "or"))), h("div", { key: '8ad03f8da13062f5915005c80f88d41d4adc7e83', class: "drag-drop-card__action" }, h("xplor-button", { key: '37dd6e0f4d61a6e4aa3e0648227b5c06b101d7f3', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog }))), this.currentFile && (h("div", { key: '7ab8ffd9e6fa79c3adb83127c2263dbf1c8356af', class: "file-info" }, this.showProgress() && (h("p", { key: '34e1f54d42c866012faad5462935400ad64fd69a', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: '891749a5bc2d928226cdcdf855b992a94c46ec0e', class: "file-info__card" }, h("div", { key: 'df6230a7fed1e37536756d0d2ca79a7fa0f3f3b0', class: "file-info__icon" }, h("svg", { key: '6f740a420e16cf0b8e1a008ac1e69a5356db1789', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '0cc9aa35e50ec4c04662abcef793175d56337e71', 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: 'cf0dc9b9592721a4e488fb852515273bdb5f75ad', class: "file-info__details" }, h("p", { key: '082e3dc60b75a1b889c3390c140e32e232b57bff', class: "file-info__name" }, this.currentFile.name), h("p", { key: '79da132f579221a718e4725e12dff7efb7b5f82f', 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: '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), h("p", { key: '69f3cf01f58dc8f3e2e13782be2a0274f2925a0d', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()), h("p", { key: '0a6221601983e61cb4a0afd4a5178377b59b4ce4', class: "drag-drop-card__divider" }, "or"))), h("div", { key: '164c31d1407d492e415a086ae97dc8081a32eccc', class: "drag-drop-card__action" }, h("xplor-button", { key: 'b47c05a246700472cebc32c551096ad17f12da77', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))), this.currentFile && (h("div", { key: '6e74d72d3545bc85f91a6d55865743bde26eba78', class: "file-info", "aria-live": "polite" }, this.showProgress() && (h("p", { key: '7884acf7b14ddcd052a11b53131e6fea03c0376d', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: '980b31adfde06383bdbe9d03f868a9cf907c83f8', class: "file-info__card" }, h("div", { key: 'c9ed4fc96a229e748a461d788ed60a8b7c693f7c', class: "file-info__icon", "aria-hidden": "true" }, h("svg", { key: '1749fafd0495beacdbbf2f89b2cf62c2530101db', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '1b114d4b5b0f055534ba5f6a476d413600829c74', 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: '45608139178d2d821a6aeb39d75b1aa4117ca12a', class: "file-info__details" }, h("p", { key: '66df2443dd4dd310891e30f78ccd007df726afd3', class: "file-info__name" }, this.currentFile.name), h("p", { key: 'f8efc8b19987c88e7ff7de242b7ad3df4ff5962e', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
             ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
-            : ''), this.showProgress() && (h("div", { key: 'ff641e3fb53d0089c9392f1c77e7943783fa4745', class: "file-info__progress-row" }, h("div", { key: '57bade7b09cd9700d6cdfe123b79b1f59d049b3e', class: "file-info__progress-bar" }, h("div", { key: '8119c5937118adab06ae53257374964ced4b8446', class: "file-info__progress-fill", style: { width: `${Math.min(Math.max(this.progress, 0), 100)}%` } })), h("span", { key: 'dca1ccade071119e10b724a8d0047ec966c78ed4', class: "file-info__progress-text" }, Math.round(this.progress), "%")))), h("button", { key: 'e9142fab6e8f708cdd6063c6ff3659bd8e6f77e6', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": "Remove file" }, h("svg", { key: 'bc48ad8ce10fbed57c5bcbed53d8f2931461b90e', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '514e5299c4f288807c557035a0fa6c28fa770e3d', 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: '38d92776629e98032272631ed3a26a018c2ea7cc', 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 })));
+            : ''), this.showProgress() && (h("div", { key: 'eb384d34fcb7908a39bb3dd1520389f8bc35a8fd', class: "file-info__progress-row" }, h("div", { key: 'bbfb481fa86247c231db4c7505009d1a991c85d2', 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: '8b93dcc26a1497783c4ef832b75c202e639a04ff', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), h("span", { key: 'a429605ee278d74660a717bc04765ca21af60f64', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), h("button", { key: '5ede3c138b788270b45a053ccf2504a35a5037ed', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, h("svg", { key: '0a5c03471e01b7f59dadaff6c8ea08b746c8c4c2', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '29a950f57d7a7d9aa74262f64fc055d8230e4453', 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: '437111b2dbd80a8aaf1a2a4105bc8298431b2b95', 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 style() { return xplorDragAndDropInputCss; }
 }, [2, "xplor-drag-and-drop-input", {
@@ -139,6 +141,7 @@ const XplorDragAndDropInput$1 = /*@__PURE__*/ proxyCustomElement(class XplorDrag
         "accepts": [1],
         "label": [1],
         "browseLabel": [1, "browse-label"],
+        "ariaLabel": [1, "aria-label"],
         "progress": [2],
         "dragover": [32],
         "currentFile": [32],

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

@@ -1 +1 @@
-{"file":"xplor-drag-and-drop-input.js","mappings":"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","names":["XplorDragAndDropInput","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.scss?tag=xplor-drag-and-drop-input&encapsulation=scoped","src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n  display: block;\n}\n\n.drag-drop-zone {\n  position: relative;\n  padding-bottom: spacing.$spacing-40;\n}\n\n.drag-drop-input-hidden {\n  display: none;\n}\n\n.drag-drop-card {\n  background-color: colours.$gray-100;\n  border-radius: 8px;\n  border: 2px dashed colours.$secondary;\n  min-height: 160px;\n  padding: spacing.$spacing-16 spacing.$spacing-24 spacing.$spacing-32;\n  text-align: center;\n  transition: all 0.2s ease;\n  cursor: default;\n\n  &:hover:not(&--disabled) {\n    border-color: colours.$secondary;\n    background-color: colours.$gray-200;\n  }\n\n  &--dragover {\n    border: 2px dashed colours.$secondary;\n    background-color: colours.$gray-200;\n  }\n\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n}\n\n.drag-drop-card__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: spacing.$spacing-4;\n  padding: spacing.$spacing-4 0 0;\n}\n\n.drag-drop-card__icon {\n  color: colours.$secondary;\n  width: 40px;\n  height: 40px;\n}\n\n.drag-drop-card__title {\n  color: colours.$black;\n  font-family: Inter, sans-serif;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0;\n  margin: 0;\n}\n\n.drag-drop-card__accepts,\n.drag-drop-card__divider {\n  color: colours.$black;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  margin: 0;\n}\n\n.drag-drop-card__action {\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n}\n\n// File info section (shown after file is selected)\n.file-info {\n  margin-top: spacing.$spacing-24;\n}\n\n.file-info__status {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: colours.$gray-700;\n  margin: 0 0 spacing.$spacing-8 0;\n}\n\n.file-info__card {\n  display: flex;\n  align-items: flex-start;\n  gap: spacing.$spacing-12;\n  background-color: colours.$white;\n  border: 1px solid colours.$gray-300;\n  border-radius: 8px;\n  padding: spacing.$spacing-12 spacing.$spacing-16;\n}\n\n.file-info__icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  background-color: colours.$secondary-50;\n  color: colours.$secondary;\n}\n\n.file-info__details {\n  flex: 1;\n  min-width: 0;\n}\n\n.file-info__name {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  color: colours.$black;\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-info__meta {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: colours.$secondary;\n  margin: spacing.$spacing-4 0 0 0;\n}\n\n.file-info__progress-row {\n  display: flex;\n  align-items: center;\n  gap: spacing.$spacing-8;\n  margin-top: spacing.$spacing-8;\n}\n\n.file-info__progress-bar {\n  flex: 1;\n  height: 6px;\n  background-color: colours.$gray-200;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.file-info__progress-fill {\n  height: 100%;\n  background-color: colours.$secondary;\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n\n.file-info__progress-text {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: colours.$gray-600;\n  flex-shrink: 0;\n  min-width: 32px;\n  text-align: right;\n}\n\n.file-info__remove {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: none;\n  background-color: colours.$gray-200;\n  color: colours.$gray-600;\n  cursor: pointer;\n  padding: 0;\n  transition: background-color 0.2s ease;\n\n  &:hover {\n    background-color: colours.$gray-300;\n    color: colours.$gray-800;\n  }\n}\n\n@media (max-width: 768px) {\n  .drag-drop-card {\n    min-height: 140px;\n  }\n\n  .drag-drop-card__title {\n    font-size: 16px;\n    line-height: 22px;\n  }\n\n  .drag-drop-card__accepts,\n  .drag-drop-card__divider {\n    font-size: 13px;\n    line-height: 18px;\n  }\n}\n","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   * 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    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          >\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              >\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              <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n              <p class=\"drag-drop-card__divider\">or</p>\n            </div>\n          </div>\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            ></xplor-button>\n          </div>\n        </div>\n\n        {this.currentFile && (\n          <div class=\"file-info\">\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\">\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 class=\"file-info__progress-bar\">\n                      <div\n                        class=\"file-info__progress-fill\"\n                        style={{ width: `${Math.min(Math.max(this.progress, 0), 100)}%` }}\n                      ></div>\n                    </div>\n                    <span class=\"file-info__progress-text\">{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\"\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\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        />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"xplor-drag-and-drop-input.js","mappings":"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","names":["XplorDragAndDropInput","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.scss?tag=xplor-drag-and-drop-input&encapsulation=scoped","src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n  display: block;\n}\n\n.drag-drop-zone {\n  position: relative;\n  padding-bottom: spacing.$spacing-40;\n}\n\n.drag-drop-input-hidden {\n  display: none;\n}\n\n.drag-drop-card {\n  background-color: colours.$gray-100;\n  border-radius: 8px;\n  border: 2px dashed colours.$secondary;\n  min-height: 160px;\n  padding: spacing.$spacing-16 spacing.$spacing-24 spacing.$spacing-32;\n  text-align: center;\n  transition: all 0.2s ease;\n  cursor: default;\n\n  &:hover:not(&--disabled) {\n    border-color: colours.$secondary;\n    background-color: colours.$gray-200;\n  }\n\n  &--dragover {\n    border: 2px dashed colours.$secondary;\n    background-color: colours.$gray-200;\n  }\n\n  &--disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n}\n\n.drag-drop-card__content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: spacing.$spacing-4;\n  padding: spacing.$spacing-4 0 0;\n}\n\n.drag-drop-card__icon {\n  color: colours.$secondary;\n  width: 40px;\n  height: 40px;\n}\n\n.drag-drop-card__title {\n  color: colours.$black;\n  font-family: Inter, sans-serif;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0;\n  margin: 0;\n}\n\n.drag-drop-card__accepts,\n.drag-drop-card__divider {\n  color: colours.$black;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  margin: 0;\n}\n\n.drag-drop-card__action {\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n}\n\n// File info section (shown after file is selected)\n.file-info {\n  margin-top: spacing.$spacing-24;\n}\n\n.file-info__status {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: colours.$gray-700;\n  margin: 0 0 spacing.$spacing-8 0;\n}\n\n.file-info__card {\n  display: flex;\n  align-items: flex-start;\n  gap: spacing.$spacing-12;\n  background-color: colours.$white;\n  border: 1px solid colours.$gray-300;\n  border-radius: 8px;\n  padding: spacing.$spacing-12 spacing.$spacing-16;\n}\n\n.file-info__icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  background-color: colours.$secondary-50;\n  color: colours.$secondary;\n}\n\n.file-info__details {\n  flex: 1;\n  min-width: 0;\n}\n\n.file-info__name {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  color: colours.$black;\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-info__meta {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: colours.$secondary;\n  margin: spacing.$spacing-4 0 0 0;\n}\n\n.file-info__progress-row {\n  display: flex;\n  align-items: center;\n  gap: spacing.$spacing-8;\n  margin-top: spacing.$spacing-8;\n}\n\n.file-info__progress-bar {\n  flex: 1;\n  height: 6px;\n  background-color: colours.$gray-200;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.file-info__progress-fill {\n  height: 100%;\n  background-color: colours.$secondary;\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n\n.file-info__progress-text {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: colours.$gray-600;\n  flex-shrink: 0;\n  min-width: 32px;\n  text-align: right;\n}\n\n.file-info__remove {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: none;\n  background-color: colours.$gray-200;\n  color: colours.$gray-600;\n  cursor: pointer;\n  padding: 0;\n  transition: background-color 0.2s ease;\n\n  &:hover {\n    background-color: colours.$gray-300;\n    color: colours.$gray-800;\n  }\n}\n\n@media (max-width: 768px) {\n  .drag-drop-card {\n    min-height: 140px;\n  }\n\n  .drag-drop-card__title {\n    font-size: 16px;\n    line-height: 22px;\n  }\n\n  .drag-drop-card__accepts,\n  .drag-drop-card__divider {\n    font-size: 13px;\n    line-height: 18px;\n  }\n}\n","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              <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n              <p class=\"drag-drop-card__divider\">or</p>\n            </div>\n          </div>\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\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}

package/components/xplor-expansion-panel.js

@@ -36,12 +36,12 @@ const XplorExpansionPanel$1 = /*@__PURE__*/ proxyCustomElement(class XplorExpans
                 'expansion-panel': true,
                 'expansion-panel--open': this.open,
                 'expansion-panel--disabled': this.disabled,
-            } }, h("button", { key: '4970230eb38600f662441cf741b1266af1c94221', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', type: "button" }, h("div", { key: '5e3330870f44e2f0d0e9546cc3921f999c585ad2', class: "expansion-panel__header-content" }, h("slot", { key: 'f8cf1d3dcc8201c311adb40544adc59dc10643b2', name: "header" })), h("span", { key: 'bed27404d65c83a0aed80b6f63847a3b221756c4', class: {
+            } }, h("button", { key: '5c2b82b2f13395137413e7f86160ac132c44b7ee', 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: 'c1534981f842b0b7d75a6c8135a12fb6f209639c', class: "expansion-panel__header-content" }, h("slot", { key: '01c5a0a1dfacdf730ec82dc0a09916d159d1c016', name: "header" })), h("span", { key: 'f82ea607638e601be6b956f9ad5c6d31d6461ec6', class: {
                 'expansion-panel__icon': true,
                 'expansion-panel__icon--open': this.open,
-            } }, "\u25BC")), h("div", { key: '2c39930ed945844bde37acd8eb76cc5d321fb9e1', class: "expansion-panel__content", style: {
+            } }, "\u25BC")), h("div", { key: '385abb97450d912cda5fbd3bc5a5e48ea8ce8a0d', 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: 'db622a60396115228e0a3929f1a0765b7a0bf87f', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: 'd88edfbce0ab807cdb3d21230e1e97caf6183cce' }))))));
+            } }, h("div", { key: '12c32ef07b6084b8528bf4800101afe0707adf05', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: 'a18755879b94fc09948ed8128d73cfb3b0639885' }))))));
     }
     get el() { return this; }
     static get style() { return xplorExpansionPanelCss; }

package/components/xplor-expansion-panel.js.map

@@ -1 +1 @@
-{"file":"xplor-expansion-panel.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,4yQAA4yQ;;ACE30Q,IAAI,MAAM,GAAG,CAAC;MAODA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;;AAQY,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACR,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAGrC,QAAA,IAAa,CAAA,aAAA,GAAW,CAAC;AAoB1B,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YACxB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI;AACtB,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;YAGnE,UAAU,CAAC,MAAM,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;AACnD,SAAC;AAgDJ;IAtEG,iBAAiB,GAAA;AACb,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS,MAAM,EAAE,EAAE;;IAGtC,gBAAgB,GAAA;QACZ,IAAI,CAAC,mBAAmB,EAAE;;IAGtB,mBAAmB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,YAAY;;;IAcxD,MAAM,GAAA;QACF,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,uBAAuB,EAAE,IAAI,CAAC,IAAI;gBAClC,2BAA2B,EAAE,IAAI,CAAC,QAAQ;AAC7C,aAAA,EAAA,EAED,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACR,eAAA,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC3C,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CACpB,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,uBAAuB,EAAE,IAAI;gBAC7B,6BAA6B,EAAE,IAAI,CAAC,IAAI;AAC3C,aAAA,EAAA,EAAA,QAAA,CAGE,CACF,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE;AACH,gBAAA,SAAS,EAAE,IAAI,CAAC,IAAI,GAAG,CAAG,EAAA,IAAI,CAAC,aAAa,CAAA,EAAA,CAAI,GAAG,GAAG;aACzD,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAC,gCAAgC,EACtC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAAA,EAElC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACN,CACJ,CACJ,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorExpansionPanel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-expansion-panel/xplor-expansion-panel.scss?tag=xplor-expansion-panel&encapsulation=scoped","src/components/xplor-expansion-panel/xplor-expansion-panel.tsx"],"sourcesContent":[":host {\n    display: block;\n}\n\n.expansion-panel {\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    overflow: hidden;\n\n    &+& {\n        margin-top: -1px;\n    }\n\n    &--disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n    }\n}\n\n.expansion-panel__header {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 1rem 1.5rem;\n    background-color: #f5f5f5;\n    border: none;\n    cursor: pointer;\n    text-align: left;\n    transition: background-color 0.2s;\n    font-family: inherit;\n    font-size: inherit;\n\n    &:hover:not(:disabled) {\n        background-color: #eeeeee;\n    }\n\n    &:focus {\n        outline: 2px solid #1976d2;\n        outline-offset: -2px;\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n}\n\n.expansion-panel__header-content {\n    flex: 1;\n    font-weight: 500;\n}\n\n.expansion-panel__icon {\n    display: inline-block;\n    transition: transform 0.3s ease;\n    font-size: 0.75rem;\n    margin-left: 0.5rem;\n\n    &--open {\n        transform: rotate(180deg);\n    }\n}\n\n.expansion-panel__content {\n    overflow: hidden;\n    transition: max-height 0.3s ease;\n    background-color: #fff;\n}\n\n.expansion-panel__content-inner {\n    padding: 1rem 1.5rem;\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n    tag: 'xplor-expansion-panel',\n    styleUrl: 'xplor-expansion-panel.scss',\n    scoped: true,\n})\nexport class XplorExpansionPanel {\n    @Element() el: HTMLElement;\n\n    @Prop() disabled: boolean = false;\n    @Prop({ mutable: true }) open: boolean = false;\n\n    @State() panelId: string;\n    @State() contentHeight: number = 0;\n\n    @Event() xplorPanelToggle: EventEmitter<{ id: string; isOpen: boolean }>;\n\n    private contentEl: HTMLDivElement;\n\n    componentWillLoad() {\n        this.panelId = `panel-${nextId++}`;\n    }\n\n    componentDidLoad() {\n        this.updateContentHeight();\n    }\n\n    private updateContentHeight() {\n        if (this.contentEl) {\n            this.contentHeight = this.contentEl.scrollHeight;\n        }\n    }\n\n    private handleToggle = () => {\n        if (this.disabled) return;\n\n        this.open = !this.open;\n        this.xplorPanelToggle.emit({ id: this.panelId, isOpen: this.open });\n\n        // Update height after toggle\n        setTimeout(() => this.updateContentHeight(), 0);\n    };\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'expansion-panel': true,\n                        'expansion-panel--open': this.open,\n                        'expansion-panel--disabled': this.disabled,\n                    }}\n                >\n                    <button\n                        class=\"expansion-panel__header\"\n                        onClick={this.handleToggle}\n                        disabled={this.disabled}\n                        aria-expanded={this.open ? 'true' : 'false'}\n                        type=\"button\"\n                    >\n                        <div class=\"expansion-panel__header-content\">\n                            <slot name=\"header\" />\n                        </div>\n                        <span\n                            class={{\n                                'expansion-panel__icon': true,\n                                'expansion-panel__icon--open': this.open,\n                            }}\n                        >\n                            ▼\n                        </span>\n                    </button>\n                    <div\n                        class=\"expansion-panel__content\"\n                        style={{\n                            maxHeight: this.open ? `${this.contentHeight}px` : '0',\n                        }}\n                    >\n                        <div\n                            class=\"expansion-panel__content-inner\"\n                            ref={(el) => (this.contentEl = el)}\n                        >\n                            <slot />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"xplor-expansion-panel.js","mappings":"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","names":["XplorExpansionPanel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-expansion-panel/xplor-expansion-panel.scss?tag=xplor-expansion-panel&encapsulation=scoped","src/components/xplor-expansion-panel/xplor-expansion-panel.tsx"],"sourcesContent":[":host {\n    display: block;\n}\n\n.expansion-panel {\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    overflow: hidden;\n\n    &+& {\n        margin-top: -1px;\n    }\n\n    &--disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n    }\n}\n\n.expansion-panel__header {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 1rem 1.5rem;\n    background-color: #f5f5f5;\n    border: none;\n    cursor: pointer;\n    text-align: left;\n    transition: background-color 0.2s;\n    font-family: inherit;\n    font-size: inherit;\n\n    &:hover:not(:disabled) {\n        background-color: #eeeeee;\n    }\n\n    &:focus {\n        outline: 2px solid #1976d2;\n        outline-offset: -2px;\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n}\n\n.expansion-panel__header-content {\n    flex: 1;\n    font-weight: 500;\n}\n\n.expansion-panel__icon {\n    display: inline-block;\n    transition: transform 0.3s ease;\n    font-size: 0.75rem;\n    margin-left: 0.5rem;\n\n    &--open {\n        transform: rotate(180deg);\n    }\n}\n\n.expansion-panel__content {\n    overflow: hidden;\n    transition: max-height 0.3s ease;\n    background-color: #fff;\n}\n\n.expansion-panel__content-inner {\n    padding: 1rem 1.5rem;\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\n\nlet nextId = 0;\n\n@Component({\n    tag: 'xplor-expansion-panel',\n    styleUrl: 'xplor-expansion-panel.scss',\n    scoped: true,\n})\nexport class XplorExpansionPanel {\n    @Element() el: HTMLElement;\n\n    @Prop() disabled: boolean = false;\n    @Prop({ mutable: true }) open: boolean = false;\n\n    @State() panelId: string;\n    @State() contentHeight: number = 0;\n\n    @Event() xplorPanelToggle: EventEmitter<{ id: string; isOpen: boolean }>;\n\n    private contentEl: HTMLDivElement;\n\n    componentWillLoad() {\n        this.panelId = `panel-${nextId++}`;\n    }\n\n    componentDidLoad() {\n        this.updateContentHeight();\n    }\n\n    private updateContentHeight() {\n        if (this.contentEl) {\n            this.contentHeight = this.contentEl.scrollHeight;\n        }\n    }\n\n    private handleToggle = () => {\n        if (this.disabled) return;\n\n        this.open = !this.open;\n        this.xplorPanelToggle.emit({ id: this.panelId, isOpen: this.open });\n\n        // Update height after toggle\n        setTimeout(() => this.updateContentHeight(), 0);\n    };\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'expansion-panel': true,\n                        'expansion-panel--open': this.open,\n                        'expansion-panel--disabled': this.disabled,\n                    }}\n                >\n                    <button\n                        class=\"expansion-panel__header\"\n                        onClick={this.handleToggle}\n                        disabled={this.disabled}\n                        aria-expanded={this.open ? 'true' : 'false'}\n                        aria-controls={`${this.panelId}-content`}\n                        type=\"button\"\n                    >\n                        <div class=\"expansion-panel__header-content\">\n                            <slot name=\"header\" />\n                        </div>\n                        <span\n                            class={{\n                                'expansion-panel__icon': true,\n                                'expansion-panel__icon--open': this.open,\n                            }}\n                        >\n                            ▼\n                        </span>\n                    </button>\n                    <div\n                        class=\"expansion-panel__content\"\n                        id={`${this.panelId}-content`}\n                        role=\"region\"\n                        aria-labelledby={this.panelId}\n                        style={{\n                            maxHeight: this.open ? `${this.contentHeight}px` : '0',\n                        }}\n                    >\n                        <div\n                            class=\"expansion-panel__content-inner\"\n                            ref={(el) => (this.contentEl = el)}\n                        >\n                            <slot />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/components/xplor-expansion-panels.js

@@ -38,7 +38,7 @@ const XplorExpansionPanels$1 = /*@__PURE__*/ proxyCustomElement(class XplorExpan
         this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';
     }
     render() {
-        return (h(Host, { key: 'c55c8eef4f6f134c83f2f8dffcb434401596a095' }, h("div", { key: '6611efdac4749c89180d34af7893577e09356ed1', class: "expansion-panels" }, h("slot", { key: 'ef8283e142cbd8fd6535c85a939455d99bdcc33e' }))));
+        return (h(Host, { key: 'c55c8eef4f6f134c83f2f8dffcb434401596a095' }, h("div", { key: 'd29c006de658c679ce5cfa2a465b9e5756b8bba5', class: "expansion-panels", "aria-label": "Accordion" }, h("slot", { key: '32560ca5fa3b041e6e1f5f8011df9fef8f50cc6f' }))));
     }
     static get style() { return xplorExpansionPanelsCss; }
 }, [6, "xplor-expansion-panels", {

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

@@ -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}
+{"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

@@ -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", {