@xplor-education/core-stencil-components 3.2.1 → 3.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/components/{p-D1Gio4_d.js → p-Dxhn9FLU.js} +5 -3
  2. package/components/p-Dxhn9FLU.js.map +1 -0
  3. package/components/xplor-btn-tooltip.js +1 -1
  4. package/components/xplor-button.js +1 -1
  5. package/components/xplor-chat-widget.js +1 -1
  6. package/components/xplor-drag-and-drop-input.js +8 -4
  7. package/components/xplor-drag-and-drop-input.js.map +1 -1
  8. package/components/xplor-input-send.js +1 -1
  9. package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js +10 -4
  10. package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js.map +1 -1
  11. package/dist/collection/components/xplor-button/xplor-button.js +7 -4
  12. package/dist/collection/components/xplor-button/xplor-button.js.map +1 -1
  13. package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js +11 -6
  14. package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js.map +1 -1
  15. package/dist/components/{p-Cv5--wGB.js → p-hygTyb6H.js} +5 -3
  16. package/dist/components/p-hygTyb6H.js.map +1 -0
  17. package/dist/components/xplor-btn-tooltip.js +1 -1
  18. package/dist/components/xplor-button.js +1 -1
  19. package/dist/components/xplor-chat-widget.js +1 -1
  20. package/dist/components/xplor-drag-and-drop-input.js +8 -4
  21. package/dist/components/xplor-drag-and-drop-input.js.map +1 -1
  22. package/dist/components/xplor-input-send.js +1 -1
  23. package/dist/esm/xplor-alert-dialog_60.entry.js +10 -4
  24. package/dist/esm/xplor-alert-dialog_60.entry.js.map +1 -1
  25. package/dist/hydrate/index.js +10 -4
  26. package/dist/hydrate/index.mjs +10 -4
  27. package/dist/types/components/xplor-button/xplor-button.d.ts +1 -1
  28. package/dist/types/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.d.ts +1 -1
  29. package/dist/types/components.d.ts +8 -4
  30. package/dist/xplor-component-library/p-9499d15d.entry.js +2 -0
  31. package/dist/xplor-component-library/p-9499d15d.entry.js.map +1 -0
  32. package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
  33. package/package.json +1 -1
  34. package/components/p-D1Gio4_d.js.map +0 -1
  35. package/dist/components/p-Cv5--wGB.js.map +0 -1
  36. package/dist/xplor-component-library/p-e5a96114.entry.js +0 -2
  37. package/dist/xplor-component-library/p-e5a96114.entry.js.map +0 -1
@@ -5410,6 +5410,8 @@ class XplorButton {
5410
5410
  registerInstance(this, hostRef);
5411
5411
  this.type = 'secondary';
5412
5412
  this.mode = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')
5413
+ /** Accessible label for icon-only buttons */
5414
+ this.ariaLabel = null;
5413
5415
  /** Whether the button is disabled */
5414
5416
  this.disabled = false;
5415
5417
  /** Whether the button stretches to full width of its container */
@@ -5435,7 +5437,7 @@ class XplorButton {
5435
5437
  const isFullWidth = this.fullWidth || this.fullWidthAttr;
5436
5438
  const isIconOnly = !this.text && this.iconPosition !== null;
5437
5439
  const hasIcon = this.iconPosition !== null;
5438
- return (hAsync(Host, { key: '34e4c56a387bfb7b1c0f283d1484a85da2cbdc4a', class: { 'x-button--full-width': isFullWidth } }, hAsync("slot", { key: '1caaaa71b289e389a9ca2a4e7a65d4c3a2573792' }, hAsync("button", { key: '719ea7a1a260c481bdabe70bee765a35d7da8b25', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && hAsync("span", { key: 'a3ca7d26488c993ec9fd6a10483d8ab28351dc19', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
5440
+ return (hAsync(Host, { key: '7e1c935559697792d2309c397baa4c9614afc136', class: { 'x-button--full-width': isFullWidth } }, hAsync("slot", { key: 'c4b12ac8a43aa8640b5f1b46d2eec44ae0b52c3a' }, hAsync("button", { key: '4bf6b7c8ab48618a343481f3c603f3d48fafbe6a', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && hAsync("span", { key: '09bbac7ae367a56a5a23ff5d010ee453ddc09499', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
5439
5441
  }
5440
5442
  static get style() { return xplorButtonCss; }
5441
5443
  static get cmpMeta() { return {
@@ -6781,6 +6783,10 @@ class XplorDragAndDropInput {
6781
6783
  * Browse button label text
6782
6784
  */
6783
6785
  this.browseLabel = 'Browse Files';
6786
+ /**
6787
+ * Accessible label for the drop zone area
6788
+ */
6789
+ this.ariaLabel = null;
6784
6790
  /**
6785
6791
  * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.
6786
6792
  */
@@ -6913,13 +6919,13 @@ class XplorDragAndDropInput {
6913
6919
  render() {
6914
6920
  const progressValue = Math.min(Math.max(this.progress, 0), 100);
6915
6921
  const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;
6916
- return (hAsync(Host, { key: '7322fb9a59fb4de064f9aef409b5d79065c582c0' }, hAsync("div", { key: '76ddea3497c936c4157542396696bb034b518bea', class: { 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal } }, hAsync("div", { key: '4ee981782affa2e2c602dd596383e795cae64f2c', class: {
6922
+ return (hAsync(Host, { key: '2eacbaaed09889dd61176cb1f40a1f6d57a500eb' }, hAsync("div", { key: '52736f49694809e2f1e6109938b8c6c20a5a310a', class: { 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal } }, hAsync("div", { key: '601660ed6210fd827ea1f70a6150386fde0cbe85', class: {
6917
6923
  'drag-drop-card': true,
6918
6924
  'drag-drop-card--dragover': this.dragover,
6919
6925
  'drag-drop-card--disabled': this.disabled,
6920
- }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, hAsync("div", { key: '6a10a64f07372fe6fb81b894a7910c523085eb71', class: "drag-drop-card__content" }, hAsync("div", { key: 'd145c8e9039d4069d4ce297c1e1f23d47ce31247', class: "drag-drop-card__body" }, hAsync("svg", { key: '10e3924771bde6f49a0f420f1fb4123adeaa71d2', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, hAsync("path", { key: '6580c86fe7a923d815721c9be369fff81b1e1679', 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" }), hAsync("path", { key: '75560ba31ffd985c15bb2dd6f9d77d391262c7e4', 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" })), hAsync("div", { key: '4ee328b91074fdec3e449fc7bf7e8d0168e2d4a5', class: "drag-drop-card__text" }, hAsync("h3", { key: '352e69f7ab3e83e5359d1e3607c74665322236b2', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL$1 && (hAsync("p", { key: 'ea5eaa0d9fc84ef56a2b86a46739ee186d380903', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())))), hAsync("p", { key: '5946aadcea2c0b8facd54d64959734c1237f2c73', class: "drag-drop-card__divider" }, "or"), hAsync("div", { key: 'c13a5e4ee9fe38453a8f10d5c85c86b359391ac0', class: "drag-drop-card__action" }, hAsync("xplor-button", { key: '2ab4d207830d0134c0b50a5e3b6db47d59ecc500', text: this.browseLabel, type: this.disabled ? 'disabled' : 'primary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (hAsync("div", { key: '63c00c31575f405946c612cc2881c2f3d0655abe', class: "file-info", "aria-live": "polite" }, this.showProgress() && (hAsync("p", { key: '91a5ac3cc12012bf5c6bf9902b1196a8196542cc', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), hAsync("div", { key: '518ad778b028bee52d37b75c35c67ab6b4c3701d', class: "file-info__card" }, hAsync("div", { key: 'd7b7b360e696fc82ac445bb8184afea0e11237a0', class: "file-info__icon", "aria-hidden": "true" }, hAsync("svg", { key: '24927788542297a284b2b118e5be3c47f82184f5', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: '8adcc982c2352d76645f05d6c9b3b580c52db61a', 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" }))), hAsync("div", { key: '03ce7a21309091deb902a93d6789fac541045fcd', class: "file-info__details" }, hAsync("p", { key: 'bfa2d9b8fec4f6d4c3a42e2b5034aaa51601da83', class: "file-info__name" }, this.currentFile.name), hAsync("p", { key: '1309f44f043fc6cedaeb1c8b64761858c1137be4', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
6926
+ }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, hAsync("div", { key: '326beba09aea9a50c8a4d1eaaabf3a089f39c7bb', class: "drag-drop-card__content" }, hAsync("div", { key: '44cb69927785334d44183448a70f4fdaea84d4f9', class: "drag-drop-card__body" }, hAsync("svg", { key: '5034f7cb9abed8ce8096b89a6b197e79adc3182b', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, hAsync("path", { key: '12c4a69b0d769f0b0219134f8f43b98d95872a98', 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" }), hAsync("path", { key: '464d590b120bc66cb00de7a725dacd3d4876588e', 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" })), hAsync("div", { key: 'c12e46bb7cd3fa26972ab594ea64f06a05908058', class: "drag-drop-card__text" }, hAsync("h3", { key: 'd9432f6f3f3a7710a2ef29aed828ef44c76658b1', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL$1 && (hAsync("p", { key: '917e60a73fb80146438559d9f9b1d962e6be3aaa', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())))), hAsync("p", { key: 'f45e185338d8385291aa8e561e573d5a053ff97e', class: "drag-drop-card__divider" }, "or"), hAsync("div", { key: '7a9ad643e13cce967e34299a43967cc757be9020', class: "drag-drop-card__action" }, hAsync("xplor-button", { key: 'e392d2e3779f07834412ece1abce688894ecce22', text: this.browseLabel, type: this.disabled ? 'disabled' : 'primary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (hAsync("div", { key: '6bc899dd7cd5fc411934dd03b81d0c85c93d6fb4', class: "file-info", "aria-live": "polite" }, this.showProgress() && (hAsync("p", { key: '262868b9829c96965c68e01d6a4ae17eca16c2c9', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), hAsync("div", { key: 'e2213c9e6c37abbd06d6c4c4553b6a1e120c64b8', class: "file-info__card" }, hAsync("div", { key: '3ff619277dfcf66664f80df52ec729572d2e2d37', class: "file-info__icon", "aria-hidden": "true" }, hAsync("svg", { key: 'c7ede2f02ec8cc66b6c2145f4c2342f9a675835b', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: '876db2e41243a14330e435fffbdea712ff1dadba', 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" }))), hAsync("div", { key: 'c704971c9290828ae4ed4385f72fce2cead6bb70', class: "file-info__details" }, hAsync("p", { key: '4a5004f7928e7edc25d1081ce8d8bddd7163d7b8', class: "file-info__name" }, this.currentFile.name), hAsync("p", { key: 'e0781583e2f7021c8c389745ae2d6b25ecc9fba9', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
6921
6927
  ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
6922
- : ''), this.showProgress() && (hAsync("div", { key: '62d66967f2caa269f84cea180e87d98323e01e82', class: "file-info__progress-row" }, hAsync("div", { key: '8ce40f55abe16d242c4fd731217bf8523bb3c0ab', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, hAsync("div", { key: 'b334df44deae404521c06dd173ca0edf1807b52b', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), hAsync("span", { key: '87b21354502996ed22e0be869f3e125d58f55021', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), hAsync("button", { key: 'd928ab52e06cd1db77c88fe493edd76d2ec003c4', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, hAsync("svg", { key: '8ff231fdc041e742d8b802d7dc50b8e97146d726', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, hAsync("path", { key: '74037d953c67cdb775415cb2245f08d48899d9b3', 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" })))))), hAsync("input", { key: '949268f0008f09aa5ea1dbbfc77a9fd8a5512280', 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 })));
6928
+ : ''), this.showProgress() && (hAsync("div", { key: '893e2190e9b62fb4817824aef28f6f24d89688ba', class: "file-info__progress-row" }, hAsync("div", { key: '4bb48687b4a39bb5b261936f3e6073be44aeed42', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, hAsync("div", { key: 'fff1ddc5c5913c4928f4afd38bbdc4aec46c5978', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), hAsync("span", { key: '0325aeb98bef764a685d46c03da1ccd1c41a9301', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), hAsync("button", { key: 'ba5c770c340a739041d387204b582cd5a819e7ad', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, hAsync("svg", { key: '03e8a7b0f531a73e3892f113ee2dab6e44db65c2', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, hAsync("path", { key: 'c122d5436ca8695d6d9ffc84f1b53612d14aa0b9', 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" })))))), hAsync("input", { key: 'bec810bcee088ac73b13b8e9c52e4532e5c66ede', 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 })));
6923
6929
  }
6924
6930
  get el() { return getElement(this); }
6925
6931
  static get style() { return xplorDragAndDropInputCss; }
@@ -5408,6 +5408,8 @@ class XplorButton {
5408
5408
  registerInstance(this, hostRef);
5409
5409
  this.type = 'secondary';
5410
5410
  this.mode = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')
5411
+ /** Accessible label for icon-only buttons */
5412
+ this.ariaLabel = null;
5411
5413
  /** Whether the button is disabled */
5412
5414
  this.disabled = false;
5413
5415
  /** Whether the button stretches to full width of its container */
@@ -5433,7 +5435,7 @@ class XplorButton {
5433
5435
  const isFullWidth = this.fullWidth || this.fullWidthAttr;
5434
5436
  const isIconOnly = !this.text && this.iconPosition !== null;
5435
5437
  const hasIcon = this.iconPosition !== null;
5436
- return (hAsync(Host, { key: '34e4c56a387bfb7b1c0f283d1484a85da2cbdc4a', class: { 'x-button--full-width': isFullWidth } }, hAsync("slot", { key: '1caaaa71b289e389a9ca2a4e7a65d4c3a2573792' }, hAsync("button", { key: '719ea7a1a260c481bdabe70bee765a35d7da8b25', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && hAsync("span", { key: 'a3ca7d26488c993ec9fd6a10483d8ab28351dc19', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
5438
+ return (hAsync(Host, { key: '7e1c935559697792d2309c397baa4c9614afc136', class: { 'x-button--full-width': isFullWidth } }, hAsync("slot", { key: 'c4b12ac8a43aa8640b5f1b46d2eec44ae0b52c3a' }, hAsync("button", { key: '4bf6b7c8ab48618a343481f3c603f3d48fafbe6a', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'x-button--full-width': isFullWidth, 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && hAsync("span", { key: '09bbac7ae367a56a5a23ff5d010ee453ddc09499', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
5437
5439
  }
5438
5440
  static get style() { return xplorButtonCss; }
5439
5441
  static get cmpMeta() { return {
@@ -6779,6 +6781,10 @@ class XplorDragAndDropInput {
6779
6781
  * Browse button label text
6780
6782
  */
6781
6783
  this.browseLabel = 'Browse Files';
6784
+ /**
6785
+ * Accessible label for the drop zone area
6786
+ */
6787
+ this.ariaLabel = null;
6782
6788
  /**
6783
6789
  * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.
6784
6790
  */
@@ -6911,13 +6917,13 @@ class XplorDragAndDropInput {
6911
6917
  render() {
6912
6918
  const progressValue = Math.min(Math.max(this.progress, 0), 100);
6913
6919
  const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;
6914
- return (hAsync(Host, { key: '7322fb9a59fb4de064f9aef409b5d79065c582c0' }, hAsync("div", { key: '76ddea3497c936c4157542396696bb034b518bea', class: { 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal } }, hAsync("div", { key: '4ee981782affa2e2c602dd596383e795cae64f2c', class: {
6920
+ return (hAsync(Host, { key: '2eacbaaed09889dd61176cb1f40a1f6d57a500eb' }, hAsync("div", { key: '52736f49694809e2f1e6109938b8c6c20a5a310a', class: { 'drag-drop-zone': true, 'drag-drop-zone--horizontal': this.horizontal } }, hAsync("div", { key: '601660ed6210fd827ea1f70a6150386fde0cbe85', class: {
6915
6921
  'drag-drop-card': true,
6916
6922
  'drag-drop-card--dragover': this.dragover,
6917
6923
  'drag-drop-card--disabled': this.disabled,
6918
- }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, hAsync("div", { key: '6a10a64f07372fe6fb81b894a7910c523085eb71', class: "drag-drop-card__content" }, hAsync("div", { key: 'd145c8e9039d4069d4ce297c1e1f23d47ce31247', class: "drag-drop-card__body" }, hAsync("svg", { key: '10e3924771bde6f49a0f420f1fb4123adeaa71d2', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, hAsync("path", { key: '6580c86fe7a923d815721c9be369fff81b1e1679', 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" }), hAsync("path", { key: '75560ba31ffd985c15bb2dd6f9d77d391262c7e4', 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" })), hAsync("div", { key: '4ee328b91074fdec3e449fc7bf7e8d0168e2d4a5', class: "drag-drop-card__text" }, hAsync("h3", { key: '352e69f7ab3e83e5359d1e3607c74665322236b2', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL$1 && (hAsync("p", { key: 'ea5eaa0d9fc84ef56a2b86a46739ee186d380903', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())))), hAsync("p", { key: '5946aadcea2c0b8facd54d64959734c1237f2c73', class: "drag-drop-card__divider" }, "or"), hAsync("div", { key: 'c13a5e4ee9fe38453a8f10d5c85c86b359391ac0', class: "drag-drop-card__action" }, hAsync("xplor-button", { key: '2ab4d207830d0134c0b50a5e3b6db47d59ecc500', text: this.browseLabel, type: this.disabled ? 'disabled' : 'primary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (hAsync("div", { key: '63c00c31575f405946c612cc2881c2f3d0655abe', class: "file-info", "aria-live": "polite" }, this.showProgress() && (hAsync("p", { key: '91a5ac3cc12012bf5c6bf9902b1196a8196542cc', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), hAsync("div", { key: '518ad778b028bee52d37b75c35c67ab6b4c3701d', class: "file-info__card" }, hAsync("div", { key: 'd7b7b360e696fc82ac445bb8184afea0e11237a0', class: "file-info__icon", "aria-hidden": "true" }, hAsync("svg", { key: '24927788542297a284b2b118e5be3c47f82184f5', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: '8adcc982c2352d76645f05d6c9b3b580c52db61a', 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" }))), hAsync("div", { key: '03ce7a21309091deb902a93d6789fac541045fcd', class: "file-info__details" }, hAsync("p", { key: 'bfa2d9b8fec4f6d4c3a42e2b5034aaa51601da83', class: "file-info__name" }, this.currentFile.name), hAsync("p", { key: '1309f44f043fc6cedaeb1c8b64761858c1137be4', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
6924
+ }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, hAsync("div", { key: '326beba09aea9a50c8a4d1eaaabf3a089f39c7bb', class: "drag-drop-card__content" }, hAsync("div", { key: '44cb69927785334d44183448a70f4fdaea84d4f9', class: "drag-drop-card__body" }, hAsync("svg", { key: '5034f7cb9abed8ce8096b89a6b197e79adc3182b', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, hAsync("path", { key: '12c4a69b0d769f0b0219134f8f43b98d95872a98', 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" }), hAsync("path", { key: '464d590b120bc66cb00de7a725dacd3d4876588e', 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" })), hAsync("div", { key: 'c12e46bb7cd3fa26972ab594ea64f06a05908058', class: "drag-drop-card__text" }, hAsync("h3", { key: 'd9432f6f3f3a7710a2ef29aed828ef44c76658b1', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL$1 && (hAsync("p", { key: '917e60a73fb80146438559d9f9b1d962e6be3aaa', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())))), hAsync("p", { key: 'f45e185338d8385291aa8e561e573d5a053ff97e', class: "drag-drop-card__divider" }, "or"), hAsync("div", { key: '7a9ad643e13cce967e34299a43967cc757be9020', class: "drag-drop-card__action" }, hAsync("xplor-button", { key: 'e392d2e3779f07834412ece1abce688894ecce22', text: this.browseLabel, type: this.disabled ? 'disabled' : 'primary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (hAsync("div", { key: '6bc899dd7cd5fc411934dd03b81d0c85c93d6fb4', class: "file-info", "aria-live": "polite" }, this.showProgress() && (hAsync("p", { key: '262868b9829c96965c68e01d6a4ae17eca16c2c9', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), hAsync("div", { key: 'e2213c9e6c37abbd06d6c4c4553b6a1e120c64b8', class: "file-info__card" }, hAsync("div", { key: '3ff619277dfcf66664f80df52ec729572d2e2d37', class: "file-info__icon", "aria-hidden": "true" }, hAsync("svg", { key: 'c7ede2f02ec8cc66b6c2145f4c2342f9a675835b', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: '876db2e41243a14330e435fffbdea712ff1dadba', 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" }))), hAsync("div", { key: 'c704971c9290828ae4ed4385f72fce2cead6bb70', class: "file-info__details" }, hAsync("p", { key: '4a5004f7928e7edc25d1081ce8d8bddd7163d7b8', class: "file-info__name" }, this.currentFile.name), hAsync("p", { key: 'e0781583e2f7021c8c389745ae2d6b25ecc9fba9', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
6919
6925
  ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
6920
- : ''), this.showProgress() && (hAsync("div", { key: '62d66967f2caa269f84cea180e87d98323e01e82', class: "file-info__progress-row" }, hAsync("div", { key: '8ce40f55abe16d242c4fd731217bf8523bb3c0ab', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, hAsync("div", { key: 'b334df44deae404521c06dd173ca0edf1807b52b', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), hAsync("span", { key: '87b21354502996ed22e0be869f3e125d58f55021', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), hAsync("button", { key: 'd928ab52e06cd1db77c88fe493edd76d2ec003c4', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, hAsync("svg", { key: '8ff231fdc041e742d8b802d7dc50b8e97146d726', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, hAsync("path", { key: '74037d953c67cdb775415cb2245f08d48899d9b3', 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" })))))), hAsync("input", { key: '949268f0008f09aa5ea1dbbfc77a9fd8a5512280', 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 })));
6926
+ : ''), this.showProgress() && (hAsync("div", { key: '893e2190e9b62fb4817824aef28f6f24d89688ba', class: "file-info__progress-row" }, hAsync("div", { key: '4bb48687b4a39bb5b261936f3e6073be44aeed42', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, hAsync("div", { key: 'fff1ddc5c5913c4928f4afd38bbdc4aec46c5978', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), hAsync("span", { key: '0325aeb98bef764a685d46c03da1ccd1c41a9301', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), hAsync("button", { key: 'ba5c770c340a739041d387204b582cd5a819e7ad', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, hAsync("svg", { key: '03e8a7b0f531a73e3892f113ee2dab6e44db65c2', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, hAsync("path", { key: 'c122d5436ca8695d6d9ffc84f1b53612d14aa0b9', 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" })))))), hAsync("input", { key: 'bec810bcee088ac73b13b8e9c52e4532e5c66ede', 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 })));
6921
6927
  }
6922
6928
  get el() { return getElement(this); }
6923
6929
  static get style() { return xplorDragAndDropInputCss; }
@@ -6,7 +6,7 @@ export declare class XplorButton {
6
6
  styles?: string;
7
7
  clickAction?: () => void;
8
8
  /** Accessible label for icon-only buttons */
9
- ariaLabel?: string;
9
+ ariaLabel: string | null;
10
10
  /** Whether the button is disabled */
11
11
  disabled: boolean;
12
12
  /** Whether the button stretches to full width of its container */
@@ -19,7 +19,7 @@ export declare class XplorDragAndDropInput {
19
19
  /**
20
20
  * Accessible label for the drop zone area
21
21
  */
22
- ariaLabel?: string;
22
+ ariaLabel: string | null;
23
23
  /**
24
24
  * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.
25
25
  */
@@ -476,8 +476,9 @@ export namespace Components {
476
476
  interface XplorButton {
477
477
  /**
478
478
  * Accessible label for icon-only buttons
479
+ * @default null
479
480
  */
480
- "ariaLabel"?: string;
481
+ "ariaLabel": string | null;
481
482
  "clickAction"?: () => void;
482
483
  /**
483
484
  * Whether the button is disabled
@@ -782,8 +783,9 @@ export namespace Components {
782
783
  "accepts": string;
783
784
  /**
784
785
  * Accessible label for the drop zone area
786
+ * @default null
785
787
  */
786
- "ariaLabel"?: string;
788
+ "ariaLabel": string | null;
787
789
  /**
788
790
  * Browse button label text
789
791
  * @default 'Browse Files'
@@ -3301,8 +3303,9 @@ declare namespace LocalJSX {
3301
3303
  interface XplorButton {
3302
3304
  /**
3303
3305
  * Accessible label for icon-only buttons
3306
+ * @default null
3304
3307
  */
3305
- "ariaLabel"?: string;
3308
+ "ariaLabel"?: string | null;
3306
3309
  "clickAction"?: () => void;
3307
3310
  /**
3308
3311
  * Whether the button is disabled
@@ -3637,8 +3640,9 @@ declare namespace LocalJSX {
3637
3640
  "accepts"?: string;
3638
3641
  /**
3639
3642
  * Accessible label for the drop zone area
3643
+ * @default null
3640
3644
  */
3641
- "ariaLabel"?: string;
3645
+ "ariaLabel"?: string | null;
3642
3646
  /**
3643
3647
  * Browse button label text
3644
3648
  * @default 'Browse Files'